@infineon/infineon-design-system-stencil 31.0.0--canary.1640.26c4c0764d79109b3335389182db63edca37148d.0 → 31.0.0--canary.1697.223df0ff1431a5398fd1261ed013c9dd2a89e7a0.0

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

@@ -4,145 +4,43 @@ 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,
-        maxlength: '',
-        value: '',
+        showDeleteIcon: false
     },
     argTypes: {
-        label: {
-            name: 'Label of Text Field',
-            description: 'The text label displayed above the *<ifx-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: 'radio',
-            table: {
-                category: 'ifx-text-field props',
-                defaultValue: {
-                    summary: 'm'
-                }
-            }
+            control: { type: 'radio' },
         },
         icon: {
-            description: 'Specifies an icon to display within the text field.',
             options: Object.values(icons).map(i => i['name']),
-            control: 'select',
-            table: {
-                category: 'ifx-text-field props',
-                defaultValue: {
-                    summary: 'c-info-16'
-                }
-            }
-        },
-        success: {
-            description: 'Indicates a successful state for the text field.',
-            table: {
-                category: 'ifx-text-field props',
-                defaultValue: {
-                    summary: false
-                }
-            }
-        },
-        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
-                }
-            }
+            control: { type: 'select' },
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.',
-            table: {
-                category: 'ifx-text-field props',
-            }
-        },
-        showDeleteIcon: {
-            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
-                }
-            }
+            description: 'Name of the element, that is used as reference when a form is submitted.'
         },
         maxlength: {
-            description: 'Specifies the maximum number of characters that can be entered into the text field.',
-            control: 'number',
-            table: {
-                category: 'ifx-text-field props',
-            }
+            description: 'Maximum input length',
+            control: { type: 'number' }
         },
