@infineon/infineon-design-system-stencil 30.1.1--canary.1640.e4770f238d16196b9059daf4898d2d6ef7cdcbdd.0 → 30.2.0--canary.1641.2fa3dc92b1652a9ad0c0488d80e396bc04aab9d2.0

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

@@ -6,143 +6,69 @@ export default {
     // tags: ['autodocs'],
     args: {
         opened: false,
-        cancelButtonLabel: 'Cancel',
-        okButtonLabel: 'OK',
     },
     argTypes: {
         caption: {
             control: 'text',
-            description: 'Title for the modal.',
-            table: {
-                category: 'ifx-modal props',
-            },
+            description: 'Title for the modal',
         },
         opened: {
             control: {
                 disable: true,
             },
-            description: 'Default state of the modal.',
             table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'false',
-                },
                 type: {
                     summary: 'Example (in VanillaJs)',
                     detail: "const modal = document.getElementById('modal'); \nconst openButton = document.getElementById('open'); \n//add DOM event listeners (e.g. click and/or keypress)\n\nfunction openModal() { \nmodal.opened=true;\n\nfunction closeModal() { \nmodal.opened = false; \n}",
                 },
             },
+            description: 'Defaults to false - Can be set by referring to the component and setting it to false/true',
         },
         closeOnOverlayClick: {
             control: 'boolean',
-            description: 'Close the modal when clicking outside the window.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'false',
-                }
-            }
+            description: 'Close the modal when clicking outside the window',
         },
         showCloseButton: {
             control: 'boolean',
-            description: "Show or hide close button in the modal's header.",
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'true',
-                },
-            },
+            description: "Show or hide close button 'x'",
         },
         alertIcon: {
             options: Object.keys(icons),
             control: { type: 'select' },
-            description: 'Icon to be displayed in the alert modal.',
-            table: {
-                category: 'ifx-modal props',
-                type: {
-                    summary: 'string',
-                },
-            },
+            description: 'When specified together with alertIcon then an border to the right is shown',
         },
         size: {
             options: ['s', 'm', 'l'],
             control: { type: 'radio' },
-            description: 'Usable only when screen width is more than 1024px.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 's',
-                },
-                type: {
-                    summary: 's | m | l',
-                }
-            }
+            description: 'Usable only when screen width is more than 1024px'
         },
         variant: {
             options: ['default', 'alert-brand', 'alert-danger'],
             control: { type: 'radio' },
-            description: 'Variant of the modal.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'default',
-                },
-                type: {
-                    summary: 'default | alert-brand | alert-danger',
-                },
-            },
-        },
-        cancelButtonLabel: {
-            control: 'text',
-            description: 'Label for the cancel button.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'Cancel',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        okButtonLabel: {
-            control: 'text',
-            description: 'Label for the OK button.',
-            table: {
-                category: 'ifx-modal props',
-                defaultValue: {
-                    summary: 'OK',
-                },
-                type: {
-                    summary: 'string',
-                },
-            },
         },
-        ifxOpen: {
-            action: 'ifxOpen',
-            description: 'Custom event emitted when modal opens.',
+        ifxModalOpen: {
+            action: 'ifxModalOpen',
+            description: 'Custom event emitted when modal opens',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
+                    detail: 'React: onIfxModalOpen={handleChange}\nVue:@ifxModalOpen="handleChange"\nAngular:(ifxModalOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxModalOpen", (event) => {//handle change});',
                 },
             },
         },
-        ifxClose: {
-            action: 'ifxClose',
-            description: 'Custom event emitted when modal closes.',
+        ifxModalClose: {
+            action: 'ifxModalClose',
+            description: 'Custom event emitted when modal closes',
             table: {
-                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxClose={handleChange}\nVue:@ifxClose="handleChange"\nAngular:(ifxClose)="handleChange()"\nVanillaJs:.addEventListener("ifxClose", (event) => {//handle change});',
+                    detail: 'React: onIfxModalClose={handleChange}\nVue:@ifxModalClose="handleChange"\nAngular:(ifxModalClose)="handleChange()"\nVanillaJs:.addEventListener("ifxModalClose", (event) => {//handle change});',
                 },
             },
         },
     },
 };
-const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon, cancelButtonLabel, okButtonLabel }) => {
+const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon }) => {
     const modal = document.createElement('ifx-modal');
     modal.setAttribute('caption', caption);
     modal.setAttribute('variant', variant);
@@ -152,8 +78,8 @@ const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size
     modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);
     modal.setAttribute('show-close-button', showCloseButton);
     modal.setAttribute('size', size);
