npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.1 → 30.9.2--canary.1640.8926aa040c1241b80b9d12b6600d721691845221.0 - Mend

@infineon/infineon-design-system-stencil 30.9.1 → 30.9.2--canary.1640.8926aa040c1241b80b9d12b6600d721691845221.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 (187) hide show

package/dist/collection/components/accordion/accordion.stories.js CHANGED Viewed

@@ -4,17 +4,87 @@ export default {
     component: 'ifx-accordion',
     //tags: ['autodocs'],
     args: {
-        autoCollapse: false,
+        amountOfItems: 3,
         AriaLevel: 3,
+        autoCollapse: false,
     },
     argTypes: {
-        amountOfItems: { control: 'number' },
+        amountOfItems: {
+            control: 'number',
+            name: 'Amount of Items',
+            description: 'Control the number of *<ifx-accordion-item>*.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'number'
+                }
+            }
+        },
         AriaLevel: {
             control: 'number',
             min: 1,
             max: 6,
-            description: 'The aria-level attribute for the accordion item header.'
+            description: 'The aria-level attribute for the accordion item header.',
+            table: {
+                defaultValue: { summary: '3' },
+                category: 'ifx-accordion-item props',
+                type: {
+                    summary: 'number'
+                }
+            }
+        },
+        mutable: {
+            control: 'boolean',
+            description: 'Set the mutable attribute.',
+            table: {
+                category: 'ifx-accordion-item props',
+                defaultValue: { summary: 'true' },
+                type: {
+                    summary: 'boolean'
+                }
+            }
         },
