npm - @infineon/infineon-design-system-stencil - Versions diffs - 31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0 → 31.0.0--canary.1640.26c4c0764d79109b3335389182db63edca37148d.0 - Mend

@infineon/infineon-design-system-stencil 31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0 → 31.0.0--canary.1640.26c4c0764d79109b3335389182db63edca37148d.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (644) hide show

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -41,7 +41,7 @@ export class IfxTabs {
     componentWillLoad() {
         this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
         if (this.internalActiveTabIndex !== this.activeTabIndex) {
-            this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
+            this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
         }
         ;
         this.onSlotChange();
@@ -154,7 +154,7 @@ export class IfxTabs {
         return `tab-item ${this.fullWidth ? 'full-width' : ""} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__' + iconPosition}`;
     }
     handleClick(tab, index) {
-        this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
+        this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
         if (!tab.disabled)
             this.internalActiveTabIndex = index;
     }
@@ -187,15 +187,15 @@ export class IfxTabs {
             if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {
                 const previouslyActiveTabIndex = this.internalActiveTabIndex;
                 this.internalActiveTabIndex = this.internalFocusedTabIndex;
-                this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex });
+                this.ifxChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex });
             }
         }
     }
     render() {
         var _a;
-        return (h("div", { key: 'b94b74545720034560b78d35909a4757c9239c28', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '9689012ae62d5d22c7f9938bce7a5247d7fd1022', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '3a022d8b1299785fcfc8e23a0180debdaeebbc19', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '5d8d85681ad17528cfd5d51bed56df985e936bcd', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: '0365da7db703747de5996d5b48f1a59ba3ebc3e0', class: "active-border" })), h("div", { key: '53bdc3fbd557dec39cbdea5543ef7e56bf57a156', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: 'c0b1d541c10581ee7d097697d155b24a9c862178', class: "active-border" })), h("div", { key: '8b79fe69929791ffdc7ef4d765304a46ac09af08', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     static get is() { return "ifx-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -286,8 +286,8 @@ export class IfxTabs {
     }
     static get events() {
         return [{
-                "method": "ifxTabChange",
-                "name": "ifxTabChange",
+                "method": "ifxChange",
+                "name": "ifxChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\nexport class IfxTabs {\n @Element() el: HTMLElement;\n\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n @Prop() fullWidth: boolean = false;\n\n @State() internalOrientation: string;\n @State() internalActiveTabIndex: number = 0;\n @State() internalFocusedTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n\n @Event() ifxTabChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\n }\n\n setActiveAndFocusedTab(index: number) {\n if (index >= this.tabObjects.length) {\n index = this.tabObjects.length - 1;\n }\n if (index < 0) {\n index = 0;\n }\n if (!this.tabObjects[index]?.disabled) {\n this.internalActiveTabIndex = index;\n this.internalFocusedTabIndex = index;\n }\n }\n\n @Listen('tabHeaderChange')\n handleTabHeaderChange(e) { \n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n this.tabObjects[tabIndex].header = e.detail;\n this.tabObjects = [...this.tabObjects]; \n }\n \n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.setActiveAndFocusedTab(newValue);\n }\n }\n\n\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n if (this.internalActiveTabIndex !== this.activeTabIndex) {\n this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n };\n this.onSlotChange();\n this.setActiveAndFocusedTab(this.activeTabIndex);\n this.updateTabStyles();\n }\n\n updateTabStyles() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n });\n }\n\n\n // needed for smooth border transition\n reRenderBorder() {\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabObjects = Array.from(tabs).map((tab) => {\n return {\n header: tab?.header,\n disabled: tab?.disabled === true,\n icon: tab?.icon,\n iconPosition: tab?.iconPosition\n }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n });\n }\n\n setDefaultOrientation() {\n const validOrientations = ['horizontal', 'vertical'];\n const lowercaseOrientation = this.orientation.toLowerCase();\n\n if (!validOrientations.includes(lowercaseOrientation)) {\n this.internalOrientation = 'horizontal';\n } else this.internalOrientation = this.orientation;\n }\n\n componentDidLoad() {\n this.updateBorderAndFocus();\n // Add keyboard event listeners for each tab header\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.addEventListener('focus', this.onTabFocus(index));\n });\n\n }\n\n onTabFocus(index) {\n return () => {\n this.internalFocusedTabIndex = index;\n };\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.removeEventListener('focus', this.onTabFocus(index));\n });\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\n }\n\n private updateBorderAndFocus() {\n this.reRenderBorder()\n this.updateTabFocusability();\n }\n\n private updateTabFocusability() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n })\n }\n\n\n private focusNextTab() {\n let nextIndex = this.internalFocusedTabIndex + 1;\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n nextIndex++;\n }\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n this.internalFocusedTabIndex = nextIndex;\n this.tabHeaderRefs[nextIndex].focus();\n }\n }\n\n private focusPreviousTab() {\n let prevIndex = this.internalFocusedTabIndex - 1;\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n prevIndex--;\n }\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.internalFocusedTabIndex = prevIndex;\n this.tabHeaderRefs[prevIndex].focus();\n }\n }\n\n\n private getTabItemClass(index: number) {\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n const isDisabled = this.tabObjects[index].disabled;\n const iconPosition = this.tabObjects[index].iconPosition\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n }\n\n private handleClick(tab, index) {\n this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n if (!tab.disabled) this.internalActiveTabIndex = index;\n\n }\n\n\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\n\n if (ev.shiftKey) {\n // Shift + Tab\n if (this.internalFocusedTabIndex === 0) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusPreviousTab();\n }\n } else {\n // Tab\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusNextTab();\n }\n }\n } else if (ev.key === 'Enter') {\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previouslyActiveTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n }\n }\n }\n\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n <ul role=\"tablist\" class=\"tabs-list\">\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n > \n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabObjects).map((_, index) => (\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n}"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\nexport class IfxTabs {\n @Element() el: HTMLElement;\n\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n @Prop() fullWidth: boolean = false;\n\n @State() internalOrientation: string;\n @State() internalActiveTabIndex: number = 0;\n @State() internalFocusedTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n\n @Event() ifxChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\n }\n\n setActiveAndFocusedTab(index: number) {\n if (index >= this.tabObjects.length) {\n index = this.tabObjects.length - 1;\n }\n if (index < 0) {\n index = 0;\n }\n if (!this.tabObjects[index]?.disabled) {\n this.internalActiveTabIndex = index;\n this.internalFocusedTabIndex = index;\n }\n }\n\n @Listen('tabHeaderChange')\n handleTabHeaderChange(e) { \n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n this.tabObjects[tabIndex].header = e.detail;\n this.tabObjects = [...this.tabObjects]; \n }\n \n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.setActiveAndFocusedTab(newValue);\n }\n }\n\n\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n if (this.internalActiveTabIndex !== this.activeTabIndex) {\n this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n };\n this.onSlotChange();\n this.setActiveAndFocusedTab(this.activeTabIndex);\n this.updateTabStyles();\n }\n\n updateTabStyles() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n });\n }\n\n\n // needed for smooth border transition\n reRenderBorder() {\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabObjects = Array.from(tabs).map((tab) => {\n return {\n header: tab?.header,\n disabled: tab?.disabled === true,\n icon: tab?.icon,\n iconPosition: tab?.iconPosition\n }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n });\n }\n\n setDefaultOrientation() {\n const validOrientations = ['horizontal', 'vertical'];\n const lowercaseOrientation = this.orientation.toLowerCase();\n\n if (!validOrientations.includes(lowercaseOrientation)) {\n this.internalOrientation = 'horizontal';\n } else this.internalOrientation = this.orientation;\n }\n\n componentDidLoad() {\n this.updateBorderAndFocus();\n // Add keyboard event listeners for each tab header\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.addEventListener('focus', this.onTabFocus(index));\n });\n\n }\n\n onTabFocus(index) {\n return () => {\n this.internalFocusedTabIndex = index;\n };\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.removeEventListener('focus', this.onTabFocus(index));\n });\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\n }\n\n private updateBorderAndFocus() {\n this.reRenderBorder()\n this.updateTabFocusability();\n }\n\n private updateTabFocusability() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n })\n }\n\n\n private focusNextTab() {\n let nextIndex = this.internalFocusedTabIndex + 1;\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n nextIndex++;\n }\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n this.internalFocusedTabIndex = nextIndex;\n this.tabHeaderRefs[nextIndex].focus();\n }\n }\n\n private focusPreviousTab() {\n let prevIndex = this.internalFocusedTabIndex - 1;\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n prevIndex--;\n }\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.internalFocusedTabIndex = prevIndex;\n this.tabHeaderRefs[prevIndex].focus();\n }\n }\n\n\n private getTabItemClass(index: number) {\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n const isDisabled = this.tabObjects[index].disabled;\n const iconPosition = this.tabObjects[index].iconPosition\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n }\n\n private handleClick(tab, index) {\n this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n if (!tab.disabled) this.internalActiveTabIndex = index;\n\n }\n\n\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\n\n if (ev.shiftKey) {\n // Shift + Tab\n if (this.internalFocusedTabIndex === 0) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusPreviousTab();\n }\n } else {\n // Tab\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusNextTab();\n }\n }\n } else if (ev.key === 'Enter') {\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previouslyActiveTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n }\n }\n }\n\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n <ul role=\"tablist\" class=\"tabs-list\">\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n > \n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabObjects).map((_, index) => (\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n}"]}

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