-    modal.addEventListener('ifxOpen', action('ifxOpen'));
-    modal.addEventListener('ifxClose', action('ifxClose'));
+    modal.addEventListener('ifxModalOpen', action('ifxModalOpen'));
+    modal.addEventListener('ifxModalClose', action('ifxModalClose'));
     const content = document.createElement('div');
     content.setAttribute('slot', 'content');
     content.innerHTML = `
@@ -164,12 +90,12 @@ const Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size
     buttons.setAttribute('slot', 'buttons');
     const cancelButton = document.createElement('ifx-button');
     cancelButton.setAttribute('variant', 'secondary');
-    cancelButton.textContent = cancelButtonLabel;
+    cancelButton.textContent = 'Button 1';
     cancelButton.addEventListener('click', () => {
         console.log('Button 1 clicked');
     });
     const primaryButton = document.createElement('ifx-button');
-    primaryButton.textContent = okButtonLabel;
+    primaryButton.textContent = 'Button 2';
     primaryButton.addEventListener('click', () => {
         console.log('Button 2 clicked');
     });
@@ -207,8 +133,5 @@ Alert.args = {
     alertIcon: 'arrowdoen24',
     size: 's',
     variant: 'alert-brand',
-    cancelButtonLabel: 'Cancel',
-    okButtonLabel: 'OK',
-    showCloseButton: false,
 };
 //# sourceMappingURL=modal.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal.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/Modal',\n  component: 'ifx-modal',\n  // tags: ['autodocs'],\n\n  args: {\n    opened: false,\n    cancelButtonLabel: 'Cancel',\n    okButtonLabel: 'OK',\n  },\n  argTypes: {\n    caption: {\n      control: 'text',\n      description: 'Title for the modal.',\n      table: {\n        category: 'ifx-modal props',\n      },\n    },\n    opened: {\n      control: {\n        disable: true,\n      },\n      description: 'Default state of the modal.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'false',\n        },\n        type: {\n          summary: 'Example (in VanillaJs)',\n          detail:\n            \"const modal = document.getElementById('modal'); \\nconst openButton = document.getElementById('open'); \\n//add DOM event listeners (e.g. click and/or keypress)\\n\\nfunction openModal() { \\nmodal.opened=true;\\n\\nfunction closeModal() { \\nmodal.opened = false; \\n}\",\n        },\n      },\n    },\n    closeOnOverlayClick: {\n      control: 'boolean',\n      description: 'Close the modal when clicking outside the window.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'false',\n        }\n      }\n    },\n    showCloseButton: {\n      control: 'boolean',\n      description: \"Show or hide close button in the modal's header.\",\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'true',\n        },\n      },\n    },\n    alertIcon: {\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      description: 'Icon to be displayed in the alert modal.',\n      table: {\n        category: 'ifx-modal props',\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    size: {\n      options: ['s', 'm', 'l'],\n      control: { type: 'radio' },\n      description: 'Usable only when screen width is more than 1024px.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 's',\n        },\n        type: {\n          summary: 's | m | l',\n        }\n      }\n    },\n    variant: {\n      options: ['default', 'alert-brand', 'alert-danger'],\n      control: { type: 'radio' },\n      description: 'Variant of the modal.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'default',\n        },\n        type: {\n          summary: 'default | alert-brand | alert-danger',\n        },\n      },\n    },\n    cancelButtonLabel: {\n      control: 'text',\n      description: 'Label for the cancel button.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'Cancel',\n        },\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    okButtonLabel: {\n      control: 'text',\n      description: 'Label for the OK button.',\n      table: {\n        category: 'ifx-modal props',\n        defaultValue: {\n          summary: 'OK',\n        },\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n\n    ifxOpen: {\n      action: 'ifxOpen',\n      description: 'Custom event emitted when modal opens.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n        },\n      },\n    },\n    ifxClose: {\n      action: 'ifxClose',\n      description: 'Custom event emitted when modal closes.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxClose={handleChange}\\nVue:@ifxClose=\"handleChange\"\\nAngular:(ifxClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxClose\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon, cancelButtonLabel, okButtonLabel }) => {\n  const modal = document.createElement('ifx-modal');\n  modal.setAttribute('caption', caption);\n  modal.setAttribute('variant', variant);\n\n  if (alertIcon) {\n    modal.setAttribute('alert-icon', alertIcon);\n  }\n  modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);\n  modal.setAttribute('show-close-button', showCloseButton);\n  modal.setAttribute('size', size)\n\n  modal.addEventListener('ifxOpen', action('ifxOpen'));\n  modal.addEventListener('ifxClose', action('ifxClose'));\n\n  const content = document.createElement('div');\n  content.setAttribute('slot', 'content');\n  content.innerHTML = `\n    <span>Modal content</span>\n  `;\n  modal.appendChild(content);\n  const buttons = document.createElement('div');\n  buttons.setAttribute('slot', 'buttons');\n\n  const cancelButton = document.createElement('ifx-button');\n  cancelButton.setAttribute('variant', 'secondary');\n  cancelButton.textContent = cancelButtonLabel;\n  cancelButton.addEventListener('click', () => {\n    console.log('Button 1 clicked');\n  });\n\n  const primaryButton = document.createElement('ifx-button');\n  primaryButton.textContent = okButtonLabel;\n  primaryButton.addEventListener('click', () => {\n    console.log('Button 2 clicked');\n  });\n\n  buttons.appendChild(cancelButton);\n  buttons.appendChild(primaryButton);\n  modal.appendChild(buttons);\n\n  const openButton = document.createElement('ifx-button');\n  openButton.id = 'open';\n  openButton.textContent = 'Open Modal';\n  openButton.addEventListener('click', () => {\n    modal.opened = true;\n  });\n  openButton.addEventListener('keydown', event => {\n    if (event.key === 'Enter') {\n      modal.opened = true;\n    }\n  });\n\n  const storyElement = document.createElement('div');\n  storyElement.appendChild(modal);\n  storyElement.appendChild(openButton);\n\n  return storyElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  caption: 'Modal Title',\n  showCloseButton: true,\n  closeOnOverlayClick: false,\n  size: 's',\n  variant: 'default',\n};\n\nexport const Alert = Template.bind({});\nAlert.args = {\n  caption: 'Alert-Brand Modal Title',\n  closeOnOverlayClick: true,\n  alertIcon: 'arrowdoen24',\n  size: 's',\n  variant: 'alert-brand',\n  cancelButtonLabel: 'Cancel',\n  okButtonLabel: 'OK',\n  showCloseButton: false,\n};\n"]}
+{"version":3,"file":"modal.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal.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/Modal',\n  component: 'ifx-modal',\n  // tags: ['autodocs'],\n\n  args: {\n    opened: false,\n  },\n  argTypes: {\n    caption: {\n      control: 'text',\n      description: 'Title for the modal',\n    },\n    opened: {\n      control: {\n        disable: true,\n      },\n      table: {\n        type: {\n          summary: 'Example (in VanillaJs)',\n          detail:\n            \"const modal = document.getElementById('modal'); \\nconst openButton = document.getElementById('open'); \\n//add DOM event listeners (e.g. click and/or keypress)\\n\\nfunction openModal() { \\nmodal.opened=true;\\n\\nfunction closeModal() { \\nmodal.opened = false; \\n}\",\n        },\n      },\n      description: 'Defaults to false - Can be set by referring to the component and setting it to false/true',\n    },\n    closeOnOverlayClick: {\n      control: 'boolean',\n      description: 'Close the modal when clicking outside the window',\n    },\n    showCloseButton: {\n      control: 'boolean',\n      description: \"Show or hide close button 'x'\",\n    },\n    alertIcon: {\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      description: 'When specified together with alertIcon then an border to the right is shown',\n    },\n    size: {\n      options: ['s', 'm', 'l'],\n      control: { type: 'radio'},\n      description: 'Usable only when screen width is more than 1024px'\n    },\n    variant: {\n      options: ['default', 'alert-brand', 'alert-danger'],\n      control: { type: 'radio' },\n    },\n    ifxModalOpen: {\n      action: 'ifxModalOpen',\n      description: 'Custom event emitted when modal opens',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxModalOpen={handleChange}\\nVue:@ifxModalOpen=\"handleChange\"\\nAngular:(ifxModalOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxModalOpen\", (event) => {//handle change});',\n        },\n      },\n    },\n    ifxModalClose: {\n      action: 'ifxModalClose',\n      description: 'Custom event emitted when modal closes',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxModalClose={handleChange}\\nVue:@ifxModalClose=\"handleChange\"\\nAngular:(ifxModalClose)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxModalClose\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = ({ caption, showCloseButton, closeOnOverlayClick, variant, size, alertIcon }) => {\n  const modal = document.createElement('ifx-modal');\n  modal.setAttribute('caption', caption);\n  modal.setAttribute('variant', variant);\n\n  if (alertIcon) {\n    modal.setAttribute('alert-icon', alertIcon);\n  }\n  modal.setAttribute('close-on-overlay-click', closeOnOverlayClick);\n  modal.setAttribute('show-close-button', showCloseButton);\n  modal.setAttribute('size', size)\n\n  modal.addEventListener('ifxModalOpen', action('ifxModalOpen'));\n  modal.addEventListener('ifxModalClose', action('ifxModalClose'));\n\n  const content = document.createElement('div');\n  content.setAttribute('slot', 'content');\n  content.innerHTML = `\n    <span>Modal content</span>\n  `;\n  modal.appendChild(content);\n  const buttons = document.createElement('div');\n  buttons.setAttribute('slot', 'buttons');\n\n  const cancelButton = document.createElement('ifx-button');\n  cancelButton.setAttribute('variant', 'secondary');\n  cancelButton.textContent = 'Button 1';\n  cancelButton.addEventListener('click', () => {\n    console.log('Button 1 clicked');\n  });\n\n  const primaryButton = document.createElement('ifx-button');\n  primaryButton.textContent = 'Button 2';\n  primaryButton.addEventListener('click', () => {\n    console.log('Button 2 clicked');\n  });\n\n  buttons.appendChild(cancelButton);\n  buttons.appendChild(primaryButton);\n  modal.appendChild(buttons);\n\n  const openButton = document.createElement('ifx-button');\n  openButton.id = 'open';\n  openButton.textContent = 'Open Modal';\n  openButton.addEventListener('click', () => {\n    modal.opened = true;\n  });\n  openButton.addEventListener('keydown', event => {\n    if (event.key === 'Enter') {\n      modal.opened = true;\n    }\n  });\n\n  const storyElement = document.createElement('div');\n  storyElement.appendChild(modal);\n  storyElement.appendChild(openButton);\n\n  return storyElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  caption: 'Modal Title',\n  showCloseButton: true,\n  closeOnOverlayClick: false,\n  size: 's',\n  variant: 'default',\n};\n\nexport const Alert = Template.bind({});\nAlert.args = {\n  caption: 'Alert-Brand Modal Title',\n  closeOnOverlayClick: true,\n  alertIcon: 'arrowdoen24',\n  size: 's',\n  variant: 'alert-brand',\n};\n"]}

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

@@ -2,11 +2,10 @@ import { icons } from "@infineon/infineon-icons";
 export default {
     title: 'Components/Navigation/Navbar',
     args: {
-        profileLabel: "",
         applicationName: 'Application name',
-        showLabelOfNavbarItem: true,
-        targetOfnavbarItem: '_self',
-        hrefOfNavbarItem: '',
+        hideLabel: true,
+        navbarItemTarget: '_blank',
+        navbarItemHref: '',
         searchBarIsOpen: false,
         navbarPositionFixed: false,
         showLogoAndAppname: true,
@@ -16,216 +15,26 @@ export default {
         hideOnMobile: true,
         profileImageUrl: "",
         userName: "",
-        showNavbarProfileLabel: true,
-        href: "http://google.com",
-        target: "_self",
-        alt: "profile image",
+        profileLabel: ""
     },
     argTypes: {
-        profileLabel: {
-            name: 'Label',
-            control: { type: 'text' },
-            description: 'Label for the profile.',
-            table: {
-                category: 'story controls',
-            },
-        },
-        applicationName: {
-            control: { type: 'text' },
-            description: 'The name of the application.',
-            table: {
-                category: 'ifx-navbar props',
-            },
-        },
-        navbarPositionFixed: {
-            name: 'fixed',
-            control: { type: 'boolean' },
-            description: 'Fix the navbar to the top of the page.',
-            table: {
-                defaultValue: { summary: 'true' },
-                category: 'ifx-navbar props',
-            },
-        },
-        showLogoAndAppname: {
-            control: { type: 'boolean' },
-            description: 'Show the logo and application name.',
-            table: {
-                defaultValue: { summary: 'true' },
-                category: 'ifx-navbar props',
-            },
-        },
-        logoHref: {
-            control: { type: 'text' },
-            description: 'The URL of the logo link.',
-            table: {
-                category: 'ifx-navbar props',
-            },
-        },
-        logoHrefTarget: {
-            description: 'The target of the logo link.',
-            options: ['_self', '_blank', '_parent'],
-            control: { type: 'radio' },
-            table: {
-                defaultValue: { summary: '_self' },
-                category: 'ifx-navbar props',
-                type: {
-                    summary: '_self | _blank | _parent',
-                },
-            },
-        },
-        showLabelOfNavbarItem: {
-            name: 'showLabel',
-            control: { type: 'boolean' },
-            description: 'Show the label of the navbar item.',
-            table: {
-                defaultValue: { summary: 'true' },
-                category: 'ifx-navbar-item props',
-            },
-        },
-        iconOfNavbarItem: {
-            name: 'icon',
+        icon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
-            description: 'The icon to display in the navbar item.',
-            table: {
-                category: 'ifx-navbar-item props',
-                type: {
-                    summary: 'string',
-                },
-            },
-        },
-        hrefOfNavbarItem: {
-            name: 'href',
-            control: { type: 'text' },
-            description: 'The URL of the navbar item link.',
-            table: {
-                category: 'ifx-navbar-item props',
-            },
-        },
-        targetOfnavbarItem: {
-            name: 'target',
-            control: { type: 'radio' },
-            options: ['_self'],
-            description: 'The target of the navbar item link.',
-            table: {
-                defaultValue: { summary: '_self' },
-                category: 'ifx-navbar-item props',
-                type: {
-                    summary: '_self',
-                },
-            },
         },
-        hideOnMobile: {
-            control: { type: 'boolean' },
-            description: 'Hide the navbar item on mobile.',
-            table: {
-                defaultValue: { summary: 'true' },
-                category: 'ifx-navbar-item props',
-            },
-        },
-        showNavbarProfileLabel: {
-            name: 'showLabel',
-            control: { type: 'boolean' },
-            description: 'Show label for the profile.',
-            table: {
-                defaultValue: { summary: 'true' },
-                category: 'ifx-navbar-profile props',
-            },
-        },
-        href: {
-            control: { type: 'text' },
-            description: 'The URL of the profile link.',
-            table: {
-                category: 'ifx-navbar-profile props',
-            },
-        },
-        profileImageUrl: {
-            name: 'imageUrl',
-            control: { type: 'text' },
-            description: 'The URL of the image.',
-            table: {
-                category: 'ifx-navbar-profile props',
-            },
-        },
-        target: {
-            control: { type: 'radio' },
+        logoHrefTarget: {
+            description: "If not '_self' or '_blank' or '_parent', then set to '_self' by default",
             options: ['_self', '_blank', '_parent'],
-            description: 'The target of the link.',
-            table: {
-                defaultValue: { summary: '_self' },
-                category: 'ifx-navbar-profile props',
-                type: {
-                    summary: '_self | _blank | _parent',
-                },
-            },
-        },
-        alt: {
-            control: { type: 'text' },
-            description: 'The alternative text of the image.',
-            table: {
-                category: 'ifx-navbar-profile props',
-            },
-        },
-        userName: {
-            control: { type: 'text' },
-            description: 'The name of the user.',
-            table: {
-                category: 'ifx-navbar-profile props',
-            },
-        },
-        searchBarIsOpen: {
-            name: 'isOpen',
-            control: { type: 'boolean' },
-            description: 'Show the search bar.',
-            table: {
-                defaultValue: { summary: 'true' },
-                category: 'ifx-search-bar props',
-            },
+            control: { type: 'radio' },
         },
         searchBarPosition: {
-            description: 'The position of the search bar.',
             options: ['left', 'right'],
             control: { type: 'radio' },
-            table: {
-                defaultValue: { summary: 'left' },
-                category: 'ifx-search-bar props',
-                type: {
-                    summary: 'left | right',
-                },
-            },
-        },
-        ifxNavbarMobileMenuIsOpen: {
-            action: 'ifxNavbarMobileMenuIsOpen',
-            description: 'Event emitted when the mobile menu is opened.',
-            table: {
-                category: 'custom events',
-                type: {
-                    summary: 'Framework integration',
-                    detail: `React: onifxNavbarMobileMenuIsOpen={handleOpen} 
-          Vue: @ifxNavbarMobileMenuIsOpen="handleOpen" 
-          Angular: (ifxNavbarMobileMenuIsOpen)="handleOpen()" 
-          VanillaJs: .addEventListener("ifxNavbarMobileMenuIsOpen", (event) => {/*handle open*/});`
-                },
-            },
-        },
-        ifxNavItem: {
-            action: 'ifxNavItem',
-            description: 'Event emitted when a navbar item is clicked.',
-            table: {
-                category: 'custom events',
-                type: {
-                    summary: 'Framework integration',
-                    detail: `React: onifxNavItem={handleClick}
-          Vue: @ifxNavItem="handleClick" 
-          Angular: (ifxNavItem)="handleClick()"
-          VanillaJs: .addEventListener("ifxNavItem", (event) => {/*handle click*/});`
-                },
-            },
         },
     },
 };
-const DefaultTemplate = args => `<ifx-navbar  show-logo-and-appname="${args.showLogoAndAppname}" application-name="${args.applicationName}" fixed="${args.navbarPositionFixed}" logo-href="${args.logoHref}" logo-href-target="${args.logoHrefTarget}">
-  <ifx-navbar-item icon="${args.iconOfNavbarItem}" slot="left-item" target="${args.targetOfnavbarItem}" href="${args.hrefOfNavbarItem}" hide-on-mobile="${args.hideOnMobile}">
+const DefaultTemplate = args => `<ifx-navbar  show-logo-and-appname="${args.showLogoAndAppname}" application-name="${args.applicationName}" fixed="${args.fixed}" logo-href="${args.logoHref}" logo-href-target="${args.logoHrefTarget}">
+  <ifx-navbar-item icon="${args.icon}" slot="left-item" target="" href="" >
     Menu Item
     <ifx-navbar-item icon="">
       Layer 1 Nested Item 1
@@ -257,7 +66,7 @@ const DefaultTemplate = args => `<ifx-navbar  show-logo-and-appname="${args.show
 
   </ifx-navbar-item>
 
