npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.3.1--canary.2120.1c467763c53a3cb468accc942e4e88953b0b9626.0 → 39.3.1--canary.2118.a60360f4f6d6f0d6b993cc68d1be10f2536c481f.0 - Mend

@infineon/infineon-design-system-stencil 39.3.1--canary.2120.1c467763c53a3cb468accc942e4e88953b0b9626.0 → 39.3.1--canary.2118.a60360f4f6d6f0d6b993cc68d1be10f2536c481f.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.

Files changed (51) hide show

package/dist/cjs/ifx-accordion.ifx-accordion-item.entry.cjs.js.map CHANGED Viewed

	@@ -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@use \"../../global/font.scss\";\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, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-accordion', await framework)\n }\n }\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px 4px 0px;\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 height:0;\n overflow: hidden;\n transition: 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.$ifxSpace200;\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 margin: 0 4px 4px;\n border: 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.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: none;\n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n margin: 0;\n }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class AccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n })\n open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.checkSlotContent()\n this.openAccordionItem();\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.checkSlotContent()\n this.openAccordionItem();\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n this.contentEl.style.overflow = 'hidden';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n\n getInnerContentWrapper() {\n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n return innerContentEl;\n }\n\n attachResizeObserver() {\n const innerContentEl = this.getInnerContentWrapper();\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl);\n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if (!path.includes(this.titleEl)) {\n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n checkSlotContent() {\n const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const hasContent = slot.assignedNodes().length > 0;\n const innerContent = this.getInnerContentWrapper();\n if (!hasContent) {\n innerContent.classList.add('no-content');\n } else if (innerContent.classList.contains('no-content')) {\n innerContent.classList.remove('no-content');\n }\n }\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div\n role=\"button\"\n aria-expanded={this.internalOpen}\n aria-controls=\"accordion-content\"\n class=\"accordion-title\"\n onClick={() => this.toggleOpen()}\n tabindex=\"0\"\n ref={el => (this.titleEl = el as HTMLElement)}\n >\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">\n {this.caption}\n </span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\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@use \"../../global/font.scss\";\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, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-accordion', await framework)\n }\n }\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px 4px 0px;\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.$ifxSpace200;\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.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n border: 1px solid tokens.$ifxColorEngineering200;\n border-top: none;\n margin: 0 4px 4px;\n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class AccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n })\n open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.checkSlotContent()\n this.openAccordionItem();\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.checkSlotContent()\n this.openAccordionItem();\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.contentEl) {\n if (this.internalOpen) {\n this.contentEl.style.height = 'auto';\n const updatedHeight = this.contentEl.scrollHeight;\n this.contentEl.style.height = `${updatedHeight}px`;\n this.contentEl.style.overflow = 'visible';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n }\n\n getInnerContentWrapper() {\n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n return innerContentEl;\n }\n\n attachResizeObserver() {\n const innerContentEl = this.getInnerContentWrapper();\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl);\n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if (!path.includes(this.titleEl)) {\n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n checkSlotContent() {\n const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const hasContent = slot.assignedNodes().length > 0;\n const innerContent = this.getInnerContentWrapper();\n if (!hasContent) {\n innerContent.classList.add('no-content');\n } else if (innerContent.classList.contains('no-content')) {\n innerContent.classList.remove('no-content');\n }\n }\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div\n role=\"button\"\n aria-expanded={this.internalOpen}\n aria-controls=\"accordion-content\"\n class=\"accordion-title\"\n onClick={() => this.toggleOpen()}\n tabindex=\"0\"\n ref={el => (this.titleEl = el as HTMLElement)}\n >\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">\n {this.caption}\n </span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}

package/dist/cjs/ifx-accordion_2.cjs.entry.js CHANGED Viewed

@@ -36,7 +36,7 @@ const Accordion = class {
 };
 Accordion.style = accordionCss;
