@infineon/infineon-design-system-stencil 30.1.1--canary.1496.ada7ab553a087bc3fb372b950494343ccb1df41e.0 → 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0

package/dist/collection/components/tabs/tabs.stories.js

@@ -1,33 +1,104 @@
 import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
 export default {
     title: 'Components/Tabs',
     tags: ['autodocs'],
     component: 'ifx-tabs',
+    args: {
+        amountOfTabs: 3,
+        orientation: 'horizontal',
+        icon: '',
+        header: 'Tab',
+        disabled: false,
+    },
     argTypes: {
-        amountOfTabs: { name: 'Amount of Tabs', control: 'number' },
+        amountOfTabs: {
+            name: 'Amount of Tabs', control: 'number',
+            description: 'Set the number of tabs.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'number'
+                }
+            }
+        },
         orientation: {
-            name: 'Orientation',
             options: ['horizontal', 'vertical'],
             control: { type: 'radio' },
+            description: 'Set the orientation of the tabs.',
+            table: {
+                category: 'ifx-tabs props',
+                defaultValue: {
+                    summary: 'horizontal',
+                },
+                type: {
+                    summary: 'horizontal | vertical'
+                }
+            }
         },
         icon: {
-            name: 'Show icon',
-            control: { type: 'boolean' }
+            name: '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',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         iconPosition: {
-            name: 'Icon position',
             options: ['left', 'right'],
             control: { type: 'radio' },
-            if: { arg: 'icon', eq: true }
+            description: 'Set the position of the icon.',
+            table: {
+                category: 'ifx-tab props',
+                defaultValue: {
+                    summary: 'left'
+                },
+                type: {
+                    summary: 'left | right'
+                },
+            },
         },
         activeTabIndex: {
-            name: 'Active tab index',
-            description: 'Set a tab as active by providing the index (tab can not be disabled)',
+            description: 'Set the tab as active by providing the index (tab can not be disabled).',
+            table: {
+                category: 'ifx-tabs props',
+                defaultValue: { summary: '0' },
+                type: {
+                    summary: 'number'
+                }
+            }
+        },
+        header: {
+            control: 'text',
+            description: 'Set the header of the tab.',
+            table: {
+                defaultValue: { summary: 'Tab' },
+                category: 'ifx-tab props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Set the tab to disabled. In the storybook, the second tab will be disabled.',
+            table: {
+                category: 'ifx-tab props',
+                defaultValue: { summary: 'false' },
+            }
         },
         ifxTabChange: {
             action: 'ifxTabChange',
-            description: 'Custom event emitted on tab index change, containing the current (currentTab) and the previous tab (previousTab)',
+            description: 'Custom event emitted on tab index change, containing the current (currentTab) and the previous tab (previousTab).',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxTabChange={handleChange}\nVue:@ifxTabChange="handleChange"\nAngular:(ifxTabChange)="handleChange()"\nVanillaJs:.addEventListener("ifxTabChange", (event) => {//handle change});',
@@ -43,14 +114,13 @@ const Template = args => {
     tabsElement.addEventListener('ifxTabChange', action(`ifxTabChange`));
     for (let i = 0; i < args.amountOfTabs; i++) {
         const tabContent = document.createElement('ifx-tab');
-        tabContent.setAttribute('header', `tab ${i + 1}`);
+        tabContent.setAttribute('header', `${args.header} ${i + 1}`);
         if (i == 1) {
-            tabContent.setAttribute('disabled', 'true');
-        }
-        if (args.icon) {
-            tabContent.setAttribute('icon', 'c-check-16');
-            tabContent.setAttribute('icon-position', args.iconPosition);
+            tabContent.setAttribute('disabled', args.disabled);
         }
+        var icon = args.icon === 'none' ? '' : args.icon;
+        tabContent.setAttribute('icon', icon);
+        tabContent.setAttribute('icon-position', args.iconPosition);
         tabContent.innerHTML = `
         Content for Tab #${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.
@@ -65,13 +135,9 @@ Default.args = {
     amountOfTabs: 3,
     orientation: 'horizontal',
     activeTabIndex: 0,
-    icon: false,
-    iconPosition: 'left'
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    amountOfTabs: 3,
-    orientation: 'horizontal',
-    activeTabIndex: 2,
+    icon: '',
+    iconPosition: 'left',
+    header: 'Tab',
+    disabled: false,
 };
 //# sourceMappingURL=tabs.stories.js.map

package/dist/collection/components/tabs/tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Tabs',\n  tags: ['autodocs'],\n\n  component: 'ifx-tabs',\n  argTypes: {\n    amountOfTabs: { name: 'Amount of Tabs', control: 'number' },\n    orientation: {\n      name: 'Orientation',\n      options: ['horizontal', 'vertical'],\n      control: { type: 'radio' },\n    },\n    icon: {\n      name: 'Show icon',\n      control: {type: 'boolean'}\n    },\n    iconPosition: {\n      name: 'Icon position',\n      options: ['left', 'right'],\n      control: {type: 'radio'},\n      if: {arg: 'icon', eq: true}\n    },\n    activeTabIndex: {\n      name: 'Active tab index',\n      description: 'Set a tab as active by providing the index (tab can not be disabled)',\n    },\n\n    ifxTabChange: {\n      action: 'ifxTabChange',\n      description: 'Custom event emitted on tab index change, containing the current (currentTab) and the previous tab (previousTab)',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxTabChange={handleChange}\\nVue:@ifxTabChange=\"handleChange\"\\nAngular:(ifxTabChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxTabChange\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const tabsElement = document.createElement('ifx-tabs') as HTMLIfxTabsElement;\n  tabsElement.setAttribute('orientation', args.orientation);\n  tabsElement.setAttribute('active-tab-index', args.activeTabIndex);\n  tabsElement.addEventListener('ifxTabChange', action(`ifxTabChange`));\n  \n  for (let i = 0; i < args.amountOfTabs; i++) {\n    const tabContent = document.createElement('ifx-tab');\n    tabContent.setAttribute('header', `tab ${i+1}`);\n    if(i == 1) {\n      tabContent.setAttribute('disabled', 'true');\n    }\n    if(args.icon){\n      tabContent.setAttribute('icon', 'c-check-16');\n      tabContent.setAttribute('icon-position', args.iconPosition);\n    }\n    tabContent.innerHTML = `\n        Content for Tab #${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.\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    tabsElement.append(tabContent);\n  }\n\n  return tabsElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  amountOfTabs: 3,\n  orientation: 'horizontal',\n  activeTabIndex: 0,\n  icon: false,\n  iconPosition: 'left'\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  amountOfTabs: 3,\n  orientation: 'horizontal',\n  activeTabIndex: 2,\n};\n"]}
+{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.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/Tabs',\n  tags: ['autodocs'],\n\n  component: 'ifx-tabs',\n  args: {\n    amountOfTabs: 3,\n    orientation: 'horizontal',\n    icon: '',\n    header: 'Tab',\n    disabled: false,\n  },\n  argTypes: {\n    amountOfTabs: {\n      name: 'Amount of Tabs', control: 'number',\n      description: 'Set the number of tabs.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'number'\n        }\n      }\n    },\n    orientation: {\n      options: ['horizontal', 'vertical'],\n      control: { type: 'radio' },\n      description: 'Set the orientation of the tabs.',\n      table: {\n        category:\n          'ifx-tabs props',\n        defaultValue: {\n          summary: 'horizontal',\n        },\n        type: {\n          summary: 'horizontal | vertical'\n        }\n      }\n    },\n    icon: {\n      name: '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        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    iconPosition: {\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n      description: 'Set the position of the icon.',\n      table: {\n        category: 'ifx-tab props',\n        defaultValue: {\n          summary: 'left'\n        },\n        type: {\n          summary: 'left | right'\n        },\n      },\n    },\n    activeTabIndex: {\n      description: 'Set the tab as active by providing the index (tab can not be disabled).',\n      table: {\n        category: 'ifx-tabs props',\n        defaultValue: { summary: '0' },\n        type: {\n          summary: 'number'\n        }\n      }\n    },\n    header: {\n      control: 'text',\n      description: 'Set the header of the tab.',\n      table: {\n        defaultValue: { summary: 'Tab' },\n        category: 'ifx-tab props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Set the tab to disabled. In the storybook, the second tab will be disabled.',\n      table: {\n        category: 'ifx-tab props',\n        defaultValue: { summary: 'false' },\n      }\n    },\n    ifxTabChange: {\n      action: 'ifxTabChange',\n      description: 'Custom event emitted on tab index change, containing the current (currentTab) and the previous tab (previousTab).',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxTabChange={handleChange}\\nVue:@ifxTabChange=\"handleChange\"\\nAngular:(ifxTabChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxTabChange\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const tabsElement = document.createElement('ifx-tabs') as HTMLIfxTabsElement;\n  tabsElement.setAttribute('orientation', args.orientation);\n  tabsElement.setAttribute('active-tab-index', args.activeTabIndex);\n  tabsElement.addEventListener('ifxTabChange', action(`ifxTabChange`));\n\n  for (let i = 0; i < args.amountOfTabs; i++) {\n    const tabContent = document.createElement('ifx-tab');\n    tabContent.setAttribute('header', `${args.header} ${i + 1}`);\n    if (i == 1) {\n      tabContent.setAttribute('disabled', args.disabled);\n    }\n    var icon = args.icon === 'none' ? '' : args.icon;\n    tabContent.setAttribute('icon', icon);\n    tabContent.setAttribute('icon-position', args.iconPosition);\n    tabContent.innerHTML = `\n        Content for Tab #${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.\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    tabsElement.append(tabContent);\n  }\n\n  return tabsElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  amountOfTabs: 3,\n  orientation: 'horizontal',\n  activeTabIndex: 0,\n  icon: '',\n  iconPosition: 'left',\n  header: 'Tab',\n  disabled: false,\n};"]}

package/dist/collection/components/tag/tag.stories.js

@@ -7,9 +7,27 @@ export default {
         icon: 'chevron-up-16',
     },
     argTypes: {
+        label: {
+            name: 'Label',
+            control: { type: 'text' },
+            description: 'Set the label of the tag.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         icon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            description: 'Set the icon of the tag.',
+            table: {
+                category: 'ifx-tag props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
     },
 };

package/dist/collection/components/tag/tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.stories.js","sourceRoot":"","sources":["../../../src/components/tag/tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,eAAe;KACtB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,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,CAAC,kBAAkB,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,YAAY,CAAC;AAEvF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Tag',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Tag label',\n    icon: 'chevron-up-16',\n  },\n  argTypes: {\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-tag icon=\"${args.icon}\">${args.label}</ifx-tag>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"tag.stories.js","sourceRoot":"","sources":["../../../src/components/tag/tag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,eAAe;KACtB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,2BAA2B;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,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;YAC3B,WAAW,EAAE,0BAA0B;YACvC,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,CAAC,kBAAkB,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,YAAY,CAAC;AAEvF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Tag',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Tag label',\n    icon: 'chevron-up-16',\n  },\n  argTypes: {\n    label: {\n      name: 'Label',\n      control: { type: 'text' },\n      description: 'Set the label of the tag.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      description: 'Set the icon of the tag.',\n      table: {\n        category: 'ifx-tag props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-tag icon=\"${args.icon}\">${args.label}</ifx-tag>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/text-field/text-field.js

@@ -39,12 +39,12 @@ export class TextField {
         this.internals.setFormValue("");
     }
     render() {
-        return (h("div", { key: 'f76a8efd672a84edb34e5b5e820ca8fe14182066', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '531b832f44b98dc863ee00e55d3625ff8de2c984', class: "textInput__top-wrapper" }, h("label", { key: '538bd51d59dce9ae1e03d9b47b78efc7509d35fc', htmlFor: "text-field" }, h("slot", { key: '7a7a08283630b1b768100d438daf435128af8549' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '291a820de5211c235d0bb9455379251af70f5388', class: "textInput__bottom-wrapper" }, h("div", { key: 'a633c93c4d2c278163890626d402ee8339955853', class: "input-container" }, this.icon && (h("ifx-icon", { key: '266d57aad6ff144924feaa781053dd2be24b59cc', class: 'input-icon', icon: this.icon })), h("input", { key: 'fc7f085ff9517422dfc0ffa1f020a8e4732cb6b8', ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: 'bac57482e1adf9041a14cb4741c9acbe70d45928', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '1f7f1f69575f3c49947c66f6e6cd08bd5403bc51', class: "textInput__top-wrapper" }, h("label", { key: '32738378ccbf0b1160624fcdb64277f99053e7e6', htmlFor: "text-field" }, h("slot", { key: '36b30114b6fc537e3b177e1cee760b702bb61194' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: 'd2bcb6848701c0317b8d950cdd964a1c0a56bc31', class: "textInput__bottom-wrapper" }, h("div", { key: 'ef91e60aa86c45bcce36a8ac678ef559af93ae25', class: "input-container" }, this.icon && (h("ifx-icon", { key: '256dcebb49891eb00ae01d775e79c50d2b91e7ab', class: 'input-icon', icon: this.icon })), h("input", { key: '85d918c9fe8e7f54af4c4df472f7639f1e9a47d8', ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""} 
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '5fc4424ef2ceee687e24c76954440fa71ed801d3', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: 'e5ebfe2568a94ace8c6d258d525b51c8c8171dbc', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: '87e75c5c412d0143311ef1adc11e79e9746ad718', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '0d4d4aea767f241d999c184246acd67f4b58bafa', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '3f4814e2da1b912fa8855b1173c54063eca2e55b', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: '1805c8aa16e01b24ee3241aaa6527b55a22d8ed0', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get is() { return "ifx-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-field/text-field.stories.js

@@ -4,43 +4,134 @@ export default {
     title: 'Components/Text Field',
     // tags: ['autodocs'],
     args: {
+        label: 'Label',
+        error: false,
         disabled: false,
         size: 'm',
+        icon: 'c-info-16',
         success: false,
-        label: 'Label',
         placeholder: 'Placeholder',
-        error: false,
         caption: 'Caption',
         required: true,
         optional: false,
-        icon: 'c-info-16',
         name: 'text-field',
-        showDeleteIcon: false
+        showDeleteIcon: false,
+        maxlength: '',
     },
     argTypes: {
+        label: {
+            name: 'Label of Text Field',
+            description: 'The text label displayed above the text field.',
+            table: {
+                category: 'story controls',
+            }
+        },
+        error: {
+            description: 'Indicates an error state for the text field.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the text field.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
         size: {
             description: 'Size options: s (36px) and m (40px) - default: m',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
         icon: {
+            description: 'Specifies an icon to display within the text field.',
             options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            control: 'select',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: 'c-info-16'
+                }
+            }
         },
-        name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+        success: {
+            description: 'Indicates a successful state for the text field.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
-        maxlength: {
-            description: 'Maximum input length',
-            control: { type: 'number' }
+        placeholder: {
+            description: 'Displays a placeholder text inside the text field when it is empty.',
+            table: {
+                category: 'ifx-text-field props',
+            }
+        },
+        caption: {
+            description: 'Text displayed below the text field to provide additional information.',
+            table: {
+                category: 'ifx-text-field props',
+            }
+        },
+        required: {
+            description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to **true**.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
+        optional: {
+            description: 'Indicates that the field is optional.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        name: {
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-text-field props',
+            }
         },
         showDeleteIcon: {
-            description: 'Show the delete icon'
+            description: 'Displays a delete icon inside the text field when set to **true**, allowing user to clear the input content.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        maxlength: {
+            description: 'Specifies the maximum number of characters that can be entered into the text field.',
+            control: 'number',
+            table: {
+                category: 'ifx-text-field props',
+            }
         },
         ifxInput: {
             action: 'ifxInput',
-            description: 'Custom event',
+            description: 'Custom event emitted on input change.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',

package/dist/collection/components/text-field/text-field.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,aAAa;QAC1B,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,YAAY;QAClB,cAAc,EAAE,KAAK;KACtB;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,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;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;SACxF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,sBAAsB;YACnC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,cAAc,EAAE;YACd,WAAW,EAAE,sBAAsB;SACpC;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,cAAc;YAC3B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;IACrJ,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IACjD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;IACzD,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAGzD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAEjC,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';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Text Field',\n  // tags: ['autodocs'],\n\n  args: {\n    disabled: false,\n    size: 'm',\n    success: false,\n    label: 'Label',\n    placeholder: 'Placeholder',\n    error: false,\n    caption: 'Caption',\n    required: true,\n    optional: false,\n    icon: 'c-info-16',\n    name: 'text-field',\n    showDeleteIcon: false\n  },\n\n  argTypes: {\n    size: {\n      description: 'Size options: s (36px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    maxlength: {\n      description: 'Maximum input length',\n      control: {type: 'number'}\n    },\n    showDeleteIcon: {\n      description: 'Show the delete icon'\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'Custom event',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon }) => {\n  const element = document.createElement('ifx-text-field');\n  element.setAttribute('error', error);\n  element.setAttribute('disabled', disabled);\n  element.setAttribute('size', size);\n  element.setAttribute('icon', icon);\n  element.setAttribute('success', success);\n  element.setAttribute('placeholder', placeholder);\n  element.setAttribute('caption', caption);\n  element.setAttribute('required', required);\n  element.setAttribute('optional', optional);\n  element.setAttribute('name', name);\n  element.setAttribute('show-delete-icon', showDeleteIcon);\n  if (maxlength) element.setAttribute('maxlength', maxlength);\n\n  element.addEventListener('ifxInput', action('ifxInput'));\n\n\n  const slotContent = document.createTextNode(label);\n  element.appendChild(slotContent);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.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/Text Field',\n  // tags: ['autodocs'],\n\n  args: {\n    label: 'Label',\n    error: false,\n    disabled: false,\n    size: 'm',\n    icon: 'c-info-16',\n    success: false,\n    placeholder: 'Placeholder',\n    caption: 'Caption',\n    required: true,\n    optional: false,\n    name: 'text-field',\n    showDeleteIcon: false,\n    maxlength: '',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Text Field',\n      description: 'The text label displayed above the text field.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    error: {\n      description: 'Indicates an error state for the text field.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the text field.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    size: {\n      description: 'Size options: s (36px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: 'radio',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    icon: {\n      description: 'Specifies an icon to display within the text field.',\n      options: Object.values(icons).map(i => i['name']),\n      control: 'select',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: 'c-info-16'\n        }\n      }\n    },\n    success: {\n      description: 'Indicates a successful state for the text field.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    placeholder: {\n      description: 'Displays a placeholder text inside the text field when it is empty.',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    caption: {\n      description: 'Text displayed below the text field to provide additional information.',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    required: {\n      description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to **true**.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    optional: {\n      description: 'Indicates that the field is optional.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    showDeleteIcon: {\n      description: 'Displays a delete icon inside the text field when set to **true**, allowing user to clear the input content.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    maxlength: {\n      description: 'Specifies the maximum number of characters that can be entered into the text field.',\n      control: 'number',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'Custom event emitted on input change.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon }) => {\n  const element = document.createElement('ifx-text-field');\n  element.setAttribute('error', error);\n  element.setAttribute('disabled', disabled);\n  element.setAttribute('size', size);\n  element.setAttribute('icon', icon);\n  element.setAttribute('success', success);\n  element.setAttribute('placeholder', placeholder);\n  element.setAttribute('caption', caption);\n  element.setAttribute('required', required);\n  element.setAttribute('optional', optional);\n  element.setAttribute('name', name);\n  element.setAttribute('show-delete-icon', showDeleteIcon);\n  if (maxlength) element.setAttribute('maxlength', maxlength);\n\n  element.addEventListener('ifxInput', action('ifxInput'));\n\n\n  const slotContent = document.createTextNode(label);\n  element.appendChild(slotContent);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/textarea/textarea.js

@@ -38,9 +38,9 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'e5c17cac7a95922f09f368164922e4a1476cb1d0', class: `wrapper 
+        return (h(Host, { key: 'ec61a94701ba15cea4338a1039c63ebb080a31de', class: `wrapper 
 						wrapper--${this.error ? 'error' : ''}
-						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '924af5892e76fca1b3e68670c42b95d963972d1b', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'dc8be60590d330e62b0b9e56dcd3985095ac2039', class: 'wrapper__textarea' }, h("textarea", { key: 'a49734b30b44ae14d80a90448e807f12a1decb15', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '1b0a2afad717723ced888bbd13d5705ef5312922', class: 'wrapper__caption' }, this.caption.trim()))));
+						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '0ca84ca56869de241eb8993e210feff68d7e5cc4', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '6b27bb557b12d119425b024f964707d683c154bd', class: 'wrapper__textarea' }, h("textarea", { key: 'c3ce055457fddfad964b1c8da4bd574f30e182e2', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '5f774605c74e18f14908e181235be8489fdbe401', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -149,10 +149,10 @@ export class Tooltip {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '3566693f57f31b7e8d1b7cfc86210d416a2ff405', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'd8f66d71d9844579ba1a669d8b9d65e6b80285b9' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '6a20c5e5b3b6f36460891529c31b15cbb2a3f80d', class: tooltipDismissible }, h("button", { key: '26e5b3de6264c5d669b6dd2e67ac720e7ed523d6', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: 'dd2e518cc33a4fad6a6625ac8ad93510c0ac8a76', icon: "cross16" })), h("div", { key: '8dfda31b92a2a68e902d9294dfafa829e2ae125d', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '102cdcade59aa6087cef62a33cc40890cc712edc', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '433c704e55e38e676ced43af80cbedf66a08ecef', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'dfed0dd56d3164ba18799ab39198f380993f6248', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '915aec860f084f37befe14e1b29ced2dbe802ffe', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '0ab10da386219cfa266adfc8d01460a2f7861b70', class: tooltipCompact }, this.text, h("svg", { key: '1bfc2c79d905ef0c725f3a7b4ceb962280ad6ec1', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ce5383e429ceae096c397a177ee451a60ddaa20f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '7f2d598a355e5105659531a7d65868a572b0c8d3', class: tooltipExtended }, h("slot", { key: 'a7194c3e4b34f6a80e973d721be9e928dc6b543a', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '90c7c32649a095f7c7d5ca91dfb11565b6e4cefd', class: "tooltip-extended-content" }, this.header && h("div", { key: '2a685101980670bcda6dca798a1b4ff5dce2b0e9', class: "tooltip-extended-header" }, this.header), h("div", { key: '0e772b681e344b36852b40ad64a60c0fce70a026', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '4ba674399371b299380f00788d5df4c2fab7c511', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ad20591f248f3cd2132d33faaeb155043b53fb38', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: 'bef3eea14c8dde6e5320575791fb3af389260697', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'b6a0e680a8a6c2d302930b086c4488bf6f7ac169' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '67be6e1c5ec6a7f277b441648986d2ec07a6a651', class: tooltipDismissible }, h("button", { key: '053fbb51ae10f7ef007da38a5fc2c4df2a2d3846', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '8b78386336b48c89c9ca8afe972c215c2c064903', icon: "cross16" })), h("div", { key: '48db9d8098af06bb9e310a4fb23a952442d0ec6f', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'b6687c8155ef62a414090d52478e8da155778358', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '6f927579b33f3fd4ce6f5d4e493b9b037ff04678', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '467f192720b5396add3971ccbee8a1bc5c1cc0e6', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7d62ff6780d4c4daaffdf5dcd53433dc20f1c064', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'd3f8293e8ed481dc295d0c9f5dc98c218d999e3b', class: tooltipCompact }, this.text, h("svg", { key: '6276062b4337289d751911b6a71530e564b99bc0', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8fde6da76e2d4ca34743cb1274b4d7954434fd26', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: 'c5318be31b725bb4f5d5bcd35d8503668032dffa', class: tooltipExtended }, h("slot", { key: '7f092e8f400880cc2186320a45f4d58d7b7c96a3', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '016ca1ce8701db753e8716344ccfb1fed728ed89', class: "tooltip-extended-content" }, this.header && h("div", { key: '30f8a71e360924c8c65bc6197397ae05c4b729c2', class: "tooltip-extended-header" }, this.header), h("div", { key: '4694d5e98f009c678ca1e1b8df7449af4c59b7bf', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'f82ef84945cd3185d034e58e7e9e88e6e468a02d', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef2e943957ab5d5a5a1ed0e5443bb2b82feb0a1b', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     static get is() { return "ifx-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.stories.js

@@ -10,19 +10,63 @@ export default {
         icon: 'c-info-24',
     },
     argTypes: {
+        text: {
+            description: 'Defines the main content of the tooltip.',
+            control: 'text',
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         icon: {
+            description: 'The icon to be displayed. This control is only applicable when the variant is set to ***extended***.',
             options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            control: 'select',
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string',
+                    defaultValue: {
+                        summary: 'c-info-24'
+                    }
+                }
+            }
         },
         position: {
+            description: 'Determines the position of the tooltip relative to the reference element.',
             options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-tooltip props',
+                defaultValue: {
+                    summary: 'auto'
+                }
+            }
         },
         variant: {
+            description: 'Sets the style variant of the tooltip.',
+            control: 'radio',
             options: ['compact', 'dismissible', 'extended'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-tooltip props',
+                defaultValue: {
+                    summary: 'compact'
+                }
+            }
+        },
+        header: {
+            description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to ***dismissible*** or ***extended***.',
+            control: 'text',
+            if: { arg: 'variant', neq: 'compact' },
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
-        header: { control: 'text', if: { arg: 'variant', neq: 'compact' } },
     },
 };
 const DefaultTemplate = ({ header, text, variant, position, icon }) => {

package/dist/collection/components/tooltip/tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,MAAM,EAAE,kBAAkB;QAC1B,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,WAAW;KAClB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,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;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC;YACzG,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,CAAC;YAC/C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;KACpE;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACtD,IAAI,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC;QACxD,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IACD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/E,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEnC,OAAO,CAAC,WAAW,GAAG,8CAA8C,OAAO,KAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,wCAAwC;IAE9J,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Tooltip',\n  tags: ['autodocs'],\n  args: {\n    header: 'Tooltip headline',\n    text: \"Hi, I'm a tooltip\",\n    position: 'auto',\n    variant: 'compact',\n    icon: 'c-info-24',\n  },\n  argTypes: {\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    position: {\n      options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['compact', 'dismissible', 'extended'],\n      control: { type: 'radio' },\n    },\n    header: { control: 'text', if: { arg: 'variant', neq: 'compact' } },\n  },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon }) => {\n  const element = document.createElement('ifx-tooltip');\n  if (variant === 'dismissible' || variant === 'extended') {\n    element.setAttribute('header', header);\n  }\n  element.setAttribute('text', text);\n  element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n  element.setAttribute('position', position);\n  element.setAttribute('icon', icon);\n\n  element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Tooltip',\n  tags: ['autodocs'],\n  args: {\n    header: 'Tooltip headline',\n    text: \"Hi, I'm a tooltip\",\n    position: 'auto',\n    variant: 'compact',\n    icon: 'c-info-24',\n  },\n  argTypes: {\n    text: {\n      description: 'Defines the main content of the tooltip.',\n      control: 'text',\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    icon: {\n      description: 'The icon to be displayed. This control is only applicable when the variant is set to ***extended***.',\n      options: Object.values(icons).map(i => i['name']),\n      control: 'select',\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string',\n          defaultValue: {\n            summary: 'c-info-24'\n          }\n        }\n      }\n    },\n    position: {\n      description: 'Determines the position of the tooltip relative to the reference element.',\n      options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n      control: 'radio',\n      table: {\n        category: 'ifx-tooltip props',\n        defaultValue: {\n          summary: 'auto'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the tooltip.',\n      control: 'radio',\n      options: ['compact', 'dismissible', 'extended'],\n      table: {\n        category: 'ifx-tooltip props',\n        defaultValue: {\n          summary: 'compact'\n        }\n      }\n    },\n    header: {\n      description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to ***dismissible*** or ***extended***.',\n      control: 'text', \n      if: { arg: 'variant', neq: 'compact' },\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon }) => {\n  const element = document.createElement('ifx-tooltip');\n  if (variant === 'dismissible' || variant === 'extended') {\n    element.setAttribute('header', header);\n  }\n  element.setAttribute('text', text);\n  element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n  element.setAttribute('position', position);\n  element.setAttribute('icon', icon);\n\n  element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';"]}

package/dist/collection/stories/setup-and-installation/faq/faq.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Faq {
     render() {
-        return (h("div", { key: '940635ca96aed75993f653a115ca4e76e711e0c1', class: 'container' }, h("ifx-accordion", { key: '1560bc2603d0666ad6504b9f148e19c2934a730f' }, h("ifx-accordion-item", { key: '63e5b09b25ce51683cfd6aa59318f7fdd45205a4', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: 'a16615fa9a0d533decc568b476717b4550546065', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: 'fe1464594ab2e24acc7869320b51b6fed951f438', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '4a3cb74604b6d73210d2da4004f8bcd9a37df0b8', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '132a5a7b1b55ffc4213d0beddebf05cf58c8bcb1', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: 'aea8720ab9b0d47866dee6e45f527e360273cfa2', class: 'container' }, h("ifx-accordion", { key: 'f7d5143546a785e6eba8702faabf0ebf624fd5bb' }, h("ifx-accordion-item", { key: '337292fd5e56f4e3f73e820dbfd81ccbb8a92964', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: 'a513fdeb0045052441a0a1f66df3d1df3320bce7', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '535763f98ba76643b767809f42fde2874958a9aa', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'c4b233b7ae22a973f2f75dbfa1a027782abec3aa', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: 'cdf901bcb9311314450f56bb623007a9416d86a8', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
     static get is() { return "ifx-faq"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ifx-accordion-item.js

@@ -1,4 +1,4 @@
-import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-0a68c458.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-78f3e867.js';
 
 const IfxAccordionItem = IfxAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;