@@ -1,41 +1,121 @@
 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,
+        fullWidth: 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'
+                }
+            }
         },
         fullWidth: {
-            name: 'Full width',
             control: { type: 'boolean' },
-            description: "Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent"
+            description: "Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent",
+            table: {
+                category: 'ifx-tabs props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
         },
         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)',
+        ifxChange: {
+            action: 'ifxChange',
+            description: 'Custom event that is emitted when the active tab changes.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxTabChange={handleChange}\nVue:@ifxTabChange="handleChange"\nAngular:(ifxTabChange)="handleChange()"\nVanillaJs:.addEventListener("ifxTabChange", (event) => {//handle change});',
+                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
                 },
             },
         },
@@ -46,17 +126,16 @@ const Template = args => {
     tabsElement.setAttribute('orientation', args.orientation);
     tabsElement.setAttribute('active-tab-index', args.activeTabIndex);
     tabsElement.setAttribute('full-width', args.fullWidth);
-    tabsElement.addEventListener('ifxTabChange', action(`ifxTabChange`));
+    tabsElement.addEventListener('ifxChange', action(`ifxChange`));
     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.
@@ -71,13 +150,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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;~~AAElD~~,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,SAAS,EAAE,UAAU;IACrB,~~QAAQ~~,EAAE;~~QACR~~,YAAY,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ,EAAE;~~QAC3D~~,~~WAAW~~,EAAE;~~YACX~~,IAAI,EAAE,~~aAAa~~;~~YACnB~~,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;YACnC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;~~SAC3B~~;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,~~WAAW~~;~~YACjB~~,OAAO,EAAE,~~EAAC~~,IAAI,EAAE,~~SAAS~~,~~EAAC~~;~~SAC3B~~;~~QACD~~,~~SAAS~~,EAAE;~~YACT~~,~~IAAI~~,EAAE,YAAY;~~YAClB~~,OAAO,EAAE,~~EAAC~~,IAAI,EAAE,SAAS,~~EAAC~~;~~YAC1B~~,WAAW,EAAE,sGAAsG;~~SACpH~~;~~QACD~~,YAAY,EAAE;~~YACZ~~,IAAI,EAAE,~~eAAe~~;~~YACrB~~,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,~~EAAC~~,IAAI,EAAE,OAAO,~~EAAC~~;~~YACxB~~,EAAE,EAAE,~~EAAC~~,~~GAAG~~,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,~~EAAC~~;~~SAC5B~~;QACD,~~cAAc~~,EAAE;~~YACd~~,IAAI,EAAE,~~kBAAkB~~;~~YACxB~~,WAAW,EAAE,~~sEAAsE~~;~~SACpF~~;~~QAED~~,YAAY,EAAE;~~YACZ~~,MAAM,EAAE,~~cAAc~~;~~YACtB~~,WAAW,EAAE,~~kHAAkH~~;~~YAC/H~~,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,~~6LAA6L~~;~~iBAChM~~;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAuB,CAAC;IAC7E,WAAW,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC1D,WAAW,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAClE,WAAW,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,gBAAgB,CAAC,~~cAAc~~,EAAE,MAAM,CAAC,~~cAAc~~,CAAC,CAAC,CAAC;~~IAErE~~,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,CAAC;QAC3C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QACrD,UAAU,CAAC,YAAY,CAAC,QAAQ,EAAE,~~OAAO~~,CAAC,~~GAAC~~,CAAC,EAAE,CAAC,CAAC;~~QAChD~~,~~IAAG~~,CAAC,IAAI,CAAC,EAAE,CAAC;~~YACV~~,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,~~MAAM~~,CAAC,CAAC;~~QAC9C~~,CAAC;QACD,~~IAAG~~,IAAI,CAAC,IAAI,~~EAAC~~,CAAC;~~YACZ~~,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,~~YAAY~~,CAAC,CAAC;~~YAC9C~~,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;~~QAC9D~~,~~CAAC;QACD,~~UAAU,CAAC,SAAS,GAAG;2BACA,CAAC,GAAG,CAAC;;;KAG3B,CAAC;QACF,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,CAAC;IACf,WAAW,EAAE,YAAY;IACzB,cAAc,EAAE,CAAC;IACjB,IAAI,EAAE,~~KAAK~~;~~IACX~~,YAAY,EAAE,MAAM;~~CACrB~~,~~CAAC;AAEF,~~MAAM,~~CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,~~EAAE,~~CAAC,CAAC~~;~~AAC1C~~,QAAQ,~~CAAC,IAAI,GAAG;IACd,YAAY,~~EAAE,~~CAAC~~;~~IACf~~,~~WAAW,EAAE,YAAY;IACzB,cAAc,EAAE,~~CAAC~~;CAClB,CAAC~~","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 ~~fullWidth~~: {\n ~~name~~: '~~Full~~ ~~width~~',\n control: {type: 'boolean'},\n description: \"Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent\"\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.setAttribute('full-width', args.fullWidth);\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~~"]}
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';\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 fullWidth: 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 fullWidth: {\n control: { type: 'boolean' },\n description: \"Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent\",\n table: {\n category: 'ifx-tabs props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\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 ifxChange: {\n action: 'ifxChange',\n description: 'Custom event that is emitted when the active tab changes.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (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.setAttribute('full-width', args.fullWidth);\n tabsElement.addEventListener('ifxChange', action(`ifxChange`));\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 CHANGED Viewed

@@ -7,9 +7,27 @@ export default {
         icon: 'chevron-up-16',
     },
     argTypes: {
+        label: {
+            name: 'Label of Tag',
+            control: { type: 'text' },
+            description: 'Set the label of *<ifx-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 CHANGED Viewed

	@@ -1 +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"]}
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,KAAK,EAAE;YACL,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,+BAA+B;YAC5C,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 of Tag',\n control: { type: 'text' },\n description: 'Set the label of <ifx-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.stories.js CHANGED Viewed

@@ -4,43 +4,145 @@ 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: '',
+        value: '',
     },
     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: { 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'
+                }
+            }
+        },
+        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
+                }
+            }
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            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
+                }
+            }
         },
         maxlength: {
-            description: 'Maximum input length',
-            control: { type: 'number' }
+            description: 'Specifies the maximum number of characters that can be entered into the text field.',
+            control: 'number',
+            table: {
+                category: 'ifx-text-field props',
+            }
         },
-        showDeleteIcon: {
-            description: 'Show the delete icon'
+        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'
+                }
+            }
         },
         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});',
@@ -49,7 +151,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon }) => {
+const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value }) => {
     const element = document.createElement('ifx-text-field');
     element.setAttribute('error', error);
     element.setAttribute('disabled', disabled);
@@ -62,6 +164,7 @@ 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 CHANGED Viewed

	@@ -1 +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"]}
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"]}

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

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