+        autoCollapse: {
+            control: 'boolean',
+            description: 'Collapse the other items when one item is opened.',
+            table: {
+                category: 'ifx-accordion props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        },
+        ifxItemOpen: {
+            action: 'ifxItemOpen',
+            description: 'Event emitted when an accordion item is opened.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: `React: onIfxItemOpen={handleOpen}
+            Vue: @ifxItemOpen="handleOpen"
+            Angular: (ifxItemOpen)="handleOpen()"
+            VanillaJs: .addEventListener("ifxItemOpen", (event) => {/*handle open*/});`
+                }
+            },
+        },
+        ifxItemClose: {
+            action: 'ifxItemClose',
+            description: 'Event emitted when an accordion item is closed.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: `React: onIfxItemClose={handleClose}
+          Vue: @ifxItemClose="handleClose"
+          Angular: (ifxItemClose)="handleClose()"
+          VanillaJs: .addEventListener("ifxItemClose", (event) => {/*handle close*/});`
+                }
+            },
+        }
     },
 };
 const Template = args => {
@@ -23,11 +93,15 @@ const Template = args => {
     initialItem.setAttribute('caption', `Label`);
     initialItem.setAttribute('open', `true`);
     initialItem.setAttribute('aria-level', args.AriaLevel);
+    initialItem.setAttribute('mutable', args.mutable);
+    initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));
+    initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));
     initialItem.innerHTML = `
   Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
 `;
+    initialItem.setAttribute('caption', `Label`);
     initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));
     initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));
     accordionElement.append(initialItem);
@@ -37,6 +111,7 @@ const Template = args => {
         item.setAttribute('caption', `Label`);
         item.setAttribute('open', `false`);
         item.setAttribute('aria-level', args.AriaLevel);
+        item.setAttribute('mutable', args.mutable);
         item.innerHTML = `
         Content for Item #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
@@ -51,5 +126,6 @@ const Template = args => {
 export const Default = Template.bind({});
 Default.args = {
     amountOfItems: 3,
+    mutable: true,
 };
 //# sourceMappingURL=accordion.stories.js.map

package/dist/collection/components/accordion/accordion.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,qBAAqB;IAErB,IAAI,EAAE;QACJ,~~YAAY~~,EAAE,~~KAAK~~;~~QACnB~~,SAAS,EAAE,CAAC;~~KACb~~;IAED,QAAQ,EAAE;QACR,aAAa,EAAE,EAAE,~~OAAO~~,EAAE,QAAQ,EAAE;~~QACpC~~,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;YACN,WAAW,EAAE,yDAAyD;~~SACvE~~;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjE,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC7C,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,WAAW,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;~~IAEvD~~,WAAW,CAAC,SAAS,GAAG;;;;CAIzB,CAAC;~~IACA~~,WAAW,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;IACnE,WAAW,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IAErE,gBAAgB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAErC,gBAAgB,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1D,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;~~QAEhD~~,IAAI,CAAC,SAAS,GAAG;4BAEX,CAAC,GAAG,CACN;;;KAGH,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAE9D,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,aAAa,EAAE,CAAC;~~CACjB~~,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Accordion',\n component: 'ifx-accordion',\n //tags: ['autodocs'],\n\n args: {\n ~~autoCollapse~~: ~~false~~,\n AriaLevel: 3,\n },\n\n argTypes: {\n amountOfItems: { control: 'number' },\n AriaLevel: { \n control: 'number', \n min: 1, \n max: 6, \n description: 'The aria-level attribute for the accordion item header.' \n },\n },\n};\n\nconst Template = args => {\n const accordionElement = document.createElement('ifx-accordion');\n const initialItem = document.createElement('ifx-accordion-item');\n initialItem.setAttribute('caption', `Label`);\n initialItem.setAttribute('open', `true`);\n initialItem.setAttribute('aria-level', args.AriaLevel);\n\n initialItem.innerHTML = `\n Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n`;\n initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n accordionElement.append(initialItem);\n\n accordionElement.setAttribute('auto-collapse', args.autoCollapse);\n for (let i = 1; i < args.amountOfItems; i++) {\n const item = document.createElement('ifx-accordion-item');\n item.setAttribute('caption', `Label`);\n item.setAttribute('open', `false`);\n item.setAttribute('aria-level', args.AriaLevel);\n\n item.innerHTML = `\n Content for Item #${\n i + 1\n }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n `;\n item.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n item.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n accordionElement.append(item);\n }\n\n return accordionElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n amountOfItems: 3,\n};\n"]}
1	+ {"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Accordion',\n component: 'ifx-accordion',\n //tags: ['autodocs'],\n\n args: {\n amountOfItems: 3,\n AriaLevel: 3,\n autoCollapse: false,\n },\n\n argTypes: {\n amountOfItems: { \n control: 'number', \n name: 'Amount of Items',\n description: 'Control the number of <ifx-accordion-item>.',\n table: {\n category: 'story controls',\n type: {\n summary: 'number'\n }\n }\n },\n AriaLevel: {\n control: 'number', \n min: 1, \n max: 6, \n description: 'The aria-level attribute for the accordion item header.',\n table: {\n defaultValue: {summary: '3'},\n category: 'ifx-accordion-item props',\n type: {\n summary: 'number'\n }\n } \n }, \n mutable: {\n control: 'boolean',\n description: 'Set the mutable attribute.',\n table: {\n category: 'ifx-accordion-item props',\n defaultValue: {summary: 'true'},\n type: {\n summary: 'boolean'\n }\n }\n },\n autoCollapse: {\n control: 'boolean',\n description: 'Collapse the other items when one item is opened.',\n table: {\n category: 'ifx-accordion props',\n defaultValue: { \n summary: 'false' \n },\n type: {\n summary: 'boolean'\n }\n }\n },\n ifxItemOpen: { \n action: 'ifxItemOpen',\n description: 'Event emitted when an accordion item is opened.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:`React: onIfxItemOpen={handleOpen}\n Vue: @ifxItemOpen=\"handleOpen\"\n Angular: (ifxItemOpen)=\"handleOpen()\"\n VanillaJs: .addEventListener(\"ifxItemOpen\", (event) => {/handle open/});`\n }\n },\n },\n ifxItemClose: { \n action: 'ifxItemClose',\n description: 'Event emitted when an accordion item is closed.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: \n `React: onIfxItemClose={handleClose}\n Vue: @ifxItemClose=\"handleClose\"\n Angular: (ifxItemClose)=\"handleClose()\"\n VanillaJs: .addEventListener(\"ifxItemClose\", (event) => {/handle close/});`\n }\n },\n }\n },\n};\n\nconst Template = args => {\n const accordionElement = document.createElement('ifx-accordion');\n const initialItem = document.createElement('ifx-accordion-item');\n initialItem.setAttribute('caption', `Label`);\n initialItem.setAttribute('open', `true`);\n initialItem.setAttribute('aria-level', args.AriaLevel);\n initialItem.setAttribute('mutable', args.mutable);\n initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n initialItem.innerHTML = `\n Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n`;\ninitialItem.setAttribute('caption', `Label`);\n initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n accordionElement.append(initialItem);\n\n accordionElement.setAttribute('auto-collapse', args.autoCollapse);\n for (let i = 1; i < args.amountOfItems; i++) {\n const item = document.createElement('ifx-accordion-item');\n item.setAttribute('caption', `Label`);\n item.setAttribute('open', `false`);\n item.setAttribute('aria-level', args.AriaLevel);\n item.setAttribute('mutable', args.mutable);\n\n item.innerHTML = `\n Content for Item #${\n i + 1\n }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n `;\n item.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n item.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n accordionElement.append(item);\n }\n\n return accordionElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n amountOfItems: 3,\n mutable: true,\n};\n"]}

package/dist/collection/components/accordion/accordionItem.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class IfxAccordionItem {
     constructor() {
         this.caption = undefined;
         this.open = false;
-        this.AriaLive = 3;
+        this.AriaLevel = 3;
         this.internalOpen = false;
     }
     componentWillLoad() {
@@ -68,7 +68,7 @@ export class IfxAccordionItem {
         }
     }
     render() {
-        return (h("div", { key: '1215772109c33556d626f4a7d40d6655684806a2', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '30e7771bae93c213d9f95126886d7552ebe03b94', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, h("span", { key: '7da5f484c41f9f01dd7eec5092ec8ad82947d481', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLive), class: "accordion-icon" }, h("ifx-icon", { key: 'e64e478a66fd0dd2c3d3608294a6160aa4232952', icon: "chevron-down-12" })), h("span", { key: '7e1ff777da8ce68d6d5f1266512fbd05731169f5', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '144fa8393da592e1d928b51d7b4ad48d6b06a100', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '28702f514d9bd400499a49a3b1cd675f56d7fcad', class: "inner-content" }, h("slot", { key: 'e40109a457e4b1cc09c8234d5003361bb6c1c6fb', onSlotchange: (e) => this.handleSlotChange(e) })))));
+        return (h("div", { key: '81ca5bfa7f1766eb5b2657b4e2df0019cde776aa', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '0b4daafa22e601cbf1ad1efbe79665c19b751fde', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, h("span", { key: 'e48ea5054c730b317df221a3f191d13186af1932', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: 'e9581b95bb5a60319c1537c3de6525030d56bf2c', icon: "chevron-down-12" })), h("span", { key: '28862a5c2e3c801b6be02d38c20bd91dce003cbf', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: 'bfe16bfca9899e00e3356bf723caeec83e256486', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '1da3e12ea0120b6450f3f88c3a81e40b9c0c2cd5', class: "inner-content" }, h("slot", { key: '229dec050d2cf0fdd1f78b03dc37e831869c624d', onSlotchange: (e) => this.handleSlotChange(e) })))));
     }
     static get is() { return "ifx-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -123,7 +123,7 @@ export class IfxAccordionItem {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "AriaLive": {
+            "AriaLevel": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -139,7 +139,7 @@ export class IfxAccordionItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-live",
+                "attribute": "aria-level",
                 "reflect": false,
                 "defaultValue": "3"
             }

package/dist/collection/components/accordion/accordionItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAO9F,MAAM,OAAO,gBAAgB;;;oBAIR,KAAK;~~wBACL~~,CAAC;~~4BACa~~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~~QAAQ~~,CAAW,EAAE,KAAK,EAAC,gBAAgB;~~oBACzG~~,iEAAU,IAAI,EAAC,iBAAiB,GAAE,CAC7B;gBACP,6DAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxE;YACN,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,qBAAiB,mBAAmB;gBACxJ,4DAAK,KAAK,EAAC,eAAe;oBACxB,6DAAM,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACnD,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() ~~AriaLive~~ = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxItemOpen: EventEmitter;\n @Event() ifxItemClose: EventEmitter;\n private contentEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\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.ifxItemOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxItemClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.~~AriaLive~~) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-12\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</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 onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxItemOpen: EventEmitter;\n @Event() ifxItemClose: EventEmitter;\n private contentEl!: HTMLElement;\n\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\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.ifxItemOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxItemClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.internalOpen) {\n this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n } else {\n this.contentEl.style.maxHeight = '0';\n }\n }\n\n handleSlotChange(e) {\n const slotElement = e.target;\n const nodes = slotElement.assignedNodes();\n \n if(nodes.length > 0) {\n nodes.forEach(node => {\n const observer = new MutationObserver((mutationsList, _) => {\n for(let mutation of mutationsList) {\n if (mutation.type === 'childList') {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n }\n });\n observer.observe(node, { attributes: true, childList: true, subtree: true });\n });\n }\n\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n }\n\n \n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-12\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</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 onSlotchange={(e) => this.handleSlotChange(e)} />\n </div>\n </div>\n </div>\n );\n }\n}"]}

