@infineon/infineon-design-system-stencil 37.13.1--canary.1997.75ad7f7eea08b7ef8ba8916a0f4ec101f62aeed7.0 → 37.13.1--canary.1987.af4057eae2ab04d5a02dcce99e6921a50cf96f1f.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-card.cjs.entry.js +11 -21
- package/dist/cjs/ifx-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-card.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-chip.ifx-chip-item.ifx-pagination.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-chip_3.cjs.entry.js +2 -2
- package/dist/cjs/ifx-chip_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-faq.cjs.entry.js +1 -1
- package/dist/cjs/ifx-link.cjs.entry.js +1 -1
- package/dist/cjs/ifx-link.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-link.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ifx-progress-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-progress-bar.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-select.cjs.entry.js +43 -27
- package/dist/cjs/ifx-select.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-select.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js +1 -1
- package/dist/cjs/ifx-sidebar-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-sidebar-item.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-slider.cjs.entry.js +4 -4
- package/dist/cjs/ifx-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-slider.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-spinner.ifx-text-field.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-spinner_2.cjs.entry.js +7 -7
- package/dist/cjs/ifx-spinner_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-status.cjs.entry.js +1 -1
- package/dist/cjs/ifx-status.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-status.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js +1 -1
- package/dist/cjs/ifx-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-step.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-stepper.cjs.entry.js +2 -2
- package/dist/cjs/ifx-stepper.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-stepper.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-switch.cjs.entry.js +1 -1
- package/dist/cjs/ifx-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-tag.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tag.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-templates-ui.cjs.entry.js +1 -1
- package/dist/cjs/ifx-textarea.cjs.entry.js +3 -3
- package/dist/cjs/ifx-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-textarea.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/ifx-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tooltip.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-tree-view-item.cjs.entry.js +2 -2
- package/dist/cjs/ifx-tree-view.cjs.entry.js +1 -1
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/card/card.css +2 -2
- package/dist/collection/components/card/card.js +10 -20
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/link/link.js +1 -1
- package/dist/collection/components/link/link.js.map +1 -1
- package/dist/collection/components/navigation/sidebar/sidebar-item.css +6 -2
- package/dist/collection/components/pagination/pagination.css +5 -5
- package/dist/collection/components/pagination/pagination.js +1 -1
- package/dist/collection/components/pagination/pagination.js.map +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/collection/components/select/single-select/select.css +6 -0
- package/dist/collection/components/select/single-select/select.js +42 -26
- package/dist/collection/components/select/single-select/select.js.map +1 -1
- package/dist/collection/components/slider/slider.css +8 -0
- package/dist/collection/components/slider/slider.js +22 -3
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/collection/components/slider/slider.stories.js +14 -0
- package/dist/collection/components/slider/slider.stories.js.map +1 -1
- package/dist/collection/components/spinner/spinner.js +21 -2
- package/dist/collection/components/spinner/spinner.js.map +1 -1
- package/dist/collection/components/spinner/spinner.stories.js +16 -2
- package/dist/collection/components/spinner/spinner.stories.js.map +1 -1
- package/dist/collection/components/status/status.js +1 -1
- package/dist/collection/components/status/status.js.map +1 -1
- package/dist/collection/components/stepper/step/step.css +4 -0
- package/dist/collection/components/stepper/stepper.js +40 -2
- package/dist/collection/components/stepper/stepper.js.map +1 -1
- package/dist/collection/components/stepper/stepper.stories.js +30 -0
- package/dist/collection/components/stepper/stepper.stories.js.map +1 -1
- package/dist/collection/components/switch/switch.js +1 -1
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/collection/components/tag/tag.css +2 -5
- package/dist/collection/components/tag/tag.js +39 -1
- package/dist/collection/components/tag/tag.js.map +1 -1
- package/dist/collection/components/tag/tag.stories.js +29 -1
- package/dist/collection/components/tag/tag.stories.js.map +1 -1
- package/dist/collection/components/templates/template/template.js +1 -1
- package/dist/collection/components/templates/templates-ui/templates-ui.js +1 -1
- package/dist/collection/components/text-field/text-field.css +11 -2
- package/dist/collection/components/text-field/text-field.js +23 -4
- package/dist/collection/components/text-field/text-field.js.map +1 -1
- package/dist/collection/components/text-field/text-field.stories.js +17 -2
- package/dist/collection/components/text-field/text-field.stories.js.map +1 -1
- package/dist/collection/components/textarea/textarea.css +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js +23 -4
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.stories.js +16 -1
- package/dist/collection/components/tooltip/tooltip.stories.js.map +1 -1
- package/dist/collection/components/tree-view/tree-view-item.js +2 -2
- package/dist/collection/components/tree-view/tree-view.js +1 -1
- package/dist/collection/stories/setup-and-installation/faq/faq.js +1 -1
- package/dist/components/ifx-card.js +11 -21
- package/dist/components/ifx-card.js.map +1 -1
- package/dist/components/ifx-download.js +1 -1
- package/dist/components/ifx-faq.js +1 -1
- package/dist/components/ifx-file-upload.js +1 -1
- package/dist/components/ifx-icons-preview.js +2 -2
- package/dist/components/ifx-link.js +1 -1
- package/dist/components/ifx-list.js +1 -1
- package/dist/components/ifx-notification.js +1 -1
- package/dist/components/ifx-overview-table.js +1 -1
- package/dist/components/ifx-pagination.js +1 -1
- package/dist/components/ifx-progress-bar.js +1 -1
- package/dist/components/ifx-select.js +1 -1
- package/dist/components/ifx-set-filter.js +2 -2
- package/dist/components/ifx-sidebar-item.js +1 -1
- package/dist/components/ifx-sidebar-item.js.map +1 -1
- package/dist/components/ifx-slider.js +5 -4
- package/dist/components/ifx-slider.js.map +1 -1
- package/dist/components/ifx-spinner.js +1 -1
- package/dist/components/ifx-status.js +1 -1
- package/dist/components/ifx-status.js.map +1 -1
- package/dist/components/ifx-step.js +1 -1
- package/dist/components/ifx-step.js.map +1 -1
- package/dist/components/ifx-stepper.js +4 -2
- package/dist/components/ifx-stepper.js.map +1 -1
- package/dist/components/ifx-switch.js +1 -1
- package/dist/components/ifx-switch.js.map +1 -1
- package/dist/components/ifx-table.js +2 -2
- package/dist/components/ifx-tag.js +5 -3
- package/dist/components/ifx-tag.js.map +1 -1
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +5 -5
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/ifx-textarea.js +3 -3
- package/dist/components/ifx-textarea.js.map +1 -1
- package/dist/components/ifx-tooltip.js +5 -4
- package/dist/components/ifx-tooltip.js.map +1 -1
- package/dist/components/ifx-tree-view-item.js +2 -2
- package/dist/components/ifx-tree-view.js +1 -1
- package/dist/components/{p-wxAskvtL.js → p-By5SOUeF.js} +6 -6
- package/dist/components/{p-wxAskvtL.js.map → p-By5SOUeF.js.map} +1 -1
- package/dist/components/{p-AfeIKrPd.js → p-C09NpLE0.js} +6 -5
- package/dist/components/p-C09NpLE0.js.map +1 -0
- package/dist/components/{p-BPtblWb0.js → p-C3VPtV-F.js} +3 -3
- package/dist/components/{p-BPtblWb0.js.map → p-C3VPtV-F.js.map} +1 -1
- package/dist/components/{p-CwsunKGp.js → p-CssgRUtq.js} +5 -5
- package/dist/components/p-CssgRUtq.js.map +1 -0
- package/dist/components/{p-DI1Tz44s.js → p-VdirQ-rJ.js} +45 -29
- package/dist/components/p-VdirQ-rJ.js.map +1 -0
- package/dist/components/{p-COBB2gby.js → p-aoMMugzu.js} +3 -3
- package/dist/components/p-aoMMugzu.js.map +1 -0
- package/dist/components/p-cqNsYK8s.js +125 -0
- package/dist/components/p-cqNsYK8s.js.map +1 -0
- package/dist/components/{p-DEGJaJSs.js → p-hknsKJbL.js} +3 -3
- package/dist/components/p-hknsKJbL.js.map +1 -0
- package/dist/esm/ifx-alert_2.entry.js +1 -1
- package/dist/esm/ifx-card.entry.js +11 -21
- package/dist/esm/ifx-card.entry.js.map +1 -1
- package/dist/esm/ifx-chip.ifx-chip-item.ifx-pagination.entry.js.map +1 -1
- package/dist/esm/ifx-chip_3.entry.js +2 -2
- package/dist/esm/ifx-chip_3.entry.js.map +1 -1
- package/dist/esm/ifx-faq.entry.js +1 -1
- package/dist/esm/ifx-link.entry.js +1 -1
- package/dist/esm/ifx-link.entry.js.map +1 -1
- package/dist/esm/ifx-progress-bar.entry.js +1 -1
- package/dist/esm/ifx-progress-bar.entry.js.map +1 -1
- package/dist/esm/ifx-select.entry.js +43 -27
- package/dist/esm/ifx-select.entry.js.map +1 -1
- package/dist/esm/ifx-sidebar-item.entry.js +1 -1
- package/dist/esm/ifx-sidebar-item.entry.js.map +1 -1
- package/dist/esm/ifx-slider.entry.js +4 -4
- package/dist/esm/ifx-slider.entry.js.map +1 -1
- package/dist/esm/ifx-spinner.ifx-text-field.entry.js.map +1 -1
- package/dist/esm/ifx-spinner_2.entry.js +7 -7
- package/dist/esm/ifx-spinner_2.entry.js.map +1 -1
- package/dist/esm/ifx-status.entry.js +1 -1
- package/dist/esm/ifx-status.entry.js.map +1 -1
- package/dist/esm/ifx-step.entry.js +1 -1
- package/dist/esm/ifx-step.entry.js.map +1 -1
- package/dist/esm/ifx-stepper.entry.js +2 -2
- package/dist/esm/ifx-stepper.entry.js.map +1 -1
- package/dist/esm/ifx-switch.entry.js +1 -1
- package/dist/esm/ifx-switch.entry.js.map +1 -1
- package/dist/esm/ifx-tag.entry.js +2 -2
- package/dist/esm/ifx-tag.entry.js.map +1 -1
- package/dist/esm/ifx-templates-ui.entry.js +1 -1
- package/dist/esm/ifx-textarea.entry.js +3 -3
- package/dist/esm/ifx-textarea.entry.js.map +1 -1
- package/dist/esm/ifx-tooltip.entry.js +4 -4
- package/dist/esm/ifx-tooltip.entry.js.map +1 -1
- package/dist/esm/ifx-tree-view-item.entry.js +2 -2
- package/dist/esm/ifx-tree-view.entry.js +1 -1
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/ifx-card.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-chip.ifx-chip-item.ifx-pagination.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-link.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-progress-bar.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-select.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-sidebar-item.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-slider.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-spinner.ifx-text-field.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-status.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-step.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-stepper.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-switch.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-tag.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-textarea.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-tooltip.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-08ac6334.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-08ac6334.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-1453032c.entry.js +2 -0
- package/dist/infineon-design-system-stencil/{p-2c6da868.entry.js.map → p-1453032c.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-b248b5bd.entry.js → p-3d447d67.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-b248b5bd.entry.js.map → p-3d447d67.entry.js.map} +1 -1
- package/dist/infineon-design-system-stencil/{p-2e1df076.entry.js → p-4d2dfb65.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-4d2dfb65.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-f4ec4534.entry.js → p-5f5e674d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-6ae1a75c.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-6ae1a75c.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-475c14a5.entry.js → p-733cc7f4.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-733cc7f4.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-7780665b.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-7780665b.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-be4ca8d1.entry.js → p-7dd092cf.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-aee7a313.entry.js → p-863e520d.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-93caab64.entry.js → p-8ca1da22.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-9062208e.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-9062208e.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-3fbb730e.entry.js → p-993d003a.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-993d003a.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-f3310884.entry.js → p-a10a1d46.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-b0574298.entry.js → p-ade0ec39.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-ade0ec39.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-b9a871a7.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-b9a871a7.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-c51df9e9.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-c51df9e9.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/{p-3dbfa0c1.entry.js → p-c75a57a2.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-c75a57a2.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-cb838071.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-cb838071.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-f8f4af1c.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-f8f4af1c.entry.js.map +1 -0
- package/dist/types/components/card/card.d.ts +0 -1
- package/dist/types/components/slider/slider.d.ts +1 -0
- package/dist/types/components/slider/slider.stories.d.ts +13 -0
- package/dist/types/components/spinner/spinner.d.ts +1 -0
- package/dist/types/components/spinner/spinner.stories.d.ts +14 -0
- package/dist/types/components/stepper/stepper.d.ts +2 -0
- package/dist/types/components/stepper/stepper.stories.d.ts +28 -0
- package/dist/types/components/tag/tag.d.ts +2 -0
- package/dist/types/components/tag/tag.stories.d.ts +28 -0
- package/dist/types/components/text-field/text-field.d.ts +1 -0
- package/dist/types/components/text-field/text-field.stories.d.ts +14 -0
- package/dist/types/components/tooltip/tooltip.d.ts +1 -0
- package/dist/types/components/tooltip/tooltip.stories.d.ts +14 -0
- package/dist/types/components.d.ts +16 -0
- package/package.json +1 -1
- package/dist/components/p-AfeIKrPd.js.map +0 -1
- package/dist/components/p-BuWlOXJi.js +0 -124
- package/dist/components/p-BuWlOXJi.js.map +0 -1
- package/dist/components/p-COBB2gby.js.map +0 -1
- package/dist/components/p-CwsunKGp.js.map +0 -1
- package/dist/components/p-DEGJaJSs.js.map +0 -1
- package/dist/components/p-DI1Tz44s.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-2c6da868.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-2e1df076.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-3a737caf.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-3a737caf.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-3dbfa0c1.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-3fbb730e.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-42b14895.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-42b14895.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-475c14a5.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-4a828c58.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-4a828c58.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-552313f7.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-552313f7.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-7873796d.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-7873796d.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-90bb07d7.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-90bb07d7.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-b0574298.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ece8d8b9.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ece8d8b9.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-fbf48c26.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-fbf48c26.entry.js.map +0 -1
- /package/dist/infineon-design-system-stencil/{p-f4ec4534.entry.js.map → p-5f5e674d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-be4ca8d1.entry.js.map → p-7dd092cf.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-aee7a313.entry.js.map → p-863e520d.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-93caab64.entry.js.map → p-8ca1da22.entry.js.map} +0 -0
- /package/dist/infineon-design-system-stencil/{p-f3310884.entry.js.map → p-a10a1d46.entry.js.map} +0 -0
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,h as o}from"./p-DS8meZSd.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-DS8meZSd.js";const n=".container{padding-top:10px}";const t=class{constructor(o){e(this,o)}render(){return o("div",{key:"d65665af11d77f22eba694be830c0d2cbd1c2aed",class:"container"},o("ifx-accordion",{key:"21a6945e8e2989152d4ae3b525d0b03100289a53"},o("ifx-accordion-item",{key:"6a17004a92a541a569d0a0fcfc99ab3b036e0321",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:"173ea57ea7fb62173945b1c8c804e2472f174f34",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:"7344d949d820868fee6ab85b8197fdde1b4574c7",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:"6f242e7e3a4116bdf122905becd07fc8f8f4cd22",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:"1dd2fe2389021540de4d1ded1f66003592644a1d",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-8ca1da22.entry.js.map
|
@@ -0,0 +1,2 @@
|
|
1
|
+
import{r as e,c as i,h as t,a as s}from"./p-DS8meZSd.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{position:relative}.sidebar__nav-item,.sidebar__nav-item.header__section{box-sizing:border-box}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:2px solid #08665C;border:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}';const n=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.showIcon=true;this.showIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.active=false;this.isActionItem=false;this.internalActiveState=false}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.showIcon=false}else{this.showIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const a=this.getSidebarMenuItems(e);a.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){return t("div",{key:"7e0a398a47baab334837a55eb79cfd999c2fe99f"},t("a",{key:"d188e679861320c3c0d38e89dbc4bd503f120d24",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"4098174f3c52fd51466d78f9d7816f358b6002ed",class:`sidebar__nav-item-icon-wrapper ${!this.showIcon?"noIcon":""}`},t("ifx-icon",{key:"2248af3dc70c08a46c874e14ee88724e6eefbcd1",icon:this.icon})),t("div",{key:"4e5ec198e85e975d38acb5b111f6d2d3892438d9",class:"sidebar__nav-item-label"},t("slot",{key:"9fc8c5a800d790b82c341d8fd78b822dcd90c1e0"})),(this.isExpandable||!isNaN(this.numberIndicator))&&t("div",{key:"870741b1ced893333e08cef620ac28bf19a6e8c0",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"c08832e75d3ca68a891e4446b40f4b7cfbde30c6",class:"item__arrow-wrapper"},t("ifx-icon",{key:"a773892abff98167a8f452aab4ddbea6700521c9",icon:"chevron-down-16"})),!isNaN(this.numberIndicator)&&!this.isExpandable&&!this.isNested&&t("span",{key:"940f81e8d2cc81d792b72a76e5862b3df3a1803c",class:"item__number-indicator"},t("ifx-indicator",{key:"490c7c99c6fac419eceb233ade7e5d9a711d2fbf",variant:"number",number:this.numberIndicator})))),this.isExpandable&&t("ul",{key:"e810e46353df2fc6924e9d4e7e41690da7e1c72f",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};n.style=a;export{n as ifx_sidebar_item};
|
2
|
+
//# sourceMappingURL=p-9062208e.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["sidebarItemCss","SidebarItem","constructor","hostRef","this","icon","showIcon","showIconWrapper","href","internalHref","target","isExpandable","isNested","isSubMenuItem","active","isActionItem","internalActiveState","handleActiveChange","newValue","oldValue","labelElement","getNavItem","el","shadowRoot","handleClassList","handleConsoleError","event","detail","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","checkIfMenuItemIsSubMenu","navItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","toLowerCase","trim","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","componentWillLoad","componentWillUpdate","render","h","tabIndex","onKeyDown","onClick","class","isNaN","numberIndicator","variant","number"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n box-sizing: border-box;\n\n &:focus {\n\n outline: 2px solid tokens.$ifxColorOcean600; // Outline doesn't affect layout\n border: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n\n\n\n &:hover {\n outline: none;\n\n & .sidebar__nav-item-icon-wrapper {\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-label {\n outline: none;\n color: tokens.$ifxColorOcean600;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n }\n}\n\n.sidebar__nav-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n gap: 4px;\n flex: none;\n order: 0;\n flex-grow: 0;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n cursor: pointer;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n &.extra-padding__bottom {\n padding: 8px 0px 16px 0px;\n }\n\n &.active {\n color: tokens.$ifxColorOcean500;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n\n &.open {\n padding: 8px 0px;\n\n & .sidebar__nav-item-label {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n &.header__section {\n box-sizing: padding-box;\n border-top: 1px solid tokens.$ifxColorEngineering200;\n padding: 16px 0px;\n display: -webkit-flex;\n -webkit-line-clamp: 1;\n -webkit-box-orient: horizontal;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &.no-top-border {\n border-top: none;\n }\n\n &.active-section {\n &::before {\n content: \"\";\n position: absolute;\n left: -32px;\n height: 40px;\n width: 2px;\n background: tokens.$ifxColorOcean500;\n }\n }\n\n &.open {\n\n padding: 16px 0px 8px 0px;\n\n & .sidebar__nav-item-indicator {\n & .item__arrow-wrapper {\n & ifx-icon {\n transform: rotate(-180deg);\n }\n }\n }\n }\n\n & .sidebar__nav-item-label {\n color: tokens.$ifxColorBaseBlack;\n font-family: Source Sans 3;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 24px;\n }\n }\n\n &.submenu__item {\n padding: 4px 0px;\n\n &.extra-padding__bottom {\n padding: 4px 0px 16px 0px;\n }\n }\n\n & .sidebar__nav-item-icon-wrapper {\n display: flex;\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n justify-content: center;\n align-items: center;\n gap: tokens.$ifxSpace100;\n flex-shrink: 0;\n\n &.noIcon {\n display: none;\n }\n\n & ifx-icon {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n }\n }\n\n & .sidebar__nav-item-label {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n flex: none;\n order: 1;\n flex-grow: 1;\n cursor: pointer;\n }\n\n & .sidebar__nav-item-indicator {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px 4px;\n flex: none;\n order: 2;\n flex-grow: 0;\n }\n}\n\n.expandable__submenu {\n display: none;\n list-style-type: none;\n flex-direction: column;\n padding: 0;\n margin: 0;\n padding-left: 40px;\n\n &.open {\n display: flex;\n }\n}\n\n.header__section+.expandable__submenu {\n padding-left: 0;\n}","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-sidebar-item',\n styleUrl: 'sidebar-item.scss',\n shadow: true\n})\nexport class SidebarItem {\n @Element() el;\n @Prop() icon: string = \"\"\n @State() showIcon: boolean = true;\n @State() showIconWrapper: boolean = false;\n @Prop() href: string = \"\";\n @State() internalHref: string = \"\";\n @Prop() target: string = \"_self\";\n @State() isExpandable: boolean = false;\n @State() isNested: boolean = true;\n @State() isSubMenuItem: boolean = false;\n @Prop() numberIndicator: number;\n @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n @State() internalActiveState: boolean = false;\n\n @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n @Watch('active')\n handleActiveChange(newValue: boolean, oldValue: boolean) {\n // If the item is an action item, ignore the active prop\n if (this.isActionItem) {\n this.internalActiveState = false;\n return;\n }\n this.internalActiveState = newValue;\n if (newValue !== oldValue) {\n let labelElement = this.getNavItem(this.el.shadowRoot)\n if (!this.isExpandable && !newValue) {\n this.handleClassList(labelElement, 'remove', 'active');\n }\n if (!this.isExpandable && newValue) {\n this.handleClassList(labelElement, 'add', 'active');\n }\n }\n }\n\n\n\n @Listen('consoleError')\n handleConsoleError(event: CustomEvent<boolean>) {\n if (event.detail) {\n this.showIcon = false;\n } else {\n this.showIcon = true;\n }\n }\n\n handleEventEmission() {\n // Get the active item section\n this.ifxSidebarMenu.emit(this.el)\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n if (type === 'contains') {\n return el.classList.contains(className)\n }\n }\n\n getExpandableMenu() {\n const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n return expandableSubmenu\n }\n\n getNavItem(el) {\n return el?.querySelector('.sidebar__nav-item')\n }\n\n\n\n getSidebarMenuItems(el = this.el) {\n const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n if (sidebarItems.length === 0) {\n return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n }\n return sidebarItems;\n }\n\n getSidebarMenuItem() {\n const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n return sidebarItem;\n }\n\n\n toggleSubmenu() {\n if (this.isExpandable) {\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'toggle', 'open');\n this.handleClassList(menuItem, 'toggle', 'open');\n // Emit an event with the current component\n this.handleEventEmission();\n } else {\n // If the sidebar item is not expandable, it's a leaf item without a submenu.\n // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n return;\n } else { //its a navigation item which becomes active after clicking it\n this.handleActiveChange(true, this.internalActiveState)\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n if (this.handleItemClick) {\n this.handleItemClick(this.el);\n }\n }\n // // Emit an event with the current component\n // this.handleEventEmission();\n }\n\n\n\n handleExpandableMenu(sidebarItems) {\n const sidebarExpandableMenu = this.getExpandableMenu();\n sidebarItems.forEach((el: HTMLElement) => {\n const li = document.createElement('li')\n li.appendChild(el)\n sidebarExpandableMenu.appendChild(li)\n })\n }\n\n parentElementIsSidebar() {\n const parentElement = this.el.parentElement;\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n return true;\n } else return false;\n }\n\n checkIfMenuItemIsNested() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n this.isNested = false;\n }\n }\n\n checkIfMenuItemIsSubMenu() {\n const parentElement = this.el.parentElement;\n const navItem = this.getNavItem(parentElement.shadowRoot);\n if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n this.isSubMenuItem = true;\n }else {\n this.isSubMenuItem = false;\n }\n }\n\n isActive(iteratedComponent) {\n const activeAttributeValue = iteratedComponent.getAttribute('active');\n const isActive = activeAttributeValue === 'true';\n return isActive\n }\n\n getParentSection(el: HTMLElement) {\n let parentElement = el.parentElement;\n\n while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n return parentElement;\n }\n parentElement = parentElement.parentElement;\n }\n\n return null;\n }\n\n\n\n handleBorderIndicatorDisplacement(menuItem) {\n // Recursive function to handle each item\n const handleItem = (item, menuItem) => {\n const isActive = this.isActive(item);\n if (isActive) {\n const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n const activeMenuItemSection = this.getActiveItemSection();\n if (!isOpen) {\n this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n } else {\n this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n }\n }\n\n // Process each child item\n const children = this.getSidebarMenuItems(item);\n children.forEach((child) => handleItem(child, menuItem));\n }\n\n // Start with the top-level items\n const topLevelItems = this.getSidebarMenuItems();\n topLevelItems.forEach((item) => handleItem(item, menuItem));\n }\n\n\n setHref() {\n if (this.href.toLowerCase().trim() === \"\") {\n this.internalHref = undefined;\n } else this.internalHref = this.href;\n }\n\n getActiveItemSection() {\n const parentIsSidebar = this.parentElementIsSidebar()\n if (parentIsSidebar) {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n } else {\n const labelElement = this.getNavItem(this.el.shadowRoot)\n return labelElement;\n }\n }\n\n @Method()\n async setActiveClasses() {\n const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n this.handleClassList(activeMenuItem, 'add', 'active')\n }\n\n @Method()\n async expandMenu(ac: boolean){\n const menuItem = this.getSidebarMenuItem();\n const expandableMenu = this.getExpandableMenu();\n this.handleClassList(expandableMenu, 'add', 'open');\n this.handleClassList(menuItem, 'add', 'open');\n if(ac){\n this.handleClassList(expandableMenu, 'remove', 'active-section')\n this.handleClassList(menuItem, 'remove', 'active-section')\n }\n }\n \n @Method()\n async isItemExpandable(){\n return this.isExpandable;\n }\n\n handleActiveState() {\n if (this.internalActiveState) {\n this.setActiveClasses()\n }\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.toggleSubmenu()\n }\n }\n\n componentDidLoad() {\n this.handleActiveState();\n if (this.isExpandable) {\n const sidebarItems = this.getSidebarMenuItems();\n this.handleExpandableMenu(sidebarItems)\n }\n }\n \n componentWillLoad() {\n this.internalActiveState = this.active;\n this.checkIfMenuItemIsNested();\n this.checkIfMenuItemIsSubMenu();\n this.setHref()\n const sidebarItems = this.getSidebarMenuItems();\n if (sidebarItems.length !== 0) {\n this.isExpandable = true;\n } else {\n this.isExpandable = false;\n }\n }\n\n componentWillUpdate() {\n // If the active prop has been set to true and the internalActiveState has not been set to true yet\n if (this.active && !this.internalActiveState) {\n // Set the internal active state to true\n this.internalActiveState = this.active;\n\n // Emit the event to notify the parent Sidebar\n this.ifxSidebarNavigationItem.emit(this.el);\n }\n }\n\n\n render() {\n return (\n <div>\n <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n {this.icon &&\n <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : \"\"}`}>\n <ifx-icon icon={this.icon}></ifx-icon>\n </div>}\n <div class=\"sidebar__nav-item-label\">\n <slot />\n </div>\n {\n (this.isExpandable || !isNaN(this.numberIndicator)) &&\n <div class=\"sidebar__nav-item-indicator\">\n {this.isExpandable &&\n <span class='item__arrow-wrapper'>\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n }\n\n {!isNaN(this.numberIndicator) && !this.isExpandable && !this.isNested &&\n <span class='item__number-indicator'>\n <ifx-indicator variant='number' number={this.numberIndicator}></ifx-indicator>\n </span>}\n\n </div>\n }\n </a>\n {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n </div>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as t,c as e,h as s,a as i}from"./p-DS8meZSd.js";import{d as r,t as a}from"./p-DcmcuUOA.js";import{i as p}from"./p-Bw2fh5LT.js";const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const h=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(s[t-1]){if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}async componentDidLoad(){if(!p(this.el)){const t=r();a("ifx-stepper",await t)}this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"
|
2
|
-
//# sourceMappingURL=p-
|
1
|
+
import{r as t,c as e,h as s,a as i}from"./p-DS8meZSd.js";import{d as r,t as a}from"./p-DcmcuUOA.js";import{i as p}from"./p-Bw2fh5LT.js";const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const h=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(s[t-1]){if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}async componentDidLoad(){if(!p(this.el)){const t=r();a("ifx-stepper",await t)}this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"b6f600a4ac775e75049390caab2ced566970ee36","aria-label":this.ariaLabel,"aria-current":this.ariaCurrent,role:"navigation",class:`stepper ${this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant} ${this.variant==="compact"?"compact-"+this.indicatorPosition:""}`},this.variant==="compact"&&s("div",{key:"bda903cf14dadc424da369c9c1f087541da6fbc1",class:"stepper-progress"},s("div",{key:"da29036b9cadf2ff4455f08d94c546307a8905ff",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"0d76b7db3e6e947496a611549f67b434a5c407ec",class:`stepper-wrapper`},s("slot",{key:"29b4ebf6d13045c5f00760adb9a2342ef7338103"})))}componentDidRender(){if(this.variant=="compact"){const t=this.el.shadowRoot.querySelector(".stepper-progress");t.style.setProperty("--pb",`${this.activeStep/this.stepsCount*100}%`)}}get el(){return i(this)}static get watchers(){return{activeStep:["handleActiveStep"]}}};h.style=c;export{h as ifx_stepper};
|
2
|
+
//# sourceMappingURL=p-993d003a.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["stepperCss","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","ariaLabel","ariaCurrent","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n display: flex;\n align-items: center;\n \n &.compact {\n align-items: center;\n gap: 8px;\n \n &.compact-right {\n flex-direction: row-reverse;\n text-align: left;\n }\n \n .stepper-wrapper{\n width: unset;\n flex-direction: column;\n }\n }\n\n &.vertical {\n height: 100%;\n\n .stepper-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n}\n\n.stepper-wrapper {\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n display: flex;\n flex: 1;\n justify-content: flex-start;\n}\n\n.stepper-progress {\n display: flex;\n justify-content: center;\n align-items: center;\n font: tokens.$ifxBodyBodySemibold04;\n min-width: tokens.$ifxSize700;\n height: tokens.$ifxSize700;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n \n .progress-detail {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n }\n}\n\n","import { h, \n Component, \n Element, \n Event, \n EventEmitter, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\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-stepper',\n styleUrl: 'stepper.scss',\n shadow: true\n})\n\nexport class Stepper {\n @Element() el: HTMLElement;\n\n @Event() ifxChange: EventEmitter;\n\n @Prop({ mutable: true }) activeStep: number = 1;\n @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n @Prop() showStepNumber?: boolean = false;\n @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n @Prop() ariaLabel: string | null;\n @Prop() ariaCurrent: string | null;\n\n\n\n @State() stepsCount: number;\n @State() shouldEmitEvent: boolean = true;\n @State() emittedByClick: boolean = false;\n\n @Listen('ifxChange') \n onStepChange(event: CustomEvent) {\n const steps = this.getSteps();\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\n if (previousActiveStep && !previousActiveStep.complete) {\n previousActiveStep.setAttribute('error', 'true');\n }\n } \n\n @Watch('activeStep')\n handleActiveStep(newStep: number, oldStep: number) {\n const steps = this.getSteps();\n if (!this.shouldEmitEvent) {\n this.shouldEmitEvent = true;\n return;\n }\n // Skipping until the enabled step is found \n if(steps[newStep-1]) { \n if (!steps[newStep-1].disabled) {\n this.emitIfxChange(newStep, oldStep);\n } else {\n // If coming from higher step number to the lower step number\n if (newStep < oldStep) {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i >= 1 && steps[i-1].disabled) i--;\n // if all the steps are disabled no change.\n if (i < 1) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n } \n // If coming from lower step number to the higher step number\n else {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\n if (i > this.stepsCount) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n }\n }\n }\n }\n \n emitIfxChange(activeStep: number, previousActiveStep: number) {\n this.ifxChange.emit({activeStep: activeStep, \n previousActiveStep: previousActiveStep, \n totalSteps: this.stepsCount,\n emittedByClick: this.emittedByClick\n });\n this.emittedByClick = false;\n }\n\n getSteps() {\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n return steps;\n }\n\n\n addStepIdsToStepsAndCountSteps() {\n const steps = this.getSteps()\n steps[steps.length - 1].lastStep = true;\n for (let i = 0; i < steps.length; i++) {\n steps[i].stepId = i + 1;\n }\n this.stepsCount = steps.length;\n }\n\n\n setActiveStep(stepId: number, setByClick: boolean = false) {\n this.emittedByClick = setByClick;\n this.activeStep = stepId;\n }\n\n setStepsBeforeActiveToComplete() {\n const steps = this.getSteps();\n steps.forEach( (step, stepId) => {\n if (stepId+1 < this.activeStep) step.complete = true;\n });\n }\n\n syncIfxSteps() {\n const steps = this.getSteps()\n for (let i = 0; i < steps.length; i++) {\n const stepperState: StepperState = { \n activeStep: this.activeStep,\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n showStepNumber: this.showStepNumber, \n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n setActiveStep: this.setActiveStep.bind(this)\n };\n steps[i].stepperState = stepperState;\n }\n }\n\n setInitialActiveStep() {\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n }\n\n\n componentWillLoad() {\n this.addStepIdsToStepsAndCountSteps();\n this.setInitialActiveStep();\n this.setStepsBeforeActiveToComplete();\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-stepper', await framework)\n }\n this.syncIfxSteps();\n }\n\n componentWillUpdate() {\n this.syncIfxSteps();\n }\n\n render() {\n return (\n <div aria-label = {this.ariaLabel}\n aria-current={this.ariaCurrent}\n role = 'navigation' \n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n {\n /* Progress bar for compact variant. */\n (this.variant === 'compact') && \n <div class = 'stepper-progress'>\n <div class = 'progress-detail'>\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n </div>\n </div>\n }\n \n {/* Slot for ifx-steps. */}\n <div class = {`stepper-wrapper`}>\n <slot />\n </div>\n </div>\n );\n };\n\n componentDidRender() {\n /* Updating progress bar in compact version. */\n if (this.variant == 'compact') {\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import{r as e,c as a,h as t,a as s}from"./p-DS8meZSd.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-DS8meZSd.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:"2416bba6c7a463c881349da1040cf63634ee75d5",class:`tree-view ${this.disableAllItems?" tree-view--disabled":""}`,role:"tree","aria-label":this.ariaLabel},this.label&&this.label.trim()!==""&&t("div",{key:"84f4d5a8610fd7c92059b3e04c99b92271bcf5df",class:"tree-view__label"},this.label),t("slot",{key:"2adfecbdcf546603e8da93a30db53f3d5ca7f5e1",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-a10a1d46.entry.js.map
|