@infineon/infineon-design-system-stencil 30.9.2--canary.1669.a6556475a763cdebf0a29aa12ca37f78801b6799.1 → 30.9.2--canary.1640.73e4e19bf6e56fa149c04b7bbaec71574880c28a.0

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

@@ -10,43 +10,135 @@ export default {
         size: 'm',
         fullWidth: false,
         disabled: false,
+        icon: '',
         iconPosition: 'left',
         href: false,
         url: '',
         target: '_blank',
     },
     argTypes: {
+        label: {
+            name: 'Label of Button',
+            description: 'Sets the text displayed on the *<ifx-button>*.',
+            table: {
+                category: 'story controls',
+            }
+        },
         icon: {
+            description: 'The icon to be displayed.',
+            control: 'select',
             options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            table: {
+                category: 'ifx-button props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         variant: {
+            description: 'Sets the style variant of the button.',
+            control: 'radio',
             options: ['primary', 'secondary', 'tertiary'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'primary'
+                }
+            }
         },
         theme: {
+            description: 'Specifies the theme style of the button.',
+            control: 'radio',
             options: ['default', 'danger', 'inverse'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'default'
+                }
+            }
         },
         type: {
+            description: 'Sets the type attribute of the button.',
+            control: 'radio',
             options: ['button', 'submit', 'reset'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'button'
+                }
+            }
         },
         size: {
-            description: 'Size options: xs (32px) s (36px),  m (40px), l (48px) - default: m',
+            description: 'Sets the size of the button. Options: xs (32px) s (36px),  m (40px), l (48px)',
+            control: 'radio',
             options: ['xs', 's', 'm', 'l'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
         fullWidth: {
-            control: { type: 'boolean' },
+            description: 'When set to **true**, expands the button to take the full width of its container.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the button when set to true.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
         },
         iconPosition: {
+            description: 'Determines the position of an icon within the button if an icon is used.',
+            control: 'radio',
             options: ['left', 'right'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'left'
+                }
+            }
+        },
+        href: {
+            description: 'When set to **true**, treats the button as a link by setting a URL.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        },
+        url: {
+            description: 'Specifies the destination URL for the button when it acts as a link.',
+            table: {
+                category: 'ifx-button props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         target: {
+            description: 'Determines where to open the linked document when the button is clicked.',
+            control: 'radio',
             options: ['_blank', '_self', '_parent'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-button props',
+                defaultValue: {
+                    summary: '_blank'
+                }
+            }
         },
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,MAAM;QACpB,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,QAAQ;KACjB;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACzC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;YACtC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,qBAAqB,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,gBAAgB,IAAI,CAAC,SAAS;IAC5N,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;cAC3N,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Button',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Button',\n    variant: 'primary',\n    theme: 'default',\n    type: 'button',\n    size: 'm',\n    fullWidth: false,\n    disabled: false,\n    iconPosition: 'left',\n    href: false,\n    url: '',\n    target: '_blank',\n  },\n\n  argTypes: {\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    variant: {\n      options: ['primary', 'secondary', 'tertiary'],\n      control: { type: 'radio' },\n    },\n    theme: {\n      options: ['default', 'danger', 'inverse'],\n      control: { type: 'radio' },\n    },\n    type: {\n      options: ['button', 'submit', 'reset'],\n      control: { type: 'radio' },\n    },\n    size: {\n      description: 'Size options: xs (32px) s (36px),  m (40px), l (48px) - default: m',\n      options: ['xs', 's', 'm', 'l'],\n      control: { type: 'radio' },\n    },\n    fullWidth: {\n      control: { type: 'boolean' },\n    },\n    iconPosition: {\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n    },\n    target: {\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Button',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Button',\n    variant: 'primary',\n    theme: 'default',\n    type: 'button',\n    size: 'm',\n    fullWidth: false,\n    disabled: false,\n    icon: '',\n    iconPosition: 'left',\n    href: false,\n    url: '',\n    target: '_blank',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Button',\n      description: 'Sets the text displayed on the *<ifx-button>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    icon: {\n      description: 'The icon to be displayed.',\n      control: 'select',\n      options: Object.values(icons).map(i => i['name']),\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the button.',\n      control: 'radio',\n      options: ['primary', 'secondary', 'tertiary'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n    theme: {\n      description: 'Specifies the theme style of the button.',\n      control: 'radio',\n      options: ['default', 'danger', 'inverse'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'default'\n        }\n      }\n    },\n    type: {\n      description: 'Sets the type attribute of the button.',\n      control: 'radio',\n      options: ['button', 'submit', 'reset'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'button'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the button. Options: xs (32px) s (36px),  m (40px), l (48px)',\n      control: 'radio',\n      options: ['xs', 's', 'm', 'l'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    fullWidth: {\n      description: 'When set to **true**, expands the button to take the full width of its container.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the button when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    iconPosition: {\n      description: 'Determines the position of an icon within the button if an icon is used.',\n      control: 'radio',\n      options: ['left', 'right'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'left'\n        }\n      }\n    },\n    href: {\n      description: 'When set to **true**, treats the button as a link by setting a URL.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    url: {\n      description: 'Specifies the destination URL for the button when it acts as a link.',\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked document when the button is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -2,37 +2,117 @@ export default {
     title: 'Components/Card',
     tags: ['autodocs'],
     args: {
-        direction: 'vertical',
         overline: 'Overline',
         headline: 'Headline',
         description: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+        direction: 'vertical',
         button: 'button',
         href: '',
         target: '_blank',
         position: 'right',
         src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',
+        AriaLabel: 'Card',
     },
     argTypes: {
+        overline: {
+            name: 'Overline',
+            description: 'Sets the overline text of the card.',
+            type: { name: 'string' },
+            table: {
+                category: 'story controls',
+            },
+        },
+        headline: {
+            name: 'Headline',
+            description: 'Sets the headline text of the card.',
+            type: { name: 'string' },
+            table: {
+                category: 'story controls',
+            },
+        },
+        description: {
+            name: 'Description',
+            description: 'Sets the description text of the card.',
+            type: { name: 'string' },
+            table: {
+                category: 'story controls',
+            },
+        },
         button: {
+            name: 'Button',
             options: ['button', 'link', 'none'],
+            description: 'Sets the button type of the card.',
             control: { type: 'radio' },
+            table: {
+                category: 'story controls',
+            },
         },
         direction: {
+            description: 'Sets the direction of the card layout.',
+            table: {
+                category: 'ifx-card props',
+                defaultValue: {
+                    summary: 'vertical',
+                },
+                type: {
+                    summary: 'horizontal | vertical',
+                    disable: true,
+                },
+            },
             options: ['horizontal', 'vertical'],
             control: { type: 'radio' },
         },
+        AriaLabel: {
+            control: { type: 'text' },
+            description: 'Sets the aria-label attribute of the card. Enhances accessibility.',
+            table: {
+                category: 'ifx-card props',
+            },
+        },
         position: {
+            description: 'Sets the position of the image in the card.',
+            table: {
+                category: 'ifx-card-image props',
+            },
             options: ['left', 'right'],
             control: { type: 'radio' },
             if: { arg: 'direction', eq: 'horizontal' },
         },
+        href: {
+            description: 'Sets the hyperlink reference.',
+            type: { name: 'string' },
+            table: {
+                category: 'ifx-card props',
+            },
+        },
         target: {
+            description: 'Sets the target of the hyperlink reference',
+            table: {
+                category: 'ifx-card props',
+                defaultValue: {
+                    summary: '_self',
+                },
+            },
             options: ['_blank', '_self', '_parent'],
             control: { type: 'radio' },
         },
+        src: {
+            description: 'Sets the image source.',
+            type: { name: 'string' },
+            table: {
+                category: 'ifx-card-image props',
+            },
+        },
+        alt: {
+            description: 'Sets the alternative text for the image.',
+            type: { name: 'string' },
+            table: {
+                category: 'ifx-card-image props',
+            },
+        },
     },
 };
-const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
+const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}" aria-label="${args.AriaLabel}">
     <ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
     ${args.overline
     ? `<ifx-card-overline>
@@ -70,10 +150,11 @@ const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="$
   </ifx-card>`;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
+    alt: 'Coffee',
     src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',
 };
 const HorizontalTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
-    <ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
+    <ifx-card-image position="${args.position}" src="${args.src}" alt="${args.alt}" slot="img"></ifx-card-image>
     ${args.overline
     ? `<ifx-card-overline>
         ${args.overline}

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

@@ -1 +1 @@
-{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card',\n  tags: ['autodocs'],\n  args: {\n    direction: 'vertical',\n    overline: 'Overline',\n    headline: 'Headline',\n    description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n    button: 'button',\n    href: '',\n    target: '_blank',\n    position: 'right',\n    src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n  },\n\n  argTypes: {\n    button: {\n      options: ['button', 'link', 'none'],\n      control: { type: 'radio' },\n    },\n    direction: {\n      options: ['horizontal', 'vertical'],\n      control: { type: 'radio' },\n    },\n\n    position: {\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n      if: { arg: 'direction', eq: 'horizontal' },\n    },\n\n    target: {\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n    ${\n      args.overline\n        ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n        : ''\n    }\n      ${\n        args.headline\n          ? `<ifx-card-headline>\n        ${args.headline}\n        </ifx-card-headline>`\n          : ''\n      }\n     ${\n       args.description\n         ? `<ifx-card-text>\n        ${args.description}\n        </ifx-card-text>`\n         : ''\n     }\n      ${\n        args.button === 'button'\n          ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n          : ''\n      }\n      ${\n        args.button === 'link'\n          ? `<ifx-card-links slot=\"buttons\">\n            <ifx-link href=\"https://google.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n            <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n          </ifx-card-links>`\n          : ''\n      }\n  </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\n\nconst HorizontalTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n    ${\n      args.overline\n        ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n        : ''\n    }\n      ${\n        args.headline\n          ? `<ifx-card-headline>\n          ${args.headline}\n          </ifx-card-headline>`\n          : ''\n      }\n        ${\n          args.description\n            ? `<ifx-card-text>\n            ${args.description}\n            </ifx-card-text>`\n            : ''\n        }\n      ${\n        args.button === 'button'\n          ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n          : ''\n      }\n          ${\n            args.button === 'link'\n              ? `<ifx-card-links slot=\"buttons\">\n          <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n          <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n        </ifx-card-links>`\n              : ''\n          }\n  </ifx-card>`;\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.args = {\n  direction: 'horizontal',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\nHorizontal.argTypes = {\n  direction: {\n    table: {\n      disable: true,\n    },\n  },\n};\n"]}
+{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card',\n  tags: ['autodocs'],\n  args: {\n    overline: 'Overline',\n    headline: 'Headline',\n    description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n    direction: 'vertical',\n    button: 'button',\n    href: '',\n    target: '_blank',\n    position: 'right',\n    src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n    AriaLabel: 'Card',\n  },\n\n  argTypes: {\n    overline: {\n      name: 'Overline',\n      description: 'Sets the overline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    description: {\n      name: 'Description',\n      description: 'Sets the description text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    button: {\n      name: 'Button',\n      options: ['button', 'link', 'none'],\n      description: 'Sets the button type of the card.',\n      control: { type: 'radio' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    direction: {\n      description: 'Sets the direction of the card layout.',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: 'vertical',\n        },\n        type: {\n          summary: 'horizontal | vertical',\n          disable: true,\n        },\n      },\n      options: ['horizontal', 'vertical'],\n      control: { type: 'radio' },\n    },\n    AriaLabel: {\n      control: { type: 'text' },\n      description: 'Sets the aria-label attribute of the card. Enhances accessibility.',\n      table: {\n        category: 'ifx-card props',\n      },\n    },\n\n    position: {\n      description: 'Sets the position of the image in the card.',\n      table: {\n        category: 'ifx-card-image props',\n      },\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n      if: { arg: 'direction', eq: 'horizontal' },\n    },\n    href: {\n      description: 'Sets the hyperlink reference.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card props',\n      },\n    },\n    target: {\n      description: 'Sets the target of the hyperlink reference',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: '_self',\n        },\n      },\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n    src: {\n      description: 'Sets the image source.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n    alt: {\n      description: 'Sets the alternative text for the image.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\" aria-label=\"${args.AriaLabel}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n        ${args.headline}\n        </ifx-card-headline>`\n    : ''\n  }\n     ${args.description\n    ? `<ifx-card-text>\n        ${args.description}\n        </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n      ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n            <ifx-link href=\"https://google.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n            <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n          </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  alt: 'Coffee',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\n\nconst HorizontalTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n          ${args.headline}\n          </ifx-card-headline>`\n    : ''\n  }\n        ${args.description\n    ? `<ifx-card-text>\n            ${args.description}\n            </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n          ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n          <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n        </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.args = {\n  direction: 'horizontal',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\nHorizontal.argTypes = {\n  direction: {\n    table: {\n      disable: true,\n    },\n  },\n};\n"]}

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

@@ -3,41 +3,99 @@ export default {
     title: 'Components/Checkbox',
     tags: ['autodocs'],
     args: {
+        label: 'Text',
         error: false,
+        disabled: false,
         checked: false,
-        label: 'Text',
         size: 's',
         indeterminate: false,
-        name: 'checkbox',
-        value: 'checkbox',
+        name: 'checkbox'
     },
     argTypes: {
+        label: {
+            name: 'Label of Checkbox',
+            description: 'Set the label displayed next to *<ifx-checkbox>*.',
+            table: {
+                category: 'story controls',
+            }
+        },
+        error: {
+            description: 'Toggles the error state for the checkbox.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the checkbox when set to true.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
+        checked: {
+            description: 'Controls whether the checkbox is checked.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
+        indeterminate: {
+            description: 'Activates the indeterminate state for the checkbox when set to true.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: false,
+                }
+            }
+        },
         size: {
-            description: 'Size options: s (21px) and m (25px) - default: m',
+            description: 'Sets the size of the checkbox. Options: s (21px) and m (25px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: {
+                    summary: 's'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
+        },
+        name: {
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-checkbox props'
+            }
         },
         ifxChange: {
             action: 'ifxChange',
-            description: 'Custom event emitted when accordion-item is closed',
+            description: 'Custom event that is triggered when the checkbox is clicked.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
                 },
             },
         },
-        name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
-        },
-        value: {
-            description: 'The value that gets submitted, when the checkbox is seleted'
-        }
     },
 };
-const DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) => {
+const Template = ({ error, disabled, checked, indeterminate, size, label, name }) => {
     const checkbox = document.createElement('ifx-checkbox');
     checkbox.setAttribute('error', error);
+    checkbox.setAttribute('disabled', disabled);
     checkbox.setAttribute('checked', checked);
     checkbox.setAttribute('size', size);
     checkbox.setAttribute('indeterminate', indeterminate);
@@ -48,5 +106,5 @@ const DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) =
   `;
     return checkbox;
 };
-export const Default = DefaultTemplate.bind({});
+export const Default = Template.bind({});
 //# sourceMappingURL=checkbox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,GAAG;QACT,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,UAAU;KAClB;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,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,oDAAoD;YACjE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;SACxF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,6DAA6D;SAC3E;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC/E,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACtC,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACtD,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEpC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE5D,QAAQ,CAAC,SAAS,GAAG;MACjB,KAAK;GACR,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,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/Checkbox',\n  tags: ['autodocs'],\n  args: {\n    error: false,\n    checked: false,\n    label: 'Text',\n    size: 's',\n    indeterminate: false,\n    name: 'checkbox',\n    value: 'checkbox',\n  },\n\n  argTypes: {\n    size: {\n      description: 'Size options: s (21px) and m (25px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted when accordion-item is closed',\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    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    value: {\n      description: 'The value that gets submitted, when the checkbox is seleted'\n    }\n  },\n};\n\nconst DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) => {\n  const checkbox = document.createElement('ifx-checkbox');\n  checkbox.setAttribute('error', error);\n  checkbox.setAttribute('checked', checked);\n  checkbox.setAttribute('size', size);\n  checkbox.setAttribute('indeterminate', indeterminate);\n  checkbox.setAttribute('name', name);\n\n  checkbox.addEventListener('ifxChange', action('ifxChange'));\n\n  checkbox.innerHTML = `\n    ${label}\n  `;\n\n  return checkbox;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;QACT,aAAa,EAAE,KAAK;QACpB,IAAI,EAAE,UAAU;KACjB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,mBAAmB;YACzB,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,yCAAyC;YACtD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,sEAAsE;YACnF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,gEAAgE;YAC7E,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;gBAC9B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;YACvF,KAAK,EAAE;gBACL,QAAQ,EAAE,oBAAoB;aAC/B;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,8DAA8D;YAC3E,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,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACtC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC5C,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACtD,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEpC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE5D,QAAQ,CAAC,SAAS,GAAG;MACjB,KAAK;GACR,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Checkbox',\n  tags: ['autodocs'],\n  args: {\n    label: 'Text',\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    indeterminate: false,\n    name: 'checkbox'\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Checkbox',\n      description: 'Set the label displayed next to *<ifx-checkbox>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    error: {\n      description: 'Toggles the error state for the checkbox.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the checkbox when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    checked: {\n      description: 'Controls whether the checkbox is checked.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    indeterminate: {\n      description: 'Activates the indeterminate state for the checkbox when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: false,\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the checkbox. Options: s (21px) and m (25px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-checkbox props',\n        defaultValue: {\n          summary: 's'\n        },\n        type: {\n          summary: 's | m'\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-checkbox props'\n      }\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event that is triggered when the checkbox is clicked.',\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 = ({ error, disabled, checked, indeterminate, size, label, name }) => {\n  const checkbox = document.createElement('ifx-checkbox');\n  checkbox.setAttribute('error', error);\n  checkbox.setAttribute('disabled', disabled);\n  checkbox.setAttribute('checked', checked);\n  checkbox.setAttribute('size', size);\n  checkbox.setAttribute('indeterminate', indeterminate);\n  checkbox.setAttribute('name', name);\n\n  checkbox.addEventListener('ifxChange', action('ifxChange'));\n\n  checkbox.innerHTML = `\n    ${label}\n  `;\n\n  return checkbox;\n};\n\nexport const Default = Template.bind({});"]}

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

@@ -31,8 +31,8 @@ export class ChipItem {
     toggleItemSelection() {
         this.selected = !this.selected;
     }
-    emitIfxChipItemSelectEvent(emitIfxChipChange = true) {
-        this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,
+    emitIfxChipItemSelectEvent(emitIfxChange = true) {
+        this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,
             key: this.chipState.key,
             label: this.getItemLabel(),
             selected: this.selected,
@@ -56,9 +56,9 @@ export class ChipItem {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: '493fe2e521f96fbe65792b4364c32a3010a4ae86', class: `chip-item chip-item--${this.chipState.size} 
+        return (h("div", { key: 'a4d81329a7a5bbbc71b66b0f02f32302e3edd6bd', class: `chip-item chip-item--${this.chipState.size} 
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: '3f65da6457afbeca9e5e803f2569263b499fe839', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '02a710f81308419623960d15270f719c45f5fd11', class: 'chip-item__label' }, " ", h("slot", { key: 'ad971a10884b08cf3775f7296a44c7aff1769a0b' }), " "), h("div", { key: '2ba702249a7fc67ded010890181f5b35494df843', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '887b43ff1b8c6539b01c0fc620f51d9bc04a05d9', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
+            h("ifx-checkbox", { key: '26865e6c41a95e1a92a0bbcb444ffd99b06b6f6b', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '8a48897962af2131d6f574d602b71e035b2f46a6', class: 'chip-item__label' }, " ", h("slot", { key: '2945084fa15c686cc6456761f4ca67370d6418b3' }), " "), h("div", { key: '94e48f99ce3629f73d2a82530626474a50d0d9c1', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: 'e9aaef0ae55766df51d8d293bb4405703dcdead8', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
     }
     static get is() { return "ifx-chip-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip-item/chip-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}"]}
+{"version":3,"file":"chip-item.js","sourceRoot":"","sources":["../../../../src/components/chip/chip-item/chip-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}"]}