package/dist/collection/components/alert/alert.stories.js CHANGED Viewed

@@ -5,28 +5,55 @@ export default {
     args: {
         label: 'Attention! This is an alert message — check it out!',
         variant: 'primary',
-        showIcon: true,
         closable: true,
-        iconName: 'c-info-24',
+        icon: 'c-info-24',
         AriaLive: 'assertive',
     },
     argTypes: {
+        label: {
+            name: 'Label of Alert',
+            description: 'Sets the label of *<ifx-alert>*.',
+            table: {
+                category: 'story controls'
+            }
+        },
         variant: {
+            description: 'Sets the style variant of the alert.',
             options: ['primary', 'success', 'danger', 'warning'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'primary'
+                }
+            }
         },
-        iconName: {
-            options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+        icon: {
+            description: 'The icon to be displayed. Choose ***none*** to display no icon.',
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            control: 'select',
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'c-info-24'
+                }
+            }
         },
         closable: {
+            description: 'Defines whether the alert should be closable or not.',
             control: 'boolean',
-            default: true,
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'true'
+                }
+            }
         },
         ifxClose: {
             action: 'ifxClose',
-            description: 'Custom event emitted when close button clicked',
+            description: 'Custom event emitted when close button clicked.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
@@ -35,12 +62,18 @@ export default {
         },
         AriaLive: {
             options: ['off', 'polite', 'assertive'],
-            control: { type: 'radio' },
-            description: 'The aria-live attribute to indicate a dynamic content.'
+            control: 'radio',
+            description: 'The aria-live attribute to indicate a dynamic content.',
+            table: {
+                category: 'ifx-alert props',
+                defaultValue: {
+                    summary: 'assertive'
+                }
+            }
         },
     },
 };
