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

package/dist/collection/components/icon/infineonIconStencil.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"infineonIconStencil.stories.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,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;aAC3B;SACF;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,cAAc;YACtB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yLAAyL;iBAC5L;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IACjE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nimport { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Icon',\n  tags: ['autodocs'],\n\n  args: {\n    icon: 'c-check-16',\n  },\n  argTypes: {\n    icon: {\n      description: 'Set the icon.',\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-icon props',\n      }\n    },\n    consoleError: {\n      action: 'consoleError',\n      description: 'Custom event emitted when icon is invalid.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onConsoleError={handleError}\\nVue:@consoleError=\"handleError\"\\nAngular:(consoleError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"consoleError\", (event) => {//handle error});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ icon }) => {\n  const ifxIcon = document.createElement('ifx-icon');\n  ifxIcon.setAttribute('icon', icon);\n  ifxIcon.addEventListener('consoleError', action('consoleError'));\n  return ifxIcon;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"infineonIconStencil.stories.js","sourceRoot":"","sources":["../../../src/components/icon/infineonIconStencil.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,cAAc;YACtB,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6LAA6L;iBAChM;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IACjE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nimport { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Icon',\n  tags: ['autodocs'],\n\n  args: {\n    icon: 'c-check-16',\n  },\n  argTypes: {\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    consoleError: {\n      action: 'consoleError',\n      description: 'Custom event emitted when icon is invalid',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onConsoleError={handleChange}\\nVue:@consoleError=\"handleChange\"\\nAngular:(consoleError)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"consoleError\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ icon }) => {\n  const ifxIcon = document.createElement('ifx-icon');\n  ifxIcon.setAttribute('icon', icon);\n  ifxIcon.addEventListener('consoleError', action('consoleError'));\n  return ifxIcon;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -13,81 +13,25 @@ export default {
     },
     argTypes: {
         icon: {
-            description: 'The icon to be displayed.',
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
-            table: {
-                category: 'ifx-icon-button props',
-                defaultValue: {
-                    summary: 'c-info-24'
-                }
-            }
         },
         variant: {
-            description: 'Sets the style variant of the icon button.',
-            control: 'radio',
             options: ['primary', 'secondary', 'tertiary'],
-            table: {
-                category: 'ifx-icon-button props',
-                defaultValue: {
-                    summary: 'primary'
-                }
-            }
-        },
-        disabled: {
-            description: 'Disables the icon button when set to true.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-icon-button props',
-                defaultValue: {
-                    summary: 'false'
-                }
-            }
-        },
-        href: {
-            description: 'Specifies the URL to which the icon button will link.',
-            table: {
-                category: 'ifx-icon-button props',
-                type: {
-                    summary: 'string'
-                }
-            }
+            control: { type: 'radio' },
         },
         size: {
-            description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).',
-            control: 'radio',
+            description: 'Size options: s (24px), m (40px) and l (48px) - default: m',
             options: ['s', 'm', 'l'],
