@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 30.10.0--canary.1696.f6fc7149013229dfeecb984f52e464c01a339d3d.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-basic-table.cjs.entry.js +1 -1
- package/dist/cjs/ifx-chip_3.cjs.entry.js +1 -1
- package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-accordion.cjs.entry.js +2 -2
- package/dist/cjs/ifx-filter-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-search.cjs.entry.js +1 -1
- package/dist/cjs/ifx-filter-type-group.cjs.entry.js +1 -1
- package/dist/cjs/ifx-icons-preview.cjs.entry.js +1 -1
- package/dist/cjs/ifx-icons-preview.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-link.cjs.entry.js +1 -1
- package/dist/cjs/ifx-list-entry.cjs.entry.js +1 -1
- package/dist/cjs/ifx-modal.cjs.entry.js +2 -2
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js +4 -4
- package/dist/cjs/ifx-navbar-item.cjs.entry.js +2 -2
- package/dist/cjs/ifx-navbar-profile.cjs.entry.js +3 -3
- package/dist/cjs/ifx-navbar.cjs.entry.js +3 -3
- package/dist/cjs/ifx-notification.cjs.entry.js +2 -2
- package/dist/cjs/ifx-number-indicator.cjs.entry.js +1 -1
- package/dist/cjs/ifx-overview-table.cjs.entry.js +1 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-radio-button.cjs.entry.js +2 -2
- package/dist/cjs/ifx-search-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-search-field.cjs.entry.js +1 -1
- package/dist/cjs/ifx-segment.cjs.entry.js +1 -1
- package/dist/cjs/ifx-segmented-control.cjs.entry.js +2 -2
- package/dist/cjs/ifx-select.cjs.entry.js +2 -2
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js +5 -5
- package/dist/cjs/ifx-sidebar-title.cjs.entry.js +1 -1
- package/dist/cjs/ifx-sidebar.cjs.entry.js +5 -5
- package/dist/cjs/ifx-slider.cjs.entry.js +2 -2
- package/dist/cjs/ifx-spinner.cjs.entry.js +2 -2
- package/dist/cjs/ifx-status.cjs.entry.js +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js +4 -4
- package/dist/cjs/ifx-stepper.cjs.entry.js +2 -2
- package/dist/cjs/ifx-switch.cjs.entry.js +1 -1
- package/dist/cjs/ifx-tab.cjs.entry.js +1 -1
- package/dist/cjs/ifx-table.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tabs.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tag.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/index-af3b4f6c.js +8 -8
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/icons-preview/icons-preview.js +1 -1
- package/dist/collection/components/icons-preview/icons-preview.js.map +1 -1
- package/dist/collection/components/link/link.js +1 -1
- package/dist/collection/components/modal/modal.js +2 -2
- package/dist/collection/components/navigation/navbar/navbar-item.js +2 -2
- package/dist/collection/components/navigation/navbar/navbar-profile.js +3 -3
- package/dist/collection/components/navigation/navbar/navbar.js +3 -3
- package/dist/collection/components/navigation/sidebar/sidebar-item.js +5 -5
- package/dist/collection/components/navigation/sidebar/sidebar-title.js +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar.js +5 -5
- package/dist/collection/components/notification/notification.js +2 -2
- package/dist/collection/components/number-indicator/number-indicator.js +1 -1
- package/dist/collection/components/overview-table/overview-table.js +1 -1
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio-button/radio-button.js +2 -2
- package/dist/collection/components/search-bar/search-bar.js +1 -1
- package/dist/collection/components/search-field/search-field.js +1 -1
- package/dist/collection/components/segmented-control/segment/segment.js +1 -1
- package/dist/collection/components/segmented-control/segmented-control.js +2 -2
- package/dist/collection/components/select/single-select/select.js +2 -2
- package/dist/collection/components/slider/slider.js +2 -2
- package/dist/collection/components/spinner/spinner.js +2 -2
- package/dist/collection/components/status/status.js +1 -1
- package/dist/collection/components/stepper/step/step.js +4 -4
- package/dist/collection/components/stepper/stepper.js +2 -2
- package/dist/collection/components/switch/switch.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.js +2 -2
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js +1 -1
- package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js +1 -1
- package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js +1 -1
- package/dist/collection/components/table-advanced-version/table.js +2 -2
- package/dist/collection/components/table-basic-version/table.js +1 -1
- package/dist/collection/components/tabs/tab.js +1 -1
- package/dist/collection/components/tabs/tabs.js +2 -2
- package/dist/collection/components/tag/tag.js +1 -1
- package/dist/collection/components/text-field/text-field.js +4 -4
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +4 -4
- package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
- package/dist/components/ifx-alert.js +68 -1
- package/dist/components/ifx-alert.js.map +1 -1
- package/dist/components/ifx-basic-table.js +1 -1
- package/dist/components/ifx-chip.js +1 -1
- package/dist/components/ifx-faq.js +1 -1
- package/dist/components/ifx-filter-accordion.js +3 -3
- package/dist/components/ifx-filter-bar.js +1 -1
- package/dist/components/ifx-filter-search.js +2 -2
- package/dist/components/ifx-filter-type-group.js +1 -1
- package/dist/components/ifx-icons-preview.js +8 -8
- package/dist/components/ifx-icons-preview.js.map +1 -1
- package/dist/components/ifx-link.js +1 -1
- package/dist/components/ifx-list-entry.js +2 -2
- package/dist/components/ifx-list.js +1 -1
- package/dist/components/ifx-modal.js +2 -2
- package/dist/components/ifx-navbar-item.js +2 -2
- package/dist/components/ifx-navbar-profile.js +3 -3
- package/dist/components/ifx-navbar.js +3 -3
- package/dist/components/ifx-notification.js +1 -65
- package/dist/components/ifx-notification.js.map +1 -1
- package/dist/components/ifx-number-indicator.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.js +1 -1
- package/dist/components/ifx-search-bar.js +2 -2
- package/dist/components/ifx-search-field.js +1 -1
- package/dist/components/ifx-segment.js +1 -1
- package/dist/components/ifx-segmented-control.js +2 -2
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +2 -2
- package/dist/components/ifx-sidebar-item.js +6 -6
- package/dist/components/ifx-sidebar-title.js +1 -1
- package/dist/components/ifx-sidebar.js +5 -5
- package/dist/components/ifx-slider.js +2 -2
- package/dist/components/ifx-spinner.js +2 -2
- package/dist/components/ifx-status.js +1 -1
- package/dist/components/ifx-step.js +4 -4
- package/dist/components/ifx-stepper.js +2 -2
- package/dist/components/ifx-switch.js +1 -1
- package/dist/components/ifx-tab.js +1 -1
- package/dist/components/ifx-table.js +6 -6
- package/dist/components/ifx-tabs.js +2 -2
- package/dist/components/ifx-tag.js +1 -1
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/ifx-textarea.js +2 -2
- package/dist/components/ifx-tooltip.js +4 -4
- package/dist/components/{p-6d7169f1.js → p-13b83f6f.js} +2 -2
- package/dist/components/{p-6d7169f1.js.map → p-13b83f6f.js.map} +1 -1
- package/dist/components/{p-eb9fcfba.js → p-4a3f3a00.js} +2 -2
- package/dist/components/{p-eb9fcfba.js.map → p-4a3f3a00.js.map} +1 -1
- package/dist/components/{p-e5faf3d6.js → p-710c0476.js} +3 -3
- package/dist/components/{p-e5faf3d6.js.map → p-710c0476.js.map} +1 -1
- package/dist/components/{p-b26e1577.js → p-7a19d759.js} +5 -5
- package/dist/components/{p-b26e1577.js.map → p-7a19d759.js.map} +1 -1
- package/dist/components/{p-1fbd6156.js → p-ae80f6d1.js} +3 -3
- package/dist/components/{p-1fbd6156.js.map → p-ae80f6d1.js.map} +1 -1
- package/dist/components/p-c1939561.js +69 -0
- package/dist/components/p-c1939561.js.map +1 -0
- package/dist/components/{p-8f33bf61.js → p-c4646831.js} +3 -3
- package/dist/components/{p-8f33bf61.js.map → p-c4646831.js.map} +1 -1
- package/dist/components/{p-6174315c.js → p-c4df8284.js} +2 -2
- package/dist/components/{p-6174315c.js.map → p-c4df8284.js.map} +1 -1
- package/dist/components/{p-cbd302cd.js → p-fa7943d7.js} +2 -2
- package/dist/components/{p-cbd302cd.js.map → p-fa7943d7.js.map} +1 -1
- package/dist/esm/ifx-basic-table.entry.js +1 -1
- package/dist/esm/ifx-chip_3.entry.js +1 -1
- package/dist/esm/ifx-faq.entry.js +1 -1
- package/dist/esm/ifx-filter-accordion.entry.js +2 -2
- package/dist/esm/ifx-filter-bar.entry.js +1 -1
- package/dist/esm/ifx-filter-search.entry.js +1 -1
- package/dist/esm/ifx-filter-type-group.entry.js +1 -1
- package/dist/esm/ifx-icons-preview.entry.js +1 -1
- package/dist/esm/ifx-icons-preview.entry.js.map +1 -1
- package/dist/esm/ifx-link.entry.js +1 -1
- package/dist/esm/ifx-list-entry.entry.js +1 -1
- package/dist/esm/ifx-modal.entry.js +2 -2
- package/dist/esm/ifx-multiselect_2.entry.js +4 -4
- package/dist/esm/ifx-navbar-item.entry.js +2 -2
- package/dist/esm/ifx-navbar-profile.entry.js +3 -3
- package/dist/esm/ifx-navbar.entry.js +3 -3
- package/dist/esm/ifx-notification.entry.js +2 -2
- package/dist/esm/ifx-number-indicator.entry.js +1 -1
- package/dist/esm/ifx-overview-table.entry.js +1 -1
- package/dist/esm/ifx-progress-bar.entry.js +1 -1
- package/dist/esm/ifx-radio-button.entry.js +2 -2
- package/dist/esm/ifx-search-bar.entry.js +1 -1
- package/dist/esm/ifx-search-field.entry.js +1 -1
- package/dist/esm/ifx-segment.entry.js +1 -1
- package/dist/esm/ifx-segmented-control.entry.js +2 -2
- package/dist/esm/ifx-select.entry.js +2 -2
- package/dist/esm/ifx-sidebar-item.entry.js +5 -5
- package/dist/esm/ifx-sidebar-title.entry.js +1 -1
- package/dist/esm/ifx-sidebar.entry.js +5 -5
- package/dist/esm/ifx-slider.entry.js +2 -2
- package/dist/esm/ifx-spinner.entry.js +2 -2
- package/dist/esm/ifx-status.entry.js +1 -1
- package/dist/esm/ifx-step.entry.js +4 -4
- package/dist/esm/ifx-stepper.entry.js +2 -2
- package/dist/esm/ifx-switch.entry.js +1 -1
- package/dist/esm/ifx-tab.entry.js +1 -1
- package/dist/esm/ifx-table.entry.js +2 -2
- package/dist/esm/ifx-tabs.entry.js +2 -2
- package/dist/esm/ifx-tag.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +2 -2
- package/dist/esm/ifx-tooltip.entry.js +4 -4
- package/dist/esm/index-dc4139fb.js +8 -8
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-4276c541.entry.js → p-06eae5f0.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-ec260300.entry.js → p-0b0fff99.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-815c52bb.entry.js → p-121d0a1a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6e3935c4.entry.js → p-1313c9fd.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-a9f47a77.entry.js → p-15d7d577.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-15d7d577.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-7db5870e.entry.js → p-16417752.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-3e9d8f36.entry.js → p-19c620c0.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-133614d6.entry.js → p-286f0803.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7a9b0e4d.entry.js → p-2ae45c07.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-773e4b39.entry.js → p-2f7affbe.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-8e774145.entry.js → p-3c14e70d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-5cfa04ec.entry.js → p-42c07031.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7dc241f0.entry.js → p-4b84fbcf.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-4be9914a.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-42001a96.entry.js → p-569b2ffb.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-60d80bd3.entry.js → p-6bb73fe8.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6b493f6a.entry.js → p-7ede040a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-54377697.entry.js → p-80a95591.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-c7606e69.entry.js → p-852e5781.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-920d70d1.entry.js → p-92e385d0.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-87522900.entry.js → p-96b5c01f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-26f97cc3.entry.js → p-9c177c5d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-13a464f0.entry.js → p-a0f52c8f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-255ffeee.entry.js → p-a4c0be4f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-44b86e18.entry.js → p-addbb242.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-3bfb84ea.entry.js → p-b34c42dc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-360d9e44.entry.js → p-b6b70b03.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-5870cf11.entry.js → p-b96e8612.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-453e8eb3.entry.js → p-bc4f59c6.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-bddadce2.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-acd048a6.entry.js → p-c0e021d4.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-ce16bbcd.entry.js → p-c43ec0c8.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-221d7a98.entry.js → p-ca1b4c32.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-deef98eb.entry.js → p-d30214e5.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-dea16725.entry.js → p-d3bbfc12.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-b5e19264.entry.js → p-e2b98007.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-ecaa9977.entry.js → p-e4c5aff7.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-b06a3ab7.entry.js → p-ea564500.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-2d2d6bff.entry.js → p-f36fabb6.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-4ad0d613.entry.js → p-fb0a6d60.entry.js} +2 -2
- package/package.json +1 -1
- package/dist/components/p-2ca9c3ff.js +0 -72
- package/dist/components/p-2ca9c3ff.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-3bb4e495.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-a9f47a77.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-d8ba2684.entry.js +0 -2
- /package/dist/infineon-design-system-stencil/{p-4276c541.entry.js.map → p-06eae5f0.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ec260300.entry.js.map → p-0b0fff99.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-815c52bb.entry.js.map → p-121d0a1a.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6e3935c4.entry.js.map → p-1313c9fd.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7db5870e.entry.js.map → p-16417752.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-3e9d8f36.entry.js.map → p-19c620c0.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-133614d6.entry.js.map → p-286f0803.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7a9b0e4d.entry.js.map → p-2ae45c07.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-773e4b39.entry.js.map → p-2f7affbe.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-8e774145.entry.js.map → p-3c14e70d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-5cfa04ec.entry.js.map → p-42c07031.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7dc241f0.entry.js.map → p-4b84fbcf.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-d8ba2684.entry.js.map → p-4be9914a.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-42001a96.entry.js.map → p-569b2ffb.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-60d80bd3.entry.js.map → p-6bb73fe8.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-6b493f6a.entry.js.map → p-7ede040a.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-54377697.entry.js.map → p-80a95591.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-c7606e69.entry.js.map → p-852e5781.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-920d70d1.entry.js.map → p-92e385d0.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-87522900.entry.js.map → p-96b5c01f.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-26f97cc3.entry.js.map → p-9c177c5d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-13a464f0.entry.js.map → p-a0f52c8f.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-255ffeee.entry.js.map → p-a4c0be4f.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-44b86e18.entry.js.map → p-addbb242.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-3bfb84ea.entry.js.map → p-b34c42dc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-360d9e44.entry.js.map → p-b6b70b03.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-5870cf11.entry.js.map → p-b96e8612.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-453e8eb3.entry.js.map → p-bc4f59c6.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-3bb4e495.entry.js.map → p-bddadce2.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-acd048a6.entry.js.map → p-c0e021d4.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ce16bbcd.entry.js.map → p-c43ec0c8.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-221d7a98.entry.js.map → p-ca1b4c32.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-deef98eb.entry.js.map → p-d30214e5.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-dea16725.entry.js.map → p-d3bbfc12.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-b5e19264.entry.js.map → p-e2b98007.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ecaa9977.entry.js.map → p-e4c5aff7.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-b06a3ab7.entry.js.map → p-ea564500.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-2d2d6bff.entry.js.map → p-f36fabb6.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-4ad0d613.entry.js.map → p-fb0a6d60.entry.js.map} +0 -0
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,h as t,g as n}from"./p-6b122987.js";const i='.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const a=i;const r=class{constructor(t){e(this,t);this.defaultProfileImage=`<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="48" height="48" fill="#0A8276"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>\n</svg>`;this.showLabel=true;this.href="";this.imageUrl="";this.target="_self";this.alt="";this.userName="";this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.internalImageUrl={type:"",value:""}}handleOutsideClick(e){const t=e.composedPath();const n=this.getItemMenu();if(n){if(n.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}componentWillLoad(){this.setHref();this.setImage();const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}componentDidLoad(){this.setProfileGap();if(this.hasChildNavItems){const e=this.getNavbarItems();this.appendNavItemToMenu(e)}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}handleClassList(e,t,n){e.classList[t](n);if(t==="contains"){return e.classList.contains(n)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}relocateUsingSlot(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}appendNavItemToMenu(e){this.relocateUsingSlot(e)}isValidHttpUrl(e){let t;try{t=new URL(e)}catch(e){return false}return t.protocol==="http:"||t.protocol==="https:"}setImage(){if(this.imageUrl.toLowerCase().trim()===""){this.internalImageUrl={type:undefined,value:""}}else if(this.isValidHttpUrl(this.imageUrl)){this.internalImageUrl={type:"url",value:this.imageUrl}}else{this.internalImageUrl={type:"initials",value:this.imageUrl}}}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}setProfileGap(){const e=this.el.shadowRoot.querySelector(".inner__content-wrapper");const t=this.el.shadowRoot.querySelector(".label__wrapper");const n=t.querySelector("slot");const i=n.assignedNodes();if(!i.length){this.handleClassList(e,"add","no-gap")}else{this.handleClassList(e,"remove","no-gap")}}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}toggleItemMenu(){if(!this.internalHref){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenu();this.handleClassList(e,"add","right")}if(this.hasChildNavItems){const e=this.getItemMenu();const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}itemHasNestedItems(){const e=this.el.shadowRoot.querySelector("ifx-navbar-item");if(e){return true}else{return false}}render(){return t("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,h as t,g as n}from"./p-6b122987.js";const i='.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const a=i;const r=class{constructor(t){e(this,t);this.defaultProfileImage=`<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="48" height="48" fill="#0A8276"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>\n</svg>`;this.showLabel=true;this.href="";this.imageUrl="";this.target="_self";this.alt="";this.userName="";this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.internalImageUrl={type:"",value:""}}handleOutsideClick(e){const t=e.composedPath();const n=this.getItemMenu();if(n){if(n.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}componentWillLoad(){this.setHref();this.setImage();const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}componentDidLoad(){this.setProfileGap();if(this.hasChildNavItems){const e=this.getNavbarItems();this.appendNavItemToMenu(e)}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}handleClassList(e,t,n){e.classList[t](n);if(t==="contains"){return e.classList.contains(n)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}relocateUsingSlot(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}appendNavItemToMenu(e){this.relocateUsingSlot(e)}isValidHttpUrl(e){let t;try{t=new URL(e)}catch(e){return false}return t.protocol==="http:"||t.protocol==="https:"}setImage(){if(this.imageUrl.toLowerCase().trim()===""){this.internalImageUrl={type:undefined,value:""}}else if(this.isValidHttpUrl(this.imageUrl)){this.internalImageUrl={type:"url",value:this.imageUrl}}else{this.internalImageUrl={type:"initials",value:this.imageUrl}}}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}setProfileGap(){const e=this.el.shadowRoot.querySelector(".inner__content-wrapper");const t=this.el.shadowRoot.querySelector(".label__wrapper");const n=t.querySelector("slot");const i=n.assignedNodes();if(!i.length){this.handleClassList(e,"add","no-gap")}else{this.handleClassList(e,"remove","no-gap")}}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}toggleItemMenu(){if(!this.internalHref){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenu();this.handleClassList(e,"add","right")}if(this.hasChildNavItems){const e=this.getItemMenu();const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}itemHasNestedItems(){const e=this.el.shadowRoot.querySelector("ifx-navbar-item");if(e){return true}else{return false}}render(){return t("div",{key:"460a07aacdfb0d8ab4db10d6159c8a86d7a0c69b",class:"container"},t("a",{key:"75edc747bf5e872a4fe7f4cfe115e75f1458666e",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${!this.showLabel?"removeLabel":""} ${this.hasChildNavItems?"isParent":""}`},t("div",{key:"b667aca628e0fa2f32de35362181358e3c283cdb",class:"inner__content-wrapper"},t("div",{key:"48f90aa7827cb0edc21f49f2ae3d39bff2851dde",class:`navbar__container-right-content-navigation-item-icon-wrapper`},this.userName.trim()!==""&&t("div",{key:"b646487c311b79678a3733a775505319b4796499",class:"username__tooltip"},this.userName),this.internalImageUrl.type!=="initials"&&t("img",{key:"4d8a19e18590f9999480fcf8862346bda64b52b4",src:this.internalImageUrl.type==="url"?this.internalImageUrl.value:`data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`,alt:this.alt}),this.internalImageUrl.type==="initials"&&t("div",{key:"d86a5665c56a1daea563106ce642cabf355f1640",class:"initials__wrapper"},t("span",{key:"e94d59b302cf81aa46b9be497b92a60045dfc42f",class:"initials"},this.internalImageUrl.value))),t("span",{key:"14019541d57f9181033bfc43b37b3b5be3a434cc",class:"label__wrapper"},t("slot",{key:"8bd16a0f5eb154f4f4d07f18630f9f09674cdd53",onSlotchange:()=>this.setProfileGap()})))),this.hasChildNavItems&&t("ul",{key:"90dd78807c02ecfe7de91bec3d428bc1104efcd9",class:"navbar-menu rightSideItemMenu"}," ",t("slot",{key:"b446b741c6065e16be99fb8c4bf3365d30583011",name:"first__layer"})," "))}static get assetsDirs(){return["assets"]}get el(){return n(this)}};r.style=a;export{r as ifx_navbar_profile};
|
2
|
+
//# sourceMappingURL=p-ea564500.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,h as o,g as i}from"./p-6b122987.js";import{c as e}from"./p-e459974a.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}';const a=s;const l=class{constructor(o){t(this,o);this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.icon=undefined}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=e(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const i=window.scrollX;const e=t.top+o+t.height/2;const s=t.left+i+t.width/2;if(this.position==="auto"){if(e>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const i={"tooltip-compact":true,visible:this.tooltipVisible};const e={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"2f35138e87796c57dff7cf5eb92001781a714edc","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"7739a2f8c71f851d1e58c0e77518107677cd2e85"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"f4c340136b918db9873ca8dfe3d8cbbbc126c3ce",class:t},o("button",{key:"ff455893ab4ccfce6382fbd304b3feb22972dffc","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"52cb44e3d84fdd10fb238ff8ba567feab8f9d0c1",icon:"cross16"})),o("div",{key:"ded62ccc8896056a6b0780474b649b7830009103",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"c8c60396c154768cd9ab9b23eaf036dd5b639ee3",class:"tooltip-dismissible-header"},this.header),o("div",{key:"27ca68485ffb44194f4f1e74651fd28e2a45162d",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"d871c1cf15d1511978a9c83ef11c5ab5854f0921",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"ba9d2b4b3b4434eaed8faa6db2e641b6a30f0aa3",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"5235880e4a3543e53708839bfe7577880c93e5c6",class:i},this.text,o("svg",{key:"89c655f203ba0b43a29d30b84d4cbbce5437e361",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"0463ad51e72f3d994faaf8d9f46dc614525715dd",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"8d8f48ea56f1ffb6c164e2ae93777ac14749d825",class:e},o("slot",{key:"8565dbb82773678e702fae9b74de36e81be53b70",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"4a1c19770dcf69aa9888c281f85e587812844e8e",class:"tooltip-extended-content"},this.header&&o("div",{key:"e077cd93e962cc66722e927bb3bded9f8fabbd43",class:"tooltip-extended-header"},this.header),o("div",{key:"d4564db6662ce4da5bd976232cc6e46d379ab843",class:"tooltip-extended-body"},this.text)),o("svg",{key:"5c9233e4d1c39fb4fe7522f7388d9018addbe7ca",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"5e20178a7ef43d349f10d29d4fd4a1dc31166e21",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return i(this)}static get watchers(){return{position:["positionChanged"]}}};l.style=a;export{l as ifx_tooltip};
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,h as o,g as i}from"./p-6b122987.js";import{c as e}from"./p-e459974a.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}';const a=s;const l=class{constructor(o){t(this,o);this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.icon=undefined}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=e(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const i=window.scrollX;const e=t.top+o+t.height/2;const s=t.left+i+t.width/2;if(this.position==="auto"){if(e>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const i={"tooltip-compact":true,visible:this.tooltipVisible};const e={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"245f013d5038ef804febc7091386efecfb605245","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"fd857d4c0128cd9cf2d8cdb6595302197a9bd70f"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"cf9b89a328589c16d7b450c600c94f15217b5676",class:t},o("button",{key:"60726f628cd8ef248449c1abbb399a0ae19e0c9b","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"7d650d5eee3ec4cd5761379be6753bfc57075f5e",icon:"cross16"})),o("div",{key:"1e6db1a138f2c72d93bd38c9aefc99423a50231f",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"5cb6de3d70b38f827ddc85fb54d354b975ef3e8e",class:"tooltip-dismissible-header"},this.header),o("div",{key:"fffbccad3af0737ee4085184a284b255472f6dbb",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"40727b371e53edd1b79f84bbfe7d25fecc2d76b4",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"cf35e71824f798a2418b14e92c7d2f4971076d90",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"7eb9f91ab5053f4e141cbaf1c689be51598cc22e",class:i},this.text,o("svg",{key:"3b5fbaeea95ce4437c7641a6cfc774c7d53eeeaa",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"28d637ccbbe4b95a5d676cb9ab051ad5f5e03cf9",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"0358fc58170af89ce3efa6f59648e18f9dedbd47",class:e},o("slot",{key:"674337fbf256e316d82ef05fa5fd5ec57e1f2674",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"83722d4ea9a67b65fc6dbaae237a32ec3b692a23",class:"tooltip-extended-content"},this.header&&o("div",{key:"839d14c58cfa8102ac792943a8cc92748f30e33c",class:"tooltip-extended-header"},this.header),o("div",{key:"82b1c5388edc5898dde69672b61a66b30bdcaa5b",class:"tooltip-extended-body"},this.text)),o("svg",{key:"d0b1e61adfceff620c36ac515521248ff0cfb184",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"f65f051955102b003d2c03fcc109daea55c94c0e",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return i(this)}static get watchers(){return{position:["positionChanged"]}}};l.style=a;export{l as ifx_tooltip};
|
2
|
+
//# sourceMappingURL=p-f36fabb6.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,h as t}from"./p-6b122987.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=r;const s=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.active=undefined;this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,h as t}from"./p-6b122987.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=r;const s=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.active=undefined;this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"cbee70d7f0f5c76a09d48423566bc3d485cd929a","aria-current":this.active?"step":false,"aria-disabled":this.active||this.complete?false:true,onClick:e=>this.stopOnClickPropogation(e),class:`step-wrapper ${this.stepId===1?"first-step":""} \n ${this.error?"error":""}\n ${this.stepperState.variant}\n ${this.complete?"complete":""}\n ${this.lastStep?"last-step":""}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active?"active":""}\n ${this.clickable?"clickable":""}\n ${this.disabled?"disabled":""}`},t("div",{key:"fee2738c8478680320ec50c53a92d6e7b92a86e3",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"96aa1a741cd013b6ae17f32de2725c368ea51618",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"c9c696ac8898befd165fed334c36e7f77c91aa4f",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"98ff6e603c94aa1a57c5f8491dcf2a17cd4a4864",icon:"check16"}),this.active&&t("span",{key:"2fc5ce8a43ef62ecae07fbf25688af0b629b8e6d",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"72db4eb91a114022e470d14e035c1ff4364f6f00",icon:"warningf24"}),this.stepperState.variant!=="compact"&&t("span",{key:"0a215fa7c2df964b4743f0fb0b16652b92003bfa",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("div",{key:"9b77faa804a42714b79535bfe530854c68ca6372",tabIndex:!this.disabled&&this.complete&&!this.active?0:-1,class:`step-label ${this.stepperState.variant==="compact"?this.active?"curr-label":"next-label":""}`,onClick:()=>{this.handleStepClick()},onKeyDown:e=>{this.handleStepKeyDown(e)}},this.stepperState.variant!=="compact"&&t("slot",{key:"a84af39da90db9e59e3b614f63de9802161a0e51"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"bdfaff2aed9faf5503fb89b7e2105c48d721dbe2"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};s.style=p;export{s as ifx_step};
|
2
|
+
//# sourceMappingURL=p-fb0a6d60.entry.js.map
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
3
|
-
"version": "30.10.0--canary.1696.
|
3
|
+
"version": "30.10.0--canary.1696.f6fc7149013229dfeecb984f52e464c01a339d3d.0",
|
4
4
|
"private": false,
|
5
5
|
"description": "Infineon design system Stencil web components",
|
6
6
|
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
|
@@ -1,72 +0,0 @@
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
|
2
|
-
import { d as defineCustomElement$1 } from './p-7e430b83.js';
|
3
|
-
|
4
|
-
const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
|
5
|
-
const IfxAlertStyle0 = alertCss;
|
6
|
-
|
7
|
-
const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
|
8
|
-
constructor() {
|
9
|
-
super();
|
10
|
-
this.__registerHost();
|
11
|
-
this.__attachShadow();
|
12
|
-
this.ifxClose = createEvent(this, "ifxClose", 7);
|
13
|
-
this.alertTypeDescription = {
|
14
|
-
"primary": 'Neutral alert',
|
15
|
-
"success": 'Success Alert',
|
16
|
-
"danger": 'Error Alert',
|
17
|
-
"warning": 'Warning Alert',
|
18
|
-
"info": 'Neutral alert',
|
19
|
-
};
|
20
|
-
this.variant = 'primary';
|
21
|
-
this.icon = undefined;
|
22
|
-
this.closable = true;
|
23
|
-
this.AriaLive = 'assertive';
|
24
|
-
this.uniqueId = undefined;
|
25
|
-
}
|
26
|
-
handleClose() {
|
27
|
-
this.ifxClose.emit();
|
28
|
-
}
|
29
|
-
renderCloseButton() {
|
30
|
-
return (h("div", { class: "close-icon-wrapper" }, h("button", { onClick: this.handleClose.bind(this), "aria-label": "Dismiss alert" }, h("ifx-icon", { icon: "cross-16" }))));
|
31
|
-
}
|
32
|
-
generateUniqueId(prefix = 'id') {
|
33
|
-
return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
|
34
|
-
}
|
35
|
-
componentWillLoad() {
|
36
|
-
if (!this.uniqueId) {
|
37
|
-
this.uniqueId = this.generateUniqueId('alert');
|
38
|
-
}
|
39
|
-
}
|
40
|
-
render() {
|
41
|
-
return this.variant === 'info' ? (h("div", { class: "alert__info-wrapper", role: "alert", "aria-live": this.AriaLive, "aria-describedby": this.alertTypeDescription[this.variant], "aria-labelledby": "alert-text alert-description" }, h("div", { class: "info__text-wrapper" }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: "headline" })), h("div", { id: `alert-description-${this.uniqueId}`, class: "info__description-wrapper" }, h("slot", { name: "desc" }))), this.closable ? this.renderCloseButton() : null)) : (h("div", { class: `alert ${this.variant}`, role: "alert" }, this.icon && (h("div", { class: "icon-wrapper" }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text", id: `alert-text-${this.uniqueId}` }, h("slot", null)), this.closable ? this.renderCloseButton() : null));
|
42
|
-
}
|
43
|
-
static get style() { return IfxAlertStyle0; }
|
44
|
-
}, [1, "ifx-alert", {
|
45
|
-
"variant": [1],
|
46
|
-
"icon": [1],
|
47
|
-
"closable": [4],
|
48
|
-
"AriaLive": [1, "aria-live"],
|
49
|
-
"uniqueId": [32]
|
50
|
-
}]);
|
51
|
-
function defineCustomElement() {
|
52
|
-
if (typeof customElements === "undefined") {
|
53
|
-
return;
|
54
|
-
}
|
55
|
-
const components = ["ifx-alert", "ifx-icon"];
|
56
|
-
components.forEach(tagName => { switch (tagName) {
|
57
|
-
case "ifx-alert":
|
58
|
-
if (!customElements.get(tagName)) {
|
59
|
-
customElements.define(tagName, Alert);
|
60
|
-
}
|
61
|
-
break;
|
62
|
-
case "ifx-icon":
|
63
|
-
if (!customElements.get(tagName)) {
|
64
|
-
defineCustomElement$1();
|
65
|
-
}
|
66
|
-
break;
|
67
|
-
} });
|
68
|
-
}
|
69
|
-
|
70
|
-
export { Alert as A, defineCustomElement as d };
|
71
|
-
|
72
|
-
//# sourceMappingURL=p-2ca9c3ff.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"p-2ca9c3ff.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;;;;;;QAQhB,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;uBAbuE,SAAS;;wBAGtD,IAAI;wBACb,WAAW;;;IAW9B,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/K,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvD,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.alert__info-wrapper {\n display: flex;\n padding: 16px 24px;\n font-family: var(--ifx-font-family);\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n & .info__text-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n width: 100%;\n\n & .info__headline-wrapper {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n & .info__headline-wrapper,\n .info__description-wrapper {\n color: #1D1D1D;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n\n ::slotted(p) {\n padding: 0;\n margin: 0;\n }\n }\n\n & .info__description-wrapper {\n font-weight: 400;\n }\n }\n\n & .close-icon-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n //min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n}\n\n.alert {\n display: flex;\n border: 1px solid tokens.$ifxColorOcean500;\n border-radius: tokens.$ifxBorderRadius12;\n color: tokens.$ifxColorBaseBlack;\n background-color: tokens.$ifxColorBaseWhite;\n font-family: var(--ifx-font-family);\n box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n & .close-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: tokens.$ifxSize500;\n\n & button {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: tokens.$ifxColorBaseBlack;\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n }\n }\n\n & .icon-wrapper {\n position: relative;\n min-width: tokens.$ifxSize600;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: tokens.$ifxColorOcean500;\n }\n\n & .alert-text {\n font-size: 16px;\n width: 100%;\n padding: 12px 0px 12px 12px;\n color: tokens.$ifxColorBaseBlack;\n\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 /* breaks text at arbitrary points when needed */\n }\n\n &.primary {\n border: 1px solid tokens.$ifxColorOcean500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOcean500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorGreen500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.danger {\n border: 1px solid tokens.$ifxColorRed500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorRed500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.warning {\n border: 1px solid tokens.$ifxColorOrange500;\n\n & .icon-wrapper {\n background-color: tokens.$ifxColorOrange500;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.close-icon-wrapper {\n & ifx-icon {\n &:hover {\n cursor: pointer;\n }\n }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\n @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n @Prop() AriaLive = 'assertive';\n @State() uniqueId: string;\n\n alertTypeDescription = {\n \"primary\": 'Neutral alert',\n \"success\": 'Success Alert',\n \"danger\": 'Error Alert',\n \"warning\": 'Warning Alert',\n \"info\": 'Neutral alert',\n };\n\n handleClose() {\n this.ifxClose.emit();\n }\n\n renderCloseButton() {\n return (\n <div class=\"close-icon-wrapper\">\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n <ifx-icon icon=\"cross-16\" />\n </button>\n </div>\n );\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('alert');\n }\n }\n\n render() {\n return this.variant === 'info' ? (\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n <div class=\"info__text-wrapper\">\n <div class=\"info__headline-wrapper\">\n <slot name=\"headline\" />\n </div>\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n <slot name=\"desc\" />\n </div>\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n ) : (\n <div class={`alert ${this.variant}`} role=\"alert\">\n {this.icon && (\n <div class=\"icon-wrapper\">\n <ifx-icon icon={this.icon} />\n </div>\n )}\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n <slot />\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n );\n }\n}\n"],"version":3}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,h as c,g as a}from"./p-6b122987.js";const d='*{font-family:"Source Sans 3";box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}header{margin-bottom:15px;display:flex;justify-content:center}.header__info-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.infoboard__wrapper{display:flex;gap:15px;background-color:#f1f1f1;padding:5px 10px;border-radius:10px}.title{font-size:30px;font-weight:bold}.view{margin:auto}.wrapper{position:relative;width:100%;height:calc(100vh - var(--header-height) - 15px);overflow:auto}table{width:100%;table-layout:fixed;border-spacing:0}thead tr th{border-top:1px solid #dddddd}td,th{padding:10px;background-color:white;border:none;box-shadow:0 0 0 1px #dddddd;box-sizing:border-box}table th:nth-child(1){width:150px}table th:not(:nth-child(1)){width:240px}th{position:sticky;top:0;background-color:white}.sticky-col{position:sticky;z-index:1}th.sticky-col{z-index:2}.second-col{left:0;border-left:1px solid #ddd}.wrapped-content{width:250px;white-space:normal}a{text-decoration:none;color:black}.basic__info{display:flex;gap:5px}ul{padding:0 5px;margin:0 15px;list-style-type:none}tr:nth-child(even) td{background-color:#f1f1f1}ul li{font-size:12px;display:flex;gap:5px;line-height:13px}li.planned__component-wrapper{align-items:center;line-height:16px}.version__wrapper{display:flex;flex-direction:column}ifx-icon{color:rgb(10, 130, 118)}.check__icon{width:10px;height:10px}.planned__icon{width:12px;height:12px;vertical-align:sub}';const f=d;const b=class{constructor(c){e(this,c);this.getPlannedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".planned__component");return e.length};this.setPlannedComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-planned");c.innerHTML=e};this.getCompletedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".completed__component");return e.length};this.setCompletedComponentsNumber=()=>{const e=this.getCompletedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-completed");c.innerHTML=e};this.setTotalComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.getCompletedComponents();const a=this.el.shadowRoot.getElementById("number__indicator-total");const d=e+c;a.innerHTML=d}}componentWillLoad(){let e=this.el.parentElement;if(e){e=e.parentElement;e.style.padding="0px"}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("header");const c=e.offsetHeight;const a=this.el.shadowRoot.querySelector(".wrapper");a.style.setProperty("--header-height",`${c}px`);this.setPlannedComponentsNumber();this.setCompletedComponentsNumber();this.setTotalComponentsNumber()}render(){return c("div",{key:"024f5a930c210544c6f563c0d7f906e5bfa38bbc",class:"container"},c("header",{key:"bbb6bdc0dad0226ccb0653319e2da13b540c65e4",class:"header"},c("div",{key:"1978c15414e46530532523a41ce714faa1db6eb9",class:"header__info-wrapper"},c("div",{key:"28fd5d40f40e7bc0a745d14e0e459e3aa2b23026",class:"title"},"DDS Components Overview"),c("div",{key:"3405f48ed07a1b01c43f7bd30d93a83b899014a6",class:"infoboard__wrapper"},c("div",{key:"dd8068e7ed66f62c5f8e74fbb48500205da7af3d",class:"basic__info"},c("div",{key:"5df0c8545cd6f3d12df72fc48aeb7829aadd38f7"},"Total Number:"),c("div",{key:"7de166b707b734e3758f6dffe1ead817e5c0c899"},c("ifx-number-indicator",{key:"791125adba985924da67036c4063c3169344cedf",id:"number__indicator-total"}))),c("div",{key:"cc45aef8d898c4fbaf3e6750908a8364d6413d33",class:"basic__info"},c("div",{key:"8ab1a09336d6dcb1df5b45aac9b6fcfcdf374fa3"},"Completed:"),c("div",{key:"2ec32943e48207a4a5a70014c5a100ff32da4ef6"},c("ifx-number-indicator",{key:"8fa2ebc4960940c2038d4bb59d61e7e698dc5169",id:"number__indicator-completed"}))),c("div",{key:"cb5233a0001f11732aa3931dfa6048d4ad68784c",class:"basic__info"},c("div",{key:"692eb6a2ed325f938b166db9a2e94f21ed264027"},"In Progress:"),c("div",{key:"f59382b9b961c7a1e339b95fa057a15d42b0cff8"},c("ifx-number-indicator",{key:"41a0cc66f29582189f90ded365348730b263d43d",id:"number__indicator-planned"})))))),c("div",{key:"8ed5925b8764e0342890040238aad71a65003d3c",class:"view"},c("div",{key:"01a4c9952c8335dd4f3b84e155a61851531d0597",class:"wrapper"},c("table",{key:"1c779ac8d3459fc6e670737a277bc5d1126ad2d6"},c("thead",{key:"2c69217d978cb0bd71eea3f70d4c32065fc9bcc1"},c("tr",{key:"f08c9bd749ee3dfc0198e06dbe12a9eef8de803b"},c("th",{key:"a685152e69f9e064e4bbd3adcc76303de3d87b21",class:"sticky-col second-col"},"Component"),c("th",{key:"6b6009a3ac2f2cb8111570cde5a8dfc803838ae4"},c("div",{key:"c393d76fb793227d653a810c629698f47d5a6c98",class:"version__wrapper"},c("span",{key:"25388d0561b8a5a7356a4e73d9c384a823c45f86"},"Version 1"))),c("th",{key:"08f9666f450c23887481cb6a875ba1ba282b3eaf"},c("div",{key:"a2e06277927afb3649d37b45c860bc2c7eaf8741",class:"version__wrapper"},c("span",{key:"c5e1cdb8feef147b0e5f878d78c4cac5127e8154"},"Version 2"))),c("th",{key:"b3938834dde276ae8aaabdba2f8a7748a611032f"},"Version 3"))),c("tbody",{key:"9f0d531823f49e6b50373d0e70a63168531c9443"},c("tr",{key:"41b7212975067877a5abcb8dc87041baada7adf3"},c("td",{key:"0564ff534e9f694ae20bda0d6fafde2b6591d82a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"80a28b61841632932aeba24c294dea5f27c1fcd5",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"d02a9fb1c4f87307769a08b7193e7f93bd879775"},c("ul",{key:"d1df497ab6508dc2310827cba0ff94461439985d"},c("li",{key:"32f7e8b97c3ad60852b60dc4b120e8502538afbc"},c("span",{key:"8c354ef64de9939d42cfeabc858c127952fe0aea"},c("ifx-icon",{key:"d4bb314df1de5a2cafeb01cfc2cc6f8ceb845d55",class:"check__icon",icon:"check12"})),c("span",{key:"a449d6f817ebe030aebfa11401de789d5bccb141"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"1735f59911d56a27cd36d7b449fbb11f8e414285"},c("span",{key:"677a933c97cd8ba1530fca1ff21120bd3a4970a2"},c("ifx-icon",{key:"99fe44f18ec7cd8a3a336e47c469ef3cdfbef051",class:"check__icon",icon:"check12"})),c("span",{key:"139910276471a95b2f1d34d913974e6e74c9641b"},"Adheres to web standards")),c("li",{key:"2d26bde58bf4b80d3e65ae53f01881eaa9d45773"},c("span",{key:"d88130d648d0caaeccf1dfbd57cbc07d5a7c5ea3"},c("ifx-icon",{key:"9254a7be3d53fd746a8f95c87573bcbd57587b01",class:"check__icon",icon:"check12"})),c("span",{key:"347274c1c7e05c685e9ef37a4bb139a5b8c24fe0"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"d1e1eea966b74e75494ff9cab1db60c4e0f4ae92"},c("ul",{key:"c432aa206278aad277197e1a23d7e7f67efe9019"},c("li",{key:"625f3981bc42bc6bccb3ba768369b9c4409356eb"},c("span",{key:"856c23969718aac1f7f4bb646844719742f870d1"},c("ifx-icon",{key:"d92b21be949db912db1924aea9a17959a9ab6a81",class:"check__icon",icon:"check12"})),c("span",{key:"e2170619294e9501918721a7db56d4ee7d6cd9f6"},"Auto collapse feature")),c("li",{key:"9fe97d06274dfcfe0dfb450d16aabacecc635582"},c("span",{key:"996cf903bf8b11b676171d4c1e175ec08c396ccd"},c("ifx-icon",{key:"0178faa360335c535e28a82787d5216165d91935",class:"check__icon",icon:"check12"})),c("span",{key:"8fa194677f397f510a4c399d8130d65be6ff281e"},"Initial collapse feature")),c("li",{key:"8c3f3b67147247430656685eb7cacc86a0a94d61"},c("span",{key:"68c481ce09af4eac72a62c1fe0b021510c3fe300"},c("ifx-icon",{key:"a14cccc9d4029df644f66431d695faecde2b8813",class:"check__icon",icon:"check12"})),c("span",{key:"23e6a629a1bf6a91d6d1e01febccc1752fee84ad"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ef09c8a1d0d8971a2782ef069f2eaef69f9eba5d"})),c("tr",{key:"81c6366e2b8baae15c4c562085d15dee7539ed98"},c("td",{key:"8017e0166666f2c2c708dac2453363f1c5e6c747",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"96dc66f73384da3ebe7f9c9f7a6945a43109f74f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"6402731e8d7ebbc5671b1af5e1d20045c2dfe60b"},c("ul",{key:"6178aeedf62eb0a0bf10810fe3f7c26a2eeaa5f1"},c("li",{key:"f03bce671a54e31f4bca7a943f08519196503c94"},c("span",{key:"e0b4d387d8e646fbba0350d5044974213dceceec"},c("ifx-icon",{key:"92e2f6871773cd6505fdd6b8aaef9c3521ba6b9f",class:"check__icon",icon:"check12"})),c("span",{key:"7dfc9cb9e697cf344f9c250cb72e379a527b5c4c"},"Provides a lightweight and customizable interface for presenting alerts, including options for different alert types (e.g., primary, success, danger, warning) and basic styling configurations")),c("li",{key:"6a43ed9b716bc74169941bbb02abc7268f8f7f16"},c("span",{key:"47657d6af2f658836e5edd7b751d3c76d8387b7f"},c("ifx-icon",{key:"174791b3ef7294604d9f0524c4a6a6ad06ecca72",class:"check__icon",icon:"check12"})),c("span",{key:"e4be71da76c86470c7a7e8b217e49b7ad0fae834"},"Adheres to web standards")))),c("td",{key:"91d89a82069f14febb676c9397cc887cae3b8d2d"},c("ul",{key:"1243b0ab7452a716ef2b8ce7e54c98a5080a7758"},c("li",{key:"a9f5ad8a71ae61a3751fd33e9c5eb1a01e26a777"},c("span",{key:"9129b9653841f8104c990ff12f3e1e320d6617cf"},c("ifx-icon",{key:"4f3ac573de16d6ed251b2f41cbd822951096c6d5",class:"check__icon",icon:"check12"})),c("span",{key:"e2894e584971f5e890b6ae4414c7c7109e5b873c"},"Configurable close button")),c("li",{key:"3a75ca35e7df88d470a85221f92a68cb8c51dc41"},c("span",{key:"672f0f7f0dc91f0058ff27f241caeccda0509249"},c("ifx-icon",{key:"371930d271a86f1cb3f09dbfd29477806751aaee",class:"check__icon",icon:"check12"})),c("span",{key:"6e3cb3c11289f5cf759444848157ffce7a539b37"},"Additional Info variant")),c("li",{key:"d96d03d7a958c26f6243f375c96fd76a096c820c"},c("span",{key:"ac12afb5990462431a2d6c96aed7d0d30afa15c4"},c("ifx-icon",{key:"6b7673dd6aa4bb4370cca0436e9a952092faac29",class:"check__icon",icon:"check12"})),c("span",{key:"c16ddae5aa2426e33d4b795b9bd5546f822f165d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a5c38fc4d205716a1ca08b7879633f258c5fb9b0"})),c("tr",{key:"afd19aa60bfcbd274dd6004c12f872a0b7410a32"},c("td",{key:"289afbd46c7e8ecd5e5340e091f9baab7a772f9e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3c176207a570d9634a3024cdb3705448c863b28d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"eb589b7953f9a0772e5fe6b112f8cb9ac165bf24"},c("ul",{key:"4998754db19729da7301333ddb9a1bfad46b2557"},c("li",{key:"0965dbe3ff65ed8afab4464b9c4eeadf5535bbb0"},c("span",{key:"e6de68c9c635fd01f37bff6212fb2d2137c9dde1"},c("ifx-icon",{key:"e2ab18c6bacb2b2a7edb833355b4a985d65b2fdc",class:"check__icon",icon:"check12"})),c("span",{key:"e87fa997b213e5e5878c79e0dd07d3c82f0eb1c7"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"396e6d97572991eea29ceb0ce62f07b0c78ec98e"},c("span",{key:"0ad85732f66dc3da8bcf055963a5dc73a371d012"},c("ifx-icon",{key:"567aacbd96ceaf78cb5e96b33399db803f391a20",class:"check__icon",icon:"check12"})),c("span",{key:"c01eb115e103658b1eb38b43dc1024cd1fbc70df"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"73cf7fb9a4558e116df201b144e0da4a70466d85"},c("ul",{key:"ff654ef238261e41874980c4908f2594c74f1ae3"},c("li",{key:"4fc687732ee6233f37987ed7f8554d816c00f4bf"},c("span",{key:"397970fc07e6f219223b28cc8c82c5644ceb0efb"},c("ifx-icon",{key:"170221b52ee488e1c50e27a81eacba97422b1009",class:"check__icon",icon:"check12"})),c("span",{key:"71507dab368f140c26eb5619a55ffcf7bc4b0c4e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"45a1eed050d7eeaace58f255130062e9ebd4958a"})),c("tr",{key:"757be787474282c79573f753c24deecb06181676"},c("td",{key:"0b153dc33a02779c191ee4b5e7c0f88c8da2e52c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8fbf7954c69c5f87fc9b0da199f6284738287ac3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"a74f363b9bf36e0b044930a82c43fde911f9332d"},c("ul",{key:"33d271b586ca025c087015dfe901bb7b86dd2025"},c("li",{key:"d7da5a9fdd2d6a72854f40ba8d848dc135a58416"},c("span",{key:"eca9d9646000e1f16212d05676a211287489fbc4"},c("ifx-icon",{key:"49b2124b03906d045de9d79f8259e3145f2877cc",class:"check__icon",icon:"check12"})),c("span",{key:"0629ac76abb661a3d57821493213f765efb067ec"},"Provides a simple and customizable way to display a sequential trail of links or indicators, representing the user's current location within a hierarchy of content")),c("li",{key:"c1a376c0d47b27a00ba0d7fd0bfbfc0513d9e289"},c("span",{key:"72581b144c80b77bb2447df3a0cd7b6dbc9260de"},c("ifx-icon",{key:"9f1ca11e32a08d078f4d32cde6020d4e20dad54e",class:"check__icon",icon:"check12"})),c("span",{key:"47e311d02befa248d480e960fc59ab791957c2d1"},"Adheres to web standards")))),c("td",{key:"888e2a0d02d3f3c2e5ab13c0ff4b41bae62d5c2f"},c("ul",{key:"863c2346b61cb52f57b5106a23577b6512574e6a"},c("li",{key:"0768c0318ce3bb24da91c6ff3750e204be5f807e"},c("span",{key:"af59228b94cb967b75b306d221c299556a547e57"},c("ifx-icon",{key:"003e0dee0c7fb11a97b78835e8d544498e9606ab",class:"check__icon",icon:"check12"})),c("span",{key:"ba1997af54f1947b69f2784cd70d4eaf0f0ef4a8"},"Possibility to add an icon")),c("li",{key:"68db61667a8b62b985be524a7a5dec826d1647e7"},c("span",{key:"8dc59d285e0eff18aa423970e8d70dd998c2e571"},c("ifx-icon",{key:"ce6f6789c5adec373e918d43094c2d838c7b6f6c",class:"check__icon",icon:"check12"})),c("span",{key:"50dc222125795561ca64ff3436fd49a86ae82b3d"},"Incorporated dropdown-menu for individual items")),c("li",{key:"81f352ae692e3c229021fb935066851eead19d33"},c("span",{key:"3a6a340b44ca89dc5d45e0201fd440c3ea9a1ea1"},c("ifx-icon",{key:"3b6a56012e89dcf99cd0f0784a6a4984a656075f",class:"check__icon",icon:"check12"})),c("span",{key:"8174c247e12734faa78f2656e8ce56760b884f1d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b257529e9f5d7bf76f119ebce39395f8853a23d0"})),c("tr",{key:"64899eecba152983fa2f5adf811611a76c25382b"},c("td",{key:"050f8ae17c916bd30f5c94bf45397a7355599919",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"22ac670df969befcb336904ce8df7e732c6de8b4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"3cc1663f56fe6bda6a34701c7400bd33b829593f"},c("ul",{key:"8685deffa3b7ed1a59892bc1c357e4aa4eeffa20"},c("li",{key:"6687c704067088ecc3f164a1a771433a7e1a457c"},c("span",{key:"f622a8950d7bcfabcb15cd847396a97668bdfda1"},c("ifx-icon",{key:"18f66ad396cad2fca170b88fae26ed2c83b42c5a",class:"check__icon",icon:"check12"})),c("span",{key:"6cf3b30e4e25265d370706675a259904ff86d018"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"abe99e0de1655887b063df90b6d450346ef487a4"},c("span",{key:"3ddc9dc1388f740018f5b9fae2ebcfa33f65fcea"},c("ifx-icon",{key:"cd0eb511ca714ac7875a53ec3a0fc9c90e8fb977",class:"check__icon",icon:"check12"})),c("span",{key:"94f04e082eb8450325ce6a2d5527647e1c65a111"},"Adheres to web standards")))),c("td",{key:"55193a9c68493f6eab04e1f1ee04a12afe957a56"},c("ul",{key:"5718928a908207c98ed5f5c95f92bf1cb7eaddd3"},c("li",{key:"9d57df617605643123b6602c8977c65e0ce7bdba"},c("span",{key:"4a7c9aa82e7a0d95682bc25506de4ffbf3250949"},c("ifx-icon",{key:"fa01ac88389fe570e3bb2f5b5712ccff6e457d21",class:"check__icon",icon:"check12"})),c("span",{key:"e312ba8e34fd656d0960c752dfe8004310e97638"},"fullWidth feature")),c("li",{key:"363b74613bade83d11446b889f935ad51c897c3f"},c("span",{key:"5f974c8bfbdb9500a0f12fb1f4bd38d9d62a7856"},c("ifx-icon",{key:"1932b0b2bfa6a6f9e9254061e3407927b81a5966",class:"check__icon",icon:"check12"})),c("span",{key:"06fff395f974c6377c25f888a7dfab1fe995e15a"},"Icon integration")),c("li",{key:"0fbaa0bd639c301309b881a2e3907f4dc64e9f70"},c("span",{key:"76a72e1b9a4aeab250a7d20f34551b1b841cea81"},c("ifx-icon",{key:"a52980ba86899c6d43d20d580732f4cd4157217b",class:"check__icon",icon:"check12"})),c("span",{key:"a3cec53326119a69eacbc1160291de5595183c4f"},"Link integration")),c("li",{key:"968d8075b7fee2005706e836220319c90bafff2a"},c("span",{key:"a18715904ca92559a2eef9984ff4efa7ed08ee79"},c("ifx-icon",{key:"0edaa267ea18479f51688f7da46d95299c200bfb",class:"check__icon",icon:"check12"})),c("span",{key:"d0ae907783a451950289921eb73d3a1057186711"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2dcfb92302c5090232a27dab5551d3a01fd89916"},c("ul",{key:"6e13b1dcd22dcba2ff592b50b1b2490fe778ebb2"},c("li",{key:"6c82d7b9cbe7fe1bfc193b9437c3ba890317c6a5"},c("span",{key:"7e40f298e5dfb4b1f5fee08bdb4525ca28e14792"},c("ifx-icon",{key:"45547ea6e52ad67a33c518d07dcf973902967c6b",class:"check__icon",icon:"check12"})),c("span",{key:"ddda9c68e92399f9c9fbebd7b04973a8e7311e4e"},"Form integration"))))),c("tr",{key:"fa13e113c5782b061469fae2a4c151765dc37abc"},c("td",{key:"32474666b8ffb065e642ecca09c3a8846e36d97f",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a196c5bd48127a7bb6d64ee0a5e9f5fb793c3bd4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"ad6a9094822bc44012cdc719e915ac6aa3df05c2"},c("ul",{key:"f57d85c5917646d5b4bdfd20a933b7d2b2da4e93"},c("li",{key:"2b9e896fee90c45903b7f7795e3db69ec6f1a6b1"},c("span",{key:"adfc3ac85da65497a05997e320ce8b735a162c96"},c("ifx-icon",{key:"5ec13578db1adb457b1779adb1b278cef6cf7cb6",class:"check__icon",icon:"check12"})),c("span",{key:"02b3c9fc35b5555b120a5ae633af59b9d05dd005"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"d9379fb3a64634cb48340eeb4ab76714929dfa88"},c("span",{key:"e8ac86b39942f205100f550338773cf411aefc68"},c("ifx-icon",{key:"b4f14e49e4afb0686611ac6bcd9a16c80751d782",class:"check__icon",icon:"check12"})),c("span",{key:"f3561b63b0d7b75d792d2f0a5fb59ab13e23c13f"},"Adheres to web standards")),c("li",{key:"6c16008ff9fc550a26300490eccf1e56811755e6"},c("span",{key:"406c0cfb5e9bf5cf1b8bf433e73783093fb44749"},c("ifx-icon",{key:"09c7ebce970671ba3e3cdb30b64d5cb76a026921",class:"check__icon",icon:"check12"})),c("span",{key:"17aaccb9bb1944e93c303171e616fdca981bbf64"},"Horizontal and Vertical layout")))),c("td",{key:"64735ce8cd0798f911122726eb1422724c65ab66"},c("ul",{key:"d6aa6cef0d58527ef40cb70758c9d2e423e6071f"},c("li",{key:"eb2c9a13e711d0344d1104cdf402290967d98e2b"},c("span",{key:"85601b6ab10b871522606ef67ce16a709302cc7a"},c("ifx-icon",{key:"0d0abe57e5c1c2a0743b3bf5b02c11e2df4839ba",class:"check__icon",icon:"check12"})),c("span",{key:"85c16213e2cfacd273f42926a7ef5d50b93ca374"},"Possibility to embed multiple buttons")),c("li",{key:"f3d4f3053f331ad3863864c34f12fec2d443a5fe"},c("span",{key:"b1459aefe1bf0709ac70dd15b058cffa65d68919"},c("ifx-icon",{key:"437490aba84d04e1cd7437b0d4db85e42d1692c8",class:"check__icon",icon:"check12"})),c("span",{key:"b0ae08ce414acffdf551a3c2bbd771c52b6311cf"},"A switch between a Link and a Button")),c("li",{key:"a1007c9b80631173d6842d091fd013194316fffe"},c("span",{key:"06b580bd628dca3991cf951b19935455e6fdf7f1"},c("ifx-icon",{key:"017bb965de0bb73d0097e84e3bc42300598b6bc2",class:"check__icon",icon:"check12"})),c("span",{key:"8ceb31ae1cbc981b66db0bed14b93474fd174873"},"Enhanced stylying behavior")),c("li",{key:"1ad66f169138b79286601bfe84da77a10b2a6fcf"},c("span",{key:"c7364abb272204a26e609d58060ef4a9a8bc7345"},c("ifx-icon",{key:"9dda3a31c6196e2460063d431007b40a5880b2d9",class:"check__icon",icon:"check12"})),c("span",{key:"f997144a987377c632207c52a33cf790af4b6c78"},"React, Vue and Angular wrapper integration")))),c("td",{key:"82c29baa241b696ee3e1da2880acfdf9fe50e7ce"})),c("tr",{key:"a317160e694784aef25ddc92cf4fe9408f06cf60"},c("td",{key:"8dce93ceb5976de970d8cf5f0914e2cd5c2eacd7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3bea45275c33ef2083faa95da1df87d8059ac56a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"743c57e0a4d7fbbd6f72c825c68ee49bc3fe3ac7"},c("ul",{key:"2c89b620f31f45d54f76815713a3d07077e10864"},c("li",{key:"0df978eeab5f347dccba43c4a5f7d5b070fda653"},c("span",{key:"b929e001bafdb02519bcc699372c7609fbc21b87"},c("ifx-icon",{key:"2466fd89eb1fb5d8aaba230dc13de1b6dcc0c030",class:"check__icon",icon:"check12"})),c("span",{key:"13943c3be0730fb7d61f241a2327c2202cd95bde"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"f69d5db7e59ddac4db264ff4c19f3b7a37b04fcb"},c("span",{key:"09ad3e87df465a5bf175c15d8ee121e04e24a0f4"},c("ifx-icon",{key:"3b76c35ef396b4d8ea100adcca413090742ba20c",class:"check__icon",icon:"check12"})),c("span",{key:"e27e2de96c6a3c893e6c42b764590f24ce470aec"},"Adheres to web standards")))),c("td",{key:"e3e2e95369c48541318d7513d0fba1b32bf6abad"},c("ul",{key:"38c46d8f81f19bcf1712df7fd0b5bf055a4165f3"},c("li",{key:"ef4cbe007d532bde665a362cabb4584c64767faf"},c("span",{key:"b7a0016cc993be1b9df0c5e1aa0b3d58a0395e11"},c("ifx-icon",{key:"a5dc2dfdec165483f75c5300e3e9fe41d08249fa",class:"check__icon",icon:"check12"})),c("span",{key:"0a23ab4776599425d3a9ff15f27baa37bc9bbc8a"},"Indeterminate state variant")),c("li",{key:"b1c91d3ceaf2c2d57e65897c8065d730b9eec1c2"},c("span",{key:"68ff9ed92af002dee741545718261a8d75a79899"},c("ifx-icon",{key:"6129f3be6bceccbb6283214ad9fb611f8b3cf1e4",class:"check__icon",icon:"check12"})),c("span",{key:"641a6c938d6cbcece002fcf444382b7ff734f9b3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9f002de1931069e50ffb193fe78ce4161c26d9a7"})),c("tr",{key:"59397f1e538892ebc35cce3ce4e0e90ab08626c8"},c("td",{key:"3b89ac430c3123285874e92727d284ee360dc0c9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d5b9946d4bcbaf922f8fcf728093611b1456c283",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"64c6b56ef3da7607a22882d090cc2d4f4b5ef6ba"},c("ul",{key:"d4a1c5d2b644418b27090819cb942e7aad966ca2"},c("li",{key:"31479d1d4903dad746d278d9108d3ae9660c46bd"},c("span",{key:"c426d336bfb969d2d44d78c4f3401fbee400d3a1"},c("ifx-icon",{key:"22f1e1ef5cc146083a2f2e40b3e3fcdbaedad3d0",class:"check__icon",icon:"check12"})),c("span",{key:"b126bec3b82c731c4acb8bd075899e476a853544"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"e610bbde5edcdb94ff4298d181a993587ab5f162"},c("span",{key:"c934f7bcabba156fb434c97e70f4ea0a901a44ec"},c("ifx-icon",{key:"5502b3dfecdfce1fb782385aaa3398c023ce2e16",class:"check__icon",icon:"check12"})),c("span",{key:"21f5e131b8a9028be3037308cac37af067af8f4e"},"Adheres to web standards")))),c("td",{key:"b6fec207feb4fcfcc83f8fc9ca038a77bf5c6272"},c("ul",{key:"43392b02f8522b6e2cab9da4370b365688cf550a"},c("li",{key:"ef5bbde0b9c75defb7059b6e101e909fef52257d"},c("span",{key:"bfc79400f23d8f9a9bd62d90b6f723500bda69e3"},c("ifx-icon",{key:"4d4c319988a4065630a7805e5e74c612ed360f92",class:"check__icon",icon:"check12"})),c("span",{key:"fc7178ecbce1e9299a68ea236eb492c28a696c42"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"4d5906794be2fd1f2c11735babb94e5c56f677fa"},c("span",{key:"36a90612e7a8ba8157c3005e3226b67441a3f3df"},c("ifx-icon",{key:"2bd20337f676afe66e1ddd8e5a2ef6f37235e535",class:"check__icon",icon:"check12"})),c("span",{key:"98f3c5855cc5170f11feab37b920199aa068f227"},"React, Vue and Angular wrapper integration")))),c("td",{key:"374de22e37526e080960414077e2c27d4f073a79"})),c("tr",{key:"e4418c8b6de9ffd1e628f8e6d272bb07a87d9282"},c("td",{key:"9fbf995b80a5345e57872787282fba4ba0455476",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8a263ee2c5e10ee08c74ed95ec9994b8db78d633",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Date Picker")),c("td",{key:"228f2ea64b27e263a0ad371cfc6d0256b40141e5"},c("ul",{key:"96d816b2c4e277f5035602b884933b16e194ee07"},c("li",{key:"87a5f61a3953f9d44dd3a4e66a8c8f38cf65212d"},c("span",{key:"9849d93bf119427acaab44edebbd3b578809c4cc"},c("ifx-icon",{key:"8c8e303fb51a16f7b42780b0efb7b9dbc4b43f41",class:"check__icon",icon:"check12"})),c("span",{key:"e0c62be333216947842263eac5ddda4ea684faa1"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"0b83fe51cb073a4ce40842a96bc89af15894dd65"},c("span",{key:"46ea06d899dc579f5220d5be75723421d3a974c4"},c("ifx-icon",{key:"9b383976a949a207e2b2c00bac10212d57bde81a",class:"check__icon",icon:"check12"})),c("span",{key:"f8d567670be5a5958dea9964cda28db413b70699"},"Cross browser compatibility")),c("li",{key:"e9136d3ec2984e9a91088e2a259f4fb4db024601"},c("span",{key:"6de025645f276f7db3b1b6d4df4cbe31848a3a5e"},c("ifx-icon",{key:"40c2f3faef7774eadba00eaa799630aaeb08593a",class:"check__icon",icon:"check12"})),c("span",{key:"7f755241301b0e6ab14525d04a1e09b0c621fc62"},"Form integration")),c("li",{key:"518d88d2847f5450d387c2aedb637a285b329815"},c("span",{key:"bf1aa1c2fd0163ab5dbfc3b207e998774b25f4d1"},c("ifx-icon",{key:"f540a3ed08996d3ad234ad999f424eb308694a1b",class:"check__icon",icon:"check12"})),c("span",{key:"29da17070ad94048966549369a05ad12c8e83e60"},"Adheres to web standards")))),c("td",{key:"65041b7d9d96629b7d2963e95cc24b1d8d8751fd"},c("ul",{key:"68231112e4dfa9380df78d1db9c7bb26063e1958"})),c("td",{key:"2e4df9d2a69429bb7c81d4ca1c3c068f550f0e77"})),c("tr",{key:"cadc2ef14189795db2289864a4f09dde0f5f3ff5"},c("td",{key:"3544a0c71520ddba4b03daf20b3cf54f8d30577e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"eb479ce594908b6d5aacd965d283aac1155d99da",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"4becabc30289b5f965e4f8b15d7de940a764ee44"},c("ul",{key:"d1bd3587f2d1053ae1573e02dd34d734e19d2363"},c("li",{key:"0e219a76b7dca1ea537374387f8cab2c577b458d"},c("span",{key:"78a36ab09c85749d3ed2ac1b3462d42ba972aab7"},c("ifx-icon",{key:"196e6f3c4bf9c586ff27544894fe6380f9f382c6",class:"check__icon",icon:"check12"})),c("span",{key:"feb107ca0fc75890cffbf33769bdc2a5c9d4ce6e"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"7e86fefca31725b6206a4890bd62727662fa5667"},c("span",{key:"92086c04f93f8de926a618bdc7fd51ac63636c01"},c("ifx-icon",{key:"b97ff87bca4a0604e91108543fc6918461c8db95",class:"check__icon",icon:"check12"})),c("span",{key:"228a7d5b0e0e8f73d912ff1ebe552d6ebabf029f"},"Ensures consistent behavior and compatibility with web standards for a reliable user experience, while intentionally limiting customization options to emphasize a standardized appearance and behavior")))),c("td",{key:"8e722a5246a61dfd1aa8b833c61b87d3320337ab"},c("ul",{key:"f267391b04bd496ae1a0367ea5174ea3f23954e2"},c("li",{key:"bf6e7ae459025080e0e9968b7632d1804811cac3"},c("span",{key:"1e28b1ac02e22beffa2c7cab754c7dff8317e5f4"},c("ifx-icon",{key:"1f8fb0ba51b5b37de9e10130cc9c330bbfeee329",class:"check__icon",icon:"check12"})),c("span",{key:"fe16ad4ab885773057cad7b873a5432359a9c3f9"},"Search filter")),c("li",{key:"1e9805ad9cca9a1ac1a067a4142b629d6489d8d5"},c("span",{key:"f47df0a693c18174d87260f3bccf5df5520000ba"},c("ifx-icon",{key:"46961f50d6fe5b0164f5faa56af34d62457a1365",class:"check__icon",icon:"check12"})),c("span",{key:"84afa508251d685ad5d07b19971bfd6bf83f6b28"},"Header section")),c("li",{key:"fd95002fcc727b048a1444166bd6c87fe5ec91e1"},c("span",{key:"234d8ddc2de1faeecf6212e4b554f9da994b31c1"},c("ifx-icon",{key:"517348a9949106d30649466c84ad2e84c82ef396",class:"check__icon",icon:"check12"})),c("span",{key:"77de0560cb4caf06076bbd1a275f0ba61c78608f"},"Menu Item Divider")),c("li",{key:"8887aaf19754ca3876070cd2e89f0a4c60a95db6"},c("span",{key:"b60f91e7a558c7add2b116b3f87b94ef0f65ea6b"},c("ifx-icon",{key:"ecf259f9a0609dab10da71bfd7edc4fa2296b0af",class:"check__icon",icon:"check12"})),c("span",{key:"c3ad5cfbd22cb9e8beb2bfbb896708fc6add2c05"},"Icon incorporated")),c("li",{key:"e029f047fa05aeef6ad900162980bf7bfac46e86"},c("span",{key:"c33d23f279abb0833e8aaed56af85fb9f7a436fc"},c("ifx-icon",{key:"372ee68258f100ba971104e31b5f3344e28bb289",class:"check__icon",icon:"check12"})),c("span",{key:"45a5c35fae86996cc66190f7576fc419a397ed0c"},"Extended customization and configurations")),c("li",{key:"2baa19e22ea333a004a391ac71e0c23159b6bae8"},c("span",{key:"178cc70ea2f03983179826e4230ebc433a6289da"},c("ifx-icon",{key:"d5d09781f1a29db6a58d33fb83ec46c726cf729b",class:"check__icon",icon:"check12"})),c("span",{key:"65529a922ecc569271dd2ce70b01603f071049eb"},"Separate label trigger")),c("li",{key:"2c439342666bff50d28b0eca4f187c0164036a12"},c("span",{key:"a31b821c1de0f96bced79e3c92ca654f326caaeb"},c("ifx-icon",{key:"4754ce6d70486a81a017e1abb0a50028dfbfea2b",class:"check__icon",icon:"check12"})),c("span",{key:"a459a86d4506c56af0d974a36c4b46bb7778f1c4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c0e81a77056993aef103400eb2c50865d322b013"})),c("tr",{key:"4e3898f14a6bf25f3b59e00b1bf1bd4e5d614f2c"},c("td",{key:"6130263769e2e565f747d957103d75908d4e32d0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"00eda7b436aceab70b038e9e4fe334592a9a7e72",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"58f9cca0e3b7871b34bb04e766b64c3a866a6303"},c("ul",{key:"7eb6ece87cc9ec1876cb19da3ccb6d84b8a5c9f4"},c("li",{key:"eedc4f8eba056c6fba6c9db043a298acb1d8adf3"},c("span",{key:"c417124774c377b9de2c641c351194d6119253d4"},c("ifx-icon",{key:"0abed78eed155491d384600c4903049fbbdd21dc",class:"check__icon",icon:"check12"})),c("span",{key:"a686444ad65897493178f8e2e98765a0cba67471"},"Provides a standardized and customizable way to display essential information, navigation links, and branding at the bottom of web pages or application interfaces")),c("li",{key:"0e8cf9d915148d2b65518a0b24d4504f039be52f"},c("span",{key:"716edc5f6d91ad2622d06c9640da58d586258c46"},c("ifx-icon",{key:"de1c94e4f1e9a08f8ca9a4c40525219751ebe66b",class:"check__icon",icon:"check12"})),c("span",{key:"9d9c8695b17ef3ddbc9d2b1cf6d76759bba7658a"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"98a4335c2233f4d13c3c6d69add6eb5ef4e2281f"},c("span",{key:"ea4be34ded17eec21feed43424deb928fe2809f8"},c("ifx-icon",{key:"9c02fe2311dc7ac27997bddd70c0260d2cfaf152",class:"check__icon",icon:"check12"})),c("span",{key:"3eba5110d76df4f37be9ae57cee72dba300ff1e6"},"Adheres to web standards")))),c("td",{key:"6a7d0b53a7bfb8c7741c0977165ff85b3bbe5511"},c("ul",{key:"72d2d9b8a8b629afb52b30c96bbc291190d22b13"},c("li",{key:"fc72df716f0e9512a49abe4f5e5c577a1dc1bce3"},c("span",{key:"1ef2d18208825ed625b36d5f27270a2b34266eb6"},c("ifx-icon",{key:"aa91458437ef2ca2bac499f51ea84df3ed5b8723",class:"check__icon",icon:"check12"})),c("span",{key:"ff630f5e3324dbade806d5584291ea3e4ecfecb2"},"Small, Medium and Large variants")),c("li",{key:"8c1b6fdb61b5a170025e9da51e8aeb314716197c"},c("span",{key:"46a1835dec635e53f89a60357110245a19159336"},c("ifx-icon",{key:"a8ddfd7eaf25db7fa6df1bcebab493e4b237ebd1",class:"check__icon",icon:"check12"})),c("span",{key:"cfcb6c5210fba5634f83ae03abde91435c5d73b8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c4e1d12ae92797867900fad3cb16fb867537c3a7"},c("ul",{key:"5dfcd05665a4650a579a2720f2e7672664ef6074"},c("li",{key:"1b004dfff1074078ebe825094c42948f8a7e10ba"},c("span",{key:"23c330856431a59fea96bdc9b3ed94347ef85a39"},c("ifx-icon",{key:"8d859898693eb0c3034dfe816bed4be9b0933053",class:"check__icon",icon:"check12"})),c("span",{key:"0939428d7e843f5071c1f85ce3cee12f519b32ec"},"Customizable and removable links"))))),c("tr",{key:"85ec2281700f726cb9a17bbb2e329bb38399cf05"},c("td",{key:"f0594430a25db07d591dfbaf59d081be09d05ce8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1a0041325ec9ca94a83edbb08a5d723332c1ef25",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon-button--development",size:"s",variant:"bold"},"Icon Button")),c("td",{key:"91777b3556066a673d50692d1a2e2e0479f1f302"},c("ul",{key:"432ecdb746eec90b23657f36f33fd38d71e7c401"},c("li",{key:"6e4db1612a42ef42dd4b84898500d02368b66084"},c("span",{key:"30be875b59094c3fba09301a40eeb2fa576c814b"},c("ifx-icon",{key:"24aefd7939ed96d90779d0934d9ea169fecaeea0",class:"check__icon",icon:"check12"})),c("span",{key:"99cb1e9795e13e911252ebc21e3e189f2ee3955b"},"Offers a compact and interactive icon-based button element")),c("li",{key:"6ef1307ced1cfe89d3b0a4259704baa05af11e1a"},c("span",{key:"fbdbba3cd6027b159f30929f6e3071ea92d767f9"},c("ifx-icon",{key:"18011c76252d2f23327244daebd29146dd17af11",class:"check__icon",icon:"check12"})),c("span",{key:"2526c793067c3e8e55ba5b360fa2210484782c48"},"Provides a limited scope of customization")),c("li",{key:"91268f1b16bb97e9e3c9cbda00f81d88ceff6ef6"},c("span",{key:"59c0ae627e549f72d1af7c9c4204d3050a0b9135"},c("ifx-icon",{key:"8482f4d1e9c389829eaaef4d22ec489f7079ca73",class:"check__icon",icon:"check12"})),c("span",{key:"381ad7b709d63fd6fe13d3781b141c4542cb109a"},"Adheres to web standards")))),c("td",{key:"a38528a8508229f5d202f987c5f4ca813b7cd77d"},c("ul",{key:"c536b449c62e44d9719d3ddf0736970b12055cbb"},c("li",{key:"1dc1706f10e4d5d80d805d37e3d2dafe8a148941"},c("span",{key:"6ba8ebf08dcfada9944124d64ac4f7b7e7939b62"},c("ifx-icon",{key:"b265aa936864c13859e24c88ceb2457f505cebee",class:"check__icon",icon:"check12"})),c("span",{key:"f3b59f90ee35e72c608579d94f70595281b8f0c9"},"Additional Round and Square shape variants")),c("li",{key:"a99142d3189be5a0da3d938fd0b0d96e6e785adb"},c("span",{key:"6dde57bb2f38ae18e66c31aefba058592e8accfb"},c("ifx-icon",{key:"6cc9230f603ad6ef2711a8cd114c645544f208d7",class:"check__icon",icon:"check12"})),c("span",{key:"d69fbfa77393c4bfa865cda7f5cb415cc841dd09"},"Small, Medium and Large size")),c("li",{key:"c83906cef9f0f4cae440ed1937c85c4624eaa020"},c("span",{key:"37d193aa5eb472cc4b4468ae21d454bf7cf738bb"},c("ifx-icon",{key:"7457067828f15d48a95e9befee400172c4e43dae",class:"check__icon",icon:"check12"})),c("span",{key:"0fdb75f560ef409624dbe362006fbeca4ec19cb9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9bb5b495675cbaf3e5036687756130ca948223e5"})),c("tr",{key:"dbc047258d9d8ba2fdb520b61f56a2e95a80aec4"},c("td",{key:"2f94caf7be265caac4f0d707e7d02bc09fc99e1d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"faee6ec3c314859247d81ed5c0c9b081fd4a981a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"7b1d6e9c659874ba6d792a92bd739d8417e72434"},c("ul",{key:"dd1d1e58f268cf160ce5e415f9d951aba6485bb6"},c("li",{key:"e845485fba1eb73225b8c4166c9351cb975ca601"},c("span",{key:"2b4f62ad053a759ce4bce092eeee1ec96db8fb14"},c("ifx-icon",{key:"f87b0977eed830c43dd3fd69ea8d40e725215716",class:"check__icon",icon:"check12"})),c("span",{key:"2b77bde5391cba32779b0d2a8ff40d91b5767d83"},"Offers a wide range of iconography options, allowing developers to easily incorporate symbols, glyphs, or visual indicators to enhance the user interface and convey information or actions effectively")))),c("td",{key:"f497ab7a191817b5a2d1d57d1f3e278a8632002f"},c("ul",{key:"1af7b38c3fe2d92abe7bb4132fd6a7291772b7bf"},c("li",{key:"c31897dbb0d73843f5c300214d791bdf29742baa"},c("span",{key:"c198acd25f5f8e7d527643529833510adb36403d"},c("ifx-icon",{key:"029f23ad68f3492903b4fbbe2553ae31e372da2a",class:"check__icon",icon:"check12"})),c("span",{key:"756ea453d0273dd2a04fb13c942e9ff5af08e873"},"React, Vue and Angular wrapper integration")))),c("td",{key:"797a609e21ba6c0493ad5472e1518a97609722bd"})),c("tr",{key:"b78cc00071b3b0a6c86bc40b337119ea2c9a6bd2"},c("td",{key:"91909cb53578ad5ea40af6e650ad68bd31bc603e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f6b389b8249c29abf2d25e70c9b0cdd9fd29657f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"70c825a55223511b2a45838cc443e8c58ac4490b"},c("ul",{key:"3c430fdc5ff01e8a2316ee68196b7e7b1a7d5e9f"},c("li",{key:"bb2b7d24c9608001fcc3feacd5fc554c5e8f7b53"},c("span",{key:"1c87ca16757f91a25450be66c496b27b252a4294"},c("ifx-icon",{key:"a4bb2be8da41c7df5b9f60332846fbbd21f0cc5b",class:"check__icon",icon:"check12"})),c("span",{key:"fef919c76db873fb325ccd7ee59e2aaf3ed972e4"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"de083863d1ef719e4db65becc1c51e5b0576b5ca"},c("span",{key:"24ece0a82f90f2749839887473eef2f8213f1209"},c("ifx-icon",{key:"1a3dea866d371f4804b30594c96c37dbd4a7e9ec",class:"check__icon",icon:"check12"})),c("span",{key:"c0440d2701d9017a5a8db91cb23b3c775bf8b868"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"e8f98cb73131b271251b833408a14dda63cf519a"},c("span",{key:"348ad5c3de5a24c54ebdc8b9a9eb53ebf1ea9a90"},c("ifx-icon",{key:"a3378ea0a041078aec6e4739809555d1128f7396",class:"check__icon",icon:"check12"})),c("span",{key:"313c5dd43db23501bcb0643c1766c657d2622433"},"Adheres to web standards")))),c("td",{key:"0a1ae80fb860a915f2be4596f5912d4837a42ba0"},c("ul",{key:"aa7c341bf6c3f1cfc7c340cff90f0f27d05c1848"},c("li",{key:"ff035e821d5c5f8685f66981caa36fb60ab8175a"},c("span",{key:"4fc1c15a39888f944b8ee5716bfe4cc22eb9caf2"},c("ifx-icon",{key:"601e4775edd501604d82c8b2ea707a0de2106142",class:"check__icon",icon:"check12"})),c("span",{key:"88ddee3293adb1cde3149ea8ef96fea53f391213"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"2b35dd05c2570dc5a7a7d78b1769b663ead44d3d"},c("span",{key:"ee8dff47f14114a57b9a3fa04253b5e17c103632"},c("ifx-icon",{key:"10436c4442628e1014435ca0001354b5f49f36ff",class:"check__icon",icon:"check12"})),c("span",{key:"05d8fb804104e9a90283869220c27e1f3aad75f7"},"Icon incorporated")),c("li",{key:"35d631fbc842e334837478b85bdbd01ded164abd"},c("span",{key:"86911f849bfe13af1b2634a903f16f03d1107a49"},c("ifx-icon",{key:"29c08ee1a32cbc1a9c663caafab2099e0a8d6d94",class:"check__icon",icon:"check12"})),c("span",{key:"186198c34f5915377756df03922d48b679594015"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b2e711aebe06bcdb69e555904b2f9ffee524abb7"},c("ul",{key:"2b2979854f722071c95e9ec1c8e362064712df12"},c("li",{key:"7b67b32edb51d21522d8709038106f4882871cb1"},c("span",{key:"473b4de77179228198727ee444182da1a7a26797"},c("ifx-icon",{key:"ba62b1152f1134a90cf5e1a3525b40440b83ebd1",class:"check__icon",icon:"check12"})),c("span",{key:"95f7f714feb5a1c11ac78d514e45feb0e65f2ea5"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"71359123d33433dba9ca0f88070e84db2cb12ecd"},c("td",{key:"7a8f6a55bda5a8a5a9aed59b997c907ca04cb5dc",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"abfe74d3fb84e10439265a2caa91fd1574fe91a3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"097aec4d3bf20f4d92b5754b12ec7c463d7e415a"},c("ul",{key:"4c600e91a9694d2be9a04779e39de7b1a27330fb"},c("li",{key:"c862833b6da790d93764f9c28807c79d2e857de4"},c("span",{key:"7b7d05e087d711b12d8143ceaf1cb35c2beb2c5b"},c("ifx-icon",{key:"ec80c9a09ed387aa377174a4af246c595f725a53",class:"check__icon",icon:"check12"})),c("span",{key:"7b2ad3688f71a968e4a6d6278869e0f022a90803"},"Provides a customizable modal window, typically used for displaying contextual information, user interactions, or additional content without navigating away from the current context")),c("li",{key:"0c5e11b63101e0cf96b222f47dea8fb97a71c178"},c("span",{key:"53ffd3d463f5aec3bd5ea6ed9764dfc7f269cd05"},c("ifx-icon",{key:"3df7b08d4f3876ef40da24dd0689302b96a51600",class:"check__icon",icon:"check12"})),c("span",{key:"b5ad72c30d86133019a3f31980028f85c35fc94c"},"Adheres to webstandards")))),c("td",{key:"57ba659372749e96f1dd0a7b7eb1e6e836c6c299"},c("ul",{key:"b3b46f5f3bc1fc0d7af6e3c9be93e9b3eb1774e2"},c("li",{key:"619818bb373a833a8d42f896e22b460c44bf9251"},c("span",{key:"7778cf812aa6f4d8da63d4d403a8ffd682abe2a8"},c("ifx-icon",{key:"77f386a466c758057cd73a50efd928a9c875f026",class:"check__icon",icon:"check12"})),c("span",{key:"cfa3c73f02e5a51277cf3033f58813b78fa01cd9"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"351045eb90d7a6a60db730d6e6f45dbd31d15530"},c("span",{key:"d337d4d6b96679865416e91fcaf69c060af3bb68"},c("ifx-icon",{key:"9f26c05bfbce979b58325a07dcad2b4d8feff63a",class:"check__icon",icon:"check12"})),c("span",{key:"57f677e071ef93a7a372d14e17999ac288830853"},"Extended customization")),c("li",{key:"5f521fa3fe2cb2707c5050c355db5a8e59aacb32"},c("span",{key:"a975482f7a983bf51c63b8f2d9499adf3dc4d90e"},c("ifx-icon",{key:"2648c017962405bbaa65892f0177b9b79cc0951b",class:"check__icon",icon:"check12"})),c("span",{key:"8a2404ebd1b494a1b1cd63f38894cc93ec0b44b2"},"React, Vue and Angular wrapper integration")))),c("td",{key:"97ae037ee463995d75907548b61acfb0b324b0af"},c("ul",{key:"14f1c49a9f82b68e7e15f410d2811f69a228d696"},c("li",{key:"cf1dbdf94fa0010c2367fc96d0eeea6db946a8c7"},c("span",{key:"75aeaedb2aa690b6fbde78ed62759eb9bd4fd858"},c("ifx-icon",{key:"135537ef3fc57eca8634e42dd9857e5b56f3e9ba",class:"check__icon",icon:"check12"})),c("span",{key:"4af3f758a7fbccc47ad596bfe88eaeea01d09d7c"},"Removable close button"))))),c("tr",{key:"c61b5451a023d194687cb6f84eae96daa9539779"},c("td",{key:"e483e44d7b71669dbc82646b589563e973392938",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5fa023031004c7a9941a56a4efb3bcd5ff1b2466",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-navbar--development",size:"s",variant:"bold"},"Navbar")),c("td",{key:"40010f854c15594349aa8390eea85bb30b3c83d8"},c("ul",{key:"99d6a8afd4f671b6c38f6d07e8fbead33c3b2ccc"},c("li",{key:"ff180945cf1f62ea44ba2a46e17388476e83a950"},c("span",{key:"7db08e6bbda92a94de2597ff1f23c50c9e16441e"},c("ifx-icon",{key:"7fd0ff6171db2b40557a87763dcb051b52504ab9",class:"check__icon",icon:"check12"})),c("span",{key:"e2defa625cff26131ba8caadd2f10aabd08a327a"},"Provides a standardized and customizable navigation bar for organizing and presenting essential links, menus, branding, and interactive elements within a web application")),c("li",{key:"56316b72e087bb984fd334d3503af3a5aef1378b"},c("span",{key:"3ffa031978ebf1c83892b65b5f8dd7d5671e3f15"},c("ifx-icon",{key:"38e4831131aaf0d76188854afad60b120478efdd",class:"check__icon",icon:"check12"})),c("span",{key:"f3d360854eb2d3c1aa5a95429387752c6835fe32"},"Adheres to web stadards")))),c("td",{key:"02ea950ee10ae776e45cdb03d4ed111e102409ec"},c("ul",{key:"2af8350c056f45f7e3272b8ae1310f7f7b56c151"},c("li",{key:"e8c639e12daa86b9c5328d342d760bba3eb5b354"},c("span",{key:"1617480d44ae5f913497e7c3a5e5424e47549d88"},c("ifx-icon",{key:"a8b96d3b9e761db92c355f72cec56916db7ad19a",class:"check__icon",icon:"check12"})),c("span",{key:"d44b23ffd06d31266d8ba96c9ee97bb26cb0159f"},"Navbar-profile component")),c("li",{key:"0b55bf992ce960c3c541f6ed6f474b9937b2794e"},c("span",{key:"010652544976dc176814236bcadfd4e3ac00b5d6"},c("ifx-icon",{key:"28ded51ae50d03cc30b63bb5fc34dbd9e94078d3",class:"check__icon",icon:"check12"})),c("span",{key:"155a1cf0f4c8e72a3eeaf4356fdacce17ef511e3"},"Mobile Responsiveness")),c("li",{key:"31e9678a2ef1edc489918eccfc6cfa806777cd4a"},c("span",{key:"df2dd62408ae89e27442b80bd9a7573454caade9"},c("ifx-icon",{key:"ee10e3c6bd2910b1a89925df6ad9d9191a756c1a",class:"check__icon",icon:"check12"})),c("span",{key:"1a64d2e8af802740fe31ddff5cea1c45d7da7a3f"},"Mobile Sidebar")),c("li",{key:"89c472c8212dfa799b90946b07e96278a0996422"},c("span",{key:"234ea1694605fd892f22c3b7d667b711238b7d92"},c("ifx-icon",{key:"743b1034aa7016c95878532c7374b4c251235916",class:"check__icon",icon:"check12"})),c("span",{key:"12abfaf15c529d1b9bd91a0802eb45a853454a1a"},"Extended customization")),c("li",{key:"3ce20212478e6b98005ea9ccefd8224ec3ae8585"},c("span",{key:"c882739a378c8835ac41c34c427d30a56fcc3a9d"},c("ifx-icon",{key:"3f028f05a33ddab491e87a1d482f900e2a02920d",class:"check__icon",icon:"check12"})),c("span",{key:"030c0105537e64c4330f27c1eefe58ea8780f9f3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2764630b9f949855d2b3719e58085f4c970f4cd0"})),c("tr",{key:"9da06d1de37e346fe7e380a305888d0eaa358f5c"},c("td",{key:"ed1df53b0f1db708619c213958bb3f113b4d899e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8ebf1abc06922806ac69557f37bd97998a50045a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-number-indicator--development",size:"s",variant:"bold"},"Number Indicator")),c("td",{key:"163dff733348c16755dd6020d2c92d5005f37c82"},c("ul",{key:"8a0b90f1b4335645e9d78a376e2aa00f66b3c9a3"},c("li",{key:"6f605da987d0f473cd5da33ddec73dc3557087a7"},c("span",{key:"7fe927caef94614b14a6cf3f3a3e041731391c49"},c("ifx-icon",{key:"2e058f24ac22977c2a37485cebf942cfbd7c80b5",class:"check__icon",icon:"check12"})),c("span",{key:"42d68160f87bfb35aca278c67580c9d3f2bb5197"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"1e29e43b361275ebd215dc413ef82e91a714c7b2"},c("span",{key:"7fd167556829c87bfce7494d686cb743610e2e62"},c("ifx-icon",{key:"960f12e2390993302d51bb27aa9afa5ec4859304",class:"check__icon",icon:"check12"})),c("span",{key:"0cfe8f15bea202897e8872a2f3e08489a69ee4d4"},"Adheres to web standards")))),c("td",{key:"b0b0c7011a8f0a47197b28d017b52adcf156095a"},c("ul",{key:"5ee0d980f26be4f1350164341222021ac8a230fe"},c("li",{key:"75f428693c8dd6ac739b16ee1aabc15aeac80d54"},c("span",{key:"49cf4103118dcfee848a8a930cdf3f765e319f9f"},c("ifx-icon",{key:"ebcff0c1c19118678bf97240938b2bf220f9702b",class:"check__icon",icon:"check12"})),c("span",{key:"2e883227f02bc87922ba4315466e4e514639525c"},"Inverted option")),c("li",{key:"ec2f621af2fb7112a3be5ec8949f89e2c2b225f9"},c("span",{key:"21474ece682c12fa851979f5097d07c4fb3a449c"},c("ifx-icon",{key:"ecb982e804f6a85bb14aa3eab38da50b02bdc412",class:"check__icon",icon:"check12"})),c("span",{key:"957b8727276a4040882ca6dc3de5896935e88443"},"React, Vue and Angular wrapper integration")))),c("td",{key:"337483ba0e2bab1fa46178fa42c096b500149dbd"})),c("tr",{key:"4bad01b5d00a643584338d31efa63103752e9f1c"},c("td",{key:"6fdfbb8b1a6a434119d450c9bf84fb9ffba295da",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"00d215e2404cccd2b65caa67cbd8aaa3f918da27",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"283d3946e8919529aa4cefa910d0f49d5f5f3f5d"},c("ul",{key:"d0df30c81dc817db85e91831839e8475d80519cd"},c("li",{key:"6d825881351865f68db8c12f20a4aca9bb23382c"},c("span",{key:"30116030d9cd725605a871639c6b1e4462a32639"},c("ifx-icon",{key:"d8f4208a0071beb1f41c68c95414f71636e3d2ff",class:"check__icon",icon:"check12"})),c("span",{key:"681a4ec51e6891c0e3864ecf64e6afe16d5f6583"},"Offers a configurable set of controls for navigating through sequential pages of content, typically used for displaying large datasets or segmented information")),c("li",{key:"868dae935ba014b15a3e414ee27a7856cd3d8779"},c("span",{key:"815f66cf5cc1c8b54df184b7da463fb6b8b096e8"},c("ifx-icon",{key:"ca5453796cba5768f54a6e98c2cae6ba8af52bc6",class:"check__icon",icon:"check12"})),c("span",{key:"3bab88979dd97632370628843ad42e3ab960fdae"},"Adheres to web standards")))),c("td",{key:"9edb4571e11ae8b3a266d56cb7d54918a1cc0519"},c("ul",{key:"7224ae69a38208cea2c7656350bb1ad7986985d7"},c("li",{key:"9f2265f0dd41b6352e91f625a9405fdaae5dc956"},c("span",{key:"1d37a5054bba4036837d649a335ca231617458bc"},c("ifx-icon",{key:"c5dbfdd23fee5f119ed2e8d6888662fae1019621",class:"check__icon",icon:"check12"})),c("span",{key:"a640ae96b4af4103789ac780c3d37c75ce9814d9"},"Extended customization")),c("li",{key:"8a20bb20a79b2430f8882c687614b2e2b342dace"},c("span",{key:"de3d46cab54b8911598fac5fd51f181100c266cf"},c("ifx-icon",{key:"bf4b0d5996b535f14b13ccaafa208c129d9f045c",class:"check__icon",icon:"check12"})),c("span",{key:"a105b7a8b893eafa9a82d378663c6c1d9eea4c30"},"Configurable Results Per Page option")),c("li",{key:"5023e8a2f0a3dae400396c39d81ff31858e1d3f9"},c("span",{key:"74a9cb3e4cc3df5416088ab9c2d3c683b7a75d6e"},c("ifx-icon",{key:"9ec3f679233de6e379786fe6971ebf646d1a192f",class:"check__icon",icon:"check12"})),c("span",{key:"81a4efe0b1ce8bf48585993391ae4104c87f1362"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3d9591db1d8769b276474efd61d5d62a5cb91f4e"})),c("tr",{key:"f4e73f12c3326c0e71b203693bbf4005a0a74ab4"},c("td",{key:"6cedf075ba2428d7e71f05ae991b98ec18177aa5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cf5bddf8f8f4fc8ba2daee272a85332a6df4e97d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-progress-bar--development",size:"s",variant:"bold"},"Progress Bar")),c("td",{key:"a85deb2684b96ebd9a604f53810c28132e9c53d1"},c("ul",{key:"029f87f361c0a04775b7758daf8631177cfe925b"},c("li",{key:"86fc33c0c3b651784bad4c95f4e27578224f1483"},c("span",{key:"8b5ab3cbcd8e6d9642a5cddca4726ef1d69e1d4b"},c("ifx-icon",{key:"f1edef7a7af4c48981814243b9d1c85aa9cc7b9f",class:"check__icon",icon:"check12"})),c("span",{key:"1a1926b306ead3da63882fc76917a34f753ab0c3"},"Offers a customizable and dynamic bar that visually represents the advancement of a process, typically used to convey loading status, or task completion")),c("li",{key:"1287a3e286de67b242958271905a1f8ce58eb1c3"},c("span",{key:"c05a9de8053ef63d13f91e45018ddf9c1e88bd0d"},c("ifx-icon",{key:"cdb5aac71a510393e0f4463582536984c7c2a09b",class:"check__icon",icon:"check12"})),c("span",{key:"d4704d019e255923b0cbc7fab6dbf60c88fa6d80"},"Adheres to web standards")))),c("td",{key:"71019dd738f607a9ce80bc04046393b3bec63bb1"},c("ul",{key:"ecc5b4f0ce318caa5c8e2c1fd2903488c0b1f42a"},c("li",{key:"39ee4ff8ad5e0c75aeb42725e105f0410a920c84"},c("span",{key:"d603f5f0e4f1553d4d09d977aa6065a7a6e0723d"},c("ifx-icon",{key:"89bc0bbc9c93fbc0fabca2de9129a6f6b8602eb3",class:"check__icon",icon:"check12"})),c("span",{key:"5c0e266e821a1838d12bfd6b7b6e5970fcfbb579"},"Extended customization")),c("li",{key:"c56aac11f3dd220baba64248e8b9cfe2dedef364"},c("span",{key:"0816e3d08185192e182055ab6e443f31c781083e"},c("ifx-icon",{key:"8626c66fe89c83ee7707e54d61e60ed1a8bf7969",class:"check__icon",icon:"check12"})),c("span",{key:"956494417effa796c32ab2beddf7e94612c4d7b8"},"Show percentage option")),c("li",{key:"251d36e1a01a0293021598a1d49a9be863b98202"},c("span",{key:"e819cb7d533e2fad8c713fbfbfbe7d65ad67a852"},c("ifx-icon",{key:"a4b031e5dc458308835ae3cc30a1a98fd5342771",class:"check__icon",icon:"check12"})),c("span",{key:"9403fc87ab163004beeab87921dd034a61467520"},"Small and With Label variants included")),c("li",{key:"23ae44da27fbb68104570ee7cda0220eeba1e3cb"},c("span",{key:"0c21f3927d0d795d25f5ad306243690517fd8d0c"},c("ifx-icon",{key:"0d9e621dc0d7e8d55e44c4f8b865c7977d06451a",class:"check__icon",icon:"check12"})),c("span",{key:"c22a184b961e8310ffc05e3a4848e47b601b4d06"},"React, Vue and Angular wrapper integration")))),c("td",{key:"92978f6f9f69423312676955e6762f28066e0e19"})),c("tr",{key:"290745e4477b9a27b59142b70769f58048d4d02c"},c("td",{key:"c67266a4cc1f3a698e6e95e151a0fc2dc66b3398",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3576c1544e3b2884de0e9cce7c0c601c0a9ee825",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button--development",size:"s",variant:"bold"},"Radio Button")),c("td",{key:"df66ebbc872881c7b9e318b1bdea5a38602733a0"},c("ul",{key:"68efec686bb9b0d4ae38e0fc23b61d61f1a9431d"},c("li",{key:"229d944270a9155701bca7d906c8b98d2a363d85"},c("span",{key:"d8b095a6a5be8f3a4aa6dee353e45da3a2f375f0"},c("ifx-icon",{key:"52024341b346eb466724866b1645f0214130590c",class:"check__icon",icon:"check12"})),c("span",{key:"fd9925aa803fdef9899d5fd1b6797d8179a0f345"},"Offers a customizable radio input, allowing users to make a single selection from a predefined list of options, typically used for multiple-choice selection or exclusive input")),c("li",{key:"057933e1c71ef3e40b061829dde0ad1aa1ede100"},c("span",{key:"638aca9bb384feca2acba33ccfbc4fa9fc4052d5"},c("ifx-icon",{key:"edf9b376e59d53d211c77607d24c162ab0e0838e",class:"check__icon",icon:"check12"})),c("span",{key:"0a2557a824b5996c231a10c33878b08201e5df50"},"Adheres to web standards")))),c("td",{key:"f8b4d15ed322550423bb7c580dc9883d2d7201f0"},c("ul",{key:"71a04f179ceef06abdecab96ac84ee84259c09a1"},c("li",{key:"cb1870b0dca9578b5cdc5b40da22c8ac7a42c00e"},c("span",{key:"4c43fedcece389b5e4d7b40c4adfff9df3165078"},c("ifx-icon",{key:"71434297b57dde48f7921e2df7574221bcd8be8f",class:"check__icon",icon:"check12"})),c("span",{key:"19c9b31205f5a93de13e66a2b168b5349f81fa6d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"70e39c891950b9cdd46a3bf56284bafbe839baa5"})),c("tr",{key:"c54c72c3171909e3acc88837a70f949d32561ca3"},c("td",{key:"15380e8b3901d98af332270d9bd19796f239d7f0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f6f7db8b442b9be16c314c49208f881d98762fb5",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-bar--development",size:"s",variant:"bold"},"Search Bar")),c("td",{key:"3236bc567739c5a57115b903f980f0e23aa8b2ea"},c("ul",{key:"0bb35217be0d944b96d11c2b1dbfcf6824e4885b"},c("li",{key:"be038cfda78eb76f0e271e7b9888cd40b518d157"},c("span",{key:"c1fc226fd10af7b849d813e19de469f84c08075f"},c("ifx-icon",{key:"6db8e85944062d68cab1cd864503a299d141fcf2",class:"check__icon",icon:"check12"})),c("span",{key:"5c17d1c8611c7d5e691b11ee69296116e3604729"},"Offers a dynamic and customizable input area that allows users to input search terms and trigger search actions, typically used for querying and filtering content within the application")),c("li",{key:"09b82dea0125ff7531d158a690370042a29dd23f"},c("span",{key:"1f1062232ca03755610b1af7fb3e3462fb049429"},c("ifx-icon",{key:"182012e53fed3fc032be4ac65453d74abae7a899",class:"check__icon",icon:"check12"})),c("span",{key:"1873b91d4d36b22260064bf150b5316d44d5843c"},"Adheres to web standards")))),c("td",{key:"2407a121aeb669413c407e2405478579dc55454e"},c("ul",{key:"5006a7a590a4d6c7916f0c3c38623092187d5ca3"},c("li",{key:"4f37967889357e22182a0ef67eb14928291e5ab9"},c("span",{key:"be1c9b397fedd33469383d720daad710c621d158"},c("ifx-icon",{key:"e017b22eebfd05caea0164f39463885109b68016",class:"check__icon",icon:"check12"})),c("span",{key:"4df0ff29d19053dd0cd2d878fd880645b5913842"},"Collapsable option")),c("li",{key:"d9b4da907951302d05b4844ebeef6ec5e59b4e1f"},c("span",{key:"6c9d736ebd40a7cc26a74a6d558e06de7e81a26a"},c("ifx-icon",{key:"2c05c96a0ac9f320e847db13e88f28b05b619044",class:"check__icon",icon:"check12"})),c("span",{key:"7556def2c10c5d2b8b026b6e5c23c59459458524"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e9a171ffc532977263a6caf2dd8d4466e1814788"})),c("tr",{key:"29da4f4adab63bfe67c3e52da9d6e9a83be630ea"},c("td",{key:"8622435ef287bf8973cc6d26ca60925162133128",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"45b10f1aa9c473e257ccc312c78dbf38960e6a56",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-field--development",size:"s",variant:"bold"},"Search Field")),c("td",{key:"9d4482019d6e1f800c422f9be891f0fc6a2d33c5"},c("ul",{key:"69f6baafbda0b7e75fbe7eddea1876c9a582b8a8"},c("li",{key:"3c36d58d8f0135dcdd5b3944705b7293b80ae6d3"},c("span",{key:"f73e0f46ab4ca260c893336d2b556ef4d865a37d"},c("ifx-icon",{key:"d6067b90b7da047a21a64f9955822671b22aaa95",class:"check__icon",icon:"check12"})),c("span",{key:"1945cc7fc02fab8c5ff9100033f524e3f1c9d51f"},"Offers an interactive and adaptable input area that allows users to enter search terms and trigger search actions, facilitating efficient querying and filtering of content within the application")),c("li",{key:"fc9647716a724135729b79f9eda0e46772dc0c3b"},c("span",{key:"44dcf4d5e01ade3057d41095a1f729485eb060bb"},c("ifx-icon",{key:"c613ea6dafa6f83b328fc85c8259d856338aef3a",class:"check__icon",icon:"check12"})),c("span",{key:"0d5e4ff1500d2badd16621a23c0b2eec2c26ad60"},"Adheres to web standards")))),c("td",{key:"042e540dbbaa1ba169dd52193a1c78b099dfc3f0"},c("ul",{key:"48171a46ba58e182d1da83dc326b301dc61afb36"},c("li",{key:"3e4a4a0ac707fb9e607392d06775de1a3439236d"},c("span",{key:"a3d5f354d6d3cf318829fa8c257d77a7fbba2006"},c("ifx-icon",{key:"cd8addc68e6ea1812b358793d047c47e828203cb",class:"check__icon",icon:"check12"})),c("span",{key:"ce6ea7a337ae9793aa6de6bc42633d95ed8849f5"},"Show Delete Icon option")),c("li",{key:"7a79487eb9500f4564823706734789696860c4dd"},c("span",{key:"b0e57f9c8b6c80d608c090126aa3ee1354c294bb"},c("ifx-icon",{key:"f474160574e12ae60e0f060b9f5133b18f3c11b2",class:"check__icon",icon:"check12"})),c("span",{key:"d46ef5f23eaa418dc47d9744232b9a116d3064f6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"237d965ad8ef4bf362bd903cc31f180d5d9cd56c"})),c("tr",{key:"ea9725031c390ada873c26f6aef1a243b3d7c4b6"},c("td",{key:"53775c7c2996ef20df2df48e9dc4ea64b0cafeb1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c1ec8a3853fb332c5b55d092fd3492e38c08a55c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-single-select--development",size:"s",variant:"bold"},"Single Select")),c("td",{key:"01460ac8902b030b47e6a1343a067390b93a29c0"},c("ul",{key:"e7bf81e0a25012366c6208d1bdd44e642cf8b973"},c("li",{key:"2fd76264702cbd89de2c6dafdaabf8f7fd2fe4f7"},c("span",{key:"505c4c755ab80e57b5aa77c4bd6c9a3ee71794f0"},c("ifx-icon",{key:"446e216915f38a4848de4327825b81043227ca5a",class:"check__icon",icon:"check12"})),c("span",{key:"7f23cdca278d9be97f4a9e79c36fcad29c3d77c3"},"Provides a user-friendly and interactive dropdown list for selecting a single option from a set of choices within a web application")))),c("td",{key:"4777a657b06685ef0227ee61e3149142bad9fcbb"},c("ul",{key:"4ac7f4a52192dc631a3aa6900d5523e20d0fd169"},c("li",{key:"6c0068b5ce3faaaf8eb1873fada1261722fc642e"},c("span",{key:"98bc276679b600c704339bc4695521c31df1df29"},c("ifx-icon",{key:"ffd5465571d680a25b21269b0d893ba0603797e4",class:"check__icon",icon:"check12"})),c("span",{key:"1e905960bf658ba24684fcd82de757a7bd49a1fa"},"Extended customization")),c("li",{key:"05291095340404364544bacdcc1c340935ca0779"},c("span",{key:"5c7a7837e7edc280ba53d6f07da393bd201d010f"},c("ifx-icon",{key:"c72727a204da081e645cf8b6eefc5a64fa10bf28",class:"check__icon",icon:"check12"})),c("span",{key:"a5cd5d4223e43f8a5dc2ddafc0ecc6d002ab7028"},"Option to enable and disable the search")),c("li",{key:"12c17dd027688684e39ab158a5eb5ba2b67716a1"},c("span",{key:"0b522d27c083026c5698602bf814eeae4b8ab358"},c("ifx-icon",{key:"4a2992bf1ca236a7a030f0214b32ea44445efc03",class:"check__icon",icon:"check12"})),c("span",{key:"391a5bfdf5704de068cd73977bbce3da00ce4607"},"React, Vue and Angular wrapper integration")))),c("td",{key:"50808780e4981f2fc32ce5df8f871e2fc3cafceb"})),c("tr",{key:"26667fe246c0e48d22e88489f7c0775b2ac0fe76"},c("td",{key:"954e0d8cc93ef8b59e495568d4d1556b7b92f64d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1858d4f44ffe014948020f65578d553ae45c0b0d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-multi-select--development",size:"s",variant:"bold"},"Multi Select")),c("td",{key:"91be180884788beb3dc70fbafba912fe161a9d57"},c("ul",{key:"7fb1a7019c594c77667130b4861c1945ea8eece6"},c("li",{key:"d4aaa941a623cc5e51a75678f7775f9e16e31627"},c("span",{key:"3dde1428affc56147d4fc1cae43e82e1359881b3"},c("ifx-icon",{key:"e91452861be619acffff7cd3f58331e4395e51a9",class:"check__icon",icon:"check12"})),c("span",{key:"7f397d530220d4259e50820115f9869e8d8d3a1a"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"101419eb24926e2dadf294ded0c503763ca0332d"},c("span",{key:"4f5421ab2f2f7f2f724fadda536112e20b9f7893"},c("ifx-icon",{key:"d088fe92f00966149a7a81d40575eceee8d7518b",class:"check__icon",icon:"check12"})),c("span",{key:"8855127fcfff4a17bd8fd1eeaf50997be2e6bd35"},"Adheres to web standards")))),c("td",{key:"53f192ab9dcf8d0d350ef4a3442851b0a2f2c612"},c("ul",{key:"1e6091d620a74676d020d782933fed1ac5041f16"},c("li",{key:"bfa518cd3b6af13842a5f7a1f9f063ebea701527"},c("span",{key:"79fef02f0d150521385171f75f09f979bf906013"},c("ifx-icon",{key:"6341dc684c3403223415e53712bf04d76071a3f3",class:"check__icon",icon:"check12"})),c("span",{key:"7931c34734f391663b4819efb8cfb6da8e96d837"},"Extended customization")),c("li",{key:"a4d5e9ee05234dfd28ff21d9fcb23bac03138201"},c("span",{key:"7f3173dc53ce934832ed83c02e373f2cf669c207"},c("ifx-icon",{key:"a1de129f23f992db8664b4335fdd4ab604b66fba",class:"check__icon",icon:"check12"})),c("span",{key:"d5e29196bad81b1a04aaaef280f8a4aadd1c4931"},"Nestable options")),c("li",{key:"4f20f5034f4dec5f0848184040c23392f176b3c3"},c("span",{key:"a17bc48513258685af0cc57116dbe4a98dcaec12"},c("ifx-icon",{key:"c7798eb42eaf8a0797da3b2b2cc6f7dd62b1404c",class:"check__icon",icon:"check12"})),c("span",{key:"59320d453a6135af3aae093469d4182a0b48b8e5"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e0c13143a3a460676f1c3b7093a5692a126b25a7"},c("ul",{key:"2d542403ee0c9a7068c5f1e3e6795728c71e2597"},c("li",{key:"df28d217cd8cb0b689926fd96a84b47ee0ef1d21"},c("span",{key:"2384e48ce82aab5b6d25d6b9cd2b94d9d51b6ef7"},c("ifx-icon",{key:"9ab65905881229c753448ecd5013fd7129166d91",class:"check__icon",icon:"check12"})),c("span",{key:"3b7c340bf519e7492d8ea74c6fdc947ccf5ce3ff"},"Option to enable and disable the search"))))),c("tr",{key:"6637dbc5dfc6df535e823c8ca3d1d4688def4579"},c("td",{key:"891860aec6c8505a50da78dc8ffb91039d9193c9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bba05e96234c73f0618d30a30eb3502719984885",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-sidebar--development",size:"s",variant:"bold"},"Sidebar")),c("td",{key:"9903d5d5d75099e43e4e5005014d53636da3f41a"},c("ul",{key:"2c8bfb862fa158573d81d530f205a3a98b2fb4cf"},c("li",{key:"4189732de9821fca6ec8f4626ee1c99adba10707"},c("span",{key:"dc71d478be216d265295d35457055413f8eafe72"},c("ifx-icon",{key:"280187b098c448d58f009dc97209f361ebbfac11",class:"check__icon",icon:"check12"})),c("span",{key:"7a37a93203ad7f3faf4c354278eaf5f8f9b9a850"},"Offers a configurable and collapsible panel that typically occupies the side of the screen, allowing users to access additional sections, or menus while maintaining the main content area")),c("li",{key:"91d471d0256b95ca2cbae1ce5dcb6073c45a7b0c"},c("span",{key:"e71394cd4c18d7014dd28ec9a90f794997515b8c"},c("ifx-icon",{key:"dec87fb428c2b8b5e5f30bdf30a20d21c5362639",class:"check__icon",icon:"check12"})),c("span",{key:"79ea90afc0e745cfad64c62921c9193108ea0f6a"},"Adheres to web standards")))),c("td",{key:"4eb49d1bea3078fd097784b283dae725e068f11c"},c("ul",{key:"c214b00bf5cf06acf26a911d1f5775e62dbe4a14"},c("li",{key:"30d920f9c2af0c3cf5c75f65cde1533b204daeaa"},c("span",{key:"02f7a2801899f1d0aa27ab3925d7bd28678d0933"},c("ifx-icon",{key:"83349cad38ef0e13ee5da5824007bf5a35078640",class:"check__icon",icon:"check12"})),c("span",{key:"339fa2afbb52bf22e614f8311eed5d4f9c1d6b0f"},"Extended customization")),c("li",{key:"97e60e05c1fc6943d5a7b1b62400011f93ed836e"},c("span",{key:"0ccdf9421b7e7dc5bf1d48f2a4f436c3814a3ff0"},c("ifx-icon",{key:"1805500cf2fd1c7437abc382c2acdb542388aca0",class:"check__icon",icon:"check12"})),c("span",{key:"3b25936772a4690af18999a72acb680493777098"},"Multi-layer nestable items and menu")),c("li",{key:"805398def542f51f61d82c55b04427f46fe3861d"},c("span",{key:"84b110879991da490ffb39304ec6ba5776d0c4a1"},c("ifx-icon",{key:"bb0009e4ee9bbd07d32939d47eccab70ead99cc0",class:"check__icon",icon:"check12"})),c("span",{key:"6c65e2c5412468009374a3aff5f68b8ad1ec9bb1"},"Initial collapse option")),c("li",{key:"afb1b22931626e3faafa9a8774c23a3db5730bc1"},c("span",{key:"e2fe0943ffc089a168df93d26222eec83c89fd68"},c("ifx-icon",{key:"9f34225feb0e43969ee111f54a9d510f17612f10",class:"check__icon",icon:"check12"})),c("span",{key:"bed0634af0c7289682eac298d7ecc21020440916"},"Active and action item feature")),c("li",{key:"6a7d14975ed4aba9aee77b5d21811460f80e8e81"},c("span",{key:"4e8f8d36aa6e8edcdb6b823fe89b57b72e9965f4"},c("ifx-icon",{key:"9dec553c1aa61823cf6bb6d7d03f444a0d90306c",class:"check__icon",icon:"check12"})),c("span",{key:"7625a2a0c3a2e95eb8bfcdaa4be4c242690b77e9"},"Number indicator integration")),c("li",{key:"8ff1bb71c704e69fafbc10b8a3aed47ed6d764e0"},c("span",{key:"0ed5042e2321ad861229c340e3a5f0587536a241"},c("ifx-icon",{key:"876b7508f1b9df6ead0a346af45b29a813e7e721",class:"check__icon",icon:"check12"})),c("span",{key:"7bd54348c7c26c8100b06c999182d1996655ec72"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a9f0a2e1ab88c5e11f50a5e60e4ebee3272a1bbf"},c("ul",{key:"6eecdae935f7ccc7917ff95646c7dce307a13e07"},c("li",{key:"80e6f2d14b39e89943f1b074f7afc3294af14c66"},c("span",{key:"7594b18da48c3d08948b1ab1e796c7d919fdfd29"},c("ifx-icon",{key:"09c0afa6f794359296afc6607bd00de7a2c8df5d",class:"check__icon",icon:"check12"})),c("span",{key:"ea1a1e3bf548ce17cf263a72d3a25871fbca4dd8"},"Removable Footer, Header and Logo")),c("li",{key:"4e841fd39ab048e7e97fa7adfd7149f3d4c631dd"},c("span",{key:"037f9fa24514ee1abc5758c779e7d3a6b44c715c"},c("ifx-icon",{key:"f209a7378c7bdf022f41fa3fbca3d62ec6c32240",class:"check__icon",icon:"check12"})),c("span",{key:"1d6660c4c13ffccdc7e7c59bef2500ea540efa95"},"Removable and customizable Links"))))),c("tr",{key:"a95c497d79457422e198316dba988790b0e7f599"},c("td",{key:"2674b4ab7e563b998d6b943f640cbfa41b637ae0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0dadcb02b98b7ca7a966e24e54e5e8b4aea5b9d9",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"fc09c6db65c72af3bf6503155ee1dff5271dd4a9"},c("ul",{key:"7b77f097471d449c006c0972208511b7de4eb462"},c("li",{key:"ce11dfc687cb10eb9a3f88588ea5c1b83d67e3f2"},c("span",{key:"02e53316f008ca6a1f3d9c90e4e62bc91751a746"},c("ifx-icon",{key:"ec022bade4fe01c777e1556838c5a97c4a1bdc04",class:"check__icon",icon:"check12"})),c("span",{key:"065fec31970c114f3d70938992e7b242ad257dde"},"Provides an interactive and customizable input control for selecting a value within a defined range, often used for settings such as volume control, data selection, or numerical input")),c("li",{key:"c706e0ea70f2e6955dbd059b63e0903d07d402db"},c("span",{key:"e9186d5a498ba4b529b9c9e88d0700934e1d5a3a"},c("ifx-icon",{key:"463e4d1b66e92b4e6654786a9b0a9c40c6fb2e9c",class:"check__icon",icon:"check12"})),c("span",{key:"d712402c16efd1f2d71e05225723dd62839c824f"},"Adheres to web standards")))),c("td",{key:"cc672142834f7179fa7ff439186febdfed0f13ac"},c("ul",{key:"30c0f7daab3d54f847bc4c988eb45ca4f79ee7e4"},c("li",{key:"e205fb7f0ce3c9a71e11de0686d4729d01689ce8"},c("span",{key:"8eaeb35856c6722ee4f4a08a949e1f82948ab90a"},c("ifx-icon",{key:"b12b29b8b9d9749a38b832791773b09dd4fd486e",class:"check__icon",icon:"check12"})),c("span",{key:"3bfdd78c945693ab8213231df4c113e1c0ca51bf"},"Icon incorporated")),c("li",{key:"d98e94ac08b275f35ece601895b175a0f68d6b49"},c("span",{key:"17ffc9291dcdd8fdeed1cd37b84f4aec7dd570ac"},c("ifx-icon",{key:"227c88cd5bd3fd23f100a384065ffd6b344b93d9",class:"check__icon",icon:"check12"})),c("span",{key:"322fd25d56cf3faa425abe42c0cf0f225e8cc3bd"},"Percentage variant")),c("li",{key:"0aa381127414b9c16c6aaa7a33b219be2a208c37"},c("span",{key:"8676725ecace99792e4df80d1fc91911685e6f5f"},c("ifx-icon",{key:"9b651395232652b3179d4ef68fa7421c200fcf1b",class:"check__icon",icon:"check12"})),c("span",{key:"bd17409b934afe8e5fabb9ed27c407bf89561e85"},"Text variant")),c("li",{key:"ebdcf8af09f3e860a76acdfebaba34b59bf6d123"},c("span",{key:"5e20b6ca77dd0b4563ed58d6574751b664002a52"},c("ifx-icon",{key:"6e4cee86f5e140c229d8a39972957ec2f5cbceb2",class:"check__icon",icon:"check12"})),c("span",{key:"1611ece248927b5b791f75b4b5b08723e8cddefe"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e7518af9e2121e2d6697ec45ba1b3359c02d5c69"})),c("tr",{key:"051f4397db5707d1510d85e6776d1f6cc580e8ca"},c("td",{key:"d7ad9535d6d88c5844b2753625c21c1b42fdb977",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1c7e748b0bee8b3293ac63067356b1a4e44451a3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"6d0f2edaf6bcf8658a9e58ec9682a622b9d38c94"},c("ul",{key:"c0529af67a85c190a266ed8bf410fc86cbd41cdc"},c("li",{key:"6642aaa64d57f545989969ea25dfe532b4de6800"},c("span",{key:"ca3a074fcf2f55b896ec67519eb30b9e7b75a6b6"},c("ifx-icon",{key:"457e48b846b2d18690cda5cfffcf92f308ffdcb4",class:"check__icon",icon:"check12"})),c("span",{key:"ddc7c580e3aacf86bfe3d3fb749aa49543b9dc19"},"Offers a customizable and animated symbol that conveys to users that a task is in progress, typically used to signify loading content, data retrieval, or pending operations")),c("li",{key:"889d0cbaf013e69c692d3e5ae04f8f786ba945c4"},c("span",{key:"986f7ae5db6b896ae5e79a85d2ee5472bc4c2c6e"},c("ifx-icon",{key:"9b52f460910a0427e3a3b9bed9f7aac1fa29fce0",class:"check__icon",icon:"check12"})),c("span",{key:"980a2e70ccb9eb60d4aec38b121804edd837c1e4"},"Adheres to web standards")))),c("td",{key:"c2bc116db533c8217b43575004391bb18d408bbb"},c("ul",{key:"e9c47dc8e1484ff643d0b5cec82fcc96797d88c4"},c("li",{key:"fb04bb64e9fa707a7cce888d3876fbb45c886cc4"},c("span",{key:"d97763062b41ded1528f92da940294fa7fd961cb"},c("ifx-icon",{key:"85c4b7125ddff7e6cbcd4e0a8024650173027a52",class:"check__icon",icon:"check12"})),c("span",{key:"c09a73b9e68136d6d5dae3a02d5103b3e5e4e758"},"Brand variant")),c("li",{key:"98fbf267f39b88eecd2efb0e46d59d58290770e5"},c("span",{key:"7b79920c947fa64557055afbac3b8c1eafdf47b5"},c("ifx-icon",{key:"c2aa6549d4f90c6e4200dfdd92482681fb3429d1",class:"check__icon",icon:"check12"})),c("span",{key:"bde5e079eadcf641f94835dbde90ea55c96d333c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b2dc0408189265f638525a3755bfb23710bd5939"})),c("tr",{key:"d9ea33ef702e0c29746744d2d35aed35e2207465"},c("td",{key:"540a6734daa313cae2515eb66243865664b1ae8d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ac99f2f647366a5197ad68cc1c1e93da060c718d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"811fd812921feab92d2896218c9c8d13cbd49d81"},c("ul",{key:"208a2b1e01baad5bec3e0e932f5ced70e19c8d40"},c("li",{key:"62a79003c4aa49d19b44518a9d0d07ff96498ab7"},c("span",{key:"ce2b22e48168c760e96d569c7aba9bd04a431791"},c("ifx-icon",{key:"3483900ea25cdbe3ca899fcc606bab69f2641312",class:"check__icon",icon:"check12"})),c("span",{key:"475b18c663c3798b18e8d7d3270bfca3f8648790"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"077470252d972bba28c7aed324fce207a79d1c12"},c("ul",{key:"69333e14e3ce2920df98f28b8b904c2bffba4ff3"},c("li",{key:"511960322852434bc3c3178797610f0db89bac0b"},c("span",{key:"1d973bda503689c51944cd4610e8750ec3a1f539"},c("ifx-icon",{key:"2f84104dce3bdc8392cd12b881a003793affb8f0",class:"check__icon",icon:"check12"})),c("span",{key:"a409d7b1a8473709a9b2adba6fff3fc7ce41e222"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"bf9c5c6906afec756cc81a893884a2983e3cbbf7"},c("span",{key:"9d4f95a25380fe931120bbb2cf4dd8868be1c392"},c("ifx-icon",{key:"ba24714c912bca083543df19627ed1843210bbd6",class:"check__icon",icon:"check12"})),c("span",{key:"bf52c94caa8d71cad73263e1238be6a2fe896f06"},"Removable border")),c("li",{key:"c9955ea05294b1fbc0208769062bad82602e69b3"},c("span",{key:"d547b55a1a5993a29d77bf659c46223981c9d577"},c("ifx-icon",{key:"7457e30ba1c45604e4f0e477e348fed75f861cac",class:"check__icon",icon:"check12"})),c("span",{key:"b5458afeb58792baac18770ac743ff17f12ecec9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d46fc45255b640b3f3b6d0b5ec854a8aa752296f"})),c("tr",{key:"6e1644c8905beb13fbf1b360c0005143c293f763"},c("td",{key:"9a66457cb692aa440f03c96af7fc40f39ee7668a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"52b1953fd27ea766467c0c5f779eb1cc0b3bbd82",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"3caaa3b6f853ae599d659b63bfc13987cb301d14"},c("ul",{key:"3f67f48f119948eada8e13df1abc1d9b64caabf4"},c("li",{key:"7ac4a4b1344f0654bc09e11765abac06947e4c4f"},c("span",{key:"73fd83c52b5668b4891e2bd84271612eaea6b648"},c("ifx-icon",{key:"d05261d72827cc9bee310a17c0619f8ff694c84d",class:"check__icon",icon:"check12"})),c("span",{key:"cb8cc18ad7f7ec33d99c7a0904b56b93682bdd74"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"dd584509e2c4d7650d2d09ebe2c98d9d2b50a7f0"},c("span",{key:"ad8237ca441bc3941e872dcde9007db4e3ff93a7"},c("ifx-icon",{key:"8c98c7fae7f8ceb9ab87faa3f3c7a28897f1a3a5",class:"check__icon",icon:"check12"})),c("span",{key:"317e5e6fba9e33df95dce7fc99917731c63f4e48"},"Default and Compact variants")),c("li",{key:"4a7e9eaefd2967c6e1d5a2184babc8b840d61046"},c("span",{key:"63dd744e0e2fab75404f30abb01b531713e7e145"},c("ifx-icon",{key:"4e89df70ed67423300fda6383b849e8f7d3005b7",class:"check__icon",icon:"check12"})),c("span",{key:"70512af57b577d4657cf1c32e17bd252cc1c32a6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ec20ec78dc2d370d6c47d71796e47c41bb123e43"},c("ul",{key:"0c74185670644ded35d6404858fcb84ea1e36fe8"},c("li",{key:"f7c10af849e033bb5ae8681760aecf93a5fbad8a"},c("span",{key:"25339a9b569f513ceef3f85f25c81e6a575f4e92"},c("ifx-icon",{key:"490470b8b9f57af97cf52dd731b1329d448bb5a3",class:"check__icon",icon:"check12"})),c("span",{key:"473ed774f4791b3f56e994162cd8fe26bd9067be"},"Vertical variant")))),c("td",{key:"f190f7ffbf8dc5f9d40ba22971cd8c4504522080"})),c("tr",{key:"1cc512cce550f91936815f7d202f6d10a3d3b9b4"},c("td",{key:"e455884b8557e515399756718ebd4fd5706ab87e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9ee75b5c201dbc4a1d996c8cb284603f155367c0",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"537601cb78626f0ef7ba29517a56e1400853e909"},c("ul",{key:"8b9ac2f9554e543339115f3013dddd0f97710fd3"},c("li",{key:"1c351baf593ef0600d3d34f34462d710626150b8"},c("span",{key:"24594d90985585da4fd5b334718fc02a5f57a826"},c("ifx-icon",{key:"5e82126ae1195627aac67285166104ccd8c0bb2f",class:"check__icon",icon:"check12"})),c("span",{key:"e0055875dd10efb857abc25bb2b3af78d7e42852"},"Provides an interactive and customizable interface for toggling between two states, typically representing an on/off or active/inactive status within a web application")),c("li",{key:"fc85b2e2a5c16074ba66e9390928352448b6736a"},c("span",{key:"d734f65d012783f44f4534fcc8ea06b1daed4151"},c("ifx-icon",{key:"1fabbe66a741801a4268be77ef4a916a60cf3500",class:"check__icon",icon:"check12"})),c("span",{key:"106a4bd09d8ccff2fb926a000e34a28cd54aeac9"},"Adheres to web standards")))),c("td",{key:"3752f49f29acfabd02d6affddd4cfaeceb69f9a1"},c("ul",{key:"04e3052b92fc25fcb1bcb67ff5a89a969a26771a"},c("li",{key:"a3a4221e9f5d30953fe2e3db36453f7b8a1a9b66"},c("span",{key:"919aea3831894914a58aaf79eb9cbb0252c40c93"},c("ifx-icon",{key:"0fab41530b26aa98fe4262eb16c0329f5d4121b3",class:"check__icon",icon:"check12"})),c("span",{key:"1e0d45284cca2e0a7612adfdb7d8f79a86c634a1"},"Incorporated label feature")),c("li",{key:"a960703e0a59f8b0313d5245cd9c2b9214d714b8"},c("span",{key:"0e021beeddc7ffd89e77d16c272fc0d0e3bb34d1"},c("ifx-icon",{key:"73e432fbeab35a059eb382c51b6b741a0647145d",class:"check__icon",icon:"check12"})),c("span",{key:"ba044265cb932efbcb9e0bc236d3275d9b2aa38b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2ee65199c1f05ccfe6328b00683dbf0222fef1a2"})),c("tr",{key:"7b039553dcd2e23966ca5d7f1bbf733f1ddb76eb"},c("td",{key:"1c93517b5e3903098532b517a90257d2a97f51eb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"043a49666d44a724a902b8eb4398382c17975eaa",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-basic--development",size:"s",variant:"bold"},"Basic Table")),c("td",{key:"50b296a54ec5671fbd276fc35b8cf15a06ca0b6d"},c("ul",{key:"8f06fb368a6e0ec6e90b2692b6cd02f30c3f7343"},c("li",{key:"c51d599a722bac2360f631d34c4250cfa2844412"},c("span",{key:"7cc419e0d9893efee10354639ce007d9709d47c9"},c("ifx-icon",{key:"7d631380ef24f32bb8c791c6da3736b44e913c5c",class:"check__icon",icon:"check12"})),c("span",{key:"4c14a5df5af52489c1a170e9535625279b618970"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"3a277eb8c2c801ecaeba5321e162856649fd37ff"},c("span",{key:"8a06b0d2025547d09ddfb9f9383eaec469bc1fca"},c("ifx-icon",{key:"46bbe776b010956e728fee82786dedc320fb51ff",class:"check__icon",icon:"check12"})),c("span",{key:"2786855e8b506f06bfd35a6b7c9df1cd219f63a3"},"Includes basic features such as column sorting")))),c("td",{key:"1f628db26fc818c688d5906a91248649ab528a3c"},c("ul",{key:"815eef98a1880d8d09c04b6a6e65faa9466c672d"},c("li",{key:"134a1320e7196656b53dcc02b973e586e2ab3863"},c("span",{key:"ba5ed8c55d2549265a7ee69e236ad2347e7ba1c4"},c("ifx-icon",{key:"3030ecc5c1cb97e5cad905ed2767b72ef1a2c92f",class:"check__icon",icon:"check12"})),c("span",{key:"ab4b1d86e3df1a3ce12f0c68937b1491a1929a0a"},"Compact and Default variant")),c("li",{key:"d24bb3e755d46d4b6a23d436ce8db2d7beea364d"},c("span",{key:"c1933c7a96aaa00dc452e891655ae6881f31fe8f"},c("ifx-icon",{key:"0de34e18c6851c4a3607e7431ea2fc0ede394ee1",class:"check__icon",icon:"check12"})),c("span",{key:"0c66a68d0db131215703b7d5fcda823bada74a61"},"React, Vue and Angular wrapper integration")))),c("td",{key:"6e16f9a1b8f86e4e76b311ef759493dd2b616a4a"})),c("tr",{key:"a8fa79133771ee0937fdeeffdb4bf0c8cee19331"},c("td",{key:"a6724de0ff3d5dbe61e7eb78eb2276c0ea48ca3c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2f91a1125318ee2826c1dfe63ed1ea49eddb8e18",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-advanced--development",size:"s",variant:"bold"},"Advanced Table")),c("td",{key:"efa871613239a3909dc4be18ba60fbc6b78a6f34"},c("ul",{key:"5f847403d22bae31b8bbec390895b02d2ee07f0e"},c("li",{key:"12c3f2c52622b7bfa4dce027cb25650c22b48af1"},c("span",{key:"13e9039fe3725500c61d1f7a2af050e348fc5e92"},c("ifx-icon",{key:"8114d9315604dc9ffd8566b1dd53a9e4797623dd",class:"check__icon",icon:"check12"})),c("span",{key:"af27c29139f962008d02f3f6971a5f6f9d0554bd"},"Pagination")),c("li",{key:"5ccc6d03564788bdf10423e0184f0c0dbfe8c832"},c("span",{key:"4870a2dae6341f59afedbfbda8fbe94ee5cbb8e7"},c("ifx-icon",{key:"cf312c3a60d5edcf03038596a94471764024e42e",class:"check__icon",icon:"check12"})),c("span",{key:"1dedd7d46f04bea4aee9f13ea10c68f2544d5304"},"Sidebar filter")),c("li",{key:"bb7fd91f5915425c8d0ac7c768b798fbd24b1f68"},c("span",{key:"8e5dc2eaabc87fd9f9d8d1eab276c4f28b059986"},c("ifx-icon",{key:"b8674edede15a3f212d923b2e7e46886ee9e74ec",class:"check__icon",icon:"check12"})),c("span",{key:"f2b3fca53b6f20ea9f8aff08ff2385bce66cf219"},"Topbar filter")),c("li",{key:"85a80f1329739c361aeda5068e3dfe0d7b59c0f4"},c("span",{key:"53e884d7044791ffead8c7d787d3dde56852dcd9"},c("ifx-icon",{key:"444726f312a736389206a905d1f65b18e65a36ca",class:"check__icon",icon:"check12"})),c("span",{key:"5e91ba567ffd443afdbff3dc08724ed9bac86284"},"Nestable buttons")))),c("td",{key:"4d5a316db37a36f864e50e80e19d4473a4ec3540"}),c("td",{key:"e9f4388d0e0939263c1be5f7627793b6d9dffe99"})),c("tr",{key:"6ce10b2c5c662c1046c3eae3eae9b293ee801b60"},c("td",{key:"099e85cb8910168ce2dc495a7484aa13f6b72f85",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"02efe310387a53e39b13f462e533cce93353897d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"640dd56807bcb5d97ab909558c53388d24295fb5"},c("ul",{key:"7fa23f4e8a947a8f4e39c8c1e8bb8c7ce7816721"},c("li",{key:"21bcbf6170c17bd054d516869cfe4b223006ab6c"},c("span",{key:"6b79955c42112765debb93def97612ce848bb90d"},c("ifx-icon",{key:"b54ba950475cf936ac9a3960fa2752c5e81e7673",class:"check__icon",icon:"check12"})),c("span",{key:"beb29518ef6659473414c684624476ef4f41a4e8"},"Offers a customizable and interactive layout that allows users to switch between different content panels, typically used for organizing related information or functional sections")),c("li",{key:"b906945d947c330aa5253e2dc7f849a0907844fe"},c("span",{key:"20fbbcbad741ae189ffa2a8736615e7b169edb21"},c("ifx-icon",{key:"0a7d436cbebb70ef0df29da652132212a83057bb",class:"check__icon",icon:"check12"})),c("span",{key:"98551cf695e2f1fa5d90db9a5f75771053be5b1f"},"Adheres to web standards")))),c("td",{key:"3070daac52b20cafbe34e27208ae88ad3e385a5b"},c("ul",{key:"97f0cfd07836332656ecd4465b26080935caba4f"},c("li",{key:"96515546503c1cc45130f5135deca44fa4fd3a76"},c("span",{key:"1b89ae160b334bc392263a50e36dc42e4ae811e5"},c("ifx-icon",{key:"e811ffa967d0aead9a52b9048b784f7dc45a7289",class:"check__icon",icon:"check12"})),c("span",{key:"2d3e736bbb82045f6b32bd441b1aaf9ba8d64a6a"},"Horizontal and Vertical orientation")),c("li",{key:"aefc5c282191d97caf777075454ba4788289f05f"},c("span",{key:"185929c8d18c1c4f78c2e112c9b5f4950155aaf4"},c("ifx-icon",{key:"b9ba8781c72f5c06a19f7f8fbdf41e385335417d",class:"check__icon",icon:"check12"})),c("span",{key:"6a051fee8b617af5640ae847b2ff1a3188d44f9e"},"Extended customization")),c("li",{key:"b1c8bed7196f56f03bcfa2d274398943122018c1"},c("span",{key:"e023a4fdf6bd889a18305110013a0e7cd56fce2c"},c("ifx-icon",{key:"531f1b7b97c30859eea5476cb643b4b29d99a804",class:"check__icon",icon:"check12"})),c("span",{key:"49e6acb75c8a1029c70aad7531a0400462a3c950"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d49a2b9fc9a1d44bd990b3946990b4a20bfa9336"})),c("tr",{key:"7da7e58df412766b3128af1372248b292bdb9878"},c("td",{key:"19a3ccb4305e8bb288dc18327cc07ad788ec973a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1db94d61724b790f4e528d51c28f8fb8d1504bcb",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"ca5154aa325a2c848c74b76f2f589fded241209e"},c("ul",{key:"0dd572a0c5a15eba96ab767756170bfd2d7f133c"},c("li",{key:"f16ff94fea358ed5e62bb727c6907fa3b3b958cd"},c("span",{key:"2d40a694b687b668858bb16a89e40dd946ff77b5"},c("ifx-icon",{key:"7064f7c66ab5099533aadcb893e0a6d05f81cbd4",class:"check__icon",icon:"check12"})),c("span",{key:"28dd6ea9125bd19b282a4140d737b8198adcf11f"},"Offers a customizable and stylized marker that allows users to quickly identify and associate specific items or content with descriptive labels or categories")))),c("td",{key:"3c63cec055285151075e8ee39941ae86c87acfe6"},c("ul",{key:"8a6b65062830e5fc417a62f300da853135fa65bc"},c("li",{key:"845be0a7d890bcc2b42f22990df219eaa4bd5b3a"},c("span",{key:"d9c469a6ac620a8c7886aab3df812379cc13dc0c"},c("ifx-icon",{key:"bdf975cd5e05066c7ace6960f99a5cf2b7f8e444",class:"check__icon",icon:"check12"})),c("span",{key:"96fa32b3c76314ab95838f4909397b121c40ec8c"},"Icon incorporated")),c("li",{key:"de54712bdb0fa9015e2fed48e83a8cbb00c3b910"},c("span",{key:"e40bf08951378fedd2345a9f503c5b865003d6c4"},c("ifx-icon",{key:"23a92d01bbe0db223b34d2b97c9e84bc8d005e8b",class:"check__icon",icon:"check12"})),c("span",{key:"ea727fe68ffa79f72ebc63a2ab27241dd0bfae33"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f25bcfca5ffdc4e19919519aa827afb791b3c305"})),c("tr",{key:"82b1e5730638424ce3a3a3ea39895950e17e3022"},c("td",{key:"60aeb5293814e39f188650eeed393362e713815c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"582ddfb76d781c2cbfd644414ba4daa90371bfa9",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-text-field--development",size:"s",variant:"bold"},"Text Field")),c("td",{key:"0b627edd6a4401dcdbe64fe08ed3893c0075056d"},c("ul",{key:"cab6206d986e0cd4835523dd4bd96566707145ea"},c("li",{key:"6d15f567a93c1db1f36eeb353ba0c74d9b94edb4"},c("span",{key:"a4772d13372aaee0759b2bb986729de260444469"},c("ifx-icon",{key:"e7fb35095695b5b93117cf2d2023a3352c2912b4",class:"check__icon",icon:"check12"})),c("span",{key:"8985a895a8d344af37cad045be5d4778c091a8d6"},"Offers a customizable and accessible interface that allows users to input and modify text, facilitating various data entry and form submission tasks")),c("li",{key:"01bd0b2e17817767af44b22ff3ad9242462de683"},c("span",{key:"3c4aa89c1313b8622e54bc46e5696a26370133d3"},c("ifx-icon",{key:"69940e6cc7c6975aacad130f9d7fc5a1df1b7545",class:"check__icon",icon:"check12"})),c("span",{key:"94a8700afb9f8406ea6672b7a216f525c2a4ba15"},"Adheres to web standards")))),c("td",{key:"f9d107d61870e668c0ea7d91f6b5b1a5697a43f7"},c("ul",{key:"d8e0b9df746bc1f63b757fd2ea293b8d6cfb383b"},c("li",{key:"3a440f45fad133cdad0be8e06110847aae93bff9"},c("span",{key:"17a5697ba0d007ae9eeb387994795522c8e32dc6"},c("ifx-icon",{key:"75abb7a44b6ea6ecad251495517f3f3a52ae5093",class:"check__icon",icon:"check12"})),c("span",{key:"b7c7838df4c5c64b435115845efe83a7ca889b7d"},"Extended customization")),c("li",{key:"9e6b6050d5c6e8df4e30731a2e7a05fd533789fa"},c("span",{key:"d64fdd51c98493a749a8ab853e6707f4c4c86be5"},c("ifx-icon",{key:"fbaa444edddb9421b9c067fc2f04d5ab1ba29e54",class:"check__icon",icon:"check12"})),c("span",{key:"d26cbc4278e81fdf62e5fac3a59a7ce1dd05d78f"},"Possibility for icon configuration")),c("li",{key:"71e55d06e89a61f50d53ccbf14c5025243bd0677"},c("span",{key:"d6bf483a1a5f59235acb56292591ed2ee867081c"},c("ifx-icon",{key:"6e56db7991839e6223ded681915de58e23619dc8",class:"check__icon",icon:"check12"})),c("span",{key:"f1223c9987819550465ceb8fcf7ceb9b85ae3d9c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2beaed543aaeb206ce56d02a74b04acf9385a849"},c("ul",{key:"efa9b65b334e7cf5d2ea5dbc5e9b62b4b0bc659d"},c("li",{key:"e26d818f427cb860943237aef04948a7bb3cfeba"},c("span",{key:"9630a3e1b323f0072048ebf625cad748d2407d52"},c("ifx-icon",{key:"8ab001016f58bec85137a9bd11630f995dbc8a27",class:"check__icon",icon:"check12"})),c("span",{key:"7b3f4f895e8eae0e463bafa4bd6037eeed3516fb"},"Form integration"))))),c("tr",{key:"66d3d56a5c44b6e06dc27ae89476c17ba56056a4"},c("td",{key:"60441dba5a1b0ec092637a5f528d3576a92ce9bb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b967275e377176b089e8298b3fdc64e5143aaafc",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"8870d3ce3d21a929911c39336c15ab8d05211834"},c("ul",{key:"b44782e1be23e3bd671ac62fee62a5d4339d763f"},c("li",{key:"c77fe843163d02cee804f4996fcf6fdd4161d19f"},c("span",{key:"2d8003a7c809945e227a4feaa36cbc28214dc046"},c("ifx-icon",{key:"cf1d42e7aba07abfdd665ed4f8918a46838acf79",class:"check__icon",icon:"check12"})),c("span",{key:"7d9c37d3f6e65eaf0eee84aa04edf1ed1af00dfd"},"Provides a simple and informative interface for displaying supplementary text or contextual information when users interact with specific elements within a web application")),c("li",{key:"717a42a3bc8ae503a76d4db467dea50216314f76"},c("span",{key:"4d777ea383135648e9173d151772fd51b033adff"},c("ifx-icon",{key:"b89ed10847c878074652bf1cbf08837ad5b7c06d",class:"check__icon",icon:"check12"})),c("span",{key:"3a3d7ea2e66e99ea6fafddbe18e7afd70a6da11b"},"Adheres to web standards")))),c("td",{key:"fb42821c7d4169868fb073893ab298481097eacd"},c("ul",{key:"fdeeecbea4ea363a93d984d9f1954746e0975fa7"},c("li",{key:"7ee9b3b30bffd91a3d77ca490d21a4794118b871"},c("span",{key:"69366234fd8f0b9b0de3c641d29d8cfdf93f9dbc"},c("ifx-icon",{key:"5a539e1aa2f375c7258e3fc9b5e0d3f3247abb03",class:"check__icon",icon:"check12"})),c("span",{key:"0b30179a8deb5d956438f721e1bb89d750642458"},"Compact, dismissible and Extended variants")),c("li",{key:"d8d2908d95211c9243ae5ac13b6004868fcc0546"},c("span",{key:"0cd33f6ef52b25ea8a4e5a938810760aa27d0b45"},c("ifx-icon",{key:"b25c553b20d29f586cfe63208e995a44bac26072",class:"check__icon",icon:"check12"})),c("span",{key:"ac26889094a1e26eeb80897ba37705d1278510ba"},"Auto-adjusting position")),c("li",{key:"e8e521149b91f80d04ba709e08df157f8da58d9f"},c("span",{key:"6d81f918441a26e07bf1aad4aa276c26f6f64386"},c("ifx-icon",{key:"0ee4479f6286259ce250082057dbf096d3b61e8d",class:"check__icon",icon:"check12"})),c("span",{key:"9f3ce17d71f9caf59bafd59a1f6731d3da084029"},"Icon incorporated")),c("li",{key:"3e19419fc4b2b00ed2276bb1fadbd13dff2efc8c"},c("span",{key:"2602299bc1e27b0368e446f70dda4f0b9f42894a"},c("ifx-icon",{key:"4211f6b5f045523f1f5c513dfd1cfdaff7aa9f65",class:"check__icon",icon:"check12"})),c("span",{key:"2f7d478e424612e5ee62fd82cd11a50bd6909a1c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"81382e3b4c31b6612ddacd7118ec530231ad8a90"})),c("tr",{key:"56878f209fe6633baeb97793df3f39eb92a569f9"},c("td",{key:"8bf484246a1d02a7c6973386776d474eeaf36028",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a6d91b7d965243c8ad360169997fca1d962eb899",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"0de800337155f963e9dc4746e81975911f05441e"},c("ul",{key:"26997e64b01fc937181da4d246f44d058a2cb33b"},c("li",{key:"8fa89077c3327283cfc31e8eb1577af728ae9ee9"},c("span",{key:"7750ac3f855240960d8fc13f3262a77813cd342b"},c("ifx-icon",{key:"123e813646ea04aa27425760a766317d08f44468",class:"check__icon",icon:"check12"})),c("span",{key:"c9533dafa80a2055008266c56f6c5803809aef70"},"Offers a flexible and visually distinct container for presenting informative, warning, or error messages to users, enhancing the overall user experience with timely and relevant feedback")),c("li",{key:"ba0632f108106d26e0a9d5426a834d92d5669bfe"},c("span",{key:"3fb105275bcebcc49f5abbb62dacb74cc9d42865"},c("ifx-icon",{key:"c792cf9433cd281fcc0400c050f8bbfd49647b47",class:"check__icon",icon:"check12"})),c("span",{key:"9a1136d25de84643d0c3d95c12143a272956933a"},"Adheres to web standards")))),c("td",{key:"7f514ffad7093941c2e974208af0786feff9c5c0"}),c("td",{key:"d7e376a5f739894c0a280a3aae461398b2acf851"})),c("tr",{key:"220a5e0889ea02c3e50257ed280b091b5c8f7d02"},c("td",{key:"86aa8e07b3b06f17c1304203bcf63da0a344b81d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bc841a65c8f8306b47b8e44128d774819b4268c2",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-content-switcher--development",size:"s",variant:"bold"},"Content Switcher")),c("td",{key:"eba7f2066a6ae2ba498c7c05168c27c41e0f10b2"},c("ul",{key:"45fd0cea2fd88f08cb9988b834177716fd1557ee"},c("li",{key:"a71f86e9869fe2fd5f2a367921293812d54c9c1e"},c("span",{key:"d8edec0f4de6179c8e68c9ab1ba81cbc4533b45a"},c("ifx-icon",{key:"335912a7f7d375f74c60603122c7938d4265f6a6",class:"check__icon",icon:"check12"})),c("span",{key:"1640356cbc1dd568bc87c9d0db16c74acb5de9a3"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"0db766f95be27add7b83eab1c429e6d46fa91b02"},c("span",{key:"7adb4f59c1468c3826fcd5f87ab6f929703e199e"},c("ifx-icon",{key:"576783255e330e147009133ec3046eb4a9d12f34",class:"check__icon",icon:"check12"})),c("span",{key:"569b0b52789715c7cec57cdd0e9b6b8350ed1095"},"Offers a customizable mechanism for users to toggle and display diverse content panels, facilitating seamless navigation and interaction with varying information or functional contexts")),c("li",{key:"98363c886d050563318b61c60bc1ba6e5d50527f"},c("span",{key:"6896e3129469c4c77001109bf92fa83e7989d006"},c("ifx-icon",{key:"4ca1ec0a5f8805d85cbe426a653fe3cd69c896c3",class:"check__icon",icon:"check12"})),c("span",{key:"43650365ea688e194b7c32d0148e039019acc688"},"Adheres to web standards")))),c("td",{key:"c95c9cbcafb3db85a50be4974a5d3f05a862f76b"}),c("td",{key:"7e66eb27044a007e820b977b74bbae1cffacca4f"})),c("tr",{key:"119885ebc8ac0684803828579b8a231c758162ea"},c("td",{key:"ee0831c534aaab5683e0523353b1fba5cfabb2f9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4391eb111e6ac9bf56f80d158cb5da99a77e7a51",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-control--development",size:"s",variant:"bold"},"Segmented Control")),c("td",{key:"150437a1b2dd1df815c5afcd9a127c1b4be95302"},c("ul",{key:"229ccc3c5e18ed0816666cc119ef9def0cd96bbd"},c("li",{key:"56321caec30bd35657ad93e7702f49e5198ba1d8"},c("span",{key:"78825338ab33ec3952b1742a7a8e210773d72152"},c("ifx-icon",{key:"3aa29b79feb2e98fda7c53a084dd3f0bfb6c0a73",class:"check__icon",icon:"check12"})),c("span",{key:"a29f1eeb1adbd658b2af24ba7b185aef56e1ebe0"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"55eb4a152ff630eea9872fce4aac7f53a8fcccaa"},c("span",{key:"b4e5193c02dd89b743b6fab9524bf979d188391f"},c("ifx-icon",{key:"3f01c74ba9466688e20c0df751828e0b67334294",class:"check__icon",icon:"check12"})),c("span",{key:"37a7ce7f4e776cd33aa6774a251c1839e2ffae7f"},"Offers a customizable set of segmented buttons or tabs, allowing users to toggle between different choices or views, typically used for filtering, categorization, or navigation purposes")),c("li",{key:"32f1595d5296660670829727eafcdd0b19f23963"},c("span",{key:"97ddb2a02704e88e4ae79c16bddf1dcc800b4b9e"},c("ifx-icon",{key:"483bfc8ce86e114988e101dfb202b78b73ae8305",class:"check__icon",icon:"check12"})),c("span",{key:"70a3699d531a235f88476acf81d48891dadf0c8c"},"Adheres to web standards")))),c("td",{key:"827962c0529d26f3739eb9673ac251a5135b71dc"}),c("td",{key:"fdf69e0f4efc456f7bd846092a245481a53f4226"})),c("tr",{key:"924ac55b6557a0b3445096ba81f29a785be8dcd3"},c("td",{key:"f6b8686c021806e812d068491907fbd0fc938d1b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"008d37db68684bb7daedc3c53ef106654bcb268a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-controls--development",size:"s",variant:"bold"},"Textarea")),c("td",{key:"d1539202c6df512bfb71064bc38b95c4e087f2f3"},c("ul",{key:"77c331b7a2768722a105be02433905428d4017fb"},c("li",{key:"d2e8221c8ae88a9b3385806ec001ed9e19661e08"},c("span",{key:"9222e4e8d707b50902da58880a72e3df3f7cc811"},c("ifx-icon",{key:"64453fa102a19c64e87cfbd500fceed4c84b6b96",class:"check__icon",icon:"check12"})),c("span",{key:"8fff2fe92098ff362e13368db674670e8bdc9eaf"},"Provides a customizable multi-line text input interface, enabling users to input, edit, and view large amounts of text, while adhering to web standards for accessibility and usability.")),c("li",{key:"b9603ce065ff72161c2104e6135a510bff7cd7d0"},c("span",{key:"25e9610073e76f030e3871ab6b43cc2e71de2d7e"},c("ifx-icon",{key:"db46f6256737c84e83c0291777c12ae08bdbfd67",class:"check__icon",icon:"check12"})),c("span",{key:"e9350960901640ae46f6b1a047cd0525be66ca7f"},"Form integration")))),c("td",{key:"3d1d6cb075a7cfc7bc73c17fbc8a626d534b1306"}),c("td",{key:"74dc1e4656d4a674b03efd986b0e4edce464cc68"})),c("tr",{key:"92905e8e39c1ff7d321dcb80c396137abdd83e54"},c("td",{key:"88d9f2fbaee1ac4a138e75f71ec603c1d5eff21c",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"aab58129f15bd6651927bd808e9cbb58f9e0b418",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"5ae97b1886cfb2f4fecc0273e44f56ae62d5e7e0"},c("ul",{key:"2b9fad548edeea7aed97ba8ddcc0a6dabff351c8"},c("li",{key:"fb7e5d6e5ef249d35398d1600d9fd8bd9f8c45bc",class:"planned__component-wrapper"},c("span",{key:"4754e3b8c0b5f6764d3d95e645f67d87887ed6ac"},c("ifx-icon",{key:"92cc6538a2752d401cb2476acd2df0c38bf45dab",class:"planned__icon",icon:"clock24"})),c("span",{key:"2040d76256ae2d66f2cc6de789263ba97c9224a4"},"On Hold")))),c("td",{key:"f5e2e5ab43e4eea78fee545678db2cd7a0ef9cd7"}),c("td",{key:"707dc5c28b469fb11f43a6888e5a57c99bb54680"})),c("tr",{key:"6f69e1a69e051d62c33ec0d49b10ef13048f6413"},c("td",{key:"22ad05e2865e566ecee90edc4e2babf42a426147",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"0d388ed312a71b1848a32d023f0d80b2e5fa5040",href:"",size:"s",variant:"bold"},"Advanced Date Picker")),c("td",{key:"b942f37f8e681b2a8649e82cd874ba8ecdc27f19"},c("ul",{key:"324c1040c67a06590319ac3ff19e459f2d9ab963"},c("li",{key:"7a5a71f2bd1b2c853e24bd3b74d4a0c8c5dd6005",class:"planned__component-wrapper"},c("span",{key:"34c390cb934b452f46646ee9154d0571bd8fcf30"},c("ifx-icon",{key:"d4c5400564e835c66de82b4831d6b3abd7d1136e",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"dea7360c02ecacdcac565bf96d37ea9f24877b54"},"In Progress")))),c("td",{key:"6d3bd13000ada6b608e30a4ca47345bf1b27539b"}),c("td",{key:"ff7fccc7f36be1af0c6c550e3c7b65fa461d68fc"})),c("tr",{key:"47ba22f0fc047d419aaf4dc7d416492f882e1d3b"},c("td",{key:"a60a3b017f84d3f2d126fb646537cf347b9d7c1a",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"31e361c957b4e2925f03fbf6f5b82ddcc0bd82f8",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"4b4184635839b6464d05ff6902347c28ae097074"},c("ul",{key:"24a8d34888216d66ddc42ac509277d89714856df"},c("li",{key:"5cd2a32524ff59ca2ee2c19f7993f85b674f850f",class:"planned__component-wrapper"},c("span",{key:"bd578d41d8fdc2dd4a34eee4418d47c69bc3556e"},c("ifx-icon",{key:"95bc0315acbf1d02834b3d24764dcf3eac7e69f5",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"e798720c9ffc1c37833b4d15f94fdb42ce0e28c5"},"In Progress")))),c("td",{key:"3faafaaca5c6f6c023feeb7c12dc3d5da005357a"}),c("td",{key:"afd9cf73a533fedcb7bc8d62e3fac85487b9d367"})),c("tr",{key:"28c49655c1d7d24c8f0d11ffb02745a7561566cf"},c("td",{key:"3637165cd3029a1c18e7a8360cde4ad7887b5d56",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"ad9ea525033b0fe6bbf6ec8e3a04a3cba96b6aed",href:"",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"2a97ab3e5152cb2fe4dd23d2de44c0d165327ca2"},c("ul",{key:"0488b3c9da40f6b31e35501e9117fb87c038c45f"},c("li",{key:"314d3e7a7565b73e756b47a83b419f79083ff16a",class:"planned__component-wrapper"},c("span",{key:"962b8faff5a0dbccef8cd0877943acf0111788ab"},c("ifx-icon",{key:"e8eb2b2b3fce58c126d3a8e994a6e5b721f85179",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"01c53329aaa4203950e3664017c28b3570c07a2f"},"In Progress")))),c("td",{key:"3ce2362901c9463d5b623faff0f1d1285ddaa5a6"}),c("td",{key:"33bf742a01781beeecdeb6173909e412d1a527f4"})),c("tr",{key:"96b6c3d04f1eda4a370602da8cafed8ec8533293"},c("td",{key:"de17d897441e4c04cdbec83e3819d58990283f23",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"83574bd40e10513dc7e89bdb1ee4fba8bcc29939",href:"",size:"s",variant:"bold"},"Radio Group")),c("td",{key:"587de9fd8dc8cd808d01f0847a23c180b981cc47"},c("ul",{key:"3e2b735ffab10228e8ac7f68351c645337f12c2c"},c("li",{key:"6b15f5ac0656f98cefd1bf77e7d66b63ece4fe3f",class:"planned__component-wrapper"},c("span",{key:"0cfcb35c35949b5f6488bbf5cdd67a6d2ad995f4"},c("ifx-icon",{key:"e1b2cc2f12bce8c1dd6e33cf182617cd09d50c48",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"2cafa57559f9f248feea7e6eb988922a434b61b7"},"In Progress")))),c("td",{key:"4b7cf0d6d971fed2b8646ceffed3e80c352b11eb"}),c("td",{key:"2fa2d79dd82348574b7d2b0771e8f31748ec0bd2"})),c("tr",{key:"e012e51ded4037c15204d89f8a9f95327b404abf"},c("td",{key:"157d98c86fa7452bdbc053a5753cd4b145a77463",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"cd401d6ef26fb9e07f9491515c549f655bcd0610",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"8746d03ad5397fdcb257ad79fd3cdbcbeb47d882"},c("ul",{key:"0b975cbf4913c779a2fe176dd0a512dd26d2b1f5"},c("li",{key:"ba9b3c06db67a73056fd9b82178cc9cf707e9b85",class:"planned__component-wrapper"},c("span",{key:"0b87a0560894857508552ffa06200448b1ed0573"},c("ifx-icon",{key:"dccdd74b141d8f3e27d7980a7c6113cc4e65a930",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"f330b9848076faa01e0554ba4bf6e4bd04671acf"},"In Progress")))),c("td",{key:"3456a3c881eb19754c6f7f3884e6bb7f67e02c4e"}),c("td",{key:"ae567dc704cf65a9771c86f56b71513c1f89e1e2"})),c("tr",{key:"91f0a88d0eb45f41790b4a1626cdfd40f02670e1"},c("td",{key:"6b021c7c15803835984a56cbf274c75e786002d6",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"7a6d85cb8082fbef9a3961526057a32b22543b05",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"7136442350f196931fd140c74ed59c7f37058c69"},c("ul",{key:"2daffe00ca561fd2e6d0970e4799ef40ecaa0680"},c("li",{key:"4458a8d586d55984162d9d3b5e3f8e5dbe7692cb",class:"planned__component-wrapper"},c("span",{key:"70a67af1c1e9f593ef1e5dfa52ec2d771b87f897"},c("ifx-icon",{key:"fc36b0d0d347143a5c1b21520638171c843cd724",class:"planned__icon",icon:"clock24"})),c("span",{key:"c4f18c4adc3a047d24971b81cf25757d26f5efa1"},"On Hold")))),c("td",{key:"9ca0842a27419c919d56113814227b043e132805"}),c("td",{key:"0d72d2c9478c752fe5a5027083bbf41fec79cb85"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
|
2
|
-
//# sourceMappingURL=p-3bb4e495.entry.js.map
|