Merge pull request #1481 from Infineon/1478-sidebar-number-indicators…

…-are-loaded-by-default

fix(1478): fix deformed style of number indicator when empty

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.6.3",
+  "version": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.6.3",
+  "version": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.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": "^25.6.3",
+    "@infineon/infineon-design-system-angular": "^25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.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": "25.6.3",
+  "version": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.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.3",
-    "@infineon/infineon-design-system-stencil": "25.6.3"
+    "@infineon/infineon-design-system-stencil": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.6.3",
+  "version": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.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.3",
-    "@infineon/infineon-design-system-stencil": "25.6.3"
+    "@infineon/infineon-design-system-stencil": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.0"
   },
   "auto": {
     "plugins": [

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.6.3",
+  "version": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.6.3"
+    "@infineon/infineon-design-system-stencil": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.6.3",
+  "version": "25.6.4--canary.1481.73e1ba0d587d8501e7e6c61d263333d311c43ca7.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

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

@@ -16,7 +16,7 @@ export class SidebarItem {
   @State() isExpandable: boolean = false;
   @State() isNested: boolean = true;
   @State() isSubMenuItem: boolean = false;
-  @Prop() numberIndicator: number;
+  @Prop() numberIndicator: string;
   @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item
   @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active
 
@@ -302,19 +302,22 @@ export class SidebarItem {
           <div class="sidebar__nav-item-label">
             <slot />
           </div>
-          <div class="sidebar__nav-item-indicator">
-            {this.isExpandable &&
-              <span class='item__arrow-wrapper'>
-                <ifx-icon icon="chevron-down-12" />
-              </span>
-            }
-
-            {!this.isExpandable && !this.isNested &&
-              <span class='item__number-indicator'>
-                <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>
-              </span>}
-
-          </div>
+          {
+          (this.isExpandable || this.numberIndicator?.trim()) && 
+            <div class="sidebar__nav-item-indicator">
+              {this.isExpandable &&
+                <span class='item__arrow-wrapper'>
+                  <ifx-icon icon="chevron-down-12" />
+                </span>
+              }
+
+              {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&
+                <span class='item__number-indicator'>
+                  <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>
+                </span>}
+
+            </div>
+          }
         </a>
         {this.isExpandable && <ul class='expandable__submenu'></ul>}
 

packages/components/src/components/number-indicator/number-indicator.scss

@@ -8,7 +8,7 @@
 .numberIndicator__container {
   display: inline-flex;
   padding: 0px 4px;
-  height: 16px;
+  max-height: 16px;
   justify-content: center;
   align-items: center;
   border-radius: 100px;

packages/components/src/components/number-indicator/number-indicator.tsx

@@ -9,8 +9,6 @@ import { Component, h, Prop } from '@stencil/core';
 export class NumberIndicator {
   @Prop() inverted: boolean = false;
 
-
-
   render() {
     return (
       <div aria-label='a number indicator' class={`numberIndicator__container ${this.inverted ? 'inverted' : ""}`}>

packages/components/src/index.html

@@ -20,6 +20,7 @@
 </head>
 
 <body>
+
 
 </body>