@infineon/infineon-design-system-stencil 30.9.2--canary.1669.a6556475a763cdebf0a29aa12ca37f78801b6799.1 → 30.9.2--canary.1640.64bdc8df6d06e0c7326a4bfb6bcc6798b101e99a.1

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

@@ -17,7 +17,8 @@ export default {
         variant: 'single',
         readOnly: false,
         selected: false,
-        value: 'Item Value'
+        value: 'Item Value',
+        AriaLabel: 'Chip'
     },
     argTypes: {
         amountOfChipItems: {
@@ -36,9 +37,6 @@ export default {
             description: 'Set the label of *<ifx-chip-item>*.',
             table: {
                 category: 'story controls',
-                type: {
-                    summary: '<ifx-chip-item> `label` </ifx-chip-item>'
-                }
             }
         },
         placeholder: {
@@ -86,6 +84,13 @@ export default {
                 }
             }
         },
+        AriaLabel: {
+            control: { type: 'text' },
+            description: 'Set the aria label of the chip item. Enhances accessibility.',
+            table: {
+                category: 'ifx-chip props'
+            }
+        },
         selected: {
             description: 'Set the *selected* prop to pre-select the chip item.',
             table: {
@@ -101,32 +106,18 @@ export default {
                 category: 'ifx-chip-item props',
             }
         },
-        ifxChipChange: {
-            action: 'ifxChipChange',
-            description: `A custom event emitted when the selection in a *<ifx-chip>* is updated.\n
-      event.detail: 
-      {
-        currentSelection: Array<Option>,
-        previousSelection: Array<Option>
-      }
-
-      Option:
-      {
-        key: number,
-        label: string,
-        selected: boolean,
-        value: string
-      }
-      `,
+        ifxChange: {
+            action: 'ifxChange',
+            description: 'A custom event emitted when the selection in a *<ifx-chip>* is updated.',
             table: {
                 category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: `
-React: onIfxChipChange={handleChange}
-Vue: @ifxChipChange="handleChange"
-Angular: (ifxChipChange)="handleChange()"
-VanillaJs: .addEventListener("ifxChipChange", (event) => {/*handle change*/});`,
+React: onIfxChange={handleChange}
+Vue: @ifxChange="handleChange"
+Angular: (ifxChange)="handleChange()"
+VanillaJs: .addEventListener("ifxChange", (event) => {/*handle change*/});`,
                 }
             }
         }
@@ -140,6 +131,7 @@ placeholder="${args.placeholder}"
 size="${args.size}"
 variant="${args.variant}"
 read-only="${args.readOnly}"
+AriaLabel="${args.AriaLabel}"
 >
   ${(() => {
         return Array.from({ length: args.amountOfChipItems }, (_, chipItemId) => {
@@ -159,7 +151,7 @@ read-only="${args.readOnly}"
     })()}
 </ifx-chip>`;
     const chip = wrapper.querySelector('ifx-chip');
-    chip.addEventListener('ifxChipChange', action('ifxChipChange'));
+    chip.addEventListener('ifxChange', action('ifxChange'));
     return chip;
 };
 export const Default = Template.bind({});

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

@@ -1 +1 @@
-{"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Chip',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      story: {\n        height: '100px',\n      },\n    },\n  },\n  args: {\n    amountOfChipItems: 4,\n    chipItemLabel: 'Item Label',\n    placeholder: 'Label',\n    size: 'large',\n    variant: 'single',\n    readOnly: false,\n    selected: false,\n    value: 'Item Value'\n  },\n  argTypes: {\n    amountOfChipItems: {\n      name: 'Amount of Chip Items',\n      control: 'number',\n      description: 'Control the number of *<ifx-chip-item>* in a Chip.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: null\n        }\n      }\n    },\n    chipItemLabel: {\n      name: 'Label of Chip Item',\n      description: 'Set the label of *<ifx-chip-item>*.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: '<ifx-chip-item> `label` </ifx-chip-item>'\n        }\n      }\n    },\n    placeholder: {\n      description: 'Set the placeholder string.',\n      table: {\n        category: 'ifx-chip props'\n      }\n    },\n    size: {\n      description: 'Switch the size of Chip.',\n      control: 'radio',\n      options: ['large', 'small'],\n      table: {\n        category: 'ifx-chip props',\n        defaultValue: {\n          summary: 'large'\n        },\n        type: {\n          summary: 'large | small'\n        }\n      }\n    },\n    variant: {\n      description: 'Switch the variant of Chip.',\n      control: 'radio',\n      options: ['single', 'multi'],\n      table: {\n        category: 'ifx-chip props',\n        defaultValue: {\n          summary: 'single'\n        },\n        type: {\n          summary: 'single | multi'\n        }\n      }\n    },\n    readOnly: {\n      name: 'read-only',\n      description: 'No dropdown menu. The chip component is read-only.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-chip props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    selected: {\n      description: 'Set the *selected* prop to pre-select the chip item.',\n      table: {\n        category: 'ifx-chip-item props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    value: {\n      description: 'Set the value of chip item.',\n      table: {\n        category: 'ifx-chip-item props',\n      }\n    },\n    ifxChipChange: {\n      action: 'ifxChipChange',\n      description: `A custom event emitted when the selection in a *<ifx-chip>* is updated.\\n\n      event.detail: \n      {\n        currentSelection: Array<Option>,\n        previousSelection: Array<Option>\n      }\n\n      Option:\n      {\n        key: number,\n        label: string,\n        selected: boolean,\n        value: string\n      }\n      `,\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\nReact: onIfxChipChange={handleChange}\nVue: @ifxChipChange=\"handleChange\"\nAngular: (ifxChipChange)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxChipChange\", (event) => {/*handle change*/});`,\n        }\n      }\n    }\n  }\n};\n\nconst Template = (args) => {\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `\n<ifx-chip\nplaceholder=\"${args.placeholder}\"\nsize=\"${args.size}\"\nvariant=\"${args.variant}\"\nread-only=\"${args.readOnly}\"\n>\n  ${\n    (() => {\n      return Array.from({ length: args.amountOfChipItems }, (_, chipItemId) => {\n        const chipItem: HTMLIfxChipItemElement = document.createElement('ifx-chip-item');\n        chipItem.innerHTML = args.chipItemLabel + ' ' + (chipItemId + 1);\n        chipItem.setAttribute('value', args.value + ' ' + (chipItemId + 1));\n        if (args.readOnly) {\n          if (args.variant === 'multi') {\n            chipItem.setAttribute('selected', 'true');\n          } else if (chipItemId === 0) {\n            chipItem.setAttribute('selected', 'true');\n          }\n        }\n        return chipItem.outerHTML;\n      }).join(`\\n    `);\n    })()\n  }\n</ifx-chip>`;\n\n  const chip = wrapper.querySelector('ifx-chip');\n  chip.addEventListener('ifxChipChange', action('ifxChipChange'));\n\n  return chip;\n};\n\nexport const Default = Template.bind({});\nDefault.tags = ['!dev', '!autodocs'];\n\nexport const Single = Template.bind({});\nSingle.args = {\n  variant: 'single'\n};\nSingle.argTypes = {\n  variant: {\n    table: {\n      disable: true\n    }\n  }\n};\n\nexport const Multi = Template.bind({});\nMulti.args = {\n  variant: 'multi'\n};\nMulti.argTypes = {\n  variant: {\n    table: {\n      disable: true\n    }\n  }\n};\n\nexport const ReadOnly = Template.bind({});\nReadOnly.args = {\n  readOnly: true,\n  variant: 'multi'\n};\nReadOnly.argTypes = {\n  readOnly: {\n    table: {\n      disable: true\n    }\n  }\n};\n"]}
+{"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Chip',\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      story: {\n        height: '100px',\n      },\n    },\n  },\n  args: {\n    amountOfChipItems: 4,\n    chipItemLabel: 'Item Label',\n    placeholder: 'Label',\n    size: 'large',\n    variant: 'single',\n    readOnly: false,\n    selected: false,\n    value: 'Item Value',\n    AriaLabel: 'Chip'\n  },\n  argTypes: {\n    amountOfChipItems: {\n      name: 'Amount of Chip Items',\n      control: 'number',\n      description: 'Control the number of *<ifx-chip-item>* in a Chip.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: null\n        }\n      }\n    },\n    chipItemLabel: {\n      name: 'Label of Chip Item',\n      description: 'Set the label of *<ifx-chip-item>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    placeholder: {\n      description: 'Set the placeholder string.',\n      table: {\n        category: 'ifx-chip props'\n      }\n    },\n    size: {\n      description: 'Switch the size of Chip.',\n      control: 'radio',\n      options: ['large', 'small'],\n      table: {\n        category: 'ifx-chip props',\n        defaultValue: {\n          summary: 'large'\n        },\n        type: {\n          summary: 'large | small'\n        }\n      }\n    },\n    variant: {\n      description: 'Switch the variant of Chip.',\n      control: 'radio',\n      options: ['single', 'multi'],\n      table: {\n        category: 'ifx-chip props',\n        defaultValue: {\n          summary: 'single'\n        },\n        type: {\n          summary: 'single | multi'\n        }\n      }\n    },\n    readOnly: {\n      name: 'read-only',\n      description: 'No dropdown menu. The chip component is read-only.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-chip props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    AriaLabel: {\n      control: { type: 'text' },\n      description: 'Set the aria label of the chip item. Enhances accessibility.',\n      table: {\n        category: 'ifx-chip props'\n      }\n    },\n    selected: {\n      description: 'Set the *selected* prop to pre-select the chip item.',\n      table: {\n        category: 'ifx-chip-item props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    value: {\n      description: 'Set the value of chip item.',\n      table: {\n        category: 'ifx-chip-item props',\n      }\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'A custom event emitted when the selection in a *<ifx-chip>* is updated.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\nReact: 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 wrapper = document.createElement('div');\n  wrapper.innerHTML = `\n<ifx-chip\nplaceholder=\"${args.placeholder}\"\nsize=\"${args.size}\"\nvariant=\"${args.variant}\"\nread-only=\"${args.readOnly}\"\nAriaLabel=\"${args.AriaLabel}\"\n>\n  ${(() => {\n      return Array.from({ length: args.amountOfChipItems }, (_, chipItemId) => {\n        const chipItem: HTMLIfxChipItemElement = document.createElement('ifx-chip-item');\n        chipItem.innerHTML = args.chipItemLabel + ' ' + (chipItemId + 1);\n        chipItem.setAttribute('value', args.value + ' ' + (chipItemId + 1));\n        if (args.readOnly) {\n          if (args.variant === 'multi') {\n            chipItem.setAttribute('selected', 'true');\n          } else if (chipItemId === 0) {\n            chipItem.setAttribute('selected', 'true');\n          }\n        }\n        return chipItem.outerHTML;\n      }).join(`\\n    `);\n    })()\n    }\n</ifx-chip>`;\n\n  const chip = wrapper.querySelector('ifx-chip');\n  chip.addEventListener('ifxChange', action('ifxChange'));\n\n  return chip;\n};\n\nexport const Default = Template.bind({});\nDefault.tags = ['!dev', '!autodocs'];\n\nexport const Single = Template.bind({});\nSingle.args = {\n  variant: 'single'\n};\nSingle.argTypes = {\n  variant: {\n    table: {\n      disable: true\n    }\n  }\n};\n\nexport const Multi = Template.bind({});\nMulti.args = {\n  variant: 'multi'\n};\nMulti.argTypes = {\n  variant: {\n    table: {\n      disable: true\n    }\n  }\n};\n\nexport const ReadOnly = Template.bind({});\nReadOnly.args = {\n  readOnly: true,\n  variant: 'multi'\n};\nReadOnly.argTypes = {\n  readOnly: {\n    table: {\n      disable: true\n    }\n  }\n};\n"]}

package/dist/collection/components/chip/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/chip/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface ChipState {\n    emitIfxChipItemSelect: boolean;\n    size: 'small' | 'large';\n    variant: 'single' | 'multi';\n    key?: number;\n}\nexport interface ChipItemSelectEvent {\n    key: number;\n    emitIfxChipChange: boolean,\n    label: string;\n    selected: boolean;\n    value: string;\n}\n  "]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/chip/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface ChipState {\n    emitIfxChipItemSelect: boolean;\n    size: 'small' | 'large';\n    variant: 'single' | 'multi';\n    key?: number;\n}\nexport interface ChipItemSelectEvent {\n    key: number;\n    emitIfxChange: boolean,\n    label: string;\n    selected: boolean;\n    value: string;\n}\n  "]}

