@infineon/infineon-design-system-stencil 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.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    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      control: { type: 'radio' },\n      options: ['_self'],\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"]}

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

@@ -1,10 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class Notification {
     constructor() {
-        this.icon = undefined;
         this.variant = 'success';
-        this.linkText = undefined;
-        this.linkHref = undefined;
         this.linkTarget = '_blank';
     }
     getClassName() {

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

@@ -1 +1 @@
-{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../../src/components/notification/notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,YAAY;;;uBAEgB,SAAS;;;0BAGnB,QAAQ;;IAG7B,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C;gBACE,OAAO,oCAAoC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE;gBAC5D,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC;gBACN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,4DAAK,KAAK,EAAC,wBAAwB;wBACjC,8DAAO,CACH;oBACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;wBAChC,4DAAK,KAAK,EAAC,wBAAwB;4BACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU;gCACnD,IAAI,CAAC,QAAQ;gCAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'warning' | 'error';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'warning':\n        return 'ifx-notification__wrapper--warning';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"]}
+{"version":3,"file":"notification.js","sourceRoot":"","sources":["../../../src/components/notification/notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,YAAY;IALzB;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KAwCvC;IArCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C;gBACE,OAAO,oCAAoC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE;gBAC5D,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC;gBACN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,4DAAK,KAAK,EAAC,wBAAwB;wBACjC,8DAAO,CACH;oBACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;wBAChC,4DAAK,KAAK,EAAC,wBAAwB;4BACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU;gCACnD,IAAI,CAAC,QAAQ;gCAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'warning' | 'error';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'warning':\n        return 'ifx-notification__wrapper--warning';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"]}

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

@@ -3,7 +3,7 @@ export default {
     title: 'Components/Notification',
     tags: ['autodocs'],
     args: {
-        content: "Sample Notification",
+        label: "Sample Notification",
         variant: 'success',
         icon: 'c-check-16',
         linkText: 'Link',
@@ -11,39 +11,86 @@ export default {
         linkTarget: '_blank',
     },
     argTypes: {
-        content: {
-            description: 'Text inside the notification is passed as slot.',
+        label: {
+            name: 'Label of Notification',
+            description: 'Set the text label of the *<ifx-notification>*.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         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}
+  ${args.label}
 </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,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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"number-indicator.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,eAAe;;wBACE,KAAK;;IAEjC,MAAM;QACJ,OAAO,CACL,0EAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;YACzG;gBACE,8DAAQ,CACH,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Prop() inverted: boolean = false;\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span>\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"number-indicator.js","sourceRoot":"","sources":["../../../src/components/number-indicator/number-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,eAAe;IAL5B;QAMU,aAAQ,GAAY,KAAK,CAAC;KAWnC;IATC,MAAM;QACJ,OAAO,CACL,0EAAgB,oBAAoB,EAAC,KAAK,EAAE,8BAA8B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;YACzG;gBACE,8DAAQ,CACH,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-number-indicator',\n  styleUrl: 'number-indicator.scss',\n  shadow: true\n})\nexport class NumberIndicator {\n  @Prop() inverted: boolean = false;\n\n  render() {\n    return (\n      <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : \"\"}`}>\n        <span>\n          <slot />\n        </span>\n      </div>\n    );\n  }\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: '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;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,+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"]}