navbar-item: implements a notification feature

examples/wrapper-components/react-vite-js/package.json

@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-react": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/wrapper-components/vue-javascript/package.json

@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-vue": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-angular": "^30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0"
+    "@infineon/infineon-design-system-stencil": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-stencil": "^30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0"
+    "@infineon/infineon-design-system-stencil": "^30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+  "version": "30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/components/navigation/navbar/navbar-item.scss

@@ -73,6 +73,12 @@
     order: 0;
     flex-grow: 0;
 
+    & .number__indicator-wrapper { 
+      position: absolute;
+      top: -16px;
+      right: -12px;
+    }
+
     & .username__tooltip { 
       display: none;
       position: absolute;

packages/components/src/components/navigation/navbar/navbar-item.tsx

@@ -20,6 +20,7 @@ export class NavbarItem {
   @State() isSidebarMenuItem: boolean = false;
   @State() itemPosition: string;
   @Event() ifxNavItem: EventEmitter;
+  @Prop() numberIndicator: number;
 
   @Listen('mousedown', { target: 'document' })
   handleOutsideClick(event: MouseEvent) {
@@ -189,6 +190,7 @@ export class NavbarItem {
   }
 
   componentDidLoad() { 
+    this.handleLabelWrapper()
     if(this.hasChildNavItems) { 
       const navItems = this.getNavbarItems();
       this.relocateItemsToFirstlayer(navItems)
@@ -350,6 +352,17 @@ export class NavbarItem {
     }
   }
 
+  handleLabelWrapper() { 
+    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');
+    const navItem = this.getNavBarItem();
+    const slot = labelWrapper.querySelector('slot');
+    if (!slot.assignedNodes().length) {
+      navItem.classList.add('removeLabel')
+    } else if(this.showLabel && navItem.classList.contains('removeLabel')) {
+      navItem.classList.remove('removeLabel')
+    }
+  }
+
   render() {
     return (
       <div class="container" onMouseLeave={e => this.handleNestedLayerMenu(e)}  onMouseEnter={e => this.handleNestedLayerMenu(e)}>
@@ -363,6 +376,10 @@ export class NavbarItem {
           <div class="inner__content-wrapper">
             <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? "removeWrapper" : ""}`}>
               {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}
+              {this.icon && !isNaN(this.numberIndicator) && 
+              <div class="number__indicator-wrapper">
+                <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>
+              </div>}
             </div>
 
             {this.itemPosition === 'left' 

packages/components/src/components/number-indicator/readme.md

@@ -18,6 +18,7 @@
 
  - [ifx-chip](../chip)
  - [ifx-filter-accordion](../table-advanced-version/filter-type-group/filter-accordion)
+ - [ifx-navbar-item](../navigation/navbar)
  - [ifx-overview-table](../overview-table)
  - [ifx-sidebar-item](../navigation/sidebar)
 
@@ -26,6 +27,7 @@
 graph TD;
   ifx-chip --> ifx-number-indicator
   ifx-filter-accordion --> ifx-number-indicator
+  ifx-navbar-item --> ifx-number-indicator
   ifx-overview-table --> ifx-number-indicator
   ifx-sidebar-item --> ifx-number-indicator
   style ifx-number-indicator fill:#f9f,stroke:#333,stroke-width:4px

packages/components/src/index.html

@@ -10,7 +10,7 @@
   <script nomodule src="/build/infineon-design-system-stencil.js"></script>
 
   <style defer>
-    
+
   </style>
 
   <script>