-  <ifx-navbar-item href="${args.hrefOfNavbarItem}" target="_self" slot="left-item" icon="" show-label="${args.showLabelOfNavbarItem}">
+  <ifx-navbar-item href="${args.navbarItemHref}" target="${args.navbarItemTarget}" slot="left-item" icon="" show-label="${args.hideLabel}">
     Menu Item
   </ifx-navbar-item>
 
@@ -274,7 +83,7 @@ const DefaultTemplate = args => `<ifx-navbar  show-logo-and-appname="${args.show
   <ifx-navbar-item slot="right-item" hide-on-mobile="true" show-label='false' icon="image-16">
   </ifx-navbar-item>
 
-  <ifx-navbar-profile user-name="${args.userName}" slot="right-item" image-url="${args.profileImageUrl}" show-label="${args.showNavbarProfileLabel}" href="" target="${args.target}" alt="${args.alt}">${args.profileLabel}</ifx-navbar-profile>
+  <ifx-navbar-profile user-name="${args.userName}" slot="right-item" image-url="${args.profileImageUrl}" show-label="true" href="" target="_blank">${args.profileLabel}</ifx-navbar-profile>
 </ifx-navbar>`;
 export const Default = DefaultTemplate.bind({});
 //# sourceMappingURL=navbar.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navbar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nexport default {\n  title: 'Components/Navigation/Navbar',\n  args: {\n    profileLabel: \"\",\n    applicationName: 'Application name',\n    showLabelOfNavbarItem: true,\n    targetOfnavbarItem: '_self',\n    hrefOfNavbarItem: '',\n    searchBarIsOpen: false,\n    navbarPositionFixed: false,\n    showLogoAndAppname: true,\n    logoHref: 'http://google.com',\n    logoHrefTarget: '_self',\n    searchBarPosition: 'left',\n    hideOnMobile: true,\n    profileImageUrl: \"\",\n    userName: \"\",\n    showNavbarProfileLabel: true,\n    href: \"http://google.com\",\n    target: \"_self\",\n    alt: \"profile image\",\n  },\n  argTypes: {\n    profileLabel: {\n      name: 'Label',\n      control: { type: 'text' },\n      description: 'Label for the profile.',\n      table: {\n        category: 'story controls',\n      },\n    },\n    applicationName: {\n      control: { type: 'text' },\n      description: 'The name of the application.',\n      table: {\n        category: 'ifx-navbar props',\n      },\n    },\n    navbarPositionFixed: {\n      name: 'fixed',\n      control: { type: 'boolean' },\n      description: 'Fix the navbar to the top of the page.',\n      table: {\n        defaultValue: { summary: 'true' },\n        category: 'ifx-navbar props',\n      },\n    },\n    showLogoAndAppname: {\n      control: { type: 'boolean' },\n      description: 'Show the logo and application name.',\n      table: {\n        defaultValue: { summary: 'true' },\n        category: 'ifx-navbar props',\n      },\n    },\n    logoHref: {\n      control: { type: 'text' },\n      description: 'The URL of the logo link.',\n      table: {\n        category: 'ifx-navbar props',\n      },\n    },\n    logoHrefTarget: {\n      description: 'The target of the logo link.',\n      options: ['_self', '_blank', '_parent'],\n      control: { type: 'radio' },\n      table: {\n        defaultValue: { summary: '_self' },\n        category: 'ifx-navbar props',\n        type: {\n          summary: '_self | _blank | _parent',\n        },\n      },\n    },\n    showLabelOfNavbarItem: {\n      name: 'showLabel',\n      control: { type: 'boolean' },\n      description: 'Show the label of the navbar item.',\n      table: {\n        defaultValue: { summary: 'true' },\n        category: 'ifx-navbar-item props',\n      },\n    },\n    iconOfNavbarItem: {\n      name: 'icon',\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      description: 'The icon to display in the navbar item.',\n      table: {\n        category: 'ifx-navbar-item props',\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    hrefOfNavbarItem: {\n      name: 'href',\n      control: { type: 'text' },\n      description: 'The URL of the navbar item link.',\n      table: {\n        category: 'ifx-navbar-item props',\n      },\n    },\n\n    targetOfnavbarItem: {\n      name: 'target',\n      control: { type: 'radio' },\n      options: ['_self'],\n      description: 'The target of the navbar item link.',\n      table: {\n        defaultValue: { summary: '_self' },\n        category: 'ifx-navbar-item props',\n        type: {\n          summary: '_self',\n        },\n      },\n    },\n    hideOnMobile: {\n      control: { type: 'boolean' },\n      description: 'Hide the navbar item on mobile.',\n      table: {\n        defaultValue: { summary: 'true' },\n        category: 'ifx-navbar-item props',\n      },\n    },\n    showNavbarProfileLabel: {\n      name: 'showLabel',\n      control: { type: 'boolean' },\n      description: 'Show label for the profile.',\n      table: {\n        defaultValue: { summary: 'true' },\n        category: 'ifx-navbar-profile props',\n      },\n    },\n    href: {\n      control: { type: 'text' },\n      description: 'The URL of the profile link.',\n      table: {\n        category: 'ifx-navbar-profile props',\n      },\n    },\n    profileImageUrl: {\n      name: 'imageUrl',\n      control: { type: 'text' },\n      description: 'The URL of the image.',\n      table: {\n        category: 'ifx-navbar-profile props',\n      },\n    },\n    target: {\n      control: { type: 'radio' },\n      options: ['_self', '_blank', '_parent'],\n      description: 'The target of the link.',\n      table: {\n        defaultValue: { summary: '_self' },\n        category: 'ifx-navbar-profile props',\n        type: {\n          summary: '_self | _blank | _parent',\n        },\n      },\n    },\n    alt: {\n      control: { type: 'text' },\n      description: 'The alternative text of the image.',\n      table: {\n        category: 'ifx-navbar-profile props',\n      },\n    },\n    userName: {\n      control: { type: 'text' },\n      description: 'The name of the user.',\n      table: {\n        category: 'ifx-navbar-profile props',\n      },\n    },\n    searchBarIsOpen: {\n      name: 'isOpen',\n      control: { type: 'boolean' },\n      description: 'Show the search bar.',\n      table: {\n        defaultValue: { summary: 'true' },\n        category: 'ifx-search-bar props',\n      },\n    },\n    searchBarPosition: {\n      description: 'The position of the search bar.',\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n      table: {\n        defaultValue: { summary: 'left' },\n        category: 'ifx-search-bar props',\n        type: {\n          summary: 'left | right',\n        },\n      },\n    },\n    ifxNavbarMobileMenuIsOpen: {\n      action: 'ifxNavbarMobileMenuIsOpen',\n      description: 'Event emitted when the mobile menu is opened.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `React: onifxNavbarMobileMenuIsOpen={handleOpen} \n          Vue: @ifxNavbarMobileMenuIsOpen=\"handleOpen\" \n          Angular: (ifxNavbarMobileMenuIsOpen)=\"handleOpen()\" \n          VanillaJs: .addEventListener(\"ifxNavbarMobileMenuIsOpen\", (event) => {/*handle open*/});`\n        },\n      },\n    },\n    ifxNavItem: {\n      action: 'ifxNavItem',\n      description: 'Event emitted when a navbar item is clicked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `React: onifxNavItem={handleClick}\n          Vue: @ifxNavItem=\"handleClick\" \n          Angular: (ifxNavItem)=\"handleClick()\"\n          VanillaJs: .addEventListener(\"ifxNavItem\", (event) => {/*handle click*/});`},\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-navbar  show-logo-and-appname=\"${args.showLogoAndAppname}\" application-name=\"${args.applicationName}\" fixed=\"${args.navbarPositionFixed}\" logo-href=\"${args.logoHref}\" logo-href-target=\"${args.logoHrefTarget}\">\n  <ifx-navbar-item icon=\"${args.iconOfNavbarItem}\" slot=\"left-item\" target=\"${args.targetOfnavbarItem}\" href=\"${args.hrefOfNavbarItem}\" hide-on-mobile=\"${args.hideOnMobile}\">\n    Menu Item\n    <ifx-navbar-item icon=\"\">\n      Layer 1 Nested Item 1\n      <ifx-navbar-item>\n        Layer 2 Nested Item 2\n        <ifx-navbar-item href=\"http://google.com\" target=\"_blank\">Link Layer 3 Nested Item 1</ifx-navbar-item>\n        <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>\n        <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>\n        <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>\n      </ifx-navbar-item>\n      <ifx-navbar-item >Layer 2 Nested Item 3</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>\n    </ifx-navbar-item>\n\n    <ifx-navbar-item>\n      Layer 1 Nested Item 2\n      <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>\n    </ifx-navbar-item>\n\n    <ifx-navbar-item>Nested Item 3</ifx-navbar-item>\n\n    <ifx-navbar-item>\n      Layer 1 Nested Item 4\n      <ifx-navbar-item>Nested Item 4</ifx-navbar-item>\n    </ifx-navbar-item>\n\n  </ifx-navbar-item>\n\n  <ifx-navbar-item href=\"${args.hrefOfNavbarItem}\" target=\"_self\" slot=\"left-item\" icon=\"\" show-label=\"${args.showLabelOfNavbarItem}\">\n    Menu Item\n  </ifx-navbar-item>\n\n  <ifx-navbar-item slot=\"left-item\">\n    More\n    <ifx-navbar-item>Item1</ifx-navbar-item>\n    <ifx-navbar-item>Item2</ifx-navbar-item>\n  </ifx-navbar-item>\n\n  <ifx-search-bar slot=\"search-bar-${args.searchBarPosition}\" is-open=\"${args.searchBarIsOpen}\"></ifx-search-bar>\n\n  <ifx-navbar-item slot=\"right-item\" target=\"_blank\" href=\"http://google.com\" hide-on-mobile=\"${args.hideOnMobile}\" show-label=\"true\" icon=\"image-16\">\n  </ifx-navbar-item>\n  <ifx-navbar-item slot=\"right-item\" hide-on-mobile=\"true\" show-label='false' icon=\"image-16\">\n  </ifx-navbar-item>\n\n  <ifx-navbar-profile user-name=\"${args.userName}\" slot=\"right-item\" image-url=\"${args.profileImageUrl}\" show-label=\"${args.showNavbarProfileLabel}\" href=\"\" target=\"${args.target}\" alt=\"${args.alt}\">${args.profileLabel}</ifx-navbar-profile>\n</ifx-navbar>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"navbar.stories.js","sourceRoot":"","sources":["../../../../src/components/navigation/navbar/navbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,IAAI,EAAE;QACJ,eAAe,EAAE,kBAAkB;QACnC,SAAS,EAAE,IAAI;QACf,gBAAgB,EAAE,QAAQ;QAC1B,cAAc,EAAE,EAAE;QAClB,eAAe,EAAE,KAAK;QACtB,mBAAmB,EAAE,KAAK;QAC1B,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,mBAAmB;QAC7B,cAAc,EAAE,OAAO;QACvB,iBAAiB,EAAE,MAAM;QACzB,YAAY,EAAE,IAAI;QAClB,eAAe,EAAE,EAAE;QACnB,QAAQ,EAAE,EAAE;QACZ,YAAY,EAAE,EAAE;KACjB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,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,cAAc,EAAE;YACd,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,uCAAuC,IAAI,CAAC,kBAAkB,uBAAuB,IAAI,CAAC,eAAe,YAAY,IAAI,CAAC,KAAK,gBAAgB,IAAI,CAAC,QAAQ,uBAAuB,IAAI,CAAC,cAAc;2BAC7K,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAgCT,IAAI,CAAC,cAAc,aAAa,IAAI,CAAC,gBAAgB,0CAA0C,IAAI,CAAC,SAAS;;;;;;;;;;qCAUnG,IAAI,CAAC,iBAAiB,cAAc,IAAI,CAAC,eAAe;;gGAEG,IAAI,CAAC,YAAY;;;;;mCAK9E,IAAI,CAAC,QAAQ,kCAAkC,IAAI,CAAC,eAAe,+CAA+C,IAAI,CAAC,YAAY;cACxJ,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Navigation/Navbar',\n  args: {\n    applicationName: 'Application name',\n    hideLabel: true,\n    navbarItemTarget: '_blank',\n    navbarItemHref: '',\n    searchBarIsOpen: false,\n    navbarPositionFixed: false,\n    showLogoAndAppname: true,\n    logoHref: 'http://google.com',\n    logoHrefTarget: '_self',\n    searchBarPosition: 'left',\n    hideOnMobile: true,\n    profileImageUrl: \"\",\n    userName: \"\",\n    profileLabel: \"\"\n  },\n  argTypes: {\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    logoHrefTarget: {\n      description: \"If not '_self' or '_blank' or '_parent', then set to '_self' by default\",\n      options: ['_self', '_blank', '_parent'],\n      control: { type: 'radio' },\n    },\n    searchBarPosition: {\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-navbar  show-logo-and-appname=\"${args.showLogoAndAppname}\" application-name=\"${args.applicationName}\" fixed=\"${args.fixed}\" logo-href=\"${args.logoHref}\" logo-href-target=\"${args.logoHrefTarget}\">\n  <ifx-navbar-item icon=\"${args.icon}\" slot=\"left-item\" target=\"\" href=\"\" >\n    Menu Item\n    <ifx-navbar-item icon=\"\">\n      Layer 1 Nested Item 1\n      <ifx-navbar-item>\n        Layer 2 Nested Item 2\n        <ifx-navbar-item href=\"http://google.com\" target=\"_blank\">Link Layer 3 Nested Item 1</ifx-navbar-item>\n        <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>\n        <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>\n        <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>\n      </ifx-navbar-item>\n      <ifx-navbar-item >Layer 2 Nested Item 3</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>\n    </ifx-navbar-item>\n\n    <ifx-navbar-item>\n      Layer 1 Nested Item 2\n      <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>\n      <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>\n    </ifx-navbar-item>\n\n    <ifx-navbar-item>Nested Item 3</ifx-navbar-item>\n\n    <ifx-navbar-item>\n      Layer 1 Nested Item 4\n      <ifx-navbar-item>Nested Item 4</ifx-navbar-item>\n    </ifx-navbar-item>\n\n  </ifx-navbar-item>\n\n  <ifx-navbar-item href=\"${args.navbarItemHref}\" target=\"${args.navbarItemTarget}\" slot=\"left-item\" icon=\"\" show-label=\"${args.hideLabel}\">\n    Menu Item\n  </ifx-navbar-item>\n\n  <ifx-navbar-item slot=\"left-item\">\n    More\n    <ifx-navbar-item>Item1</ifx-navbar-item>\n    <ifx-navbar-item>Item2</ifx-navbar-item>\n  </ifx-navbar-item>\n\n  <ifx-search-bar slot=\"search-bar-${args.searchBarPosition}\" is-open=\"${args.searchBarIsOpen}\"></ifx-search-bar>\n\n  <ifx-navbar-item slot=\"right-item\" target=\"_blank\" href=\"http://google.com\" hide-on-mobile=\"${args.hideOnMobile}\" show-label=\"true\" icon=\"image-16\">\n  </ifx-navbar-item>\n  <ifx-navbar-item slot=\"right-item\" hide-on-mobile=\"true\" show-label='false' icon=\"image-16\">\n  </ifx-navbar-item>\n\n  <ifx-navbar-profile user-name=\"${args.userName}\" slot=\"right-item\" image-url=\"${args.profileImageUrl}\" show-label=\"true\" href=\"\" target=\"_blank\">${args.profileLabel}</ifx-navbar-profile>\n</ifx-navbar>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/navigation/sidebar/sidebar-item.js

