@infineon/infineon-design-system-stencil 31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0 → 31.0.0--canary.1640.26c4c0764d79109b3335389182db63edca37148d.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,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"]}
+{"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"]}

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

@@ -13,25 +13,81 @@ 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'],
-            control: { type: 'radio' },
+            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'
+                }
+            }
         },
         size: {
-            description: 'Size options: s (24px), m (40px) and l (48px) - default: m',
+            description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).',
+            control: 'radio',
             options: ['s', 'm', 'l'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: 'm'
+                },
+                type: {
+                    summary: 's | m | l'
+                }
+            }
         },
         target: {
+            description: 'Determines where to open the linked URL when the button is clicked.',
+            control: 'radio',
             options: ['_blank', '_self', '_parent'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: '_blank'
+                }
+            }
         },
         shape: {
+            description: 'Defines the shape of the icon button.',
+            control: 'radio',
             options: ['round', 'square'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-icon-button props',
+                defaultValue: {
+                    summary: 'round'
+                }
+            }
         },
     },
 };

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,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"]}
+{"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"]}

package/dist/collection/components/link/link.css

@@ -18,6 +18,9 @@
   line-height: 1.6;
   font-family: var(--ifx-font-family);
 }
+.link:hover {
+  cursor: pointer;
+}
 .link:focus {
   outline-width: 2px;
   outline-style: solid;

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

@@ -10,18 +10,67 @@ 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'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-link props',
+                defaultValue: {
+                    summary: '_blank'
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the link.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-link props',
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
         },
         size: {
-            description: 'Font Size options: s (14px), m (16px), l (18px), xl (20px) - default: m',
+            description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)',
+            control: 'radio',
             options: ['s', 'm', 'l', 'xl'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-link props',
+                defaultValue: {
+                    summary: 'm'
+                },
+                type: {
+                    summary: 's | m | l | xl'
+                }
+            }
         },
         variant: {
+            description: 'Sets the style variant of the link.',
+            control: 'radio',
             options: ['bold', 'underlined', 'title', 'menu'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-link props',
+                defaultValue: {
+                    summary: 'bold'
+                }
+            }
         },
     },
 };

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,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"]}
+{"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"]}

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.ifxModalOpen.emit();
+                this.ifxOpen.emit();
             });
             this.hostElement.addEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