-        value: {
-            description: 'The value of the text field. It is used for the form submission.',
-            control: 'text',
-            table: {
-                category: 'ifx-text-field props',
-                type: {
-                    summary: 'string'
-                }
-            }
+        showDeleteIcon: {
+            description: 'Show the delete icon'
         },
         ifxInput: {
             action: 'ifxInput',
-            description: 'Custom event emitted on input change.',
+            description: 'Custom event',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
@@ -151,7 +49,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value }) => {
+const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon }) => {
     const element = document.createElement('ifx-text-field');
     element.setAttribute('error', error);
     element.setAttribute('disabled', disabled);
@@ -164,7 +62,6 @@ const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, c
     element.setAttribute('optional', optional);
     element.setAttribute('name', name);
     element.setAttribute('show-delete-icon', showDeleteIcon);
-    element.setAttribute('value', value);
     if (maxlength)
         element.setAttribute('maxlength', maxlength);
     element.addEventListener('ifxInput', action('ifxInput'));

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":"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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    value: '',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Text Field',\n      description: 'The text label displayed above the *<ifx-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    value: {\n      description: 'The value of the text field. It is used for the form submission.',\n      control: 'text',\n      table: {\n        category: 'ifx-text-field props',\n        type: {\n          summary: 'string'\n        }\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, value }) => {\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  element.setAttribute('value', value);\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    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"]}

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

@@ -30,9 +30,9 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'd557bff378899253b1eea26f202a3d934424deac', class: `wrapper 
+        return (h(Host, { key: 'c70752e015f3ddc9e5e482a6fd173e23435a2f41', class: `wrapper 
 						wrapper--${this.error ? 'error' : ''}
-						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '9163e001e0423effcbc9bad56af021acb8fc5229', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'ce7ea7607837c9979a984627fb9d762494a211b8', class: 'wrapper__textarea' }, h("textarea", { key: '6587f63b3d5ef32db9bf4c25ba03246d31a1120e', "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: '96f109dfc94c8563ce9b3aacfae00eef4b6a49b2', class: 'wrapper__caption' }, this.caption.trim()))));
+						wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '4b3765e6c32598376b55c316dfc9c34157c72fe0', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'e0e66b29ef2185d87f5b757cc5af1b7fb7d77261', class: 'wrapper__textarea' }, h("textarea", { key: '82d15056d4adf7d435e3e1c284ca7e3d77f0ad0e', "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: '21296971b22cb11ed30f5acb106db45a5e4a814c', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -129,7 +129,9 @@ export default {
             },
         },
         ifxInput: {
-            description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.`,
+            description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.\n
+	event.detail: string
+			`,
             table: {
                 category: 'custom events',
                 type: {

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n\ttitle: 'Components/Textarea',\n\ttags: ['autodocs'],\n\targs: {\n\t\tcaption: 'Caption text, description, error notification',\n\t\tcols: 43,\n\t\tdisabled: false,\n\t\terror: false,\n\t\tlabel: 'Label Text',\n\t\tmaxlength: undefined,\n\t\tname: 'textarea',\n\t\tplaceholder: 'Placeholder',\n\t\treadOnly: false,\n\t\tresize: 'both',\n\t\trows: 5,\n\t\tvalue: '',\n\t\twrap: 'soft'\n\t},\n\targTypes: {\n\t\tcaption: {\n\t\t\tdescription: 'Set the caption text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tcols: {\n\t\t\tdescription: 'Set the visible width of the textarea control.',\n\t\t\tcontrol: { type: 'number', min: 0 },\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: 'Disables the user interaction when set to true.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\tdescription: 'Set the component to error state.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: 'Set the label of textarea component.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tmaxlength: {\n\t\t\tdescription: 'Set the maximum string length user can enter.',\n\t\t\ttype: 'number',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\tname: {\n\t\t\tdescription: 'The name of the control. Useful for form handling.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'ifx-textarea-[n]',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: 'Set the placeholder text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\treadOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \n*Note: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.*`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tresize: {\n\t\t\tdescription: 'Sets whether the textarea is resizable, and if so, in which directions.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['both', 'vertical', 'horizontal', 'none'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\trows: {\n\t\t\tdescription: 'Set the number of visible text lines for the textrarea control.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: 'Current value of the textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\twrap: {\n\t\t\tdescription: 'Indicates how the control should wrap the value for form submission.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['soft', 'hard', 'off'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'soft',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tifxInput: {\n\t\t\tdescription: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'custom events',\n\t\t\t\ttype: {\n\t\t\t\t\tsummary: 'Framework integration',\n\t\t\t\t\tdetail: `\nReact: onIfxInput={handleInput}\nVue: @ifxInput=\"handleInput\"\nAngular: (ifxInput)=\"handleInput()\"\nVanillaJs: .addEventListener(\"ifxInput\", (event) => {/*handle input*/});`,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n\nconst Template = (args) => {\n\tconst wrapper = document.createElement('div');\n\twrapper.innerHTML = `\n<ifx-textarea \n\tcaption=\"${args.caption}\"\n\tcols=\"${args.cols}\"\n\tdisabled=\"${args.disabled}\"\n\terror=\"${args.error}\"\n\tlabel=\"${args.label}\"\n\tmaxlength=\"${args.maxlength}\"\n\tname=\"${args.name}\"\n\tplaceholder=\"${args.placeholder}\"\n\tread-only=\"${args.readOnly}\"\n\tresize=\"${args.resize}\"\n\trows=\"${args.rows}\"\n\tvalue=\"${args.value}\"\n\twrap=\"${args.wrap}\"\n/>\n`;\n\tconst textarea = wrapper.querySelector('ifx-textarea');\n\ttextarea.addEventListener('ifxInput', action('ifxInput'));\n\n\treturn textarea;\n};\n\nexport const Default = Template.bind({});"]}
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n\ttitle: 'Components/Textarea',\n\ttags: ['autodocs'],\n\targs: {\n\t\tcaption:'Caption text, description, error notification',\n\t\tcols: 43,\n\t\tdisabled: false,\n\t\terror: false,\n\t\tlabel: 'Label Text',\n\t\tmaxlength: undefined,\n\t\tname: 'textarea',\n\t\tplaceholder: 'Placeholder',\n\t\treadOnly: false,\n\t\tresize: 'both',\n\t\trows: 5,\n\t\tvalue: '',\n\t\twrap: 'soft'\n\t},\n\targTypes: {\n\t\tcaption: {\n\t\t\tdescription: 'Set the caption text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tcols: {\n\t\t\tdescription: 'Set the visible width of the textarea control.',\n\t\t\tcontrol: { type: 'number', min: 0 },\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: 'Disables the user interaction when set to true.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\tdescription: 'Set the component to error state.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: 'Set the label of textarea component.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tmaxlength: {\n\t\t\tdescription: 'Set the maximum string length user can enter.',\n\t\t\ttype: 'number',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\tname: {\n\t\t\tdescription: 'The name of the control. Useful for form handling.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'ifx-textarea-[n]',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: 'Set the placeholder text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\treadOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \n*Note: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.*`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tresize: {\n\t\t\tdescription: 'Sets whether the textarea is resizable, and if so, in which directions.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['both', 'vertical', 'horizontal', 'none'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\trows: {\n\t\t\tdescription: 'Set the number of visible text lines for the textrarea control.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: 'Current value of the textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\twrap: {\n\t\t\tdescription: 'Indicates how the control should wrap the value for form submission.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['soft', 'hard', 'off'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'soft',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tifxInput: {\n\t\t\tdescription: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.\\n\n\tevent.detail: string\n\t\t\t`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'custom events',\n\t\t\t\ttype: {\n\t\t\t\t\tsummary: 'Framework integration',\n\t\t\t\t\tdetail: `\nReact: onIfxInput={handleInput}\nVue: @ifxInput=\"handleInput\"\nAngular: (ifxInput)=\"handleInput()\"\nVanillaJs: .addEventListener(\"ifxInput\", (event) => {/*handle input*/});`,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n\nconst Template = (args) => {\n\tconst wrapper = document.createElement('div');\n\twrapper.innerHTML = `\n<ifx-textarea \n\tcaption=\"${args.caption}\"\n\tcols=\"${args.cols}\"\n\tdisabled=\"${args.disabled}\"\n\terror=\"${args.error}\"\n\tlabel=\"${args.label}\"\n\tmaxlength=\"${args.maxlength}\"\n\tname=\"${args.name}\"\n\tplaceholder=\"${args.placeholder}\"\n\tread-only=\"${args.readOnly}\"\n\tresize=\"${args.resize}\"\n\trows=\"${args.rows}\"\n\tvalue=\"${args.value}\"\n\twrap=\"${args.wrap}\"\n/>\n`;\n\tconst textarea = wrapper.querySelector('ifx-textarea');\n\ttextarea.addEventListener('ifxInput', action('ifxInput'));\n\n\treturn textarea;\n};\n\nexport const Default = Template.bind({});"]}

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

@@ -148,10 +148,10 @@ export class Tooltip {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '246f0b291e39bbe49ebea1eed9827400f22bb680', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'a16771de825d12d46661be2ecb61ce8326e25794' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '974e0fdbf389fcce6cc34eccb897b188f0413eea', class: tooltipDismissible }, h("button", { key: 'a777e5a63134c07f4330d790044a7aafdb63a83c', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '69cc351f97d892f98cf8bc3df48d2877129e4238', icon: "cross16" })), h("div", { key: '5db6f0ceff12be22d6de58767bab509b67dd9ff8', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '22fd94a588780e413dc04dcc126380b5b382fde6', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'abd4158d18a1c57dda508caddcdb1be945a8efd2', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '1bcd11086f4922c03532c99b2dd1618b862af68b', 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: '5dfac1fa79d7204b1f0770ed243cdbadfc14fdd9', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: 'a52aec447163df16d86d14f96d74501c45266e2a', class: tooltipCompact }, this.text, h("svg", { key: 'c28c49ee4446d73b366bb68280ddf5b9192cc79a', 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: '2de515ea4344c728a1da4b368c93c7ade11badcb', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '9e3186e4856770c831d0422bce64b131c64f55f0', class: tooltipExtended }, h("slot", { key: '089640249dbfcf8eed4525615d6e289955304e09', 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: 'eab4f9af96d154a289bec83673db47d3580c267d', class: "tooltip-extended-content" }, this.header && h("div", { key: '810497a167351bef22a9e61050264032be295455', class: "tooltip-extended-header" }, this.header), h("div", { key: '802dbe5e093b9d69b9155e188d35a421b2ca0c2e', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'ff19a79905e5ea4af628364a254e03e022a08a3d', 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: '557540e1fd91ad15580011ddf37a4cd25a8a6ae3', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: 'a3e94d257de47ee109910623728c2ec10c701f76', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '2340b9ae6bb7466f82fa38c19e80e65182d437d9' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'd8e9985a0c3ee94b7acaee7ba202b6952f3c4eed', class: tooltipDismissible }, h("button", { key: 'eeace3daf76321639c1d68fb4fd5a69db27f7a7b', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '1026280d20c6a5c0773324183fadbc48ae9239db', icon: "cross16" })), h("div", { key: '986894f35601527bf123437751c84030e98eb2fe', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'ba7119a72e546b453644d844782f7ec3afe7fe62', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '5e37e44fe509229dc0bc0d671251e949768409f6', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '4f400210024fde9a324d24ba65bbcbb73af86e87', 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: '3d3a715cc208e3dfe58f311e209fd516ae890c61', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: '1a38865c9a119aa9b6b8d143746cb5d12ce86df6', class: tooltipCompact }, this.text, h("svg", { key: '67c94e68b883178e6c2fd29b7dbcba4af763d118', 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: '55cfd16d85d1166dbe05191c5f5add91db676e5b', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '5cd9004e80bd01e438e9757b9e4ee67b852981e6', class: tooltipExtended }, h("slot", { key: '8eb4828515afe31d978d68fb469c5b6d96d94fc1', 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: '174077b59caa0f1a58ec8bc2892a2453a2314fa5', class: "tooltip-extended-content" }, this.header && h("div", { key: 'c83634d2f261972dc9b721828e2a97417b19a6fb', class: "tooltip-extended-header" }, this.header), h("div", { key: '66aa44d89bd608c2322e6984cfe165167ccaad0e', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '402ad198485da5a0d0f72f8e2836a85909c7f354', 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: 'efcc0439d745aac61e6a4834dacd9f21627d230f', 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,63 +10,19 @@ 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: 'select',
-            table: {
-                category: 'ifx-tooltip props',
-                type: {
-                    summary: 'string',
-                    defaultValue: {
-                        summary: 'c-info-24'
-                    }
-                }
-            }
+            control: { type: 'select' },
         },
         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: 'radio',
-            table: {
-                category: 'ifx-tooltip props',
-                defaultValue: {
-                    summary: 'auto'
-                }
-            }
+            control: { type: 'radio' },
         },
         variant: {
-            description: 'Sets the style variant of the tooltip.',
-            control: 'radio',
             options: ['compact', 'dismissible', 'extended'],
-            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'
-                }
-            }
+            control: { type: 'radio' },
         },
+        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":"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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"]}
+{"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"]}

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: '81dac064edfea12005954ca731cbbe00b8d69698', class: 'container' }, h("ifx-accordion", { key: 'f0a52cd1a0c95d038e036c3643504033b15cb342' }, h("ifx-accordion-item", { key: 'e1ed7801a5e7c5d83c8e0ee934dfdfea1925dc4d', 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: '792c48fae24d106277a76554f5d66f5aaa0bb384', 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: '4ed509e6535edf0408f9ed9163d66e979c653370', 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: 'a358a22ca675e01d5e402fe8a4268b27ccb471c5', 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: '88a06feeb2a093b38797667aec93adf4d82502d5', 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: '5e21d2a8efa4c445f14d2c05aeb1193b81f989d4', class: 'container' }, h("ifx-accordion", { key: '202328fd274a10fc357fc3e374752c40913d97f5' }, h("ifx-accordion-item", { key: 'b675f3b0175e028bd9ede06a8a3fee09c109ae67', 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: '4e6f206911903cd393cb9ecbf59b838f73a7f7fb', 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: 'f37fc2774efbf63fe67bebdc6c670e07bbb3106a', 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: '9e887ac9d6d47d0dac511d929cfc58367a9756a2', 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: '53ed6fbc867d17773765d46481a4f3e41c04802c', 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-a51cb7b6.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-ff48962a.js';
 
 const IfxAccordionItem = IfxAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-accordion.js

@@ -1,4 +1,4 @@
-import { A as Accordion, d as defineCustomElement$1 } from './p-120f0d27.js';
+import { A as Accordion, d as defineCustomElement$1 } from './p-654ff7d8.js';
 
 const IfxAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-basic-table.js

@@ -179,7 +179,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         return {};
     }
     render() {
-        return (h(Host, { key: 'ff940c90b4fd4396cafd1cbfd13476e9225df362' }, h("div", { key: '2da95f49bbcd224297c91168c2c29f6178fa6b2b', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'fb5cf41dd677de23d4fb5a7e897b7e1dcd8444f1', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'aad9914fcf873da2a71ed7bbfa7db2be5dec54a5' }, h("div", { key: 'bc436824ba11ec68a0dca3fc0381993dc66ff593', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '9c290e9797c50dae868ab333ad613035715e1518', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return this; }
     static get style() { return IfxBasicTableStyle0; }

package/dist/components/ifx-breadcrumb-item-label.js

@@ -18,13 +18,13 @@ const BreadcrumbItemLabel = /*@__PURE__*/ proxyCustomElement(class BreadcrumbIte
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (h("a", { key: '856f06f931087b841e5f0350f1eb03e83b70e598', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: 'b67ee6634bea1f1626e073c1cf4238d12e0e8902', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '270394a637cc6dd822d74d47dcc0bce51e9455c5', class: "label-wrapper" }, h("slot", { key: 'a2c15ce4581d3323d52fe931706ed86f3a777e08' })), h("span", { key: 'f013021b230b0a83a9fc1133d395f91c74cec4c4', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: 'b22c149f7cb47f43054ba7e7a2ca669a94f2d8bc', icon: "chevron-down-12" }))));
+        return (h("a", { key: '16ddbc6dfce781d06c5e852423d1646426c6fb04', href: this.url, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: '6d62e4f854b7ea735c46a3849a92c09a8d222e54', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '452dc64f08a93f4872f0f033b0b7016073818aab', class: "label-wrapper" }, h("slot", { key: '0a522ff8d13c3133367e62b50480af2dc970961d' })), h("span", { key: '7f5d3a5305ad187e312ae20a59610c9cfe4b13cf', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: '07dc7f9912e3d87f286273e5758490f39df31d0d', icon: "chevron-down-12" }))));
     }
     get el() { return this; }
     static get style() { return IfxBreadcrumbItemLabelStyle0; }
 }, [1, "ifx-breadcrumb-item-label", {
         "icon": [1],
-        "href": [1],
+        "url": [1],
         "target": [1]
     }]);
 function defineCustomElement$1() {

package/dist/components/ifx-breadcrumb-item-label.js.map

@@ -1 +1 @@
-{"file":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;IALhC;;;;;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;KACjD;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzD,6DAAM,KAAK,EAAC,eAAe,IACzB,8DAAQ,CACH,EACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;IALhC;;;;;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;KACjD;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IACzF,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzD,6DAAM,KAAK,EAAC,eAAe,IACzB,8DAAQ,CACH,EACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() url: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ifx-breadcrumb.js

@@ -27,15 +27,15 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends H {
                     const breadcrumbItem = node;
                     const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');
                     const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');
-                    if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {
-                        throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');
+                    if (breadcrumbItemLabel.hasAttribute('url') && breadcrumbDropdown) {
+                        throw new Error('ifx-breadcrumb-item cannot have both a url and a dropdown menu.');
                     }
                 }
             }
         }
     }
     render() {
-        return (h("nav", { key: '3d01af951d4a6a396545eb9cf26454cbe2b31ed0', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '95ae08a0de7099ecd7c3aa963c1bf9952918ecda', class: "breadcrumb" }, h("slot", { key: 'e9fed255fa08b28c8974498d329df69b1e92edf5' }))));
+        return (h("nav", { key: '82aec60bebf9a71d7cdcfc2916f91c0e36dee868', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '70bae75b26b5df4c509f16c0ab8e2b10333de8ac', class: "breadcrumb" }, h("slot", { key: '1cb28e3640f20319349b4f6d3cb1568508d3b1ba' }))));
     }
     get el() { return this; }
     static get style() { return IfxBreadcrumbStyle0; }

package/dist/components/ifx-breadcrumb.js.map

@@ -1 +1 @@
-{"file":"ifx-breadcrumb.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-breadcrumb.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE;wBACjE,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;qBACpF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('url') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a url and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-6a284649.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-e57d6c00.js';
 
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip.js

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-6a2ff8f4.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-0fce434b.js';
 
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-faq.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
-import { d as defineCustomElement$4 } from './p-120f0d27.js';
-import { d as defineCustomElement$3 } from './p-a51cb7b6.js';
+import { d as defineCustomElement$4 } from './p-654ff7d8.js';
+import { d as defineCustomElement$3 } from './p-ff48962a.js';
 import { d as defineCustomElement$2 } from './p-828bbb25.js';
 
 const faqCss = ".container{padding-top:10px}";
@@ -13,7 +13,7 @@ const Faq = /*@__PURE__*/ proxyCustomElement(class Faq extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '81dac064edfea12005954ca731cbbe00b8d69698', class: 'container' }, h("ifx-accordion", { key: 'f0a52cd1a0c95d038e036c3643504033b15cb342' }, h("ifx-accordion-item", { key: 'e1ed7801a5e7c5d83c8e0ee934dfdfea1925dc4d', 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: '792c48fae24d106277a76554f5d66f5aaa0bb384', 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: '4ed509e6535edf0408f9ed9163d66e979c653370', 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: 'a358a22ca675e01d5e402fe8a4268b27ccb471c5', 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: '88a06feeb2a093b38797667aec93adf4d82502d5', 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: '5e21d2a8efa4c445f14d2c05aeb1193b81f989d4', class: 'container' }, h("ifx-accordion", { key: '202328fd274a10fc357fc3e374752c40913d97f5' }, h("ifx-accordion-item", { key: 'b675f3b0175e028bd9ede06a8a3fee09c109ae67', 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: '4e6f206911903cd393cb9ecbf59b838f73a7f7fb', 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: 'f37fc2774efbf63fe67bebdc6c670e07bbb3106a', 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: '9e887ac9d6d47d0dac511d929cfc58367a9756a2', 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: '53ed6fbc867d17773765d46481a4f3e41c04802c', 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 style() { return IfxFaqStyle0; }
 }, [1, "ifx-faq"]);

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
 import { d as defineCustomElement$3 } from './p-828bbb25.js';
-import { d as defineCustomElement$2 } from './p-8554cfb9.js';
+import { d as defineCustomElement$2 } from './p-ec9d64bf.js';
 
 // utils.ts
 function getInitiallySelectedItems(el) {
@@ -53,8 +53,8 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (h("div", { key: '4aeae13a1f2811af139413ae351ab70cfbb8ecaf', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'e17ac3e8bc1dce7555e3824b2cb66228c333e6ae', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '2ac732ab1951cc921078be5757d01325d1794fd6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '3d5d4ae28ad2cba68d3d8a2096bda53242ac69f1', class: "text" }, h("span", { key: '669dc7417d9303199c3cb68ff7a4a0ef4dd8fdab' }, this.filterGroupName), h("ifx-number-indicator", { key: 'b154ed9d7824f62bd1fc18fcb524739de66c3260' }, this.count)), h("ifx-icon", { key: '1c02692efa10b0c4f3af56ce921599a4dc4c5ba0', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'be1893204c1771593d25e4ed24cfe7e5876012c8', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '7c6e4e04a0e0050b3934184002348432dfe92245', class: "filter-accordion-container" }, h("slot", { key: '1ff8e788b37c48a82a65667d24ddecbb8675bcda', name: "list" }))));
+        return (h("div", { key: 'a516541ef3dc49acfe900213815c8d17c5ff0f7b', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '2502af32b8322a440282f18a95508777bd70602b', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '661853e99db03cace8f273d8e447effd06f31baa', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '9f2c658782ed1ca845f85a361ea5fced99bb41da', class: "text" }, h("span", { key: 'a2bc905dbcb739acab31b39c85360414a8dcaed8' }, this.filterGroupName), h("ifx-number-indicator", { key: 'c64226f2ff8d651f8febf99a99a65f3e8e1fae68' }, this.count)), h("ifx-icon", { key: 'c00346c7bf984b49d28af20363803ba7f081ac17', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '480dbf4cb9844bfa8660844451ced3c1d798c39c', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: '48de4905ba421e86c4e13a72287edf0b1281a149', class: "filter-accordion-container" }, h("slot", { key: '15fc58422854c0e1403fd2d85be09008dc6be4a3', name: "list" }))));
     }
     get el() { return this; }
     static get style() { return IfxFilterAccordionStyle0; }