-            table: {
-                category: 'ifx-icon-button props',
-                defaultValue: {
-                    summary: 'm'
-                },
-                type: {
-                    summary: 's | m | l'
-                }
-            }
+            control: { type: 'radio' },
         },
         target: {
-            description: 'Determines where to open the linked URL when the button is clicked.',
-            control: 'radio',
             options: ['_blank', '_self', '_parent'],
-            table: {
-                category: 'ifx-icon-button props',
-                defaultValue: {
-                    summary: '_blank'
-                }
-            }
+            control: { type: 'radio' },
         },
         shape: {
-            description: 'Defines the shape of the icon button.',
-            control: 'radio',
             options: ['round', 'square'],
-            table: {
-                category: 'ifx-icon-button props',
-                defaultValue: {
-                    summary: 'round'
-                }
-            }
+            control: { type: 'radio' },
         },
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,2BAA2B;YACxC,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,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,6EAA6E;YAC1F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACxB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,qEAAqE;YAClF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;YAC5B,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAEtB,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/Icon Button',\n  tags: ['autodocs'],\n\n  args: {\n    variant: 'primary',\n    size: 'm',\n    disabled: false,\n    icon: 'c-info-24',\n    href: '',\n    target: '_blank',\n    shape: 'round',\n  },\n\n  argTypes: {\n    icon: {\n      description: 'The icon to be displayed.',\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'c-info-24'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the icon button.',\n      control: 'radio',\n      options: ['primary', 'secondary', 'tertiary'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the icon button when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    href: {\n      description: 'Specifies the URL to which the icon button will link.',\n      table: {\n        category: 'ifx-icon-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).',\n      control: 'radio',\n      options: ['s', 'm', 'l'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m | l'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked URL when the button is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n    shape: {\n      description: 'Defines the shape of the icon button.',\n      control: 'radio',\n      options: ['round', 'square'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'round'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\"  size=\"${args.size}\" disabled=\"${args.disabled}\">\n  </ifx-icon-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;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;QAED,IAAI,EAAE;YACJ,WAAW,EAAE,4DAA4D;YACzE,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACxB,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;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAEtB,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/Icon Button',\n  tags: ['autodocs'],\n\n  args: {\n    variant: 'primary',\n    size: 'm',\n    disabled: false,\n    icon: 'c-info-24',\n    href: '',\n    target: '_blank',\n    shape: 'round',\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\n    size: {\n      description: 'Size options: s (24px), m (40px) and l (48px) - default: m',\n      options: ['s', 'm', 'l'],\n      control: { type: 'radio' },\n    },\n    target: {\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n    shape: {\n      options: ['round', 'square'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\"  size=\"${args.size}\" disabled=\"${args.disabled}\">\n  </ifx-icon-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/icons-preview/icons-preview.css

@@ -4,6 +4,10 @@
   gap: 10px;
 }
 
+.alert__wrapper {
+  margin-bottom: 40px;
+}
+
 .html-wrapper {
   background: rgb(38, 38, 38);
   padding: 20px;

package/dist/collection/components/icons-preview/icons-preview.js

@@ -28,7 +28,7 @@ export class IconsPreview {
         }
     }
     render() {
-        return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: '18a2839c3a492c31215bbbb29cbcd3c0fea50bf0', class: 'html-wrapper' }, h("span", { key: '488ae76fd009a5fa0c9aaf2727deaa33cae3e3a1', class: "html-tag" }, "<"), h("span", { key: 'b8e95423cc15694f066d47b29dc03f6b41ff82fe', class: "component-name" }, "ifx-icon"), h("span", { key: '7b87f22cbb47743521365708561b9f1eba8cdf32', class: "attribute-name" }, " icon"), "=", h("span", { key: '13ec8254b12497b899b8960e26edf219205dbc36', class: "attribute-value" }, this.iconName), h("span", { key: '6ae1377d4f1ba39b8e59a86da834e783bc343bb9', class: "html-tag" }, ">"), h("span", { key: '017d823522230476dded7323580c5e288c75cb47', class: "html-tag" }, "</"), h("span", { key: 'cd9091d4d3de72c0495c17097d0bcce5a9234441', class: "component-name" }, "ifx-icon"), h("span", { key: '408b285174e12b46b9e3c2f8e413f5914c8fa62d', class: "html-tag" }, ">"), h("button", { key: 'ce263f21f91373c8bc2f697fc876c72611297f0f', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), h("div", { key: '400251cc2a3dc9aaa646ad631fd37b142aa83381', class: "preview__container" }, this.iconsArray.map((icon, index) => h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon }))))));
+        return (h("div", { key: '1115df3774a76b620e5a03e11bd3ef59e5ff05fd', class: 'container' }, h("div", { key: 'e513e6952f643ceb85c11b00ac515a169d4b10ff', class: "alert__wrapper" }, h("ifx-notification", { key: '4d4a5adc91abfce7f1aeffcbb5eaf49459d8cb63', icon: "c-check-16", variant: "success", "link-text": "Figma icon library", "link-href": "https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0", "link-target": "_blank" }, "You can also find the UI icons in Figma for use in mockups.")), h("div", { key: 'f697a5c0fc135ce5e4c6fdb46e9048546b56819b', class: 'html-wrapper' }, h("span", { key: '893d72ee2dd899e21cc8901dd63417e92257ebc2', class: "html-tag" }, "<"), h("span", { key: 'fc80b732f5274841790a4a7d0a080e072f355720', class: "component-name" }, "ifx-icon"), h("span", { key: 'aee512ce9297d447d5a60cef6abec4033a1b8cff', class: "attribute-name" }, " icon"), "=", h("span", { key: '6da85573beefb794f1aa4ad50a687086f06a6c3d', class: "attribute-value" }, this.iconName), h("span", { key: '86582b2a2011836773285e45de5235ffb568ffd8', class: "html-tag" }, ">"), h("span", { key: '34684e64ccd0f7a92f52e8dbc108d7fce5494c6d', class: "html-tag" }, "</"), h("span", { key: '19cecd8e0ee91008a92a987bd87c0814c2cf1f44', class: "component-name" }, "ifx-icon"), h("span", { key: '1f0892b3abf012963f5ff45c774e4d9ad69efa8b', class: "html-tag" }, ">"), h("button", { key: 'b5e268a37eff1dc9ee2f115530f64b4d96a2ad20', onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), h("div", { key: 'cc8a8d6e65f4523f267c0733a207d2f6e05d5d2d', class: "preview__container" }, this.iconsArray.map((icon, index) => h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon }))))));
     }
     static get is() { return "ifx-icons-preview"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icons-preview/icons-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons-preview.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAQjD,MAAM,OAAO,YAAY;IANzB;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KAiD3C;IA9CC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;IAC7B,CAAC;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,4DAAK,KAAK,EAAC,cAAc;gBACvB,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa;;gBAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ;gBAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,UAAU,SAAa;gBACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAU,CACtF;YACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACrC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State } from \"@stencil/core\";\nimport { icons } from '@infineon/infineon-icons';\n\n@Component({\n  tag: 'ifx-icons-preview',\n  styleUrl: './icons-preview.scss',\n  shadow: true\n})\n\nexport class IconsPreview {\n  @State() iconsArray: string[] = [];\n  @State() isCopied: boolean = false;\n  @State() copiedIndex: number;\n  @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\n  @State() iconName: string = `\"c-info-24\"`;\n  @Element() el;\n\n  handleCopiedText() { \n    this.isCopied = true;\n    setTimeout(() => {\n      this.isCopied = false\n    }, 2000);\n  }\n\n  copyIconText(icon) { \n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\n    this.iconName = `\"${icon}\"`\n  }\n\n  copyHtmlString() { \n    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\n    navigator.clipboard.writeText(copiedTag);\n    this.handleCopiedText()\n  }\n\n  componentWillLoad() { \n    for(let icon in icons) { \n      this.iconsArray.push(icon)\n    }\n  }\n\n  render() {\n    return (\n      <div class='container'>\n        <div class='html-wrapper'>\n          <span class=\"html-tag\">&lt;</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\n          <span class=\"html-tag\">&gt;</span>\n          <span class=\"html-tag\">&lt;/</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"html-tag\">&gt;</span>\n          <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\n        </div>\n        <div class=\"preview__container\">\n          {this.iconsArray.map((icon, index) => \n          <div class={`preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : \"\"}`} onClick={() => this.copyIconText(icon)}>\n            <ifx-icon icon={icon}></ifx-icon>\n          </div>)}\n        </div>\n      </div>\n    )\n  }\n}"]}
