@infineon/infineon-design-system-stencil 30.9.2--canary.1640.7e6e3cfaf16dd16e049cb22cf4e0a4452b0f864c.0 → 30.9.2--canary.1667.6801a68d8edd0b0c8f5fe97164d84c0595644f90.0

package/dist/collection/components/navigation/sidebar/sidebar.stories.js

@@ -1,10 +1,9 @@
 import { action } from "@storybook/addon-actions";
-import { icons } from "@infineon/infineon-icons";
 export default {
     title: 'Components/Navigation/Sidebar',
     // tags: ['autodocs'],
     args: {
-        icon: 'image-16',
+        icon: true,
         applicationName: 'Application Name',
         showFooter: true,
         showHeader: true,
@@ -13,192 +12,28 @@ export default {
         imprint: 'https://yourwebsite.com/imprint',
         privacyPolicy: 'https://yourwebsite.com/privacy-policy',
         copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,
-        numberIndicatorOfSidebarItem: "",
-        hrefOfSidebarItem: 'https://google.com',
-        targetOfSidebarItem: '_self',
-        activeSidebarItem: false,
-        isActionItem: false,
     },
     argTypes: {
-        applicationName: {
-            description: 'The name of the application to display at the top of the sidebar.',
-            table: {
-                category: 'ifx-sidebar props'
-            }
-        },
-        showHeader: {
-            description: 'Determines whether the header is displayed in the sidebar.',
-            table: {
-                category: 'ifx-sidebar props',
-                defaultValue: {
-                    summary: true
-                }
-            }
+        ifxSidebarNavigationItem: {
+            action: 'ifxSidebarNavigationItem',
+            description: 'Custom event emitted when a navigation item becomes active on selection',
         },
-        showFooter: {
-            description: 'Determines whether the footer is displayed in the sidebar.',
-            table: {
-                category: 'ifx-sidebar props',
-                defaultValue: {
-                    summary: true
-                }
-            }
+        ifxSidebarActionItem: {
+            action: 'ifxSidebarActionItem',
+            description: 'Custom event emitted when an action item is selected',
         },
-        initialCollapse: {
-            description: 'Determines if the sidebar should be collapsed by default when it first loads.',
-            table: {
-                category: 'ifx-sidebar props',
-                defaultValue: {
-                    summary: true
-                }
-            }
+        ifxSidebarMenu: {
+            action: 'ifxSidebarMenu',
+            description: 'Custom event emitted when a menu is expanded or closed',
         },
         imprint: {
-            description: 'The URL link for the "Imprint" section in the sidebar footer.',
             if: { arg: 'showFooter', eq: true },
-            table: {
-                category: 'ifx-sidebar props'
-            }
         },
         termsOfUse: {
-            description: 'The URL link for the "Terms of Use" section in the sidebar footer.',
             if: { arg: 'showFooter', eq: true },
-            table: {
-                category: 'ifx-sidebar props'
-            }
         },
         privacyPolicy: {
-            description: 'The URL link for the "Privacy Policy" section in the sidebar footer.',
             if: { arg: 'showFooter', eq: true },
-            table: {
-                category: 'ifx-sidebar props'
-            }
-        },
-        copyrightText: {
-            description: 'The copyright text to display at the bottom of the sidebar.',
-            table: {
-                category: 'ifx-sidebar props'
-            }
-        },
-        icon: {
-            description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',
-            options: ['none', ...Object.values(icons).map(i => i['name'])],
-            control: 'select',
-            table: {
-                category: 'ifx-sidebar-item props',
-                defaultValue: {
-                    summary: 'image-16'
-                }
-            }
-        },
-        hrefOfSidebarItem: {
-            name: 'href',
-            description: 'The URL of the sidebar item link.',
-            control: 'text',
-            table: {
-                category: 'ifx-sidebar-item props',
-                type: {
-                    summary: 'string'
-                },
-            }
-        },
-        targetOfSidebarItem: {
-            name: 'target',
-            description: 'The target attribute of the sidebar item link.',
-            options: ['_self'],
-            control: 'radio',
-            table: {
-                category: 'ifx-sidebar-item props',
-                type: {
-                    summary: 'string'
-                },
-                defaultValue: {
-                    summary: '_self'
-                }
-            }
-        },
-        numberIndicatorOfSidebarItem: {
-            name: 'numberIndicator',
-            description: 'The number indicator to display on the sidebar item.',
-            control: 'text',
-            table: {
-                category: 'ifx-sidebar-item props',
-                type: {
-                    summary: 'string'
-                }
-            }
-        },
-        activeSidebarItem: {
-            name: 'active',
-            description: 'Set to true manually or by clicking on a navigation item.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-sidebar-item props',
-                type: {
-                    summary: 'boolean'
-                },
-                defaultValue: {
-                    summary: false
-                }
-            }
-        },
-        isActionItem: {
-            description: 'If an item is an action item, it can not become active.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-sidebar-item props',
-                type: {
-                    summary: 'boolean'
-                },
-                defaultValue: {
-                    summary: false
-                },
-            }
-        },
-        ifxSidebarNavigationItem: {
-            action: 'ifxSidebarNavigationItem',
-            description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',
-            table: {
-                category: 'custom events',
-                type: {
-                    summary: 'Framework integration',
-                    detail: `
-React: onIfxSidebarNavigationItem={handleChange}
-Vue: @ifxSidebarNavigationItem="handleChange"
-Angular: (ifxSidebarNavigationItem)="handleChange()"
-VanillaJs: .addEventListener("ifxSidebarNavigationItem", (event) => {/*handle change*/});`
-                }
-            }
-        },
-        ifxSidebarActionItem: {
-            action: 'ifxSidebarActionItem',
-            description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',
-            table: {
-                category: 'custom events',
-                type: {
-                    summary: 'Framework integration',
-                    detail: `
-React: onIfxSidebarActionItem={handleAction}
-Vue: @ifxSidebarActionItem="handleAction"
-Angular: (ifxSidebarActionItem)="handleAction()"
-VanillaJs: .addEventListener("ifxSidebarActionItem", (event) => {/*handle action*/});`
-                },
-            }
-        },
-        ifxSidebarMenu: {
-            action: 'ifxSidebarMenu',
-            description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',
-            table: {
-                category: 'custom events',
-                type: {
-                    summary: 'Framework integration',
-                    detail: `
-React: onIfxSidebarMenu={handleMenu}
-Vue: @ifxSidebarMenu="handleMenu"
-Angular: (ifxSidebarMenu)="handleMenu()"
-VanillaJs: .addEventListener("ifxSidebarMenu", (event) => {/*handle menu*/});`
-                },
-            },
         },
     },
 };
@@ -218,13 +53,13 @@ const DefaultTemplate = args => {
     sidebarElement.setAttribute('copyright-text', args.copyrightText);
     sidebarElement.innerHTML = `
     <ifx-sidebar-title>Menu Items</ifx-sidebar-title>
-    <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
-    <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
-    <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
-    <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
+    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
+    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
+    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
+    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
     <ifx-sidebar-item>
     Section
-    <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Menu Item</ifx-sidebar-item>
+    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>
     <ifx-sidebar-item icon='image-16'>
     Menu Item
     <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>
@@ -235,8 +70,8 @@ const DefaultTemplate = args => {
     <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>
     </ifx-sidebar-item>
     <ifx-sidebar-title>Items group</ifx-sidebar-title>
-    <ifx-sidebar-item href="${args.hrefOfSidebarItem}" target="${args.targetOfSidebarItem}" icon="${args.icon === 'none' ? '' : args.icon}" number-indicator="${args.numberIndicatorOfSidebarItem === "" ? '' : args.numberIndicatorOfSidebarItem}" isActionItem="${args.isActionItem}" active="${args.activeSidebarItem}">Item 1</ifx-sidebar-item>
-    <ifx-sidebar-item href='https://google.com' target='_blank' icon="${args.icon === 'none' ? '' : args.icon}">Item 2</ifx-sidebar-item>
+    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Item 1</ifx-sidebar-item>
+    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Item 2</ifx-sidebar-item>
   `;
     return sidebarElement;
 };
@@ -291,7 +126,7 @@ const NumberIndicatorTemplate = () => `<ifx-sidebar application-name="Applicatio
       3rd layer Menu Item
       </ifx-sidebar-item>
 
-      <ifx-sidebar-item target="_blank" active="false" icon="image-16">
+      <ifx-sidebar-item target="_blank" active="false" icon="image-16" value="thisPage">
       This Page
       </ifx-sidebar-item>
 
@@ -323,7 +158,7 @@ const NumberIndicatorTemplate = () => `<ifx-sidebar application-name="Applicatio
     <ifx-sidebar-item active="false" is-action-item="false" target="_blank" icon="image-16">
     Sub Menu Item
     </ifx-sidebar-item>
-    <ifx-sidebar-item is-action-item="true" icon="image-16">
+    <ifx-sidebar-item is-action-item="true" icon="image-16" value="thisPage">
     This one too
     </ifx-sidebar-item>
     <ifx-sidebar-item is-action-item="false" target="_blank" icon="image-16">

package/dist/collection/components/navigation/sidebar/sidebar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.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/Navigation/Sidebar',\n  // tags: ['autodocs'],\n\n  args: {\n    icon: 'image-16',\n    applicationName: 'Application Name',\n    showFooter: true,\n    showHeader: true,\n    initialCollapse: true,\n    termsOfUse: 'https://yourwebsite.com/terms',\n    imprint: 'https://yourwebsite.com/imprint',\n    privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n    copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n    numberIndicatorOfSidebarItem: \"\",\n    hrefOfSidebarItem: 'https://google.com',\n    targetOfSidebarItem: '_self',\n    activeSidebarItem: false,\n    isActionItem: false,\n  },\n\n  argTypes: {\n    applicationName: {\n      description: 'The name of the application to display at the top of the sidebar.',\n      table: {\n        category: 'ifx-sidebar props'\n      }\n    },\n    showHeader: {\n      description: 'Determines whether the header is displayed in the sidebar.',\n      table: {\n        category: 'ifx-sidebar props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    showFooter: {\n      description: 'Determines whether the footer is displayed in the sidebar.',\n      table: {\n        category: 'ifx-sidebar props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    initialCollapse: {\n      description: 'Determines if the sidebar should be collapsed by default when it first loads.',\n      table: {\n        category: 'ifx-sidebar props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    imprint: {\n      description: 'The URL link for the \"Imprint\" section in the sidebar footer.',\n      if: { arg: 'showFooter', eq: true },\n      table: {\n        category: 'ifx-sidebar props'\n      }\n    },\n    termsOfUse: {\n      description: 'The URL link for the \"Terms of Use\" section in the sidebar footer.',\n      if: { arg: 'showFooter', eq: true },\n      table: {\n        category: 'ifx-sidebar props'\n      }\n    },\n    privacyPolicy: {\n      description: 'The URL link for the \"Privacy Policy\" section in the sidebar footer.',\n      if: { arg: 'showFooter', eq: true },\n      table: {\n        category: 'ifx-sidebar props'\n      }\n    },\n    copyrightText: {\n      description: 'The copyright text to display at the bottom of the sidebar.',\n      table: {\n        category: 'ifx-sidebar props'\n      }\n    },\n    icon: {\n      description: 'The icon to display for the sidebar items. Choose ***none*** to display no icon.',\n      options: ['none', ...Object.values(icons).map(i => i['name'])],\n      control: 'select',\n      table: {\n        category: 'ifx-sidebar-item props',\n        defaultValue: {\n          summary: 'image-16'\n        }\n      }\n    },\n    hrefOfSidebarItem: {\n      name: 'href',\n      description: 'The URL of the sidebar item link.',\n      control: 'text',\n      table: {\n        category: 'ifx-sidebar-item props',\n        type: {\n          summary: 'string'\n        },\n      }\n    },\n    targetOfSidebarItem: {\n      name: 'target',\n      description: 'The target attribute of the sidebar item link.',\n      options: ['_self'],\n      control: 'radio',\n      table: {\n        category: 'ifx-sidebar-item props',\n        type: {\n          summary: 'string'\n        },\n        defaultValue: {\n          summary: '_self'\n        }\n      }\n    },\n    numberIndicatorOfSidebarItem: {\n      name: 'numberIndicator',\n      description: 'The number indicator to display on the sidebar item.',\n      control: 'text',\n      table: {\n        category: 'ifx-sidebar-item props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    activeSidebarItem: {\n      name: 'active',\n      description: 'Set to true manually or by clicking on a navigation item.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-sidebar-item props',\n        type: {\n          summary: 'boolean'\n        },\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    isActionItem: {\n      description: 'If an item is an action item, it can not become active.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-sidebar-item props',\n        type: {\n          summary: 'boolean'\n        },\n        defaultValue: {\n          summary: false\n        },\n      }\n    },\n    ifxSidebarNavigationItem: {\n      action: 'ifxSidebarNavigationItem',\n      description: 'Custom event emitted by ifx-sidebar-item when a navigation item becomes active on selection.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\nReact: onIfxSidebarNavigationItem={handleChange}\nVue: @ifxSidebarNavigationItem=\"handleChange\"\nAngular: (ifxSidebarNavigationItem)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxSidebarNavigationItem\", (event) => {/*handle change*/});`\n        }\n      }\n    },\n    ifxSidebarActionItem: {\n      action: 'ifxSidebarActionItem',\n      description: 'Custom event emitted by ifx-sidebar-item when an action item is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\nReact: onIfxSidebarActionItem={handleAction}\nVue: @ifxSidebarActionItem=\"handleAction\"\nAngular: (ifxSidebarActionItem)=\"handleAction()\"\nVanillaJs: .addEventListener(\"ifxSidebarActionItem\", (event) => {/*handle action*/});`\n        },\n      }\n    },\n    ifxSidebarMenu: {\n      action: 'ifxSidebarMenu',\n      description: 'Custom event emitted by ifx-sidebar-item when a menu is expanded or closed.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `\nReact: onIfxSidebarMenu={handleMenu}\nVue: @ifxSidebarMenu=\"handleMenu\"\nAngular: (ifxSidebarMenu)=\"handleMenu()\"\nVanillaJs: .addEventListener(\"ifxSidebarMenu\", (event) => {/*handle menu*/});`\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the sidebar element and attach event listener\n  const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n  sidebarElement.setAttribute('application-name', args.applicationName);\n  sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n  sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n  sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n  sidebarElement.setAttribute('show-header', args.showHeader);\n  sidebarElement.setAttribute('show-footer', args.showFooter);\n  sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n  sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n  sidebarElement.setAttribute('imprint', args.imprint);\n  sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n  sidebarElement.setAttribute('copyright-text', args.copyrightText);\n\n  sidebarElement.innerHTML = `\n    <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item>\n    Section\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item icon='image-16'>\n    Menu Item\n    <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n    <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n    <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n    </ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n    </ifx-sidebar-item>\n    <ifx-sidebar-title>Items group</ifx-sidebar-title>\n    <ifx-sidebar-item href=\"${args.hrefOfSidebarItem}\" target=\"${args.targetOfSidebarItem}\" icon=\"${args.icon === 'none' ? '' : args.icon}\" number-indicator=\"${args.numberIndicatorOfSidebarItem === \"\" ? '' : args.numberIndicatorOfSidebarItem}\" isActionItem=\"${args.isActionItem}\" active=\"${args.activeSidebarItem}\">Item 1</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">Item 2</ifx-sidebar-item>\n  `\n  return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n  // Create the sidebar element and attach event listener\n  const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n  sidebarElement.setAttribute('application-name', args.applicationName);\n  sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n  sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n  sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n  sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n  // Create 3 sections\n  for (let i = 0; i < 3; i++) {\n    const sectionElement = document.createElement('ifx-sidebar-item');\n    sectionElement.textContent = `Header Section ${i + 1}`;\n\n    // In each section, create 3 menu items\n    for (let j = 0; j < 3; j++) {\n      const menuItemElement = document.createElement('ifx-sidebar-item');\n      menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n      menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n      // In the first menu item of each section, create 3 submenu items\n      if (j === 0) {\n        for (let k = 0; k < 3; k++) {\n          const subMenuItemElement = document.createElement('ifx-sidebar-item');\n          subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n          menuItemElement.appendChild(subMenuItemElement);\n        }\n      }\n\n      sectionElement.appendChild(menuItemElement);\n    }\n    sidebarElement.appendChild(sectionElement);\n  }\n  const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n  const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n  return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n  `<ifx-sidebar application-name=\"Application name\">\n  <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n  <ifx-sidebar-item active=\"false\">\n    Header Section\n    <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n      Second layer\n      <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n      3rd layer Menu Item\n      </ifx-sidebar-item>\n\n      <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n      This Page\n      </ifx-sidebar-item>\n\n      <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n      3rd layer Menu Item\n      </ifx-sidebar-item>\n    </ifx-sidebar-item>\n\n    <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n      Second layer\n      <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n      Menu Item\n      </ifx-sidebar-item>\n    </ifx-sidebar-item>\n\n    <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n      Second layer\n      <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n      Menu Item\n      </ifx-sidebar-item>\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  \n\n  <ifx-sidebar-item>\n  Header Section\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n    Sub Menu Item\n    </ifx-sidebar-item>\n    <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\">\n    This one too\n    </ifx-sidebar-item>\n    <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  </ifx-sidebar-item>\n\n\n  <ifx-sidebar-item>\n  Header Section\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}
+{"version":3,"file":"sidebar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Navigation/Sidebar',\n  // tags: ['autodocs'],\n\n  args: {\n    icon: true,\n    applicationName: 'Application Name',\n    showFooter: true,\n    showHeader: true,\n    initialCollapse: true,\n    termsOfUse: 'https://yourwebsite.com/terms',\n    imprint: 'https://yourwebsite.com/imprint',\n    privacyPolicy: 'https://yourwebsite.com/privacy-policy',\n    copyrightText: `© 1999 - ${new Date().getFullYear()} Infineon Technologies AG`,\n  },\n\n  argTypes: {\n    ifxSidebarNavigationItem: {\n      action: 'ifxSidebarNavigationItem',\n      description: 'Custom event emitted when a navigation item becomes active on selection',\n    },\n    ifxSidebarActionItem: {\n      action: 'ifxSidebarActionItem',\n      description: 'Custom event emitted when an action item is selected',\n    },\n    ifxSidebarMenu: {\n      action: 'ifxSidebarMenu',\n      description: 'Custom event emitted when a menu is expanded or closed',\n    },\n    imprint: {\n      if: { arg: 'showFooter', eq: true },\n    },\n    termsOfUse: {\n      if: { arg: 'showFooter', eq: true },\n    },\n    privacyPolicy: {\n      if: { arg: 'showFooter', eq: true },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the sidebar element and attach event listener\n  const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n  sidebarElement.setAttribute('application-name', args.applicationName);\n  sidebarElement.addEventListener('ifxSidebarNavigationItem', action(`ifxSidebarNavigationItem`));\n  sidebarElement.addEventListener('ifxSidebarActionItem', action(`ifxSidebarActionItem`));\n  sidebarElement.addEventListener('ifxSidebarMenu', action(`ifxSidebarMenu`));\n\n  sidebarElement.setAttribute('show-header', args.showHeader);\n  sidebarElement.setAttribute('show-footer', args.showFooter);\n  sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n  sidebarElement.setAttribute('terms-of-use', args.termsOfUse);\n  sidebarElement.setAttribute('imprint', args.imprint);\n  sidebarElement.setAttribute('privacy-policy', args.privacyPolicy);\n  sidebarElement.setAttribute('copyright-text', args.copyrightText);\n  \n  sidebarElement.innerHTML = `\n    <ifx-sidebar-title>Menu Items</ifx-sidebar-title>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item>\n    Section\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item icon='image-16'>\n    Menu Item\n    <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n    <ifx-sidebar-item active=true>Sub menu item</ifx-sidebar-item>\n    <ifx-sidebar-item>Sub menu item</ifx-sidebar-item>\n    </ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank'>Menu Item</ifx-sidebar-item>\n    </ifx-sidebar-item>\n    <ifx-sidebar-title>Items group</ifx-sidebar-title>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Item 1</ifx-sidebar-item>\n    <ifx-sidebar-item href='https://google.com' target='_blank' icon='image-16'>Item 2</ifx-sidebar-item>\n  `\n  return sidebarElement;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\nconst SubmenuTemplate = args => {\n  // Create the sidebar element and attach event listener\n  const sidebarElement = document.createElement('ifx-sidebar') as HTMLIfxSidebarElement;\n  sidebarElement.setAttribute('application-name', args.applicationName);\n  sidebarElement.addEventListener('ifxSidebarNavigationItem', action('ifxSidebarNavigationItem'));\n  sidebarElement.addEventListener('ifxSidebarActionItem', action('ifxSidebarActionItem'));\n  sidebarElement.addEventListener('ifxSidebarMenu', action('ifxSidebarMenu'));\n  sidebarElement.setAttribute('initial-collapse', args.initialCollapse);\n\n  // Create 3 sections\n  for (let i = 0; i < 3; i++) {\n    const sectionElement = document.createElement('ifx-sidebar-item');\n    sectionElement.textContent = `Header Section ${i + 1}`;\n\n    // In each section, create 3 menu items\n    for (let j = 0; j < 3; j++) {\n      const menuItemElement = document.createElement('ifx-sidebar-item');\n      menuItemElement.setAttribute('icon', args.icon ? 'image-16' : '');\n      menuItemElement.textContent = `Menu Item ${j + 1}`;\n\n      // In the first menu item of each section, create 3 submenu items\n      if (j === 0) {\n        for (let k = 0; k < 3; k++) {\n          const subMenuItemElement = document.createElement('ifx-sidebar-item');\n          subMenuItemElement.textContent = `Sub Menu Item ${k + 1}`;\n          menuItemElement.appendChild(subMenuItemElement);\n        }\n      }\n\n      sectionElement.appendChild(menuItemElement);\n    }\n    sidebarElement.appendChild(sectionElement);\n  }\n  const firstSection = sidebarElement.querySelectorAll('ifx-sidebar-item')[0];\n  const firstMenuItem = firstSection.querySelectorAll('ifx-sidebar-item')[0];\n\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('active', 'true'); //first submenu item\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[0].setAttribute('is-action-item', 'false');\n\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[1].setAttribute('is-action-item', 'true'); //2nd submenu item\n  firstMenuItem.querySelectorAll('ifx-sidebar-item')[2].setAttribute('is-action-item', 'true'); //3rd sub menu item\n\n  return sidebarElement;\n};\n\nexport const WithSubmenu = SubmenuTemplate.bind({});\n\nconst NumberIndicatorTemplate = () =>\n  `<ifx-sidebar application-name=\"Application name\">\n  <ifx-sidebar-item icon=\"image-16\" number-indicator=\"5\">Menu Item</ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\" number-indicator=\"1\">Menu Item</ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\" number-indicator=\"23\">Menu Item</ifx-sidebar-item>\n  <ifx-sidebar-item active=\"false\">\n    Header Section\n    <ifx-sidebar-item icon=\"image-16\" active=\"false\" >\n      Second layer\n      <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n      3rd layer Menu Item\n      </ifx-sidebar-item>\n\n      <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\" value=\"thisPage\">\n      This Page\n      </ifx-sidebar-item>\n\n      <ifx-sidebar-item target=\"_blank\" active=\"false\" icon=\"image-16\">\n      3rd layer Menu Item\n      </ifx-sidebar-item>\n    </ifx-sidebar-item>\n\n    <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n      Second layer\n      <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n      Menu Item\n      </ifx-sidebar-item>\n    </ifx-sidebar-item>\n\n    <ifx-sidebar-item icon=\"image-16\" active=\"false\">\n      Second layer\n      <ifx-sidebar-item target=\"_blank\" icon=\"image-16\" active=\"false\">\n      Menu Item\n      </ifx-sidebar-item>\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  \n\n  <ifx-sidebar-item>\n  Header Section\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item active=\"false\" is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n    Sub Menu Item\n    </ifx-sidebar-item>\n    <ifx-sidebar-item is-action-item=\"true\" icon=\"image-16\" value=\"thisPage\">\n    This one too\n    </ifx-sidebar-item>\n    <ifx-sidebar-item is-action-item=\"false\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  </ifx-sidebar-item>\n\n\n  <ifx-sidebar-item>\n  Header Section\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  <ifx-sidebar-item icon=\"image-16\">\n    Menu Item\n    <ifx-sidebar-item href=\"http://google.com\" target=\"_blank\" icon=\"image-16\">\n    Menu Item\n    </ifx-sidebar-item>\n  </ifx-sidebar-item>\n  </ifx-sidebar-item>\n</ifx-sidebar>`;\n\nexport const WithNumberIndicator = NumberIndicatorTemplate.bind({});\n"]}

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

@@ -3,7 +3,7 @@ export default {
     title: 'Components/Notification',
     tags: ['autodocs'],
     args: {
-        label: "Sample Notification",
+        content: "Sample Notification",
         variant: 'success',
         icon: 'c-check-16',
         linkText: 'Link',
@@ -11,86 +11,39 @@ export default {
         linkTarget: '_blank',
     },
     argTypes: {
-        label: {
-            name: 'Label of Notification',
-            description: 'Set the text label of the *<ifx-notification>*.',
-            table: {
-                category: 'story controls',
-                type: {
-                    summary: 'string'
-                }
-            }
+        content: {
+            description: 'Text inside the notification is passed as slot.',
         },
         variant: {
             description: 'Variant of the notification.',
             options: ['success', 'warning', 'error'],
             control: { type: 'radio' },
-            table: {
-                category: 'ifx-notification props',
-                defaultValue: {
-                    summary: 'success'
-                },
-                type: {
-                    summary: 'success | warning | error'
-                }
-            }
         },
         icon: {
-            description: 'The icon to be displayed in the notification. Choose "none" to display no icon.',
-            options: ['none', ...Object.values(icons).map(i => i['name'])],
+            description: 'The icon to be displayed in the notification.',
+            options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
-            table: {
-                category: 'ifx-notification props',
-                type: {
-                    summary: 'string'
-                }
-            }
         },
         linkText: {
             description: 'Text for the link.',
-            table: {
-                category: 'ifx-notification props',
-                type: {
-                    summary: 'string'
-                }
-            }
         },
         linkHref: {
             description: 'URL for the link.',
-            table: {
-                category: 'ifx-notification props',
-                type: {
-                    summary: 'string'
-                }
-            }
         },
         linkTarget: {
             options: ['_blank', '_self', '_parent'],
             control: { type: 'radio' },
-            description: 'Specifies where to open the linked document.',
-            table: {
-                category: 'ifx-notification props',
-                defaultValue: {
-                    summary: '_blank'
-                },
-                type: {
-                    summary: '_blank | _self | _parent'
-                }
-            }
         },
     },
 };
-const DefaultTemplate = args => {
-    const icon = args.icon === 'none' ? '' : args.icon;
-    return `<ifx-notification 
-  icon = "${icon}"
+const DefaultTemplate = args => `<ifx-notification 
+  icon="${args.icon}" 
   variant="${args.variant}" 
   link-text="${args.linkText}" 
   link-href="${args.linkHref}"
   link-target="${args.linkTarget}">
-  ${args.label}
+  ${args.content}
 </ifx-notification>`;
-};
 export const Default = DefaultTemplate.bind({});
 Default.argTypes = {};
 //# sourceMappingURL=notification.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,qBAAqB;QAC5B,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,yBAAyB;QACnC,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,uBAAuB;YAC7B,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,8BAA8B;YAC3C,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,2BAA2B;iBACrC;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,iFAAiF;YAC9F,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;YAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mBAAmB;YAChC,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,0BAA0B;iBACpC;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAEnD,OAAO;YACG,IAAI;aACH,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,QAAQ;eACb,IAAI,CAAC,QAAQ;iBACX,IAAI,CAAC,UAAU;IAC5B,IAAI,CAAC,KAAK;oBACM,CAAC;AACrB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Notification',\n  tags: ['autodocs'],\n\n  args: {\n    label: \"Sample Notification\",\n    variant: 'success',\n    icon: 'c-check-16',\n    linkText: 'Link',\n    linkHref: 'https://www.example.com',\n    linkTarget: '_blank',\n  },\n  argTypes: {\n    label: {\n      name: 'Label of Notification',\n      description: 'Set the text label of the *<ifx-notification>*.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    variant: {\n      description: 'Variant of the notification.',\n      options: ['success', 'warning', 'error'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-notification props',\n        defaultValue: {\n          summary: 'success'\n        },\n        type: {\n          summary: 'success | warning | error'\n        }\n      }\n    },\n    icon: {\n      description: 'The icon to be displayed in the notification. Choose \"none\" to display no icon.',\n      options: ['none', ...Object.values(icons).map(i => i['name'])],\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-notification props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    linkText: {\n      description: 'Text for the link.',\n      table: {\n        category: 'ifx-notification props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    linkHref: {\n      description: 'URL for the link.',\n      table: {\n        category: 'ifx-notification props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    linkTarget: {\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n      description: 'Specifies where to open the linked document.',\n      table: {\n        category: 'ifx-notification props',\n        defaultValue: {\n          summary: '_blank'\n        },\n        type: {\n          summary: '_blank | _self | _parent'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const icon = args.icon === 'none' ? '' : args.icon;\n\n  return `<ifx-notification \n  icon = \"${icon}\"\n  variant=\"${args.variant}\" \n  link-text=\"${args.linkText}\" \n  link-href=\"${args.linkHref}\"\n  link-target=\"${args.linkTarget}\">\n  ${args.label}\n</ifx-notification>`;\n}\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
+{"version":3,"file":"notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/notification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,OAAO,EAAE,qBAAqB;QAC9B,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,yBAAyB;QACnC,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,iDAAiD;SAC/D;QACD,OAAO,EAAE;YACP,WAAW,EAAE,8BAA8B;YAC3C,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;SAClC;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mBAAmB;SACjC;QACD,UAAU,EAAC;YACT,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC;UACtB,IAAI,CAAC,IAAI;aACN,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,QAAQ;eACb,IAAI,CAAC,QAAQ;iBACX,IAAI,CAAC,UAAU;IAC5B,IAAI,CAAC,OAAO;oBACI,CAAC;AAErB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Notification',\n  tags: ['autodocs'],\n\n  args: {\n    content: \"Sample Notification\",\n    variant: 'success',\n    icon: 'c-check-16',\n    linkText: 'Link',\n    linkHref: 'https://www.example.com',\n    linkTarget: '_blank',\n  },\n  argTypes: {\n    content: {\n      description: 'Text inside the notification is passed as slot.',\n    },\n    variant: {\n      description: 'Variant of the notification.',\n      options: ['success', 'warning', 'error'],\n      control: { type: 'radio' },\n    },\n    icon: {\n      description: 'The icon to be displayed in the notification.',\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    linkText: {\n      description: 'Text for the link.',\n    },\n    linkHref: {\n      description: 'URL for the link.',\n    },\n    linkTarget:{\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-notification \n  icon=\"${args.icon}\" \n  variant=\"${args.variant}\" \n  link-text=\"${args.linkText}\" \n  link-href=\"${args.linkHref}\"\n  link-target=\"${args.linkTarget}\">\n  ${args.content}\n</ifx-notification>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/number-indicator/number-indicator.stories.js

@@ -5,25 +5,6 @@ export default {
         label: 1,
         inverted: false,
     },
-    argTypes: {
-        label: {
-            name: 'Label of Number Indicator',
-            description: 'Set the number displayed inside the *<ifx-number-indicator>*.',
-            table: {
-                category: 'story controls'
-            }
-        },
-        inverted: {
-            description: 'Toggles the color scheme of the number indicator.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-number-indicator props',
-                defaultValue: {
-                    summary: false
-                }
-            }
-        }
-    }
 };
 const DefaultTemplate = args => `<ifx-number-indicator inverted="${args.inverted}">${args.label}</ifx-number-indicator>`;
 export const Default = DefaultTemplate.bind({});

package/dist/collection/components/number-indicator/number-indicator.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-indicator.stories.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,2BAA2B;YACjC,WAAW,EAAE,+DAA+D;YAC5E,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,4BAA4B;gBACtC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,mCAAmC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,yBAAyB,CAAC;AAEzH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Number Indicator',\n  tags: ['autodocs'],\n\n  args: {\n    label: 1,\n    inverted: false,\n  },\n  argTypes: {\n    label: {\n      name: 'Label of Number Indicator',\n      description: 'Set the number displayed inside the *<ifx-number-indicator>*.',\n      table: {\n        category: 'story controls'\n      }\n    },\n    inverted: {\n      description: 'Toggles the color scheme of the number indicator.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-number-indicator props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    }\n  }\n};\n\nconst DefaultTemplate = args => `<ifx-number-indicator inverted=\"${args.inverted}\">${args.label}</ifx-number-indicator>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
+{"version":3,"file":"number-indicator.stories.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,mCAAmC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,yBAAyB,CAAC;AAEzH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Number Indicator',\n  tags: ['autodocs'],\n\n  args: {\n    label: 1,\n    inverted: false,\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-number-indicator inverted=\"${args.inverted}\">${args.label}</ifx-number-indicator>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/pagination/pagination.js

@@ -137,7 +137,7 @@ export class Pagination {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'db55804ece2792b117f6f5375a6f63253679a393', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'bc40446f5905c3f249d243993d7363479d6ce384', class: 'items__per-page-wrapper' }, h("div", { key: '9c15d938fc18b93fc7e8c10339b71649575386ca', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0b7ba079ffa28c5732df989988afd65396c8adc9', class: 'items__per-page-field' }, h("ifx-select", { key: '1a031fa45753fc389e3ab386ab6170f50d1df0f0', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: 'd5bd11d957dd37b5af1df9d285ae4098c93c3365', class: 'items__total-wrapper' }, h("div", { key: '295766066233b8b0f975abcc093cc43839b46125', class: 'page__numbers-wrapper' }, h("div", { key: '574f2ef606d94c2a6ad16c9b9684f158f3595422', class: "pagination" }, h("ifx-icon-button", { key: 'f98a3b995d2f08124e2f2e3f96e64cccd7b81b33', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '07630c257729a369d07baf12e99c0469fccebe0d' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '8407562df387e20efa76fdf6ee2d1fe65e6eb6f6', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: 'b9e1b525f3a20354d409c93a1aa0faa9d9d17019', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'fc932c8e4114f39e5df86007d3595f72fac6384a', class: 'items__per-page-wrapper' }, h("div", { key: '93816bd9264a8cd32d782cc78df9052ab93f76a7', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '3432585bf8ce77786657f676fdaca27aba34b413', class: 'items__per-page-field' }, h("ifx-select", { key: 'a6def492e7db12fb2d9245a6655aaecb99282ceb', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }))), h("div", { key: '275104906a9d0e733644e2b5efbab477ecfc95ca', class: 'items__total-wrapper' }, h("div", { key: '75528c52f8be0724c332daf2f292c1ec852f6e53', class: 'page__numbers-wrapper' }, h("div", { key: '4e350e7002b1de2e5fc2c16d10b4a035a3bdedad', class: "pagination" }, h("ifx-icon-button", { key: '42a3fe966d4bae2bc90b24709293237a5b57c413', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '5d5f20215e988d2adc10f842be5b9300f30b1fd1' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'ebb0d3ef295477810891b41ca03ae42cdb634cf7', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -218,6 +218,36 @@ export class Pagination {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "ifxNextPage",
+                "name": "ifxNextPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxPrevPage",
+                "name": "ifxPrevPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }