npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.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 (1205) hide show

package/dist/collection/components/action-list/action-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-list.stories.js","sourceRoot":"","sources":["../../../src/components/action-list/action-list.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/html';\n\nconst meta: Meta = {\n title: 'Components/Action List',\n //tags: ['autodocs'],\n parameters: {\n controls: { expanded: true },\n docs: {\n description: {\n component: `The action list component provides a flexible container for action items. It displays items in a vertical list layout with support for leading and trailing content slots. Use it for navigation menus, settings lists, or any collection of actionable items.`,\n },\n },\n },\n argTypes: {\n // --- FUNCTION ---\n disabled: {\n control: 'boolean',\n description: 'Controls whether the item is disabled',\n table: { category: 'Function', defaultValue: { summary: 'false' } },\n },\n href: {\n control: 'text',\n description: 'URL to navigate to when item is clicked',\n table: { category: 'Function', defaultValue: { summary: 'undefined' } },\n },\n target: {\n control: 'select',\n options: ['_self', '_blank', '_parent', '_top'],\n description: 'Target for the link navigation',\n table: { category: 'Function', defaultValue: { summary: '_self' } },\n },\n value: {\n control: 'text',\n description: 'Value associated with this item',\n table: { category: 'Function', defaultValue: { summary: 'undefined' } },\n },\n\n // --- CONTENT ---\n itemTitle: {\n control: 'text',\n description: 'The title text displayed in the item',\n table: { category: 'Content', defaultValue: { summary: 'undefined' } },\n },\n description: {\n control: 'text',\n description: 'The description text displayed below the title',\n table: { category: 'Content', defaultValue: { summary: 'undefined' } },\n },\n\n // --- ARIA LABELS ---\n listAriaLabel: {\n control: 'text',\n description: 'Provides an accessible label for the list element',\n table: { category: 'Aria Labels', defaultValue: { summary: 'undefined' } },\n },\n itemAriaLabel: {\n control: 'text',\n description: 'Aria label for accessibility support',\n table: { category: 'Aria Labels', defaultValue: { summary: 'undefined' } },\n },\n\n // --- CUSTOM EVENTS ---\n ifxActionListItemClick: {\n action: 'ifxActionListItemClick',\n table: { category: 'Custom Events' },\n description: 'Event emitted when the main item area is clicked',\n },\n },\n};\n\nexport default meta;\n\nconst BaseTemplate: StoryFn = (args) => {\n const listEl = document.createElement('ifx-action-list');\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\n\n // Create items based on the story requirements\n listEl.innerHTML = `\n <ifx-action-list-item\n item-title=\"${args.itemTitle \|\| 'Dashboard'}\"\n description=\"${args.description \|\| 'View your main dashboard'}\"\n value=\"dashboard\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\n ${args.href ? `href=\"${args.href}\"` : ''}\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\n ${args.disabled ? 'disabled=\"true\"' : ''}>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Settings\"\n value=\"settings\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Profile\"\n description=\"Manage your profile information\"\n value=\"profile\"\n disabled=\"true\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Advanced Analytics and Reporting Dashboard with Extended Functionality\"\n description=\"This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics.\"\n value=\"analytics\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n `;\n\n listEl.addEventListener('ifxActionListItemClick', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxActionListItemClick')({\n value: customEvent.detail.value,\n href: customEvent.detail.href,\n target: customEvent.detail.target,\n disabled: customEvent.detail.disabled\n });\n });\n\n return listEl;\n};\n\nexport const Default = BaseTemplate.bind({});\nDefault.args = {\n listAriaLabel: 'Navigation menu',\n itemTitle: 'Dashboard',\n description: 'View your main dashboard',\n disabled: false,\n itemAriaLabel: 'Navigation item',\n};\n\nexport const InteractiveCheckbox: StoryFn = (args) => {\n const listEl = document.createElement('ifx-action-list');\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\n\n // Create items based on the story requirements\n listEl.innerHTML = `\n <ifx-action-list-item\n item-title=\"${args.itemTitle \|\| 'Enable notifications'}\"\n description=\"${args.description \|\| 'Receive notifications for important updates'}\"\n value=\"notifications\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\n ${args.href ? `href=\"${args.href}\"` : ''}\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\n ${args.disabled ? 'disabled=\"true\"' : ''}>\n <ifx-checkbox slot=\"leading\" checked=\"true\"></ifx-checkbox>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Auto-save documents\"\n description=\"Automatically save your work\"\n value=\"autosave\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-checkbox slot=\"leading\" checked=\"false\"></ifx-checkbox>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Enable backups\"\n description=\"Create automatic backups\"\n value=\"backups\"\n disabled=\"true\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-checkbox slot=\"leading\" checked=\"false\"></ifx-checkbox>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Show advanced options\"\n value=\"advanced\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-checkbox slot=\"leading\" checked=\"true\"></ifx-checkbox>\n </ifx-action-list-item>\n `;\n\n listEl.addEventListener('ifxActionListItemClick', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxActionListItemClick')({\n value: customEvent.detail.value,\n href: customEvent.detail.href,\n target: customEvent.detail.target,\n disabled: customEvent.detail.disabled\n });\n });\n\n return listEl;\n};\n\nInteractiveCheckbox.args = {\n listAriaLabel: 'Interactive list with checkboxes',\n itemTitle: 'Enable notifications',\n description: 'Receive notifications for important updates',\n disabled: false,\n itemAriaLabel: 'Interactive item',\n};\n\nInteractiveCheckbox.storyName = 'Interactive (with checkbox)';\n\nexport const InteractiveSwitch: StoryFn = (args) => {\n const listEl = document.createElement('ifx-action-list');\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\n\n // Create items based on the story requirements\n listEl.innerHTML = `\n <ifx-action-list-item\n item-title=\"${args.itemTitle \|\| 'Enable dark mode'}\"\n description=\"${args.description \|\| 'Toggle dark mode for the interface'}\"\n value=\"darkmode\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\n ${args.href ? `href=\"${args.href}\"` : ''}\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\n ${args.disabled ? 'disabled=\"true\"' : ''}>\n <ifx-switch slot=\"leading\" checked=\"false\"></ifx-switch>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Auto-sync data\"\n description=\"Automatically synchronize your data\"\n value=\"autosync\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-switch slot=\"leading\" checked=\"true\"></ifx-switch>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Enable analytics\"\n description=\"Collect usage analytics\"\n value=\"analytics\"\n disabled=\"true\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-switch slot=\"leading\" checked=\"false\"></ifx-switch>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Performance mode\"\n value=\"performance\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-switch slot=\"leading\" checked=\"true\"></ifx-switch>\n </ifx-action-list-item>\n `;\n\n listEl.addEventListener('ifxActionListItemClick', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxActionListItemClick')({\n value: customEvent.detail.value,\n href: customEvent.detail.href,\n target: customEvent.detail.target,\n disabled: customEvent.detail.disabled\n });\n });\n\n return listEl;\n};\n\nInteractiveSwitch.args = {\n listAriaLabel: 'Interactive list with switches',\n itemTitle: 'Enable dark mode',\n description: 'Toggle dark mode for the interface',\n disabled: false,\n itemAriaLabel: 'Interactive item',\n};\n\nInteractiveSwitch.storyName = 'Interactive (with switch)';\n\nexport const WithIcons: StoryFn = (args) => {\n const listEl = document.createElement('ifx-action-list');\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\n\n listEl.innerHTML = `\n <ifx-action-list-item\n item-title=\"${args.itemTitle \|\| 'Dashboard'}\"\n description=\"${args.description \|\| 'View your main dashboard'}\"\n value=\"dashboard\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\n ${args.href ? `href=\"${args.href}\"` : ''}\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\n ${args.disabled ? 'disabled=\"true\"' : ''}>\n <ifx-icon slot=\"leading\" icon=\"home-16\"></ifx-icon>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Settings\"\n value=\"settings\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-icon slot=\"leading\" icon=\"server-16\"></ifx-icon>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Profile\"\n description=\"Manage your profile information\"\n value=\"profile\"\n disabled=\"true\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-icon slot=\"leading\" icon=\"user-16\"></ifx-icon>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Enterprise Resource Planning and Business Intelligence System\"\n description=\"Comprehensive enterprise solution that integrates all aspects of business operations including financial management and human resources.\"\n value=\"erp\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <ifx-icon slot=\"leading\" icon=\"chart-16\"></ifx-icon>\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n `;\n\n listEl.addEventListener('ifxActionListItemClick', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxActionListItemClick')({\n value: customEvent.detail.value,\n href: customEvent.detail.href,\n target: customEvent.detail.target,\n disabled: customEvent.detail.disabled\n });\n });\n\n return listEl;\n};\n\nWithIcons.args = {\n listAriaLabel: 'Navigation with icons',\n itemTitle: 'Dashboard',\n description: 'View your main dashboard',\n itemAriaLabel: 'Navigation item',\n disabled: false,\n};\n\nWithIcons.storyName = 'With Icons';\n\nexport const WithImages: StoryFn = (args) => {\n const listEl = document.createElement('ifx-action-list');\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\n\n listEl.innerHTML = `\n <ifx-action-list-item\n item-title=\"${args.itemTitle \|\| 'John Doe'}\"\n description=\"${args.description \|\| 'Senior Developer'}\"\n value=\"john\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\n ${args.href ? `href=\"${args.href}\"` : ''}\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\n ${args.disabled ? 'disabled=\"true\"' : ''}>\n <img slot=\"leading\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC\" alt=\"User avatar\" style=\"width: 100%; max-width: 40px; height: auto;\">\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Jane Smith\"\n description=\"UI/UX Designer\"\n value=\"jane\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <img slot=\"leading\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC\" alt=\"User avatar\" style=\"width: 100%; max-width: 40px; height: auto;\">\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n\n <ifx-action-list-item\n item-title=\"Mike Johnson\"\n description=\"Product Manager\"\n value=\"mike\"\n disabled=\"true\"\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\n <img slot=\"leading\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC\" alt=\"User avatar\" style=\"width: 100%; max-width: 40px; height: auto;\">\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\n </ifx-action-list-item>\n `;\n\n listEl.addEventListener('ifxActionListItemClick', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxActionListItemClick')({\n value: customEvent.detail.value,\n href: customEvent.detail.href,\n target: customEvent.detail.target,\n disabled: customEvent.detail.disabled\n });\n });\n\n return listEl;\n};\n\nWithImages.args = {\n listAriaLabel: 'Team members',\n itemTitle: 'John Doe',\n description: 'Senior Developer',\n itemAriaLabel: 'Team member',\n disabled: false,\n};\n\nWithImages.storyName = 'With Images';"]}
1	+ {"version":3,"file":"action-list.stories.js","sourceRoot":"","sources":["../../../src/components/action-list/action-list.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport type { Meta, StoryFn } from '@storybook/html';\r\n\r\nconst meta: Meta = {\r\n title: 'Components/Action List',\r\n //tags: ['autodocs'],\r\n parameters: {\r\n controls: { expanded: true },\r\n docs: {\r\n description: {\r\n component: `The action list component provides a flexible container for action items. It displays items in a vertical list layout with support for leading and trailing content slots. Use it for navigation menus, settings lists, or any collection of actionable items.`,\r\n },\r\n },\r\n },\r\n argTypes: {\r\n // --- FUNCTION ---\r\n disabled: {\r\n control: 'boolean',\r\n description: 'Controls whether the item is disabled',\r\n table: { category: 'Function', defaultValue: { summary: 'false' } },\r\n },\r\n href: {\r\n control: 'text',\r\n description: 'URL to navigate to when item is clicked',\r\n table: { category: 'Function', defaultValue: { summary: 'undefined' } },\r\n },\r\n target: {\r\n control: 'select',\r\n options: ['_self', '_blank', '_parent', '_top'],\r\n description: 'Target for the link navigation',\r\n table: { category: 'Function', defaultValue: { summary: '_self' } },\r\n },\r\n value: {\r\n control: 'text',\r\n description: 'Value associated with this item',\r\n table: { category: 'Function', defaultValue: { summary: 'undefined' } },\r\n },\r\n\r\n // --- CONTENT ---\r\n itemTitle: {\r\n control: 'text',\r\n description: 'The title text displayed in the item',\r\n table: { category: 'Content', defaultValue: { summary: 'undefined' } },\r\n },\r\n description: {\r\n control: 'text',\r\n description: 'The description text displayed below the title',\r\n table: { category: 'Content', defaultValue: { summary: 'undefined' } },\r\n },\r\n\r\n // --- ARIA LABELS ---\r\n listAriaLabel: {\r\n control: 'text',\r\n description: 'Provides an accessible label for the list element',\r\n table: { category: 'Aria Labels', defaultValue: { summary: 'undefined' } },\r\n },\r\n itemAriaLabel: {\r\n control: 'text',\r\n description: 'Aria label for accessibility support',\r\n table: { category: 'Aria Labels', defaultValue: { summary: 'undefined' } },\r\n },\r\n\r\n // --- CUSTOM EVENTS ---\r\n ifxActionListItemClick: {\r\n action: 'ifxActionListItemClick',\r\n table: { category: 'Custom Events' },\r\n description: 'Event emitted when the main item area is clicked',\r\n },\r\n },\r\n};\r\n\r\nexport default meta;\r\n\r\nconst BaseTemplate: StoryFn = (args) => {\r\n const listEl = document.createElement('ifx-action-list');\r\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\r\n\r\n // Create items based on the story requirements\r\n listEl.innerHTML = `\r\n <ifx-action-list-item\r\n item-title=\"${args.itemTitle \|\| 'Dashboard'}\"\r\n description=\"${args.description \|\| 'View your main dashboard'}\"\r\n value=\"dashboard\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\r\n ${args.href ? `href=\"${args.href}\"` : ''}\r\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\r\n ${args.disabled ? 'disabled=\"true\"' : ''}>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Settings\"\r\n value=\"settings\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Profile\"\r\n description=\"Manage your profile information\"\r\n value=\"profile\"\r\n disabled=\"true\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Advanced Analytics and Reporting Dashboard with Extended Functionality\"\r\n description=\"This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics.\"\r\n value=\"analytics\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n `;\r\n\r\n listEl.addEventListener('ifxActionListItemClick', (event) => {\r\n const customEvent = event as CustomEvent;\r\n action('ifxActionListItemClick')({\r\n value: customEvent.detail.value,\r\n href: customEvent.detail.href,\r\n target: customEvent.detail.target,\r\n disabled: customEvent.detail.disabled\r\n });\r\n });\r\n\r\n return listEl;\r\n};\r\n\r\nexport const Default = BaseTemplate.bind({});\r\nDefault.args = {\r\n listAriaLabel: 'Navigation menu',\r\n itemTitle: 'Dashboard',\r\n description: 'View your main dashboard',\r\n disabled: false,\r\n itemAriaLabel: 'Navigation item',\r\n};\r\n\r\nexport const InteractiveCheckbox: StoryFn = (args) => {\r\n const listEl = document.createElement('ifx-action-list');\r\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\r\n\r\n // Create items based on the story requirements\r\n listEl.innerHTML = `\r\n <ifx-action-list-item\r\n item-title=\"${args.itemTitle \|\| 'Enable notifications'}\"\r\n description=\"${args.description \|\| 'Receive notifications for important updates'}\"\r\n value=\"notifications\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\r\n ${args.href ? `href=\"${args.href}\"` : ''}\r\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\r\n ${args.disabled ? 'disabled=\"true\"' : ''}>\r\n <ifx-checkbox slot=\"leading\" checked=\"true\"></ifx-checkbox>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Auto-save documents\"\r\n description=\"Automatically save your work\"\r\n value=\"autosave\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-checkbox slot=\"leading\" checked=\"false\"></ifx-checkbox>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Enable backups\"\r\n description=\"Create automatic backups\"\r\n value=\"backups\"\r\n disabled=\"true\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-checkbox slot=\"leading\" checked=\"false\"></ifx-checkbox>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Show advanced options\"\r\n value=\"advanced\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-checkbox slot=\"leading\" checked=\"true\"></ifx-checkbox>\r\n </ifx-action-list-item>\r\n `;\r\n\r\n listEl.addEventListener('ifxActionListItemClick', (event) => {\r\n const customEvent = event as CustomEvent;\r\n action('ifxActionListItemClick')({\r\n value: customEvent.detail.value,\r\n href: customEvent.detail.href,\r\n target: customEvent.detail.target,\r\n disabled: customEvent.detail.disabled\r\n });\r\n });\r\n\r\n return listEl;\r\n};\r\n\r\nInteractiveCheckbox.args = {\r\n listAriaLabel: 'Interactive list with checkboxes',\r\n itemTitle: 'Enable notifications',\r\n description: 'Receive notifications for important updates',\r\n disabled: false,\r\n itemAriaLabel: 'Interactive item',\r\n};\r\n\r\nInteractiveCheckbox.storyName = 'Interactive (with checkbox)';\r\n\r\nexport const InteractiveSwitch: StoryFn = (args) => {\r\n const listEl = document.createElement('ifx-action-list');\r\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\r\n\r\n // Create items based on the story requirements\r\n listEl.innerHTML = `\r\n <ifx-action-list-item\r\n item-title=\"${args.itemTitle \|\| 'Enable dark mode'}\"\r\n description=\"${args.description \|\| 'Toggle dark mode for the interface'}\"\r\n value=\"darkmode\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\r\n ${args.href ? `href=\"${args.href}\"` : ''}\r\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\r\n ${args.disabled ? 'disabled=\"true\"' : ''}>\r\n <ifx-switch slot=\"leading\" checked=\"false\"></ifx-switch>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Auto-sync data\"\r\n description=\"Automatically synchronize your data\"\r\n value=\"autosync\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-switch slot=\"leading\" checked=\"true\"></ifx-switch>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Enable analytics\"\r\n description=\"Collect usage analytics\"\r\n value=\"analytics\"\r\n disabled=\"true\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-switch slot=\"leading\" checked=\"false\"></ifx-switch>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Performance mode\"\r\n value=\"performance\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-switch slot=\"leading\" checked=\"true\"></ifx-switch>\r\n </ifx-action-list-item>\r\n `;\r\n\r\n listEl.addEventListener('ifxActionListItemClick', (event) => {\r\n const customEvent = event as CustomEvent;\r\n action('ifxActionListItemClick')({\r\n value: customEvent.detail.value,\r\n href: customEvent.detail.href,\r\n target: customEvent.detail.target,\r\n disabled: customEvent.detail.disabled\r\n });\r\n });\r\n\r\n return listEl;\r\n};\r\n\r\nInteractiveSwitch.args = {\r\n listAriaLabel: 'Interactive list with switches',\r\n itemTitle: 'Enable dark mode',\r\n description: 'Toggle dark mode for the interface',\r\n disabled: false,\r\n itemAriaLabel: 'Interactive item',\r\n};\r\n\r\nInteractiveSwitch.storyName = 'Interactive (with switch)';\r\n\r\nexport const WithIcons: StoryFn = (args) => {\r\n const listEl = document.createElement('ifx-action-list');\r\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\r\n\r\n listEl.innerHTML = `\r\n <ifx-action-list-item\r\n item-title=\"${args.itemTitle \|\| 'Dashboard'}\"\r\n description=\"${args.description \|\| 'View your main dashboard'}\"\r\n value=\"dashboard\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\r\n ${args.href ? `href=\"${args.href}\"` : ''}\r\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\r\n ${args.disabled ? 'disabled=\"true\"' : ''}>\r\n <ifx-icon slot=\"leading\" icon=\"home-16\"></ifx-icon>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Settings\"\r\n value=\"settings\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-icon slot=\"leading\" icon=\"server-16\"></ifx-icon>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Profile\"\r\n description=\"Manage your profile information\"\r\n value=\"profile\"\r\n disabled=\"true\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-icon slot=\"leading\" icon=\"user-16\"></ifx-icon>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Enterprise Resource Planning and Business Intelligence System\"\r\n description=\"Comprehensive enterprise solution that integrates all aspects of business operations including financial management and human resources.\"\r\n value=\"erp\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <ifx-icon slot=\"leading\" icon=\"chart-16\"></ifx-icon>\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n `;\r\n\r\n listEl.addEventListener('ifxActionListItemClick', (event) => {\r\n const customEvent = event as CustomEvent;\r\n action('ifxActionListItemClick')({\r\n value: customEvent.detail.value,\r\n href: customEvent.detail.href,\r\n target: customEvent.detail.target,\r\n disabled: customEvent.detail.disabled\r\n });\r\n });\r\n\r\n return listEl;\r\n};\r\n\r\nWithIcons.args = {\r\n listAriaLabel: 'Navigation with icons',\r\n itemTitle: 'Dashboard',\r\n description: 'View your main dashboard',\r\n itemAriaLabel: 'Navigation item',\r\n disabled: false,\r\n};\r\n\r\nWithIcons.storyName = 'With Icons';\r\n\r\nexport const WithImages: StoryFn = (args) => {\r\n const listEl = document.createElement('ifx-action-list');\r\n if (args.listAriaLabel) listEl.setAttribute('list-aria-label', args.listAriaLabel);\r\n\r\n listEl.innerHTML = `\r\n <ifx-action-list-item\r\n item-title=\"${args.itemTitle \|\| 'John Doe'}\"\r\n description=\"${args.description \|\| 'Senior Developer'}\"\r\n value=\"john\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}\r\n ${args.href ? `href=\"${args.href}\"` : ''}\r\n ${args.target && args.target !== '_self' ? `target=\"${args.target}\"` : ''}\r\n ${args.disabled ? 'disabled=\"true\"' : ''}>\r\n <img slot=\"leading\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC\" alt=\"User avatar\" style=\"width: 100%; max-width: 40px; height: auto;\">\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Jane Smith\"\r\n description=\"UI/UX Designer\"\r\n value=\"jane\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <img slot=\"leading\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC\" alt=\"User avatar\" style=\"width: 100%; max-width: 40px; height: auto;\">\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n\r\n <ifx-action-list-item\r\n item-title=\"Mike Johnson\"\r\n description=\"Product Manager\"\r\n value=\"mike\"\r\n disabled=\"true\"\r\n ${args.itemAriaLabel ? `item-aria-label=\"${args.itemAriaLabel}\"` : ''}>\r\n <img slot=\"leading\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALFSURBVHgB7dy/SxthHMfxr6W9LJel6VAdagoaQXMQSaE4COnYQTr4p7bQVSi0FAxKUwTFwS5Jh8YlWXKLfb5PfDS9pP76nM9zgc97OSLxwBfPr1zAhfN+/0LYg3siDIqAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoIREIyAYAQEeyoBOmi35ehnR9LRSPIoKpVkpbYmb7e2xHfeAb9/+ypHnY75g2sSl8uSR8PBwNzzh0RRJJvNpvjMO+Dp8YnF2269k7xTRN+A3tfANB3lNvIm03umaSq+C7IGzqrX7crvXleeVyqyXH0t81IhAL/s7cnpyfHVa90QtlstmYeCA/46O7N4m8030jDr12F73+7Sq2adfLm0JEUv+DnwvP/HXhuXi3/DQGo9M53noeCAi4vjUaajbnzdt9dK5cXUe/M6N+ZZ8Cms01TXPJ26h5d4q+b1q2r1n/fpWe/zp4/2vb6PKjdViE1EN4xlA9Y301lHZHbtc3jpKL1CLgpiYY4xOuKyo05zeHIh8mF31244BwVCLAzgrCbx3u/s2MOy22SKghgcUJH0KLORJFM/z+K5ioQYFNAh6VU/hjmIm/BcWcRQBQOcRNLRd70D127Fc00iPsbn67sUBHA4GE4h6aMohdDnhNGz6FY81zViW0IU5CBtP/dmRphC6BS+D55Lf1cfkYUoyAiM4/JMJIVYryf2CfO97xloCgcZgStr/38a/RC8kPFLJTDvgFFUsptI3uk9dSPynfc1cD2pmyPLeMeMy7HkkeLpxrRRT8R33gH1wakemvXLJf1+JI90VOsO7o40Plvg/0zA4iYCRkAwAoIREIyAYAQEIyAYAcEICEZAMAKCERCMgGAEBCMgGAHBCAhGQDACghEQjIBgBAQjIBgBwQgIRkAwAoL9BS7b7t2PtL1XAAAAAElFTkSuQmCC\" alt=\"User avatar\" style=\"width: 100%; max-width: 40px; height: auto;\">\r\n <ifx-icon slot=\"trailing\" icon=\"chevron-right-16\"></ifx-icon>\r\n </ifx-action-list-item>\r\n `;\r\n\r\n listEl.addEventListener('ifxActionListItemClick', (event) => {\r\n const customEvent = event as CustomEvent;\r\n action('ifxActionListItemClick')({\r\n value: customEvent.detail.value,\r\n href: customEvent.detail.href,\r\n target: customEvent.detail.target,\r\n disabled: customEvent.detail.disabled\r\n });\r\n });\r\n\r\n return listEl;\r\n};\r\n\r\nWithImages.args = {\r\n listAriaLabel: 'Team members',\r\n itemTitle: 'John Doe',\r\n description: 'Senior Developer',\r\n itemAriaLabel: 'Team member',\r\n disabled: false,\r\n};\r\n\r\nWithImages.storyName = 'With Images';"]}