package/dist/collection/components/content-switcher/content-switcher.stories.js

@@ -1,18 +1,77 @@
 import { action } from "@storybook/addon-actions";
+import { icons } from "@infineon/infineon-icons";
 export default {
     title: 'Components/Content Switcher',
     tags: ['autodocs'],
     args: {
         amountOfItems: 4,
+        label: 'Item',
+        value: 'item',
+        selected: false,
+        icon: 'applications-16'
     },
     argTypes: {
         amountOfItems: {
+            name: 'Amount of Items',
             control: { type: 'number' },
+            description: 'Set the number of content-switcher-items to be rendered.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'number'
+                }
+            }
+        },
+        label: {
+            name: 'Label of Content Switcher Item',
+            control: { type: 'text' },
+            description: 'Set the label of the *<ifx-content-switcher-item>*.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        value: {
+            control: { type: 'text' },
+            description: 'Set the value of the content-switcher-item.',
+            table: {
+                category: 'content-switcher-item props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        selected: {
+            control: { type: 'boolean' },
+            description: 'Set the selected state of the content-switcher-item. Only one item can be selected at the time. If there initially exists more than one selected item, then only the first item will be selected.',
+            table: {
+                category: 'content-switcher-item props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        },
+        icon: {
+            description: 'The icon of the content-switcher-item.',
+            options: Object.values(icons).map(i => i['name']),
+            control: { type: 'select' },
+            table: {
+                category: 'ifx-icon props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         ifxChange: {
             action: 'ifxChange',
             description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
@@ -21,14 +80,17 @@ export default {
         }
     },
 };
-const DefaultTemplate = ({ amountOfItems }) => {
+const DefaultTemplate = ({ amountOfItems, label, value, icon, selected }) => {
     const element = document.createElement('ifx-content-switcher');
     for (let i = 0; i < amountOfItems; i++) {
         const item = document.createElement('ifx-content-switcher-item');
-        item.setAttribute('value', `item-${i + 1}`);
+        item.setAttribute('value', `${value} ${i + 1}`);
         item.innerHTML = `
-      <ifx-icon icon="applications-16"></ifx-icon>Item ${i + 1}
+      <ifx-icon icon="${icon}"></ifx-icon> ${label} ${i + 1}
     `;
+        if (i === 1 && selected) {
+            item.setAttribute('selected', 'true');
+        }
         element.appendChild(item);
     }
     element.addEventListener('ifxChange', action('ifxChange'));

package/dist/collection/components/content-switcher/content-switcher.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-switcher.stories.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,aAAa,EAAE,CAAC;KAEjB;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,0IAA0I;YACvJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE;IAC5C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAE/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QACjE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,SAAS,GAAG;yDACoC,CAAC,GAAG,CAAC;KACzD,CAAC;QAEF,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Content Switcher',\n  tags: ['autodocs'],\n\n  args: {\n    amountOfItems: 4,\n\n  },\n  argTypes: {\n    amountOfItems: {\n      control: { type: 'number' },\n    },    \n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.', \n      table: {\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 DefaultTemplate = ({ amountOfItems }) => {\n  const element = document.createElement('ifx-content-switcher');\n\n  for (let i = 0; i < amountOfItems; i++) {\n    const item = document.createElement('ifx-content-switcher-item');\n    item.setAttribute('value', `item-${i + 1}`);\n    item.innerHTML = `\n      <ifx-icon icon=\"applications-16\"></ifx-icon>Item ${i + 1}\n    `;\n\n    element.appendChild(item);\n  }\n\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}
+{"version":3,"file":"content-switcher.stories.js","sourceRoot":"","sources":["../../../src/components/content-switcher/content-switcher.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,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,aAAa,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,iBAAiB;KAExB;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0DAA0D;YACvE,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,gCAAgC;YACtC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,qDAAqD;YAClE,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,QAAQ,EAAE,6BAA6B;gBACvC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,WAAW,EAAE,mMAAmM;YAChN,KAAK,EAAE;gBACL,QAAQ,EAAE,6BAA6B;gBACvC,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,wCAAwC;YACrD,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,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,0IAA0I;YACvJ,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1E,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAE/D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;QACjE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG;wBACG,IAAI,iBAAiB,KAAK,IAAI,CAAC,GAAG,CAAC;KACtD,CAAC;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,QAAQ,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QACxC,CAAC;QAED,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IACD,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,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/Content Switcher',\n  tags: ['autodocs'],\n\n  args: {\n    amountOfItems: 4,\n    label: 'Item',\n    value: 'item',\n    selected: false,\n    icon: 'applications-16'\n\n  },\n  argTypes: {\n    amountOfItems: {\n      name: 'Amount of Items',\n      control: { type: 'number' },\n      description: 'Set the number of content-switcher-items to be rendered.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'number'\n        }\n      }\n    },\n    label: {\n      name: 'Label of Content Switcher Item',\n      control: { type: 'text' },\n      description: 'Set the label of the *<ifx-content-switcher-item>*.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    value: {\n      control: { type: 'text' },\n      description: 'Set the value of the content-switcher-item.',\n      table: {\n        category: 'content-switcher-item props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    selected: {\n      control: { type: 'boolean' },\n      description: 'Set the selected state of the content-switcher-item. Only one item can be selected at the time. If there initially exists more than one selected item, then only the first item will be selected.',\n      table: {\n        category: 'content-switcher-item props',\n        defaultValue: {\n          summary: 'false'\n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    },\n    icon: {\n      description: 'The icon of the content-switcher-item.',\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-icon props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted when a different content-switcher-item gets selected. Contains the value of the previous and the new selected item.',\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 DefaultTemplate = ({ amountOfItems, label, value, icon, selected }) => {\n  const element = document.createElement('ifx-content-switcher');\n\n  for (let i = 0; i < amountOfItems; i++) {\n    const item = document.createElement('ifx-content-switcher-item');\n    item.setAttribute('value', `${value} ${i + 1}`);\n    item.innerHTML = `\n      <ifx-icon icon=\"${icon}\"></ifx-icon> ${label} ${i + 1}\n    `;\n    if (i === 1 && selected) {\n      item.setAttribute('selected', 'true');\n    }\n\n    element.appendChild(item);\n  }\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}

package/dist/collection/components/date-picker/date-picker.stories.js

@@ -12,24 +12,110 @@ export default {
         max: '',
         min: '',
         label: "Label Text",
-        caption: "Caption text, description, error notification",
+        caption: "Caption text, description, error notification.",
+        AriaLabel: 'Date Picker',
+        required: false,
     },
     argTypes: {
+        label: {
+            description: 'Label of Date Picker.',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        caption: {
+            description: 'Caption text, description, error notification.',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        min: {
+            description: 'Minimum date that can be selected',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        max: {
+            description: 'The latest date that can be selected.',
+            table: {
+                category: 'ifx-date-picker props',
+            }
+        },
+        disabled: {
+            description: 'Disables the date picker',
+            control: 'boolean',
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        success: {
+            description: 'Indicates success in the date picker.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        error: {
+            description: 'Indicates error in the date picker.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
         size: {
-            description: 'Size options: Height small  (36px) and Height large (40px) - default: small',
+            description: 'Sets the size of the date picker. Options: Height small  (36px) and Height large (40px)',
+            control: 'radio',
             options: ['s', 'l'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: 's'
+                }
+            }
         },
         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-date-picker props'
+            }
         },
         value: {
-            description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd'
+            description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd',
+            table: {
+                category: 'ifx-date-picker props'
+            }
+        },
+        AriaLabel: {
+            control: { type: 'text' },
+            description: 'Set the aria label of the date picker. Enhances accessibility.',
+            table: {
+                category: 'ifx-date-picker props'
+            }
+        },
+        required: {
+            description: 'Set the required attribute to true to make the date picker mandatory.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-date-picker props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         ifxDate: {
             action: 'ifxDate',
-            description: 'Custom event',
+            description: 'A custom event emitted when a date in the calendar is being selected.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxDate={handleInput}\nVue:@ifxDate="handleInput"\nAngular:(ifxDate)="handleInput()"\nVanillaJs:.addEventListener("ifxDate", (event) => {//handle input});',
@@ -38,7 +124,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label }) => {
+const DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label, AriaLabel, required }) => {
     const element = document.createElement('ifx-date-picker');
     element.setAttribute('error', error);
     element.setAttribute('disabled', disabled);
@@ -49,6 +135,8 @@ const DefaultTemplate = ({ error, disabled, success, size, value, max, min, capt
     element.setAttribute('min', min);
     element.setAttribute('label', label);
     element.setAttribute('caption', caption);
+    element.setAttribute('AreaLabel', AriaLabel);
+    element.setAttribute('required', required);
     element.addEventListener('ifxDate', action('ifxDate'));
     return element;
 };

package/dist/collection/components/date-picker/date-picker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,+CAA+C;KACzD;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,6EAA6E;YAC1F,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;SACxF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,4HAA4H;SAC1I;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,cAAc;YAC3B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,qKAAqK;iBACxK;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,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,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IACvD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Date Picker',\n  tags: ['autodocs'],\n\n  args: {\n    disabled: false,\n    size: 's',\n    success: false,\n    error: false,\n    name: 'date-picker',\n    value: '',\n    max: '',\n    min: '',\n    label: \"Label Text\",\n    caption: \"Caption text, description, error notification\",\n  },\n  argTypes: {\n    size: {\n      description: 'Size options: Height small  (36px) and Height large (40px) - default: small',\n      options: ['s', 'l'],\n      control: { type: 'radio' },\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    value: { \n      description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd'\n    },\n    ifxDate: {\n      action: 'ifxDate',\n      description: 'Custom event',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxDate={handleInput}\\nVue:@ifxDate=\"handleInput\"\\nAngular:(ifxDate)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxDate\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label }) => {\n  const element = document.createElement('ifx-date-picker');\n  element.setAttribute('error', error);\n  element.setAttribute('disabled', disabled);\n  element.setAttribute('size', size);\n  element.setAttribute('success', success);\n  element.setAttribute('value', value);\n  element.setAttribute('max', max);\n  element.setAttribute('min', min);\n  element.setAttribute('label', label);\n  element.setAttribute('caption', caption);\n  element.addEventListener('ifxDate', action('ifxDate'));\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}
+{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Date Picker',\n  tags: ['autodocs'],\n\n  args: {\n    disabled: false,\n    size: 's',\n    success: false,\n    error: false,\n    name: 'date-picker',\n    value: '',\n    max: '',\n    min: '',\n    label: \"Label Text\",\n    caption: \"Caption text, description, error notification.\",\n    AriaLabel: 'Date Picker',\n    required: false,\n  },\n  argTypes: {\n    label: {\n      description: 'Label of Date Picker.',\n      table: {\n        category: 'ifx-date-picker props',\n      }\n    },\n    caption: {\n      description: 'Caption text, description, error notification.',\n      table: {\n        category: 'ifx-date-picker props',\n      }\n    },\n    min: {\n      description: 'Minimum date that can be selected',\n      table: {\n        category: 'ifx-date-picker props',\n      }\n    },\n    max: {\n      description: 'The latest date that can be selected.',\n      table: {\n        category: 'ifx-date-picker props',\n      }\n    },\n    disabled: {\n      description: 'Disables the date picker',\n      control: 'boolean',\n      table: {\n        category: 'ifx-date-picker props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    success: {\n      description: 'Indicates success in the date picker.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-date-picker props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    error: {\n      description: 'Indicates error in the date picker.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-date-picker props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the date picker. Options: Height small  (36px) and Height large (40px)',\n      control: 'radio',\n      options: ['s', 'l'],\n      table: {\n        category: 'ifx-date-picker props',\n        defaultValue: {\n          summary: 's'\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-date-picker props'\n      }\n    },\n    value: {\n      description: 'Displayed date is formatted based on the locale of the user`s browser, but the parsed value is always formatted yyyy-mm-dd',\n      table: {\n        category: 'ifx-date-picker props'\n      }\n    },\n    AriaLabel: {\n      control: { type: 'text' },\n      description: 'Set the aria label of the date picker. Enhances accessibility.',\n      table: {\n        category: 'ifx-date-picker props'\n      }\n    },\n    required: {\n      description: 'Set the required attribute to true to make the date picker mandatory.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-date-picker props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    ifxDate: {\n      action: 'ifxDate',\n      description: 'A custom event emitted when a date in the calendar is being selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxDate={handleInput}\\nVue:@ifxDate=\"handleInput\"\\nAngular:(ifxDate)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxDate\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, value, max, min, caption, label, AriaLabel, required }) => {\n  const element = document.createElement('ifx-date-picker');\n  element.setAttribute('error', error);\n  element.setAttribute('disabled', disabled);\n  element.setAttribute('size', size);\n  element.setAttribute('success', success);\n  element.setAttribute('value', value);\n  element.setAttribute('max', max);\n  element.setAttribute('min', min);\n  element.setAttribute('label', label);\n  element.setAttribute('caption', caption);\n  element.setAttribute('AreaLabel', AriaLabel);\n  element.setAttribute('required', required);\n  element.addEventListener('ifxDate', action('ifxDate'));\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}