@infineon/infineon-design-system-stencil 36.0.1--canary.1935.77c36513858c80d14aa68b5d03acece9da06c973.0 → 36.1.0--canary.1904.271bdcd0dfd5e73c0033e8c6aaf1cf8e19d645b2.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/dom-utils-2c4573c2.js +20 -0
- package/dist/cjs/dom-utils-2c4573c2.js.map +1 -0
- package/dist/cjs/ifx-accordion_2.cjs.entry.js +8 -1
- package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-alert_2.cjs.entry.js +6 -0
- package/dist/cjs/ifx-alert_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-badge.cjs.entry.js +9 -1
- package/dist/cjs/ifx-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-basic-table.cjs.entry.js +6 -1
- package/dist/cjs/ifx-basic-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js +8 -1
- package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-button.cjs.entry.js +6 -1
- package/dist/cjs/ifx-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-card.cjs.entry.js +8 -3
- package/dist/cjs/ifx-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-checkbox-group.cjs.entry.js +6 -1
- package/dist/cjs/ifx-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-checkbox.cjs.entry.js +8 -3
- package/dist/cjs/ifx-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-chip_3.cjs.entry.js +17 -9
- package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-content-switcher.cjs.entry.js +6 -1
- package/dist/cjs/ifx-content-switcher.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-date-picker.cjs.entry.js +9 -2
- package/dist/cjs/ifx-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-dropdown.cjs.entry.js +6 -1
- package/dist/cjs/ifx-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-file-upload.cjs.entry.js +9 -2
- package/dist/cjs/ifx-file-upload.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-footer.cjs.entry.js +9 -4
- package/dist/cjs/ifx-footer.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-icon-button.cjs.entry.js +6 -1
- package/dist/cjs/ifx-icon-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-icon.cjs.entry.js +31 -1
- package/dist/cjs/ifx-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-indicator.cjs.entry.js +7 -2
- package/dist/cjs/ifx-indicator.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-link.cjs.entry.js +9 -1
- package/dist/cjs/ifx-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-modal.cjs.entry.js +9 -2
- package/dist/cjs/ifx-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-multiselect.cjs.entry.js +5 -0
- package/dist/cjs/ifx-multiselect.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-navbar.cjs.entry.js +5 -3
- package/dist/cjs/ifx-navbar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-notification.cjs.entry.js +10 -2
- package/dist/cjs/ifx-notification.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js +7 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js +6 -1
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-radio-button.cjs.entry.js +7 -2
- package/dist/cjs/ifx-radio-button.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-bar.cjs.entry.js +6 -1
- package/dist/cjs/ifx-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-search-field.cjs.entry.js +9 -1
- package/dist/cjs/ifx-search-field.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-segmented-control.cjs.entry.js +9 -2
- package/dist/cjs/ifx-segmented-control.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-select.cjs.entry.js +7 -2
- package/dist/cjs/ifx-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-sidebar.cjs.entry.js +7 -5
- package/dist/cjs/ifx-sidebar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-slider.cjs.entry.js +7 -2
- package/dist/cjs/ifx-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-spinner_2.cjs.entry.js +17 -6
- package/dist/cjs/ifx-spinner_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-status.cjs.entry.js +9 -1
- package/dist/cjs/ifx-status.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-stepper.cjs.entry.js +7 -2
- package/dist/cjs/ifx-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-switch.cjs.entry.js +6 -1
- package/dist/cjs/ifx-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +7 -2
- package/dist/cjs/ifx-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tabs.cjs.entry.js +7 -2
- package/dist/cjs/ifx-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tag.cjs.entry.js +9 -1
- package/dist/cjs/ifx-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +6 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tooltip.cjs.entry.js +9 -4
- package/dist/cjs/ifx-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tree-view.cjs.entry.js +9 -1
- package/dist/cjs/ifx-tree-view.cjs.entry.js.map +1 -1
- package/dist/cjs/tracking-f00364dc.js +41 -0
- package/dist/cjs/tracking-f00364dc.js.map +1 -0
- package/dist/collection/components/accordion/accordion.js +8 -2
- package/dist/collection/components/accordion/accordion.js.map +1 -1
- package/dist/collection/components/alert/alert.js +6 -0
- package/dist/collection/components/alert/alert.js.map +1 -1
- package/dist/collection/components/badge/badge.js +9 -1
- package/dist/collection/components/badge/badge.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +8 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/collection/components/button/button.js +6 -1
- package/dist/collection/components/button/button.js.map +1 -1
- package/dist/collection/components/card/card.js +8 -3
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.js +8 -3
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/checkbox-group/checkbox-group.js +6 -1
- package/dist/collection/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/collection/components/chip/chip.js +13 -8
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/content-switcher/content-switcher.js +6 -1
- package/dist/collection/components/content-switcher/content-switcher.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.js +9 -2
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.js +6 -1
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/file-upload/file-upload.js +9 -2
- package/dist/collection/components/file-upload/file-upload.js.map +1 -1
- package/dist/collection/components/footer/footer.js +9 -4
- package/dist/collection/components/footer/footer.js.map +1 -1
- package/dist/collection/components/icon/infineonIconStencil.js +31 -1
- package/dist/collection/components/icon/infineonIconStencil.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.js +6 -1
- package/dist/collection/components/icon-button/icon-button.js.map +1 -1
- package/dist/collection/components/indicator/indicator.js +7 -2
- package/dist/collection/components/indicator/indicator.js.map +1 -1
- package/dist/collection/components/link/link.js +9 -1
- package/dist/collection/components/link/link.js.map +1 -1
- package/dist/collection/components/modal/modal.js +9 -2
- package/dist/collection/components/modal/modal.js.map +1 -1
- package/dist/collection/components/navigation/navbar/navbar.js +5 -3
- package/dist/collection/components/navigation/navbar/navbar.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar.js +7 -5
- package/dist/collection/components/navigation/sidebar/sidebar.js.map +1 -1
- package/dist/collection/components/notification/notification.js +10 -2
- package/dist/collection/components/notification/notification.js.map +1 -1
- package/dist/collection/components/pagination/pagination.js +6 -1
- package/dist/collection/components/pagination/pagination.js.map +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +7 -1
- package/dist/collection/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.js +7 -2
- package/dist/collection/components/radio-button/radio-button.js.map +1 -1
- package/dist/collection/components/radio-button-group/radio-button-group.js +6 -1
- package/dist/collection/components/radio-button-group/radio-button-group.js.map +1 -1
- package/dist/collection/components/search-bar/search-bar.js +6 -1
- package/dist/collection/components/search-bar/search-bar.js.map +1 -1
- package/dist/collection/components/search-field/search-field.js +9 -1
- package/dist/collection/components/search-field/search-field.js.map +1 -1
- package/dist/collection/components/segmented-control/segmented-control.js +9 -2
- package/dist/collection/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/collection/components/select/multi-select/multiselect.js +5 -0
- package/dist/collection/components/select/multi-select/multiselect.js.map +1 -1
- package/dist/collection/components/select/single-select/select.js +7 -2
- package/dist/collection/components/select/single-select/select.js.map +1 -1
- package/dist/collection/components/slider/slider.js +7 -2
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/collection/components/spinner/spinner.js +10 -2
- package/dist/collection/components/spinner/spinner.js.map +1 -1
- package/dist/collection/components/status/status.js +9 -1
- package/dist/collection/components/status/status.js.map +1 -1
- package/dist/collection/components/stepper/stepper.js +7 -2
- package/dist/collection/components/stepper/stepper.js.map +1 -1
- package/dist/collection/components/switch/switch.js +6 -1
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/collection/components/table-advanced-version/table.js +7 -2
- package/dist/collection/components/table-advanced-version/table.js.map +1 -1
- package/dist/collection/components/table-basic-version/table.js +6 -1
- package/dist/collection/components/table-basic-version/table.js.map +1 -1
- package/dist/collection/components/tabs/tabs.js +7 -3
- package/dist/collection/components/tabs/tabs.js.map +1 -1
- package/dist/collection/components/tag/tag.js +9 -1
- package/dist/collection/components/tag/tag.js.map +1 -1
- package/dist/collection/components/text-field/text-field.js +9 -4
- package/dist/collection/components/text-field/text-field.js.map +1 -1
- package/dist/collection/components/textarea/textarea.js +6 -1
- package/dist/collection/components/textarea/textarea.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.js +9 -4
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/components/tree-view/tree-view.js +9 -1
- package/dist/collection/components/tree-view/tree-view.js.map +1 -1
- package/dist/collection/global/utils/dom-utils.js +15 -0
- package/dist/collection/global/utils/dom-utils.js.map +1 -0
- package/dist/collection/global/utils/tracking.js +37 -0
- package/dist/collection/global/utils/tracking.js.map +1 -0
- 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 +9 -1
- package/dist/components/ifx-badge.js.map +1 -1
- package/dist/components/ifx-basic-table.js +6 -1
- 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 +8 -1
- package/dist/components/ifx-breadcrumb.js.map +1 -1
- package/dist/components/ifx-button.js +1 -1
- package/dist/components/ifx-card.js +8 -3
- package/dist/components/ifx-card.js.map +1 -1
- package/dist/components/ifx-checkbox-group.js +7 -2
- 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 +6 -1
- package/dist/components/ifx-content-switcher.js.map +1 -1
- package/dist/components/ifx-date-picker.js +10 -3
- 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-trigger-button.js +2 -2
- package/dist/components/ifx-dropdown.js +6 -1
- package/dist/components/ifx-dropdown.js.map +1 -1
- package/dist/components/ifx-faq.js +3 -3
- package/dist/components/ifx-file-upload.js +13 -6
- package/dist/components/ifx-file-upload.js.map +1 -1
- package/dist/components/ifx-filter-accordion.js +2 -2
- package/dist/components/ifx-filter-bar.js +2 -2
- package/dist/components/ifx-filter-search.js +2 -2
- package/dist/components/ifx-footer.js +9 -4
- 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 +3 -3
- package/dist/components/ifx-list.js +2 -2
- package/dist/components/ifx-modal.js +11 -4
- package/dist/components/ifx-modal.js.map +1 -1
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-navbar-item.js +2 -2
- package/dist/components/ifx-navbar.js +6 -4
- 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 +7 -2
- 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 +8 -3
- 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 +10 -3
- 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 +5 -5
- package/dist/components/ifx-sidebar-item.js +2 -2
- package/dist/components/ifx-sidebar.js +7 -5
- package/dist/components/ifx-sidebar.js.map +1 -1
- package/dist/components/ifx-slider.js +8 -3
- package/dist/components/ifx-slider.js.map +1 -1
- package/dist/components/ifx-spinner.js +1 -1
- package/dist/components/ifx-status.js +9 -1
- package/dist/components/ifx-status.js.map +1 -1
- package/dist/components/ifx-step.js +1 -1
- package/dist/components/ifx-stepper.js +7 -2
- package/dist/components/ifx-stepper.js.map +1 -1
- package/dist/components/ifx-switch.js +6 -1
- package/dist/components/ifx-switch.js.map +1 -1
- package/dist/components/ifx-table.js +16 -11
- package/dist/components/ifx-table.js.map +1 -1
- package/dist/components/ifx-tabs.js +8 -3
- package/dist/components/ifx-tabs.js.map +1 -1
- package/dist/components/ifx-tag.js +10 -2
- package/dist/components/ifx-tag.js.map +1 -1
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +8 -8
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/ifx-textarea.js +6 -1
- package/dist/components/ifx-textarea.js.map +1 -1
- package/dist/components/ifx-tooltip.js +10 -5
- package/dist/components/ifx-tooltip.js.map +1 -1
- package/dist/components/ifx-tree-view-item.js +2 -2
- package/dist/components/ifx-tree-view.js +9 -1
- package/dist/components/ifx-tree-view.js.map +1 -1
- package/dist/components/{p-d1790232.js → p-0590639e.js} +2 -2
- package/dist/components/{p-d1790232.js.map → p-0590639e.js.map} +1 -1
- package/dist/components/{p-bb4de57d.js → p-0e4632d4.js} +32 -2
- package/dist/components/p-0e4632d4.js.map +1 -0
- package/dist/components/p-1ecafb97.js +18 -0
- package/dist/components/p-1ecafb97.js.map +1 -0
- package/dist/components/{p-186dacc8.js → p-331ca3f3.js} +10 -5
- package/dist/components/p-331ca3f3.js.map +1 -0
- package/dist/components/{p-c9aec5fa.js → p-39859c18.js} +9 -4
- package/dist/components/p-39859c18.js.map +1 -0
- package/dist/components/{p-357107c5.js → p-54b39a91.js} +8 -3
- package/dist/components/p-54b39a91.js.map +1 -0
- package/dist/components/{p-5e9d3450.js → p-6d95b3c1.js} +8 -2
- package/dist/components/p-6d95b3c1.js.map +1 -0
- package/dist/components/p-6ecb6a6f.js +39 -0
- package/dist/components/p-6ecb6a6f.js.map +1 -0
- package/dist/components/{p-17df0350.js → p-816b2612.js} +7 -2
- package/dist/components/p-816b2612.js.map +1 -0
- package/dist/components/{p-a8d0ef73.js → p-927d5fd1.js} +16 -11
- package/dist/components/p-927d5fd1.js.map +1 -0
- package/dist/components/{p-cd913238.js → p-940ee336.js} +3 -3
- package/dist/components/{p-cd913238.js.map → p-940ee336.js.map} +1 -1
- package/dist/components/{p-9142f93b.js → p-94da6823.js} +8 -3
- package/dist/components/p-94da6823.js.map +1 -0
- package/dist/components/{p-2a65d85a.js → p-9b236210.js} +6 -6
- package/dist/components/{p-2a65d85a.js.map → p-9b236210.js.map} +1 -1
- package/dist/components/{p-53d4339c.js → p-9ea9e274.js} +10 -2
- package/dist/components/p-9ea9e274.js.map +1 -0
- package/dist/components/{p-6d12f845.js → p-ab4beff7.js} +13 -5
- package/dist/components/p-ab4beff7.js.map +1 -0
- package/dist/components/{p-0c449780.js → p-b1ca5daf.js} +8 -3
- package/dist/components/p-b1ca5daf.js.map +1 -0
- package/dist/components/{p-67573b5f.js → p-b4630d0d.js} +11 -6
- package/dist/components/p-b4630d0d.js.map +1 -0
- package/dist/components/{p-cc5bd74b.js → p-be3268af.js} +10 -5
- package/dist/components/p-be3268af.js.map +1 -0
- package/dist/components/{p-38396fe7.js → p-c6e5f94d.js} +11 -3
- package/dist/components/p-c6e5f94d.js.map +1 -0
- package/dist/components/{p-ed739e86.js → p-cca71d97.js} +9 -2
- package/dist/components/p-cca71d97.js.map +1 -0
- package/dist/components/{p-cd833a9b.js → p-df486632.js} +8 -3
- package/dist/components/p-df486632.js.map +1 -0
- package/dist/components/{p-a4922416.js → p-e126ea6f.js} +11 -3
- package/dist/components/p-e126ea6f.js.map +1 -0
- package/dist/components/{p-b0039ef1.js → p-f9815000.js} +8 -2
- package/dist/components/p-f9815000.js.map +1 -0
- package/dist/esm/dom-utils-1988cdf1.js +18 -0
- package/dist/esm/dom-utils-1988cdf1.js.map +1 -0
- package/dist/esm/ifx-accordion_2.entry.js +8 -1
- package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
- package/dist/esm/ifx-alert_2.entry.js +6 -0
- package/dist/esm/ifx-alert_2.entry.js.map +1 -1
- package/dist/esm/ifx-badge.entry.js +10 -2
- package/dist/esm/ifx-badge.entry.js.map +1 -1
- package/dist/esm/ifx-basic-table.entry.js +6 -1
- package/dist/esm/ifx-basic-table.entry.js.map +1 -1
- package/dist/esm/ifx-breadcrumb.entry.js +8 -1
- package/dist/esm/ifx-breadcrumb.entry.js.map +1 -1
- package/dist/esm/ifx-button.entry.js +6 -1
- package/dist/esm/ifx-button.entry.js.map +1 -1
- package/dist/esm/ifx-card.entry.js +8 -3
- package/dist/esm/ifx-card.entry.js.map +1 -1
- package/dist/esm/ifx-checkbox-group.entry.js +6 -1
- package/dist/esm/ifx-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ifx-checkbox.entry.js +8 -3
- package/dist/esm/ifx-checkbox.entry.js.map +1 -1
- package/dist/esm/ifx-chip_3.entry.js +17 -9
- package/dist/esm/ifx-chip_3.entry.js.map +1 -1
- package/dist/esm/ifx-content-switcher.entry.js +6 -1
- package/dist/esm/ifx-content-switcher.entry.js.map +1 -1
- package/dist/esm/ifx-date-picker.entry.js +9 -2
- package/dist/esm/ifx-date-picker.entry.js.map +1 -1
- package/dist/esm/ifx-dropdown.entry.js +6 -1
- package/dist/esm/ifx-dropdown.entry.js.map +1 -1
- package/dist/esm/ifx-file-upload.entry.js +9 -2
- package/dist/esm/ifx-file-upload.entry.js.map +1 -1
- package/dist/esm/ifx-footer.entry.js +9 -4
- package/dist/esm/ifx-footer.entry.js.map +1 -1
- package/dist/esm/ifx-icon-button.entry.js +6 -1
- package/dist/esm/ifx-icon-button.entry.js.map +1 -1
- package/dist/esm/ifx-icon.entry.js +32 -2
- package/dist/esm/ifx-icon.entry.js.map +1 -1
- package/dist/esm/ifx-indicator.entry.js +7 -2
- package/dist/esm/ifx-indicator.entry.js.map +1 -1
- package/dist/esm/ifx-link.entry.js +10 -2
- package/dist/esm/ifx-link.entry.js.map +1 -1
- package/dist/esm/ifx-modal.entry.js +9 -2
- package/dist/esm/ifx-modal.entry.js.map +1 -1
- package/dist/esm/ifx-multiselect.entry.js +5 -0
- package/dist/esm/ifx-multiselect.entry.js.map +1 -1
- package/dist/esm/ifx-navbar.entry.js +5 -3
- package/dist/esm/ifx-navbar.entry.js.map +1 -1
- package/dist/esm/ifx-notification.entry.js +11 -3
- package/dist/esm/ifx-notification.entry.js.map +1 -1
- package/dist/esm/ifx-progress-bar.entry.js +8 -2
- package/dist/esm/ifx-progress-bar.entry.js.map +1 -1
- package/dist/esm/ifx-radio-button-group.entry.js +6 -1
- package/dist/esm/ifx-radio-button-group.entry.js.map +1 -1
- package/dist/esm/ifx-radio-button.entry.js +7 -2
- package/dist/esm/ifx-radio-button.entry.js.map +1 -1
- package/dist/esm/ifx-search-bar.entry.js +6 -1
- package/dist/esm/ifx-search-bar.entry.js.map +1 -1
- package/dist/esm/ifx-search-field.entry.js +10 -2
- package/dist/esm/ifx-search-field.entry.js.map +1 -1
- package/dist/esm/ifx-segmented-control.entry.js +9 -2
- package/dist/esm/ifx-segmented-control.entry.js.map +1 -1
- package/dist/esm/ifx-select.entry.js +7 -2
- package/dist/esm/ifx-select.entry.js.map +1 -1
- package/dist/esm/ifx-sidebar.entry.js +7 -5
- package/dist/esm/ifx-sidebar.entry.js.map +1 -1
- package/dist/esm/ifx-slider.entry.js +7 -2
- package/dist/esm/ifx-slider.entry.js.map +1 -1
- package/dist/esm/ifx-spinner_2.entry.js +18 -7
- package/dist/esm/ifx-spinner_2.entry.js.map +1 -1
- package/dist/esm/ifx-status.entry.js +10 -2
- package/dist/esm/ifx-status.entry.js.map +1 -1
- package/dist/esm/ifx-stepper.entry.js +7 -2
- package/dist/esm/ifx-stepper.entry.js.map +1 -1
- package/dist/esm/ifx-switch.entry.js +6 -1
- package/dist/esm/ifx-switch.entry.js.map +1 -1
- package/dist/esm/ifx-table.entry.js +7 -2
- package/dist/esm/ifx-table.entry.js.map +1 -1
- package/dist/esm/ifx-tabs.entry.js +7 -2
- package/dist/esm/ifx-tabs.entry.js.map +1 -1
- package/dist/esm/ifx-tag.entry.js +10 -2
- package/dist/esm/ifx-tag.entry.js.map +1 -1
- package/dist/esm/ifx-textarea.entry.js +6 -1
- package/dist/esm/ifx-textarea.entry.js.map +1 -1
- package/dist/esm/ifx-tooltip.entry.js +9 -4
- package/dist/esm/ifx-tooltip.entry.js.map +1 -1
- package/dist/esm/ifx-tree-view.entry.js +10 -2
- package/dist/esm/ifx-tree-view.entry.js.map +1 -1
- package/dist/esm/tracking-a7efdbcd.js +39 -0
- package/dist/esm/tracking-a7efdbcd.js.map +1 -0
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-0c60ce87.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-0c60ce87.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-14525860.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-14525860.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-14842bbb.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-14842bbb.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-19fcf1db.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-19fcf1db.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-1ecafb97.js +2 -0
- package/dist/infineon-design-system-stencil/p-1ecafb97.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-1fd80576.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-1fd80576.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-227fa186.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-227fa186.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-26c73456.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-26c73456.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-296f215f.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-296f215f.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-32b0dfda.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-32b0dfda.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-4eda4ef3.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-4eda4ef3.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-52420868.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-52420868.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-5493e6f5.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-5493e6f5.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-5a12d20a.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-5a12d20a.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-65255c40.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-65255c40.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-68423787.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-68423787.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-6d72ad32.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-6d72ad32.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-6ecb6a6f.js +2 -0
- package/dist/infineon-design-system-stencil/p-6ecb6a6f.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-73d39ed6.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-73d39ed6.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-0d3e5a0d.entry.js → p-76914839.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-76914839.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-796675ed.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-796675ed.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-79b7d7a2.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-79b7d7a2.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-82c59e6b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-82c59e6b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-82dd7e7d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-82dd7e7d.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-877e1d37.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-877e1d37.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-8a7bfe65.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-8a7bfe65.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-98532a0e.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-98532a0e.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-7440ea9d.entry.js → p-9c28f35f.entry.js} +3 -3
- package/dist/infineon-design-system-stencil/p-9c28f35f.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-a0006775.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-a0006775.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-ac7db8d1.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-ac7db8d1.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-ae8110b7.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-ae8110b7.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-aeaa6d0b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-aeaa6d0b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-b17a0e8c.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-b17a0e8c.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-bb7b2a3c.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-bb7b2a3c.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-c164c83b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-c164c83b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-c220733b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-c220733b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-c88876dc.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-c88876dc.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-e0978af0.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-e0978af0.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-e5018880.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-e5018880.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-ed869b07.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-ed869b07.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-eeb59f76.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-eeb59f76.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-f3f8d603.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-f3f8d603.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-fb6a813b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-fb6a813b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-fe22fc31.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-fe22fc31.entry.js.map +1 -0
- package/dist/types/components/accordion/accordion.d.ts +1 -0
- package/dist/types/components/alert/alert.d.ts +1 -0
- package/dist/types/components/badge/badge.d.ts +2 -0
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +1 -0
- package/dist/types/components/date-picker/date-picker.d.ts +1 -0
- package/dist/types/components/file-upload/file-upload.d.ts +1 -0
- package/dist/types/components/icon/infineonIconStencil.d.ts +3 -0
- package/dist/types/components/link/link.d.ts +2 -0
- package/dist/types/components/modal/modal.d.ts +1 -0
- package/dist/types/components/notification/notification.d.ts +2 -0
- package/dist/types/components/progress-bar/progress-bar.d.ts +1 -0
- package/dist/types/components/search-field/search-field.d.ts +2 -0
- package/dist/types/components/segmented-control/segmented-control.d.ts +1 -0
- package/dist/types/components/spinner/spinner.d.ts +2 -0
- package/dist/types/components/status/status.d.ts +2 -0
- package/dist/types/components/tag/tag.d.ts +2 -0
- package/dist/types/components/tree-view/tree-view.d.ts +2 -0
- package/dist/types/global/utils/dom-utils.d.ts +1 -0
- package/dist/types/global/utils/tracking.d.ts +9 -0
- package/package.json +1 -1
- package/dist/components/p-0c449780.js.map +0 -1
- package/dist/components/p-17df0350.js.map +0 -1
- package/dist/components/p-186dacc8.js.map +0 -1
- package/dist/components/p-357107c5.js.map +0 -1
- package/dist/components/p-38396fe7.js.map +0 -1
- package/dist/components/p-53d4339c.js.map +0 -1
- package/dist/components/p-5e9d3450.js.map +0 -1
- package/dist/components/p-67573b5f.js.map +0 -1
- package/dist/components/p-6d12f845.js.map +0 -1
- package/dist/components/p-9142f93b.js.map +0 -1
- package/dist/components/p-a4922416.js.map +0 -1
- package/dist/components/p-a8d0ef73.js.map +0 -1
- package/dist/components/p-b0039ef1.js.map +0 -1
- package/dist/components/p-bb4de57d.js.map +0 -1
- package/dist/components/p-c9aec5fa.js.map +0 -1
- package/dist/components/p-cc5bd74b.js.map +0 -1
- package/dist/components/p-cd833a9b.js.map +0 -1
- package/dist/components/p-ed739e86.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-061bfdb1.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-061bfdb1.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-06bfabcf.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-06bfabcf.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-0d3e5a0d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-1048ee19.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-1048ee19.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-142878ee.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-142878ee.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-17f3f2f5.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-17f3f2f5.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-2006c7a0.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-2006c7a0.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-292cff35.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-292cff35.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-2d89c5e0.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-2d89c5e0.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-33a4fd0a.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-33a4fd0a.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-37d6c639.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-37d6c639.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-3d23deba.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-3d23deba.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-3ff96710.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-3ff96710.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-47a3e831.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-47a3e831.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-487d2155.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-487d2155.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-49252616.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-49252616.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-5b5c144f.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-5b5c144f.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-65fe2246.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-65fe2246.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-676fb63a.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-676fb63a.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-6790d912.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-6790d912.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-6bdca580.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-6bdca580.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-702a48f8.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-702a48f8.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-7440ea9d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-885adc48.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-885adc48.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-9149a20a.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-9149a20a.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-959285a7.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-959285a7.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-9fc0f50d.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-9fc0f50d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-aadd1a9d.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-aadd1a9d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-acf0f4ed.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-acf0f4ed.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ad1ec9d6.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ad1ec9d6.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-b637c44c.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-b637c44c.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-b73a5f18.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-b73a5f18.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c2791360.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c2791360.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c5a785d7.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c5a785d7.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c84ef603.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c84ef603.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-dd28f3a1.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-dd28f3a1.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-e98d2280.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-e98d2280.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ecc17497.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ecc17497.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ef6d0dc6.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ef6d0dc6.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-f25f014d.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-f25f014d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-f338fb85.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-f338fb85.entry.js.map +0 -1
@@ -1,12 +1,12 @@
|
|
1
1
|
import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-f8e6a4ef.js';
|
2
|
-
import { d as defineCustomElement$9 } from './p-
|
3
|
-
import { d as defineCustomElement$8 } from './p-
|
4
|
-
import { d as defineCustomElement$7 } from './p-
|
5
|
-
import { d as defineCustomElement$6 } from './p-
|
6
|
-
import { d as defineCustomElement$5 } from './p-
|
7
|
-
import { d as defineCustomElement$4 } from './p-
|
8
|
-
import { d as defineCustomElement$3 } from './p-
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
2
|
+
import { d as defineCustomElement$9 } from './p-f9815000.js';
|
3
|
+
import { d as defineCustomElement$8 } from './p-816b2612.js';
|
4
|
+
import { d as defineCustomElement$7 } from './p-0e4632d4.js';
|
5
|
+
import { d as defineCustomElement$6 } from './p-b1ca5daf.js';
|
6
|
+
import { d as defineCustomElement$5 } from './p-9ea9e274.js';
|
7
|
+
import { d as defineCustomElement$4 } from './p-e126ea6f.js';
|
8
|
+
import { d as defineCustomElement$3 } from './p-9b236210.js';
|
9
|
+
import { d as defineCustomElement$2 } from './p-b4630d0d.js';
|
10
10
|
|
11
11
|
const templatesUiCss = "*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";
|
12
12
|
const IfxTemplatesUiStyle0 = templatesUiCss;
|
@@ -1,4 +1,6 @@
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f8e6a4ef.js';
|
2
|
+
import { t as trackComponent } from './p-6ecb6a6f.js';
|
3
|
+
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
2
4
|
|
3
5
|
const textareaCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}";
|
4
6
|
const IfxTextareaStyle0 = textareaCss;
|
@@ -49,11 +51,14 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
|
|
49
51
|
this.internals.setFormValue('');
|
50
52
|
}
|
51
53
|
componentWillLoad() {
|
54
|
+
if (!isNestedInIfxComponent(this.el)) {
|
55
|
+
trackComponent('ifx-textarea');
|
56
|
+
}
|
52
57
|
this.internals.setFormValue(this.value);
|
53
58
|
}
|
54
59
|
render() {
|
55
60
|
var _a, _b;
|
56
|
-
return (h(Host, { key: '
|
61
|
+
return (h(Host, { key: '32e267fccaf70d7faf2e215e0da87f982ba9998a', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'b82d2981aa6986283059f8238332242ca51b0883', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '72781756fc06c8d0242370b459e915a338ec383b', class: 'wrapper__textarea' }, h("textarea", { key: '4bfa47e1d6debbdfc389414c36178e1142b5c55d', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '82a1d29703dd587d694ee1cad3b20dc846b3af50', class: 'wrapper__caption' }, this.caption.trim()))));
|
57
62
|
}
|
58
63
|
static get formAssociated() { return true; }
|
59
64
|
get el() { return this; }
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"ifx-textarea.js","mappings":"
|
1
|
+
{"file":"ifx-textarea.js","mappings":"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","names":[],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.wrapper__label {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n width: 100%;\n &.fullWidth { \n width: 100%;\n & textarea { \n width: 100%;\n box-sizing: border-box; \n }\n }\n}\n\n.wrapper__textarea textarea {\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxSpace12;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n \n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n \n transition: all 100ms ease;\n transition-property: border-color;\n\n &:hover {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n \n &:focus-within {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n border: 1px solid tokens.$ifxColorEngineering500;\n\n background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\t\t\n if (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n } else if(textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n }\n }\n\n\tcomponentDidRender() {\n this.handleComponentWidth()\n }\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\ttrackComponent('ifx-textarea')\n\t\t}\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"version":3}
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
|
2
|
-
import {
|
2
|
+
import { t as trackComponent } from './p-6ecb6a6f.js';
|
3
|
+
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
4
|
+
import { d as defineCustomElement$2 } from './p-0e4632d4.js';
|
3
5
|
import { c as createPopper } from './p-e459974a.js';
|
4
6
|
|
5
7
|
const tooltipCss = ":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}";
|
@@ -51,6 +53,9 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
|
|
51
53
|
};
|
52
54
|
}
|
53
55
|
componentWillLoad() {
|
56
|
+
if (!isNestedInIfxComponent(this.el)) {
|
57
|
+
trackComponent('ifx-tooltip');
|
58
|
+
}
|
54
59
|
if (this.variant.toLowerCase().trim() === "") {
|
55
60
|
this.variant = 'compact';
|
56
61
|
}
|
@@ -155,10 +160,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
|
|
155
160
|
'tooltip-extended': true,
|
156
161
|
'visible': this.tooltipVisible,
|
157
162
|
};
|
158
|
-
return (h("div", { key: '
|
159
|
-
h("div", { key: '
|
160
|
-
h("div", { key: '
|
161
|
-
h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("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" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '
|
163
|
+
return (h("div", { key: '800412b42aedfe4a5f143af127c24178ecad72dc', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '804b2f8583a588b14fc2228f47d745834bc4f2b7' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '779ed1568606807902d680313e09c4827c3a9cc3', class: tooltipDismissible }, h("button", { key: '7a6029a058bfc10806a5d9b1aa3a0b992e99db50', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '85e7b2368a63d104447221f0dd0590bc6340308a', icon: "cross16" })), h("div", { key: 'ed006c7238ce366da215e44e1da7bcc2bf812196', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'f55620b3a915f322c2defca81cce2a4ed2fd917e', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'fe3945914787affc7144a915d0830ab47ea7169f', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '564df15129ab41e14fa1a763d5ec7248698febf0', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fe4213845d82f9e0141b5fbff33811ac9b1a7e91', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
|
164
|
+
h("div", { key: '3b651fbefe2348456b5e684c4de80fc8c5b3176e', class: tooltipCompact }, this.text, h("svg", { key: '05e2750f2f61ef91c5c02e30b578adbbbc1c69e2', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '240fb241aadaa3dc12b61f747fff118ea9d08fad', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
|
165
|
+
h("div", { key: '806eecf6abb796404bbe63bcf1bf2ec31a45e47d', class: tooltipExtended }, h("slot", { key: '9253c2bbd7c4e2d7ba42c1c72a76e85e8309ff37', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
|
166
|
+
h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("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" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: 'eaaf6a0ed69e81231c9e26cec682d97bd880e1b4', class: "tooltip-extended-content" }, this.header && h("div", { key: '0e31613f59b976d97c55d0609ddadc675df989b3', class: "tooltip-extended-header" }, this.header), h("div", { key: 'e529acccd2e26271414091702fc71ee5df0ab75b', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'd0a908924d6c383587b550439b11f2f70fcfe2ec', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e3b0afcaa7c00b350af5fd571cef872157dbf972', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
|
162
167
|
}
|
163
168
|
get el() { return this; }
|
164
169
|
static get watchers() { return {
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"ifx-tooltip.js","mappings":"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","names":[],"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}"],"version":3}
|
1
|
+
{"file":"ifx-tooltip.js","mappings":"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","names":[],"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';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\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(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-tooltip')\n }\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}"],"version":3}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-f8e6a4ef.js';
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
2
|
+
import { d as defineCustomElement$3 } from './p-331ca3f3.js';
|
3
|
+
import { d as defineCustomElement$2 } from './p-0e4632d4.js';
|
4
4
|
|
5
5
|
const treeViewItemCss = ".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}";
|
6
6
|
const IfxTreeViewItemStyle0 = treeViewItemCss;
|
@@ -1,4 +1,6 @@
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
2
|
+
import { t as trackComponent } from './p-6ecb6a6f.js';
|
3
|
+
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
2
4
|
|
3
5
|
const treeViewCss = ":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}";
|
4
6
|
const IfxTreeViewStyle0 = treeViewCss;
|
@@ -35,9 +37,15 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
|
|
35
37
|
handleDisableAllItemsChange(newValue) {
|
36
38
|
this.ifxTreeViewDisableAllChange.emit(newValue);
|
37
39
|
}
|
40
|
+
componentWillLoad() {
|
41
|
+
if (!isNestedInIfxComponent(this.el)) {
|
42
|
+
trackComponent('ifx-tree-view');
|
43
|
+
}
|
44
|
+
}
|
38
45
|
render() {
|
39
|
-
return (h("div", { key: '
|
46
|
+
return (h("div", { key: 'eae9f1180919631437c70c7b215578e78c95a7f4', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: 'ecc9de2d2d7e73ecc53264dac401e9bdfad16dec', class: "tree-view__label" }, this.label), h("slot", { key: '293cb205d9173d1c0d6b67bf0d9351ba0622dd2d', ref: this.handleSlotRef })));
|
40
47
|
}
|
48
|
+
get el() { return this; }
|
41
49
|
static get watchers() { return {
|
42
50
|
"expandAllItems": ["handleExpandAllItemsChange"],
|
43
51
|
"disableAllItems": ["handleDisableAllItemsChange"]
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"ifx-tree-view.js","mappings":"
|
1
|
+
{"file":"ifx-tree-view.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,ySAAyS,CAAC;AAC9T,0BAAe,WAAW;;MCQb,QAAQ;IALrB;;;;;;QAQU,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAY,KAAK,CAAC;QAgBhC,kBAAa,GAAG,CAAC,EAA0B;YACjD,IAAI,EAAE,EAAE;gBACN,IAAI,IAAI,CAAC,eAAe,EAAE;oBACxB,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;iBACnD;qBAAM;oBACL,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;iBAC9C;gBACD,IAAI,IAAI,CAAC,cAAc,EAAE;oBACvB,EAAE,CAAC,YAAY,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;iBAClD;qBAAM;oBACL,EAAE,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;iBAC7C;aACF;SACF,CAAC;KAoBH;IA1CC,0BAA0B,CAAC,QAAiB;QAC1C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAGD,2BAA2B,CAAC,QAAiB;QAC3C,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjD;IAiBD,iBAAiB;QACf,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,cAAc,CAAC,eAAe,CAAC,CAAA;SAChC;KACF;IAED,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,aAAa,IAAI,CAAC,eAAe,GAAG,sBAAsB,GAAG,EAAE,EAAE,EACxE,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,SAAS,IAEzB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,EAC3F,6DAAM,GAAG,EAAE,IAAI,CAAC,aAAa,GAAS,CAClC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n tag: 'ifx-tree-view',\n styleUrl: 'tree-view.scss',\n shadow: true,\n})\nexport class TreeView {\n @Element() el: HTMLElement;\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 componentWillLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n trackComponent('ifx-tree-view')\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"],"version":3}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
|
2
|
-
import { d as defineCustomElement$1 } from './p-
|
2
|
+
import { d as defineCustomElement$1 } from './p-0e4632d4.js';
|
3
3
|
|
4
4
|
const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
|
5
5
|
const IfxAccordionItemStyle0 = accordionItemCss;
|
@@ -116,4 +116,4 @@ function defineCustomElement() {
|
|
116
116
|
|
117
117
|
export { IfxAccordionItem as I, defineCustomElement as d };
|
118
118
|
|
119
|
-
//# sourceMappingURL=p-
|
119
|
+
//# sourceMappingURL=p-0590639e.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"file":"p-
|
1
|
+
{"file":"p-0590639e.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n //transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.contentEl) {\n if (this.internalOpen) {\n this.contentEl.style.height = 'auto'; \n const updatedHeight = this.contentEl.scrollHeight; \n this.contentEl.style.height = `${updatedHeight}px`; \n this.contentEl.style.overflow = 'visible';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n }\n\n attachResizeObserver() { \n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl); \n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}"],"version":3}
|
@@ -1,4 +1,6 @@
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-f8e6a4ef.js';
|
2
|
+
import { t as trackComponent } from './p-6ecb6a6f.js';
|
3
|
+
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
2
4
|
|
3
5
|
var cartF16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"> <path d="M1.524 1H0V0h2.476L2.6 2.5h12.554L13.382 9H2.926l.05 1H13.5v1H2.024l-.5-10ZM5 14a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM13 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/> </svg>';
|
4
6
|
|
@@ -1300,13 +1302,41 @@ const InfineonIconStencil = /*@__PURE__*/ proxyCustomElement(class InfineonIconS
|
|
1300
1302
|
const iconName = toCamelCase(this.internalIcon);
|
1301
1303
|
this.ifxIcon = getIcon(iconName);
|
1302
1304
|
}
|
1305
|
+
isInsideAgGrid(el) {
|
1306
|
+
var _a;
|
1307
|
+
let current = el;
|
1308
|
+
while (current) {
|
1309
|
+
if ((_a = current.className) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith('ag-')) {
|
1310
|
+
return true;
|
1311
|
+
}
|
1312
|
+
current = current.parentElement;
|
1313
|
+
}
|
1314
|
+
return false;
|
1315
|
+
}
|
1316
|
+
isInsideChoices(el) {
|
1317
|
+
var _a;
|
1318
|
+
let current = el;
|
1319
|
+
while (current) {
|
1320
|
+
if ((_a = current.className) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith('choices__')) {
|
1321
|
+
return true;
|
1322
|
+
}
|
1323
|
+
current = current.parentElement;
|
1324
|
+
}
|
1325
|
+
return false;
|
1326
|
+
}
|
1303
1327
|
componentWillLoad() {
|
1304
1328
|
this.internalIcon = this.icon;
|
1305
1329
|
this.setIcon();
|
1330
|
+
if (!isNestedInIfxComponent(this.el)) {
|
1331
|
+
if (!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) {
|
1332
|
+
trackComponent('ifx-icon');
|
1333
|
+
}
|
1334
|
+
}
|
1306
1335
|
}
|
1307
1336
|
render() {
|
1308
|
-
return (h(Host, { key: '
|
1337
|
+
return (h(Host, { key: 'd9532b19a7cdd7e273496e8b3f3a16378cf5a104' }, this.constructIcon()));
|
1309
1338
|
}
|
1339
|
+
get el() { return this; }
|
1310
1340
|
static get watchers() { return {
|
1311
1341
|
"icon": ["updateIcon"]
|
1312
1342
|
}; }
|
@@ -1334,4 +1364,4 @@ function defineCustomElement() {
|
|
1334
1364
|
|
1335
1365
|
export { InfineonIconStencil as I, defineCustomElement as d, icons as i };
|
1336
1366
|
|
1337
|
-
//# sourceMappingURL=p-
|
1367
|
+
//# sourceMappingURL=p-0e4632d4.js.map
|