package/dist/collection/components/alert/alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert {\n @Element() el: HTMLElement;\n @Prop() variant: 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' = 'primary';\n @Prop() icon: string;\n @Event() ifxClose: EventEmitter;\n @Prop() closable: boolean = true;\n @Prop() AriaLive = 'assertive';\n @State() uniqueId: string;\n\n alertTypeDescription = {\n \"primary\": 'Neutral alert',\n \"success\": 'Success Alert',\n \"danger\": 'Error Alert',\n \"warning\": 'Warning Alert',\n \"info\": 'Neutral alert',\n };\n\n handleClose() {\n this.ifxClose.emit();\n }\n\n renderCloseButton() {\n return (\n <div class=\"close-icon-wrapper\">\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n <ifx-icon icon=\"cross-16\" />\n </button>\n </div>\n );\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('alert');\n }\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) {\n const framework = await detectFramework();\n trackComponent('ifx-alert', framework);\n }\n }\n\n render() {\n return this.variant === 'info' ? (\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n <div class=\"info__text-wrapper\">\n <div class=\"info__headline-wrapper\">\n <slot name=\"headline\" />\n </div>\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n <slot name=\"desc\" />\n </div>\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n ) : (\n <div class={`alert ${this.variant}`} role=\"alert\">\n {this.icon && (\n <div class=\"icon-wrapper\">\n <ifx-icon icon={this.icon} />\n </div>\n )}\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n <slot />\n </div>\n {this.closable ? this.renderCloseButton() : null}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-alert',\r\n styleUrl: 'alert.scss',\r\n shadow: true,\r\n})\r\nexport class Alert {\r\n @Element() el: HTMLElement;\r\n @Prop() variant: 'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' = 'primary';\r\n @Prop() icon: string;\r\n @Event() ifxClose: EventEmitter;\r\n @Prop() closable: boolean = true;\r\n @Prop() AriaLive = 'assertive';\r\n @State() uniqueId: string;\r\n\r\n alertTypeDescription = {\r\n \"primary\": 'Neutral alert',\r\n \"success\": 'Success Alert',\r\n \"danger\": 'Error Alert',\r\n \"warning\": 'Warning Alert',\r\n \"info\": 'Neutral alert',\r\n };\r\n\r\n handleClose() {\r\n this.ifxClose.emit();\r\n }\r\n\r\n renderCloseButton() {\r\n return (\r\n <div class=\"close-icon-wrapper\">\r\n <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\r\n <ifx-icon icon=\"cross-16\" />\r\n </button>\r\n </div>\r\n );\r\n }\r\n\r\n generateUniqueId(prefix = 'id') {\r\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n }\r\n\r\n componentWillLoad() { \r\n if (!this.uniqueId) {\r\n this.uniqueId = this.generateUniqueId('alert');\r\n }\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) {\r\n const framework = await detectFramework();\r\n trackComponent('ifx-alert', framework);\r\n }\r\n }\r\n\r\n render() {\r\n return this.variant === 'info' ? (\r\n <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\r\n <div class=\"info__text-wrapper\">\r\n <div class=\"info__headline-wrapper\">\r\n <slot name=\"headline\" />\r\n </div>\r\n <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\r\n <slot name=\"desc\" />\r\n </div>\r\n </div>\r\n {this.closable ? this.renderCloseButton() : null}\r\n </div>\r\n ) : (\r\n <div class={`alert ${this.variant}`} role=\"alert\">\r\n {this.icon && (\r\n <div class=\"icon-wrapper\">\r\n <ifx-icon icon={this.icon} />\r\n </div>\r\n )}\r\n <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\r\n <slot />\r\n </div>\r\n {this.closable ? this.renderCloseButton() : null}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -75,11 +75,11 @@ export default {
 };
 const DefaultTemplate = args => `<ifx-alert aria-live="${args.AriaLive}" variant="${args.variant}" icon="${args.icon === 'none' ? '' : args.icon}" closable="${args.closable}">${args.label}</ifx-alert>`;
 export const Default = DefaultTemplate.bind({});
-const InfoTemplate = args => `  <ifx-alert variant="info" closable="${args.closable}">
-      <div slot="headline">Headline</div>
-      <div slot="desc">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.
-      </div>
+const InfoTemplate = args => `  <ifx-alert variant="info" closable="${args.closable}">
+      <div slot="headline">Headline</div>
+      <div slot="desc">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.
+      </div>
     </ifx-alert>`;
 export const Info = InfoTemplate.bind({});
 Info.argTypes = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,WAAW;KACtB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,gBAAgB;YACtB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACpD,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QAED,IAAI,EAAE;YACJ,WAAW,EAAE,iEAAiE;YAC9E,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,QAAQ;YACjB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,sDAAsD;YACnE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6KAA6K;iBAChL;aACF;SACF;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC;YACvC,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;AAE1M,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAC1B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;IACd,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Alert',\n tags: ['autodocs'],\n\n args: {\n label: 'Attention! This is an alert message — check it out!',\n variant: 'primary',\n closable: true,\n icon: 'c-info-16',\n AriaLive: 'assertive',\n },\n\n argTypes: {\n label: {\n name: 'Label of Alert',\n description: 'Sets the label of <ifx-alert>.',\n table: {\n category: 'story controls'\n }\n },\n variant: {\n description: 'Sets the style variant of the alert.',\n options: ['primary', 'success', 'danger', 'warning'],\n control: 'radio',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'primary'\n }\n }\n },\n\n icon: {\n description: 'The icon to be displayed. Choose *none* to display no icon.',\n options: Object.keys(icons),\n control: 'select',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n },\n closable: {\n description: 'Defines whether the alert should be closable or not.',\n control: 'boolean',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'true'\n }\n }\n },\n\n ifxClose: {\n action: 'ifxClose',\n description: 'Custom event emitted when close button clicked.',\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 AriaLive: { \n options: ['off', 'polite', 'assertive'],\n control: 'radio',\n description: 'The aria-live attribute to indicate a dynamic content.',\n table: {\n category: 'ifx-alert props',\n defaultValue: {\n summary: 'assertive'\n }\n }\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst InfoTemplate = args =>\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\n <div slot=\"headline\">Headline</div>\n <div slot=\"desc\">\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\n </div>\n </ifx-alert>`;\n\nexport const Info = InfoTemplate.bind({});\nInfo.argTypes = {\n variant: {\n table: {\n disable: true,\n },\n },\n icon: {\n table: {\n disable: true,\n },\n },\n showIcon: {\n table: {\n disable: true,\n },\n },\n};\n"]}
1	+ {"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qDAAqD;QAC5D,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,WAAW;KACtB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,gBAAgB;YACtB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACpD,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QAED,IAAI,EAAE;YACJ,WAAW,EAAE,iEAAiE;YAC9E,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,QAAQ;YACjB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,sDAAsD;YACnE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;QAED,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,6KAA6K;iBAChL;aACF;SACF;QAED,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC;YACvC,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,QAAQ,EAAE,iBAAiB;gBAC3B,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,cAAc,CAAC;AAE1M,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAC1B,yCAAyC,IAAI,CAAC,QAAQ;;;;;iBAKvC,CAAC;AAElB,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,IAAI,CAAC,QAAQ,GAAG;IACd,OAAO,EAAE;QACP,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;SACd;KACF;CACF,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Alert',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'Attention! This is an alert message — check it out!',\r\n variant: 'primary',\r\n closable: true,\r\n icon: 'c-info-16',\r\n AriaLive: 'assertive',\r\n },\r\n\r\n argTypes: {\r\n label: {\r\n name: 'Label of Alert',\r\n description: 'Sets the label of <ifx-alert>.',\r\n table: {\r\n category: 'story controls'\r\n }\r\n },\r\n variant: {\r\n description: 'Sets the style variant of the alert.',\r\n options: ['primary', 'success', 'danger', 'warning'],\r\n control: 'radio',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'primary'\r\n }\r\n }\r\n },\r\n\r\n icon: {\r\n description: 'The icon to be displayed. Choose *none* to display no icon.',\r\n options: Object.keys(icons),\r\n control: 'select',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'c-info-16'\r\n }\r\n }\r\n },\r\n closable: {\r\n description: 'Defines whether the alert should be closable or not.',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'true'\r\n }\r\n }\r\n },\r\n\r\n ifxClose: {\r\n action: 'ifxClose',\r\n description: 'Custom event emitted when close button clicked.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\r\n },\r\n },\r\n },\r\n\r\n AriaLive: { \r\n options: ['off', 'polite', 'assertive'],\r\n control: 'radio',\r\n description: 'The aria-live attribute to indicate a dynamic content.',\r\n table: {\r\n category: 'ifx-alert props',\r\n defaultValue: {\r\n summary: 'assertive'\r\n }\r\n }\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args => `<ifx-alert aria-live=\"${args.AriaLive}\" variant=\"${args.variant}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" closable=\"${args.closable}\">${args.label}</ifx-alert>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n\r\nconst InfoTemplate = args =>\r\n ` <ifx-alert variant=\"info\" closable=\"${args.closable}\">\r\n <div slot=\"headline\">Headline</div>\r\n <div slot=\"desc\">\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi animi voluptatum quia esse dolor corrupti veniam dolorum. Voluptatem ut enim voluptate. Provident modi molestiae at atque rerum cupiditate, dicta recusandae ab libero veniam iusto possimus quia sequi amet, tempora dolore nobis excepturi est illo blanditiis nihil laborum enim ducimus consequuntur.\r\n </div>\r\n </ifx-alert>`;\r\n\r\nexport const Info = InfoTemplate.bind({});\r\nInfo.argTypes = {\r\n variant: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n icon: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n showIcon: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n};\r\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class BreadcrumbItemLabel {
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (h("a", { key: '7e5dbe02aa52451f7a5d972635efe4a43ecb1f6c', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: 'f441ce13b8c16b94511f75d18de8296e7c6b468e', icon: this.icon, "aria-hidden": "true" }), h("span", { key: 'cbeb92d41edb4ba9d7a2c44b1d024eb41f6344e8', class: "label-wrapper" }, h("slot", { key: '8e5d86e84c1005ec8cf4ec1066d4c33a72f848e2' })), h("span", { key: 'b2f401a1ee8c6a5f792c42a06f3a5534773c8158', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: 'e93b04e4fa9f8b916eb11be53f613668808dce5f', icon: "chevron-down-16" }))));
+        return (h("a", { key: '0df8c85ff6842301df2c75f00ced6a0d0ab09fe8', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: '64622dca43720e5e648716eda0e2e82b41e3c05a', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '303111b07a09ad6cacd0543886a30c870b5c954a', class: "label-wrapper" }, h("slot", { key: '6d1ffb7974ff5b99cd683a7ba7bdc843801c49fc' })), h("span", { key: '2dc0bf3fecba920428d7070c0c7f21a9642d203c', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: '13b8fe74cad022079aade7c495d69e9cd3935aac', icon: "chevron-down-16" }))));
     }
     static get is() { return "ifx-breadcrumb-item-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb-item-label.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,mBAAmB;IALhC;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"breadcrumb-item-label.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,mBAAmB;IALhC;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb-item-label',\r\n styleUrl: 'breadcrumb-item-label.scss',\r\n shadow: true,\r\n})\r\nexport class BreadcrumbItemLabel {\r\n @Prop() icon: string;\r\n @Prop() href: string;\r\n @Prop() target: string = \"_self\"\r\n @Element() el;\r\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\r\n\r\n componentDidLoad() { \r\n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\r\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\r\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\r\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\r\n <span class=\"label-wrapper\">\r\n <slot />\r\n </span>\r\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\r\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\r\n </span>\r\n </a>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item.js CHANGED Viewed

@@ -95,7 +95,7 @@ export class BreadcrumbItem {
         }
     }
     render() {
-        return (h("li", { key: 'a089ea29fc59af41abc50c33749e5ae1b10ca676', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, h("li", { key: 'f4b3fb7d67b7dee11607194a6193cd55f3f80963', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, h("slot", { key: '5b6b54e8d95d2378e12a4ce891a1ce3c0ab4fa57', name: 'label' }), h("div", { key: '073d8a8be471e4b7fc2e9082026a19ada1c30d17', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: 'e40bed7c7686a96ffaf6b560b32215c5dd65e26b' }))), !this.isLastItem && h("span", { key: '1b992e7d60c09a445146be12f0cc06aa7ef40dc0', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
+        return (h("li", { key: '0ee6ed799adc858ad01d1b2d9460eafc1e613fd2', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, h("li", { key: 'dd4a8bb50869e19a9eadc468096e4b12728c0e27', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, h("slot", { key: 'ec4d8d34298aeb16be0083a993836bb4b8faf9f8', name: 'label' }), h("div", { key: '8ed7c0e83f3ebea4d64f27d86a05e41f33317e6e', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: '53a60855930e991a71d88d39e9bda3ffcd8d7b8a' }))), !this.isLastItem && h("span", { key: '4bebb7c1c4756010812fa11ceb786b05aac97d31', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
     }
     static get is() { return "ifx-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOrE,MAAM,OAAO,cAAc;IAL3B;QAOW,eAAU,GAAY,KAAK,CAAC;QAI5B,oBAAe,GAAY,KAAK,CAAC;KA0H3C;IAvHC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACzC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;aAAM,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,eAAe;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACxE,OAAO,YAAY,CAAA;IACrB,CAAC;IAGD,yBAAyB,CAAC,KAA+B;QACvD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;IACrC,CAAC;IAED,kBAAkB;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QACrD,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YACxB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QACrD,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAC3C,OAAO,IAAI,CAAC,eAAe,IAAI,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IACxF,CAAC;IAED,cAAc;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAA;QACjG,IAAG,IAAI,CAAC,EAAE,KAAK,eAAe,CAAC,eAAe,CAAC,MAAM,GAAC,CAAC,CAAC,EAAE,CAAC;YACzD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;;YAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IACjC,CAAC;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACnE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAA;IAChC,CAAC;IAED,uBAAuB;QACrB,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACxD,IAAG,YAAY,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,YAAY,CAAC;QACxC,CAAC;IACH,CAAC;IAED,2BAA2B;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAChE,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QAExD,IAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAClD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC1D,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,2DAAI,KAAK,EAAC,mBAAmB,kBAAe,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7E,2DAAI,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,mBAAgB,MAAM,gBAAY,sBAAsB;gBACjN,6DAAM,IAAI,EAAC,OAAO,GAAE;gBACpB,4DAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,kBAAkB,EAAE,gBAAa,eAAe;oBAChH,8DAAQ,CACJ,CACH;YACJ,CAAC,IAAI,CAAC,UAAU,IAAI,6DAAM,KAAK,EAAC,oBAAoB,iBAAa,MAAM,QAAS,CAC9E,CACN,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb-item',\r\n styleUrl: 'breadcrumb-item.scss',\r\n shadow: true,\r\n})\r\nexport class BreadcrumbItem {\r\n\r\n @State() isLastItem: boolean = false;\r\n @Element() el;\r\n private emittedElement: HTMLElement;\r\n @State() uniqueId: string;\r\n @State() hasDropdownMenu: boolean = false;\r\n\r\n @Listen('mousedown', { target: 'document' })\r\n handleOutsideClick(event: MouseEvent) {\r\n const path = event.composedPath();\r\n if (!path.includes(this.el)) {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\r\n this.toggleDropdownMenu();\r\n } else if (ev.key === 'Escape') {\r\n this.closeDropdownMenu();\r\n }\r\n }\r\n\r\n getDropdownMenu() {\r\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\r\n return dropdownMenu\r\n }\r\n\r\n @Listen('breadcrumbMenuIconWrapper')\r\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \r\n this.emittedElement = event.detail;\r\n }\r\n\r\n getMenuIconWrapper(): HTMLElement \| undefined {\r\n return this.emittedElement;\r\n }\r\n\r\n handleClassList(el, type, className) {\r\n el.classList[type](className)\r\n }\r\n\r\n closeDropdownMenu() {\r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'remove', 'open')\r\n this.handleClassList(menuWrapper, 'remove', 'show')\r\n }\r\n }\r\n\r\n toggleDropdownMenu() { \r\n if(this.hasDropdownMenu) {\r\n const dropdownMenu = this.getDropdownMenu()\r\n const menuWrapper = this.getMenuIconWrapper()\r\n this.handleClassList(dropdownMenu, 'toggle', 'open')\r\n this.handleClassList(menuWrapper, 'toggle', 'show')\r\n }\r\n }\r\n\r\n isDropdownMenuOpen(): boolean {\r\n const dropdownMenu = this.getDropdownMenu()\r\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\r\n }\r\n\r\n handleLastItem() { \r\n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\r\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \r\n this.isLastItem = true;\r\n } else this.isLastItem = false;\r\n }\r\n\r\n generateUniqueId(prefix = 'id') {\r\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n }\r\n\r\n componentWillLoad() { \r\n if (!this.uniqueId) {\r\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\r\n }\r\n this.handleLastItem()\r\n }\r\n\r\n componentDidUpdate() {\r\n this.handleLastItem()\r\n }\r\n\r\n componentWillRender() { \r\n this.setHasDropdownMenuState()\r\n }\r\n\r\n setHasDropdownMenuState() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n if(dropdownMenu) {\r\n this.hasDropdownMenu = !!dropdownMenu;\r\n }\r\n }\r\n\r\n getIfxDropdownMenuComponent() { \r\n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\r\n return dropdownMenu;\r\n }\r\n\r\n componentDidLoad() { \r\n const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n\r\n if(!this.hasDropdownMenu) { \r\n const iconMenuWrapper = this.getMenuIconWrapper();\r\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\r\n } else { \r\n dropdownMenu.isOpen = true;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\r\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\r\n <slot name='label'/>\r\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\r\n <slot />\r\n </div>\r\n </li>\r\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\r\n </li>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -33,7 +33,7 @@ export class Breadcrumb {
         }
     }
     render() {
-        return (h("nav", { key: 'edf76204e96413a39d1a543735bbb0a2530d8348', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '1b64075586076eb4f6ca73cf41202a52a180d1c3', class: "breadcrumb" }, h("slot", { key: '352a0be161eb7b0ab45bdbbb59d023bd9da6ff73' }))));
+        return (h("nav", { key: '1ac077037d44b72f6a284ace72dd43bad0b3ebeb', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '7192480afed229bee5c54e4d6a3454ca3eb4636f', class: "breadcrumb" }, h("slot", { key: 'fa901a096a659d87f3ce0d6f1c366f9e874f4e22' }))));
     }
     static get is() { return "ifx-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,UAAU;IAGrB,KAAK,CAAC,gBAAgB;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACrC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC,CAAA;QACnD,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE,CAAC;YACR,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC9C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE,CAAC;oBAC5C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE,CAAC;wBACnE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;oBACtF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,4BAA4B;YAC1C,2DAAI,KAAK,EAAC,YAAY;gBACpB,8DAAQ,CACL,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,UAAU;IAGrB,KAAK,CAAC,gBAAgB;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACrC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC,CAAA;QACnD,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE,CAAC;YACR,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC9C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE,CAAC;oBAC5C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE,CAAC;wBACnE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;oBACtF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,4BAA4B;YAC1C,2DAAI,KAAK,EAAC,YAAY;gBACpB,8DAAQ,CACL,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-breadcrumb',\r\n styleUrl: 'breadcrumb.scss',\r\n shadow: true\r\n})\r\nexport class Breadcrumb {\r\n @Element() el;\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-breadcrumb', await framework)\r\n }\r\n const element = this.el.shadowRoot.firstChild;\r\n this.validateBreadcrumbItemStructure(element);\r\n }\r\n\r\n private validateBreadcrumbItemStructure(element: HTMLElement) {\r\n if (!element) {\r\n console.error('element not found');\r\n return;\r\n }\r\n \r\n const slot = element.querySelector('slot');\r\n if(slot) { \r\n const assignedNodes = slot.assignedNodes();\r\n \r\n for (let i = 0; i < assignedNodes.length; i++) {\r\n const node = assignedNodes[i];\r\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\r\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\r\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\r\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\r\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <nav aria-label=\"Page navigation breadcrumb\">\r\n <ol class=\"breadcrumb\">\r\n <slot />\r\n </ol>\r\n </nav>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -94,30 +94,30 @@ export default {
 const DefaultTemplate = args => {
     const icon = args.icon === 'none' ? '' : args.icon;
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `<ifx-breadcrumb>
-  <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="${args.href}"">Breadcrumb 1</ifx-breadcrumb-item-label>
-    <ifx-dropdown-menu>
-      <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>
-      <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
-      <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
-      <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
-    </ifx-dropdown-menu>
-  </ifx-breadcrumb-item>
-  <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
-    <ifx-dropdown-menu>
-    <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>
-    <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
-    <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
-    <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
-    </ifx-dropdown-menu>
-  </ifx-breadcrumb-item>
-  <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
-  </ifx-breadcrumb-item>
+    wrapper.innerHTML = `<ifx-breadcrumb>
+  <ifx-breadcrumb-item>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="${args.href}"">Breadcrumb 1</ifx-breadcrumb-item-label>
+    <ifx-dropdown-menu>
+      <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
+    </ifx-dropdown-menu>
+  </ifx-breadcrumb-item>
+  <ifx-breadcrumb-item>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
+    <ifx-dropdown-menu>
+    <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
+    </ifx-dropdown-menu>
+  </ifx-breadcrumb-item>
+  <ifx-breadcrumb-item>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
+  </ifx-breadcrumb-item>
 </ifx-breadcrumb>`;
     const breadcrumb = wrapper.querySelector('ifx-breadcrumb');
     // Loop through each breadcrumb item and attach event listeners to its dropdown menu

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

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.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/Breadcrumb',\n tags: ['autodocs'],\n\n args: {\n icon: '',\n iconArialLabel: '',\n href: 'http://yahoo.com',\n hrefOfDropdownItem: 'http://google.com',\n target: '_self',\n },\n argTypes: {\n icon: {\n control: { type: 'select' },\n options: Object.keys(icons),\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n target: {\n control: { type: 'text' },\n description: 'Set the target of the link.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: '_self'\n },\n type: {\n summary: 'string'\n }\n }\n },\n iconArialLabel: {\n control: { type: 'text' },\n description: 'Set the aria label of the icon.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n href: {\n control: { type: 'text' },\n description: 'Set the href of the breadcrumb item.',\n table: {\n category: 'ifx-breadcrumb-item-label props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n hrefOfDropdownItem: {\n name: 'href',\n control: { type: 'text' },\n description: 'Set the href of the dropdown item.',\n table: {\n category: 'ifx-dropdown-item props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n ifxDropdownMenuItem: {\n action: 'ifxDropdownMenuItem',\n description: 'Custom event emitted by ifx-dropdown-menu 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 icon = args.icon === 'none' ? '' : args.icon;\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `<ifx-breadcrumb>\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"${args.href}\"\">Breadcrumb 1</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n <ifx-dropdown-menu>\n <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\n </ifx-dropdown-menu>\n </ifx-breadcrumb-item>\n\n <ifx-breadcrumb-item>\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n breadcrumbItems.forEach(breadcrumbItem => {\n const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n });\n\n return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Breadcrumb',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n icon: '',\r\n iconArialLabel: '',\r\n href: 'http://yahoo.com',\r\n hrefOfDropdownItem: 'http://google.com',\r\n target: '_self',\r\n },\r\n argTypes: {\r\n icon: {\r\n control: { type: 'select' },\r\n options: Object.keys(icons),\r\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n target: {\r\n control: { type: 'text' },\r\n description: 'Set the target of the link.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: '_self'\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n iconArialLabel: {\r\n control: { type: 'text' },\r\n description: 'Set the aria label of the icon.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n href: {\r\n control: { type: 'text' },\r\n description: 'Set the href of the breadcrumb item.',\r\n table: {\r\n category: 'ifx-breadcrumb-item-label props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n hrefOfDropdownItem: {\r\n name: 'href',\r\n control: { type: 'text' },\r\n description: 'Set the href of the dropdown item.',\r\n table: {\r\n category: 'ifx-dropdown-item props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n ifxDropdownMenuItem: {\r\n action: 'ifxDropdownMenuItem',\r\n description: 'Custom event emitted by ifx-dropdown-menu when an item is selected.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args => {\r\n const icon = args.icon === 'none' ? '' : args.icon;\r\n const wrapper = document.createElement('div');\r\n wrapper.innerHTML = `<ifx-breadcrumb>\r\n <ifx-breadcrumb-item>\r\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"${args.href}\"\">Breadcrumb 1</ifx-breadcrumb-item-label>\r\n <ifx-dropdown-menu>\r\n <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\r\n </ifx-dropdown-menu>\r\n </ifx-breadcrumb-item>\r\n\r\n <ifx-breadcrumb-item>\r\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\r\n <ifx-dropdown-menu>\r\n <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\r\n <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\r\n </ifx-dropdown-menu>\r\n </ifx-breadcrumb-item>\r\n\r\n <ifx-breadcrumb-item>\r\n <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\r\n </ifx-breadcrumb-item>\r\n</ifx-breadcrumb>`;\r\n\r\n const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\r\n // Loop through each breadcrumb item and attach event listeners to its dropdown menu\r\n const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\r\n breadcrumbItems.forEach(breadcrumbItem => {\r\n const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\r\n });\r\n\r\n return wrapper;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}

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

@@ -102,7 +102,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'c04892373b37cea4d0ea2e539c6fde9757ba4bcf' }, h("a", { key: 'eb107f3b40cddc93f9e642788ba25dc77e7e5169', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '77ed12eeef09759fe4fb776e012d052c2c1b3383' }))));
+        return (h(Host, { key: 'a0ccc7f723475c894275ccd0ac6585165a9616a7' }, h("a", { key: 'e83891c14e8808caad6bb028f76072cd15397e2d', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, h("slot", { key: '5b38794f154c049ceba977ded7e4ada9854f6656' }))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"

package/dist/collection/components/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChG,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,MAAM;IALnB;QAMU,YAAO,GAAyC,SAAS,CAAC;QAC1D,UAAK,GAAqC,SAAS,CAAC;QACpD,SAAI,GAAW,GAAG,CAAC;QACnB,aAAQ,GAAY,KAAK,CAAC;QAG1B,WAAM,GAAW,OAAO,CAAC;QACzB,SAAI,GAAkC,QAAQ,CAAC;QAC/C,cAAS,GAAY,KAAK,CAAC;QA4DnC,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;gBACvB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBAC3C,IAAI,UAAU,EAAE,CAAC;oBACf,EAAE,CAAC,cAAc,EAAE,CAAC;oBAEpB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;wBAC1B,uEAAuE;wBACvE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,mDAAmD;oBAC/E,CAAC;yBAAM,CAAC;wBACN,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;wBACpD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;4BACd,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;wBAC9B,CAAC;wBACD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;wBAClC,UAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;wBACnC,UAAU,CAAC,KAAK,EAAE,CAAC;wBACnB,UAAU,CAAC,MAAM,EAAE,CAAC;oBACtB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC,CAAA;KAoFF;IA7JC,eAAe,CAAC,QAAgB;QAC9B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;IAC/B,CAAC;IAGD,KAAK,CAAC,QAAQ;QACZ,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;IAChC,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACzC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACzD,CAAC;IAED,yBAAyB;QACvB,IAAI,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAC5B,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;gBACjB,IAAI,CAAC,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC;YACnC,CAAC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAA;QAC3B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;QAChC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,yBAAyB,EAAE,CAAA;IAClC,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC1B,CAAC;IA2BD,iBAAiB;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC5C,MAAM,cAAc,GAAG,WAAW,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CAAC;QACpF,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC/B,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAK,EAAE,CAAC,GAAG,KAAK,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC5D,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAGD,eAAe,CAAC,KAAY;QAC1B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC3B,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAiB;QAC3B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0DACE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACpD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EACjE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,mBAC5B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,sBAC1B,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,gBAC9D,IAAI,CAAC,SAAS,IAAI,SAAS;gBAEvC,8DAAa,CACX,CACC,CACR,CAAC;IACJ,CAAC;IAGD,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,WAAW;YACtC,CAAC,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE;YAC3B,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,UAAU;gBAChC,CAAC,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE;gBAC1B,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;IAED,YAAY;QACV,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAA;QACb,CAAC;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC;YAChC,OAAO,GAAG,CAAA;QACZ,CAAC;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC;YAChC,OAAO,GAAG,CAAA;QACZ,CAAC;;YACI,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,aAAa;QACX,OAAO,UAAU,CACf,KAAK,EACL,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,EAAE,EACzC,OAAO,IAAI,CAAC,eAAe,EAAE,EAAE,EAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAChC,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', await framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"]}
1	+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n tag: 'ifx-button',\r\n styleUrl: 'button.scss',\r\n shadow: true,\r\n})\r\nexport class Button {\r\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\r\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\r\n @Prop() size: string = 'm';\r\n @Prop() disabled: boolean = false;\r\n @State() internalHref: string;\r\n @Prop() href: string;\r\n @Prop() target: string = '_self';\r\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\r\n @Prop() fullWidth: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Element() el;\r\n\r\n private focusableElement: HTMLElement;\r\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\r\n\r\n @Watch('href')\r\n setInternalHref(newValue: string) {\r\n this.internalHref = newValue;\r\n }\r\n\r\n @Method()\r\n async setFocus() {\r\n this.focusableElement.focus();\r\n }\r\n\r\n insertNativeButton() {\r\n this.nativeButton = document.createElement('button');\r\n this.nativeButton.type = this.type;\r\n this.nativeButton.style.display = 'none';\r\n this.el.closest('form').appendChild(this.nativeButton);\r\n }\r\n\r\n handleFormAndInternalHref() {\r\n if (this.el.closest('form')) {\r\n if (this.el.href) {\r\n this.el.internalHref = undefined;\r\n }\r\n this.insertNativeButton()\r\n } else {\r\n this.internalHref = this.href;\r\n }\r\n }\r\n\r\n handleButtonWidth() {\r\n if (this.fullWidth) {\r\n this.el.style.setProperty('--bw', '100%');\r\n } else {\r\n this.el.style.setProperty('--bw', 'fit-content');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.handleFormAndInternalHref()\r\n }\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-button', await framework)\r\n }\r\n }\r\n\r\n componentWillRender() {\r\n this.handleButtonWidth()\r\n }\r\n\r\n\r\n\r\n handleClick = (ev: Event) => {\r\n if (this.el.shadowRoot) {\r\n const parentForm = this.el.closest('form');\r\n if (parentForm) {\r\n ev.preventDefault();\r\n\r\n if (this.type === 'reset') {\r\n // If the button type is 'reset', manually reset all custom form fields\r\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\r\n } else {\r\n const fakeButton = document.createElement('button');\r\n if (this.type) {\r\n fakeButton.type = this.type;\r\n }\r\n fakeButton.style.display = 'none';\r\n parentForm.appendChild(fakeButton);\r\n fakeButton.click();\r\n fakeButton.remove();\r\n }\r\n }\r\n }\r\n }\r\n\r\n resetClickHandler() {\r\n const formElement = this.el.closest('form');\r\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\r\n customElements.forEach(element => {\r\n element.reset();\r\n });\r\n }\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\r\n this.focusableElement.click();\r\n }\r\n }\r\n\r\n @Listen('click', { capture: true })\r\n handleHostClick(event: Event) {\r\n if (this.disabled === true) {\r\n event.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n handleFocus(event: FocusEvent) {\r\n if (this.disabled) {\r\n event.preventDefault();\r\n this.focusableElement.blur();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <a\r\n role={this.href ? 'link' : 'button'}\r\n tabIndex={this.disabled ? -1 : 0}\r\n ref={(el) => (this.focusableElement = el)}\r\n class={this.getClassNames()}\r\n href={!this.disabled ? this.internalHref : undefined}\r\n target={this.target}\r\n onClick={this.handleClick}\r\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n onFocus={(event) => this.handleFocus(event)}\r\n aria-disabled={this.disabled ? 'true' : null}\r\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\r\n aria-label={this.ariaLabel \|\| undefined}\r\n >\r\n <slot></slot>\r\n </a>\r\n </Host>\r\n );\r\n }\r\n\r\n\r\n getVariantClass() {\r\n return `${this.variant}` === \"secondary\"\r\n ? `secondary-${this.theme}`\r\n : `${this.variant}` === 'tertiary'\r\n ? `tertiary-${this.theme}`\r\n : `${this.theme}`;\r\n }\r\n\r\n getSizeClass() {\r\n if (`${this.size}` === \"xs\") {\r\n return \"xs\"\r\n }\r\n else if (`${this.size}` === \"s\") {\r\n return \"s\"\r\n }\r\n else if (`${this.size}` === \"l\") {\r\n return \"l\"\r\n }\r\n else return \"\";\r\n }\r\n\r\n getClassNames() {\r\n return classNames(\r\n 'btn',\r\n this.size && `btn-${this.getSizeClass()}`,\r\n `btn-${this.getVariantClass()}`,\r\n this.disabled ? 'disabled' : ''\r\n );\r\n }\r\n}"]}

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

@@ -153,8 +153,8 @@ export default {
         },
     },
 };
-const DefaultTemplate = args => `<ifx-button type="${args.type}" aria-label="${args.ariaLabel}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ''} full-width="${args.fullWidth}">
-  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}
+const DefaultTemplate = args => `<ifx-button type="${args.type}" aria-label="${args.ariaLabel}" disabled="${args.disabled}" variant="${args.variant}" size="${args.size}" target="${args.target}" theme="${args.theme}" ${args.href ? `href="${args.url}"` : ''} full-width="${args.fullWidth}">
+  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon="${args.icon}"></ifx-icon>` : ''}
 </ifx-button>`;
 export const Default = DefaultTemplate.bind({});
 //# sourceMappingURL=button.stories.js.map