npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0 → 30.2.0 - Mend

@infineon/infineon-design-system-stencil 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0 → 30.2.0

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

Files changed (324) hide show

package/dist/collection/components/dropdown/dropdown.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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/Dropdown',\n tags: ['autodocs'],\n args: {\n label: 'Dropdown',\n disabled: false,\n defaultOpen: false,\n noCloseOnOutsideClick: false,\n noCloseOnMenuClick: false,\n noAppendToBody: false,\n variant: 'primary',\n placement: 'bottom-start',\n size: 'm',\n searchField: false,\n header: false,\n separator: false,\n href: '',\n target: '_self',\n icon: 'c-info-16',\n },\n argTypes: {\n placement: {\n description: 'Specifies the position of the dropdown relative to its trigger element.',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n ],\n control: 'select',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: 'bottom-start'\n }\n }\n },\n label: {\n name: 'Label of Dropdown',\n description: 'The visible name or label for the dropdown button.',\n table: {\n category: 'story controls',\n defaultValue: {\n summary: 'Dropdown'\n }\n }\n // if: { arg: 'Type', eq: 'Default' }\n },\n size: {\n description: 'Font Size options for menu items: s (14px) and m (16px) - default: m.',\n options: ['s', 'm'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n disabled: {\n description: 'Determines if the dropdown button should be disabled.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n variant: {\n description: 'The visual style of the dropdown button. Accepted values are \"primary\", \"secondary\", \"tertiary\".',\n options: ['primary', 'secondary', 'tertiary'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-trigger-button props',\n defaultValue: {\n summary: 'primary'\n }\n }\n // if: { arg: 'Type', eq: 'Default' }\n },\n\n target: {\n description: 'Determines where to open the linked document when the dropdown item is clicked.',\n options: ['_self', '_blank'],\n control: 'radio',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: '_self'\n }\n }\n },\n href: {\n description: 'href link to menu item.',\n table: {\n category: 'ifx-dropdown-item props'\n }\n },\n icon: {\n description: 'The icon to be displayed on the dropdown items.',\n options: ['none', ...Object.values(icons).map(i => i['name'])],\n control: 'select',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n // if: { arg: 'Type', eq: 'Label Trigger' }\n },\n searchField: {\n description: 'Show Search Bar.',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: false\n }\n }\n },\n header: {\n description: 'Add Header Text.',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: false\n }\n }\n },\n separator: {\n description: 'Use separator in dropdown.',\n table: {\n category: 'ifx-dropdown-menu props',\n defaultValue: {\n summary: false\n }\n }\n },\n defaultOpen: {\n description: 'Determines if the dropdown should be open by default.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noCloseOnOutsideClick: {\n description: 'Determines if the dropdown should not close when a click outside the dropdown happens.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noCloseOnMenuClick: {\n description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n noAppendToBody: {\n description: 'Determines if the dropdown should not be appended to the body.',\n control: 'boolean',\n table: {\n category: 'ifx-dropdown props',\n defaultValue: {\n summary: false\n }\n }\n },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event that is emitted when the dropdown 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 dropdown 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 ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted when an item is selected.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown placement=\"${args.placement}\" \n disabled=\"${args.disabled}\" \n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.label}\n </ifx-dropdown-trigger-button>\n\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.searchField ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\n\nconst LabelTriggerTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n disabled=\"${args.disabled}\"\n no-append-to-body=\"${args.noAppendToBody}\"\n >\n Hello World! Click on the text to open the dropdown\n <ifx-dropdown-trigger>\n <ifx-icon icon=\"${'c-check-16'}\"></ifx-icon>\n </ifx-dropdown-trigger>\n Some more text\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.icon === 'none' ? '' : args.icon}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const LabelTrigger = LabelTriggerTemplate.bind({});\nLabelTrigger.argTypes = {\n label: {\n table: {\n disable: true\n }\n },\n variant: {\n table: {\n disable: true\n }\n }\n}\n"]}
1	+ {"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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/Dropdown',\n tags: ['autodocs'],\n args: {\n Label: 'Dropdown',\n variant: 'primary',\n disabled: false,\n icon: 'c-check-16',\n size: 'm',\n Search: false,\n Header: false,\n href: '',\n target: '_self',\n Separator: false,\n DropDownMenuItemIcon: false,\n defaultOpen: false,\n noCloseOnOutsideClick: false,\n noCloseOnMenuClick: false,\n noAppendToBody: false,\n placement: 'bottom-start',\n },\n argTypes: {\n placement: {\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n ],\n control: { type: 'select' },\n },\n Label: { \n description: 'The visible name or label for the dropdown button',\n // if: { arg: 'Type', eq: 'Default' }\n },\n size: {\n description: 'Font Size options for menu items: s (14px) and m (16px) - default: m',\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n disabled: { description: 'Determines if the dropdown button should be disabled' },\n variant: {\n description: 'The visual style of the dropdown button. Accepted values are \"primary\", \"secondary\", \"tertiary\"',\n options: ['primary', 'secondary', 'tertiary'],\n control: { type: 'radio' },\n // if: { arg: 'Type', eq: 'Default' }\n },\n\n target: {\n options: ['_self', '_blank'],\n control: { type: 'radio' },\n },\n href: {\n description: 'href link to menu item'\n },\n icon: {\n description: 'The icon to be displayed on the dropdown button',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n // if: { arg: 'Type', eq: 'Label Trigger' }\n },\n Search :{\n description: 'Show Search Bar'\n },\n Header: {\n description: 'Add Header Text'\n },\n Separator:{\n description: 'Use seperator in dropdown'\n },\n DropDownMenuItemIcon: {\n description: 'Show menu item icon in dropdown'\n },\n defaultOpen: { description: 'Determines if the dropdown should be open by default' },\n noCloseOnOutsideClick: { description: 'Determines if the dropdown should not close when a click outside the dropdown happens' },\n noCloseOnMenuClick: { description: 'Determines if the dropdown should not close when a click inside the dropdown menu happens' },\n noAppendToBody: { description: 'Determines if the dropdown should not be appended to the body' },\n ifxOpen: {\n action: 'ifxOpen',\n description: 'Custom event that is emitted when the dropdown opens',\n table: {\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 dropdown closes',\n table: {\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 ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted when an item is selected',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown placement=\"${args.placement}\" \n disabled=\"${args.disabled}\" \n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n no-append-to-body=\"${args.noAppendToBody}\">\n\n <ifx-dropdown-trigger-button variant=\"${args.variant}\">\n ${args.Label}\n </ifx-dropdown-trigger-button>\n\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.Search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {\n icon: {\n table: {\n disable: true\n }\n }\n}\n\n\n\nconst LabelTriggerTemplate = args => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-dropdown\n placement=\"${args.placement}\"\n default-open=\"${args.defaultOpen}\"\n no-close-on-outside-click=\"${args.noCloseOnOutsideClick}\"\n no-close-on-menu-click=\"${args.noCloseOnOutsideClick}\"\n disabled=\"${args.disabled}\"\n no-append-to-body=\"${args.noAppendToBody}\"\n >\n Hello World! Click on the text to open the dropdown\n <ifx-dropdown-trigger>\n <ifx-icon icon=\"${args.icon}\"></ifx-icon>\n </ifx-dropdown-trigger>\n Some more text\n <ifx-dropdown-menu size=\"${args.size}\">\n ${args.Header ? `<ifx-dropdown-header>Header Text</ifx-dropdown-header>` : ''}\n ${args.Search ? `<ifx-search-field show-delete-icon=\"false\"></ifx-search-field>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n ${args.Separator ? `<ifx-dropdown-separator></ifx-dropdown-separator>` : ''}\n <ifx-dropdown-item icon=\"${args.DropDownMenuItemIcon ? 'c-info-16' : ''}\" target=\"${args.target}\" href=\"${args.href !== '' ? args.href : ''}\">Menu Item</ifx-dropdown-item>\n </ifx-dropdown-menu>\n</ifx-dropdown>`;\n\n const dropdown = wrapper.querySelector('ifx-dropdown') as HTMLElement;\n const dropdownMenu = dropdown.querySelector('ifx-dropdown-menu');\n\n dropdown.addEventListener('ifxOpen', action('ifxOpen'));\n dropdown.addEventListener('ifxClose', action('ifxClose'));\n dropdownMenu.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n\n return wrapper;\n};\n\nexport const LabelTrigger = LabelTriggerTemplate.bind({});\nLabelTrigger.argTypes = {\n Label: {\n table: {\n disable: true\n }\n },\n variant: {\n table: {\n disable: true\n }\n }\n}\n"]}

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

@@ -5,13 +5,7 @@ export default {
         copyrightText: '© 1999 - 2024 Infineon Technologies AG',
     },
     argTypes: {
-        copyrightText: {
-            description: 'Sets the text for the copyright.',
-            control: 'text',
-            table: {
-                category: 'ifx-footer props',
-            }
-        },
+        copyrightText: { control: 'text' },
     },
 };
 const DefaultTemplate = args => {

package/dist/collection/components/footer/footer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;KACxD;IACD,QAAQ,EAAE;QACR,aAAa,EAAE~~;YACb~~,~~WAAW,~~EAAE,~~kCAAkC;YAC/C,~~OAAO,EAAE,MAAM~~;YACf~~,~~KAAK,~~EAAE;~~gBACL,QAAQ,EAAE,kBAAkB~~;~~aAC7B;SACF;KAEF;~~CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BpC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;;;;;;;gBAOZ,CAAC;AAEjB,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,aAAa,GAAG,GAAG,EAAE,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuDY,CAAC;AAEf,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: 'Components/Footer',\n tags: ['autodocs'],\n args: {\n copyrightText: '© 1999 - 2024 Infineon Technologies AG',\n },\n argTypes: {\n copyrightText: {~~\n description:~~ ~~'Sets the text for the copyright.',\n~~ control: 'text'~~,\n table:~~ ~~{\n category: 'ifx-footer props',\n~~ }~~\n }~~,\n\n },\n};\n\nconst DefaultTemplate = args => {\n return `\n <ifx-footer copyright-text=\"${args.copyrightText}\">\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n};\n\nexport const Medium = DefaultTemplate.bind({});\n\nconst SmallTemplate = () => `<ifx-footer>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n\nexport const Small = SmallTemplate.bind({});\n\nconst LargeTemplate = () =>\n `<ifx-footer>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n</ifx-footer>`;\n\nexport const Large = LargeTemplate.bind({});\n"]}
1	+ {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;KACxD;IACD,QAAQ,EAAE;QACR,aAAa,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KACnC;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BpC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;;;;;;;gBAOZ,CAAC;AAEjB,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,aAAa,GAAG,GAAG,EAAE,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuDY,CAAC;AAEf,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: 'Components/Footer',\n tags: ['autodocs'],\n args: {\n copyrightText: '© 1999 - 2024 Infineon Technologies AG',\n },\n argTypes: {\n copyrightText: { control: 'text' },\n },\n};\n\nconst DefaultTemplate = args => {\n return `\n <ifx-footer copyright-text=\"${args.copyrightText}\">\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n};\n\nexport const Medium = DefaultTemplate.bind({});\n\nconst SmallTemplate = () => `<ifx-footer>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n </ifx-footer>`;\n\nexport const Small = SmallTemplate.bind({});\n\nconst LargeTemplate = () =>\n `<ifx-footer>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <ifx-footer-column slot=\"col\">\n <h5 slot=\"title\">Title</h5>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n </ifx-footer-column>\n <div slot=\"socials\">\n <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n <ifx-icon icon=\"facebook\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n <ifx-icon icon=\"youtube\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n <ifx-icon icon=\"instagram\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n <ifx-icon icon=\"linkedin\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://twitter.com/infineon\">\n <ifx-icon icon=\"twitter\"></ifx-icon>\n </ifx-link>\n <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n <ifx-icon icon=\"xing\"></ifx-icon>\n </ifx-link>\n </div>\n <div slot=\"info\">\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n </div>\n</ifx-footer>`;\n\nexport const Large = LargeTemplate.bind({});\n"]}

package/dist/collection/components/icon/infineonIconStencil.stories.js CHANGED Viewed

@@ -8,21 +8,16 @@ export default {
     },
     argTypes: {
         icon: {
-            description: 'Set the icon.',
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
-            table: {
-                category: 'ifx-icon props',
-            }
         },
         consoleError: {
             action: 'consoleError',
-            description: 'Custom event emitted when icon is invalid.',
+            description: 'Custom event emitted when icon is invalid',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onConsoleError={handleError}\nVue:@consoleError="handleError"\nAngular:(consoleError)="handleError()"\nVanillaJs:.addEventListener("consoleError", (event) => {//handle error});',
+                    detail: 'React: onConsoleError={handleChange}\nVue:@consoleError="handleChange"\nAngular:(consoleError)="handleChange()"\nVanillaJs:.addEventListener("consoleError", (event) => {//handle change});',
                 },
             },
         },

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

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

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

@@ -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 CHANGED Viewed

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

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

@@ -10,70 +10,18 @@ export default {
         variant: 'bold',
     },
     argTypes: {
-        label: {
-            name: 'Label of Link',
-            description: 'Sets the label of *<ifx-link>*.',
-            table: {
-                category: 'story controls',
-                type: {
-                    summary: '<ifx-link> `label` </ifx-link>'
-                }
-            }
-        },
-        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 CHANGED Viewed

	@@ -1 +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,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,gCAAgC;iBAC1C;aACF;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: 'Sets the label of <ifx-link>.',\n table: {\n category: 'story controls',\n type: {\n summary: '<ifx-link> `label` </ifx-link>'\n }\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"]}
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"]}

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

@@ -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: '2e30a56c24e83da9626e533bd7d94e94654f7db0' }, h("div", { key: 'c25fdaeb3c889459511e07ad28e234e12c922f0e', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: 'e848e5b455bbb0b1de3a3c9872fbeebdc2c3564c', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'b6b29e07448bcb89743a99500ddf39575be6c613', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'd2b93f5a595b31b836152e7a4543614fde364687', 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: '6a805dc0065c60a17bda86bd7e0bb0d11b7dd805', class: "modal-content" }, h("div", { key: 'ce0104689fd85d0d22b05d41317b01ac99300350', class: "modal-header" }, h("h2", { key: '0b6881c6349e492354f724a3c38a08fb9fd0e1e8', class: "modal-caption" }, this.caption), this.showCloseButton &&
-            h("ifx-icon-button", { key: '901a48d3f331e6e26bf9c7176c9fdcd961feaf58', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: '1082237bf2919a02b278453f8e821b6329dc5155', class: "modal-body" }, h("slot", { key: 'df2b5d4046eb89bf431ca0c28f07a679c910eaf4', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: '0d584811292b33472f9a903d44033914f61a571d', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '6bda292bba71baefbe77b282b0c0b04e9a05ac61', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: '1c78c02a817aeb4a777ca1a35dfe95e77b285d26', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+        return (h(Host, { key: '3893200192cdf819f3e8948ce8d6ebf98fbef221' }, h("div", { key: '213d3d958198aa5409f871ab4b2343c55a751507', ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { key: '8084553c70150a7d7a50498dab588811424f5a3e', class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '34647afb94b66e6a9b228bc6d709b610ef570c58', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: '80e6d955eb222ffee393c28e65c2d4478c3f8d06', 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: '83089df2d673dd6cdfd465e17fa265b72545c4b9', class: "modal-content" }, h("div", { key: '7ef4a6b04b717f10b67e0780e5c6d8215c286fc5', class: "modal-header" }, h("h2", { key: '53646fa326928739c9e46711fc73b819d0e4fe4b', class: "modal-caption" }, this.caption), this.showCloseButton &&
+            h("ifx-icon-button", { key: 'eb8aadd8c35adff6a8f8e8da5aa835971f004078', class: 'modal-close-button', ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { key: 'c3de200d13a612a7067b4e96db09943a00429c30', class: "modal-body" }, h("slot", { key: '82f7e007fabc1564b90ba66d81b86272a25f3636', name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { key: '38187b73c1e4152f9207737b4b06b1a52b94d1ec', class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { key: '123d2035fe63e3d22df34826be23ba6b4b73b9ab', name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { key: 'de980fdcbf75aee294911df411e7e810fdcc414a', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "ifx-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -311,8 +311,8 @@ export class IfxModal {
     }
     static get events() {
         return [{
-                "method": "ifxOpen",
-                "name": "ifxOpen",
+                "method": "ifxModalOpen",
+                "name": "ifxModalOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -326,8 +326,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 CHANGED Viewed

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