-const DefaultTemplate = args => `<ifx-alert aria-live="${args.AriaLive}" variant="${args.variant}" icon="${args.showIcon ? args.iconName : ''}" closable="${args.closable}">${args.label}</ifx-alert>`;
+const DefaultTemplate = args => `<ifx-alert aria-live="${args.AriaLive}" variant="${args.variant}" icon="${args.icon === 'none' ? '' : args.icon}" closable="${args.closable}">${args.label}</ifx-alert>`;
 export const Default = DefaultTemplate.bind({});
 const InfoTemplate = args => `  <ifx-alert variant="info" closable="${args.closable}">
       <div slot="headline">Headline</div>
@@ -55,7 +88,7 @@ Info.argTypes = {
             disable: true,
         },
     },
-    iconName: {
+    icon: {
         table: {
             disable: true,
         },

package/dist/collection/components/alert/alert.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,~~QAAQ~~,EAAE,~~IAAI~~;~~QACd~~,QAAQ,EAAE,WAAW;~~QACrB~~,QAAQ,EAAE,WAAW;~~KACtB~~;~~IAED~~,QAAQ,EAAE;~~QACR~~,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACpD,OAAO,EAAE,EAAE,~~IAAI~~,EAAE,OAAO,EAAE;~~SAC3B~~;QAED,~~QAAQ~~,EAAE;~~YACR~~,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;~~YACjD~~,OAAO,EAAE,~~EAAE~~,~~IAAI~~,EAAE,QAAQ,EAAE;~~SAC5B~~;~~QAED~~,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,~~IAAI~~;~~SACd~~;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,~~gDAAgD~~;~~YAC7D~~,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6KAA6K;iBAChL;aACF;SACF;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC;YACvC,OAAO,EAAE,EAAE,~~IAAI~~,EAAE,~~OAAO~~,EAAE;~~YAC1B~~,~~WAAW~~,EAAE,~~wDAAwD~~;~~SACtE~~;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,~~QAAQ~~,CAAC,CAAC,CAAC,~~IAAI~~,CAAC,~~QAAQ,~~CAAC,CAAC,CAAC,~~EAAE~~,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;~~AAEvM~~,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAC1B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;IACd,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,~~QAAQ~~,EAAE;~~QACR~~,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Alert',\n tags: ['autodocs'],\n\n args: {\n label: 'Attention! This is an alert message — check it out!',\n variant: 'primary',\n ~~showIcon: true,\n~~ closable: true,\n ~~iconName~~: 'c-info-24',\n AriaLive: 'assertive',\n },\n\n argTypes: {\n variant: {\n options: ['primary', 'success', 'danger', 'warning'],\n control: { ~~type~~: '~~radio~~' },\n },\n\n ~~iconName~~: {\n options: Object.values(icons).map(i => i['name']),\n control: { ~~type~~: '~~select~~' },\n },\n\n closable: {\n control: 'boolean',\n ~~default~~: ~~true~~,\n },\n\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when close button clicked',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n },\n },\n },\n\n AriaLive: { \n options: ['off', 'polite', 'assertive'],\n control: ~~{ type:~~ 'radio' },\n description: 'The aria-live attribute to indicate a dynamic content.' \n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.~~showIcon~~ ? ~~args.iconName~~ : ''}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = args =>\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n <div slot=\"headline\">Headline</div>\n <div slot=\"desc\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n </div>\n </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n variant: {\n table: {\n disable: true,\n },\n },\n ~~iconName~~: {\n table: {\n disable: true,\n },\n },\n showIcon: {\n table: {\n disable: true,\n },\n },\n};\n"]}
1	+ {"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Alert',\n tags: ['autodocs'],\n\n args: {\n label: 'Attention! This is an alert message — check it out!',\n variant: 'primary',\n closable: true,\n icon: 'c-info-24',\n AriaLive: 'assertive',\n },\n\n argTypes: {\n label: {\n name: 'Label of Alert',\n description: 'Sets the label of <ifx-alert>.',\n table: {\n category: 'story controls'\n }\n },\n variant: {\n description: 'Sets the style variant of the alert.',\n options: ['primary', 'success', 'danger', 'warning'],\n control: 'radio',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'primary'\n }\n }\n },\n\n icon: {\n description: 'The icon to be displayed. Choose *none* to display no icon.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'c-info-24'\n }\n }\n },\n closable: {\n description: 'Defines whether the alert should be closable or not.',\n control: 'boolean',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'true'\n }\n }\n },\n\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when close button clicked.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n },\n },\n },\n\n AriaLive: { \n options: ['off', 'polite', 'assertive'],\n control: 'radio',\n description: 'The aria-live attribute to indicate a dynamic content.',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'assertive'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = args =>\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n <div slot=\"headline\">Headline</div>\n <div slot=\"desc\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n </div>\n </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n variant: {\n table: {\n disable: true,\n },\n },\n icon: {\n table: {\n disable: true,\n },\n },\n showIcon: {\n table: {\n disable: true,\n },\n },\n};\n"]}

package/dist/collection/components/badge/badge.stories.js CHANGED Viewed

@@ -4,19 +4,40 @@ export default {
     tags: ['autodocs'],
     args: {
         label: 'Badge label',
-        icon: false,
+        icon: '',
     },
     argTypes: {
-        iconName: {
-            options: Object.values(icons).map(i => i['name']),
+        label: {
+            description: 'The label of the badge.',
+            name: 'Label',
+            control: { type: 'text' },
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        icon: {
             control: { type: 'select' },
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            description: 'Set the icon of the tab. Choose "none" to display no icon.',
+            table: {
+                category: 'ifx-tab props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
     },
 };
-const DefaultTemplate = args => `<ifx-badge>
-    ${args.icon ? `<ifx-icon icon="${args.iconName}"></ifx-icon>` : ''}
-    ${args.label}
-  </ifx-badge>`;
+const DefaultTemplate = args => {
+    const icon = args.icon === 'none' ? '' : args.icon;
+    return `<ifx-badge>
+  ${args.label}
+  ${icon ? `<ifx-icon icon="${icon}"></ifx-icon>` : ''}
+</ifx-badge>`;
+};
 export const Default = DefaultTemplate.bind({});
 Default.argTypes = {};
 //# sourceMappingURL=badge.stories.js.map

package/dist/collection/components/badge/badge.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,~~KAAK~~;~~KACZ~~;IAED,QAAQ,EAAE;QACR,QAAQ,EAAE;~~YACR~~,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;~~YACjD~~,~~OAAO~~,EAAE,EAAE,IAAI,EAAE,~~QAAQ~~,EAAE;~~SAC5B~~;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE~~,CAC7B~~;~~MACI~~,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,~~mBAAmB~~,~~IAAI~~,CAAC,~~QAAQ~~,~~eAAe~~,CAAC,~~CAAC~~,CAAC,~~EAAE~~;~~MAChE~~,IAAI,CAAC,KAAK;~~eACD~~,CAAC;~~AAEhB~~,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Badge',\n tags: ['autodocs'],\n\n args: {\n label: 'Badge label',\n icon: ~~false~~,\n },\n\n argTypes: {\n ~~iconName~~: {\n options: Object.values(icons).map(i => i['name']),\n ~~control~~: { type: '~~select~~' },\n },\n },\n};\n\nconst DefaultTemplate = args ~~=>\~~n `<ifx-badge>\n ${args.icon ? `<ifx-icon icon=\"${~~args.iconName~~}\"></ifx-icon>` : ''}\n ~~${args.label}\n~~ </ifx-badge>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
1	+ {"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,EAAE;KACT;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,yBAAyB;YACtC,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YAC9D,WAAW,EAAE,4DAA4D;YACzE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAEnD,OAAO;IACL,IAAI,CAAC,KAAK;IACV,IAAI,CAAC,CAAC,CAAC,mBAAmB,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;aACzC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Badge',\n tags: ['autodocs'],\n\n args: {\n label: 'Badge label',\n icon: '',\n },\n\n argTypes: {\n label: {\n description: 'The label of the badge.',\n name: 'Label',\n control: { type: 'text' },\n table: {\n category: 'story controls',\n type: {\n summary: 'string'\n }\n }\n },\n icon: {\n control: { type: 'select' },\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n table: {\n category: 'ifx-tab props',\n type: {\n summary: 'string'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const icon = args.icon === 'none' ? '' : args.icon;\n\n return `<ifx-badge>\n ${args.label}\n ${icon ? `<ifx-icon icon=\"${icon}\"></ifx-icon>` : ''}\n</ifx-badge>`;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.stories.js CHANGED Viewed

@@ -1,15 +1,73 @@
 import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
 export default {
     title: 'Components/Breadcrumb',
     tags: ['autodocs'],
     args: {
-        icon: false,
+        icon: '',
+        iconArialLabel: '',
+        url: 'http://google.com',
+        target: '_self',
     },
     argTypes: {
+        icon: {
+            control: { type: 'select' },
+            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            description: 'Set the icon of the tab. Choose "none" to display no icon.',
+            table: {
+                category: 'ifx-breadcrumb-item-label props',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        target: {
+            control: { type: 'text' },
+            description: 'Set the target of the link.',
+            table: {
+                category: 'ifx-breadcrumb-item-label props',
+                defaultValue: {
+                    summary: '_self'
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        iconArialLabel: {
+            control: { type: 'text' },
+            description: 'Set the aria label of the icon.',
+            table: {
+                category: 'ifx-breadcrumb-item-label props',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        url: {
+            control: { type: 'text' },
+            description: 'Set the url of the link.',
+            table: {
+                category: 'ifx-dropdown-item props',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         ifxDropdownMenuItem: {
             action: 'ifxDropdownMenuItem',
-            description: 'Custom event emitted when an item is selected',
+            description: 'Custom event emitted when an item is selected.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxDropdownMenuItem={handleChange}\nVue:@ifxDropdownMenuItem="handleChange"\nAngular:(ifxDropdownMenuItem)="handleChange()"\nVanillaJs:.addEventListener("ifxDropdownMenuItem", (event) => {//handle change});',
@@ -19,12 +77,13 @@ export default {
     },
 };
 const DefaultTemplate = args => {
+    const icon = args.icon === 'none' ? '' : args.icon;
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `<ifx-breadcrumb>
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ''}">Breadcrumb 1</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 1</ifx-breadcrumb-item-label>
     <ifx-dropdown-menu>
-      <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
+      <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>
       <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
       <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
       <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
@@ -32,9 +91,9 @@ const DefaultTemplate = args => {
   </ifx-breadcrumb-item>
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
     <ifx-dropdown-menu>
-    <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
+    <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>
     <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
     <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
     <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
@@ -42,7 +101,7 @@ const DefaultTemplate = args => {
   </ifx-breadcrumb-item>
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? 'c-info-16' : ''}" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
   </ifx-breadcrumb-item>
 </ifx-breadcrumb>`;
     const breadcrumb = wrapper.querySelector('ifx-breadcrumb');

package/dist/collection/components/breadcrumb/breadcrumb.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;~~AAElD~~,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,~~KAAK~~;~~KACZ~~;IACD,QAAQ,EAAE;QACR,mBAAmB,EAAE;YACnB,MAAM,EAAE,qBAAqB;YAC7B,WAAW,EAAE~~,+CAA+C~~;~~YAC5D~~,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yNAAyN;iBAC5N;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;oDAE8B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,~~WAAW~~,CAAC,CAAC,CAAC,EAAE~~;;;;;;;;;;oDAU5B~~,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,~~WAAW~~,CAAC,CAAC,CAAC,EAAE~~;;;;;;;;;;oDAU5B~~,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,~~WAAW~~,CAAC,CAAC,CAAC,EAAE;;~~kBAE9D~~,CAAC;IAEjB,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAgB,CAAC;IAC1E,oFAAoF;IACpF,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC3E,eAAe,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;QACvC,MAAM,YAAY,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACvE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAC,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACvF,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Breadcrumb',\n tags: ['autodocs'],\n\n args: {\n icon: ~~false~~,\n },\n argTypes: {\n ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted when an item is selected',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? ~~'c-info-16'~~ : ''}\">Breadcrumb 1</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item url~~=\"http://google~~.~~com\"~~>Google</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? ~~'c-info-16'~~ : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item url~~=\"http://google~~.~~com\"~~>Google</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? ~~'c-info-16'~~ : ''}\" url=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n breadcrumbItems.forEach(breadcrumbItem => {\n const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n });\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Breadcrumb',\n tags: ['autodocs'],\n\n args: {\n icon: '',\n iconArialLabel: '',\n url: 'http://google.com',\n target: '_self',\n },\n argTypes: {\n icon: {\n control: { type: 'select' },\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n target: {\n control: { type: 'text' },\n description: 'Set the target of the link.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: '_self'\n },\n type: {\n summary: 'string'\n }\n }\n },\n iconArialLabel: {\n control: { type: 'text' },\n description: 'Set the aria label of the icon.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n url: {\n control: { type: 'text' },\n description: 'Set the url of the link.',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted when an item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const icon = args.icon === 'none' ? '' : args.icon;\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 1</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" url=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n breadcrumbItems.forEach(breadcrumbItem => {\n const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n });\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}