+{"version":3,"file":"icons-preview.js","sourceRoot":"","sources":["../../../src/components/icons-preview/icons-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAQjD,MAAM,OAAO,YAAY;IANzB;QAOW,eAAU,GAAa,EAAE,CAAC;QAC1B,aAAQ,GAAY,KAAK,CAAC;QAE1B,YAAO,GAAW,0CAA0C,CAAC;QAC7D,aAAQ,GAAW,aAAa,CAAC;KA2D3C;IAxDC,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACvB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IAED,YAAY,CAAC,IAAI;QACf,IAAI,CAAC,OAAO,GAAG,mBAAmB,IAAI,eAAe,CAAC;QACtD,IAAI,CAAC,QAAQ,GAAG,IAAI,IAAI,GAAG,CAAA;IAC7B,CAAC;IAED,cAAc;QACZ,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAChE,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,iBAAiB;QACf,KAAI,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,WAAW;YACpB,4DAAK,KAAK,EAAC,gBAAgB;gBACvB,yEACE,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,SAAS,eACP,oBAAoB,eACpB,kIAAkI,iBAChI,QAAQ,kEAEH,CACjB;YACN,4DAAK,KAAK,EAAC,cAAc;gBACvB,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,gBAAgB,YAAa;;gBAAC,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAQ;gBAC9F,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,6DAAM,KAAK,EAAC,UAAU,SAAa;gBACnC,6DAAM,KAAK,EAAC,gBAAgB,eAAgB;gBAC5C,6DAAM,KAAK,EAAC,UAAU,QAAY;gBAClC,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAU,CACtF;YACN,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACrC,WAAK,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAC1I,gBAAU,IAAI,EAAE,IAAI,GAAa,CAC7B,CAAC,CACH,CACF,CACP,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State } from \"@stencil/core\";\nimport { icons } from '@infineon/infineon-icons';\n\n@Component({\n  tag: 'ifx-icons-preview',\n  styleUrl: './icons-preview.scss',\n  shadow: true\n})\n\nexport class IconsPreview {\n  @State() iconsArray: string[] = [];\n  @State() isCopied: boolean = false;\n  @State() copiedIndex: number;\n  @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\n  @State() iconName: string = `\"c-info-24\"`;\n  @Element() el;\n\n  handleCopiedText() { \n    this.isCopied = true;\n    setTimeout(() => {\n      this.isCopied = false\n    }, 2000);\n  }\n\n  copyIconText(icon) { \n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\n    this.iconName = `\"${icon}\"`\n  }\n\n  copyHtmlString() { \n    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\n    navigator.clipboard.writeText(copiedTag);\n    this.handleCopiedText()\n  }\n\n  componentWillLoad() { \n    for(let icon in icons) { \n      this.iconsArray.push(icon)\n    }\n  }\n\n  render() {\n    return (\n      <div class='container'>\n        <div class=\"alert__wrapper\">\n            <ifx-notification \n              icon=\"c-check-16\" \n              variant=\"success\" \n              link-text=\"Figma icon library\" \n              link-href=\"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0\"\n              link-target=\"_blank\">\n              You can also find the UI icons in Figma for use in mockups.\n            </ifx-notification>\n        </div>\n        <div class='html-wrapper'>\n          <span class=\"html-tag\">&lt;</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\n          <span class=\"html-tag\">&gt;</span>\n          <span class=\"html-tag\">&lt;/</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"html-tag\">&gt;</span>\n          <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\n        </div>\n        <div class=\"preview__container\">\n          {this.iconsArray.map((icon, index) => \n          <div class={`preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : \"\"}`} onClick={() => this.copyIconText(icon)}>\n            <ifx-icon icon={icon}></ifx-icon>\n          </div>)}\n        </div>\n      </div>\n    )\n  }\n}"]}