-            this.ifxModalOpen.emit();
+            this.ifxOpen.emit();
         }
     }
     close() {
@@ -81,13 +81,13 @@ export class IfxModal {
             });
             anim.addEventListener('finish', () => {
                 this.showModal = false;
-                this.ifxModalClose.emit();
+                this.ifxClose.emit();
             });
             this.hostElement.removeEventListener('keydown', this.handleKeypress);
         }
         catch (err) {
             this.showModal = false;
-            this.ifxModalClose.emit();
+            this.ifxClose.emit();
         }
     }
     doBeforeClose(trigger) {
@@ -122,8 +122,8 @@ export class IfxModal {
     }
     render() {
         const isAlertVariant = this.variant !== 'default';
-        return (h(Host, { key: '622de26c143196380000861b977a483595799667' }, h("div", { key: '62e5820014cbf03a4cda7d39dd8e9f7d58d81635', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'e023841191ff25390e9b5f8b24562f8ec22eb9af', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '10d3e8232f6bc52e6bb337621fe53c96265a6b84', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '83dbaf46f8461430da29f4ec0de615bae86fc1c2', 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: '080b7681bca959116bd2c48741a5fd6a4dc97cd8', class: "modal-content" }, h("div", { key: '847772a8f8736914887a869ae7eabd443266ca4e', class: "modal-header" }, h("h2", { key: '0ac26f87449e72c39afa3f672ae4c2f44ee4465f', class: "modal-caption" }, this.caption), this.showCloseButton &&
-            h("ifx-icon-button", { key: 'dba0bc92c5bb0a695f9449bf146933529da935de', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '571fca3750ca7df83c0c834e235674639d5e88a7', class: "modal-body" }, h("slot", { key: 'b7008875ccc46abe0b06d7f10dcc25a6d257ffdf', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: 'f6639e282e3f856d648847c91752a7fca3fc3505', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: 'd12f3e70c2ba8f3ae52e1ec3087ea6dc916c9e92', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: '05e2615fda33ac19d61f1845d3df042642634347', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        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" }))));
     }
     static get is() { return "ifx-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -329,8 +329,8 @@ export class IfxModal {
     }
     static get events() {
         return [{
-                "method": "ifxModalOpen",
-                "name": "ifxModalOpen",
+                "method": "ifxOpen",
+                "name": "ifxOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -344,8 +344,8 @@ export class IfxModal {
                     "references": {}
                 }
             }, {
-                "method": "ifxModalClose",
-                "name": "ifxModalClose",
+                "method": "ifxClose",
+                "name": "ifxClose",
                 "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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAatE,MAAM,OAAO,QAAQ;IALrB;QAM0C,WAAM,GAAa,KAAK,CAAC;QACxD,cAAS,GAAY,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC;QAE3C,YAAO,GAAW,aAAa,CAAC;QAChC,wBAAmB,GAAY,IAAI,CAAC;QAKpC,YAAO,GAA+C,SAAS,CAAC;QAEhE,SAAI,GAAoB,GAAG,CAAC;QAE5B,cAAS,GAAW,EAAE,CAAC;QACvB,kBAAa,GAAW,IAAI,CAAC;QAC7B,sBAAiB,GAAW,QAAQ,CAAC;QAGpC,uBAAkB,GAAY,KAAK,CAAC;QAErC,oBAAe,GAAY,IAAI,CAAC;QAGhC,sBAAiB,GAAkB,EAAE,CAAC;QAsB9C,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC;QACpD,CAAC,CAAC;QAEF,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC;QA2DF,mBAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YACD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;KA+FH;IA1LC,gBAAgB;QACd,sEAAsE;QACtE,6CAA6C;QAC7C,IAAI,CAAC,iBAAiB,GAAG,eAAe,CACtC,IAAI,CAAC,WAAW,CAAC,UAAU,EAC3B,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,wBAAwB,CAAC,EAC5D,WAAW,CACZ,CAAC;IAEJ,CAAC;IAED,wBAAwB;QACtB,OAAO,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC;IAED,uBAAuB;QACrB,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACnE,CAAC;IAWD,YAAY,CAAC,OAA2B;QACtC,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;YACpB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC,CAAE,CAAC;YACJ,OAAO;QACT,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAGD,IAAI;QACF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,MAAM,EAAE;gBAC9D,QAAQ,EAAE,GAAG;aACd,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,sDAAsD;gBACtD,4CAA4C;gBAC5C,UAAU,CAAC,GAAG,EAAE;;oBACd,MAAA,IAAI,CAAC,uBAAuB,EAAE,0CAAE,KAAK,EAAE,CAAC;oBACxC,MAAA,IAAI,CAAC,uBAAuB,EAAE,0CAAE,IAAI,EAAE,CAAC;gBACzC,CAAC,EAAE,CAAC,CAAC,CAAC;gBAEN,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;YAC3B,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACpE,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAE3B,CAAC;IAGH,CAAC;IAED,KAAK;QACH,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,EAAE;gBAC/D,QAAQ,EAAE,GAAG;aACd,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC5B,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACvE,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAYD,aAAa,CAAC,OAA0B;QACtC,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAKD,aAAa,CAAC,QAAQ;QACpB,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAGD,uBAAuB,CAAC,CAAC;;QACvB,IAAG,CAAA,MAAA,CAAC,CAAC,aAAa,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,0CAAE,iBAAiB,IAAG,CAAC,EAAE,CAAC;YAChE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QACjC,CAAC;aAAI,CAAC;YACJ,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAClC,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QAClD,OAAO,CACL,EAAC,IAAI;YACH,4DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACvC,KAAK,EAAE,mBAAmB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;gBAExD,4DACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,GACnC;gBACP,0FAEE,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAC,GAAG,GACP;gBACP,4DACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,EAAE,EAC7C,IAAI,EAAC,QAAQ,gBACF,MAAM,gBACL,IAAI,CAAC,OAAO;oBACvB,cAAc,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,IACjF,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI,CACvD,CACP,CAAC,CAAC,CAAC,IAAI;oBACR,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAC,cAAc;4BACvB,2DAAI,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,OAAO,CAAM;4BAE3C,IAAI,CAAC,eAAe;gCACpB,wEAAiB,KAAK,EAAG,oBAAoB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,GACtJ,CAEhB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,SAAS,CAAC,+DAA+D,GAAG,CACnF;wBACN,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE;4BAC5E,6DAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,CAAC,CAAC,EAAC,EAAE,CAAA,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAChE,CACH,CACF,CACF;gBACN,0FAEE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,QAAQ,EAAC,GAAG,GACP,CACH,CACD,CAER,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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}"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAatE,MAAM,OAAO,QAAQ;IALrB;QAM0C,WAAM,GAAa,KAAK,CAAC;QACxD,cAAS,GAAY,IAAI,CAAC,MAAM,IAAI,KAAK,CAAC;QAE3C,YAAO,GAAW,aAAa,CAAC;QAChC,wBAAmB,GAAY,IAAI,CAAC;QAKpC,YAAO,GAA+C,SAAS,CAAC;QAEhE,SAAI,GAAoB,GAAG,CAAC;QAE5B,cAAS,GAAW,EAAE,CAAC;QACvB,kBAAa,GAAW,IAAI,CAAC;QAC7B,sBAAiB,GAAW,QAAQ,CAAC;QAGpC,uBAAkB,GAAY,KAAK,CAAC;QAErC,oBAAe,GAAY,IAAI,CAAC;QAGhC,sBAAiB,GAAkB,EAAE,CAAC;QAsB9C,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC;QACpD,CAAC,CAAC;QAEF,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC;QA2DF,mBAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;YACxC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YACD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;KA+FH;IA1LC,gBAAgB;QACd,sEAAsE;QACtE,6CAA6C;QAC7C,IAAI,CAAC,iBAAiB,GAAG,eAAe,CACtC,IAAI,CAAC,WAAW,CAAC,UAAU,EAC3B,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,wBAAwB,CAAC,EAC5D,WAAW,CACZ,CAAC;IAEJ,CAAC;IAED,wBAAwB;QACtB,OAAO,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC;IAED,uBAAuB;QACrB,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACnE,CAAC;IAWD,YAAY,CAAC,OAA2B;QACtC,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;YACpB,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC,CAAE,CAAC;YACJ,OAAO;QACT,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAGD,IAAI;QACF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,MAAM,EAAE;gBAC9D,QAAQ,EAAE,GAAG;aACd,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,sDAAsD;gBACtD,4CAA4C;gBAC5C,UAAU,CAAC,GAAG,EAAE;;oBACd,MAAA,IAAI,CAAC,uBAAuB,EAAE,0CAAE,KAAK,EAAE,CAAC;oBACxC,MAAA,IAAI,CAAC,uBAAuB,EAAE,0CAAE,IAAI,EAAE,CAAC;gBACzC,CAAC,EAAE,CAAC,CAAC,CAAC;gBAEN,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACtB,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACpE,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAEtB,CAAC;IAGH,CAAC;IAED,KAAK;QACH,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,EAAE;gBAC/D,QAAQ,EAAE,GAAG;aACd,CAAC,CAAC;YACH,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACnC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACvE,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAYD,aAAa,CAAC,OAA0B;QACtC,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAKD,aAAa,CAAC,QAAQ;QACpB,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAGD,uBAAuB,CAAC,CAAC;;QACvB,IAAG,CAAA,MAAA,CAAC,CAAC,aAAa,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,0CAAE,iBAAiB,IAAG,CAAC,EAAE,CAAC;YAChE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QACjC,CAAC;aAAI,CAAC;YACJ,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAClC,CAAC;IACH,CAAC;IAGD,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QAClD,OAAO,CACL,EAAC,IAAI;YACH,4DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACvC,KAAK,EAAE,mBAAmB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;gBAExD,4DACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,GACnC;gBACP,0FAEE,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,QAAQ,EAAC,GAAG,GACP;gBACP,4DACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,EAAE,EAC7C,IAAI,EAAC,QAAQ,gBACF,MAAM,gBACL,IAAI,CAAC,OAAO;oBACvB,cAAc,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,IACjF,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI,CACvD,CACP,CAAC,CAAC,CAAC,IAAI;oBACR,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAC,cAAc;4BACvB,2DAAI,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,OAAO,CAAM;4BAE3C,IAAI,CAAC,eAAe;gCACpB,wEAAiB,KAAK,EAAG,oBAAoB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,GACtJ,CAEhB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,SAAS,CAAC,+DAA+D,GAAG,CACnF;wBACN,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE;4BAC5E,6DAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,CAAC,CAAC,EAAC,EAAE,CAAA,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAChE,CACH,CACF,CACF;gBACN,0FAEE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,QAAQ,EAAC,GAAG,GACP,CACH,CACD,CAER,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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}"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Modal',\n  component: 'ifx-modal',\n  // tags: ['autodocs'],\n\n  args: {\n    opened: false,\n  },\n  argTypes: {\n    caption: {\n      control: 'text',\n      description: 'Title for the modal',\n    },\n    opened: {\n      control: {\n        disable: true,\n      },\n      table: {\n        type: {\n          summary: 'Example (in VanillaJs)',\n          detail:\n            \"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}\",\n        },\n      },\n      description: 'Defaults to false - Can be set by referring to the component and setting it to false/true',\n    },\n    closeOnOverlayClick: {\n      control: 'boolean',\n      description: 'Close the modal when clicking outside the window',\n    },\n    showCloseButton: {\n      control: 'boolean',\n      description: \"Show or hide close button 'x'\",\n    },\n    alertIcon: {\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      description: 'When specified together with alertIcon then an border to the right is shown',\n    },\n    size: {\n      options: ['s', 'm', 'l'],\n      control: { type: 'radio'},\n      description: 'Usable only when screen width is more than 1024px'\n    },\n    variant: {\n      options: ['default', 'alert-brand', 'alert-danger'],\n      control: { type: 'radio' },\n    },\n    ifxModalOpen: {\n      action: 'ifxModalOpen',\n      description: 'Custom event emitted when modal opens',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxModalOpen={handleChange}\\nVue:@ifxModalOpen=\"handleChange\"\\nAngular:(ifxModalOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxModalOpen\", (event) => {//handle change});',\n        },\n      },\n    },\n    ifxModalClose: {\n      action: 'ifxModalClose',\n      description: 'Custom event emitted when modal closes',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxModalClose={handleChange}\\nVue:@ifxModalClose=\"handleChange\"\\nAngular:(ifxModalClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxModalClose\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon }) => {\n  const modal = document.createElement('ifx-modal');\n  modal.setAttribute('caption', caption);\n  modal.setAttribute('variant', variant);\n\n  if (alertIcon) {\n    modal.setAttribute('alert-icon', alertIcon);\n  }\n  modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);\n  modal.setAttribute('show-close-button', showCloseButton);\n  modal.setAttribute('size', size)\n\n  modal.addEventListener('ifxModalOpen', action('ifxModalOpen'));\n  modal.addEventListener('ifxModalClose', action('ifxModalClose'));\n\n  const content = document.createElement('div');\n  content.setAttribute('slot', 'content');\n  content.innerHTML = `\n    <span>Modal content</span>\n  `;\n  modal.appendChild(content);\n  const buttons = document.createElement('div');\n  buttons.setAttribute('slot', 'buttons');\n\n  const cancelButton = document.createElement('ifx-button');\n  cancelButton.setAttribute('variant', 'secondary');\n  cancelButton.textContent = 'Button 1';\n  cancelButton.addEventListener('click', () => {\n    console.log('Button 1 clicked');\n  });\n\n  const primaryButton = document.createElement('ifx-button');\n  primaryButton.textContent = 'Button 2';\n  primaryButton.addEventListener('click', () => {\n    console.log('Button 2 clicked');\n  });\n\n  buttons.appendChild(cancelButton);\n  buttons.appendChild(primaryButton);\n  modal.appendChild(buttons);\n\n  const openButton = document.createElement('ifx-button');\n  openButton.id = 'open';\n  openButton.textContent = 'Open Modal';\n  openButton.addEventListener('click', () => {\n    modal.opened = true;\n  });\n  openButton.addEventListener('keydown', event => {\n    if (event.key === 'Enter') {\n      modal.opened = true;\n    }\n  });\n\n  const storyElement = document.createElement('div');\n  storyElement.appendChild(modal);\n  storyElement.appendChild(openButton);\n\n  return storyElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  caption: 'Modal Title',\n  showCloseButton: true,\n  closeOnOverlayClick: false,\n  size: 's',\n  variant: 'default',\n};\n\nexport const Alert = Template.bind({});\nAlert.args = {\n  caption: 'Alert-Brand Modal Title',\n  closeOnOverlayClick: true,\n  alertIcon: 'arrowdoen24',\n  size: 's',\n  variant: 'alert-brand',\n};\n"]}
+{"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,sBAAsB;IAEtB,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,iBAAiB,EAAE,QAAQ;QAC3B,aAAa,EAAE,IAAI;KACpB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;aAC5B;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;YACD,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,wBAAwB;oBACjC,MAAM,EACJ,sQAAsQ;iBACzQ;aACF;SACF;QACD,mBAAmB,EAAE;YACnB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kDAAkD;YAC/D,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACxB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,WAAW,EAAE,oDAAoD;YACjE,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,cAAc,CAAC;YACnD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,WAAW,EAAE,uBAAuB;YACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,sCAAsC;iBAChD;aACF;SACF;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,8BAA8B;YAC3C,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,yCAAyC;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6KAA6K;iBAChL;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAAE,EAAE;IACjI,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAClD,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACvC,KAAK,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAEvC,IAAI,SAAS,EAAE,CAAC;QACd,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC9C,CAAC;IACD,KAAK,CAAC,YAAY,CAAC,wBAAwB,EAAE,mBAAmB,CAAC,CAAC;IAClE,KAAK,CAAC,YAAY,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;IACzD,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;IAEhC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IACrD,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,SAAS,GAAG;;GAEnB,CAAC;IACF,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAExC,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC1D,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IAClD,YAAY,CAAC,WAAW,GAAG,iBAAiB,CAAC;IAC7C,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAC1C,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC3D,aAAa,CAAC,WAAW,GAAG,aAAa,CAAC;IAC1C,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAC3C,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAClC,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;IACnC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE3B,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,GAAG,MAAM,CAAC;IACvB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;IACtC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACxC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC,CAAC;IACH,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE;QAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnD,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAErC,OAAO,YAAY,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,aAAa;IACtB,eAAe,EAAE,IAAI;IACrB,mBAAmB,EAAE,KAAK;IAC1B,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,yBAAyB;IAClC,mBAAmB,EAAE,IAAI;IACzB,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,aAAa;IACtB,iBAAiB,EAAE,QAAQ;IAC3B,aAAa,EAAE,IAAI;IACnB,eAAe,EAAE,KAAK;CACvB,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Modal',\n  component: 'ifx-modal',\n  // tags: ['autodocs'],\n\n  args: {\n    opened: false,\n    cancelButtonLabel: 'Cancel',\n    okButtonLabel: 'OK',\n  },\n  argTypes: {\n    caption: {\n      control: 'text',\n      description: 'Title for the modal.',\n      table: {\n        category: 'ifx-modal props',\n      },\n    },\n    opened: {\n      control: {\n        disable: true,\n      },\n      description: 'Default state of the modal.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'false',\n        },\n        type: {\n          summary: 'Example (in VanillaJs)',\n          detail:\n            \"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}\",\n        },\n      },\n    },\n    closeOnOverlayClick: {\n      control: 'boolean',\n      description: 'Close the modal when clicking outside the window.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'false',\n        }\n      }\n    },\n    showCloseButton: {\n      control: 'boolean',\n      description: \"Show or hide close button in the modal's header.\",\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'true',\n        },\n      },\n    },\n    alertIcon: {\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      description: 'Icon to be displayed in the alert modal.',\n      table: {\n        category: 'ifx-modal props',\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    size: {\n      options: ['s', 'm', 'l'],\n      control: { type: 'radio' },\n      description: 'Usable only when screen width is more than 1024px.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 's',\n        },\n        type: {\n          summary: 's | m | l',\n        }\n      }\n    },\n    variant: {\n      options: ['default', 'alert-brand', 'alert-danger'],\n      control: { type: 'radio' },\n      description: 'Variant of the modal.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'default',\n        },\n        type: {\n          summary: 'default | alert-brand | alert-danger',\n        },\n      },\n    },\n    cancelButtonLabel: {\n      control: 'text',\n      description: 'Label for the cancel button.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'Cancel',\n        },\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    okButtonLabel: {\n      control: 'text',\n      description: 'Label for the OK button.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'OK',\n        },\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n\n    ifxOpen: {\n      action: 'ifxOpen',\n      description: 'Custom event emitted when modal opens.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n        },\n      },\n    },\n    ifxClose: {\n      action: 'ifxClose',\n      description: 'Custom event emitted when modal closes.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon, cancelButtonLabel, okButtonLabel }) => {\n  const modal = document.createElement('ifx-modal');\n  modal.setAttribute('caption', caption);\n  modal.setAttribute('variant', variant);\n\n  if (alertIcon) {\n    modal.setAttribute('alert-icon', alertIcon);\n  }\n  modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);\n  modal.setAttribute('show-close-button', showCloseButton);\n  modal.setAttribute('size', size)\n\n  modal.addEventListener('ifxOpen', action('ifxOpen'));\n  modal.addEventListener('ifxClose', action('ifxClose'));\n\n  const content = document.createElement('div');\n  content.setAttribute('slot', 'content');\n  content.innerHTML = `\n    <span>Modal content</span>\n  `;\n  modal.appendChild(content);\n  const buttons = document.createElement('div');\n  buttons.setAttribute('slot', 'buttons');\n\n  const cancelButton = document.createElement('ifx-button');\n  cancelButton.setAttribute('variant', 'secondary');\n  cancelButton.textContent = cancelButtonLabel;\n  cancelButton.addEventListener('click', () => {\n    console.log('Button 1 clicked');\n  });\n\n  const primaryButton = document.createElement('ifx-button');\n  primaryButton.textContent = okButtonLabel;\n  primaryButton.addEventListener('click', () => {\n    console.log('Button 2 clicked');\n  });\n\n  buttons.appendChild(cancelButton);\n  buttons.appendChild(primaryButton);\n  modal.appendChild(buttons);\n\n  const openButton = document.createElement('ifx-button');\n  openButton.id = 'open';\n  openButton.textContent = 'Open Modal';\n  openButton.addEventListener('click', () => {\n    modal.opened = true;\n  });\n  openButton.addEventListener('keydown', event => {\n    if (event.key === 'Enter') {\n      modal.opened = true;\n    }\n  });\n\n  const storyElement = document.createElement('div');\n  storyElement.appendChild(modal);\n  storyElement.appendChild(openButton);\n\n  return storyElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  caption: 'Modal Title',\n  showCloseButton: true,\n  closeOnOverlayClick: false,\n  size: 's',\n  variant: 'default',\n};\n\nexport const Alert = Template.bind({});\nAlert.args = {\n  caption: 'Alert-Brand Modal Title',\n  closeOnOverlayClick: true,\n  alertIcon: 'arrowdoen24',\n  size: 's',\n  variant: 'alert-brand',\n  cancelButtonLabel: 'Cancel',\n  okButtonLabel: 'OK',\n  showCloseButton: false,\n};\n"]}