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

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

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

@@ -69,41 +69,41 @@ const BaseTemplate = (args) => {
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
     // Create items based on the story requirements
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Dashboard'}"
-      description="${args.description || 'View your main dashboard'}"
-      value="dashboard"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Settings"
-      value="settings"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Profile"
-      description="Manage your profile information"
-      value="profile"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Advanced Analytics and Reporting Dashboard with Extended Functionality"
-      description="This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics."
-      value="analytics"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Dashboard'}"
+      description="${args.description || 'View your main dashboard'}"
+      value="dashboard"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Settings"
+      value="settings"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Profile"
+      description="Manage your profile information"
+      value="profile"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Advanced Analytics and Reporting Dashboard with Extended Functionality"
+      description="This comprehensive analytics dashboard provides detailed insights into user behavior and system performance metrics."
+      value="analytics"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -129,41 +129,41 @@ export const InteractiveCheckbox = (args) => {
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
     // Create items based on the story requirements
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Enable notifications'}"
-      description="${args.description || 'Receive notifications for important updates'}"
-      value="notifications"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Auto-save documents"
-      description="Automatically save your work"
-      value="autosave"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Enable backups"
-      description="Create automatic backups"
-      value="backups"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Show advanced options"
-      value="advanced"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Enable notifications'}"
+      description="${args.description || 'Receive notifications for important updates'}"
+      value="notifications"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Auto-save documents"
+      description="Automatically save your work"
+      value="autosave"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Enable backups"
+      description="Create automatic backups"
+      value="backups"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-checkbox slot="leading" checked="false"></ifx-checkbox>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Show advanced options"
+      value="advanced"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-checkbox slot="leading" checked="true"></ifx-checkbox>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -189,41 +189,41 @@ export const InteractiveSwitch = (args) => {
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
     // Create items based on the story requirements
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Enable dark mode'}"
-      description="${args.description || 'Toggle dark mode for the interface'}"
-      value="darkmode"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-switch slot="leading" checked="false"></ifx-switch>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Auto-sync data"
-      description="Automatically synchronize your data"
-      value="autosync"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-switch slot="leading" checked="true"></ifx-switch>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Enable analytics"
-      description="Collect usage analytics"
-      value="analytics"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-switch slot="leading" checked="false"></ifx-switch>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Performance mode"
-      value="performance"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-switch slot="leading" checked="true"></ifx-switch>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Enable dark mode'}"
+      description="${args.description || 'Toggle dark mode for the interface'}"
+      value="darkmode"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-switch slot="leading" checked="false"></ifx-switch>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Auto-sync data"
+      description="Automatically synchronize your data"
+      value="autosync"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-switch slot="leading" checked="true"></ifx-switch>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Enable analytics"
+      description="Collect usage analytics"
+      value="analytics"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-switch slot="leading" checked="false"></ifx-switch>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Performance mode"
+      value="performance"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-switch slot="leading" checked="true"></ifx-switch>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -248,45 +248,45 @@ export const WithIcons = (args) => {
     const listEl = document.createElement('ifx-action-list');
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'Dashboard'}"
-      description="${args.description || 'View your main dashboard'}"
-      value="dashboard"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <ifx-icon slot="leading" icon="home-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Settings"
-      value="settings"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="leading" icon="server-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Profile"
-      description="Manage your profile information"
-      value="profile"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="leading" icon="user-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Enterprise Resource Planning and Business Intelligence System"
-      description="Comprehensive enterprise solution that integrates all aspects of business operations including financial management and human resources."
-      value="erp"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <ifx-icon slot="leading" icon="chart-16"></ifx-icon>
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'Dashboard'}"
+      description="${args.description || 'View your main dashboard'}"
+      value="dashboard"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <ifx-icon slot="leading" icon="home-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Settings"
+      value="settings"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="leading" icon="server-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Profile"
+      description="Manage your profile information"
+      value="profile"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="leading" icon="user-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Enterprise Resource Planning and Business Intelligence System"
+      description="Comprehensive enterprise solution that integrates all aspects of business operations including financial management and human resources."
+      value="erp"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <ifx-icon slot="leading" icon="chart-16"></ifx-icon>
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;
@@ -311,37 +311,37 @@ export const WithImages = (args) => {
     const listEl = document.createElement('ifx-action-list');
     if (args.listAriaLabel)
         listEl.setAttribute('list-aria-label', args.listAriaLabel);
-    listEl.innerHTML = `
-    <ifx-action-list-item
-      item-title="${args.itemTitle || 'John Doe'}"
-      description="${args.description || 'Senior Developer'}"
-      value="john"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
-      ${args.href ? `href="${args.href}"` : ''}
-      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
-      ${args.disabled ? 'disabled="true"' : ''}>
-      <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;">
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Jane Smith"
-      description="UI/UX Designer"
-      value="jane"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <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;">
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
-    <ifx-action-list-item
-      item-title="Mike Johnson"
-      description="Product Manager"
-      value="mike"
-      disabled="true"
-      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
-      <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;">
-      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
-    </ifx-action-list-item>
+    listEl.innerHTML = `
+    <ifx-action-list-item
+      item-title="${args.itemTitle || 'John Doe'}"
+      description="${args.description || 'Senior Developer'}"
+      value="john"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}
+      ${args.href ? `href="${args.href}"` : ''}
+      ${args.target && args.target !== '_self' ? `target="${args.target}"` : ''}
+      ${args.disabled ? 'disabled="true"' : ''}>
+      <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;">
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Jane Smith"
+      description="UI/UX Designer"
+      value="jane"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <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;">
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
+    <ifx-action-list-item
+      item-title="Mike Johnson"
+      description="Product Manager"
+      value="mike"
+      disabled="true"
+      ${args.itemAriaLabel ? `item-aria-label="${args.itemAriaLabel}"` : ''}>
+      <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;">
+      <ifx-icon slot="trailing" icon="chevron-right-16"></ifx-icon>
+    </ifx-action-list-item>
   `;
     listEl.addEventListener('ifxActionListItemClick', (event) => {
         const customEvent = event;

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';\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';"]}
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';"]}

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';\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"]}
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"]}

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 = {