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

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';\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"]}
+{"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  },\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    ifxSidebarNavigationItem: {\n      action: 'ifxSidebarNavigationItem',\n      description: 'Custom event emitted when a navigation item becomes active on selection',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: \n          `React: onIfxSidebarNavigationItem={handleChange}\n          Vue: @ifxSidebarNavigationItem=\"handleChange\"\n          Angular: (ifxSidebarNavigationItem)=\"handleChange()\"\n          VanillaJs: .addEventListener(\"ifxSidebarNavigationItem\", (event) => {/*handle change*/});`\n        }\n      }\n    },\n    ifxSidebarActionItem: {\n      action: 'ifxSidebarActionItem',\n      description: 'Custom event emitted when an action item is selected',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: \n          `React: onIfxSidebarActionItem={handleAction}\n          Vue: @ifxSidebarActionItem=\"handleAction\"\n          Angular: (ifxSidebarActionItem)=\"handleAction()\"\n          VanillaJs: .addEventListener(\"ifxSidebarActionItem\", (event) => {/*handle action*/});`\n        },\n      }\n    },\n    ifxSidebarMenu: {\n      action: 'ifxSidebarMenu',\n      description: 'Custom event emitted when a menu is expanded or closed',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: \n          `React: onIfxSidebarMenu={handleMenu}\n          Vue: @ifxSidebarMenu=\"handleMenu\"\n          Angular: (ifxSidebarMenu)=\"handleMenu()\"\n          VanillaJs: .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='https://google.com' target='_blank' icon=\"${args.icon === 'none' ? '' : args.icon}\">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\" 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

@@ -12,38 +12,85 @@ export default {
     },
     argTypes: {
         content: {
+            name: 'Content',
             description: 'Text inside the notification is passed as slot.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: null
+                }
+            }
         },
         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.',