-const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;height:0;overflow:hidden;transition:height 0.3s ease-in-out;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}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top:none}.inner-content.no-content{border:none;padding:0;margin:0}";
+const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.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:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border:1px solid #EEEDED;border-top:none;margin:0 4px 4px}.inner-content.no-content{border:none;padding:0}";
 const AccordionItem = class {
     constructor(hostRef) {
@@ -76,13 +76,17 @@ const AccordionItem = class {
         }
     }
     openAccordionItem() {
-        if (this.internalOpen) {
-            this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
-            this.contentEl.style.overflow = 'hidden';
-        }
-        else {
-            this.contentEl.style.height = '0';
-            this.contentEl.style.overflow = 'hidden';
+        if (this.contentEl) {
+            if (this.internalOpen) {
+                this.contentEl.style.height = 'auto';
+                const updatedHeight = this.contentEl.scrollHeight;
+                this.contentEl.style.height = `${updatedHeight}px`;
+                this.contentEl.style.overflow = 'visible';
+            }
+            else {
+                this.contentEl.style.height = '0';
+                this.contentEl.style.overflow = 'hidden';
+            }
         }
     }
     getInnerContentWrapper() {
@@ -125,7 +129,7 @@ const AccordionItem = class {
         }
     }
     render() {
-        return (index.h("div", { key: '1317347110a9c74932695b8ffff8ca31d3c8e6c3', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: 'ad5d46e476f76ac121239c15904a4884a6ba4cc5', 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: '924e061fd270701a7c78433a56fcd70a40dfe7f5', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: '40cee40a058eb576d0ef5482f6f7f0adb47a5f4e', icon: "chevron-down-16" })), index.h("span", { key: '37715ae9f3621954f081bec3d4e861d1dd60847b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '32c1186d1f4dd1a5a09842224cbfe3d648cc7fac', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '35618fea4d36844fbad5aed1c07dc2e7378a1d4e', class: "inner-content" }, index.h("slot", { key: 'eaa5cdaffd9381f8b05b202f6213d8304fbf7cbb' })))));
+        return (index.h("div", { key: 'ac0d35621b7f06c3dd0bcde1b400dd173a1fcabd', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: '88eaf8e286c71444636256f3b8d249912624dbd5', 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: '4dee92a98b178f371592b69723fc24b7606e916f', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: 'cfab69fc24b3c7e442379701612827d8564a1572', icon: "chevron-down-16" })), index.h("span", { key: 'e3f2864b2987b47e4f4f80e033198dda06f25805', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '8a5c24c39e6366f1bdbbe4360113f4bda340fa19', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '2d9585a6958af61c60b98d4b1dc2763bfdddf603', class: "inner-content" }, index.h("slot", { key: '2fe3539eb389112be66e8bfe729b6b2bbadec2df' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-accordion_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"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@use \"../../global/font.scss\";\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, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-accordion', await framework)\n }\n }\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px 4px 0px;\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 height:0;\n overflow: hidden;\n transition: 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.$ifxSpace200;\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 margin: 0 4px 4px;\n border: 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.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: none;\n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n margin: 0;\n }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class AccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n })\n open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.checkSlotContent()\n this.openAccordionItem();\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.checkSlotContent()\n this.openAccordionItem();\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n this.contentEl.style.overflow = 'hidden';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n\n getInnerContentWrapper() {\n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n return innerContentEl;\n }\n\n attachResizeObserver() {\n const innerContentEl = this.getInnerContentWrapper();\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl);\n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if (!path.includes(this.titleEl)) {\n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n checkSlotContent() {\n const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const hasContent = slot.assignedNodes().length > 0;\n const innerContent = this.getInnerContentWrapper();\n if (!hasContent) {\n innerContent.classList.add('no-content');\n } else if (innerContent.classList.contains('no-content')) {\n innerContent.classList.remove('no-content');\n }\n }\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div\n role=\"button\"\n aria-expanded={this.internalOpen}\n aria-controls=\"accordion-content\"\n class=\"accordion-title\"\n onClick={() => this.toggleOpen()}\n tabindex=\"0\"\n ref={el => (this.titleEl = el as HTMLElement)}\n >\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">\n {this.caption}\n </span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"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@use \"../../global/font.scss\";\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, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-accordion', await framework)\n }\n }\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px 4px 0px;\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.$ifxSpace200;\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.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n border: 1px solid tokens.$ifxColorEngineering200;\n border-top: none;\n margin: 0 4px 4px;\n}\n\n.inner-content {\n &.no-content { \n border: none;\n padding: 0;\n }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class AccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n })\n open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.checkSlotContent()\n this.openAccordionItem();\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.checkSlotContent()\n this.openAccordionItem();\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.contentEl) {\n if (this.internalOpen) {\n this.contentEl.style.height = 'auto';\n const updatedHeight = this.contentEl.scrollHeight;\n this.contentEl.style.height = `${updatedHeight}px`;\n this.contentEl.style.overflow = 'visible';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n }\n\n getInnerContentWrapper() {\n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n return innerContentEl;\n }\n\n attachResizeObserver() {\n const innerContentEl = this.getInnerContentWrapper();\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl);\n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if (!path.includes(this.titleEl)) {\n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n checkSlotContent() {\n const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const hasContent = slot.assignedNodes().length > 0;\n const innerContent = this.getInnerContentWrapper();\n if (!hasContent) {\n innerContent.classList.add('no-content');\n } else if (innerContent.classList.contains('no-content')) {\n innerContent.classList.remove('no-content');\n }\n }\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div\n role=\"button\"\n aria-expanded={this.internalOpen}\n aria-controls=\"accordion-content\"\n class=\"accordion-title\"\n onClick={() => this.toggleOpen()}\n tabindex=\"0\"\n ref={el => (this.titleEl = el as HTMLElement)}\n >\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\" />\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">\n {this.caption}\n </span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}