package/dist/collection/components/link/link.js

@@ -24,7 +24,7 @@ export class Link {
         this.setInternalStates();
     }
     render() {
-        return (h("a", { key: '13fc06640399624a0e11f2b60ff335b0b1dff82c', "aria-label": 'a navigation link button', href: this.internalHref, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '1304bfe3e670a2918fac007362217c7e5d70dd4b' })));
+        return (h("a", { key: '95da8f99e25034f64444388501e212c00c362b43', "aria-label": 'a navigation link button', href: this.internalHref, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: 'b6daf63e453b41f43a54c0b157bf725019ce374e' })));
     }
     getSizeClass() {
         const small = this.size === 's' ? 'small' : null;

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

@@ -10,67 +10,18 @@ export default {
         variant: 'bold',
     },
     argTypes: {
-        label: {
-            name: 'Label of Link',
-            description: 'Set the label of *<ifx-link>*.',
-            table: {
-                category: 'story controls',
-            }
-        },
-        href: {
-            description: 'Specifies the URL of the link.',
-            table: {
-                category: 'ifx-link props',
-                type: {
-                    summary: 'string'
-                }
-            }
-        },
         target: {
-            description: 'Determines where to open the linked URL when the link is clicked.',
-            control: 'radio',
             options: ['_blank', '_self', '_parent'],
-            table: {
-                category: 'ifx-link props',
-                defaultValue: {
-                    summary: '_blank'
-                }
-            }
-        },
-        disabled: {
-            description: 'Disables the link.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-link props',
-                defaultValue: {
-                    summary: 'false'
-                }
-            }
+            control: { type: 'radio' },
         },
         size: {
-            description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)',
-            control: 'radio',
+            description: 'Font Size options: s (14px), m (16px), l (18px), xl (20px) - default: m',
             options: ['s', 'm', 'l', 'xl'],
-            table: {
-                category: 'ifx-link props',
-                defaultValue: {
-                    summary: 'm'
-                },
-                type: {
-                    summary: 's | m | l | xl'
-                }
-            }
+            control: { type: 'radio' },
         },
         variant: {
-            description: 'Sets the style variant of the link.',
-            control: 'radio',
             options: ['bold', 'underlined', 'title', 'menu'],
-            table: {
-                category: 'ifx-link props',
-                defaultValue: {
-                    summary: 'bold'
-                }
-            }
+            control: { type: 'radio' },
         },
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,MAAM;KAChB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;YACjC,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kFAAkF;YAC/F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,gBAAgB;iBAC1B;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;YAChD,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO,eAAe,IAAI,CAAC,QAAQ;IAC5H,IAAI,CAAC,KAAK;cACA,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAC9B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO;IAChG,IAAI,CAAC,KAAK;;cAEA,CAAC;AAEf,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'Components/Link',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Link',\n    href: '',\n    target: '_blank',\n    size: 'm',\n    disabled: false,\n    variant: 'bold',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Link',\n      description: 'Set the label of *<ifx-link>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    href: {\n      description: 'Specifies the URL of the link.',\n      table: {\n        category: 'ifx-link props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked URL when the link is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the link.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)',\n      control: 'radio',\n      options: ['s', 'm', 'l', 'xl'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m | l | xl'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the link.',\n      control: 'radio',\n      options: ['bold', 'underlined', 'title', 'menu'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'bold'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" disabled=\"${args.disabled}\" >\n  ${args.label}\n  </ifx-link>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst TemplateWithIcon = args =>\n  `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\n  ${args.label}\n  <ifx-icon icon=\"arrow-right-16\"></ifx-icon>\n  </ifx-link>`;\n\nexport const WithIcon = TemplateWithIcon.bind({});\n"]}
+{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,MAAM;KAChB;IAED,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;YAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;YAChD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO,eAAe,IAAI,CAAC,QAAQ;IAC5H,IAAI,CAAC,KAAK;cACA,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAC9B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO;IAChG,IAAI,CAAC,KAAK;;cAEA,CAAC;AAEf,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'Components/Link',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Link',\n    href: '',\n    target: '_blank',\n    size: 'm',\n    disabled: false,\n    variant: 'bold',\n  },\n\n  argTypes: {\n    target: {\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n    size: {\n      description: 'Font Size options: s (14px), m (16px), l (18px), xl (20px) - default: m',\n      options: ['s', 'm', 'l', 'xl'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['bold', 'underlined', 'title', 'menu'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" disabled=\"${args.disabled}\" >\n  ${args.label}\n  </ifx-link>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst TemplateWithIcon = args =>\n  `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\n  ${args.label}\n  <ifx-icon icon=\"arrow-right-16\"></ifx-icon>\n  </ifx-link>`;\n\nexport const WithIcon = TemplateWithIcon.bind({});\n"]}

package/dist/collection/components/modal/modal.js

@@ -66,12 +66,12 @@ export class IfxModal {
                     (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.focus();
                     (_b = this.getLastFocusableElement()) === null || _b === void 0 ? void 0 : _b.blur();
                 }, 0);
-                this.ifxOpen.emit();
+                this.ifxModalOpen.emit();
             });
             this.hostElement.addEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