@@ -2,8 +2,8 @@ import { h } from "@stencil/core";
 export class SidebarItem {
     constructor() {
         this.icon = "";
-        this.showIcon = true;
-        this.showIconWrapper = false;
+        this.hasIcon = true;
+        this.hasIconWrapper = false;
         this.href = "";
         this.internalHref = "";
         this.target = "_self";
@@ -36,10 +36,10 @@ export class SidebarItem {
     }
     handleConsoleError(event) {
         if (event.detail) {
-            this.showIcon = false;
+            this.hasIcon = false;
         }
         else {
-            this.showIcon = true;
+            this.hasIcon = true;
         }
     }
     handleEventEmission() {
@@ -243,11 +243,11 @@ export class SidebarItem {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'b7041e7f2353dbcba59535b4bed3b9fc175ebf95' }, h("a", { key: 'cd9b084de6f61869cf0736d8228b5254db2069a0', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
-            h("div", { key: 'f2ffe52ea9fcc7943e680d9e30370be6597e76cc', class: `sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: 'a6d29f1669c08b4692d55bd185834f0bea74e66c', icon: this.icon })), h("div", { key: '2e8f6e3f9ba0cf69b1e42d99f8e64a9b62744100', class: "sidebar__nav-item-label" }, h("slot", { key: '6d983149c63516be56eb666ef7f35f1183a53cd4' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
-            h("div", { key: '17d768dc0aba9bf7a891d6547b86059e11136c5a', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
-                h("span", { key: '7f1877e3b562342a7aa1af71e8fb86571390772e', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: '7cc2f8685a8d0f30d07d422373c68bfb646841b9', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
-                h("span", { key: '0b249cbfba2584e3bb76ba63f657c82afb489e79', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '8b1c2482015d077b674c0607365ddf2e0989fc77' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: '955e308ba0032e1d8d5fcca619f74c8216c3855f', class: 'expandable__submenu' })));
+        return (h("div", { key: '300c33eb3478fd56763957338d35b71e10e7f051' }, h("a", { key: 'baec46c86811da4d99f462db822d0080128ba168', tabIndex: 1, onKeyDown: (event) => this.handleKeyDown(event), href: this.internalHref, onClick: () => this.toggleSubmenu(), target: this.target, class: `sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : ""} ${this.isSubMenuItem ? 'submenu__item' : ""}` }, this.icon &&
+            h("div", { key: '25774f4e3389b73d1835bc96801d7c2671b57754', class: `sidebar__nav-item-icon-wrapper ${!this.hasIcon ? 'noIcon' : ""}` }, h("ifx-icon", { key: '2598dbcaa212d27c687d2920b8a9e6a17b8ee1a0', icon: this.icon })), h("div", { key: '5e6567053aaf33af5b01bdf997f16fb176f76317', class: "sidebar__nav-item-label" }, h("slot", { key: '624d78a76b5b87b31caf10d294299fe2b643785a' })), (this.isExpandable || ((_a = this.numberIndicator) === null || _a === void 0 ? void 0 : _a.trim())) &&
+            h("div", { key: '5e8afc60f5da57e00390e7f7982ef87c724cdde6', class: "sidebar__nav-item-indicator" }, this.isExpandable &&
+                h("span", { key: '321321f3ba9bda67d439c719776ae51cb1df172d', class: 'item__arrow-wrapper' }, h("ifx-icon", { key: '992934501145b6f641d23a4975c24ce4c8a39ef5', icon: "chevron-down-12" })), ((_b = this.numberIndicator) === null || _b === void 0 ? void 0 : _b.trim()) && !this.isExpandable && !this.isNested &&
+                h("span", { key: '41ea0d96c7d1e87f92093570863218ef6240a285', class: 'item__number-indicator' }, h("ifx-number-indicator", { key: '2e45be1b110dfa845f36cc13e875f2712e7c9039' }, this.numberIndicator)))), this.isExpandable && h("ul", { key: '15674f7d3e5462fa11e6048737e3f865ac2b16b8', class: 'expandable__submenu' })));
     }
     static get is() { return "ifx-sidebar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -412,8 +412,8 @@ export class SidebarItem {
     }
     static get states() {
         return {
-            "showIcon": {},
-            "showIconWrapper": {},
+            "hasIcon": {},
+            "hasIconWrapper": {},
             "internalHref": {},
             "isExpandable": {},
             "isNested": {},