@infineon/infineon-design-system-stencil 40.0.0--canary.2100.19856982753.0 → 40.0.0--canary.2100.19891420459.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-accordion.ifx-accordion-item.entry.cjs.js.map +1 -1
- package/dist/cjs/ifx-accordion_2.cjs.entry.js +9 -13
- package/dist/cjs/ifx-faq.entry.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/accordion/accordionItem.css +27 -4
- package/dist/collection/components/accordion/accordionItem.js +8 -12
- package/dist/collection/components/accordion/accordionItem.js.map +1 -1
- package/dist/collection/storybook/stories/setup-and-installation/faq/faq.js.map +1 -0
- package/dist/components/ifx-accordion-item.js +1 -1
- package/dist/components/ifx-faq.js +1 -1
- package/dist/components/ifx-faq.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/{p-D0qbTJic.js → p-CVb-Yn3-.js} +11 -15
- package/dist/components/p-CVb-Yn3-.js.map +1 -0
- package/dist/esm/ifx-accordion.ifx-accordion-item.entry.js.map +1 -1
- package/dist/esm/ifx-accordion_2.entry.js +9 -13
- package/dist/esm/ifx-faq.entry.js.map +1 -1
- package/dist/hydrate/index.js +9 -13
- package/dist/hydrate/index.mjs +9 -13
- package/dist/infineon-design-system-stencil/ifx-accordion.ifx-accordion-item.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-faq.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-188353de.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-188353de.entry.js.map +1 -0
- package/package.json +4 -3
- package/readme.md +181 -63
- package/dist/collection/stories/setup-and-installation/faq/faq.js.map +0 -1
- package/dist/components/p-D0qbTJic.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-95cd4e29.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-95cd4e29.entry.js.map +0 -1
- /package/dist/collection/{stories → storybook/stories}/setup-and-installation/faq/faq.css +0 -0
- /package/dist/collection/{stories → storybook/stories}/setup-and-installation/faq/faq.js +0 -0
- /package/dist/types/{stories → storybook/stories}/setup-and-installation/faq/faq.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, Element, h, Listen, Prop } from \"@stencil/core\";\nimport { isNestedInIfxComponent } from \"../../shared/utils/dom-utils\";\nimport { detectFramework } from \"../../shared/utils/framework-detection\";\nimport { trackComponent } from \"../../shared/utils/tracking\";\n\n@Component({\n\ttag: \"ifx-accordion\",\n\tstyleUrl: \"accordion.scss\",\n\tshadow: { delegatesFocus: true },\n})\nexport class Accordion {\n\t@Element() el: HTMLElement;\n\t@Prop() autoCollapse: boolean = false;\n\n\tasync componentDidLoad() {\n\t\tif (!isNestedInIfxComponent(this.el)) {\n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent(\"ifx-accordion\", await framework);\n\t\t}\n\t}\n\n\t@Listen(\"ifxOpen\")\n\tasync onItemOpen(event: CustomEvent) {\n\t\tif (this.autoCollapse) {\n\t\t\tconst items = Array.from(this.el.querySelectorAll(\"ifx-accordion-item\"));\n\t\t\tfor (const item of items) {\n\t\t\t\tconst itemElement = item as HTMLIfxAccordionItemElement;\n\t\t\t\tif (itemElement !== event.target && (await itemElement.open)) {\n\t\t\t\t\titemElement.open = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"accordion-wrapper\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n //transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\ttype EventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-accordion-item\",\n\tstyleUrl: \"accordionItem.scss\",\n\tshadow: true,\n})\nexport class AccordionItem {\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop({\n\t\tmutable: true,\n\t})\n\topen: boolean = false;\n\t@Prop() AriaLevel = 3;\n\t@State() internalOpen: boolean = false;\n\t@Event() ifxOpen: EventEmitter;\n\t@Event() ifxClose: EventEmitter;\n\tprivate contentEl!: HTMLElement;\n\tprivate titleEl!: HTMLElement;\n\tprivate resizeObserver!: ResizeObserver;\n\n\tcomponentWillLoad() {\n\t\tthis.internalOpen = this.open;\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t\tthis.contentEl = this.el.shadowRoot.querySelector(\"#accordion-content\");\n\t\tif (this.contentEl) {\n\t\t\tthis.attachResizeObserver();\n\t\t}\n\t}\n\n\tcomponentDidUpdate() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t}\n\n\t@Watch(\"open\")\n\topenChanged(newValue: boolean) {\n\t\tthis.internalOpen = newValue;\n\t}\n\n\ttoggleOpen() {\n\t\tthis.internalOpen = !this.internalOpen;\n\t\tthis.open = this.internalOpen;\n\n\t\tif (this.internalOpen) {\n\t\t\tthis.ifxOpen.emit({ isOpen: this.internalOpen });\n\t\t} else {\n\t\t\tthis.ifxClose.emit({ isClosed: !this.internalOpen });\n\t\t}\n\t}\n\n\topenAccordionItem() {\n\t\tif (this.contentEl) {\n\t\t\tif (this.internalOpen) {\n\t\t\t\tthis.contentEl.style.height = \"auto\";\n\t\t\t\tconst updatedHeight = this.contentEl.scrollHeight;\n\t\t\t\tthis.contentEl.style.height = `${updatedHeight}px`;\n\t\t\t\tthis.contentEl.style.overflow = \"visible\";\n\t\t\t} else {\n\t\t\t\tthis.contentEl.style.height = \"0\";\n\t\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t\t}\n\t\t}\n\t}\n\n\tgetInnerContentWrapper() {\n\t\tconst innerContentEl = this.el.shadowRoot.querySelector(\".inner-content\");\n\t\treturn innerContentEl;\n\t}\n\n\tattachResizeObserver() {\n\t\tconst innerContentEl = this.getInnerContentWrapper();\n\n\t\tif (innerContentEl) {\n\t\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this.internalOpen) {\n\t\t\t\t\tthis.openAccordionItem();\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.resizeObserver.observe(innerContentEl);\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\thandleKeydown(ev: KeyboardEvent) {\n\t\tconst path = ev.composedPath();\n\n\t\tif (!path.includes(this.titleEl)) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch (ev.key) {\n\t\t\tcase \"Enter\": // fallthrough\n\t\t\tcase \" \": // space\n\t\t\t\tev.preventDefault();\n\t\t\t\tthis.toggleOpen();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tcheckSlotContent() {\n\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\") as HTMLSlotElement;\n\t\tconst hasContent = slot.assignedNodes().length > 0;\n\t\tconst innerContent = this.getInnerContentWrapper();\n\t\tif (!hasContent) {\n\t\t\tinnerContent.classList.add(\"no-content\");\n\t\t} else if (innerContent.classList.contains(\"no-content\")) {\n\t\t\tinnerContent.classList.remove(\"no-content\");\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={`accordion-item ${this.internalOpen ? \"open\" : \"\"}`}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-expanded={this.internalOpen}\n\t\t\t\t\taria-controls=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-title\"\n\t\t\t\t\tonClick={() => this.toggleOpen()}\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\tref={(el) => (this.titleEl = el as HTMLElement)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\taria-level={String(this.AriaLevel) as string}\n\t\t\t\t\t\tclass=\"accordion-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ifx-icon icon=\"chevron-down-16\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span id=\"accordion-caption\" class=\"accordion-caption\">\n\t\t\t\t\t\t{this.caption}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-content\"\n\t\t\t\t\tref={(el) => (this.contentEl = el as HTMLElement)}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby=\"accordion-caption\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, Element, h, Listen, Prop } from \"@stencil/core\";\nimport { isNestedInIfxComponent } from \"../../shared/utils/dom-utils\";\nimport { detectFramework } from \"../../shared/utils/framework-detection\";\nimport { trackComponent } from \"../../shared/utils/tracking\";\n\n@Component({\n\ttag: \"ifx-accordion\",\n\tstyleUrl: \"accordion.scss\",\n\tshadow: { delegatesFocus: true },\n})\nexport class Accordion {\n\t@Element() el: HTMLElement;\n\t@Prop() autoCollapse: boolean = false;\n\n\tasync componentDidLoad() {\n\t\tif (!isNestedInIfxComponent(this.el)) {\n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent(\"ifx-accordion\", await framework);\n\t\t}\n\t}\n\n\t@Listen(\"ifxOpen\")\n\tasync onItemOpen(event: CustomEvent) {\n\t\tif (this.autoCollapse) {\n\t\t\tconst items = Array.from(this.el.querySelectorAll(\"ifx-accordion-item\"));\n\t\t\tfor (const item of items) {\n\t\t\t\tconst itemElement = item as HTMLIfxAccordionItemElement;\n\t\t\t\tif (itemElement !== event.target && (await itemElement.open)) {\n\t\t\t\t\titemElement.open = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"accordion-wrapper\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n overflow: hidden;\n height: 0;\n transition: height 0.3s ease;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace200;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n align-self: stretch;\n margin: 0 4px 4px;\n border: 1px solid transparent;\n border-top: 1px solid transparent;\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n.accordion-item.open .accordion-content {\n max-height: 1000px; // Arbitrary large value to allow content to expand\n}\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n border-color: tokens.$ifxColorEngineering200;\n border-top-color: transparent;\n transition: border-color 0s; \n}\n\n.accordion-item:not(.open) .inner-content {\n transition: border-color 0s 0.3s; \n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n margin: 0;\n }\n}","//ifxAccordionItem\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\ttype EventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-accordion-item\",\n\tstyleUrl: \"accordionItem.scss\",\n\tshadow: true,\n})\nexport class AccordionItem {\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop({\n\t\tmutable: true,\n\t})\n\topen: boolean = false;\n\t@Prop() AriaLevel = 3;\n\t@State() internalOpen: boolean = false;\n\t@Event() ifxOpen: EventEmitter;\n\t@Event() ifxClose: EventEmitter;\n\tprivate contentEl!: HTMLElement;\n\tprivate titleEl!: HTMLElement;\n\tprivate resizeObserver!: ResizeObserver;\n\n\tcomponentWillLoad() {\n\t\tthis.internalOpen = this.open;\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t\tthis.contentEl = this.el.shadowRoot.querySelector(\"#accordion-content\");\n\t\tif (this.contentEl) {\n\t\t\tthis.attachResizeObserver();\n\t\t}\n\t}\n\n\tcomponentDidUpdate() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t}\n\n\t@Watch(\"open\")\n\topenChanged(newValue: boolean) {\n\t\tthis.internalOpen = newValue;\n\t}\n\n\ttoggleOpen() {\n\t\tthis.internalOpen = !this.internalOpen;\n\t\tthis.open = this.internalOpen;\n\n\t\tif (this.internalOpen) {\n\t\t\tthis.ifxOpen.emit({ isOpen: this.internalOpen });\n\t\t} else {\n\t\t\tthis.ifxClose.emit({ isClosed: !this.internalOpen });\n\t\t}\n\t}\n\n\topenAccordionItem() {\n\t\tif (this.internalOpen) {\n\t\t\tthis.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t} else {\n\t\t\tthis.contentEl.style.height = \"0\";\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t}\n\t}\n\n\tgetInnerContentWrapper() {\n\t\tconst innerContentEl = this.el.shadowRoot.querySelector(\".inner-content\");\n\t\treturn innerContentEl;\n\t}\n\n\tattachResizeObserver() {\n\t\tconst innerContentEl = this.getInnerContentWrapper();\n\n\t\tif (innerContentEl) {\n\t\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this.internalOpen) {\n\t\t\t\t\tthis.openAccordionItem();\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.resizeObserver.observe(innerContentEl);\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\thandleKeydown(ev: KeyboardEvent) {\n\t\tconst path = ev.composedPath();\n\n\t\tif (!path.includes(this.titleEl)) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch (ev.key) {\n\t\t\tcase \"Enter\": // fallthrough\n\t\t\tcase \" \": // space\n\t\t\t\tev.preventDefault();\n\t\t\t\tthis.toggleOpen();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tcheckSlotContent() {\n\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\") as HTMLSlotElement;\n\t\tconst hasContent = slot.assignedNodes().length > 0;\n\t\tconst innerContent = this.getInnerContentWrapper();\n\t\tif (!hasContent) {\n\t\t\tinnerContent.classList.add(\"no-content\");\n\t\t} else if (innerContent.classList.contains(\"no-content\")) {\n\t\t\tinnerContent.classList.remove(\"no-content\");\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={`accordion-item ${this.internalOpen ? \"open\" : \"\"}`}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-expanded={this.internalOpen}\n\t\t\t\t\taria-controls=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-title\"\n\t\t\t\t\tonClick={() => this.toggleOpen()}\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\tref={(el) => (this.titleEl = el as HTMLElement)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\taria-level={String(this.AriaLevel) as string}\n\t\t\t\t\t\tclass=\"accordion-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ifx-icon icon=\"chevron-down-16\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span id=\"accordion-caption\" class=\"accordion-caption\">\n\t\t\t\t\t\t{this.caption}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-content\"\n\t\t\t\t\tref={(el) => (this.contentEl = el as HTMLElement)}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby=\"accordion-caption\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,uHAAuH;;MCU/H,SAAS,GAAA,MAAA;;;;;IAEb,YAAY,GAAY,KAAK;AAErC,IAAA,MAAM,gBAAgB,GAAA;QACrB,IAAI,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACrC,YAAA,MAAM,SAAS,GAAGC,wBAAe,EAAE;AACnC,YAAAC,uBAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAKlD,MAAM,UAAU,CAAC,KAAkB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AACxE,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACzB,MAAM,WAAW,GAAG,IAAmC;AACvD,gBAAA,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;AAC7D,oBAAA,WAAW,CAAC,IAAI,GAAG,KAAK;;;;;IAM5B,MAAM,GAAA;QACL,QACCC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC7BA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;ACtCT,MAAM,gBAAgB,GAAG,63CAA63C;;MCkBz4C,aAAa,GAAA,MAAA;;;;;;;AAEjB,IAAA,OAAO;IAIf,IAAI,GAAY,KAAK;IACb,SAAS,GAAG,CAAC;IACZ,YAAY,GAAY,KAAK;AAC7B,IAAA,OAAO;AACP,IAAA,QAAQ;AACT,IAAA,SAAS;AACT,IAAA,OAAO;AACP,IAAA,cAAc;IAEtB,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;IAG9B,gBAAgB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACvE,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,oBAAoB,EAAE;;;IAI7B,kBAAkB,GAAA;QACjB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;;AAIzB,IAAA,WAAW,CAAC,QAAiB,EAAA;AAC5B,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;IAG7B,UAAU,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;AACtC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY;AAE7B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;aAC1C;AACN,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;;IAItD,iBAAiB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI;YAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;aAClC;YACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;YACjC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;;IAI1C,sBAAsB,GAAA;AACrB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACzE,QAAA,OAAO,cAAc;;IAGtB,oBAAoB,GAAA;AACnB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAEpD,IAAI,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;AAC7C,gBAAA,IAAI,IAAI,CAAC,YAAY,EAAE;oBACtB,IAAI,CAAC,iBAAiB,EAAE;;AAE1B,aAAC,CAAC;AAEF,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC;;;AAK7C,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC9B,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE;QAE9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACjC;;AAGD,QAAA,QAAQ,EAAE,CAAC,GAAG;YACb,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACP,EAAE,CAAC,cAAc,EAAE;gBACnB,IAAI,CAAC,UAAU,EAAE;gBACjB;;;IAIH,gBAAgB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB;QACxE,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAClD,IAAI,CAAC,UAAU,EAAE;AAChB,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;;aAClC,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACzD,YAAA,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC;;;IAI7C,MAAM,GAAA;QACL,QACCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC9DA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,YAAY,EAClB,eAAA,EAAA,mBAAmB,EACjC,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,QAAQ,EAAC,GAAG,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC,EAAA,EAE/CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EACa,MAAM,EAClB,IAAI,EAAC,SAAS,EACF,YAAA,EAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAW,EAC5C,KAAK,EAAC,gBAAgB,EAAA,EAEtBA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC7B,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAA,EACpD,IAAI,CAAC,OAAO,CACP,CACF,EACNA,OACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EACjD,IAAI,EAAC,QAAQ,EAAA,iBAAA,EACG,mBAAmB,EAAA,EAEnCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACD,CACD;;;;;;;;;;;"}
|
|
@@ -36,7 +36,7 @@ const Accordion = class {
|
|
|
36
36
|
};
|
|
37
37
|
Accordion.style = accordionCss;
|
|
38
38
|
|
|
39
|
-
const accordionItemCss = ".accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:
|
|
39
|
+
const accordionItemCss = ".accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}";
|
|
40
40
|
|
|
41
41
|
const AccordionItem = class {
|
|
42
42
|
constructor(hostRef) {
|
|
@@ -83,17 +83,13 @@ const AccordionItem = class {
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
openAccordionItem() {
|
|
86
|
-
if (this.
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
else {
|
|
94
|
-
this.contentEl.style.height = "0";
|
|
95
|
-
this.contentEl.style.overflow = "hidden";
|
|
96
|
-
}
|
|
86
|
+
if (this.internalOpen) {
|
|
87
|
+
this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
|
|
88
|
+
this.contentEl.style.overflow = "hidden";
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
this.contentEl.style.height = "0";
|
|
92
|
+
this.contentEl.style.overflow = "hidden";
|
|
97
93
|
}
|
|
98
94
|
}
|
|
99
95
|
getInnerContentWrapper() {
|
|
@@ -136,7 +132,7 @@ const AccordionItem = class {
|
|
|
136
132
|
}
|
|
137
133
|
}
|
|
138
134
|
render() {
|
|
139
|
-
return (index.h("div", { key: '
|
|
135
|
+
return (index.h("div", { key: 'd0659e9848ec1c283922245ede1c43f4d437f2e9', class: `accordion-item ${this.internalOpen ? "open" : ""}` }, index.h("div", { key: '5602bba8be10049019a41a78a140a8f3cb5ff84e', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: (el) => (this.titleEl = el) }, index.h("span", { key: 'ba38b4ad9659b0dda1d4e9c4f951b164782f461c', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: '30b3cd4afde52cde304bfd9b1d0650a1167dcffd', icon: "chevron-down-16" })), index.h("span", { key: 'c488542b9e8622de256d2c02a26f58da51836164', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '86481e71ceda4b3f452d77f5930fadac5a7fe58a', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '0beb27fdd4d691b165267ce0d0b29a817cdfd71a', class: "inner-content" }, index.h("slot", { key: 'f988897e355f52624d51aa301b4407ef05f7a928' })))));
|
|
140
136
|
}
|
|
141
137
|
static get watchers() { return {
|
|
142
138
|
"open": ["openChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-faq.entry.cjs.js","sources":["src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n padding-top: 10px;\n}","import { Component, h } from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-faq\",\n\tstyleUrl: \"./faq.scss\",\n\tshadow: true,\n})\nexport class Faq {\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"container\">\n\t\t\t\t<ifx-accordion>\n\t\t\t\t\t<ifx-accordion-item caption=\"What is the Infineon DDS?\">\n\t\t\t\t\t\tThe Infineon Digital Design System consists of code components,\n\t\t\t\t\t\tdesign principles, tools and guidelines as well as a dedicated\n\t\t\t\t\t\tinterdisciplinary team. Its purpose is to support internal and\n\t\t\t\t\t\texternal colleagues create digital user interfaces with a high level\n\t\t\t\t\t\tof usability as well as a consistent expression of the Infineon\n\t\t\t\t\t\tbrand. The DDS does not focus on the content of a web application\n\t\t\t\t\t\tbut it describes how the design of the application’s structure\n\t\t\t\t\t\tshould be.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How do I get access to the DDS?\">\n\t\t\t\t\t\tYou can use the provided Figma file as a foundation for mockups and\n\t\t\t\t\t\tprototypes, use Storybook to view what UI components and variants\n\t\t\t\t\t\tare available and use code components provided via Storybook or\n\t\t\t\t\t\tGithub.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n\t\t\t\t\t\tYes, you can. We are happy to discuss with you which point in time\n\t\t\t\t\t\tand which scope of integration is bestsuited for updating your\n\t\t\t\t\t\tinterface to the Infineon DDS. (To avoid that users get confused by\n\t\t\t\t\t\ta mixture of UI components, we recommend choosing larger updates or\n\t\t\t\t\t\ttechnology changes as opportunity to integrate the Infineon DDS.)\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n\t\t\t\t\t\tWe have taken WCAG 2.0 Level AA as baseline level for all design\n\t\t\t\t\t\tdecisions inside the Infineon Digital Design System. To make an\n\t\t\t\t\t\tonline experience truly accessible you have to implement the\n\t\t\t\t\t\tspecific code, content, and visual design according to the\n\t\t\t\t\t\taccessibility standard. Find an introduction to this topic here.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How to request a new component?\">\n\t\t\t\t\t\tPlease contact us like described in the contribution section! We are\n\t\t\t\t\t\tplanning to expand the number of components continually. If your\n\t\t\t\t\t\tcomponent is also usable for multiple other projects, there is a\n\t\t\t\t\t\tgood chance we might work together with you.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t</ifx-accordion>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,GAAA,MAAA;;;;IACf,MAAM,GAAA;QACL,QACCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACrBA,OAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACCA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EASlC,EAAA,qdAAA,CAAA,EACrBA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAKxC,EAAA,+MAAA,CAAA,EACrBA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAM1D,EAAA,6UAAA,CAAA,EACrBA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAMhD,EAAA,2TAAA,CAAA,EACrBA,OAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAKxC,CACN,CACX;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"ifx-faq.entry.cjs.js","sources":["src/storybook/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/storybook/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n padding-top: 10px;\n}","import { Component, h } from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-faq\",\n\tstyleUrl: \"./faq.scss\",\n\tshadow: true,\n})\nexport class Faq {\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"container\">\n\t\t\t\t<ifx-accordion>\n\t\t\t\t\t<ifx-accordion-item caption=\"What is the Infineon DDS?\">\n\t\t\t\t\t\tThe Infineon Digital Design System consists of code components,\n\t\t\t\t\t\tdesign principles, tools and guidelines as well as a dedicated\n\t\t\t\t\t\tinterdisciplinary team. Its purpose is to support internal and\n\t\t\t\t\t\texternal colleagues create digital user interfaces with a high level\n\t\t\t\t\t\tof usability as well as a consistent expression of the Infineon\n\t\t\t\t\t\tbrand. The DDS does not focus on the content of a web application\n\t\t\t\t\t\tbut it describes how the design of the application’s structure\n\t\t\t\t\t\tshould be.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How do I get access to the DDS?\">\n\t\t\t\t\t\tYou can use the provided Figma file as a foundation for mockups and\n\t\t\t\t\t\tprototypes, use Storybook to view what UI components and variants\n\t\t\t\t\t\tare available and use code components provided via Storybook or\n\t\t\t\t\t\tGithub.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n\t\t\t\t\t\tYes, you can. We are happy to discuss with you which point in time\n\t\t\t\t\t\tand which scope of integration is bestsuited for updating your\n\t\t\t\t\t\tinterface to the Infineon DDS. (To avoid that users get confused by\n\t\t\t\t\t\ta mixture of UI components, we recommend choosing larger updates or\n\t\t\t\t\t\ttechnology changes as opportunity to integrate the Infineon DDS.)\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n\t\t\t\t\t\tWe have taken WCAG 2.0 Level AA as baseline level for all design\n\t\t\t\t\t\tdecisions inside the Infineon Digital Design System. To make an\n\t\t\t\t\t\tonline experience truly accessible you have to implement the\n\t\t\t\t\t\tspecific code, content, and visual design according to the\n\t\t\t\t\t\taccessibility standard. Find an introduction to this topic here.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How to request a new component?\">\n\t\t\t\t\t\tPlease contact us like described in the contribution section! We are\n\t\t\t\t\t\tplanning to expand the number of components continually. If your\n\t\t\t\t\t\tcomponent is also usable for multiple other projects, there is a\n\t\t\t\t\t\tgood chance we might work together with you.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t</ifx-accordion>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,GAAA,MAAA;;;;IACf,MAAM,GAAA;QACL,QACCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACrBA,OAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACCA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EASlC,EAAA,qdAAA,CAAA,EACrBA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAKxC,EAAA,+MAAA,CAAA,EACrBA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAM1D,EAAA,6UAAA,CAAA,EACrBA,OAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAMhD,EAAA,2TAAA,CAAA,EACrBA,OAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAKxC,CACN,CACX;;;;;;;"}
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"components/textarea/textarea.js",
|
|
83
83
|
"components/tooltip/tooltip.js",
|
|
84
84
|
"components/tree-view/tree-view.js",
|
|
85
|
-
"stories/setup-and-installation/faq/faq.js"
|
|
85
|
+
"storybook/stories/setup-and-installation/faq/faq.js"
|
|
86
86
|
],
|
|
87
87
|
"compiler": {
|
|
88
88
|
"name": "@stencil/core",
|
|
@@ -46,6 +46,9 @@
|
|
|
46
46
|
|
|
47
47
|
.accordion-content {
|
|
48
48
|
gap: 8px;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
height: 0;
|
|
51
|
+
transition: height 0.3s ease;
|
|
49
52
|
line-height: 24px;
|
|
50
53
|
font-size: 1rem;
|
|
51
54
|
font-weight: 400;
|
|
@@ -53,13 +56,13 @@
|
|
|
53
56
|
|
|
54
57
|
.inner-content {
|
|
55
58
|
background-color: #FFFFFF;
|
|
56
|
-
padding:
|
|
57
|
-
/* wraps text at spaces and within words */
|
|
59
|
+
padding: 16px;
|
|
58
60
|
word-wrap: break-word;
|
|
59
|
-
/* breaks text within a word if necessary */
|
|
60
61
|
overflow-wrap: anywhere;
|
|
61
62
|
align-self: stretch;
|
|
62
|
-
|
|
63
|
+
margin: 0 4px 4px;
|
|
64
|
+
border: 1px solid transparent;
|
|
65
|
+
border-top: 1px solid transparent;
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
.accordion-icon {
|
|
@@ -71,6 +74,26 @@
|
|
|
71
74
|
color: #08665C;
|
|
72
75
|
}
|
|
73
76
|
|
|
77
|
+
.accordion-item.open .accordion-content {
|
|
78
|
+
max-height: 1000px;
|
|
79
|
+
}
|
|
80
|
+
|
|
74
81
|
.accordion-item.open .accordion-icon {
|
|
75
82
|
transform: rotate(-180deg);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.accordion-item.open .inner-content {
|
|
86
|
+
border-color: #EEEDED;
|
|
87
|
+
border-top-color: transparent;
|
|
88
|
+
transition: border-color 0s;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.accordion-item:not(.open) .inner-content {
|
|
92
|
+
transition: border-color 0s 0.3s;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.inner-content.no-content {
|
|
96
|
+
border: none;
|
|
97
|
+
padding: 0;
|
|
98
|
+
margin: 0;
|
|
76
99
|
}
|
|
@@ -40,17 +40,13 @@ export class AccordionItem {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
openAccordionItem() {
|
|
43
|
-
if (this.
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
else {
|
|
51
|
-
this.contentEl.style.height = "0";
|
|
52
|
-
this.contentEl.style.overflow = "hidden";
|
|
53
|
-
}
|
|
43
|
+
if (this.internalOpen) {
|
|
44
|
+
this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
|
|
45
|
+
this.contentEl.style.overflow = "hidden";
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
this.contentEl.style.height = "0";
|
|
49
|
+
this.contentEl.style.overflow = "hidden";
|
|
54
50
|
}
|
|
55
51
|
}
|
|
56
52
|
getInnerContentWrapper() {
|
|
@@ -93,7 +89,7 @@ export class AccordionItem {
|
|
|
93
89
|
}
|
|
94
90
|
}
|
|
95
91
|
render() {
|
|
96
|
-
return (h("div", { key: '
|
|
92
|
+
return (h("div", { key: 'd0659e9848ec1c283922245ede1c43f4d437f2e9', class: `accordion-item ${this.internalOpen ? "open" : ""}` }, h("div", { key: '5602bba8be10049019a41a78a140a8f3cb5ff84e', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: (el) => (this.titleEl = el) }, h("span", { key: 'ba38b4ad9659b0dda1d4e9c4f951b164782f461c', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '30b3cd4afde52cde304bfd9b1d0650a1167dcffd', icon: "chevron-down-16" })), h("span", { key: 'c488542b9e8622de256d2c02a26f58da51836164', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '86481e71ceda4b3f452d77f5930fadac5a7fe58a', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '0beb27fdd4d691b165267ce0d0b29a817cdfd71a', class: "inner-content" }, h("slot", { key: 'f988897e355f52624d51aa301b4407ef05f7a928' })))));
|
|
97
93
|
}
|
|
98
94
|
static get is() { return "ifx-accordion-item"; }
|
|
99
95
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EACN,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,aAAa;IACd,EAAE,CAAC;IACN,OAAO,CAAS;IAIxB,IAAI,GAAY,KAAK,CAAC;IACd,SAAS,GAAG,CAAC,CAAC;IACb,YAAY,GAAY,KAAK,CAAC;IAC9B,OAAO,CAAe;IACtB,QAAQ,CAAe;IACxB,SAAS,CAAe;IACxB,OAAO,CAAe;IACtB,cAAc,CAAkB;IAExC,iBAAiB;QAChB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;IAC/B,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACxE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC7B,CAAC;IACF,CAAC;IAED,kBAAkB;QACjB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC1B,CAAC;IAGD,WAAW,CAAC,QAAiB;QAC5B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;IAC9B,CAAC;IAED,UAAU;QACT,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE9B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAClD,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QACtD,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxAccordionItem\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\ttype EventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-accordion-item\",\n\tstyleUrl: \"accordionItem.scss\",\n\tshadow: true,\n})\nexport class AccordionItem {\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop({\n\t\tmutable: true,\n\t})\n\topen: boolean = false;\n\t@Prop() AriaLevel = 3;\n\t@State() internalOpen: boolean = false;\n\t@Event() ifxOpen: EventEmitter;\n\t@Event() ifxClose: EventEmitter;\n\tprivate contentEl!: HTMLElement;\n\tprivate titleEl!: HTMLElement;\n\tprivate resizeObserver!: ResizeObserver;\n\n\tcomponentWillLoad() {\n\t\tthis.internalOpen = this.open;\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t\tthis.contentEl = this.el.shadowRoot.querySelector(\"#accordion-content\");\n\t\tif (this.contentEl) {\n\t\t\tthis.attachResizeObserver();\n\t\t}\n\t}\n\n\tcomponentDidUpdate() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t}\n\n\t@Watch(\"open\")\n\topenChanged(newValue: boolean) {\n\t\tthis.internalOpen = newValue;\n\t}\n\n\ttoggleOpen() {\n\t\tthis.internalOpen = !this.internalOpen;\n\t\tthis.open = this.internalOpen;\n\n\t\tif (this.internalOpen) {\n\t\t\tthis.ifxOpen.emit({ isOpen: this.internalOpen });\n\t\t} else {\n\t\t\tthis.ifxClose.emit({ isClosed: !this.internalOpen });\n\t\t}\n\t}\n\n\topenAccordionItem() {\n\t\tif (this.internalOpen) {\n\t\t\tthis.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t} else {\n\t\t\tthis.contentEl.style.height = \"0\";\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t}\n\t}\n\n\tgetInnerContentWrapper() {\n\t\tconst innerContentEl = this.el.shadowRoot.querySelector(\".inner-content\");\n\t\treturn innerContentEl;\n\t}\n\n\tattachResizeObserver() {\n\t\tconst innerContentEl = this.getInnerContentWrapper();\n\n\t\tif (innerContentEl) {\n\t\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this.internalOpen) {\n\t\t\t\t\tthis.openAccordionItem();\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.resizeObserver.observe(innerContentEl);\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\thandleKeydown(ev: KeyboardEvent) {\n\t\tconst path = ev.composedPath();\n\n\t\tif (!path.includes(this.titleEl)) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch (ev.key) {\n\t\t\tcase \"Enter\": // fallthrough\n\t\t\tcase \" \": // space\n\t\t\t\tev.preventDefault();\n\t\t\t\tthis.toggleOpen();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tcheckSlotContent() {\n\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\") as HTMLSlotElement;\n\t\tconst hasContent = slot.assignedNodes().length > 0;\n\t\tconst innerContent = this.getInnerContentWrapper();\n\t\tif (!hasContent) {\n\t\t\tinnerContent.classList.add(\"no-content\");\n\t\t} else if (innerContent.classList.contains(\"no-content\")) {\n\t\t\tinnerContent.classList.remove(\"no-content\");\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={`accordion-item ${this.internalOpen ? \"open\" : \"\"}`}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-expanded={this.internalOpen}\n\t\t\t\t\taria-controls=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-title\"\n\t\t\t\t\tonClick={() => this.toggleOpen()}\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\tref={(el) => (this.titleEl = el as HTMLElement)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\taria-level={String(this.AriaLevel) as string}\n\t\t\t\t\t\tclass=\"accordion-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ifx-icon icon=\"chevron-down-16\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span id=\"accordion-caption\" class=\"accordion-caption\">\n\t\t\t\t\t\t{this.caption}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-content\"\n\t\t\t\t\tref={(el) => (this.contentEl = el as HTMLElement)}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby=\"accordion-caption\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"faq.js","sourceRoot":"","sources":["../../../../../src/storybook/stories/setup-and-installation/faq/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,GAAG;IACf,MAAM;QACL,OAAO,CACN,4DAAK,KAAK,EAAC,WAAW;YACrB;gBACC,2EAAoB,OAAO,EAAC,2BAA2B,0dASlC;gBACrB,2EAAoB,OAAO,EAAC,iCAAiC,oNAKxC;gBACrB,2EAAoB,OAAO,EAAC,mDAAmD,kVAM1D;gBACrB,2EAAoB,OAAO,EAAC,yCAAyC,gUAMhD;gBACrB,2EAAoB,OAAO,EAAC,iCAAiC,0PAKxC,CACN,CACX,CACN,CAAC;IACH,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, h } from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-faq\",\n\tstyleUrl: \"./faq.scss\",\n\tshadow: true,\n})\nexport class Faq {\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"container\">\n\t\t\t\t<ifx-accordion>\n\t\t\t\t\t<ifx-accordion-item caption=\"What is the Infineon DDS?\">\n\t\t\t\t\t\tThe Infineon Digital Design System consists of code components,\n\t\t\t\t\t\tdesign principles, tools and guidelines as well as a dedicated\n\t\t\t\t\t\tinterdisciplinary team. Its purpose is to support internal and\n\t\t\t\t\t\texternal colleagues create digital user interfaces with a high level\n\t\t\t\t\t\tof usability as well as a consistent expression of the Infineon\n\t\t\t\t\t\tbrand. The DDS does not focus on the content of a web application\n\t\t\t\t\t\tbut it describes how the design of the application’s structure\n\t\t\t\t\t\tshould be.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How do I get access to the DDS?\">\n\t\t\t\t\t\tYou can use the provided Figma file as a foundation for mockups and\n\t\t\t\t\t\tprototypes, use Storybook to view what UI components and variants\n\t\t\t\t\t\tare available and use code components provided via Storybook or\n\t\t\t\t\t\tGithub.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n\t\t\t\t\t\tYes, you can. We are happy to discuss with you which point in time\n\t\t\t\t\t\tand which scope of integration is bestsuited for updating your\n\t\t\t\t\t\tinterface to the Infineon DDS. (To avoid that users get confused by\n\t\t\t\t\t\ta mixture of UI components, we recommend choosing larger updates or\n\t\t\t\t\t\ttechnology changes as opportunity to integrate the Infineon DDS.)\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n\t\t\t\t\t\tWe have taken WCAG 2.0 Level AA as baseline level for all design\n\t\t\t\t\t\tdecisions inside the Infineon Digital Design System. To make an\n\t\t\t\t\t\tonline experience truly accessible you have to implement the\n\t\t\t\t\t\tspecific code, content, and visual design according to the\n\t\t\t\t\t\taccessibility standard. Find an introduction to this topic here.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How to request a new component?\">\n\t\t\t\t\t\tPlease contact us like described in the contribution section! We are\n\t\t\t\t\t\tplanning to expand the number of components continually. If your\n\t\t\t\t\t\tcomponent is also usable for multiple other projects, there is a\n\t\t\t\t\t\tgood chance we might work together with you.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t</ifx-accordion>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './p-CxMdvahr.js';
|
|
2
2
|
import { d as defineCustomElement$4 } from './p-DMh2-Sc7.js';
|
|
3
|
-
import { d as defineCustomElement$3 } from './p-
|
|
3
|
+
import { d as defineCustomElement$3 } from './p-CVb-Yn3-.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-JLcx3_XG.js';
|
|
5
5
|
|
|
6
6
|
const faqCss = ".container{padding-top:10px}";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-faq.js","mappings":";;;;;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAAC,CAAA,CAAA;;;;;;;;IACf,MAAM,GAAA;QACL,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACC,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EASlC,EAAA,qdAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAKxC,EAAA,+MAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAM1D,EAAA,6UAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAMhD,EAAA,2TAAA,CAAA,EACrB,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAKxC,CACN,CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n padding-top: 10px;\n}","import { Component, h } from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-faq\",\n\tstyleUrl: \"./faq.scss\",\n\tshadow: true,\n})\nexport class Faq {\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"container\">\n\t\t\t\t<ifx-accordion>\n\t\t\t\t\t<ifx-accordion-item caption=\"What is the Infineon DDS?\">\n\t\t\t\t\t\tThe Infineon Digital Design System consists of code components,\n\t\t\t\t\t\tdesign principles, tools and guidelines as well as a dedicated\n\t\t\t\t\t\tinterdisciplinary team. Its purpose is to support internal and\n\t\t\t\t\t\texternal colleagues create digital user interfaces with a high level\n\t\t\t\t\t\tof usability as well as a consistent expression of the Infineon\n\t\t\t\t\t\tbrand. The DDS does not focus on the content of a web application\n\t\t\t\t\t\tbut it describes how the design of the application’s structure\n\t\t\t\t\t\tshould be.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How do I get access to the DDS?\">\n\t\t\t\t\t\tYou can use the provided Figma file as a foundation for mockups and\n\t\t\t\t\t\tprototypes, use Storybook to view what UI components and variants\n\t\t\t\t\t\tare available and use code components provided via Storybook or\n\t\t\t\t\t\tGithub.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n\t\t\t\t\t\tYes, you can. We are happy to discuss with you which point in time\n\t\t\t\t\t\tand which scope of integration is bestsuited for updating your\n\t\t\t\t\t\tinterface to the Infineon DDS. (To avoid that users get confused by\n\t\t\t\t\t\ta mixture of UI components, we recommend choosing larger updates or\n\t\t\t\t\t\ttechnology changes as opportunity to integrate the Infineon DDS.)\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n\t\t\t\t\t\tWe have taken WCAG 2.0 Level AA as baseline level for all design\n\t\t\t\t\t\tdecisions inside the Infineon Digital Design System. To make an\n\t\t\t\t\t\tonline experience truly accessible you have to implement the\n\t\t\t\t\t\tspecific code, content, and visual design according to the\n\t\t\t\t\t\taccessibility standard. Find an introduction to this topic here.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How to request a new component?\">\n\t\t\t\t\t\tPlease contact us like described in the contribution section! We are\n\t\t\t\t\t\tplanning to expand the number of components continually. If your\n\t\t\t\t\t\tcomponent is also usable for multiple other projects, there is a\n\t\t\t\t\t\tgood chance we might work together with you.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t</ifx-accordion>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-faq.js","mappings":";;;;;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAAC,CAAA,CAAA;;;;;;;;IACf,MAAM,GAAA;QACL,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACC,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EASlC,EAAA,qdAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAKxC,EAAA,+MAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAM1D,EAAA,6UAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAMhD,EAAA,2TAAA,CAAA,EACrB,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAKxC,CACN,CACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/storybook/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/storybook/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n padding-top: 10px;\n}","import { Component, h } from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-faq\",\n\tstyleUrl: \"./faq.scss\",\n\tshadow: true,\n})\nexport class Faq {\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"container\">\n\t\t\t\t<ifx-accordion>\n\t\t\t\t\t<ifx-accordion-item caption=\"What is the Infineon DDS?\">\n\t\t\t\t\t\tThe Infineon Digital Design System consists of code components,\n\t\t\t\t\t\tdesign principles, tools and guidelines as well as a dedicated\n\t\t\t\t\t\tinterdisciplinary team. Its purpose is to support internal and\n\t\t\t\t\t\texternal colleagues create digital user interfaces with a high level\n\t\t\t\t\t\tof usability as well as a consistent expression of the Infineon\n\t\t\t\t\t\tbrand. The DDS does not focus on the content of a web application\n\t\t\t\t\t\tbut it describes how the design of the application’s structure\n\t\t\t\t\t\tshould be.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How do I get access to the DDS?\">\n\t\t\t\t\t\tYou can use the provided Figma file as a foundation for mockups and\n\t\t\t\t\t\tprototypes, use Storybook to view what UI components and variants\n\t\t\t\t\t\tare available and use code components provided via Storybook or\n\t\t\t\t\t\tGithub.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n\t\t\t\t\t\tYes, you can. We are happy to discuss with you which point in time\n\t\t\t\t\t\tand which scope of integration is bestsuited for updating your\n\t\t\t\t\t\tinterface to the Infineon DDS. (To avoid that users get confused by\n\t\t\t\t\t\ta mixture of UI components, we recommend choosing larger updates or\n\t\t\t\t\t\ttechnology changes as opportunity to integrate the Infineon DDS.)\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n\t\t\t\t\t\tWe have taken WCAG 2.0 Level AA as baseline level for all design\n\t\t\t\t\t\tdecisions inside the Infineon Digital Design System. To make an\n\t\t\t\t\t\tonline experience truly accessible you have to implement the\n\t\t\t\t\t\tspecific code, content, and visual design according to the\n\t\t\t\t\t\taccessibility standard. Find an introduction to this topic here.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How to request a new component?\">\n\t\t\t\t\t\tPlease contact us like described in the contribution section! We are\n\t\t\t\t\t\tplanning to expand the number of components continually. If your\n\t\t\t\t\t\tcomponent is also usable for multiple other projects, there is a\n\t\t\t\t\t\tgood chance we might work together with you.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t</ifx-accordion>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -61,7 +61,7 @@ export { DropdownItem as IfxDropdownTrigger } from '../types/components/dropdown
|
|
|
61
61
|
export { defineCustomElement as defineCustomElementIfxDropdownTrigger } from './ifx-dropdown-trigger';
|
|
62
62
|
export { DropdownItem as IfxDropdownTriggerButton } from '../types/components/dropdown/dropdown-trigger-button/dropdown-trigger-button';
|
|
63
63
|
export { defineCustomElement as defineCustomElementIfxDropdownTriggerButton } from './ifx-dropdown-trigger-button';
|
|
64
|
-
export { Faq as IfxFaq } from '../types/stories/setup-and-installation/faq/faq';
|
|
64
|
+
export { Faq as IfxFaq } from '../types/storybook/stories/setup-and-installation/faq/faq';
|
|
65
65
|
export { defineCustomElement as defineCustomElementIfxFaq } from './ifx-faq';
|
|
66
66
|
export { FileUpload as IfxFileUpload } from '../types/components/file-upload/file-upload';
|
|
67
67
|
export { defineCustomElement as defineCustomElementIfxFileUpload } from './ifx-file-upload';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-CxMdvahr.js';
|
|
2
2
|
import { d as defineCustomElement$1 } from './p-JLcx3_XG.js';
|
|
3
3
|
|
|
4
|
-
const accordionItemCss = ".accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:
|
|
4
|
+
const accordionItemCss = ".accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}";
|
|
5
5
|
|
|
6
6
|
const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem extends H {
|
|
7
7
|
constructor(registerHost) {
|
|
@@ -52,17 +52,13 @@ const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem exten
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
openAccordionItem() {
|
|
55
|
-
if (this.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
else {
|
|
63
|
-
this.contentEl.style.height = "0";
|
|
64
|
-
this.contentEl.style.overflow = "hidden";
|
|
65
|
-
}
|
|
55
|
+
if (this.internalOpen) {
|
|
56
|
+
this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
|
|
57
|
+
this.contentEl.style.overflow = "hidden";
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
this.contentEl.style.height = "0";
|
|
61
|
+
this.contentEl.style.overflow = "hidden";
|
|
66
62
|
}
|
|
67
63
|
}
|
|
68
64
|
getInnerContentWrapper() {
|
|
@@ -105,7 +101,7 @@ const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem exten
|
|
|
105
101
|
}
|
|
106
102
|
}
|
|
107
103
|
render() {
|
|
108
|
-
return (h("div", { key: '
|
|
104
|
+
return (h("div", { key: 'd0659e9848ec1c283922245ede1c43f4d437f2e9', class: `accordion-item ${this.internalOpen ? "open" : ""}` }, h("div", { key: '5602bba8be10049019a41a78a140a8f3cb5ff84e', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: (el) => (this.titleEl = el) }, h("span", { key: 'ba38b4ad9659b0dda1d4e9c4f951b164782f461c', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '30b3cd4afde52cde304bfd9b1d0650a1167dcffd', icon: "chevron-down-16" })), h("span", { key: 'c488542b9e8622de256d2c02a26f58da51836164', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '86481e71ceda4b3f452d77f5930fadac5a7fe58a', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '0beb27fdd4d691b165267ce0d0b29a817cdfd71a', class: "inner-content" }, h("slot", { key: 'f988897e355f52624d51aa301b4407ef05f7a928' })))));
|
|
109
105
|
}
|
|
110
106
|
static get watchers() { return {
|
|
111
107
|
"open": ["openChanged"]
|
|
@@ -139,6 +135,6 @@ function defineCustomElement() {
|
|
|
139
135
|
}
|
|
140
136
|
|
|
141
137
|
export { AccordionItem as A, defineCustomElement as d };
|
|
142
|
-
//# sourceMappingURL=p-
|
|
138
|
+
//# sourceMappingURL=p-CVb-Yn3-.js.map
|
|
143
139
|
|
|
144
|
-
//# sourceMappingURL=p-
|
|
140
|
+
//# sourceMappingURL=p-CVb-Yn3-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-CVb-Yn3-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n overflow: hidden;\n height: 0;\n transition: height 0.3s ease;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace200;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n align-self: stretch;\n margin: 0 4px 4px;\n border: 1px solid transparent;\n border-top: 1px solid transparent;\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n.accordion-item.open .accordion-content {\n max-height: 1000px; // Arbitrary large value to allow content to expand\n}\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n border-color: tokens.$ifxColorEngineering200;\n border-top-color: transparent;\n transition: border-color 0s; \n}\n\n.accordion-item:not(.open) .inner-content {\n transition: border-color 0s 0.3s; \n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n margin: 0;\n }\n}","//ifxAccordionItem\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\ttype EventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-accordion-item\",\n\tstyleUrl: \"accordionItem.scss\",\n\tshadow: true,\n})\nexport class AccordionItem {\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop({\n\t\tmutable: true,\n\t})\n\topen: boolean = false;\n\t@Prop() AriaLevel = 3;\n\t@State() internalOpen: boolean = false;\n\t@Event() ifxOpen: EventEmitter;\n\t@Event() ifxClose: EventEmitter;\n\tprivate contentEl!: HTMLElement;\n\tprivate titleEl!: HTMLElement;\n\tprivate resizeObserver!: ResizeObserver;\n\n\tcomponentWillLoad() {\n\t\tthis.internalOpen = this.open;\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t\tthis.contentEl = this.el.shadowRoot.querySelector(\"#accordion-content\");\n\t\tif (this.contentEl) {\n\t\t\tthis.attachResizeObserver();\n\t\t}\n\t}\n\n\tcomponentDidUpdate() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t}\n\n\t@Watch(\"open\")\n\topenChanged(newValue: boolean) {\n\t\tthis.internalOpen = newValue;\n\t}\n\n\ttoggleOpen() {\n\t\tthis.internalOpen = !this.internalOpen;\n\t\tthis.open = this.internalOpen;\n\n\t\tif (this.internalOpen) {\n\t\t\tthis.ifxOpen.emit({ isOpen: this.internalOpen });\n\t\t} else {\n\t\t\tthis.ifxClose.emit({ isClosed: !this.internalOpen });\n\t\t}\n\t}\n\n\topenAccordionItem() {\n\t\tif (this.internalOpen) {\n\t\t\tthis.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t} else {\n\t\t\tthis.contentEl.style.height = \"0\";\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t}\n\t}\n\n\tgetInnerContentWrapper() {\n\t\tconst innerContentEl = this.el.shadowRoot.querySelector(\".inner-content\");\n\t\treturn innerContentEl;\n\t}\n\n\tattachResizeObserver() {\n\t\tconst innerContentEl = this.getInnerContentWrapper();\n\n\t\tif (innerContentEl) {\n\t\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this.internalOpen) {\n\t\t\t\t\tthis.openAccordionItem();\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.resizeObserver.observe(innerContentEl);\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\thandleKeydown(ev: KeyboardEvent) {\n\t\tconst path = ev.composedPath();\n\n\t\tif (!path.includes(this.titleEl)) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch (ev.key) {\n\t\t\tcase \"Enter\": // fallthrough\n\t\t\tcase \" \": // space\n\t\t\t\tev.preventDefault();\n\t\t\t\tthis.toggleOpen();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tcheckSlotContent() {\n\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\") as HTMLSlotElement;\n\t\tconst hasContent = slot.assignedNodes().length > 0;\n\t\tconst innerContent = this.getInnerContentWrapper();\n\t\tif (!hasContent) {\n\t\t\tinnerContent.classList.add(\"no-content\");\n\t\t} else if (innerContent.classList.contains(\"no-content\")) {\n\t\t\tinnerContent.classList.remove(\"no-content\");\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={`accordion-item ${this.internalOpen ? \"open\" : \"\"}`}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-expanded={this.internalOpen}\n\t\t\t\t\taria-controls=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-title\"\n\t\t\t\t\tonClick={() => this.toggleOpen()}\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\tref={(el) => (this.titleEl = el as HTMLElement)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\taria-level={String(this.AriaLevel) as string}\n\t\t\t\t\t\tclass=\"accordion-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ifx-icon icon=\"chevron-down-16\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span id=\"accordion-caption\" class=\"accordion-caption\">\n\t\t\t\t\t\t{this.caption}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-content\"\n\t\t\t\t\tref={(el) => (this.contentEl = el as HTMLElement)}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby=\"accordion-caption\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-accordion.ifx-accordion-item.entry.js","sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, Element, h, Listen, Prop } from \"@stencil/core\";\nimport { isNestedInIfxComponent } from \"../../shared/utils/dom-utils\";\nimport { detectFramework } from \"../../shared/utils/framework-detection\";\nimport { trackComponent } from \"../../shared/utils/tracking\";\n\n@Component({\n\ttag: \"ifx-accordion\",\n\tstyleUrl: \"accordion.scss\",\n\tshadow: { delegatesFocus: true },\n})\nexport class Accordion {\n\t@Element() el: HTMLElement;\n\t@Prop() autoCollapse: boolean = false;\n\n\tasync componentDidLoad() {\n\t\tif (!isNestedInIfxComponent(this.el)) {\n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent(\"ifx-accordion\", await framework);\n\t\t}\n\t}\n\n\t@Listen(\"ifxOpen\")\n\tasync onItemOpen(event: CustomEvent) {\n\t\tif (this.autoCollapse) {\n\t\t\tconst items = Array.from(this.el.querySelectorAll(\"ifx-accordion-item\"));\n\t\t\tfor (const item of items) {\n\t\t\t\tconst itemElement = item as HTMLIfxAccordionItemElement;\n\t\t\t\tif (itemElement !== event.target && (await itemElement.open)) {\n\t\t\t\t\titemElement.open = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"accordion-wrapper\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n //transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\ttype EventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-accordion-item\",\n\tstyleUrl: \"accordionItem.scss\",\n\tshadow: true,\n})\nexport class AccordionItem {\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop({\n\t\tmutable: true,\n\t})\n\topen: boolean = false;\n\t@Prop() AriaLevel = 3;\n\t@State() internalOpen: boolean = false;\n\t@Event() ifxOpen: EventEmitter;\n\t@Event() ifxClose: EventEmitter;\n\tprivate contentEl!: HTMLElement;\n\tprivate titleEl!: HTMLElement;\n\tprivate resizeObserver!: ResizeObserver;\n\n\tcomponentWillLoad() {\n\t\tthis.internalOpen = this.open;\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t\tthis.contentEl = this.el.shadowRoot.querySelector(\"#accordion-content\");\n\t\tif (this.contentEl) {\n\t\t\tthis.attachResizeObserver();\n\t\t}\n\t}\n\n\tcomponentDidUpdate() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t}\n\n\t@Watch(\"open\")\n\topenChanged(newValue: boolean) {\n\t\tthis.internalOpen = newValue;\n\t}\n\n\ttoggleOpen() {\n\t\tthis.internalOpen = !this.internalOpen;\n\t\tthis.open = this.internalOpen;\n\n\t\tif (this.internalOpen) {\n\t\t\tthis.ifxOpen.emit({ isOpen: this.internalOpen });\n\t\t} else {\n\t\t\tthis.ifxClose.emit({ isClosed: !this.internalOpen });\n\t\t}\n\t}\n\n\topenAccordionItem() {\n\t\tif (this.contentEl) {\n\t\t\tif (this.internalOpen) {\n\t\t\t\tthis.contentEl.style.height = \"auto\";\n\t\t\t\tconst updatedHeight = this.contentEl.scrollHeight;\n\t\t\t\tthis.contentEl.style.height = `${updatedHeight}px`;\n\t\t\t\tthis.contentEl.style.overflow = \"visible\";\n\t\t\t} else {\n\t\t\t\tthis.contentEl.style.height = \"0\";\n\t\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t\t}\n\t\t}\n\t}\n\n\tgetInnerContentWrapper() {\n\t\tconst innerContentEl = this.el.shadowRoot.querySelector(\".inner-content\");\n\t\treturn innerContentEl;\n\t}\n\n\tattachResizeObserver() {\n\t\tconst innerContentEl = this.getInnerContentWrapper();\n\n\t\tif (innerContentEl) {\n\t\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this.internalOpen) {\n\t\t\t\t\tthis.openAccordionItem();\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.resizeObserver.observe(innerContentEl);\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\thandleKeydown(ev: KeyboardEvent) {\n\t\tconst path = ev.composedPath();\n\n\t\tif (!path.includes(this.titleEl)) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch (ev.key) {\n\t\t\tcase \"Enter\": // fallthrough\n\t\t\tcase \" \": // space\n\t\t\t\tev.preventDefault();\n\t\t\t\tthis.toggleOpen();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tcheckSlotContent() {\n\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\") as HTMLSlotElement;\n\t\tconst hasContent = slot.assignedNodes().length > 0;\n\t\tconst innerContent = this.getInnerContentWrapper();\n\t\tif (!hasContent) {\n\t\t\tinnerContent.classList.add(\"no-content\");\n\t\t} else if (innerContent.classList.contains(\"no-content\")) {\n\t\t\tinnerContent.classList.remove(\"no-content\");\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={`accordion-item ${this.internalOpen ? \"open\" : \"\"}`}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-expanded={this.internalOpen}\n\t\t\t\t\taria-controls=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-title\"\n\t\t\t\t\tonClick={() => this.toggleOpen()}\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\tref={(el) => (this.titleEl = el as HTMLElement)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\taria-level={String(this.AriaLevel) as string}\n\t\t\t\t\t\tclass=\"accordion-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ifx-icon icon=\"chevron-down-16\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span id=\"accordion-caption\" class=\"accordion-caption\">\n\t\t\t\t\t\t{this.caption}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-content\"\n\t\t\t\t\tref={(el) => (this.contentEl = el as HTMLElement)}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby=\"accordion-caption\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifx-accordion.ifx-accordion-item.entry.js","sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, Element, h, Listen, Prop } from \"@stencil/core\";\nimport { isNestedInIfxComponent } from \"../../shared/utils/dom-utils\";\nimport { detectFramework } from \"../../shared/utils/framework-detection\";\nimport { trackComponent } from \"../../shared/utils/tracking\";\n\n@Component({\n\ttag: \"ifx-accordion\",\n\tstyleUrl: \"accordion.scss\",\n\tshadow: { delegatesFocus: true },\n})\nexport class Accordion {\n\t@Element() el: HTMLElement;\n\t@Prop() autoCollapse: boolean = false;\n\n\tasync componentDidLoad() {\n\t\tif (!isNestedInIfxComponent(this.el)) {\n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent(\"ifx-accordion\", await framework);\n\t\t}\n\t}\n\n\t@Listen(\"ifxOpen\")\n\tasync onItemOpen(event: CustomEvent) {\n\t\tif (this.autoCollapse) {\n\t\t\tconst items = Array.from(this.el.querySelectorAll(\"ifx-accordion-item\"));\n\t\t\tfor (const item of items) {\n\t\t\t\tconst itemElement = item as HTMLIfxAccordionItemElement;\n\t\t\t\tif (itemElement !== event.target && (await itemElement.open)) {\n\t\t\t\t\titemElement.open = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"accordion-wrapper\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t);\n\t}\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n overflow: hidden;\n height: 0;\n transition: height 0.3s ease;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace200;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n align-self: stretch;\n margin: 0 4px 4px;\n border: 1px solid transparent;\n border-top: 1px solid transparent;\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n.accordion-item.open .accordion-content {\n max-height: 1000px; // Arbitrary large value to allow content to expand\n}\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n border-color: tokens.$ifxColorEngineering200;\n border-top-color: transparent;\n transition: border-color 0s; \n}\n\n.accordion-item:not(.open) .inner-content {\n transition: border-color 0s 0.3s; \n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n margin: 0;\n }\n}","//ifxAccordionItem\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\ttype EventEmitter,\n\th,\n\tListen,\n\tProp,\n\tState,\n\tWatch,\n} from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-accordion-item\",\n\tstyleUrl: \"accordionItem.scss\",\n\tshadow: true,\n})\nexport class AccordionItem {\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop({\n\t\tmutable: true,\n\t})\n\topen: boolean = false;\n\t@Prop() AriaLevel = 3;\n\t@State() internalOpen: boolean = false;\n\t@Event() ifxOpen: EventEmitter;\n\t@Event() ifxClose: EventEmitter;\n\tprivate contentEl!: HTMLElement;\n\tprivate titleEl!: HTMLElement;\n\tprivate resizeObserver!: ResizeObserver;\n\n\tcomponentWillLoad() {\n\t\tthis.internalOpen = this.open;\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t\tthis.contentEl = this.el.shadowRoot.querySelector(\"#accordion-content\");\n\t\tif (this.contentEl) {\n\t\t\tthis.attachResizeObserver();\n\t\t}\n\t}\n\n\tcomponentDidUpdate() {\n\t\tthis.checkSlotContent();\n\t\tthis.openAccordionItem();\n\t}\n\n\t@Watch(\"open\")\n\topenChanged(newValue: boolean) {\n\t\tthis.internalOpen = newValue;\n\t}\n\n\ttoggleOpen() {\n\t\tthis.internalOpen = !this.internalOpen;\n\t\tthis.open = this.internalOpen;\n\n\t\tif (this.internalOpen) {\n\t\t\tthis.ifxOpen.emit({ isOpen: this.internalOpen });\n\t\t} else {\n\t\t\tthis.ifxClose.emit({ isClosed: !this.internalOpen });\n\t\t}\n\t}\n\n\topenAccordionItem() {\n\t\tif (this.internalOpen) {\n\t\t\tthis.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t} else {\n\t\t\tthis.contentEl.style.height = \"0\";\n\t\t\tthis.contentEl.style.overflow = \"hidden\";\n\t\t}\n\t}\n\n\tgetInnerContentWrapper() {\n\t\tconst innerContentEl = this.el.shadowRoot.querySelector(\".inner-content\");\n\t\treturn innerContentEl;\n\t}\n\n\tattachResizeObserver() {\n\t\tconst innerContentEl = this.getInnerContentWrapper();\n\n\t\tif (innerContentEl) {\n\t\t\tthis.resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (this.internalOpen) {\n\t\t\t\t\tthis.openAccordionItem();\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tthis.resizeObserver.observe(innerContentEl);\n\t\t}\n\t}\n\n\t@Listen(\"keydown\")\n\thandleKeydown(ev: KeyboardEvent) {\n\t\tconst path = ev.composedPath();\n\n\t\tif (!path.includes(this.titleEl)) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch (ev.key) {\n\t\t\tcase \"Enter\": // fallthrough\n\t\t\tcase \" \": // space\n\t\t\t\tev.preventDefault();\n\t\t\t\tthis.toggleOpen();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tcheckSlotContent() {\n\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\") as HTMLSlotElement;\n\t\tconst hasContent = slot.assignedNodes().length > 0;\n\t\tconst innerContent = this.getInnerContentWrapper();\n\t\tif (!hasContent) {\n\t\t\tinnerContent.classList.add(\"no-content\");\n\t\t} else if (innerContent.classList.contains(\"no-content\")) {\n\t\t\tinnerContent.classList.remove(\"no-content\");\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={`accordion-item ${this.internalOpen ? \"open\" : \"\"}`}>\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-expanded={this.internalOpen}\n\t\t\t\t\taria-controls=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-title\"\n\t\t\t\t\tonClick={() => this.toggleOpen()}\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\tref={(el) => (this.titleEl = el as HTMLElement)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\taria-level={String(this.AriaLevel) as string}\n\t\t\t\t\t\tclass=\"accordion-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ifx-icon icon=\"chevron-down-16\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t<span id=\"accordion-caption\" class=\"accordion-caption\">\n\t\t\t\t\t\t{this.caption}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"accordion-content\"\n\t\t\t\t\tclass=\"accordion-content\"\n\t\t\t\t\tref={(el) => (this.contentEl = el as HTMLElement)}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-labelledby=\"accordion-caption\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"inner-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,uHAAuH;;MCU/H,SAAS,GAAA,MAAA;;;;;IAEb,YAAY,GAAY,KAAK;AAErC,IAAA,MAAM,gBAAgB,GAAA;QACrB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACrC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAKlD,MAAM,UAAU,CAAC,KAAkB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AACxE,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACzB,MAAM,WAAW,GAAG,IAAmC;AACvD,gBAAA,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;AAC7D,oBAAA,WAAW,CAAC,IAAI,GAAG,KAAK;;;;;IAM5B,MAAM,GAAA;QACL,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;ACtCT,MAAM,gBAAgB,GAAG,63CAA63C;;MCkBz4C,aAAa,GAAA,MAAA;;;;;;;AAEjB,IAAA,OAAO;IAIf,IAAI,GAAY,KAAK;IACb,SAAS,GAAG,CAAC;IACZ,YAAY,GAAY,KAAK;AAC7B,IAAA,OAAO;AACP,IAAA,QAAQ;AACT,IAAA,SAAS;AACT,IAAA,OAAO;AACP,IAAA,cAAc;IAEtB,iBAAiB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;IAG9B,gBAAgB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACvE,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,oBAAoB,EAAE;;;IAI7B,kBAAkB,GAAA;QACjB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;;AAIzB,IAAA,WAAW,CAAC,QAAiB,EAAA;AAC5B,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;IAG7B,UAAU,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;AACtC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY;AAE7B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;aAC1C;AACN,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;;IAItD,iBAAiB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI;YAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;aAClC;YACN,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;YACjC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;;IAI1C,sBAAsB,GAAA;AACrB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACzE,QAAA,OAAO,cAAc;;IAGtB,oBAAoB,GAAA;AACnB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAEpD,IAAI,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;AAC7C,gBAAA,IAAI,IAAI,CAAC,YAAY,EAAE;oBACtB,IAAI,CAAC,iBAAiB,EAAE;;AAE1B,aAAC,CAAC;AAEF,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC;;;AAK7C,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC9B,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE;QAE9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACjC;;AAGD,QAAA,QAAQ,EAAE,CAAC,GAAG;YACb,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACP,EAAE,CAAC,cAAc,EAAE;gBACnB,IAAI,CAAC,UAAU,EAAE;gBACjB;;;IAIH,gBAAgB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB;QACxE,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAClD,IAAI,CAAC,UAAU,EAAE;AAChB,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;;aAClC,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACzD,YAAA,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC;;;IAI7C,MAAM,GAAA;QACL,QACC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC9D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,YAAY,EAClB,eAAA,EAAA,mBAAmB,EACjC,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,QAAQ,EAAC,GAAG,EACZ,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC,EAAA,EAE/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EACa,MAAM,EAClB,IAAI,EAAC,SAAS,EACF,YAAA,EAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAW,EAC5C,KAAK,EAAC,gBAAgB,EAAA,EAEtB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC7B,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAA,EACpD,IAAI,CAAC,OAAO,CACP,CACF,EACN,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EACtB,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EACjD,IAAI,EAAC,QAAQ,EAAA,iBAAA,EACG,mBAAmB,EAAA,EAEnC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACD,CACD;;;;;;;;;;"}
|
|
@@ -34,7 +34,7 @@ const Accordion = class {
|
|
|
34
34
|
};
|
|
35
35
|
Accordion.style = accordionCss;
|
|
36
36
|
|
|
37
|
-
const accordionItemCss = ".accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:
|
|
37
|
+
const accordionItemCss = ".accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}";
|
|
38
38
|
|
|
39
39
|
const AccordionItem = class {
|
|
40
40
|
constructor(hostRef) {
|
|
@@ -81,17 +81,13 @@ const AccordionItem = class {
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
openAccordionItem() {
|
|
84
|
-
if (this.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
else {
|
|
92
|
-
this.contentEl.style.height = "0";
|
|
93
|
-
this.contentEl.style.overflow = "hidden";
|
|
94
|
-
}
|
|
84
|
+
if (this.internalOpen) {
|
|
85
|
+
this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
|
|
86
|
+
this.contentEl.style.overflow = "hidden";
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
this.contentEl.style.height = "0";
|
|
90
|
+
this.contentEl.style.overflow = "hidden";
|
|
95
91
|
}
|
|
96
92
|
}
|
|
97
93
|
getInnerContentWrapper() {
|
|
@@ -134,7 +130,7 @@ const AccordionItem = class {
|
|
|
134
130
|
}
|
|
135
131
|
}
|
|
136
132
|
render() {
|
|
137
|
-
return (h("div", { key: '
|
|
133
|
+
return (h("div", { key: 'd0659e9848ec1c283922245ede1c43f4d437f2e9', class: `accordion-item ${this.internalOpen ? "open" : ""}` }, h("div", { key: '5602bba8be10049019a41a78a140a8f3cb5ff84e', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: (el) => (this.titleEl = el) }, h("span", { key: 'ba38b4ad9659b0dda1d4e9c4f951b164782f461c', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '30b3cd4afde52cde304bfd9b1d0650a1167dcffd', icon: "chevron-down-16" })), h("span", { key: 'c488542b9e8622de256d2c02a26f58da51836164', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '86481e71ceda4b3f452d77f5930fadac5a7fe58a', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '0beb27fdd4d691b165267ce0d0b29a817cdfd71a', class: "inner-content" }, h("slot", { key: 'f988897e355f52624d51aa301b4407ef05f7a928' })))));
|
|
138
134
|
}
|
|
139
135
|
static get watchers() { return {
|
|
140
136
|
"open": ["openChanged"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-faq.entry.js","sources":["src/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n padding-top: 10px;\n}","import { Component, h } from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-faq\",\n\tstyleUrl: \"./faq.scss\",\n\tshadow: true,\n})\nexport class Faq {\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"container\">\n\t\t\t\t<ifx-accordion>\n\t\t\t\t\t<ifx-accordion-item caption=\"What is the Infineon DDS?\">\n\t\t\t\t\t\tThe Infineon Digital Design System consists of code components,\n\t\t\t\t\t\tdesign principles, tools and guidelines as well as a dedicated\n\t\t\t\t\t\tinterdisciplinary team. Its purpose is to support internal and\n\t\t\t\t\t\texternal colleagues create digital user interfaces with a high level\n\t\t\t\t\t\tof usability as well as a consistent expression of the Infineon\n\t\t\t\t\t\tbrand. The DDS does not focus on the content of a web application\n\t\t\t\t\t\tbut it describes how the design of the application’s structure\n\t\t\t\t\t\tshould be.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How do I get access to the DDS?\">\n\t\t\t\t\t\tYou can use the provided Figma file as a foundation for mockups and\n\t\t\t\t\t\tprototypes, use Storybook to view what UI components and variants\n\t\t\t\t\t\tare available and use code components provided via Storybook or\n\t\t\t\t\t\tGithub.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n\t\t\t\t\t\tYes, you can. We are happy to discuss with you which point in time\n\t\t\t\t\t\tand which scope of integration is bestsuited for updating your\n\t\t\t\t\t\tinterface to the Infineon DDS. (To avoid that users get confused by\n\t\t\t\t\t\ta mixture of UI components, we recommend choosing larger updates or\n\t\t\t\t\t\ttechnology changes as opportunity to integrate the Infineon DDS.)\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n\t\t\t\t\t\tWe have taken WCAG 2.0 Level AA as baseline level for all design\n\t\t\t\t\t\tdecisions inside the Infineon Digital Design System. To make an\n\t\t\t\t\t\tonline experience truly accessible you have to implement the\n\t\t\t\t\t\tspecific code, content, and visual design according to the\n\t\t\t\t\t\taccessibility standard. Find an introduction to this topic here.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How to request a new component?\">\n\t\t\t\t\t\tPlease contact us like described in the contribution section! We are\n\t\t\t\t\t\tplanning to expand the number of components continually. If your\n\t\t\t\t\t\tcomponent is also usable for multiple other projects, there is a\n\t\t\t\t\t\tgood chance we might work together with you.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t</ifx-accordion>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,GAAA,MAAA;;;;IACf,MAAM,GAAA;QACL,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACC,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EASlC,EAAA,qdAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAKxC,EAAA,+MAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAM1D,EAAA,6UAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAMhD,EAAA,2TAAA,CAAA,EACrB,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAKxC,CACN,CACX;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"ifx-faq.entry.js","sources":["src/storybook/stories/setup-and-installation/faq/faq.scss?tag=ifx-faq&encapsulation=shadow","src/storybook/stories/setup-and-installation/faq/faq.tsx"],"sourcesContent":[".container { \n padding-top: 10px;\n}","import { Component, h } from \"@stencil/core\";\n\n@Component({\n\ttag: \"ifx-faq\",\n\tstyleUrl: \"./faq.scss\",\n\tshadow: true,\n})\nexport class Faq {\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"container\">\n\t\t\t\t<ifx-accordion>\n\t\t\t\t\t<ifx-accordion-item caption=\"What is the Infineon DDS?\">\n\t\t\t\t\t\tThe Infineon Digital Design System consists of code components,\n\t\t\t\t\t\tdesign principles, tools and guidelines as well as a dedicated\n\t\t\t\t\t\tinterdisciplinary team. Its purpose is to support internal and\n\t\t\t\t\t\texternal colleagues create digital user interfaces with a high level\n\t\t\t\t\t\tof usability as well as a consistent expression of the Infineon\n\t\t\t\t\t\tbrand. The DDS does not focus on the content of a web application\n\t\t\t\t\t\tbut it describes how the design of the application’s structure\n\t\t\t\t\t\tshould be.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How do I get access to the DDS?\">\n\t\t\t\t\t\tYou can use the provided Figma file as a foundation for mockups and\n\t\t\t\t\t\tprototypes, use Storybook to view what UI components and variants\n\t\t\t\t\t\tare available and use code components provided via Storybook or\n\t\t\t\t\t\tGithub.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Can I integrate the Infineon DDS into my project?\">\n\t\t\t\t\t\tYes, you can. We are happy to discuss with you which point in time\n\t\t\t\t\t\tand which scope of integration is bestsuited for updating your\n\t\t\t\t\t\tinterface to the Infineon DDS. (To avoid that users get confused by\n\t\t\t\t\t\ta mixture of UI components, we recommend choosing larger updates or\n\t\t\t\t\t\ttechnology changes as opportunity to integrate the Infineon DDS.)\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"Are Infineon DDS components accessable?\">\n\t\t\t\t\t\tWe have taken WCAG 2.0 Level AA as baseline level for all design\n\t\t\t\t\t\tdecisions inside the Infineon Digital Design System. To make an\n\t\t\t\t\t\tonline experience truly accessible you have to implement the\n\t\t\t\t\t\tspecific code, content, and visual design according to the\n\t\t\t\t\t\taccessibility standard. Find an introduction to this topic here.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t\t<ifx-accordion-item caption=\"How to request a new component?\">\n\t\t\t\t\t\tPlease contact us like described in the contribution section! We are\n\t\t\t\t\t\tplanning to expand the number of components continually. If your\n\t\t\t\t\t\tcomponent is also usable for multiple other projects, there is a\n\t\t\t\t\t\tgood chance we might work together with you.\n\t\t\t\t\t</ifx-accordion-item>\n\t\t\t\t</ifx-accordion>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,8BAA8B;;MCOhC,GAAG,GAAA,MAAA;;;;IACf,MAAM,GAAA;QACL,QACC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACrB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACC,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,2BAA2B,EASlC,EAAA,qdAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,iCAAiC,EAKxC,EAAA,+MAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,mDAAmD,EAM1D,EAAA,6UAAA,CAAA,EACrB,CAAoB,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,yCAAyC,EAMhD,EAAA,2TAAA,CAAA,EACrB,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,OAAO,EAAC,iCAAiC,0PAKxC,CACN,CACX;;;;;;;"}
|