-            this.ifxOpen.emit();
+            this.ifxModalOpen.emit();
         }
     }
     close() {
@@ -81,13 +81,13 @@ export class IfxModal {
             });
             anim.addEventListener('finish', () => {
                 this.showModal = false;
-                this.ifxClose.emit();
+                this.ifxModalClose.emit();
             });
             this.hostElement.removeEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
             this.showModal = false;
-            this.ifxClose.emit();
+            this.ifxModalClose.emit();
         }
     }
     doBeforeClose(trigger) {
@@ -122,8 +122,8 @@ export class IfxModal {
     }
     render() {
         const isAlertVariant = this.variant !== 'default';
-        return (h(Host, { key: '38194353600e6e6ba689ff3c3bec631624c12f24' }, h("div", { key: 'f08db61f400c4af5d0384dc996ff47630537ab53', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: '0f80cf4b8f04c46df7ccd8f3cff9fdeb4171cf90', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '5fe062d671589f423ef9bbd8e485f4e345e2a7a9', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'b4bd6f3cc799ed24e5eb4736b3d6f9b0d69e408c', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: '09f8862f88cde0d410b50da912563db79e812f8d', class: "modal-content" }, h("div", { key: '6770fefb279be63b37179a6e531214a94a43df41', class: "modal-header" }, h("h2", { key: 'babc6449e513fc3ef8513ef98fa192393b32918c', class: "modal-caption" }, this.caption), this.showCloseButton &&
-            h("ifx-icon-button", { key: '6d7fe6a29c39a3c5e3662107f78ca5768ac3ce00', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '0488350e36fd845481e2bb779e7b54484dd9e070', class: "modal-body" }, h("slot", { key: '269d38f446c6d3d80f89538b57256e19bcdf871d', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: 'cbf98594014a535f7f8e08e59af6600f70a24350', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '08f41c2265ec73b466ce8c666d1d653aa2d6e114', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'a4d68099d24172497f3e5e20abb44a9d7279b236', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '4a8ed48128a2192831e42bbd8014df517a76465e' }, h("div", { key: 'fefd3e526e578722bf18f7018d48a31c012ca95d', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'f54884c0516efeebdd7cddc8d6a3b7d2b5050c98', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'e3ce2aa9419cddc252f00c3c81896f29c25fcd39', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'f8e0f5e125d47eaf8d6a3e21f2a1e0b0af4d2c17', class: `modal-content-container ${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { key: '2a27eacb91cbb1379a3844d7f67121261d9a9a9f', class: "modal-content" }, h("div", { key: '0ef370018633db89d128e467107a7433145c2315', class: "modal-header" }, h("h2", { key: '2fd0d99405a90984bb7a69c44b1566feba58a926', class: "modal-caption" }, this.caption), this.showCloseButton &&
+            h("ifx-icon-button", { key: '883d03d2854b25367ff6fe7bec4ac046feb3847a', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '08db467c2d615e50e07baacbb1b768721a7e71aa', class: "modal-body" }, h("slot", { key: '91c71ae55a36accb03c103784298e84ec17ed6db', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: '5590b2a0b9b88f7518c4d28fe78967a692fbebb5', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: 'd1e938629fa0af9f704079e2723f5340d9bbed7a', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'add7f86c862a6ca066f4952d294b73c08108343c', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "ifx-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -329,8 +329,8 @@ export class IfxModal {
     }
     static get events() {
         return [{
-                "method": "ifxOpen",
-                "name": "ifxOpen",
+                "method": "ifxModalOpen",
+                "name": "ifxModalOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -344,8 +344,8 @@ export class IfxModal {
                     "references": {}
                 }
             }, {
-                "method": "ifxClose",
-                "name": "ifxClose",
+                "method": "ifxModalClose",
+                "name": "ifxModalClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n\n    }\n\n\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" /*onSlotchange={() => console.log('slots children modified')}*/ />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxModalOpen: EventEmitter;\n  @Event() ifxModalClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxModalOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxModalOpen.emit();\n\n    }\n\n\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxModalClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxModalClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" /*onSlotchange={() => console.log('slots children modified')}*/ />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"]}

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

@@ -6,143 +6,69 @@ export default {
     // tags: ['autodocs'],
     args: {
         opened: false,
-        cancelButtonLabel: 'Cancel',
-        okButtonLabel: 'OK',
     },
     argTypes: {
         caption: {
             control: 'text',
-            description: 'Title for the modal.',
-            table: {
-                category: 'ifx-modal props',
-            },
+            description: 'Title for the modal',
         },
         opened: {
             control: {
                 disable: true,
             },
-            description: 'Default state of the modal.',
             table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'false',
-                },
                 type: {
                     summary: 'Example (in VanillaJs)',
                     detail: "const modal = document.getElementById('modal'); \nconst openButton = document.getElementById('open'); \n//add DOM event listeners (e.g. click and/or keypress)\n\nfunction openModal() { \nmodal.opened=true;\n\nfunction closeModal() { \nmodal.opened = false; \n}",
                 },
             },
+            description: 'Defaults to false - Can be set by referring to the component and setting it to false/true',
         },
         closeOnOverlayClick: {
             control: 'boolean',
-            description: 'Close the modal when clicking outside the window.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'false',
-                }
-            }
+            description: 'Close the modal when clicking outside the window',
         },
         showCloseButton: {
             control: 'boolean',
-            description: "Show or hide close button in the modal's header.",
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'true',
-                },
-            },
+            description: "Show or hide close button 'x'",
         },
         alertIcon: {
             options: Object.keys(icons),
             control: { type: 'select' },
-            description: 'Icon to be displayed in the alert modal.',
-            table: {
-                category: 'ifx-modal props',
-                type: {
-                    summary: 'string',
-                },
-            },
+            description: 'When specified together with alertIcon then an border to the right is shown',
         },
         size: {
             options: ['s', 'm', 'l'],
             control: { type: 'radio' },
-            description: 'Usable only when screen width is more than 1024px.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 's',
-                },
-                type: {
-                    summary: 's | m | l',
-                }
-            }
+            description: 'Usable only when screen width is more than 1024px'
         },
         variant: {
             options: ['default', 'alert-brand', 'alert-danger'],
             control: { type: 'radio' },
-            description: 'Variant of the modal.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'default',
-                },
-                type: {
-                    summary: 'default | alert-brand | alert-danger',
-                },
-            },
-        },
-        cancelButtonLabel: {
-            control: 'text',
-            description: 'Label for the cancel button.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'Cancel',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        okButtonLabel: {
-            control: 'text',
-            description: 'Label for the OK button.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'OK',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
         },
-        ifxOpen: {
-            action: 'ifxOpen',
-            description: 'Custom event emitted when modal opens.',
+        ifxModalOpen: {
+            action: 'ifxModalOpen',
+            description: 'Custom event emitted when modal opens',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
+                    detail: 'React: onIfxModalOpen={handleChange}\nVue:@ifxModalOpen="handleChange"\nAngular:(ifxModalOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxModalOpen", (event) => {//handle change});',
                 },
             },
         },
-        ifxClose: {
-            action: 'ifxClose',
-            description: 'Custom event emitted when modal closes.',
+        ifxModalClose: {
+            action: 'ifxModalClose',
+            description: 'Custom event emitted when modal closes',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
+                    detail: 'React: onIfxModalClose={handleChange}\nVue:@ifxModalClose="handleChange"\nAngular:(ifxModalClose)="handleChange()"\nVanillaJs:.addEventListener("ifxModalClose", (event) => {//handle change});',
                 },
             },
         },
     },
 };
-const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon, cancelButtonLabel, okButtonLabel }) => {
+const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon }) => {
     const modal = document.createElement('ifx-modal');
     modal.setAttribute('caption', caption);
     modal.setAttribute('variant', variant);
@@ -152,8 +78,8 @@ const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size
     modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);
     modal.setAttribute('show-close-button', showCloseButton);
     modal.setAttribute('size', size);
-    modal.addEventListener('ifxOpen', action('ifxOpen'));
-    modal.addEventListener('ifxClose', action('ifxClose'));
+    modal.addEventListener('ifxModalOpen', action('ifxModalOpen'));
+    modal.addEventListener('ifxModalClose', action('ifxModalClose'));
     const content = document.createElement('div');
     content.setAttribute('slot', 'content');
     content.innerHTML = `
@@ -164,12 +90,12 @@ const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size
     buttons.setAttribute('slot', 'buttons');
     const cancelButton = document.createElement('ifx-button');
     cancelButton.setAttribute('variant', 'secondary');
-    cancelButton.textContent = cancelButtonLabel;
+    cancelButton.textContent = 'Button 1';
     cancelButton.addEventListener('click', () => {
         console.log('Button 1 clicked');
     });
     const primaryButton = document.createElement('ifx-button');
-    primaryButton.textContent = okButtonLabel;
+    primaryButton.textContent = 'Button 2';
     primaryButton.addEventListener('click', () => {
         console.log('Button 2 clicked');
     });
@@ -207,8 +133,5 @@ Alert.args = {
     alertIcon: 'arrowdoen24',
     size: 's',
     variant: 'alert-brand',
-    cancelButtonLabel: 'Cancel',
-    okButtonLabel: 'OK',
-    showCloseButton: false,
 };
 //# sourceMappingURL=modal.stories.js.map