@infineon/infineon-design-system-stencil 37.14.1--canary.1990.fad04d5cfc0a07e27f1b21fb7ba8eb293c60f34c.0 → 37.14.1--canary.1992.3ba94dbc7ac612d3090f1bba7f29bb3a2701b4f2.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-alert_2.cjs.entry.js +1 -1
- 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-list-entry.cjs.entry.js +1 -1
- package/dist/cjs/ifx-multiselect_2.cjs.entry.js +4 -4
- package/dist/cjs/ifx-overview-table.cjs.entry.js +1 -1
- package/dist/cjs/ifx-overview-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-overview-table.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-radio-button-group.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 +2 -2
- 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-slider.cjs.entry.js +2 -2
- package/dist/cjs/ifx-spinner_2.cjs.entry.js +6 -6
- 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-templates-ui.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/ifx-tree-view-item.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tree-view.cjs.entry.js +1 -1
- package/dist/collection/components/overview-table/overview-table.js +1 -1
- package/dist/collection/components/overview-table/overview-table.js.map +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/radio-button-group/radio-button-group.js +1 -1
- package/dist/collection/components/search-bar/search-bar.js +1 -1
- package/dist/collection/components/search-field/search-field.js +2 -2
- 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/multi-select/multiselect-option.js +4 -4
- 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/templates/template/template.js +1 -1
- package/dist/collection/components/templates/templates-ui/templates-ui.js +1 -1
- package/dist/collection/components/text-field/text-field.js +4 -4
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +4 -4
- package/dist/collection/components/tree-view/tree-view-item.js +2 -2
- package/dist/collection/components/tree-view/tree-view.js +1 -1
- package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
- package/dist/components/ifx-basic-table.js +1 -1
- package/dist/components/ifx-faq.js +1 -1
- package/dist/components/ifx-file-upload.js +1 -1
- package/dist/components/ifx-filter-accordion.js +2 -2
- 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 +1 -1
- package/dist/components/ifx-list-entry.js +2 -2
- package/dist/components/ifx-multiselect-option.js +1 -1
- package/dist/components/ifx-multiselect.js +1 -1
- package/dist/components/ifx-overview-table.js +1 -1
- package/dist/components/ifx-overview-table.js.map +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-progress-bar.js +1 -1
- package/dist/components/ifx-radio-button-group.js +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 +5 -5
- package/dist/components/ifx-slider.js +2 -2
- package/dist/components/ifx-spinner.js +1 -1
- 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 +4 -4
- package/dist/components/ifx-tabs.js +2 -2
- package/dist/components/ifx-tag.js +1 -1
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +4 -4
- 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/ifx-tree-view-item.js +2 -2
- package/dist/components/ifx-tree-view.js +1 -1
- package/dist/components/{p-FczSL6gb.js → p-BRAYMYpA.js} +5 -5
- package/dist/components/{p-FczSL6gb.js.map → p-BRAYMYpA.js.map} +1 -1
- package/dist/components/{p-DyWw4V2x.js → p-BZbKc4N2.js} +3 -3
- package/dist/components/{p-DyWw4V2x.js.map → p-BZbKc4N2.js.map} +1 -1
- package/dist/components/{p-BdjtCY5d.js → p-B_2EeLyJ.js} +6 -6
- package/dist/components/{p-BdjtCY5d.js.map → p-B_2EeLyJ.js.map} +1 -1
- package/dist/components/{p-AfeIKrPd.js → p-C7jhiUEX.js} +4 -4
- package/dist/components/{p-AfeIKrPd.js.map → p-C7jhiUEX.js.map} +1 -1
- package/dist/components/{p-Dt9X9aqI.js → p-CFMrihYb.js} +4 -4
- package/dist/components/{p-Dt9X9aqI.js.map → p-CFMrihYb.js.map} +1 -1
- package/dist/components/{p-CwsunKGp.js → p-CSpaQFX2.js} +4 -4
- package/dist/components/{p-CwsunKGp.js.map → p-CSpaQFX2.js.map} +1 -1
- package/dist/components/{p-CStEOh5u.js → p-CW1EYr_B.js} +4 -4
- package/dist/components/{p-CStEOh5u.js.map → p-CW1EYr_B.js.map} +1 -1
- package/dist/components/{p-DI1Tz44s.js → p-Coa3oQEK.js} +4 -4
- package/dist/components/{p-DI1Tz44s.js.map → p-Coa3oQEK.js.map} +1 -1
- package/dist/components/{p-COBB2gby.js → p-D4E8VwPm.js} +3 -3
- package/dist/components/{p-COBB2gby.js.map → p-D4E8VwPm.js.map} +1 -1
- package/dist/components/{p-CkOHJ_UX.js → p-H7UrXx90.js} +6 -6
- package/dist/components/{p-CkOHJ_UX.js.map → p-H7UrXx90.js.map} +1 -1
- package/dist/esm/ifx-alert_2.entry.js +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-list-entry.entry.js +1 -1
- package/dist/esm/ifx-multiselect_2.entry.js +4 -4
- package/dist/esm/ifx-overview-table.entry.js +1 -1
- package/dist/esm/ifx-overview-table.entry.js.map +1 -1
- package/dist/esm/ifx-progress-bar.entry.js +1 -1
- package/dist/esm/ifx-radio-button-group.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 +2 -2
- 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-slider.entry.js +2 -2
- package/dist/esm/ifx-spinner_2.entry.js +6 -6
- 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-templates-ui.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/ifx-tree-view-item.entry.js +2 -2
- package/dist/esm/ifx-tree-view.entry.js +1 -1
- package/dist/infineon-design-system-stencil/ifx-overview-table.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-7b091a06.entry.js → p-019e01a1.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7462fff6.entry.js → p-01f4ac35.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-0468c9a7.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-61acd0a3.entry.js → p-1783d3c4.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-f53f7d80.entry.js → p-1e99b82a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-79399588.entry.js → p-20185a81.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-62b09872.entry.js → p-27d80304.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-cdbc14e1.entry.js → p-2845216b.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7b4b783a.entry.js → p-29924f68.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-41291d21.entry.js → p-29bf7f39.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-c06b0a60.entry.js → p-30e08f40.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-72bc047a.entry.js → p-32426d70.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-296c1bd4.entry.js → p-423fd640.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-bf480e62.entry.js → p-4bfaae7f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-34146964.entry.js → p-8e721b4b.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-b81d2f37.entry.js → p-901e400b.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7c32c3aa.entry.js → p-92b41859.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-9622982d.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-c75784ef.entry.js.map → p-9622982d.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-5c1a8c83.entry.js → p-9afbc104.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-0eaf5a5e.entry.js → p-9f677df3.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-92e5b3bd.entry.js → p-a3894e45.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-cc0309cc.entry.js → p-a4d53b78.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-e2dd3eef.entry.js → p-aae0430e.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-adc480bb.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-adc480bb.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-c863b508.entry.js → p-ae623793.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-a405b6f4.entry.js → p-afdb48bc.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-262afd53.entry.js → p-b3e0da8d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-022667fd.entry.js → p-c082f65d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-bb927fbf.entry.js → p-c2b28f48.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7c017d8c.entry.js → p-c585d41f.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-ea61b79e.entry.js → p-c633f9b0.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-7424e1be.entry.js → p-cf4d16d1.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-d1a40b06.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-50867a1f.entry.js.map → p-d1a40b06.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-11c13738.entry.js → p-d4534780.entry.js} +2 -2
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-50867a1f.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-66a4ed41.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-86523f4e.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-86523f4e.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c75784ef.entry.js +0 -2
- /package/dist/infineon-design-system-stencil/{p-7b091a06.entry.js.map → p-019e01a1.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7462fff6.entry.js.map → p-01f4ac35.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-66a4ed41.entry.js.map → p-0468c9a7.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-61acd0a3.entry.js.map → p-1783d3c4.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-f53f7d80.entry.js.map → p-1e99b82a.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-79399588.entry.js.map → p-20185a81.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-62b09872.entry.js.map → p-27d80304.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-cdbc14e1.entry.js.map → p-2845216b.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7b4b783a.entry.js.map → p-29924f68.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-41291d21.entry.js.map → p-29bf7f39.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-c06b0a60.entry.js.map → p-30e08f40.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-72bc047a.entry.js.map → p-32426d70.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-296c1bd4.entry.js.map → p-423fd640.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-bf480e62.entry.js.map → p-4bfaae7f.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-34146964.entry.js.map → p-8e721b4b.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-b81d2f37.entry.js.map → p-901e400b.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7c32c3aa.entry.js.map → p-92b41859.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-5c1a8c83.entry.js.map → p-9afbc104.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-0eaf5a5e.entry.js.map → p-9f677df3.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-92e5b3bd.entry.js.map → p-a3894e45.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-cc0309cc.entry.js.map → p-a4d53b78.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-e2dd3eef.entry.js.map → p-aae0430e.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-c863b508.entry.js.map → p-ae623793.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-a405b6f4.entry.js.map → p-afdb48bc.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-262afd53.entry.js.map → p-b3e0da8d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-022667fd.entry.js.map → p-c082f65d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-bb927fbf.entry.js.map → p-c2b28f48.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7c017d8c.entry.js.map → p-c585d41f.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-ea61b79e.entry.js.map → p-c633f9b0.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-7424e1be.entry.js.map → p-cf4d16d1.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-11c13738.entry.js.map → p-d4534780.entry.js.map} +0 -0
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as a,c as
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as a,c as e,h as r,a as s}from"./p-PqnYwNKt.js";import{d as i,t}from"./p-DcmcuUOA.js";import{i as h}from"./p-Bw2fh5LT.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const c=class{constructor(r){a(this,r);this.ifxInput=e(this,"ifxInput",7);this.ifxOpen=e(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState();this.ifxOpen.emit(this.internalState)}async componentDidLoad(){if(!h(this.el)){const a=i();t("ifx-search-bar",await a)}}handleInput(a){this.value=a.detail}render(){return r("div",{key:"0e6a3ebaf25533324d81eaab8147ecd44decda64",role:"search","aria-label":"a search field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?r("div",{class:"search-bar-wrapper"},r("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},r("ifx-icon",{icon:"search-16",slot:"search-icon"})),r("a",{"aria-label":"Close button",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):r("div",{class:"search-bar_icon-wrapper",onClick:this.handleCloseButton},r("ifx-icon",{icon:"search-16"})))}get el(){return s(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};c.style=o;export{c as ifx_search_bar};
|
2
|
+
//# sourceMappingURL=p-92b41859.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,c as t,h as s,a as i}from"./p-PqnYwNKt.js";import{d as a,t as o}from"./p-DcmcuUOA.js";import{i as c}from"./p-Bw2fh5LT.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const r=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const i=this.getSegments();i.forEach((i=>{if(i.selected){if(i.segmentIndex!==e){i.selected=false;t=i.value}else{s=i.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}))}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}async componentDidLoad(){if(!c(this.SegmentedControl)){const e=a();o("ifx-segmented-control",await e)}this.setActiveSegment()}render(){return s("div",{key:"736ba9f070e0e476d6818b4803b870ca932273c3","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"c1615f5fd6b1569cef19cd627955f9e0180e6e59",class:"group__label"},this.label.trim()),s("div",{key:"0c9ffc3a3c1fcb515cc9d5731ea7e1d61af03cbe",class:"group__controls"},s("slot",{key:"6abcc914da42eb8b400aa3bde6b6d7bbd8cfe6c0"})),this.caption.trim()&&s("div",{key:"e7a38c546402e9403d9692d700fffc425a453bcc",class:"group__caption"},s("ifx-icon",{key:"e64b062c4a53e402c58cadf77462fc606e737eb3",icon:"c-info-16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return i(this)}};r.style=n;export{r as ifx_segmented_control};
|
2
|
+
//# sourceMappingURL=p-9622982d.entry.js.map
|
package/dist/infineon-design-system-stencil/{p-c75784ef.entry.js.map → p-9622982d.entry.js.map}
RENAMED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["segmentedControlCss","SegmentedControl","constructor","hostRef","this","caption","label","size","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","setSegmentSize","shadowRoot","querySelector","classList","add","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","trim","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: tokens.$ifxSpace150;\n}\n\n.group__label {\n font: tokens.$ifxBodyBody05;\n\n &:empty {\n display: none;\n }\n}\n\n.group__controls {\n display: flex;\n flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n margin-left: -1px;\n margin-top: -1px;\n}\n\n.group__caption {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n font: tokens.$ifxBodyBody05;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n tag: 'ifx-segmented-control',\n styleUrl: 'segmented-control.scss',\n shadow: true\n})\n\nexport class SegmentedControl {\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n @Prop() caption: string = '';\n @Prop() label: string = '';\n @Prop() size: 'regular' | 'small' = 'regular';\n\n @Listen('segmentSelect')\n onSegmentSelect(event: CustomEvent) {\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n this.selectedValue = selectedValue;\n this.ifxChange.emit({ previousValue, selectedValue });\n }\n\n private selectedValue: string = '';\n\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n let previousValue: string;\n let selectedValue: string;\n\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n if (control.selected) {\n if (control.segmentIndex !== newSelectedIndex) {\n control.selected = false;\n previousValue = control.value;\n } else {\n selectedValue = control.value;\n }\n }\n })\n\n return { previousValue, selectedValue };\n }\n\n getSegments(): NodeList {\n return this.SegmentedControl.querySelectorAll('ifx-segment');\n }\n\n setActiveSegment(): void {\n const segments: NodeList = this.getSegments();\n let activeSegmentedControlFound = false;\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n control.segmentIndex = idx;\n if (activeSegmentedControlFound) {\n if (control.selected) control.selected = false;\n } else {\n if (control.selected) {\n activeSegmentedControlFound = true;\n this.selectedValue = control.value;\n }\n }\n });\n }\n\n setSegmentSize(): void {\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n });\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \n const framework = detectFramework();\n trackComponent('ifx-segmented-control', await framework)\n }\n this.setActiveSegment();\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n <div class='group__label'>\n { this.label.trim() }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class='group__caption'>\n <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"],"mappings":"
|
1
|
+
{"version":3,"names":["segmentedControlCss","SegmentedControl","constructor","hostRef","this","caption","label","size","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","setSegmentSize","shadowRoot","querySelector","classList","add","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","trim","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: tokens.$ifxSpace150;\n}\n\n.group__label {\n font: tokens.$ifxBodyBody05;\n\n &:empty {\n display: none;\n }\n}\n\n.group__controls {\n display: flex;\n flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n margin-left: -1px;\n margin-top: -1px;\n}\n\n.group__caption {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n \n font: tokens.$ifxBodyBody05;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n tag: 'ifx-segmented-control',\n styleUrl: 'segmented-control.scss',\n shadow: true\n})\n\nexport class SegmentedControl {\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n @Prop() caption: string = '';\n @Prop() label: string = '';\n @Prop() size: 'regular' | 'small' = 'regular';\n\n @Listen('segmentSelect')\n onSegmentSelect(event: CustomEvent) {\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n this.selectedValue = selectedValue;\n this.ifxChange.emit({ previousValue, selectedValue });\n }\n\n private selectedValue: string = '';\n\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n let previousValue: string;\n let selectedValue: string;\n\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n if (control.selected) {\n if (control.segmentIndex !== newSelectedIndex) {\n control.selected = false;\n previousValue = control.value;\n } else {\n selectedValue = control.value;\n }\n }\n })\n\n return { previousValue, selectedValue };\n }\n\n getSegments(): NodeList {\n return this.SegmentedControl.querySelectorAll('ifx-segment');\n }\n\n setActiveSegment(): void {\n const segments: NodeList = this.getSegments();\n let activeSegmentedControlFound = false;\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n control.segmentIndex = idx;\n if (activeSegmentedControlFound) {\n if (control.selected) control.selected = false;\n } else {\n if (control.selected) {\n activeSegmentedControlFound = true;\n this.selectedValue = control.value;\n }\n }\n });\n }\n\n setSegmentSize(): void {\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n });\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \n const framework = detectFramework();\n trackComponent('ifx-segmented-control', await framework)\n }\n this.setActiveSegment();\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n <div class='group__label'>\n { this.label.trim() }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class='group__caption'>\n <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"],"mappings":"wIAAA,MAAMA,EAAsB,gb,MCWfC,EAAgB,MAN7B,WAAAC,CAAAC,G,+CAWYC,KAAOC,QAAW,GAClBD,KAAKE,MAAW,GAChBF,KAAIG,KAAwB,UAS5BH,KAAaI,cAAW,EAgFnC,CAtFG,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBJ,KAAKQ,wBAAwBF,EAAMG,QAC5ET,KAAKI,cAAgBA,EACrBJ,KAAKU,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOd,KAAKH,iBAAiBuB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBb,KAAKc,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BtB,KAAKI,cAAgBY,EAAQG,K,MAM7C,cAAAK,GACI,MAAMX,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACdA,EAAQS,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY5B,KAAKG,OAAO,G,CAI3F,sBAAM0B,GACF,IAAIC,EAAuB9B,KAAKH,kBAAmB,CAC/C,MAAMkC,EAAYC,IAClBC,EAAe,8BAA+BF,E,CAElD/B,KAAKqB,kB,CAGT,MAAAa,GACI,OACIC,EAAiB,OAAAC,IAAA,wDAAApC,KAAKI,cAAa,aAAa,oBAAoBiC,MAAM,SACtEF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,gBACLrC,KAAKE,MAAMoC,QAGjBH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIApC,KAAKC,QAAQqC,QACbH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,kBACPF,EAAU,YAAAC,IAAA,2CAAAG,KAAK,cAAuB,IAAGvC,KAAKC,QAAQqC,Q,CAO1E,kBAAAE,GACIxC,KAAKwB,gB","ignoreList":[]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,c as a,h as t,a as s}from"./p-PqnYwNKt.js";import{d as i,t as l}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";const d=':host{display:block}.tree-view{font-family:var(--ifx-font-family, sans-serif);font-size:14px;color:var(--ifx-color-text, #1a1a1a);display:flex;flex-wrap:wrap;flex-direction:column;overflow-x:auto;overflow-y:hidden}.tree-view__label{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}';const f=class{constructor(t){e(this,t);this.ifxTreeViewExpandAllChange=a(this,"ifxTreeViewExpandAllChange",7);this.ifxTreeViewDisableAllChange=a(this,"ifxTreeViewDisableAllChange",7);this.disableAllItems=false;this.expandAllItems=false;this.handleSlotRef=e=>{if(e){if(this.disableAllItems){e.setAttribute("data-disable-all-items","true")}else{e.removeAttribute("data-disable-all-items")}if(this.expandAllItems){e.setAttribute("data-expand-all-items","true")}else{e.removeAttribute("data-expand-all-items")}}}}handleExpandAllItemsChange(e){this.ifxTreeViewExpandAllChange.emit(e)}handleDisableAllItemsChange(e){this.ifxTreeViewDisableAllChange.emit(e)}async componentDidLoad(){if(!r(this.el)){const e=i();l("ifx-tree-view",await e)}}render(){return t("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,c as a,h as t,a as s}from"./p-PqnYwNKt.js";import{d as i,t as l}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";const d=':host{display:block}.tree-view{font-family:var(--ifx-font-family, sans-serif);font-size:14px;color:var(--ifx-color-text, #1a1a1a);display:flex;flex-wrap:wrap;flex-direction:column;overflow-x:auto;overflow-y:hidden}.tree-view__label{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}';const f=class{constructor(t){e(this,t);this.ifxTreeViewExpandAllChange=a(this,"ifxTreeViewExpandAllChange",7);this.ifxTreeViewDisableAllChange=a(this,"ifxTreeViewDisableAllChange",7);this.disableAllItems=false;this.expandAllItems=false;this.handleSlotRef=e=>{if(e){if(this.disableAllItems){e.setAttribute("data-disable-all-items","true")}else{e.removeAttribute("data-disable-all-items")}if(this.expandAllItems){e.setAttribute("data-expand-all-items","true")}else{e.removeAttribute("data-expand-all-items")}}}}handleExpandAllItemsChange(e){this.ifxTreeViewExpandAllChange.emit(e)}handleDisableAllItemsChange(e){this.ifxTreeViewDisableAllChange.emit(e)}async componentDidLoad(){if(!r(this.el)){const e=i();l("ifx-tree-view",await e)}}render(){return t("div",{key:"63bd9d4d51fc7b25418aaa76f00f93022fec7f6b",class:`tree-view ${this.disableAllItems?" tree-view--disabled":""}`,role:"tree","aria-label":this.ariaLabel},this.label&&this.label.trim()!==""&&t("div",{key:"861163cec683997ba63508eea35d36016f967f05",class:"tree-view__label"},this.label),t("slot",{key:"42c8a45620e984edf12726e85d51dd38f3a3270b",ref:this.handleSlotRef}))}get el(){return s(this)}static get watchers(){return{expandAllItems:["handleExpandAllItemsChange"],disableAllItems:["handleDisableAllItemsChange"]}}};f.style=d;export{f as ifx_tree_view};
|
2
|
+
//# sourceMappingURL=p-9afbc104.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as s,h as e,a as i}from"./p-PqnYwNKt.js";const a=".list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch}";const r=class{constructor(e){t(this,e);this.ifxListEntryChange=s(this,"ifxListEntryChange",7)}valueChanged(t){if(t){this.host.setAttribute("value","true")}else{this.host.removeAttribute("value")}}handleFilterEntryChange(t){this.value=t.detail;this.ifxListEntryChange.emit({label:this.label,value:this.value,type:this.type})}render(){return e("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as s,h as e,a as i}from"./p-PqnYwNKt.js";const a=".list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch}";const r=class{constructor(e){t(this,e);this.ifxListEntryChange=s(this,"ifxListEntryChange",7)}valueChanged(t){if(t){this.host.setAttribute("value","true")}else{this.host.removeAttribute("value")}}handleFilterEntryChange(t){this.value=t.detail;this.ifxListEntryChange.emit({label:this.label,value:this.value,type:this.type})}render(){return e("div",{key:"191c0d0d1578948c343a9bfd6ac5843b7643209b",class:"wrapper"},this.type==="checkbox"?e("div",{class:"list-entry"},e("ifx-checkbox",{size:"s",checked:this.value},this.label)):e("div",{class:"list-entry"},e("ifx-radio-button",{size:"s",checked:this.value},this.label)))}get host(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};r.style=a;export{r as ifx_list_entry};
|
2
|
+
//# sourceMappingURL=p-9f677df3.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,h as o}from"./p-PqnYwNKt.js";const n=".container{padding-top:10px}";const t=class{constructor(o){e(this,o)}render(){return o("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,h as o}from"./p-PqnYwNKt.js";const n=".container{padding-top:10px}";const t=class{constructor(o){e(this,o)}render(){return o("div",{key:"00d6526e42c8e6113b33599683bf75d99bb2473b",class:"container"},o("ifx-accordion",{key:"6a0d7f29b1c79d5779bde7aa291dff0b2a166920"},o("ifx-accordion-item",{key:"e30c843d885ee21ddc09d4fdb5d68a75b8c02ab3",caption:"What is the Infineon DDS?"},"The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application’s structure should be."),o("ifx-accordion-item",{key:"0cd7d9d4a57d600f98dbb989ac74d057d7dc929d",caption:"How do I get access to the DDS?"},"You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."),o("ifx-accordion-item",{key:"7a742177b6760f3b8c2e86f5edf8300c39513f78",caption:"Can I integrate the Infineon DDS into my project?"},"Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"),o("ifx-accordion-item",{key:"6a8c2168c80dd0a9868990a6be194ece5654ac54",caption:"Are Infineon DDS components accessable?"},"We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."),o("ifx-accordion-item",{key:"ac7de8d8281eba59a080a7fad5c511965dd3709f",caption:"How to request a new component?"},"Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you.")))}};t.style=n;export{t as ifx_faq};
|
2
|
+
//# sourceMappingURL=p-a3894e45.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as s,c as i,h as t,a as e}from"./p-PqnYwNKt.js";import{d as n,t as o}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";import{c as h}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const a=':root {\n --ifx-font-family: "Source Sans 3", "Arial, sans-serif";\n}\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: #FFFFFF;\n width: 100%;\n font-family: var(--ifx-font-family);\n position: relative;\n}\n.search-field .search-field__wrapper {\n box-sizing: border-box;\n height: 40px;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: 1px;\n padding: 8px 16px;\n gap: 12px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: #8D8786;\n}\n.search-field .search-field__wrapper.focused {\n border: 2px solid #0A8276;\n}\n.search-field .search-field__wrapper.focused ifx-icon {\n color: #575352;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n}\n.search-field .search-field__wrapper:focus {\n outline: none;\n border: 2px solid #0A8276;\n}\n.search-field .search-field__wrapper .delete-icon {\n right: 12px;\n cursor: pointer;\n}\n.search-field .search-field__wrapper .delete-icon:focus {\n outline: none;\n border: 2px solid #0A8276;\n border-radius: 12px;\n}\n.search-field .search-field__wrapper input[type=text] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n outline: none;\n color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n background-color: #EEEDED;\n}\n.search-field .search-field__wrapper:has(input[disabled]) {\n background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: #FFFFFF;\n margin-top: 4px;\n border: 1px solid #EEEDED;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n z-index: 1000;\n max-height: 300px;\n overflow-y: auto;\n container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n font-family: Source Sans 3;\n font-size: 0.8125rem;\n font-weight: 600;\n line-height: 1.25rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: #575352;\n border-bottom: 1px solid #EEEDED;\n padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n color: #575352;\n flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n color: #8D8786;\n flex-shrink: 0;\n white-space: nowrap;\n margin-left: 2px;\n font-weight: 600;\n font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n flex-direction: column;\n align-items: flex-start;\n }\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n width: 100%;\n max-width: 100%;\n }\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n margin-left: 0;\n margin-top: 0;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 1;\n }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n color: #8D8786;\n margin-left: auto;\n flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n cursor: pointer;\n margin-left: auto;\n flex-shrink: 0;\n color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n opacity: 1;\n visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n border-radius: 1px 1px 0 0;\n border-color: #0A8276;\n}';const c=class{constructor(t){s(this,t);this.ifxInput=i(this,"ifxInput",7);this.ifxSuggestionRequested=i(this,"ifxSuggestionRequested",7);this.ifxSuggestionSelected=i(this,"ifxSuggestionSelected",7);this.ifxFocus=i(this,"ifxFocus",7);this.ifxBlur=i(this,"ifxBlur",7);this.value="";this.suggestions=[];this.showSuggestions=false;this.maxSuggestions=10;this.maxHistoryItems=5;this.enableHistory=true;this.historyKey="ifx-search-history";this.historyHeaderText="Recent Searches";this.ariaLabel="Search Field";this.deleteIconAriaLabel="Clear search";this.historyDeleteAriaLabel="Remove from history";this.dropdownAriaLabel="Search suggestions and history";this.suggestionAriaLabel="Search suggestion";this.historyItemAriaLabel="Search history item";this.showDropdown=false;this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.searchHistory=[];this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="off";this.maxlength=null;this.focusEmitted=false;this.handleInput=()=>{const s=this.inputElement.value;this.value=s;this.ifxInput.emit(this.value);if(this.showSuggestions){this.showDropdown=true;this.selectedSuggestionIndex=-1;this.requestSuggestions(s)}};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value);this.hideDropdown()};this.handleSearch=()=>{if(this.value.trim()&&this.enableHistory){if(this.filteredSuggestions.length>0){this.addToHistory(this.value)}}this.hideDropdown()};this.handleHistoryDelete=(s,i)=>{s.stopPropagation();this.removeFromHistory(i)}}handleOutsideClick(s){const i=s.composedPath();if(!i.includes(this.inputElement)&&!i.includes(this.dropdownElement)){this.hideDropdown()}}handleKeyDown(s){if(!this.showDropdown)return;switch(s.key){case"ArrowDown":s.preventDefault();this.navigateSuggestions(1);break;case"ArrowUp":s.preventDefault();this.navigateSuggestions(-1);break;case"Enter":s.preventDefault();if(this.selectedSuggestionIndex>=0){this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex])}else{this.handleSearch()}break;case"Escape":this.hideDropdown();break}}valueWatcher(s){if(this.inputElement&&s!==this.inputElement.value){this.inputElement.value=s}this.updateSuggestions()}suggestionsWatcher(){this.updateSuggestions()}focusInput(){if(!this.focusEmitted){this.focusEmitted=true;this.isFocused=true;this.ifxFocus.emit()}if(this.showSuggestions){if(this.value.length===0){this.showHistoryDropdown();this.showDropdown=this.enableHistory&&this.searchHistory.length>0}else{this.updateSuggestions();this.showDropdown=this.filteredSuggestions.length>0}}}blurInput(){setTimeout((()=>{this.isFocused=false;this.focusEmitted=false;this.ifxBlur.emit()}),150)}loadSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){const s=localStorage.getItem(this.historyKey);this.searchHistory=s?JSON.parse(s):[];this.updateSuggestions();if(this.value.length===0&&this.searchHistory.length===0){this.showDropdown=false}}}clearSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){localStorage.removeItem(this.historyKey);this.searchHistory=[];this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.showDropdown=false;this.updateSuggestions()}}addToHistory(s){if(!this.enableHistory||!s.trim())return;const i=[...this.searchHistory];const t=i.indexOf(s);if(t>-1){i.splice(t,1)}i.unshift(s);this.searchHistory=i.slice(0,this.maxHistoryItems);if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}}removeFromHistory(s){if(!this.enableHistory)return;const i=[...this.searchHistory];const t=i.indexOf(s);if(t>-1){i.splice(t,1);this.searchHistory=i;if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}this.updateSuggestions();if(this.searchHistory.length===0&&this.value.length===0){this.showDropdown=false}}}requestSuggestions(s){this.ifxSuggestionRequested.emit(s);this.updateSuggestions()}updateSuggestions(){const s=this.value.toLowerCase();let i=[];if(s.length>0){if(this.suggestions&&this.suggestions.length>0){const t=this.suggestions.filter((i=>i.text.toLowerCase().includes(s)));i=[...i,...t]}if(this.enableHistory&&this.searchHistory.length>0){const t=this.searchHistory.filter((i=>i.toLowerCase().includes(s))).map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=[...i,...t]}i.sort(((i,t)=>{const e=i.text.toLowerCase();const n=t.text.toLowerCase();if(e===s&&n!==s)return-1;if(n===s&&e!==s)return 1;const o=e.startsWith(s);const r=n.startsWith(s);if(o&&!r)return-1;if(r&&!o)return 1;if(i.type==="suggestion"&&t.type==="history")return-1;if(i.type==="history"&&t.type==="suggestion")return 1;return e.localeCompare(n)}))}else{if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=s}}const t=i.reduce(((s,i)=>{const t=s.findIndex((s=>s.text.toLowerCase()===i.text.toLowerCase()&&s.scope===i.scope));if(t===-1){s.push(i)}else{if(i.type==="history"&&s[t].type!=="history"){s[t]=i}}return s}),[]);this.filteredSuggestions=t.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}navigateSuggestions(s){const i=this.filteredSuggestions.length-1;if(s>0){this.selectedSuggestionIndex=this.selectedSuggestionIndex<i?this.selectedSuggestionIndex+1:0}else{this.selectedSuggestionIndex=this.selectedSuggestionIndex>0?this.selectedSuggestionIndex-1:i}}selectSuggestion(s){this.value=s.text;this.inputElement.value=s.text;this.ifxSuggestionSelected.emit(s);this.ifxInput.emit(this.value);if(this.enableHistory){this.addToHistory(s.text)}this.hideDropdown()}hideDropdown(){this.showDropdown=false;this.selectedSuggestionIndex=-1;this.isFocused=false}showHistoryDropdown(){if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));this.filteredSuggestions=s.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}else{this.filteredSuggestions=[]}}isShowingOnlyHistory(){return this.value.length===0&&this.filteredSuggestions.length>0&&this.filteredSuggestions.every((s=>s.type==="history"))}renderHighlightedText(s,i){if(!i||i.length===0){return s}const e=s.toLowerCase();const n=i.toLowerCase();const o=e.indexOf(n);if(o===-1){return s}const r=s.substring(0,o);const h=s.substring(o,o+i.length);const a=s.substring(o+i.length);return[r,t("strong",null,h),a]}componentWillLoad(){this.loadSearchHistory()}async componentDidLoad(){if(!r(this.el)){const s=n();o("ifx-search-field",await s)}}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return t("div",{key:"1464337ac84aa2707e9c17d6d21af2087253c233","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},t("div",{key:"d7bace664f3b66a42feff790959c83d3cd86fbe0",class:this.getWrapperClassNames(),tabindex:1,onClick:()=>this.focusInput()},t("ifx-icon",{key:"deb5c77cf9ebde1146afdffc5279b260da4f757a",icon:"search-16",class:"search-icon"}),t("input",{key:"cc247404c0d78ca0e8d163e9a1b315abd279f093",ref:s=>this.inputElement=s,type:"text",autocomplete:this.autocomplete,onInput:()=>this.handleInput(),onFocus:()=>this.focusInput(),onBlur:()=>this.blurInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value,role:"combobox","aria-expanded":this.showDropdown,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedBy,"aria-owns":this.showDropdown?"suggestions-dropdown":undefined,"aria-activedescendant":this.selectedSuggestionIndex>=0?`suggestion-${this.selectedSuggestionIndex}`:undefined}),this.showDeleteIcon&&this.showDeleteIconInternalState?t("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete,role:"button",tabindex:"0","aria-label":this.deleteIconAriaLabel,onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleDelete()}}}):null),this.showDropdown&&this.filteredSuggestions.length>0&&t("div",{key:"641b84e82bd07d44f6a657ac4e3af27af33f868a",ref:s=>this.dropdownElement=s,id:"suggestions-dropdown",class:"suggestions-dropdown",role:"listbox","aria-label":this.dropdownAriaLabel},this.isShowingOnlyHistory()&&t("div",{key:"66dbc2db67478154a79cc6a10796086e0ce819c3",class:"suggestions-header"},this.historyHeaderText),this.filteredSuggestions.map(((s,i)=>t("div",{key:s.id,id:`suggestion-${i}`,class:this.getSuggestionClassNames(i),role:"option","aria-selected":i===this.selectedSuggestionIndex,"aria-label":`${s.type==="history"?this.historyItemAriaLabel:this.suggestionAriaLabel}: ${s.text}${s.scope?`, ${s.scope}`:""}${s.resultCount?`, ${s.resultCount} results`:""}`,onClick:()=>this.selectSuggestion(s),onMouseEnter:()=>this.selectedSuggestionIndex=i},t("div",{class:"suggestion-content"},s.type==="history"&&t("ifx-icon",{icon:"history-16",class:"suggestion-icon suggestion-icon--history"}),s.type==="suggestion"&&t("ifx-icon",{icon:"search-16",class:"suggestion-icon suggestion-icon--suggestion"}),t("span",{class:"suggestion-text"},t("span",{class:"suggestion-main-text"},this.renderHighlightedText(s.text,this.value)),s.scope&&t("span",{class:"suggestion-scope"},"– ",s.scope)),s.resultCount!==undefined&&s.scope&&t("span",{class:"suggestion-count"},s.resultCount),s.type==="history"&&t("ifx-icon",{icon:"cross16",class:"suggestion-delete-icon",role:"button",tabindex:"0","aria-label":`${this.historyDeleteAriaLabel}: ${s.text}`,onClick:i=>this.handleHistoryDelete(i,s.text),onKeyDown:i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleHistoryDelete(i,s.text)}}})))))))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return h(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`,`${this.showDropdown?"dropdown-open":""}`)}getSuggestionClassNames(s){var i;return h("suggestion-item",{"suggestion-item--selected":s===this.selectedSuggestionIndex,"suggestion-item--history":((i=this.filteredSuggestions[s])===null||i===void 0?void 0:i.type)==="history"})}get el(){return e(this)}static get watchers(){return{value:["valueWatcher"],suggestions:["suggestionsWatcher"]}}};c.style=a;export{c as ifx_search_field};
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as s,c as i,h as t,a as e}from"./p-PqnYwNKt.js";import{d as n,t as o}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";import{c as h}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const a=':root {\n --ifx-font-family: "Source Sans 3", "Arial, sans-serif";\n}\n\n:host {\n display: flex;\n}\n\n.search-field {\n box-sizing: border-box;\n background-color: #FFFFFF;\n width: 100%;\n font-family: var(--ifx-font-family);\n position: relative;\n}\n.search-field .search-field__wrapper {\n box-sizing: border-box;\n height: 40px;\n display: flex;\n align-items: center;\n border: 1px solid #8D8786;\n border-radius: 1px;\n padding: 8px 16px;\n gap: 12px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n position: relative;\n width: 100%;\n outline: none;\n color: #8D8786;\n}\n.search-field .search-field__wrapper.focused {\n border: 2px solid #0A8276;\n}\n.search-field .search-field__wrapper.focused ifx-icon {\n color: #575352;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n border: 1px solid #3C3A39;\n}\n.search-field .search-field__wrapper:focus {\n outline: none;\n border: 2px solid #0A8276;\n}\n.search-field .search-field__wrapper .delete-icon {\n right: 12px;\n cursor: pointer;\n}\n.search-field .search-field__wrapper .delete-icon:focus {\n outline: none;\n border: 2px solid #0A8276;\n border-radius: 12px;\n}\n.search-field .search-field__wrapper input[type=text] {\n font-style: normal;\n font-weight: 400;\n font-size: 16px;\n color: #8D8786;\n border: none;\n width: 100%;\n outline: none;\n height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n outline: none;\n color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n background-color: #EEEDED;\n}\n.search-field .search-field__wrapper:has(input[disabled]) {\n background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: #FFFFFF;\n margin-top: 4px;\n border: 1px solid #EEEDED;\n box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n z-index: 1000;\n max-height: 300px;\n overflow-y: auto;\n container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n font-family: Source Sans 3;\n font-size: 0.8125rem;\n font-weight: 600;\n line-height: 1.25rem;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: #575352;\n border-bottom: 1px solid #EEEDED;\n padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n padding: 12px 16px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n color: #575352;\n flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex-shrink: 1;\n min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n color: #8D8786;\n flex-shrink: 0;\n white-space: nowrap;\n margin-left: 2px;\n font-weight: 600;\n font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n flex-direction: column;\n align-items: flex-start;\n }\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n width: 100%;\n max-width: 100%;\n }\n .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n margin-left: 0;\n margin-top: 0;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 1;\n }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n color: #8D8786;\n margin-left: auto;\n flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.2s ease, visibility 0.2s ease;\n cursor: pointer;\n margin-left: auto;\n flex-shrink: 0;\n color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n opacity: 1;\n visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n border-radius: 1px 1px 0 0;\n border-color: #0A8276;\n}';const c=class{constructor(t){s(this,t);this.ifxInput=i(this,"ifxInput",7);this.ifxSuggestionRequested=i(this,"ifxSuggestionRequested",7);this.ifxSuggestionSelected=i(this,"ifxSuggestionSelected",7);this.ifxFocus=i(this,"ifxFocus",7);this.ifxBlur=i(this,"ifxBlur",7);this.value="";this.suggestions=[];this.showSuggestions=false;this.maxSuggestions=10;this.maxHistoryItems=5;this.enableHistory=true;this.historyKey="ifx-search-history";this.historyHeaderText="Recent Searches";this.ariaLabel="Search Field";this.deleteIconAriaLabel="Clear search";this.historyDeleteAriaLabel="Remove from history";this.dropdownAriaLabel="Search suggestions and history";this.suggestionAriaLabel="Search suggestion";this.historyItemAriaLabel="Search history item";this.showDropdown=false;this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.searchHistory=[];this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="off";this.maxlength=null;this.focusEmitted=false;this.handleInput=()=>{const s=this.inputElement.value;this.value=s;this.ifxInput.emit(this.value);if(this.showSuggestions){this.showDropdown=true;this.selectedSuggestionIndex=-1;this.requestSuggestions(s)}};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value);this.hideDropdown()};this.handleSearch=()=>{if(this.value.trim()&&this.enableHistory){if(this.filteredSuggestions.length>0){this.addToHistory(this.value)}}this.hideDropdown()};this.handleHistoryDelete=(s,i)=>{s.stopPropagation();this.removeFromHistory(i)}}handleOutsideClick(s){const i=s.composedPath();if(!i.includes(this.inputElement)&&!i.includes(this.dropdownElement)){this.hideDropdown()}}handleKeyDown(s){if(!this.showDropdown)return;switch(s.key){case"ArrowDown":s.preventDefault();this.navigateSuggestions(1);break;case"ArrowUp":s.preventDefault();this.navigateSuggestions(-1);break;case"Enter":s.preventDefault();if(this.selectedSuggestionIndex>=0){this.selectSuggestion(this.filteredSuggestions[this.selectedSuggestionIndex])}else{this.handleSearch()}break;case"Escape":this.hideDropdown();break}}valueWatcher(s){if(this.inputElement&&s!==this.inputElement.value){this.inputElement.value=s}this.updateSuggestions()}suggestionsWatcher(){this.updateSuggestions()}focusInput(){if(!this.focusEmitted){this.focusEmitted=true;this.isFocused=true;this.ifxFocus.emit()}if(this.showSuggestions){if(this.value.length===0){this.showHistoryDropdown();this.showDropdown=this.enableHistory&&this.searchHistory.length>0}else{this.updateSuggestions();this.showDropdown=this.filteredSuggestions.length>0}}}blurInput(){setTimeout((()=>{this.isFocused=false;this.focusEmitted=false;this.ifxBlur.emit()}),150)}loadSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){const s=localStorage.getItem(this.historyKey);this.searchHistory=s?JSON.parse(s):[];this.updateSuggestions();if(this.value.length===0&&this.searchHistory.length===0){this.showDropdown=false}}}clearSearchHistory(){if(this.enableHistory&&typeof localStorage!=="undefined"){localStorage.removeItem(this.historyKey);this.searchHistory=[];this.filteredSuggestions=[];this.selectedSuggestionIndex=-1;this.showDropdown=false;this.updateSuggestions()}}addToHistory(s){if(!this.enableHistory||!s.trim())return;const i=[...this.searchHistory];const t=i.indexOf(s);if(t>-1){i.splice(t,1)}i.unshift(s);this.searchHistory=i.slice(0,this.maxHistoryItems);if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}}removeFromHistory(s){if(!this.enableHistory)return;const i=[...this.searchHistory];const t=i.indexOf(s);if(t>-1){i.splice(t,1);this.searchHistory=i;if(typeof localStorage!=="undefined"){localStorage.setItem(this.historyKey,JSON.stringify(this.searchHistory))}this.updateSuggestions();if(this.searchHistory.length===0&&this.value.length===0){this.showDropdown=false}}}requestSuggestions(s){this.ifxSuggestionRequested.emit(s);this.updateSuggestions()}updateSuggestions(){const s=this.value.toLowerCase();let i=[];if(s.length>0){if(this.suggestions&&this.suggestions.length>0){const t=this.suggestions.filter((i=>i.text.toLowerCase().includes(s)));i=[...i,...t]}if(this.enableHistory&&this.searchHistory.length>0){const t=this.searchHistory.filter((i=>i.toLowerCase().includes(s))).map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=[...i,...t]}i.sort(((i,t)=>{const e=i.text.toLowerCase();const n=t.text.toLowerCase();if(e===s&&n!==s)return-1;if(n===s&&e!==s)return 1;const o=e.startsWith(s);const r=n.startsWith(s);if(o&&!r)return-1;if(r&&!o)return 1;if(i.type==="suggestion"&&t.type==="history")return-1;if(i.type==="history"&&t.type==="suggestion")return 1;return e.localeCompare(n)}))}else{if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));i=s}}const t=i.reduce(((s,i)=>{const t=s.findIndex((s=>s.text.toLowerCase()===i.text.toLowerCase()&&s.scope===i.scope));if(t===-1){s.push(i)}else{if(i.type==="history"&&s[t].type!=="history"){s[t]=i}}return s}),[]);this.filteredSuggestions=t.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}navigateSuggestions(s){const i=this.filteredSuggestions.length-1;if(s>0){this.selectedSuggestionIndex=this.selectedSuggestionIndex<i?this.selectedSuggestionIndex+1:0}else{this.selectedSuggestionIndex=this.selectedSuggestionIndex>0?this.selectedSuggestionIndex-1:i}}selectSuggestion(s){this.value=s.text;this.inputElement.value=s.text;this.ifxSuggestionSelected.emit(s);this.ifxInput.emit(this.value);if(this.enableHistory){this.addToHistory(s.text)}this.hideDropdown()}hideDropdown(){this.showDropdown=false;this.selectedSuggestionIndex=-1;this.isFocused=false}showHistoryDropdown(){if(this.enableHistory&&this.searchHistory.length>0){const s=this.searchHistory.map(((s,i)=>({id:`history-${i}`,text:s,type:"history"})));this.filteredSuggestions=s.slice(0,this.maxSuggestions);this.selectedSuggestionIndex=-1}else{this.filteredSuggestions=[]}}isShowingOnlyHistory(){return this.value.length===0&&this.filteredSuggestions.length>0&&this.filteredSuggestions.every((s=>s.type==="history"))}renderHighlightedText(s,i){if(!i||i.length===0){return s}const e=s.toLowerCase();const n=i.toLowerCase();const o=e.indexOf(n);if(o===-1){return s}const r=s.substring(0,o);const h=s.substring(o,o+i.length);const a=s.substring(o+i.length);return[r,t("strong",null,h),a]}componentWillLoad(){this.loadSearchHistory()}async componentDidLoad(){if(!r(this.el)){const s=n();o("ifx-search-field",await s)}}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return t("div",{key:"b4b6e9c1fffb8a7f3a10bf48748441eaa71ac311","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},t("div",{key:"711fd0df34e33f1ac62d2e0824238f57a7d63344",class:this.getWrapperClassNames(),tabindex:1,onClick:()=>this.focusInput()},t("ifx-icon",{key:"23ecf2888cf2be969bb021798ebfc73063f3ace3",icon:"search-16",class:"search-icon"}),t("input",{key:"ae313bce4320f7959359b4f63b0cc551f614418b",ref:s=>this.inputElement=s,type:"text",autocomplete:this.autocomplete,onInput:()=>this.handleInput(),onFocus:()=>this.focusInput(),onBlur:()=>this.blurInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value,role:"combobox","aria-expanded":this.showDropdown,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledBy,"aria-describedby":this.ariaDescribedBy,"aria-owns":this.showDropdown?"suggestions-dropdown":undefined,"aria-activedescendant":this.selectedSuggestionIndex>=0?`suggestion-${this.selectedSuggestionIndex}`:undefined}),this.showDeleteIcon&&this.showDeleteIconInternalState?t("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete,role:"button",tabindex:"0","aria-label":this.deleteIconAriaLabel,onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleDelete()}}}):null),this.showDropdown&&this.filteredSuggestions.length>0&&t("div",{key:"914f35ac4df83db311423c761c33629caf9e1fb2",ref:s=>this.dropdownElement=s,id:"suggestions-dropdown",class:"suggestions-dropdown",role:"listbox","aria-label":this.dropdownAriaLabel},this.isShowingOnlyHistory()&&t("div",{key:"cdec95092cee646c785b9f9cb049b28a8071fb6a",class:"suggestions-header"},this.historyHeaderText),this.filteredSuggestions.map(((s,i)=>t("div",{key:s.id,id:`suggestion-${i}`,class:this.getSuggestionClassNames(i),role:"option","aria-selected":i===this.selectedSuggestionIndex,"aria-label":`${s.type==="history"?this.historyItemAriaLabel:this.suggestionAriaLabel}: ${s.text}${s.scope?`, ${s.scope}`:""}${s.resultCount?`, ${s.resultCount} results`:""}`,onClick:()=>this.selectSuggestion(s),onMouseEnter:()=>this.selectedSuggestionIndex=i},t("div",{class:"suggestion-content"},s.type==="history"&&t("ifx-icon",{icon:"history-16",class:"suggestion-icon suggestion-icon--history"}),s.type==="suggestion"&&t("ifx-icon",{icon:"search-16",class:"suggestion-icon suggestion-icon--suggestion"}),t("span",{class:"suggestion-text"},t("span",{class:"suggestion-main-text"},this.renderHighlightedText(s.text,this.value)),s.scope&&t("span",{class:"suggestion-scope"},"– ",s.scope)),s.resultCount!==undefined&&s.scope&&t("span",{class:"suggestion-count"},s.resultCount),s.type==="history"&&t("ifx-icon",{icon:"cross16",class:"suggestion-delete-icon",role:"button",tabindex:"0","aria-label":`${this.historyDeleteAriaLabel}: ${s.text}`,onClick:i=>this.handleHistoryDelete(i,s.text),onKeyDown:i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleHistoryDelete(i,s.text)}}})))))))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return h(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`,`${this.showDropdown?"dropdown-open":""}`)}getSuggestionClassNames(s){var i;return h("suggestion-item",{"suggestion-item--selected":s===this.selectedSuggestionIndex,"suggestion-item--history":((i=this.filteredSuggestions[s])===null||i===void 0?void 0:i.type)==="history"})}get el(){return e(this)}static get watchers(){return{value:["valueWatcher"],suggestions:["suggestionsWatcher"]}}};c.style=a;export{c as ifx_search_field};
|
2
|
+
//# sourceMappingURL=p-a4d53b78.entry.js.map
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,c as i,h as t,a as s}from"./p-PqnYwNKt.js";import{d as a,t as r}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const d=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}async componentDidLoad(){if(!n(this.el)){const e=a();r("ifx-slider",await e)}this.updateValuePercent()}render(){return t("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as e,c as i,h as t,a as s}from"./p-PqnYwNKt.js";import{d as a,t as r}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const d=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}async componentDidLoad(){if(!n(this.el)){const e=a();r("ifx-slider",await e)}this.updateValuePercent()}render(){return t("div",{key:"2157a80dcdb4231f45b02da6c59b761927c14de0",class:"ifx-slider"},this.leftText&&t("span",{key:"3f0cb2fafafd7eb2bb40733f99e94b0b11ae7f76",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"4366f93239d8ef4eb76b0cc7d3f7430b53c5297a",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"a slider","aria-value":this.value,"aria-disabled":this.disabled}):t("div",{class:"range-slider__wrapper","aria-label":"a range slider","aria-value":this.value,"aria-disabled":this.disabled},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)})),this.rightIcon&&t("ifx-icon",{key:"0e549fb22c30b7e22a8bbb948c13cb41dec5f084",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"0329a6c3c917f6beddbfde63ba4eca875d0235b3",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"45d29e469bae4237d5962cb90b337fb53a73cff3",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};d.style=h;export{d as ifx_slider};
|
2
|
+
//# sourceMappingURL=p-aae0430e.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,h as c,a}from"./p-PqnYwNKt.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=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.number=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.number=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.number=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:"b5e0adfc133dd7351fbcdef0433e060e43cc83d8",class:"container"},c("header",{key:"eef4d038fa80ac4494326b7ee8f83d74ecd2b3bb",class:"header"},c("div",{key:"9265e37a2949a24a7872894c9165fa4a86771364",class:"header__info-wrapper"},c("div",{key:"cd8f01827f3aba08ab39335da369de47ef8dd346",class:"title"},"DDS Components Overview"),c("div",{key:"22b3d83eeeececce070658ae42074a97c3f78625",class:"infoboard__wrapper"},c("div",{key:"f0ca1e1817cfd593bb5662b82081ed2b0184fcf4",class:"basic__info"},c("div",{key:"f8683b70ef8374a4efcc5a48ae2119cd7d50b4dd"},"Total Number:"),c("div",{key:"ef78725ee53a2473e254f2de9f58624519201717"},c("ifx-indicator",{key:"f6cd423ca86cfbaa3e248611d96c57b072bfdb92",id:"number__indicator-total",variant:"number"}))),c("div",{key:"38cbf38cea93c1398bef588db752f71de6e2cb30",class:"basic__info"},c("div",{key:"6f37b37c570f20fd0e22d65e339d093b8e8a2fbe"},"Completed:"),c("div",{key:"39d6cc670b53a60464578051663a2932075e6055"},c("ifx-indicator",{key:"81af885e0238921dbb6b2e1fb0f5820af9ddc65b",id:"number__indicator-completed",variant:"number"}))),c("div",{key:"a9edb18f33a0479a709a6d375e423dc262b7dc04",class:"basic__info"},c("div",{key:"9c8124a35b4f05bf60f799f5b0976305237077b8"},"In Progress:"),c("div",{key:"e87d2db5107df9e35be68ab5395ba1e47b0eac3d"},c("ifx-indicator",{key:"4af86636abd1a065063e573d85040d461c9fbec7",id:"number__indicator-planned",variant:"number"})))))),c("div",{key:"4180e631ddd7a2799f5086f160277ce9685db9f0",class:"view"},c("div",{key:"7ae6bbce05c2bafc03e070583c8b32e887a1c7d9",class:"wrapper"},c("table",{key:"1c76978a40e04a433c4ede3c21c5b81634e1c1ba"},c("thead",{key:"9cd53a94231d0d1c25f10f6edd7030d0372577b1"},c("tr",{key:"e02324eb99e3c24dff51f5999cd2cf48d796850b"},c("th",{key:"bf0211071f2f72f2087598a932aff6482baec915",class:"sticky-col second-col"},"Component"),c("th",{key:"66d0dd746cbf010f889f26dabcf0239ebe2e2de5"},c("div",{key:"955ed744c8fb849a83b19e0a34eebd6ec3176c62",class:"version__wrapper"},c("span",{key:"3ab5f6730052f4805ed7f84fc19e3ce1fbd9ddef"},"Version 1"))),c("th",{key:"358c32e624f3a891269ad30b647cde68117446b0"},c("div",{key:"7a1d397e9ed7e5752f4fcc68aeb0cd1e34e4cfb8",class:"version__wrapper"},c("span",{key:"af62565d5f30beba1a2b3e0883ad7ddcaf2409ae"},"Version 2"))),c("th",{key:"dfe06aa4e0e2bf2ce5a3114de07ca8862c548de3"},"Version 3"))),c("tbody",{key:"70ca2c72c3e8999247a9e7328ccf4ff91ce1028b"},c("tr",{key:"ef6862ceeb5b7ad9020566613dbc947ad8f3eefe"},c("td",{key:"71d84cebbd82fb6f45f401ee5e0b925602efc6b6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"36b05c653829284c26f3ada7df7c2e01683df032",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"35c44faf4a2125a515a062e5ad509598bfb3d5be"},c("ul",{key:"fffe062ddf59cf7257f4840fe3efca07c59d392b"},c("li",{key:"de871839444ab4c82c9ac5f20c30ceb758cce88c"},c("span",{key:"35b44abd6e730619766ea0554d9fec32e281a589"},c("ifx-icon",{key:"cca03057d42741dec9067d8095f8428bb341e142",class:"check__icon",icon:"check16"})),c("span",{key:"a0dae6b4f4d90eea1d608db3f3f98ec7b4242080"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"f93fe8bb00c70dba490999591d4cfffd6c5539b2"},c("span",{key:"e982a873c34bfb3cbcf0ac83b13cc2cee20a4c8f"},c("ifx-icon",{key:"ae2dee094fa814a3c79e726f362779d32311f3f1",class:"check__icon",icon:"check16"})),c("span",{key:"e0543dbda56a1bba4653713b26643b5c3f4c6a9e"},"Adheres to web standards")),c("li",{key:"0e2715826d7adfcf2ba05cf0b1b65fabf1fd596d"},c("span",{key:"741e77827cd7e76fcfaabd962ff691686d33894f"},c("ifx-icon",{key:"133fa6a0076851fb94a30edb8116a9c3c19b15f6",class:"check__icon",icon:"check16"})),c("span",{key:"7da5239790c48e23e3f8aae99065ccdcef4d59ef"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"66367794109267440dc101a24cfa5255d7372563"},c("ul",{key:"9c938d2d5c0cdfaaea0c7159b0a48f99604818f8"},c("li",{key:"f46d0817a49d77f93ba28e1feedb40941389d99c"},c("span",{key:"2603649086086475ec32a405c04d5deda840c240"},c("ifx-icon",{key:"bc1c5915decba40a4f32c7632313504a2fdc3b03",class:"check__icon",icon:"check16"})),c("span",{key:"d91a7d8acf80ced5d731588354c108977a77b517"},"Auto collapse feature")),c("li",{key:"937ba350e7260a1cab80f5467d96e1dad3634766"},c("span",{key:"437f66de8781f78164f5bc7dfc6a60c97707bef8"},c("ifx-icon",{key:"43adeb46764b4df97a1902a5fe26bf9a8de38429",class:"check__icon",icon:"check16"})),c("span",{key:"3d409974451942fbfad0843d05c31072e69d5dc6"},"Initial collapse feature")),c("li",{key:"bde800bb2243b3f33be199553129124989d8ab94"},c("span",{key:"51b413f3f0a98dcf9fc17e9c3ae0d9824abd7e31"},c("ifx-icon",{key:"4c0763b4e1c7ef4148cc4428971b80e3e5d7023c",class:"check__icon",icon:"check16"})),c("span",{key:"fc4a201c761ecb1984582f1ac61fba1cc8496c80"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b0fc109026afb30bd3abc62a7bd06d74b71af99a"})),c("tr",{key:"be70be42345356164a4e93c07e5a877ffb6db25e"},c("td",{key:"6a8d92542fc5168ccefd7f248921ff61bee41a76",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9ff4f29fdcd1d98c7247f1156075c0a805d60e57",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"80aca05168134b09b6681c7bca72ea70f3f0a1b9"},c("ul",{key:"eaa65ad7bd1c8c2861420deef4da570221b4c089"},c("li",{key:"35ba15309951b5d28e4c79700dc8c6d6f8bffd30"},c("span",{key:"d82a4763116577392422c61d0999e51cefb254d5"},c("ifx-icon",{key:"76c4cb2d23987f30c7447c315512f0c00b98eee5",class:"check__icon",icon:"check16"})),c("span",{key:"cabb57e1085c46391e79b6f779afbc41d99d9ef0"},"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:"4a8b4daa5dd369d3a2e1b7e6edb0dc21609ef158"},c("span",{key:"f64abac1d2dff7ad150a81d7d26af1b499388873"},c("ifx-icon",{key:"e067bc51c5cbad6b94bd7e7fdd4c5d70d2d3c485",class:"check__icon",icon:"check16"})),c("span",{key:"a15a59ec05fafabcecc178300a3bdc7aec634dc6"},"Adheres to web standards")))),c("td",{key:"e93a5a47064cbb2fc5a5efb8d6aecd04b5f0300a"},c("ul",{key:"2b35bf768ce10783d9f9a43be42b8c97b94cdb6c"},c("li",{key:"b7abf46cb986c0319114b992402334b337ab3fe0"},c("span",{key:"037507d036e9d9ae8e899d60316cdf2f0f40e9da"},c("ifx-icon",{key:"fe401a7d941f27ec6eb3bca2f50fb25ca1f3d0ed",class:"check__icon",icon:"check16"})),c("span",{key:"88ec6c13d08b8c232bb0eaec1c692895a2b78084"},"Configurable close button")),c("li",{key:"7fb90e6a9cfab77aa52108461dd02b070e3f48c2"},c("span",{key:"b0312764773a6d7a9e99d7cd9363904d0900fde7"},c("ifx-icon",{key:"32e63d575bf7da267ffb7b1573a3f4942425e500",class:"check__icon",icon:"check16"})),c("span",{key:"ecf701142b756f02a70bd7487844b9dcd94b8ce0"},"Additional Info variant")),c("li",{key:"90b2b3bf79f0cf085d4e5d151b19d7a6160d95de"},c("span",{key:"fa24e42a184d51b194cdb651f520174b4a6a0a71"},c("ifx-icon",{key:"e41b0853b0baf114bc2f3ea5f1bfe13c09d1a9ce",class:"check__icon",icon:"check16"})),c("span",{key:"7263b4af10c8fbc40f29ecf5c0bdca89441f8f2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"25417a20bb4bf5527a8638649d318f011d9471f6"})),c("tr",{key:"42646d457631866da201939615fa4dd5bf9d15f4"},c("td",{key:"ecfd6783a9235cef0abf939bd5fb05a52815fc7d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a7cd189f11727ee98df0c317fac1489ad9e232b1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"d2d86afe2fd9e3ac9a9b9fbe48fb05b275075935"},c("ul",{key:"f8214a3db21168a00bc9b69d905745e9f6ee02e7"},c("li",{key:"bd8ce9e62745824792a94d701302b1f28f0062f8"},c("span",{key:"1d91255881fc50459496ff4d1736b9df618683e7"},c("ifx-icon",{key:"e44012950118e540489521e5448194a30c82e053",class:"check__icon",icon:"check16"})),c("span",{key:"21057fd1b0a37b7bc83c19cf6d2f08331228d7ae"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"aa0247f9ed934af5f297da6d4a5474e6eaa7b1be"},c("span",{key:"95a026cfcb50d500c94b802c19868a8c6ef49ed7"},c("ifx-icon",{key:"440888b274591bd3bd355656b1865c7c732a5aed",class:"check__icon",icon:"check16"})),c("span",{key:"fbd79b42870163b60f4450f67d0c35055b323897"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"398633367d12857bdb62c69895ae5a488079c32b"},c("ul",{key:"9cad239ad02589a59c6d9b02743820fbe11d5de1"},c("li",{key:"b51c853040ff843581a51313f5ef544e36b8f181"},c("span",{key:"240e041a865ad263f9b5e49fb59b8a451becd23d"},c("ifx-icon",{key:"77593c85378791da9cc23efea05d6c9cb360c81e",class:"check__icon",icon:"check16"})),c("span",{key:"961e61b73d57470e072316cd03db228dad9d9f07"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3ddb8cb00d4093a1acdd0bd9b6cc693189797ee8"})),c("tr",{key:"35fd4ff056bff86aa847b42880e59c96707fe429"},c("td",{key:"dd14ad1dd143acbadddce37961532acc1844c032",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8978906d0fc88e047dcda3bc4bb55601e7b01872",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"027de7ef110364c7652783d73e6d9f7651624c01"},c("ul",{key:"cdf70596221a1c0d40f7e0709779c85229ac00d5"},c("li",{key:"3410e5a3a8eae2d0d52fe7d3d4087d69cb9f2ef6"},c("span",{key:"eefa555aa0c436ab3ca014d41e5cc108a1967cf0"},c("ifx-icon",{key:"d4cfcafc434cbdee834da5d26f5d9b0d9b47f73d",class:"check__icon",icon:"check16"})),c("span",{key:"867bf6ddfeef13211fb1f6b86c825684a11464ac"},"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:"434d12df37e10624a10bebef9bf791369b73c072"},c("span",{key:"400c4c4354a243effe7950279a0730c69256ab1b"},c("ifx-icon",{key:"a41b4523892eac99797119289d6f1b73befcfd96",class:"check__icon",icon:"check16"})),c("span",{key:"f4257c75077b3be4466b4d2150d05264570955d4"},"Adheres to web standards")))),c("td",{key:"76f5c5f45b30558010f2f4e9a8fc523a13878b90"},c("ul",{key:"644a3698105ed59dd15440ae0409d0cef2b60e2a"},c("li",{key:"5899a6f9fc3e661aeae7347a8a87812a8630940a"},c("span",{key:"6b70e1d0f953a007feb6eea1b5a9807cbdf5d836"},c("ifx-icon",{key:"ec2bedddee3afe85920c05dcfdfe42b28cec9af1",class:"check__icon",icon:"check16"})),c("span",{key:"93b61730071db89093fd632a2cb2f08a8b7d3a2b"},"Possibility to add an icon")),c("li",{key:"ec6be8815cf1f63c4f9385b53e3b06f4d9988d66"},c("span",{key:"34a130cb5b6e9ae9eac9c16d9a16b347f7218b6d"},c("ifx-icon",{key:"d3eea1b61f0963b71bd0c6b42dca0fe43c52351e",class:"check__icon",icon:"check16"})),c("span",{key:"385c10483d060f5c3ae1ba6d100a5f1cd4a1260f"},"Incorporated dropdown-menu for individual items")),c("li",{key:"55fa61ecf5693ba8b2feb18e2a994c6e7ca4f989"},c("span",{key:"f68b066a9f3b98bc97a314b8a29ab8ecd39627d5"},c("ifx-icon",{key:"b8840a40f374f66e03101391aae1e7cb647b4ea3",class:"check__icon",icon:"check16"})),c("span",{key:"10ca0e779bfc258994fb1088476c4e26b1ebe504"},"React, Vue and Angular wrapper integration")))),c("td",{key:"4180634496cb7dbddc5c44c0758e361227c41c81"})),c("tr",{key:"b1579a6a421a0e7948e5e025523f83b4c75265d6"},c("td",{key:"d64e8759703b10b7e39f6c928ae90d95e846861e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ca306bd52b8e8dfc18e204f31d7a498099817e2c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"50124b76a6125bdf45a0a547bd4e72f54deb9999"},c("ul",{key:"7f1ff4f2c69f800e4f12b299c7c4a54c827c449d"},c("li",{key:"a6d1bff2b7c74865b911b949e46146cdb6694a19"},c("span",{key:"d020f9867fecaada16a3310776fe788262bad33c"},c("ifx-icon",{key:"543e55ace901e0522151ad0b2e64977914797a3c",class:"check__icon",icon:"check16"})),c("span",{key:"fe24f1ebf794440eb852371ec5d83d2424c21672"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"08c253aacdf16b936845220fcd217b78bcf35a94"},c("span",{key:"8532f1afd318af6db6c28e19a97ef33e39ca94fc"},c("ifx-icon",{key:"b01613de68ad2735d0730518eea3881e91203995",class:"check__icon",icon:"check16"})),c("span",{key:"0b668b20276dfa13380ba6200dc618a288d3c6c9"},"Adheres to web standards")))),c("td",{key:"e1798c2b20411cc3e0b17c815be0d5c2b8bd4f2c"},c("ul",{key:"cb0dc410fd812328284e315b12982b5f967e7d90"},c("li",{key:"a42daaf37ecf64fd50cbfa84c6363347a8b38400"},c("span",{key:"551a20a3661271dfe1b4ef3662e5e4e8a02d011a"},c("ifx-icon",{key:"948302a896d093169d47af290003e0787a45d979",class:"check__icon",icon:"check16"})),c("span",{key:"b40d8d6b2ea4eea75d0ffeba8a5feed5bc620b6b"},"fullWidth feature")),c("li",{key:"1ea4390b205b5e301f69596b9495841e64e6ec11"},c("span",{key:"1bbd67ca381a88892606edbcc4c10aecac11d323"},c("ifx-icon",{key:"b5eae37a4d2ae4e543a3e363009bc258151bc185",class:"check__icon",icon:"check16"})),c("span",{key:"188cd852ed37a50d9c9656844dce24d6e7a01da4"},"Icon integration")),c("li",{key:"fb9022e2cc1e4153c9f9ec0f7836bc5672b8a40d"},c("span",{key:"5b57995a38f2f1855236737b562d0dfeb2a64d5c"},c("ifx-icon",{key:"50d16f110cc464258e5f89929080a6c17a656128",class:"check__icon",icon:"check16"})),c("span",{key:"ea48b20054173971fb403d4a317c302d1f88432e"},"Link integration")),c("li",{key:"d2859004f74ae15020bd929c77fd61214211ccf5"},c("span",{key:"61815b38b0c1fe5778e72576a201d3e1fba8fd26"},c("ifx-icon",{key:"f7d4dbab64ecd7c39557c63c553be70cae5d1886",class:"check__icon",icon:"check16"})),c("span",{key:"a3905ca0b0539c3683cbf1196cdba8638dc744c4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3f8ff8ea386ce074f1e1af25f646c8362c7ecc54"},c("ul",{key:"fd5f3d17eb8b2782b6a75665468860bc3821ee0e"},c("li",{key:"9f1e8ee498f6d6c474f755f83da8f42e02a97b7f"},c("span",{key:"ffd2a19ed5035a7734a8fe3cb0f3b6d9f5e131b8"},c("ifx-icon",{key:"63717150bc6da6984dfb86c8b80e6cbef14f765a",class:"check__icon",icon:"check16"})),c("span",{key:"bd3c7c27ce904193f35c5461f43c89ac9b664521"},"Form integration"))))),c("tr",{key:"d8b668a1d9fd828ae446b0a2bac07b43d0def322"},c("td",{key:"014fbe2fb58adb9cb847eceb1402747a455894cd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d6207ba2dedce82edaab38df10da3eb3cd226821",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"75a401c27d8db4fa33cef3171f7dda78d223cd2f"},c("ul",{key:"02c97fa64684263727d54e513a5501a4f1f80cf1"},c("li",{key:"21c64001e5c7c976a20ea22e0b1547d71c31ea1e"},c("span",{key:"d6cae0521fcb91620f8600eda5f7bd15e38e487c"},c("ifx-icon",{key:"381c72e88d1d6c61cb50224c34e23ff6480da47f",class:"check__icon",icon:"check16"})),c("span",{key:"03d152deb030c87651d54a23805f49965be1e68e"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"443a1f368da14e1c91bf16783967915d2314b407"},c("span",{key:"0af82bb56f25e5a6e87c3bfc7ddc0dd2ce59e5d3"},c("ifx-icon",{key:"dc806df7d3f0f31c7cedcdeeb0510dae55ca7617",class:"check__icon",icon:"check16"})),c("span",{key:"43fb7cedf91c099c26bfdc6e20b27d2556013a74"},"Adheres to web standards")),c("li",{key:"5bd7141e0c24c07b643c7f596359e1cf8fbb7160"},c("span",{key:"aa89d7b416060d160ab910649a3ba11870519d99"},c("ifx-icon",{key:"cedd2ce1a6dbba6cf4f38a4e01dc585c8530bdfe",class:"check__icon",icon:"check16"})),c("span",{key:"ab2160c779423ecabef625c32f454c1b18914d67"},"Horizontal and Vertical layout")))),c("td",{key:"21d2053d4395ffafd83d11ac69eb7df7e761ef30"},c("ul",{key:"4124f34070cb78e57eaf8b37d74a63846c361a73"},c("li",{key:"0bcb6be6db18905c6646bcc572070d075ce528c9"},c("span",{key:"9af0e4bfd94a15860a642a07dccb6b667a853c2e"},c("ifx-icon",{key:"22b5c4f70f0136dbd27837ec970268caae29c52e",class:"check__icon",icon:"check16"})),c("span",{key:"23628607aa7d5a7d3b47fc76b8b625672f74dfcf"},"Possibility to embed multiple buttons")),c("li",{key:"f31a9d3218445b0f2ed1f78c5783c3dbc2cee632"},c("span",{key:"42fdc8fb33377f343b32f59eda417ce7fa264b90"},c("ifx-icon",{key:"7c19e6e0608c845a52904cad1a992877bbc29881",class:"check__icon",icon:"check16"})),c("span",{key:"80f7a25c0d61e1f0d36214e35833ee266397fb7a"},"A switch between a Link and a Button")),c("li",{key:"cd0c8660dfa134b189b0beafd42b3849e89cfeca"},c("span",{key:"4c5253e0a939c4cc896278703045559d0bac2c97"},c("ifx-icon",{key:"f67188d0beccc7aa050019c9ff3d821a84bce89c",class:"check__icon",icon:"check16"})),c("span",{key:"8cbbba68cef8a6d484d0b41d50dc94f04f4577e9"},"Enhanced stylying behavior")),c("li",{key:"00843de5c4616a4754436e53421bd5999364a8b6"},c("span",{key:"bd48144655af152b22fab93184e0e04bc58de953"},c("ifx-icon",{key:"c45dc166b7a3c6df8e0b5916389c90f0c428b50d",class:"check__icon",icon:"check16"})),c("span",{key:"f373a722cb241461b73182f46e18f189bbc98c7e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8ad7254dd49bb71ce24bd2975a51b7cd799b01ae"})),c("tr",{key:"006d2ef89a7e49123361b072f5ddde73d21d28f8"},c("td",{key:"143065f4ef07448524db3ac97cc516d0aaff7753",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"babad0b2e5dfe7a1be41a69f473acfe37bdd23b4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"960fe99bd21d830c9559714c827ba559fb45af5f"},c("ul",{key:"d64f7182f8b102b263295ae563815c5cdffafccf"},c("li",{key:"df433c6da4b20116d9821b3507e2222d40457020"},c("span",{key:"d5e2be6f5e80864e93ae7b53b071f72f2aaec329"},c("ifx-icon",{key:"ecbfd649639ca09b9b4bdad948ac54404cdbc6d5",class:"check__icon",icon:"check16"})),c("span",{key:"3f568c5dd43802ea475015e3f5031866788ca039"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"40e96f7f3e8934c6f84f06105be4dd70d9dd76cd"},c("span",{key:"3734dc7933bb5eb043e24e74e35c8cd0c7a45438"},c("ifx-icon",{key:"1c4b18a92ad5a7a9fd68010bbd4dccb13e0380ea",class:"check__icon",icon:"check16"})),c("span",{key:"a731c4ede6c6f6886c6b2f80b26b98e641bca04e"},"Adheres to web standards")))),c("td",{key:"eb953f7b108e46dabe142699f523df775ee9d6d6"},c("ul",{key:"185f1cf69df61b9b927629253984389fa84bb2c0"},c("li",{key:"a7cea79e720f6cf0627dcaf8b6cfaf30be67686a"},c("span",{key:"6cd230e65f6c0e1a708527d20160198b1a1d00f2"},c("ifx-icon",{key:"b0cf26d3bfef01ed85c8523c046ddacd4ac47d2a",class:"check__icon",icon:"check16"})),c("span",{key:"bdf46d90d64e6af117445cc44b2a15ca4ee6a7b0"},"Indeterminate state variant")),c("li",{key:"e960a5ab5ad68c092607d378beedde535d2308ac"},c("span",{key:"ee12589781ecae32dea3b7b28b426cc0a5384594"},c("ifx-icon",{key:"d842ea9676853794b3223eab798c13464349367d",class:"check__icon",icon:"check16"})),c("span",{key:"fdcdacbf65cb5e5bdd68f6bb69c1138a7d413044"},"React, Vue and Angular wrapper integration")))),c("td",{key:"6404a9c05ba59dd153486ed5a5002fff097fe867"})),c("tr",{key:"97f4d5cb04534dc2a4450001b330bc7f4c597f97"},c("td",{key:"e2349a614dbecf846eda94b18ea81cbef4021a54",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cc12208196989074b87724959768a48eb528f7a1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox-group--development",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"acc0420f2bfdbe10ecb688593408f1cb5ba70594"},c("ul",{key:"b9c07fad73ae98752ccae5d0d34638c4ba6d99e5"},c("li",{key:"f0b7ecac3eda46eb317ee5cfc4bf3ddc8475094c"},c("span",{key:"63ebdf778ebc256cd00f5e26a5a69df620317cfe"},c("ifx-icon",{key:"c296a30a9d4770d7b785875b5295f8718f5f2694",class:"check__icon",icon:"check16"})),c("span",{key:"08a9f998b94df5ece8a3c05a6ad2f022dd15cd8f"},"Provides a simple and customizable interface for grouping multiple checkbox inputs")),c("li",{key:"c55f42785d749cc388ac8d458091fc96f28e0406"},c("span",{key:"bda8cc9e8cfe0e83a93ccff931169dd070bd1fd9"},c("ifx-icon",{key:"9d01b7d8a6a505c8ea74410c1c615102665e34e3",class:"check__icon",icon:"check16"})),c("span",{key:"62f5d2b6dd43757857417f83187712d07e23ece4"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"354a0139f6231cf951b1517b63a5d7850b624ca9"},c("span",{key:"d591848100be21f430990e63d83ba6fba8e4e87b"},c("ifx-icon",{key:"947ead78892854825cba2abf1c1f643699fb37fa",class:"check__icon",icon:"check16"})),c("span",{key:"23e262e9fc692482a998e8327f409533d5491db1"},"Allows to display individual or group error")),c("li",{key:"41d955077aeccec04d6753276392ee4c0a7a80a6"},c("span",{key:"390a61060dcccac5e8e5ad44e8261467e45a4294"},c("ifx-icon",{key:"47af5a995581fdc6a3a0afbd44989bf57b077781",class:"check__icon",icon:"check16"})),c("span",{key:"6761b50e1c6c19790cc35b61ed6ca51862b71021"},"React, Vue and Angular wrapper integration")),c("li",{key:"590888ad3f6ae8cd28116c471f30a99cfbe31789"},c("span",{key:"af78de773d7c26bb9773d22fc3905a865470e17f"},c("ifx-icon",{key:"28903a16c5b2f51663ccc0ee480fef349f132015",class:"check__icon",icon:"check16"})),c("span",{key:"a1eb36400e5f6858f452b5b76d744b6ac4e070b7"},"Adheres to web standards")))),c("td",{key:"3c2204e0421e1b6bf9b8bc59e169bf4e7f67f3d5"}),c("td",{key:"8063dc4ff719d45bc31f4a69d0d537e9b8b5c96a"})),c("tr",{key:"f62ef2e4b4fc17b38896330c17802ed17e125800"},c("td",{key:"e7be534e436a180e1e31e4682c4e6dda85c63c93",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c3e7fc6a8d07ee2623918803fcc8f3f697765461",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"01bad88b9937d771c557d3e74a6cc55185f8c0e1"},c("ul",{key:"a73389fcc78909c38fdc4d8177e80ef2887d926c"},c("li",{key:"c26096f9db726e98fd2edaeff8909e5d0cd375ec"},c("span",{key:"5545052bc8d5ab3610ac1fa1fb03ee7310e40022"},c("ifx-icon",{key:"4d0f61c75add47c67cf4eef1694223d7bb806d8c",class:"check__icon",icon:"check16"})),c("span",{key:"c1edbd22cca3be551267303b3859a8797c68a27d"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"80969c62f8054f4b45314218dd70b741d2c14d5f"},c("span",{key:"286a9eb6372bff40758493ed67b9c67dd8915a47"},c("ifx-icon",{key:"cc4e79905eac6385761f3972a701d4245627a39a",class:"check__icon",icon:"check16"})),c("span",{key:"43c384b79303d43133a8ee055070c24ae9946e2c"},"Adheres to web standards")))),c("td",{key:"b7f8ee1d5a53dab75acb1299cf6adb5d62e7c691"},c("ul",{key:"a9c11b44cd34715c0b1c5d1d0643ceee7ede8b95"},c("li",{key:"5efac007eb5f1db55fe6e19dbaf97c7248a21a2b"},c("span",{key:"786c759c4c411acc07486f12fb0b5596c79eac29"},c("ifx-icon",{key:"25278b1d67aaa39374fb49dbaf44d86b497aa678",class:"check__icon",icon:"check16"})),c("span",{key:"c181ff6fa4a32f617600cf356dfa7a08d3ab1c9c"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"b556d832b146892c24114de717eeeb8125aeefd3"},c("span",{key:"fbe2c4784a2824fb30d2950e19623d954826b949"},c("ifx-icon",{key:"8e330e55cbb49d8129db3cf6457c9ab34e577f08",class:"check__icon",icon:"check16"})),c("span",{key:"fd5ba17aa83a7d0473dc7e2dfd602482abff02eb"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a6a408d7ae956c0ec4e6896bd674ec9add583531"})),c("tr",{key:"6f690cde04af8a16a630ceb38f4b235b58edf1cd"},c("td",{key:"0ab24a91d163946972931ae8da379e7369e18883",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0de79a23c2413427839034df5d5083bcc487c92c",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:"7c357ee169ff30b0ad3852d700380a8fad04f71e"},c("ul",{key:"f68fcd8e4a723c14f57dc5f686d3d83674640b76"},c("li",{key:"a5e1518e58cb854ac174564d2edad70d6d10a01e"},c("span",{key:"32574a2926634a09f7844b9208b4e9ee4a6f0c2e"},c("ifx-icon",{key:"3d78acf86e199c93e5b41c748c9eea2b3552cba1",class:"check__icon",icon:"check16"})),c("span",{key:"d8f37d0b65a0c7c0a645d9ce85e55b76020c8df8"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"6b6c922c56f0df18cc0191bc9c59d602471c8678"},c("span",{key:"3deb5b14fbeefab2d22073f1578fcbd4ff0db8d8"},c("ifx-icon",{key:"72c1f362859323fdb435991064788406781c72cf",class:"check__icon",icon:"check16"})),c("span",{key:"cb47fc19873d692ee5f0037a243480fc28530387"},"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:"1570349199398ece57abf959b1327a120056b088"},c("span",{key:"e64eb40587964e83a692571f35522216ecd72aab"},c("ifx-icon",{key:"484d9cdb7ef909f8d33dddfcb50080bb9dd35ae8",class:"check__icon",icon:"check16"})),c("span",{key:"304d2a51f2e76f4766d7c88cc118a72fe5944f9d"},"Adheres to web standards")))),c("td",{key:"4e854776456a344612f4d03d58227eca08238a53"}),c("td",{key:"50ff00462f7f6e83677b99e25cb4924d619689eb"})),c("tr",{key:"d55d511156bebf0450f70baa817c47dab341fcc8"},c("td",{key:"320533190546bef9a35d3dd26ef3a637432b6031",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ec061fe5caa708d270d0ae0e9c79116ca006b186",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:"720e3fb98fef36ba1cbdbaf318bada7e07ac7112"},c("ul",{key:"5183dd2401625e3de49e58bbbe522fca252f1015"},c("li",{key:"3ae99fd1a2106f7c95086db4fffb9e7eca9462ae"},c("span",{key:"27713cca06caf7ce53e557a84837b04bd1c9a8e1"},c("ifx-icon",{key:"1f6d4c8ce810a107612ad40dcbc2a9854a3b633a",class:"check__icon",icon:"check16"})),c("span",{key:"9cc4906b8a4d6ec7ea996a069d1479d2dc3c4168"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"88176710f3c3198bc4e1e8c443d82f50db18adaf"},c("span",{key:"059d70c9d0cf4b5f37dc2cac0b27f4ee0ad78e5b"},c("ifx-icon",{key:"27f2e98cb7f0e2c995475a5176a2706599810cff",class:"check__icon",icon:"check16"})),c("span",{key:"d0cc595979c23ecd5e29e75e636a96ae71a74b9a"},"Cross browser compatibility")),c("li",{key:"50a04bf08aeca9f9100ad1ef8a9aed825ff8c3c1"},c("span",{key:"04d335c257fb8293f7b4045c6211cc1dcd4867d5"},c("ifx-icon",{key:"4c4d136fd7836b15237782e8549d121fc57f6eae",class:"check__icon",icon:"check16"})),c("span",{key:"c7a8398867c7c9e3e3fb98f4cdb4fcabb923cd13"},"Form integration")),c("li",{key:"3da0f2225b4644d504eb0fb79fca1715431a5d57"},c("span",{key:"d89b575416e4b7379f20b2a00843222253b8bca3"},c("ifx-icon",{key:"eea805a3ef86b8b5b86256e09faffd78e450bd70",class:"check__icon",icon:"check16"})),c("span",{key:"06f9d36e04ca350b827fb0cfd69ad3414761e9d5"},"Adheres to web standards")))),c("td",{key:"22197d4182c47f803e3d31a94115682da37ebc4e"},c("ul",{key:"b23e570499f4dde790f5c5835bf884aae6dcca75"},c("li",{key:"9b87a29084f511762c4db61393017831d4e1f520"},c("span",{key:"f771ed91134e47a354cb55c432ea4dd40131d23f"},c("ifx-icon",{key:"694f58fba754ffc0d671a94e6fa29f2dc5d64fc5",class:"check__icon",icon:"check16"})),c("span",{key:"0f57444f5995180653d96a9b5a130f30abbd4d65"},"Range")),c("li",{key:"0fd5ea3b976b775a8c939d90ae0f92d89e53614c"},c("span",{key:"a11db987adaefbaf32a5aa27517d9ab14b3beef5"},c("ifx-icon",{key:"5a0891100009915692a6517a180da16d3e90916b",class:"check__icon",icon:"check16"})),c("span",{key:"22293825bf33eeb58142454cb52bddf0dd8f7785"},"Default value")))),c("td",{key:"35c7273db695539617994cebd65a5cffec72b5da"},c("ul",{key:"15c685f52c2e296eea27bd19c2d3c7b4c816a678"},c("li",{key:"52f4e1a67e0e6454c1f016f09f8bb2324f716dc6"},c("span",{key:"0d3df621c3227c3e417da67a49ed37e7b8b9b4b1"},c("ifx-icon",{key:"8091dfd641477beaf1ac1e655bcc86e0a5e5f0e5",class:"check__icon",icon:"check16"})),c("span",{key:"256dcdd91ea36d5e2550196e8bceadd8a31edf8f"},"Incorporated datetime-local type"))))),c("tr",{key:"22de18d3f8b3c2cdc7dcbdf428e82309549889f3"},c("td",{key:"9e5157d6f5ec74cae30f3025a5efbf7528628470",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"290b364f5951fb8b8a7d901dea4c38c7c6f1974b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"1b6169dc5a62521483d6eca1e577399b6bdaee9d"},c("ul",{key:"1af732ad4c4090ecfbfd18398f16987e0b284708"},c("li",{key:"df98a8b50a0de134ed8a27ef852a31c65769dd73"},c("span",{key:"cd3a3dfb4937f219ec8b05e7b427a8339fa43c2d"},c("ifx-icon",{key:"b789cf2ff4c278475e6fb2fe4399b3c8d5dad5fa",class:"check__icon",icon:"check16"})),c("span",{key:"390e9cbe658c8536d89a44c8e448e310f87bf919"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"2f196f4a736f15126e695e90bb2d4a06e825e9da"},c("span",{key:"d5a488b83fed415a75adcf2b51dff76e2d7fd2df"},c("ifx-icon",{key:"714ca7f99136c39bbdd68ebb1f360e7444b2c601",class:"check__icon",icon:"check16"})),c("span",{key:"878cab9c65eca56cea90436b9b1a6fdc16dc86f2"},"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:"b7cb7fc6936aaaa98982691bc1ef4a0f37236179"},c("ul",{key:"c594188d76488c7cc5b6cb7e306f6cbf801b2cd8"},c("li",{key:"263d97b82516a07d30f2fa0e4fe7113b768fb1e9"},c("span",{key:"8c817ff9821effbf13933b0a46bcc600b087f477"},c("ifx-icon",{key:"986f3a4921f488ad1515e74a1a112d68cf1eaf6f",class:"check__icon",icon:"check16"})),c("span",{key:"44a8de4ed86d5cc4d37b43ba2a79420650db0e9e"},"Search filter")),c("li",{key:"5461de2b0c2334be56b6ccb9d5d96580eb02fb49"},c("span",{key:"7926e4fbc6eb0203c391c3479a9d7ee93cbf80e7"},c("ifx-icon",{key:"406d9a3c53f279164a7261481dfd91a3268fcbc4",class:"check__icon",icon:"check16"})),c("span",{key:"cfa465b54a158657cf912a8063c8824b0fc8e686"},"Header section")),c("li",{key:"5bb2959a756fcd49a28b56828e88ededed3925f2"},c("span",{key:"ed022d5013591a5d69ab9ddcfa9ada61764a0901"},c("ifx-icon",{key:"2b5a96a9ea1152ec7c157a6a47625c3b1358ddd2",class:"check__icon",icon:"check16"})),c("span",{key:"cd073ef6b5aa9396cc02b7cc7371a652429147c3"},"Menu Item Divider")),c("li",{key:"5248112c32382e624e99606a615aecccfa8f925e"},c("span",{key:"6a6e57bbc70c82119180bc8a5800848305ea1f0b"},c("ifx-icon",{key:"52543afcf115261ddae94165eb510818b7eca32f",class:"check__icon",icon:"check16"})),c("span",{key:"eebb6b4e2c3b63f64dd9d6255269009325af7ddf"},"Icon incorporated")),c("li",{key:"65e42f2caf56a83a4d2b284bd3ceb95602d853c0"},c("span",{key:"df32c8163ec03d406b74db71fa642586337e3716"},c("ifx-icon",{key:"cef0148c5c34f8f5b8abda9589c56b1188d64d74",class:"check__icon",icon:"check16"})),c("span",{key:"126303fb357073947e24523bb767f15b180d2792"},"Extended customization and configurations")),c("li",{key:"545abad60e0d2be8b3fe5528d7b2ec0271637325"},c("span",{key:"d69ce55ac0f71bd63979e2d7d5c7627ff664f505"},c("ifx-icon",{key:"322b787c73ed4d204ad1edc3858c8f326849f254",class:"check__icon",icon:"check16"})),c("span",{key:"ac094c5d48ad30e7d4cdb3c7cc8da658c7425016"},"Separate label trigger")),c("li",{key:"3736b9e26acb6fa9254862561932bd1ad1961f92"},c("span",{key:"fe37db32c32d8418d49bb1e2da8db5231b7ce4da"},c("ifx-icon",{key:"2c21621e37f6fc4b23eb8326c52751e52717463a",class:"check__icon",icon:"check16"})),c("span",{key:"17e0c387ba631927fbbca7abaa2e76defeb754f9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"82e5cbd256e7bd2e78527136fec87d9e2c457c87"})),c("tr",{key:"b7d15dcc67ced094bf4b224bfb1e79d0795b38fe"},c("td",{key:"43352a33da15dfbf2e2a5bc617ec6feba71b7eba",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"71a2e1c2a1e43ea04995e3718ed8235f029ae37c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-file-upload--development",size:"s",variant:"bold"},"File Upload")),c("td",{key:"6c0fda06c70a5856234fb5aa9538fdaef27c9da8"},c("ul",{key:"997c097e8716e2dd1c3f9bf475736e4bca3d5b61"},c("li",{key:"a1c7ed63dc1269b16d71623cd6ccc153a3f0ce4d"},c("span",{key:"9f943d8f493a9ed1de4b8e4bf360fdfadd5c5555"},c("ifx-icon",{key:"18a64a8956b191f5aa1429e341f2479d899358d6",class:"check__icon",icon:"check16"})),c("span",{key:"0ced4f68cfdaa9d31062813c6fea9f3f4414a073"},"Provides a clear and interactive interface for users to transfer files from their devices to a web application")),c("li",{key:"f6a3f3461b180f6e930d07132e55ad6478ef82ca"},c("span",{key:"6c3c381d60fd73fdffa8c3b6799cf350c33a1059"},c("ifx-icon",{key:"5d0e7f755468f2d640b8bbe8eebb1519671e065b",class:"check__icon",icon:"check16"})),c("span",{key:"babbc4d5117cf7811b2a8de13627fb14dd0aa87b"},"Supports manual file selection and drag-drop interactions")),c("li",{key:"f9c4650f76103a78deee5cf2f09bd4a5ba5ec62a"},c("span",{key:"c352323f00ed6e078069331c14cc22c90620cbd1"},c("ifx-icon",{key:"f25c3d92924d4ccecd903e0d138c4ff9c15da149",class:"check__icon",icon:"check16"})),c("span",{key:"4ba2353522744ade3dbc55bef4adf6be3fe228a5"},"Offers real-time feedback on upload progress and status, file type validation, and customizable upload buttons")),c("li",{key:"68b940846e016bdaee027d79268d6a2cd7a73b5f"},c("span",{key:"6a4af83ffabb6a7a0fbaef27935759e94b1ea48f"},c("ifx-icon",{key:"f39bb77fa611adcc5ae1882c929513792d38ebf2",class:"check__icon",icon:"check16"})),c("span",{key:"9aecb2b4b603acc22c3f909ab0b6d0659a75829f"},"React, Vue and Angular wrapper integration")),c("li",{key:"0ddd11f3338885266e537cfe6c646110219fc841"},c("span",{key:"995830ea40f859cc8454ba447bf0e59e7bf0868c"},c("ifx-icon",{key:"19fb94be9b59c50d0dfc42fd8f6cdda573ead643",class:"check__icon",icon:"check16"})),c("span",{key:"638b86e8057000b2bfb23a3de2edf1667890b78d"},"Adheres to web standards")))),c("td",{key:"cb43208e12a4705d9c8301b8c291f71cae2a33da"}),c("td",{key:"3492e180151b1ca0c9b1d297033a46d7f1c47493"})),c("tr",{key:"a9117c80fb06c8a14016f4eb31a05934625795cf"},c("td",{key:"d12759729b1f4ee616fd544e5f01d8dfbee64c19",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8a2f2cfca60f7690573b30b59de1b535afec9744",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"db5e086efddfd11184725e00c14a99980a6016d7"},c("ul",{key:"8d881060a7082c7e91de56b3e2ba745a125d2594"},c("li",{key:"e2328413b53402e0e68555735b3b3381e6d9a4a6"},c("span",{key:"d7a596899ef015e18726d13e06901ec91eccc7a7"},c("ifx-icon",{key:"09c3e0802727d63ff831901f0a38054cca5971e9",class:"check__icon",icon:"check16"})),c("span",{key:"910c04b79a5081e0b373e31cceeb32a75b7a9529"},"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:"48bf70cc2bb5ceebfdbca2d1ded2ab1ce2c58b7a"},c("span",{key:"a7aaa8f1b4dc06dc360366cd1ccdf132a8221085"},c("ifx-icon",{key:"3e240484438f8775beaf402e6d3e200c71da8819",class:"check__icon",icon:"check16"})),c("span",{key:"96e6fa81b9b72eda2243f84e00413d96a3474fdf"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"7a6ecb3fca436de14ce06a177f068ba7396e6e5c"},c("span",{key:"667c42421ea5d344f315e79a7c4ea3eb22069a46"},c("ifx-icon",{key:"0c383cfa05399719ab16c278033e7189e2c5a4b3",class:"check__icon",icon:"check16"})),c("span",{key:"66e9e47d408d7f8e1c54b388dbbc1c6fd57f6847"},"Adheres to web standards")))),c("td",{key:"d4566087dcc4c8998abd5fae22153a6597c16157"},c("ul",{key:"79ec88c5c0ae702791bf68f9772247121c88b928"},c("li",{key:"573b83ba2efe0db68f80a964ff848a4918dfc7a8"},c("span",{key:"73d311799d309203d07039454a96fe516d83ffd4"},c("ifx-icon",{key:"9cf3aacccc151133f85288ea3dd01054b5f62551",class:"check__icon",icon:"check16"})),c("span",{key:"f2e23d8dc679d95981fbc7b25ea797a99ffdeb99"},"Small, Medium and Large variants")),c("li",{key:"26b26b234fb6da6f55d5baf2c217e3a454cbd95a"},c("span",{key:"7a434f3455644dc4c24f81899bdcdaf863477b7c"},c("ifx-icon",{key:"a1044e6b3ab414c41fedb4d31c7eef37a0cc3d8c",class:"check__icon",icon:"check16"})),c("span",{key:"6d7f6fc7b97f2b6fd44d958f95828622f508a3cd"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b8ddd0fb4f6fef78100606c2c14192afdae34aad"},c("ul",{key:"0f473ef40355216bf54bd2e6de9eb0abd2a918a9"},c("li",{key:"61707fe02675a4389d143210891431a94b4e7101"},c("span",{key:"88322fff8e3f9f23806f4c0300519620305cda11"},c("ifx-icon",{key:"24b25e23565a4f7718b569e6f6e50b745d60700b",class:"check__icon",icon:"check16"})),c("span",{key:"7b8b6c6760899d9a6b4e1f63f7820fc784ac9578"},"Customizable and removable links"))))),c("tr",{key:"d2e4a06afd05cab92310c7c92691f5c1f1c0d708"},c("td",{key:"c6b805c3090ed32422af36592e1b01cd852f9d4d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1ff8ed3e2f0d14d9bf358ba4fc6f96b7a48b5b86",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:"5b5a0438c51ff928818785850c6542131625bdbc"},c("ul",{key:"e5c4c5698ecb2a09168024e717d1a22ae20a1702"},c("li",{key:"f4a1e51d5f21f2182ef5a1e2d4256357dcf6430b"},c("span",{key:"1a8f570db9cbaf2c74dd5849eb580210a2f97231"},c("ifx-icon",{key:"0c57be46b8cda31db1eb4b77a444c4e94570cba0",class:"check__icon",icon:"check16"})),c("span",{key:"d8e9e47e22109fe2cd6fd5ebb34ba99836e61a99"},"Offers a compact and interactive icon-based button element")),c("li",{key:"3f0886a551450e0b34a4475648ac4012d224034d"},c("span",{key:"912e1890833069236a1ede16a587a1ae254e5ab7"},c("ifx-icon",{key:"46fd18a5ff04ac82695d65d5ba8096b266d5ff6f",class:"check__icon",icon:"check16"})),c("span",{key:"fcad68c6c9394faf7c7d9d2bfaa6a783c1e191e6"},"Provides a limited scope of customization")),c("li",{key:"b22ab9470e3ed7aa6bc109ca0f98d13ce4cc646a"},c("span",{key:"ee0b9dc6175724f5077de657d3e839be3f14d6fb"},c("ifx-icon",{key:"520cc769a6da3b848b54bc6bdad0e94c74e95228",class:"check__icon",icon:"check16"})),c("span",{key:"bc694c6de51237ab97e579d35fa6c8310cb19736"},"Adheres to web standards")))),c("td",{key:"9c3d44aed163c7b7df2be097648d5f017abdd108"},c("ul",{key:"435a01b38396aeca41130c58868afa3df0b131b4"},c("li",{key:"43a79e8d7e99603ef0fea3a4c6262a62e03efda3"},c("span",{key:"2eefb405378eca738f394ea33d17ee67bec89518"},c("ifx-icon",{key:"7ebf5b336da3449e045abade04a7234585327447",class:"check__icon",icon:"check16"})),c("span",{key:"86d428a35635f529b9c56c192eb1ad68999e1a76"},"Additional Round and Square shape variants")),c("li",{key:"e996e8823103d3bdc7b316ec6fe0f7362baa9f76"},c("span",{key:"f9dbf60336cef60d043c0084b5b6f3acf4b9a8d1"},c("ifx-icon",{key:"4b6dcc074dc01e0e48654279b35013ceef2d8688",class:"check__icon",icon:"check16"})),c("span",{key:"7eea53f2c792342f520ed6e31c02c010a82768a6"},"Small, Medium and Large size")),c("li",{key:"adcae07d39be7067b12dd51ad95e1c04bba5da6a"},c("span",{key:"4541e4f9d98f09f6bed1f03071f9486318c59aa9"},c("ifx-icon",{key:"72ce89a9c90890dc7e209d1bf069673d6a337347",class:"check__icon",icon:"check16"})),c("span",{key:"b56a1983f57df7b0ef313d370de9e906e22743d1"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5104b2890352f5641e06011c0e3eaa9575e55531"})),c("tr",{key:"26d23f24cde36f1f8d7154403e7c742cbb1f57f5"},c("td",{key:"124a697e512e85e281f924db3667ff8ba7df50b2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"67d0957fd7116a8aeb572a24a13fe46941998abf",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"0ace99b93b727532609a7dbc684137a82fcac824"},c("ul",{key:"a8374859ce3cf74f1ef22a0364e064c052dff7f5"},c("li",{key:"e36bdeb37ab6b6d555743a5743cbc95caa5ee494"},c("span",{key:"108aa8f1079ac38f5ec9bc89ff620275a9912e4b"},c("ifx-icon",{key:"b1c765000b237e22a57ebe6481c5367fa4f13fb4",class:"check__icon",icon:"check16"})),c("span",{key:"c1aafa11733f64a976fc311c6687c7f83ee78be2"},"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:"db36e547306cdfc8b85340e7ff09ec4ae204859d"},c("ul",{key:"b6e3fd6ced75406adc45d052c7c37dfbb7b7b33d"},c("li",{key:"e563d0390f9fdd7c4ba0ed202907a87df433ec55"},c("span",{key:"bc64df98b4f496fe49a469705b00320492c520e4"},c("ifx-icon",{key:"250fe8f90a4cfa7cd4d72fdb817b78abc40811c6",class:"check__icon",icon:"check16"})),c("span",{key:"79c5021d85aa418198b48675beeb5b4e79401eff"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f1a9cc2add11eda426d121ef4db3e386a30f66d5"})),c("tr",{key:"825cb1a9978bddefb220def323104b544bbbe0a4"},c("td",{key:"a8df71ae441e8321b7f0e16fde7528428407948f",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b03219c5d26ed08d308a7d3dd2816e540659b036",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-indicator--development",size:"s",variant:"bold"},"Indicator")),c("td",{key:"a7ee4c9cea2f4faeb73f44e532d354b0dcbed78f"},c("ul",{key:"64354d9e5cb74a37f8d60bdcd1f949bb90abeceb"},c("li",{key:"ee6d9e6edbd07107a3cd5772f56024b8b59c4d5c"},c("span",{key:"9885295d16ec3bfdc634c10c04f0264aba70e8b0"},c("ifx-icon",{key:"772ecb5374e01690730e21050d107ef5b1ee5d73",class:"check__icon",icon:"check16"})),c("span",{key:"b0faa485e5a3e084dac27804de3cd36e3a74ccd4"},"Provides a compact and configurable display for showcasing numeric data or dot indicator")),c("li",{key:"3c409641d64e738c07563b06433792c71ce98b36"},c("span",{key:"b56f42c13521b9d74fa2dbc81913d4a5c70272ed"},c("ifx-icon",{key:"4adca0b565537d63899edf922767adb567626395",class:"check__icon",icon:"check16"})),c("span",{key:"abf8e216566cbd437b5b7d71af82fbe669001e06"},"Adheres to web standards")))),c("td",{key:"7367ddbe6404efd2a7f30d54c55cfbf4a3d48228"},c("ul",{key:"94b704d79d6f524923434a53e4195014467140e1"},c("li",{key:"0bfcce012114bee5c1065d60c3edb85754849cfc"},c("span",{key:"11138bdfd7c36675a333f650b11cec8561fd2ab3"},c("ifx-icon",{key:"75a0935b4a8ec91324afe295dcf95fc3aee2e97c",class:"check__icon",icon:"check16"})),c("span",{key:"213e9c91b151ce841c06ceddcb72451f72867803"},"Inverted option")),c("li",{key:"2dd7ba5d8dc166b267aa2c078e307cab76b5995d"},c("span",{key:"81ae02a4bcf41127b73164aabb626c94b0b0fbd2"},c("ifx-icon",{key:"ec249640379cfcb4573158c67ebc4a410e05ad15",class:"check__icon",icon:"check16"})),c("span",{key:"aa3b758fbbc20a0cc6f4efb02fd234e6b5f0b830"},"React, Vue and Angular wrapper integration")))),c("td",{key:"107db141fdb4cdbc83fe2d56eb3918d30730bb7b"})),c("tr",{key:"80459e70f46fa941914bf48083a5491b43ca0271"},c("td",{key:"7110472b8947c0aa4d369075ab1ade43191a1929",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ef3aa38c0ac577fc751ae8bb5d49f1b821d31d5e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"c975012c3de4d4aba1311569a9f37ae8f60cdbec"},c("ul",{key:"ecb57e0f629d31bd7a3e9dd74f9ce63b685777c8"},c("li",{key:"032a027bfd2c4abf0ea2d838dd6af82604376b2b"},c("span",{key:"e0b7752feb6e0d1bca5a0ffc4ac482ed82c01080"},c("ifx-icon",{key:"235fcd8a51d60cf36c242d233efb9fd6e806e5b9",class:"check__icon",icon:"check16"})),c("span",{key:"200f24282070e49078105f541c772acce5cd7967"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"8d180342d805bbf1c00777ceb6bbbfa3dcbe95ad"},c("span",{key:"dc230c74c45a3ebd80655d0e7de6c05e977d0110"},c("ifx-icon",{key:"48a535b998b3c30f77b0336a7753e8caef944564",class:"check__icon",icon:"check16"})),c("span",{key:"b4e8e3ebeef43aca7d521b4d506b414995a3c5fb"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"17829d19510dcf076010c13ad7f37e8fd4afb07a"},c("span",{key:"a5e4e9fef7ec0c812ca88b268e17eb3387e090f9"},c("ifx-icon",{key:"8e6af802775c05bce12c03c82e2f6833fc7794a9",class:"check__icon",icon:"check16"})),c("span",{key:"913601fb48e8c0688249867391f3af49618428b1"},"Adheres to web standards")))),c("td",{key:"f29e66a9eb1f9f6753a73096f04d92c485539584"},c("ul",{key:"cb3507556585fbdaef9fb43b03587494bb196494"},c("li",{key:"c1f166ef45a0552769847d0cc50b811763ff70e2"},c("span",{key:"e1b2388e90523f79284ed2b11591896ad9a5ee7f"},c("ifx-icon",{key:"91ffb944e705f1c91eba9490ee0d85dd874593a1",class:"check__icon",icon:"check16"})),c("span",{key:"063d21807b3bd35478d74b77dcfc8dbbfaa555eb"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"c90c8803e5e36780f18628f180e2c09333d87fda"},c("span",{key:"39ee24cddc381ff991ac6036b846b9feffa22eac"},c("ifx-icon",{key:"42e2ab05e65bd41f2c705ce592d3f9aad7f1601c",class:"check__icon",icon:"check16"})),c("span",{key:"58f0e198695bd08727b980667426e559456c9198"},"Icon incorporated")),c("li",{key:"17f2da096183af95c3278dd5a8a9205bd1df42bd"},c("span",{key:"0b0edd4fb54e9f3229d746ca563583ee7cbf18b2"},c("ifx-icon",{key:"475176237c84edada44bd3ac36227f11820ce0af",class:"check__icon",icon:"check16"})),c("span",{key:"3833f1522643bf4fb7ca306b36ff952e36a41c26"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f6f2ac0bc1ac067e118391b655f727fad9b57a6a"},c("ul",{key:"8ebdd3dd426ec06d84178e6c52de452f12f016af"},c("li",{key:"e3afaed2bde1c490747d88857dea29efa9ae5a71"},c("span",{key:"edf0dbb94807eb14e3bf1227272416c0bd37f782"},c("ifx-icon",{key:"e5b50bd64502132c85eaf56996b80d7d9e5a2bec",class:"check__icon",icon:"check16"})),c("span",{key:"5a79bfce0b402b81da60b8999448beccd11030e6"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"35e9626dc17776655ce2c780f42cad9f7bf8d287"},c("td",{key:"e98b59aa421f9c9647f27ae4318c907c3771f41a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f71a5a577692d61211e7224a283ae53ae82ced9a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"534fc13f3148fc45deb10bd392a74d73ca6523cf"},c("ul",{key:"09c0502d6bf8e36be08425959ad916c644195904"},c("li",{key:"eda25447999fbfe359e9159064abad085cf9307f"},c("span",{key:"85f14ab79569c3a111d33be91bad03168b8d1525"},c("ifx-icon",{key:"9c505ce4d356fbfdb934d82b04ee1ee5fa768479",class:"check__icon",icon:"check16"})),c("span",{key:"552cd5e12b002ecd7a003c3aef62a78d9dc958d1"},"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:"34cbc7b8216087fca01364b958b2a75412758a66"},c("span",{key:"0308f566e50734dbcf74f6ab2a63a3379042a4aa"},c("ifx-icon",{key:"e88e361e42e9d411612e03526e4b63887aed4b42",class:"check__icon",icon:"check16"})),c("span",{key:"a677575610e73a08302af66d3992fb41c4704a1e"},"Adheres to webstandards")))),c("td",{key:"039f3edf41943dcaf549c8fef3dcf9ed871860ca"},c("ul",{key:"a4cbc0e306685775d422b6d551c3f563e5f095c3"},c("li",{key:"3d4f3ecb9ec269c2fc1a87281613d73bcbf154ca"},c("span",{key:"408d27447b3ab31633318e3800f0fd23e30e87f9"},c("ifx-icon",{key:"6cc671ef6637c70c1f2015d9c8b069ba5b70c01a",class:"check__icon",icon:"check16"})),c("span",{key:"7548ec5945409501eab97cf69c2370c72eccdf9d"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"bf9c6bf2f6d2a2a2dd129885a7eb6eacd9ce6c42"},c("span",{key:"8af691f5a2b18805a3528eb67e6efd77765e1ce5"},c("ifx-icon",{key:"3a082c29bd80280dcc83db1ca0e902256e7431fc",class:"check__icon",icon:"check16"})),c("span",{key:"6c658db9875d8ad50c08a1bf123f3e5637fc5d8b"},"Extended customization")),c("li",{key:"e2ea2331f1c2880a0e2c352fd4b80ae4eb972968"},c("span",{key:"b18ef44d8f39977d14b1f5b6a2d72accf7871f96"},c("ifx-icon",{key:"c8cb89659537cc5380542a9673841f0a9257b7f4",class:"check__icon",icon:"check16"})),c("span",{key:"82100ca8c0969b7d4cb705f3ab7a7c01eb07b48e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d4af5d9de48e138218cb903e994f9fb417b24bc7"},c("ul",{key:"3df748dd40d17a1dfc9ab7a91ad11284d08b6d06"},c("li",{key:"c44c825607d896245fbfa358a822e839daa2d9f5"},c("span",{key:"2a7d0c121ddeb7b0ae3d469f89f049a008ca5483"},c("ifx-icon",{key:"fbc308dfa24802125bab81950d7ad2d4a1f848d1",class:"check__icon",icon:"check16"})),c("span",{key:"d29dd9bce7462cfcf483710773e6995a5e886c59"},"Removable close button"))))),c("tr",{key:"4a43676e47b43c4a03a41bff752dcbca195f5a75"},c("td",{key:"dead5ebd03add029d8b6822b7d9ae798e5e7a00c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"27ed8ca1ccda9a09824a9c7d6deb500bf267b4a3",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:"538b302bc8e480adb493419d727e159e21e6979e"},c("ul",{key:"74ffa3629f5b484dd0d4129346eddc3eb468cf86"},c("li",{key:"40ac90661ebb747397580f1ccb1d73d09e37c338"},c("span",{key:"ded924bc6c99ea8516ba3e193be97d46a2e73d23"},c("ifx-icon",{key:"74c00d6a2641d946b02298e5083cd7fba908d96e",class:"check__icon",icon:"check16"})),c("span",{key:"ad72280b4e1380859e8f5e611bb566c5881f13bb"},"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:"dd99bc51bc5c2d01beac8ce224bd1ec5ced1e45c"},c("span",{key:"8ccc60443b78e2df4ff9408da8c815ff2fecdd6b"},c("ifx-icon",{key:"de2d56954fe6b9905382aa4eda5269776791c5a8",class:"check__icon",icon:"check16"})),c("span",{key:"e5d6987fa07655fba659c0ddc24f0f51f36c7cac"},"Adheres to web stadards")))),c("td",{key:"9f2dab661dd03dd067e7ac41754f69bf8f40170c"},c("ul",{key:"4ed359657bcffc51e2a55ffca835c38ccbe8e071"},c("li",{key:"1ff9f8b2669822c2b0b8c510bbee56c619a08984"},c("span",{key:"024999d29b1d53abc1457a9b701920b55940d976"},c("ifx-icon",{key:"d9dec1147ea87eb6feb87af5785005e2b97c9041",class:"check__icon",icon:"check16"})),c("span",{key:"b47f611dc756dfc475ae19bc02f71165f552b6e1"},"Navbar-profile component")),c("li",{key:"a7c4374602deee2a05a211f12e2471fb636a29b9"},c("span",{key:"446aa52be2fdf9ae824eb0384d9985dfbdd3b05b"},c("ifx-icon",{key:"49ca868f8aadb169424e8c40700be7d895a9788f",class:"check__icon",icon:"check16"})),c("span",{key:"189a056cee820c064367f4d2f1f896be8109e492"},"Mobile Responsiveness")),c("li",{key:"33e81c81851da3a8a69d2de4e56f597468d321e6"},c("span",{key:"bbdb517945b94317c3ef78f9ed58ec5d923abda8"},c("ifx-icon",{key:"f79c344e0b38a3a7244d6a273105122755c70e48",class:"check__icon",icon:"check16"})),c("span",{key:"ff35543584f16fc7bcce1fec4b87d5c3cb788a03"},"Mobile Sidebar")),c("li",{key:"0aacd3fe0e16f6e69581f1570694cbd6c74be45d"},c("span",{key:"2cdc4eed8048f1f2898d151a818ec32b15739b94"},c("ifx-icon",{key:"4273a6cf07353ffe3e76b080b31f21d66d3b10f5",class:"check__icon",icon:"check16"})),c("span",{key:"2591b731c643f1237a0586befb680d381b6654eb"},"Extended customization")),c("li",{key:"ac58a2e66eac039cfbc19741108a2828376cad54"},c("span",{key:"3c17b0b2bcfefed28fb84c79f3ba30089e928699"},c("ifx-icon",{key:"401d56bb69b9f0bf6486b593a171d35fa323ff0f",class:"check__icon",icon:"check16"})),c("span",{key:"a83aede0b89db58c536e75f8f085317088524b54"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c15cdf058a50f17195ebffb5a4f872ec98592230"})),c("tr",{key:"16fc8390d705348a08f028a8c33bde0ccbcc1572"},c("td",{key:"bbeb1fe205683e46ffffab48c291f0f560ba57da",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"13100d080cf8383c4427ba3e678437a940a7af32",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"08f4bb670054a187e35e54833b04031f6bd49fcf"},c("ul",{key:"ca1de3027d3b935bd9d91ee2e87bd1ab86d599db"},c("li",{key:"3965644bf624e78f139e4f2f7da11901345cc89d"},c("span",{key:"7e4566ec8b95662d764b6c88c2642febb86c7f19"},c("ifx-icon",{key:"76c84a26b2f28155ba77081cf92b750934bd854e",class:"check__icon",icon:"check16"})),c("span",{key:"9df0ae036b06aaec26251f0d8a14fec4bf34dc66"},"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:"c304e8ddcb487ec66a8e028eedaf8fe55fc78769"},c("span",{key:"bbdb37c6503cf529fa56babf49b9bb0912d245e2"},c("ifx-icon",{key:"f4b3d8385027e634e9ce343a11f47090d05ad5f8",class:"check__icon",icon:"check16"})),c("span",{key:"df19a03d53110191fd9f00304c3cfc9c11e023a6"},"Adheres to web standards")))),c("td",{key:"5675fadc9be00abae87f4726740e05074d1c9302"}),c("td",{key:"aaf7b6fef2b915f8dd7c9d2e6799da525880ca16"})),c("tr",{key:"3aaaee1d34601f3bf63525af727333985fbc2a4a"},c("td",{key:"9d6f014d593d41293fada3208c775f5a746d71dd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"098d7b916dff3e72749a21dfebcbb9188e6584ab",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"174cf4cccb8023ce12244ed19fb634451c156455"},c("ul",{key:"f3633036ce29846198081d27d7810b87926e85c9"},c("li",{key:"d9ceb0098903745bb551b7e6813c546d8d9a9a71"},c("span",{key:"faf30a974b40781d92ec0ceea113e7b24434a019"},c("ifx-icon",{key:"df0e821230bf00a916da747cac4cba5d16c66759",class:"check__icon",icon:"check16"})),c("span",{key:"12fec05bacc5798ecdbc55df13e1e68f02010819"},"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:"cebc7bcea4b54f327c78d017a7188450cf669b54"},c("span",{key:"28e5cbbe19a90b7c68d3e46b202685784d61ea31"},c("ifx-icon",{key:"397c419c49d2531729380ccdfeb0029ed51900f0",class:"check__icon",icon:"check16"})),c("span",{key:"50d9a125645796d3337469375486a16f4fda0c2d"},"Adheres to web standards")))),c("td",{key:"9497ff214fc68d4bf416bc9abe25792a5b5fef33"},c("ul",{key:"6671c22c069f9a5be6580ae1e826be774d35a6b5"},c("li",{key:"42d436c2eb04aa11c61367a3120a6db242415c09"},c("span",{key:"78fae521c0afc410c15a226d6fc1e32518909e22"},c("ifx-icon",{key:"c2b1b024eb18606d77458130b060579423fed2b2",class:"check__icon",icon:"check16"})),c("span",{key:"41ee10078b768a2d8955c78ae9fca1c6be31ecb2"},"Extended customization")),c("li",{key:"516c63b3560769d8ee66f668df34f78afae194a6"},c("span",{key:"c605d03a59a50ad7302fcc7029f75762089ef026"},c("ifx-icon",{key:"b9d30e127a5191a5d869d3572bc3e6a335160588",class:"check__icon",icon:"check16"})),c("span",{key:"5beba430aac041c673ba8ee417f654efcf705622"},"Configurable Results Per Page option")),c("li",{key:"ca8eaefac90a460246e86fedc6a82fdc4896d06b"},c("span",{key:"17b5951a7c9557b28176d12cd2199818e610215f"},c("ifx-icon",{key:"e651575b6f012645e1de6fbe74903bc7f507646d",class:"check__icon",icon:"check16"})),c("span",{key:"0bf93e284f00f517f1303fe2e4cec254e768f967"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d4b6504ea06dcb1e677bf72117677e43e74f2a4f"})),c("tr",{key:"e7674da5f9ab5876b54e015486d33c3069f6ef0e"},c("td",{key:"c5ab89e5891723b4a73fe7cb424577b2b24e3169",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d3acb34281641a37bf5aefb5ee348673dd3b968a",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:"39a9805c05c5e3e970ac7c98a21ff0c43b139161"},c("ul",{key:"77a97b589177d2100f4a0967a03c73d3c914f42d"},c("li",{key:"d912b141869f46bbd27b476d6ff79f417ceaacf5"},c("span",{key:"029703d7619ded624f443c44bd69e818b49e4a0b"},c("ifx-icon",{key:"185f8bc494e9de3dc2f3c884503d5be11eb7e744",class:"check__icon",icon:"check16"})),c("span",{key:"85836b665e44cded20313cd2ddcad256c49c3db0"},"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:"906f34ede92ad6badf1837e91316955d3a66bd5b"},c("span",{key:"20c3679982be16d7d78868a772acadfc19cc4fc2"},c("ifx-icon",{key:"cce2972b29962c3d000d9ee7e1a38c0490b60b14",class:"check__icon",icon:"check16"})),c("span",{key:"19da513700445a49a2f945ba9f84bbe3a077a9e6"},"Adheres to web standards")))),c("td",{key:"f66d8ffcd15840a6629e5194be747d2e6f770d3a"},c("ul",{key:"08b07cee36f5704bf907b22a2ef35f8fe9ddac90"},c("li",{key:"0fcda8d5dc12806f46f6e753e02a4a00f8672c79"},c("span",{key:"b48011965d036a1744c1010fe5cc66e0329e7f71"},c("ifx-icon",{key:"d17eb0c8bf9140b502dbe53950bea4f7167c8ee5",class:"check__icon",icon:"check16"})),c("span",{key:"a421864eaee51f9224b4b47132b983d23fd00aa0"},"Extended customization")),c("li",{key:"1c04cef50287613c507d127c643efbe401729097"},c("span",{key:"408d42c121c49960b25403543ac141efad7eabee"},c("ifx-icon",{key:"ff2df95fb12751e4e63477622127e6c1a96a7098",class:"check__icon",icon:"check16"})),c("span",{key:"bf0de0bab8c914f496939509b62c936a66b39c8f"},"Show percentage option")),c("li",{key:"f7d9f21bc794722f31034584f2c3ca487ebfc440"},c("span",{key:"abe2fb6a8b3e0160e03aaee0397bb16c5e32a443"},c("ifx-icon",{key:"683d1cc172a9ec819f19f4734613b733f645f977",class:"check__icon",icon:"check16"})),c("span",{key:"728fb453b224f8f0680ac0cb4ed66e50b66a3d85"},"Small and With Label variants included")),c("li",{key:"06d546d79de6b7237a6cb6539ef1efc4da9a26fe"},c("span",{key:"4e0372ce27c86495cad70c989c81e56930f25ed1"},c("ifx-icon",{key:"a8f0c40399d3ab85d6a381482da792052d08c8f6",class:"check__icon",icon:"check16"})),c("span",{key:"63c4215edbda1ac7c239de130d046ecbbb3a90d4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8e4046d758e0e0183f4614366147ead58d8e5c7b"})),c("tr",{key:"3dff3928ae52b404c4348a2b66119336628ddcb6"},c("td",{key:"37a79c4c483353b6c90db214bf69479befdd5275",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"91d3814085dab1b0a9fdff9e8291cc064e10aafe",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:"01998ad05aa38542fe1c9c3bb5823fab565b4b64"},c("ul",{key:"46239e4910c5c071486b127717e3e05d9a40c963"},c("li",{key:"906712f315709f4adddea3cd108e16a41c126ff5"},c("span",{key:"03b8db963cd62a0c1c8de06372540f2580e42933"},c("ifx-icon",{key:"133494e2e6bd5677c3842e7314c32f15559ed111",class:"check__icon",icon:"check16"})),c("span",{key:"3f7fe238e7ba175cb7f4a2a5af8466a0fd51929e"},"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:"13b29e4736d40eab4255e74a8136ac94d2b72c97"},c("span",{key:"657340fd5b910d9ceca4561d6be395d80c672642"},c("ifx-icon",{key:"2c8abfb4bbe381975b6983d58f4dbed8784d0085",class:"check__icon",icon:"check16"})),c("span",{key:"8f2a23b8802976c059d874da60a8de25a8b490a7"},"Adheres to web standards")))),c("td",{key:"3b7d8df928a06f6743fcafda80d3045b42ee77c2"},c("ul",{key:"b36d84fa1463ca5c7bea67ef9f2b7415f4bc4e7f"},c("li",{key:"ee7d13252783c26bb55223b5a4782371cedbbd3b"},c("span",{key:"795d385248f4e95afb056387103dece4dd33ff66"},c("ifx-icon",{key:"c3ab7b2f066ffe21969b0080bd206b991d483311",class:"check__icon",icon:"check16"})),c("span",{key:"8ecaf961fcda183d66b6b181ed9e5611e98cc51f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b00d7a22afe4133b17e915ea3a32c7f9f3f30747"})),c("tr",{key:"d8ecc887d6e65da2fb81b11c10985f938c278165"},c("td",{key:"cecd750bbe39f2a99bad85805b56362601f02c66",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"15da7b7baeaa1247e8b26664dd6c8a54128ffedc",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button-group--development",size:"s",variant:"bold"},"Radio Button Group")),c("td",{key:"0d5192cc385bc454ef1e44f70714d852234edf73"},c("ul",{key:"a4319f642d377715171bf218385583bf24aedb19"},c("li",{key:"ff129207c7fd755b2b0fd1566ff6003b1aef23f1"},c("span",{key:"b76fc06cea5696a52ffc0a1aa3ec611ab574f38e"},c("ifx-icon",{key:"4c786b066ce4d5dae563b71108436ce00ad27f06",class:"check__icon",icon:"check16"})),c("span",{key:"a20e49cd90197b648ed6a11c611d3ff7b80c1e5b"},"Provides a customizable interface for grouping multiple radio-button inputs")),c("li",{key:"faf287b2624dc5140077850e2550694c27bdab9f"},c("span",{key:"a03e26118c3dc3091fb4f2d84f763683d8c2e3c3"},c("ifx-icon",{key:"801ac4e9bbdae97c34673f231d62e2495c85668e",class:"check__icon",icon:"check16"})),c("span",{key:"a38fd355f73789f3b6d0c7a5c1f2076bbf7e46e9"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"8e1fa5ab1928b092a018ece4b54b8c3f37c0a6cc"},c("span",{key:"d09ac30a367b00193996c7176b34454b87e9e6f9"},c("ifx-icon",{key:"47882149ccea60230198b1dd51bc926e5c2bcdcc",class:"check__icon",icon:"check16"})),c("span",{key:"8facb54a911fbc003784856bca45143382094528"},"Allows to display individual or group error")),c("li",{key:"8a3a306756616a1de76b232739d940fddb42371a"},c("span",{key:"7739d302ed9887840c245ee0341b87c3f86e7165"},c("ifx-icon",{key:"f69f38ac7d727a4c3ee6934a9285aec2d1826b0a",class:"check__icon",icon:"check16"})),c("span",{key:"9bbc7a6ca7344fc43ac4e9c1cadc0ae304761ffa"},"React, Vue and Angular wrapper integration")),c("li",{key:"ea51b085305efa90ca85521b8b35150e0fe6414f"},c("span",{key:"7c08f7541254c5dd702d706259d0f340b998eb99"},c("ifx-icon",{key:"a81ccc3c9b1c4116ac124a766fbd91a737afa291",class:"check__icon",icon:"check16"})),c("span",{key:"94b1477e9cf343b29ea691ac6b48a5330d86e769"},"Adheres to web standards")))),c("td",{key:"a97d5db68a18bb79d088dbb0ae40b5912f47c246"}),c("td",{key:"4fb59f3ea447bbbc5033fcf73a84f4d2274adcc9"})),c("tr",{key:"0ee05dd89b669f81c560a6be3049a6d58a9aea8e"},c("td",{key:"8361c280b87d44e2a6c2e45c7cea570276b547f0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"47010b4f57eb1f12a3b49d236b1adbe8e530a0ff",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:"dbc25580adc2d904c3bcd15b1ca6e827f98ad887"},c("ul",{key:"d94254dc85cb25737ef61b0f052fe4690d0d1c1b"},c("li",{key:"0662711f7c65119160864abf78d5909479da773c"},c("span",{key:"c03baa942f8caaaa72fe204a675c8e114a42530e"},c("ifx-icon",{key:"47b7359b619229bf1af622208ed63607b3619bde",class:"check__icon",icon:"check16"})),c("span",{key:"a07ceed65f2814c8e393e9d6f5428581c5803e3d"},"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:"a876c5cf563f584c8129355738b13c4b428d2a15"},c("span",{key:"169138a5ccfce922816659ee2ccec65de06262cd"},c("ifx-icon",{key:"e416f6eaa40ad5873e9fa591f23b747a767ad927",class:"check__icon",icon:"check16"})),c("span",{key:"3b4257976c0c53b481a970d2d7463d10532c234e"},"Adheres to web standards")))),c("td",{key:"adf0fa204b52c894e3bb5b021cf13ff4196ce294"},c("ul",{key:"67a06f91b8443bb02714c3f152789e944ee4da2e"},c("li",{key:"1c4772537aa11b9bdcf7aae0128375a476287d74"},c("span",{key:"1c1634077dd2c12425d53abbb3c943f46e138448"},c("ifx-icon",{key:"7a490e23f36771d4abaf4d64f19732a47fc4fc61",class:"check__icon",icon:"check16"})),c("span",{key:"67bd114956621a87722e26ab7ac1d04ebd8aaaa7"},"Collapsable option")),c("li",{key:"d55ab4646dd39eaabe58a6631e384b911576d402"},c("span",{key:"6b9bbb170e7ddb883578a7c7ed9cac16265a6b84"},c("ifx-icon",{key:"e2c012501124ff2d4c5bb2c6eeaacb1612bb2fc5",class:"check__icon",icon:"check16"})),c("span",{key:"43813ddb5bdd7904b0b4f294a943c1453f79426f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8c4cf80f3eb6050c080eafd457bddefa9a26e8e0"})),c("tr",{key:"ee7aaf6fe846246eef6e1661a796780f7c507b58"},c("td",{key:"3c33aeed5c2fe323038f11896a3ef202bb52cb4c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"62b135e12f2515ca0facdc4a437c5c9bc7cb13d3",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:"faecaaa8dd2b3bfd16cf2c18807d290b4bb6c751"},c("ul",{key:"ef7a205a66f0ddc599d92a284ea3924e2c800109"},c("li",{key:"79c157dbb4d057ad3cd6224b02a076e27df319f1"},c("span",{key:"dd9636436decbe2342e8fb400eb8a29ca77c3a36"},c("ifx-icon",{key:"39e40d587f094e08db391e3aa9bdecd97b5e5532",class:"check__icon",icon:"check16"})),c("span",{key:"94ad84286fe9fa63477969561d9927a7b9093cb6"},"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:"af770756dd4e2b423fedda3f3547535c02745a89"},c("span",{key:"348fa57e13119e5a25791eed3199e73ea8abc20b"},c("ifx-icon",{key:"ba6a9109084574e407bc5b893711a9ea419f90e4",class:"check__icon",icon:"check16"})),c("span",{key:"36ea220aa402785efbac4a672867f41f4315548c"},"Adheres to web standards")))),c("td",{key:"3e37a10c8cf32a32ad6bbfaf07d73b117d36e57d"},c("ul",{key:"2639a1efd573350c593fe3834b0648990af021ae"},c("li",{key:"110466b62f9deb064e722d35e14b3c42a7d2daf7"},c("span",{key:"8dc91ab12d83f567afaaf8f767f4b8310484cacc"},c("ifx-icon",{key:"156c50ab0685442abc4d42d50db46d7eb173bad0",class:"check__icon",icon:"check16"})),c("span",{key:"71fbf7ba6d0ed5bbc63d39abddd5c54e43c50d4b"},"Show Delete Icon option")),c("li",{key:"9b21d2c3f0d392b8205c1599054249df37ae9b9d"},c("span",{key:"6e00dde5dcccf65c326c77eb978983a08742d26d"},c("ifx-icon",{key:"0d80af0ba4539daab13ed773decbc330fcd0585b",class:"check__icon",icon:"check16"})),c("span",{key:"054c16a2ab1d4a2b973620ecae026cc3e1811ae9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"33d5e80db5bd13280142170f256b5eab5a7c2703"},c("ul",{key:"415b1b6069dffa563d655ed42985ffd03b5cc598"},c("li",{key:"718a748a1e9fd31e7e1783a290d999fc9717c2e8"},c("span",{key:"23287ae495c69a66376564f22f85f7d27d238642"},c("ifx-icon",{key:"b6d20f33d78300d6f08b2ecffd3a0925660243fe",class:"check__icon",icon:"check16"})),c("span",{key:"a6adf2ef89a2a8a22e9d11c02d488ad0bf16aa5f"},"Offers search suggestions and history"))))),c("tr",{key:"590395803832f86ae1757dab19d80d5d0f3f3cb9"},c("td",{key:"bdb874b45ec08c5ecb5d2d18c0127d4207a40c99",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a70395c71256ba038ef4538f42f0c4102d9a91ee",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:"31917d993a6f2e09e33cc93625a6adfda2a95f35"},c("ul",{key:"9d2dcc6c42ad6eb35e7229e632f97152907d9c07"},c("li",{key:"25c7682b30858fda399dc51b06af8897616b8b56"},c("span",{key:"bff0c8d3b449eee4863ceb113f2f2dd10ce1fc16"},c("ifx-icon",{key:"8791e3da8f99817f490261405a38cd7c35d5788e",class:"check__icon",icon:"check16"})),c("span",{key:"9da5a52eea40796c1bf885c80d84224d55e0417b"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"b739b9f4ff60ea2653daeb527550ecba4a567a18"},c("span",{key:"b89a264b415efb9bd1da02b54920cfd1973b4060"},c("ifx-icon",{key:"749805f07c4e12e50d6b8d812a30222f7d5d9aa7",class:"check__icon",icon:"check16"})),c("span",{key:"4871497500606d9bd52b29a696327a213693a691"},"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:"1a78753f0c4b420025987165e73d88b7fb820e2a"},c("span",{key:"0a8aecfd6f2600834f3e80ffd807462f644b4f47"},c("ifx-icon",{key:"8909fc98486bd7e15f3ab29a4562b2a9920b2224",class:"check__icon",icon:"check16"})),c("span",{key:"ab46bf532e553d1cdfb1e5bb3c572a8d638a6811"},"Adheres to web standards")))),c("td",{key:"337de45e68da07c50c0c1db5ca5ab02bb34f1db8"}),c("td",{key:"683eee5cd554b1012e4320c935d36dfed8b36f89"})),c("tr",{key:"83881b95f41978eb0d868f2bb4ce6fcec307ced4"},c("td",{key:"9b998d3522ffce3ce049f34a164e69814dd0eb6b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"36c0e973168580f7a2741dc7e79711d2c1a827ec",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:"fc587dd3a763a8d99a43f2e84d7d14d77aa8b990"},c("ul",{key:"5ce23257afe2bd3125ffc61092721f443296856c"},c("li",{key:"ef25ca49c9e5425f9658a45a8a67cff937cba6a4"},c("span",{key:"1f9c669f048cdd2a17677a72f7fca448f799b03f"},c("ifx-icon",{key:"2d9403abb98e3f714f0cd1ce050744e780282f37",class:"check__icon",icon:"check16"})),c("span",{key:"cd9d191ae367aef35878c688769f41fd9432bd5f"},"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:"f0483a96505a24de9f05de8303e0d85812203694"},c("ul",{key:"ec203a763bca4e57487a9f89710cde84b8a8293c"},c("li",{key:"c747cda7eab9cafeb60ce3bf4c61661ca5e6e553"},c("span",{key:"cb9d2e8b749240622a8e093d10e28e25e33dab84"},c("ifx-icon",{key:"a2cbbfc9b0375a63b383df5c61598fb867524bfd",class:"check__icon",icon:"check16"})),c("span",{key:"8fe9cacdf5cedca3bc77bb844603805a3b17d835"},"Extended customization")),c("li",{key:"38e09c062a6313d75dccb1d20e71336b863ccdf2"},c("span",{key:"e83437345a81a3b8f5aa1ce62392e0e8aa1de24a"},c("ifx-icon",{key:"92684f97a8164ad9849ab1752f00c5fa32036b9c",class:"check__icon",icon:"check16"})),c("span",{key:"392fd200a50bc0e2ef223ccbd59062722c00913c"},"Option to enable and disable the search")),c("li",{key:"d9f6554dab300386bd936314169ffa0bb9dedf74"},c("span",{key:"0abec82b9cabca27836f03e15c5c43ab2d62f93b"},c("ifx-icon",{key:"e4a2a1797dda21c07936b9447e2e75b1ee2f3a9c",class:"check__icon",icon:"check16"})),c("span",{key:"a88816170701a9fc297e1102978aff4f416a7d72"},"React, Vue and Angular wrapper integration")))),c("td",{key:"02b48d54a4dd32177cf496cb92df5bef20bb1ffe"})),c("tr",{key:"f50bb6bb13c62dd67cd13387cc6841f39a541da1"},c("td",{key:"ec6a0d502fa61cd2299263a9bbca787fe20bc00d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d88077f425af93159e00e7b01ae73d8246c1ffac",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:"3295e47084dbc4cb254bc0a08650657163a3bc06"},c("ul",{key:"f6c1460c7510690c2eb6ed1067c3af406ba8a57b"},c("li",{key:"4b271483ebf74a16e50d5270598f9950bffac5ae"},c("span",{key:"15976e2bf17a70e2fe9f77adb6b5538b39aaebd4"},c("ifx-icon",{key:"10928eda04eaaa989f34de9beefe94a54a831139",class:"check__icon",icon:"check16"})),c("span",{key:"7083f5040638ac7b0888b9ac91c8edfd06b9b52c"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"223253681eac583bdeb8fd19b37a270a777c887c"},c("span",{key:"68653e7d2bc94ee92629cae8ece8f3292bfb064a"},c("ifx-icon",{key:"5a7c930cfe1fde8ce5a05e11f2a1b14239689a3c",class:"check__icon",icon:"check16"})),c("span",{key:"b2d5a5fad222bfd1ebee3109f80796bf867f4ac6"},"Adheres to web standards")))),c("td",{key:"757e65c65c6c9b2892bf0fd40d3a17525a70fc12"},c("ul",{key:"e18302f20addbd55d459c251993738802e7bfc60"},c("li",{key:"4d9d9d816654277f943a39a3b934e7384eb55bae"},c("span",{key:"b599ae0f4df59b7058dedd274a4f5f7f8dca917f"},c("ifx-icon",{key:"39148e0047a41fcf761c304f92755dedc300cf50",class:"check__icon",icon:"check16"})),c("span",{key:"93d447414ced948118cf1eee58d3e51aba7209e3"},"Extended customization")),c("li",{key:"0ec00959629ebd53b2a64506e140bab41a69a1f1"},c("span",{key:"d5ffc411f3026a8ff21d4a4613fb181898ad889b"},c("ifx-icon",{key:"5ad7e8cafcb2c405dd589cb998ce33dff5f759eb",class:"check__icon",icon:"check16"})),c("span",{key:"b6dfd803a9547a04cb3c98330c7d56a5ccef55f4"},"Nestable options")),c("li",{key:"7731a87fe907639dc21dffb1b9c52cd922f8f182"},c("span",{key:"1f3a9e60d83e705d48dd18afe4905323e115ee07"},c("ifx-icon",{key:"c3f7fd25562e92ca618c4eee74774bc13db4a050",class:"check__icon",icon:"check16"})),c("span",{key:"3580d03ec5fd854a1719a548624b3f25ad681d48"},"React, Vue and Angular wrapper integration")))),c("td",{key:"42deb82e6633980b8f0c42a28df31c261eadb33c"},c("ul",{key:"d450e3dbe89c055ff9c97054a7a716617c8a1480"},c("li",{key:"5c908f8a062fbbf1f1ad77ede39b86a234aab0eb"},c("span",{key:"514b2f6157b60e783fb4cf1248502749e5da2195"},c("ifx-icon",{key:"0a1632dd811e90c13095bae94772845bcbbc96bf",class:"check__icon",icon:"check16"})),c("span",{key:"809262c1afbb0513e6e3d5603e9af3d042cb345e"},"Option to enable and disable the search"))))),c("tr",{key:"06a96300b7ff2afc62566ec72a755e2d6903fc79"},c("td",{key:"7eac9ec63a7f46b6022900172e9303013906b43a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d9be5052c8ccad7195d231529f178e3530804f3d",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:"9d48e182a491fff119a8c8301b5ac58d444d5bdf"},c("ul",{key:"6632cecde919d0e9d26957116c197e03b84e8ffc"},c("li",{key:"8aa4124d80bad327e7cbb14ee070dee4aa4eae4a"},c("span",{key:"0276c80b293d4f015ea86b7dc64caabf9fceeb1e"},c("ifx-icon",{key:"f4d41db785e00127ce283b9ab4de9162c6534111",class:"check__icon",icon:"check16"})),c("span",{key:"15b597269c821d1bab97762ab78e5c4c6c99de46"},"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:"db23ee2b8c2463533a137c52d07db6a830a91ac7"},c("span",{key:"0a46697d6ef71319f8e5cc1634aba0fbb2fda6aa"},c("ifx-icon",{key:"327cee45d902b70c811171f3b619b58aafdd3439",class:"check__icon",icon:"check16"})),c("span",{key:"055a2d6502d9e54cb747ee842bbe1c7e8a70eee6"},"Adheres to web standards")))),c("td",{key:"2864c5e82f67a698f57cc4e1ed905cb89f0f3605"},c("ul",{key:"cde00db301a8058e7bcf098cc4aee64d8b1a2e78"},c("li",{key:"bce62bb55ee1ffdf44bbd59ffc4bbc4ae00ca67d"},c("span",{key:"1da579f2a54c0710224ffe6dd5ae8d5138ee2bc3"},c("ifx-icon",{key:"8e3bbd280e98d51d0646096bcf6c03bda027dc5d",class:"check__icon",icon:"check16"})),c("span",{key:"ab5c97bb234f6df04af489e0e09616879e34af90"},"Extended customization")),c("li",{key:"a3ded37cb29747a281a3c16bf4d91c7c8326787d"},c("span",{key:"e99873d485a8a30c8a8c23abe89bf79c9a96d146"},c("ifx-icon",{key:"607e8a80ec0fad7fa135af7e51275f1689e1bb1c",class:"check__icon",icon:"check16"})),c("span",{key:"4e99f8462cfb058aba7563069fac4c1dbba978a0"},"Multi-layer nestable items and menu")),c("li",{key:"d603c7b5b973b356658cdc477fd446427368a0e6"},c("span",{key:"dd3d5322cb62601468a7b0094f6a4a236e3f4684"},c("ifx-icon",{key:"ca0227a563be0dd1a274444aa08e07bf3a3e0606",class:"check__icon",icon:"check16"})),c("span",{key:"0834a67396c2556de678b7ef43b08869465a2b0c"},"Initial collapse option")),c("li",{key:"5f22d2e6bbfc6f1e83c096230e9177f69553aac3"},c("span",{key:"6c9d25f91cb5312aab89525c72bb0f4059054f62"},c("ifx-icon",{key:"22481c60322cb302f36dc4c190d7b263218191ca",class:"check__icon",icon:"check16"})),c("span",{key:"ea51918f08c28653f477e77e7b71e3f7f8eb5c6e"},"Active and action item feature")),c("li",{key:"5a97e2a0db52e19e19deff02a457a609903a0805"},c("span",{key:"993111a9a9680b2052dddf112a82b5024dbfca8a"},c("ifx-icon",{key:"78afe0f6e1c2f0d043344be5ae76449dae9fd2ea",class:"check__icon",icon:"check16"})),c("span",{key:"541c75d5032744a93910b0011113ec49eb895797"},"Number indicator integration")),c("li",{key:"d91d45a42593e2df574548c6f7b12c40747a4e46"},c("span",{key:"21345286f4b95eedf25326d0a0af03b29edb208f"},c("ifx-icon",{key:"ffcc2bccbc869aca77fc6990e571fc3fa7f5bdcd",class:"check__icon",icon:"check16"})),c("span",{key:"d85fbec62727b522434c6e0c796d9b40038f71b0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3aeb65aed2eeae1ba8916083c1a44ddfefd25b31"},c("ul",{key:"3961466332eb1024933dc3301a8606635688d462"},c("li",{key:"3278b7d057de76dc4861d075d3fdaf66dbf84d9d"},c("span",{key:"63198cca0fe07c7979d7401d9005bece2155b701"},c("ifx-icon",{key:"182d644f8f8b7a3fc817d2a39d9370582ca87ccd",class:"check__icon",icon:"check16"})),c("span",{key:"62f058a9c5898b6ff621e621462c579610d158c5"},"Removable Footer, Header and Logo")),c("li",{key:"5389f4ae77d71a88cc1f2be18c38728715d3819d"},c("span",{key:"06a0c16d9b6053583803319e0c1b76dc0151ecf8"},c("ifx-icon",{key:"6a334915bae91f214902a4d3fa0930496ccf6274",class:"check__icon",icon:"check16"})),c("span",{key:"3175a7cce19b9da415f56c71137bb2ae70b507b7"},"Removable and customizable Links"))))),c("tr",{key:"65ac3ef8030ca43ac23c52827d38d953a91c03ed"},c("td",{key:"0d032501178a0fde13cb156816fecb6f21499620",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a909015780291cc5616a3966ff92ea8132c431cb",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"491681647842cd89b8dc978a1a3a51d819117bed"},c("ul",{key:"acfdfe1b953c4838a45067db99bea1acd0b25968"},c("li",{key:"9cf342058854a70791487396428822fab67fb5f7"},c("span",{key:"4c352f73b4e8f71fd546c1074d3183c7edfc5d0b"},c("ifx-icon",{key:"b0e664ff6b2444dbcfdfe8e34d0144758e16dce8",class:"check__icon",icon:"check16"})),c("span",{key:"7b2dd9441ff8bf0d63720fb9c0cae5cf9f0acf73"},"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:"fb28dc451177189eeaed8d8097b441f67ecd6363"},c("span",{key:"a76798bc09e5710a36d57cd23122e0788bdd3375"},c("ifx-icon",{key:"96b6a30cd8e5223f69e27ee3d824d28ff7d0f75a",class:"check__icon",icon:"check16"})),c("span",{key:"cafa1d6dd2ff36fcd9e5e1d89c6e69215a7b381f"},"Adheres to web standards")))),c("td",{key:"b629da621e95acdcdff6a43cd79cba0c5151956e"},c("ul",{key:"b6b9ed67d5d234efae267caba5d61a415748db03"},c("li",{key:"0963902cb632c40ecfb4dddfe560015cc7845b06"},c("span",{key:"af00ec05317d3032bfe849582d0443c40ff61553"},c("ifx-icon",{key:"9adbda136895e6e7a0133c174d13dd32aa14a35f",class:"check__icon",icon:"check16"})),c("span",{key:"1a90e5d9b11ed75ef5ca5a9b41c15df6d0fdc73a"},"Icon incorporated")),c("li",{key:"108df846749bbb66a78d7f70d9351a0000e7e8ef"},c("span",{key:"77ab5a9d3dac3ed7cf92dfcfd875f33f8c8360ff"},c("ifx-icon",{key:"8d7f64684f636e437627791b430b6a99a88a80aa",class:"check__icon",icon:"check16"})),c("span",{key:"5f88a17bde3d834c6319d9f39e1ef1a5c16c21fe"},"Percentage variant")),c("li",{key:"e90e2726acfb6b56f36aa5f0b8ee3db64f3aeca9"},c("span",{key:"9cfec378e3c730cef0a52d8e9d3350bf292d0a17"},c("ifx-icon",{key:"12d95ccea6cf153a724027fb3905a91941af911d",class:"check__icon",icon:"check16"})),c("span",{key:"e3001d90e8d18632a7fb6a98339d40374b69474c"},"Text variant")),c("li",{key:"9b7d8e10d6ee1e648bc1675b2b240bc92b1430bd"},c("span",{key:"1e16c5793a2a0a92f8f26fcec75bdde9fc7cbf4a"},c("ifx-icon",{key:"52bdc905e369d5e33e6e1e0059fac7f0fe5dc01e",class:"check__icon",icon:"check16"})),c("span",{key:"6a3cb4269ff760c44db22f4f5d5c09f0de24e2f0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b945a15832ef0a7c6ca014741d8d848ec7a76ce7"})),c("tr",{key:"f5216ec8b872d05892b6aa4e6d6072dd95f91cdb"},c("td",{key:"516d2f512052bab537fd3f21b0455562afe4b44e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a2b3fcd7f5c1c323b94e33501ae29d13e04309ea",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"90f3f1d01d4848f1ce19041847f344c2620a6169"},c("ul",{key:"7c5303fd21bf2aaf568fc5366006251f0939fc67"},c("li",{key:"75e17a63ef894bae8c8e0828cdd29003620e798e"},c("span",{key:"5a6ed3b49cb6f3df9a5f79aacda3e091d5cac304"},c("ifx-icon",{key:"515f0f4efb7fddee9f2c554842ebc039bb597210",class:"check__icon",icon:"check16"})),c("span",{key:"db5d8ecb5238acf4bd366448d74032a8dd7851aa"},"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:"0b0f9cfde9a3af2d314a34f925e488c6dcb62223"},c("span",{key:"5306bb6e091ea306090c350dc3e8a8f61f7031a2"},c("ifx-icon",{key:"ebf5cb45acfc178ae34a05efd26116c20d876c2e",class:"check__icon",icon:"check16"})),c("span",{key:"96a1d70c90a2ae51ae00fc7ebe31e0af93f5a0f6"},"Adheres to web standards")))),c("td",{key:"3e9af357c77a86ad763760a27cc77626f5881978"},c("ul",{key:"8568e3ec5acbfaf70c7bbf9ae6bd93f979548bd3"},c("li",{key:"de11a32bb0479cffed4c496f7d44b76eef360583"},c("span",{key:"2cb56427946dbc429c0dd5ec9eca6168d62db934"},c("ifx-icon",{key:"9f8681d0ce4264560e44a2636842671465434b77",class:"check__icon",icon:"check16"})),c("span",{key:"51637691e1d26be28bf79e1a5e9a58848d0dc250"},"Brand variant")),c("li",{key:"a2fce705bbf79bdf60790b5359a4feec3f7a07bf"},c("span",{key:"6cbd08efb672b76c89aa135802721a679e2dbce0"},c("ifx-icon",{key:"4a7f3adc985803a578179bf36167d75f66f406f6",class:"check__icon",icon:"check16"})),c("span",{key:"635307c72a7cd801fa0c86ff328c9f44b52205a8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"49e0d1cb368f32472a9a91d28a728a408ce71a57"})),c("tr",{key:"d73666082128e66713eef4054f9917805cef53a4"},c("td",{key:"1ae0ba0803f57ab42a0154624898ce0b2b2e23da",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ac51695f8621c2bf250db425d9f472da3cd9e78f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"6f9861be1246df6f63b7430100749590837b706b"},c("ul",{key:"0bb2cf78a6ce49c003234522f45eb0696f0f57d1"},c("li",{key:"d8c55a5ef1b48df9b132196c37b51b692c6f38e5"},c("span",{key:"e47199e246916b1f194e8837c19f81a061d8f31d"},c("ifx-icon",{key:"5c4ec87d51400d0546d19df803a8ab11b4f37bd0",class:"check__icon",icon:"check16"})),c("span",{key:"39c796191fad4d4856d11fc473639a6a132e7274"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"04e7163dbc42ac76583316701058391d2e3a7db7"},c("ul",{key:"a19e2c019a9d184aee0c38903601e0d4ce4e2664"},c("li",{key:"a286b1e6ea60630c987956522b4f7ff15cdfea7e"},c("span",{key:"bb603b2d6cf8fc367af53de8872b5cc616f680f3"},c("ifx-icon",{key:"b9545d1b549d2b12853422f280820c1e5ca42be0",class:"check__icon",icon:"check16"})),c("span",{key:"2ac2b5de4882ee07a115dd787b0999fafba6ac48"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"6412b05a9790b08aaaac54b472c866304cdb8cb6"},c("span",{key:"fbd1772ba0749a015087a0fc1464a034337d9fa5"},c("ifx-icon",{key:"9acddeb4ac460e331997bda0493bcd4ef10fe0a0",class:"check__icon",icon:"check16"})),c("span",{key:"9e701c6a1fd04186101f43bb51c861d8a90d8547"},"Removable border")),c("li",{key:"bcbb4bd8f4896b780189df5a940ff756e2d2c0ca"},c("span",{key:"48d1df4b00633899a06a5a03432a600ecbfa5214"},c("ifx-icon",{key:"aa327d87516055de620a93dc65eebb901344d67c",class:"check__icon",icon:"check16"})),c("span",{key:"37750c204951655d0037b008c22c61704e8af7d4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"073fec6d66ad90d65548a2cd0a78cd2da4f2a27c"})),c("tr",{key:"9e83e03c1e61033077acd2aa3aeba3c8d7c7e1fa"},c("td",{key:"80c3815d8648d81f33a49f6158cbd2f25c0cd82a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c3d806ea55591489e6785b97e71d8bd30825e567",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"75812c54e6320b0046e64d294462810cc8dccfe1"},c("ul",{key:"d4af5a9ece051612c626c6b8d703ad6150e42e37"},c("li",{key:"760a0c95223f1dff87b44d163453934cdd65f52e"},c("span",{key:"0b6cea3103c742a9a98e487034a52e3b32acad9c"},c("ifx-icon",{key:"665698bb32ec9e52f9528045814808fd70626314",class:"check__icon",icon:"check16"})),c("span",{key:"7e8aaa491636c3a9f9b3a05ce007485bd7d243af"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"5ba351bd8a2478691d9f33b8c05a650a892ecf29"},c("span",{key:"40ab19f7ff8c854ba9f5956f7312350b3a9fd2dd"},c("ifx-icon",{key:"609bcacd065ff6cbdf92aed1fda7a486741f7d67",class:"check__icon",icon:"check16"})),c("span",{key:"91c073211b44b9ea3c476c28b13df1fdc4b08eb0"},"Default and Compact variants")),c("li",{key:"63b4e4aeaaef933e57fadc48716577b6b706bdc3"},c("span",{key:"b858db09ec037624cfd3391db3e59400dc9fbb9e"},c("ifx-icon",{key:"97e16b6ae9c78f7773201aa6d5b4076616e66d81",class:"check__icon",icon:"check16"})),c("span",{key:"3d31ce6a01e84551cca7dcc27d0f1538840876b5"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3e7075d99117bab86876c1fa5728581d0140315e"},c("ul",{key:"97196bb6042d1bcd37ace046264c5b56e7837059"},c("li",{key:"97e7ab86bb700dc05188858a3b78853300c6bf95"},c("span",{key:"29ef7846a3a69a6580e567012d54c2fcc3b644d8"},c("ifx-icon",{key:"7d13d5a4d5e56497c3ec64972662c8a3d10c5a92",class:"check__icon",icon:"check16"})),c("span",{key:"94dbec35658cf31930bd0025e93e18fe15ec6ada"},"Vertical variant")))),c("td",{key:"ce2af5d8e8c92c9e90689dcd68ddd1b3b4107fe4"})),c("tr",{key:"d9570d5c0272c3681668ddfca9bd22f4c3fee778"},c("td",{key:"2684da77eeefe0efb1a72abf4e59a75e5be06015",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9d1e8430b70b3f727575b29f96f4328ce543af52",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"e1c10dfa1efed8e2c721b228c1c401e14d352807"},c("ul",{key:"1946059000af298324c30198b551416a4554487c"},c("li",{key:"6f443a9f53c82a2ed7a4b9a60c14d606f23a7214"},c("span",{key:"3eb201475d910cfd280c7ea39f5a19571a15db0d"},c("ifx-icon",{key:"4740449e3e822f354892894775da050b7eec1911",class:"check__icon",icon:"check16"})),c("span",{key:"d6667cbf075eccb6bf9dd1b8623b37a53f733012"},"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:"65abb0ae634f2786fbefdda0184fd92fef10bc83"},c("span",{key:"4f8332988008c278b1ae87604a21b20decd2e0c7"},c("ifx-icon",{key:"423c35d378b71fe3e924a837b2108a7199e6a109",class:"check__icon",icon:"check16"})),c("span",{key:"048c0a1cdbabff896717f0a1b644d355466000ed"},"Adheres to web standards")))),c("td",{key:"4fb06daa807656dea7a3ac86fb34de4f4e43e14c"},c("ul",{key:"271163d084ed7281ce5e41182b665adf47593df4"},c("li",{key:"a3ba64b2780b28728671bf0bad6eb787c0d0623f"},c("span",{key:"a4bcb455f178d4da5d3e00d2aa452f8c0395b7e1"},c("ifx-icon",{key:"6ef5b5fb301a9e75827835b1ded81d23edd83cb9",class:"check__icon",icon:"check16"})),c("span",{key:"a89b2f098679e052fbd71e840f8e133dbd9c940d"},"Incorporated label feature")),c("li",{key:"ccfb3d9fa2549ea2b87c2f995e62d3f3ea986098"},c("span",{key:"1e880ec254e61494cf096f03c0c5ede2554b0633"},c("ifx-icon",{key:"234d2243a673c03eeb8b448825a269028339f016",class:"check__icon",icon:"check16"})),c("span",{key:"eeb4d37839e8259bd91b9eb66cb82146a759939e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"151bbd006f999a34df90b69c3adf092d9f8a96c5"})),c("tr",{key:"3470c06e14164a0e6c488b689694ad0386fefc9c"},c("td",{key:"334de41c5b9ddc06e2da48353428b567f005384c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"07151fa9b29121ac121f6f37685a8372b20c4544",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:"b1fcb9752e28fdc5c627bf777f379bb538bd4ed2"},c("ul",{key:"96888e35564c1e7d1ac8c36aee286e0b04f6a557"},c("li",{key:"cfff075d1dc0256ffe4c00e50652f3ef2de1f3ad"},c("span",{key:"aba7dad5f300fdeb71b25f757f0cdce0ea579e35"},c("ifx-icon",{key:"20d19a93b435a21014418bcd0a32609d6d0d64a2",class:"check__icon",icon:"check16"})),c("span",{key:"fea701edc7061c51925b98e85a25d35e7ca7a73e"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"418b2d68f35d319dd6a36ffa7c9ea3e6b3d73fd0"},c("span",{key:"d49a2e00e7e16e412bbd983157c471cda4459bd8"},c("ifx-icon",{key:"74b665c057f3bf3e5196dab6a8a81b91a5cbfa1a",class:"check__icon",icon:"check16"})),c("span",{key:"ddc49945018fdf0050678a5de563c4f1862182f1"},"Includes basic features such as column sorting")))),c("td",{key:"0ded008c752e4b72495fe00a51a06dcfe8097347"},c("ul",{key:"d9d7f93344fb4a814abb4dbbd8e0114fe4c3df2e"},c("li",{key:"607584fb29a798677ca49de7c261fcbc36b3dc6b"},c("span",{key:"cdeaaa0e00f5a85172736e6cc64366aec3621482"},c("ifx-icon",{key:"7d4263b047d02e63dbff5bddd704674d89294e96",class:"check__icon",icon:"check16"})),c("span",{key:"0735289c66f645638c545480a9d234b994ab301b"},"Compact and Default variant")),c("li",{key:"075623454f6936b1f7f09577fe2f8d45d4fe214d"},c("span",{key:"f25189591e0c996922e2238405921877e6722ce8"},c("ifx-icon",{key:"70a03d3a683283fbf9c70b57e27a4d10da98126c",class:"check__icon",icon:"check16"})),c("span",{key:"390b1e648994206d258377441a2c6392106ab3e3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"814bbae5ca41842d1a8617741ecc80f6d10027d9"})),c("tr",{key:"3fbd64f31d4be14586fef64e12994253cccccac6"},c("td",{key:"28448972a262a50d4985bda3bdb7af9eb988f9fa",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6b9e966e2c231275d60b0e90a0804e231d734bb7",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:"b20f969028fdfc93fb93e2fd2b1ee8cd76065bf7"},c("ul",{key:"da4a800b5482bd04dd1203a2c1b8ca3c1839d9aa"},c("li",{key:"fa0a70e657c4b8b3afaf8182bc8c12e3aac237ba"},c("span",{key:"e0d962087f376a91aad5978ef1b5587130ef8082"},c("ifx-icon",{key:"b25d4b78d9dc7ee8d9b1d99ed14a71939155b865",class:"check__icon",icon:"check16"})),c("span",{key:"c2ab576b1f1f12bba1557df692e862194e2b8110"},"Pagination")),c("li",{key:"2e0e130e9ad25c507edf24c62ae633830356f35a"},c("span",{key:"da9eb72e9b62b568c53b45e778591a74191f5790"},c("ifx-icon",{key:"969075cf76551e06f0e5ccaab0a15b54841dbd0e",class:"check__icon",icon:"check16"})),c("span",{key:"b0c013b500979f474299a1ba089b00a2252ba986"},"Sidebar filter")),c("li",{key:"9c4097aba43575fcbf4f8bb83b40cdedf5deee60"},c("span",{key:"66b3a15f6a9ee53b323224d270b71e6414a136cb"},c("ifx-icon",{key:"69f9d0590c88ab103d8c0a7e3ba181c7681cc07a",class:"check__icon",icon:"check16"})),c("span",{key:"0a20e72bfdd480a515439666dd53518ef147c212"},"Topbar filter")),c("li",{key:"b83ff6699add659d282bd9df3e53c16ccca50b09"},c("span",{key:"aa1c06682296cc763cf02d5088dfba885e9822b3"},c("ifx-icon",{key:"738713d2225805094c9205ad57a805e8dadff3bb",class:"check__icon",icon:"check16"})),c("span",{key:"aa9b71c1a5c8d72f6b61f6412191b81f4b857a52"},"Nestable buttons")))),c("td",{key:"01963c1d91e3ff77a2e1f6c4ce71e276080d844c"},c("ul",{key:"6ece6a597409599087b7551c84e15e3e04d463a7"},c("li",{key:"d1d4f477117fffb34893f12d806206e269bfee6e"},c("span",{key:"d8c31c52067073b3b64c83dc5dbc7d0e1bc20202"},c("ifx-icon",{key:"318665e80d0d29bc8f60bd6f1609c8e3f00995e9",class:"check__icon",icon:"check16"})),c("span",{key:"985df7396b429bffdd1b38aaaa70ecee46f842f2"},"Offers dynamic cols and rows")),c("li",{key:"b4668a8b3333f7d52370b69fac3e92f5653ca74c"},c("span",{key:"daa9264c3231525f25d76877cc99e86cec5f50b0"},c("ifx-icon",{key:"7b6399ec225839168dc9ef9c7704b3023c7a740b",class:"check__icon",icon:"check16"})),c("span",{key:"4a7c9ec777924c6a3ed0ba67c71c9d0786e570e1"},"Allows users to customize the items per page of the table pagination")))),c("td",{key:"8a4b7ce87123240c77740ee1cbe6df7178eb2047"})),c("tr",{key:"cb8b949da71ae9d009a87023d83418ced2a642ff"},c("td",{key:"30d88249b7217141ba2303cfbd123a6a8aea8d9e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7fc3ad664f62d1bb95c792e8de5651b56cd2c2c0",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"956c79a554f7e68eab54d8440fe02fd8e4c93c31"},c("ul",{key:"0cafe0c393be574e2e97c8ead47c6fb72daa8c8a"},c("li",{key:"5be9c063519dc71d558806ddcc40caf5b57fac3c"},c("span",{key:"6a029c81a3590bffe503bc3a87ef3e89f706033f"},c("ifx-icon",{key:"fa3308d60268806bf5f12c67de5aaf1e9481c377",class:"check__icon",icon:"check16"})),c("span",{key:"16b2417b4ad7c781c57f2e1679717e35ca056556"},"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:"c1e6e9add6444fa0cd17d3f7a88616931706df34"},c("span",{key:"70859d20f91ffa97f8348b1dcaadd805bd3d0745"},c("ifx-icon",{key:"4150d2069f2d515a23a19d42aa0903bee09b3635",class:"check__icon",icon:"check16"})),c("span",{key:"22e8e93cfb8532b3ebef44514af9a30724fbc4f0"},"Adheres to web standards")))),c("td",{key:"fd5418aa751add2b914272d5883772556e6eb952"},c("ul",{key:"c189be5ef009182f73bcea3f7665057ad6b5e359"},c("li",{key:"4828145095562b53e44c5de7655227abb8cb62dc"},c("span",{key:"e27c63760b5e7a4893000476acb0643cec817d08"},c("ifx-icon",{key:"a5aa7ae9b1be77cb6bb964c7d4601be798ee8f20",class:"check__icon",icon:"check16"})),c("span",{key:"f6580f40075054f50ead69f39890ccf8af1ce7bc"},"Horizontal and Vertical orientation")),c("li",{key:"2bbdec6bfcb2217ac9b373884faf7e661ee3276b"},c("span",{key:"d25a2127fe1116aa92a0631ea9e0420099871f4e"},c("ifx-icon",{key:"b0e8e16dd23bba942e0aaa3b5ee505e260f35ca3",class:"check__icon",icon:"check16"})),c("span",{key:"d1a1c8463090cc01e9c2e87557bf01d1eac3d8c8"},"Extended customization")),c("li",{key:"94f873a8433f299f7f9ada07863c9108a205993f"},c("span",{key:"c170d1372f435f19116465dccc334f7b59820d3d"},c("ifx-icon",{key:"ef7ba3d770cb6f894ca914ae522ff126d130b2bf",class:"check__icon",icon:"check16"})),c("span",{key:"f2439300977f321430db528c4e25ed2665efd21a"},"React, Vue and Angular wrapper integration")))),c("td",{key:"910debd3ea3f0b1e102ee7f23bdaa0eece45722e"})),c("tr",{key:"02edae09a5a9932c734b1d0e695b1e9ec441a0f2"},c("td",{key:"e53e309f8f7b1798154f7cb2a01880e8e0640ea0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"236423b3b84af08105e5ee6bf12c0b2e8623b93d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"70faaa4097424346320c4db101acd7985fe33a1d"},c("ul",{key:"db3977072a021cf268a2dc3015f626bf393dd497"},c("li",{key:"d91cd190a1a5a3e72fa68f4f77b41753f2d6006f"},c("span",{key:"ccb05f100123c0135324db3345b50ac52411449c"},c("ifx-icon",{key:"6558888a7cc9544f843d8af1b38c4d1357790152",class:"check__icon",icon:"check16"})),c("span",{key:"e5b1efb4a140349aeb54f4120a6f98af9f813946"},"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:"74b03afcfdfa87550e7383dd4362f4da98195c61"},c("ul",{key:"962a536241b3e26166d9e83591b45baea090b250"},c("li",{key:"959e9f71c3ac88c8ebbb98b713b8cce7f974dbab"},c("span",{key:"a5584490e0c7abdf2bf60d6b6005559e4d9cd238"},c("ifx-icon",{key:"a90a25ddbdfe88c3ebb14446aca4d9bbbc30efbf",class:"check__icon",icon:"check16"})),c("span",{key:"b2cd338cefd9cbabd00d7bbcefe494b0e9d56b7b"},"Icon incorporated")),c("li",{key:"19c1f0f4f4f29d3c6d1b65071c0ecc345f48b2a0"},c("span",{key:"e84e4a68340cb32d53da431729b125e0096368be"},c("ifx-icon",{key:"aff4aa6258d06e1e432b9c300d9b9ccaf619c767",class:"check__icon",icon:"check16"})),c("span",{key:"6755d745b5638ea6e439a1378565f3feb8af4567"},"React, Vue and Angular wrapper integration")))),c("td",{key:"74f9b5c4aee2783ab9a064cafa904b5304b9adc4"})),c("tr",{key:"dacc8df479428544559c9d7e617581d02a655984"},c("td",{key:"1fd143fb03a3aae1355883b3309af0a7d4a2787b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f45e3d07c6df372d1d9b46b17e8c2473949f5ccb",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:"ef32cf14cbdbe6bd4c4dfa6fa8b8d3639cea5c66"},c("ul",{key:"41519b9754293de9e37c41bf241da534cdbedeeb"},c("li",{key:"4cf5a8d478a66f5845c469279608c51dd22c7d59"},c("span",{key:"31342a7641233040a2569e5854e8939ce0bf7cdb"},c("ifx-icon",{key:"708d18e73c1550c5d41de0b113f79c86b007bcd5",class:"check__icon",icon:"check16"})),c("span",{key:"8639671b1161cdf4f04587212ee1564d264c496e"},"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:"c88645cbbffb3f27f285ada3776bd4fbe3b28126"},c("span",{key:"cb0b87363d75cc8ed5ba4aa102a4a1620e00e33c"},c("ifx-icon",{key:"e7c5fe944259c2e55e5809ab075aec58d0d2916a",class:"check__icon",icon:"check16"})),c("span",{key:"326c2f0a76e6184be5b3251b2b1c3796ccc091d3"},"Adheres to web standards")))),c("td",{key:"7990103c00f6fcdd2c89599d6635272776363996"},c("ul",{key:"8cc68fa061607b32f0e386522083155b0c221dec"},c("li",{key:"f82a14975531edff5a6ec26e6dcbecd9755590c6"},c("span",{key:"1bef6c2bd695ddeea3d80c699b6b78d203cfb51c"},c("ifx-icon",{key:"a9aef1a99a3b0f5010732875d78d39ffc6b0b935",class:"check__icon",icon:"check16"})),c("span",{key:"32321222f31147581b319a18d6e69585a740e4c8"},"Extended customization")),c("li",{key:"e31f2c51a23a7a433e362b76c35349b028a13b8b"},c("span",{key:"47b7aeb0a6143ed96cb1ca67b5aaef08126a9169"},c("ifx-icon",{key:"45980af290e638a0429f0a3ddfc6be9ef5a06988",class:"check__icon",icon:"check16"})),c("span",{key:"8ee06d761253896b72729793ccd6e75dc9f11363"},"Possibility for icon configuration")),c("li",{key:"587cc70798999f427a7a7b62410a47d56e641c89"},c("span",{key:"c187b78dedf97f987dba1b624d6051c33dee9ca2"},c("ifx-icon",{key:"9ad6e3465e2e3f9bf3666bd5f5fd253db68b3242",class:"check__icon",icon:"check16"})),c("span",{key:"ba6941e5dfb8208abcb6c606cb97c2b188dcb03e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3af75ddbc06db6d98bb01b1a5d7ccd2954537cc3"},c("ul",{key:"c2a7ce9e6edd7e1096521b6d42dffbaea3244687"},c("li",{key:"91f516c17d958ae233a190b4f5757f7ba2752be3"},c("span",{key:"7da5b2085a6601d4b5f586ae4a1fe4899fae839b"},c("ifx-icon",{key:"39310e40ce18f791ef7551b6bafd611306921fdc",class:"check__icon",icon:"check16"})),c("span",{key:"7ca2f880ec09b6be9e983b85e84163e6b1133834"},"Form integration"))))),c("tr",{key:"140da0bc9643d9d7a311d0cf7b0c0a9c101a72f6"},c("td",{key:"c096f21d039672d93adac2511cc886fbe37c9e49",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1ec5bc5a48a2ca8d5a76562bc6389bbfbd0cc817",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"65d4107765d18ccfd9cb3d314bdb1eac0828c3c8"},c("ul",{key:"9f16d7c7e2c749f193337354a9bb263fbe3809d0"},c("li",{key:"350c26f18d842cb0ed41cb404b2ce5f36b1aee09"},c("span",{key:"298375ea242d5f18dbfa87455b8988f8fc641e9d"},c("ifx-icon",{key:"61ed3bc91e003257485e2717f9066f0b713a9a57",class:"check__icon",icon:"check16"})),c("span",{key:"8d1dcd60032f2a4b2af30950e2d2710dfe93e645"},"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:"10142cf5df88c8dd8ae4659394090fca0bf569ce"},c("span",{key:"3e3169134ca32d30b2950c332860a284660b93d8"},c("ifx-icon",{key:"44ba234b24aa374e8f3b45bbbe85b3c675152e97",class:"check__icon",icon:"check16"})),c("span",{key:"5e1ed8cf847c5b5adb0ae35451251a3463c48f19"},"Adheres to web standards")))),c("td",{key:"4ee32f1448d807705b6032e235b2e1cc6713906a"},c("ul",{key:"eb2254488e09fb61762441692af09dfe46ec6fe3"},c("li",{key:"56068e27b50763555ab3396a4a5422732a670da1"},c("span",{key:"0619f6a1cf79a7ff50899df51727f37162ab367a"},c("ifx-icon",{key:"cefc3bdae84f33733105fadd9f9e1fbf1587d86c",class:"check__icon",icon:"check16"})),c("span",{key:"1cb66c13817c20146fe93e88a8d0ac18c151f02b"},"Compact, dismissible and Extended variants")),c("li",{key:"99f89e7b1c35e7dba003de46d064478160f5c2c1"},c("span",{key:"b3e121a3588bf312c7e199ee0860573443efd4a5"},c("ifx-icon",{key:"9f2dcca7aa23a5cd1f33f54d70d1ef0d231d897f",class:"check__icon",icon:"check16"})),c("span",{key:"574013862bdf1f2215291f14fc54387c25aad4ce"},"Auto-adjusting position")),c("li",{key:"21943cf9ed5bcf0c9bb0edb7831bf565a6aee6fe"},c("span",{key:"3dafbca3d6a52035af1bced82e1fae2ffc4636b3"},c("ifx-icon",{key:"69dd7949a44e84d98fd0427ddcffbb06c3d4b87e",class:"check__icon",icon:"check16"})),c("span",{key:"8fd85394dd4d3f0a2be0861c844d77986080736c"},"Icon incorporated")),c("li",{key:"ae183ccf97f6911eec5e81aad1bb03133df98bb5"},c("span",{key:"dfd93271a10e18c873af8255ea7aa23e40232544"},c("ifx-icon",{key:"418826fa84e3da8dc2eb307c2cf61444ae1f258f",class:"check__icon",icon:"check16"})),c("span",{key:"036f2c5c3745de2835af069af51b6d22a2eb71fc"},"React, Vue and Angular wrapper integration")))),c("td",{key:"1ca58e799c0ae7a5a742e3cdfce269e5c49cc442"})),c("tr",{key:"46aa1c04c720a95a8265d6d10f130b8071579836"},c("td",{key:"96a5d06a0b041149c751cf1b64037d646cef590e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5431144d56bb0474dfd7516e2d34df2175e8e0c3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tree-view--development",size:"s",variant:"bold"},"Tree View")),c("td",{key:"4757ffe56edbd11ccf55f60c2cc15df9536a5179"},c("ul",{key:"eb6ea8a86db82c66e3934480187af23576fc891d"},c("li",{key:"301063e511ea26518ff2ad4ca62947014713b832"},c("span",{key:"7ae34c28cc29a352d76c822bd3bde733dea9d3ea"},c("ifx-icon",{key:"a83fe870b63d55a438e7a5e1545834566621cb84",class:"check__icon",icon:"check16"})),c("span",{key:"504e5deaf1f10b89a4485271b884899059430a05"},"Provides a structured and expandable interface for presenting hierarchical data")),c("li",{key:"2a6a06e148fce917b5f1347d98c97c776e361cda"},c("span",{key:"4107a01726bbacdc2df547be8eaa7dd8fcd9dd2b"},c("ifx-icon",{key:"74b9d1a0ab6ddd5de2d4b0eff191bcf747415ac9",class:"check__icon",icon:"check16"})),c("span",{key:"f5ec9e58c01f950cfbdb398a66036b40b1135834"},"Enables users to navigate complex information architectures by expanding or collapsing nodes")),c("li",{key:"f8ccafe87964e56787064689499e66149a773b80"},c("span",{key:"ca0116e2f5b1627d92335f67a08ae5b33216b3c0"},c("ifx-icon",{key:"58dacaf3ea746abf6e23f6fc481974ba1fdc3df2",class:"check__icon",icon:"check16"})),c("span",{key:"1d8cf9fb75fa2685af849661f0df6ba6f94c77eb"},"React, Vue and Angular wrapper integration")),c("li",{key:"a3fdd8a3260ba0b8293a0c07fc46e00134eef05a"},c("span",{key:"02c37f126679985fb30331e9a1cbc4dc67e57499"},c("ifx-icon",{key:"07775cc632c720900fb582ba440f2b378c90537a",class:"check__icon",icon:"check16"})),c("span",{key:"c51019d98094dec532028046ff9019e469036669"},"Adheres to web standards")))),c("td",{key:"1537b4a9cb4c4cf44516c17f9abd56e5a7476f90"}),c("td",{key:"a2bc5fc5b4769cf1e846299c9f3a0e2055d12c41"})),c("tr",{key:"77981002ddd41bb6580fa507b6f93f59b23c5465"},c("td",{key:"a8ae8f7fc3411dff993dfcd370ea14aa5ef6d2f1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d28249197085fc64d84543af866cdec9a7ca9433",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-textarea--development",size:"s",variant:"bold"},"Textarea")),c("td",{key:"bc759ab47a7002a86c480b133cbc911099e15d95"},c("ul",{key:"85e715ab1fa16724690d99475bf79328af0d2504"},c("li",{key:"80020617c34ac322fe2b82fa67245e246190a4e1"},c("span",{key:"fef3255dce4a2b91aaddf0a68af920c2423523d4"},c("ifx-icon",{key:"3a49680b8404f7fe096067244dd0b2cf808bbfe7",class:"check__icon",icon:"check16"})),c("span",{key:"a3d29ea4e0d9d319c00f1a62ea7285ee39c70ecb"},"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:"7b74966ba1527bd43893406b3e4478bbbc15ffcd"},c("span",{key:"0dbbf3f7b91931b75645f3c54720fa1bfb1deba3"},c("ifx-icon",{key:"e8323b4925ac0a799a121e42e7849ee83462959c",class:"check__icon",icon:"check16"})),c("span",{key:"1190cb124eea75b4a75025b1ec149cbfab4c5625"},"Form integration")))),c("td",{key:"098d7275ea2cece0e91925ab817b715360ae2532"},c("ul",{key:"01a30b941efb0048b384b0e431a4bece5ef0834f"},c("li",{key:"5c19014d159a80b923f048c56a5d5f887f226f47"},c("span",{key:"ed0cc91fdea028755b96a4a4f0cd599f3c4511ec"},c("ifx-icon",{key:"ec435a9634059072fe776c0e323b6718da6ad971",class:"check__icon",icon:"check16"})),c("span",{key:"2f69190a457e995d2a55c68a1a8be359d66bf6fa"},"Incorporated required feature")))),c("td",{key:"fbdcfa18cc76a956e02b6982985450a79c8be5de"})),c("tr",{key:"b62df23c8515b370bb9aee442d337f4dc282f736"},c("td",{key:"ab132b92bba1868ef0be02353484fdc52a51206e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"949d08a2a90f29f2eb739b7d1e0963e3ba18cbdf",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"378672121dc4c9970e0f5fff3e6e74764c96114e"},c("ul",{key:"15ec86831d794cfb42392efc7e101d757c088a5d"},c("li",{key:"e2c7a4b4e5f69ed99b5af57666b810574d6e493f",class:"planned__component-wrapper"},c("span",{key:"00d0f8f7cf9a37cf077b3fe74bb30383ebe89c53"},c("ifx-icon",{key:"2b7e4d71050ddecb6afbc3a5132b0dee37f510d2",class:"planned__icon",icon:"clock16"})),c("span",{key:"89d2f98ac2325ff092a4d8a15140459c3ba07cc8"},"On Hold")))),c("td",{key:"00f991519e97139df6e9b3f7b35f326f4b2165a0"}),c("td",{key:"f78e7d110d1d161b0a4f56f61b5a5b3352e03e8f"})),c("tr",{key:"641a328ec57820c6c8198f65a4cfb3e191d6d5a1"},c("td",{key:"4b578694617aa7acfe18bb71aef5502cc16e959c",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"ca0be81ccdc57bac6c785cdf592a56858631a234",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"e17931ef33900a88e1c2b6965c112873a842293b"},c("ul",{key:"2b7dcedc1b397d1377e74416ac0ae6e71361c0b8"},c("li",{key:"09d47adee8903c52d7dd063ccbcd4e53b7ff677b",class:"planned__component-wrapper"},c("span",{key:"58f13b5a8c7c8ea5d572e4c633b1a8313dfc297a"},c("ifx-icon",{key:"38712503ed15a05eb226013e3245ac5708c51161",class:"planned__icon",icon:"roboticarm16"})),c("span",{key:"30dc5dc76b41616a785c13c8fb7a459cbdbbbf14"},"In Progress")))),c("td",{key:"e2abfa6b4ff31b5d2e0ba7e592491f7c7d04b1d3"}),c("td",{key:"459947d6ec3ec3fcf9636f65ff99d3bab3c9003b"})))))))}get el(){return a(this)}};f.style=d;export{f as ifx_overview_table};
|
2
|
+
//# sourceMappingURL=p-adc480bb.entry.js.map
|