-            options: Object.values(icons).map(i => i['name']),
+            description: 'The icon to be displayed in the notification. Choose "none" to display no icon.',
+            options: ['none', ...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 => `<ifx-notification 
-  icon="${args.icon}" 
+const DefaultTemplate = args => {
+    const icon = args.icon === 'none' ? '' : args.icon;
+    return `<ifx-notification 
+  icon = "${icon}"
   variant="${args.variant}" 
   link-text="${args.linkText}" 
   link-href="${args.linkHref}"
   link-target="${args.linkTarget}">
   ${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,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"]}
+{"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,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,IAAI;iBACd;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,OAAO;oBACI,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    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      name: 'Content',\n      description: 'Text inside the notification is passed as slot.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: null\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.content}\n</ifx-notification>`;\n}\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

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

@@ -5,6 +5,25 @@ export default {
         label: 1,
         inverted: false,
     },
+    argTypes: {
+        label: {
+            name: 'Label of Number Indicator',
+            description: 'Specifies the number to be displayed within the 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;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"]}
+{"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,4DAA4D;YACzE,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: 'Specifies the number to be displayed within the 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"]}

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

@@ -7,10 +7,35 @@ export default {
         currentPage: 1,
     },
     argTypes: {
+        currentPage: {
+            description: 'Current page number.',
+            table: {
+                category: 'Ifx-pagination props',
+                defaultValue: {
+                    'summary': '0'
+                },
+                type: {
+                    summary: 'number',
+                },
+            },
+        },
+        total: {
+            description: 'Total number of items.',
+            table: {
+                category: 'Ifx-pagination props',
+                defaultValue: {
+                    'summary': '1'
+                },
+                type: {
+                    summary: 'number',
+                },
+            },
+        },
         ifxPageChange: {
             action: 'ifxPageChange',
-            description: 'Custom event emitted page is changed',
+            description: 'Custom event emitted page is changed.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxPageChange={handlePageChange}\nVue:@ifxPageChange="handlePageChange"\nAngular:(ifxPageChange)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPageChange", (event) => {//handle page change});',
@@ -19,8 +44,9 @@ export default {
         },
         ifxNextPage: {
             action: 'ifxNextPage',
-            description: 'Custom event emitted when next page button clicked',
+            description: 'Custom event emitted when next page button clicked.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxNextPage={handlePageChange}\nVue:@ifxNextPage="handlePageChange"\nAngular:(ifxNextPage)="handlePageChange()"\nVanillaJs:.addEventListener("ifxNextPage", (event) => {//handle page change});',
@@ -29,8 +55,9 @@ export default {
         },
         ifxPrevPage: {
             action: 'ifxPrevPage',
-            description: 'Custom event emitted when previous page button clicked',
+            description: 'Custom event emitted when previous page button clicked.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxPrevPage={handlePageChange}\nVue:@ifxPrevPage="handlePageChange"\nAngular:(ifxPrevPage)="handlePageChange()"\nVanillaJs:.addEventListener("ifxPrevPage", (event) => {//handle page change});',

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,MAAM,EAAE,eAAe;YACvB,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kNAAkN;iBACrN;aACF;SACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,aAAa;YACrB,WAAW,EAAE,oDAAoD;YACjE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,0MAA0M;iBAC7M;aACF;SACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,aAAa;YACrB,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,0MAA0M;iBAC7M;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACnE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Pagination',\n  // tags: ['autodocs'],\n\n  args: {\n    total: 50,\n    currentPage: 1,\n  },\n  argTypes: {\n    ifxPageChange: {\n      action: 'ifxPageChange',\n      description: 'Custom event emitted page is changed',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxPageChange={handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange\"\\nAngular:(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\", (event) => {//handle page change});',\n        },\n      },\n    },\n    ifxNextPage: {\n      action: 'ifxNextPage',\n      description: 'Custom event emitted when next page button clicked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxNextPage={handlePageChange}\\nVue:@ifxNextPage=\"handlePageChange\"\\nAngular:(ifxNextPage)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxNextPage\", (event) => {//handle page change});',\n        },\n      },\n    },\n    ifxPrevPage: {\n      action: 'ifxPrevPage',\n      description: 'Custom event emitted when previous page button clicked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxPrevPage={handlePageChange}\\nVue:@ifxPrevPage=\"handlePageChange\"\\nAngular:(ifxPrevPage)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPrevPage\", (event) => {//handle page change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const element = document.createElement('ifx-pagination');\n  element.setAttribute('total', args.total);\n  element.setAttribute('current-page', args.currentPage);\n  element.addEventListener('ifxPageChange', action('ifxPageChange'));\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
+{"version":3,"file":"pagination.stories.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,WAAW,EAAE,sBAAsB;YACnC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,KAAK,EAAE;YACL,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE;gBACL,QAAQ,EAAE,sBAAsB;gBAChC,YAAY,EAAE;oBACZ,SAAS,EAAE,GAAG;iBACf;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QAED,aAAa,EAAE;YACb,MAAM,EAAE,eAAe;YACvB,WAAW,EAAE,uCAAuC;YACpD,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,kNAAkN;iBACrN;aACF;SACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,aAAa;YACrB,WAAW,EAAE,qDAAqD;YAClE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,0MAA0M;iBAC7M;aACF;SACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,aAAa;YACrB,WAAW,EAAE,yDAAyD;YACtE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,0MAA0M;iBAC7M;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,OAAO,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACnE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Pagination',\n  // tags: ['autodocs'],\n\n  args: {\n    total: 50,\n    currentPage: 1,\n  },\n  argTypes: {\n    currentPage: {\n      description: 'Current page number.',\n      table: {\n        category: 'Ifx-pagination props',\n        defaultValue: {\n          'summary': '0'\n        },\n        type: {\n          summary: 'number',\n        },\n      },\n    },\n\n    total: {\n      description: 'Total number of items.',\n      table: {\n        category: 'Ifx-pagination props',\n        defaultValue: {\n          'summary': '1'\n        },\n        type: {\n          summary: 'number',\n        },\n      },\n    },\n\n    ifxPageChange: {\n      action: 'ifxPageChange',\n      description: 'Custom event emitted page is changed.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxPageChange={handlePageChange}\\nVue:@ifxPageChange=\"handlePageChange\"\\nAngular:(ifxPageChange)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPageChange\", (event) => {//handle page change});',\n        },\n      },\n    },\n    ifxNextPage: {\n      action: 'ifxNextPage',\n      description: 'Custom event emitted when next page button clicked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxNextPage={handlePageChange}\\nVue:@ifxNextPage=\"handlePageChange\"\\nAngular:(ifxNextPage)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxNextPage\", (event) => {//handle page change});',\n        },\n      },\n    },\n    ifxPrevPage: {\n      action: 'ifxPrevPage',\n      description: 'Custom event emitted when previous page button clicked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxPrevPage={handlePageChange}\\nVue:@ifxPrevPage=\"handlePageChange\"\\nAngular:(ifxPrevPage)=\"handlePageChange()\"\\nVanillaJs:.addEventListener(\"ifxPrevPage\", (event) => {//handle page change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const element = document.createElement('ifx-pagination');\n  element.setAttribute('total', args.total);\n  element.setAttribute('current-page', args.currentPage);\n  element.addEventListener('ifxPageChange', action('ifxPageChange'));\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/progress-bar/progress-bar.stories.js

@@ -3,17 +3,40 @@ export default {
     tags: ['autodocs'],
     args: {
         size: 'm',
-        percentage: 50,
+        value: 50,
         showLabel: false,
     },
     argTypes: {
-        percentage: {
+        value: {
+            description: 'The percentage of the progress bar.',
             control: { type: 'range', min: 0, max: 100 },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 50
+                }
+            }
+        },
+        showLabel: {
+            description: 'Shows the percentage of the progress bar. Does not fit in size ***s***.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         size: {
-            description: 'Size options: s (36px) and m (40px) - default: m',
+            description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
     },
 };
@@ -21,7 +44,7 @@ const Template = args => {
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `
     <ifx-progress-bar
-      value="${args.percentage}"
+      value="${args.value}"
       size="${args.size}"
       show-label="${args.showLabel}"
     ></ifx-progress-bar>
@@ -31,17 +54,17 @@ const Template = args => {
 export const Default = Template.bind({});
 Default.args = {
     size: 'm',
-    percentage: 50,
+    value: 50,
     showLabel: false,
 };
 export const Small = Template.bind({});
 Small.args = {
-    percentage: 75,
+    value: 75,
     size: 's',
 };
 export const WithLabel = Template.bind({});
 WithLabel.args = {
-    percentage: 25,
+    value: 25,
     showLabel: true,
 };
 //# sourceMappingURL=progress-bar.stories.js.map

package/dist/collection/components/progress-bar/progress-bar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,UAAU,EAAE,EAAE;QACd,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;SAC7C;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,UAAU;cAChB,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\n  title: 'Components/Progress Bar',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    percentage: 50,\n    showLabel: false,\n  },\n  argTypes: {\n    percentage: {\n      control: { type: 'range', min: 0, max: 100 },\n    },\n    size: {\n      description: 'Size options: s (36px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst Template = args => {\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `\n    <ifx-progress-bar\n      value=\"${args.percentage}\"\n      size=\"${args.size}\"\n      show-label=\"${args.showLabel}\"\n    ></ifx-progress-bar>\n  `;\n\n  return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  size: 'm',\n  percentage: 50,\n  showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n  percentage: 75,\n  size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n  percentage: 25,\n  showLabel: true,\n};\n"]}
+{"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;YAC5C,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\n  title: 'Components/Progress Bar',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    value: 50,\n    showLabel: false,\n  },\n  argTypes: {\n    value: {\n      description: 'The percentage of the progress bar.',\n      control: { type: 'range', min: 0, max: 100 },\n      table: {\n        category: 'ifx-progress-bar props',\n        defaultValue: {\n          summary: 50\n        }\n      }\n    },\n    showLabel: {\n      description: 'Shows the percentage of the progress bar. Does not fit in size ***s***.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-progress-bar props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-progress-bar props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n  },\n};\n\nconst Template = args => {\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `\n    <ifx-progress-bar\n      value=\"${args.value}\"\n      size=\"${args.size}\"\n      show-label=\"${args.showLabel}\"\n    ></ifx-progress-bar>\n  `;\n\n  return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  size: 'm',\n  value: 50,\n  showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n  value: 75,\n  size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n  value: 25,\n  showLabel: true,\n};\n"]}

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

@@ -3,35 +3,88 @@ export default {
     title: 'Components/Radio Button',
     // tags: ['autodocs'],
     args: {
+        label: 'Text',
         error: false,
         disabled: false,
         checked: false,
         size: 's',
-        label: 'Text',
         name: 'radio-button',
         value: 'radio',
     },
     argTypes: {
-        ifxChange: {
-            description: 'Custom event emitted when radio button checked and unchecked',
+        error: {
+            description: 'Indicates whether the radio button is in an error state.',
+            control: 'boolean',
             table: {
-                type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
-                },
-            },
-            action: 'ifxChange',
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the radio button.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        checked: {
+            description: 'Determines whether the radio button is selected by default.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        label: {
+            name: 'Label of Radio Button',
+            description: 'Defines the text displayed alongside the radio button.',
+            table: {
+                category: 'story controls',
+            }
         },
         size: {
-            description: 'Size options: s (20px) and m (24px) - default: s',
+            description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: 's'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
         },
         value: {
-            description: 'The value that gets submitted, when the radio button is checked'
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
+        },
+        ifxChange: {
+            description: 'Custom event emitted when radio button checked and unchecked.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
+                },
+            },
+            action: 'ifxChange',
         }
     },
 };

package/dist/collection/components/radio-button/radio-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,OAAO;KACf;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,WAAW,EAAE,8DAA8D;YAC3E,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;YAED,MAAM,EAAE,WAAW;SACpB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;SACxF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iEAAiE;SAC/E;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,kCAAkC;IAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1C,+BAA+B;IAC/B,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzD,yBAAyB;IACzB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    label: 'Text',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n\n      action: 'ifxChange',\n    },\n    size: {\n      description: 'Size options: s (20px) and m (24px) - default: s',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked'\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    label: 'Text',\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    error: {\n      description: 'Indicates whether the radio button is in an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the radio button.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    checked: {\n      description: 'Determines whether the radio button is selected by default.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    label: {\n      name: 'Label of Radio Button',\n      description: 'Defines the text displayed alongside the radio button.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    size: {\n      description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: 's'\n        },\n        type: {\n          summary: 's | m'\n        }\n      }\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n\n      action: 'ifxChange',\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/search-bar/search-bar.js

@@ -3,7 +3,7 @@ export class SearchBar {
     constructor() {
         this.handleCloseButton = () => {
             this.internalState = !this.internalState;
-            this.ifxSearchBarIsOpen.emit(this.internalState);
+            this.ifxOpen.emit(this.internalState);
         };
         this.handleFocus = () => {
             this.internalState = true;
@@ -15,7 +15,7 @@ export class SearchBar {
         this.maxlength = undefined;
     }
     async onNavbarMobile() {
-        this.ifxSearchBarIsOpen.emit(false);
+        this.ifxOpen.emit(false);
         this.internalState = false;
     }
     handlePropChange() {
@@ -26,13 +26,13 @@ export class SearchBar {
     }
     componentWillLoad() {
         this.setInitialState();
-        this.ifxSearchBarIsOpen.emit(this.internalState);
+        this.ifxOpen.emit(this.internalState);
     }
     handleInput(event) {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '06b4122a9df300f357050cd6b70cace1d2cfc4bd', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: '55ee16f7ec39bd5b8d5a78d8e2d842b3900e204b', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get is() { return "ifx-search-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -142,8 +142,8 @@ export class SearchBar {
                     "references": {}
                 }
             }, {
-                "method": "ifxSearchBarIsOpen",
-                "name": "ifxSearchBarIsOpen",
+                "method": "ifxOpen",
+                "name": "ifxOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/search-bar/search-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS;;QAqBpB,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAClD,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;sBA3CyB,IAAI;wBACF,KAAK;;;;;IASjC,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAClD,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxSearchBarIsOpen: EventEmitter;\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxSearchBarIsOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxSearchBarIsOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  \n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxSearchBarIsOpen.emit(this.internalState)\n  }\n\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS;;QAqBpB,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACvC,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;sBA3CyB,IAAI;wBACF,KAAK;;;;;IASjC,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IACvC,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  \n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}