siemens · chintankavathia · Apr 17, 2026
@@ -286,10 +286,10 @@ export type WebComponent = CommonFactoryFields & {
 export interface Widget {
     componentFactory: WidgetComponentFactory;
     defaults?: Pick<WidgetConfig, 'width' | 'height' | 'minWidth' | 'minHeight' | 'heading' | 'expandable' | 'immutable' | 'image' | 'accentLine'>;
-    description?: string;
+    description?: TranslatableString;
     iconClass?: string;
     id: string;
-    name: string;
+    name: TranslatableString;
     payload?: any;
     version?: string;
 }
@@ -306,7 +306,7 @@ export interface WidgetConfig {
     // (undocumented)
     actionBarViewType?: ViewType;
     expandable?: boolean;
-    heading?: string;
+    heading?: TranslatableString;
     height?: number;
     id: string;
     image?: WidgetImage;

@@ -18,8 +18,8 @@
     >
       <si-circle-status class="my-n4 me-5" [icon]="myDescriptor.iconClass" />
       <div class="d-flex flex-column align-items-start">
-        <span class="si-h5">{{ myDescriptor.name }}</span>
-        <span class="si-body">{{ myDescriptor.description }}</span>
+        <span class="si-h5">{{ myDescriptor.name | translate }}</span>
+        <span class="si-body">{{ myDescriptor.description | translate }}</span>
       </div>
     </button>
   </div>

@@ -21,11 +21,9 @@ const loaderFunction = async (name: string): Promise<any> => {
 };
 
 export const LINE_CHART_DESC: Widget = {
-  name: 'Line Chart',
+  name: 'WIDGET.LINE_CHART',
   id: '@siemens/dashboards-demo/line-chart',
-  description: `A line chart is a type of chart used to show information that changes over time.\
-  Line charts are created by plotting a series of several points and connecting them with a straight line.\
-  Line charts are used to track changes over short and long periods.`,
+  description: 'WIDGET.LINE_CHART_DESC',
   iconClass: 'element-trend',
   componentFactory: {
     componentName: 'CartesianComponent',

@@ -10,7 +10,8 @@
   "WIDGET": {
     "LINE_CHART": "Liniendiagramm",
     "BAR_CHART": "Balkendiagramm",
-    "CIRCLE_CHART": "Kuchendiagramm"
+    "CIRCLE_CHART": "Kuchendiagramm",
+    "LINE_CHART_DESC": "Ein Liniendiagramm ist eine Diagrammart, die verwendet wird, um Informationen darzustellen, die sich im Laufe der Zeit ändern. Liniendiagramme werden erstellt, indem mehrere Punkte eingezeichnet und mit einer geraden Linie verbunden werden. Liniendiagramme werden verwendet, um Veränderungen über kurze und lange Zeiträume zu verfolgen."
   },
   "TOOLBAR": {
     "SAVE_AS_DEFAULTS": "Als Standard speichern",

@@ -10,7 +10,8 @@
   "WIDGET": {
     "LINE_CHART": "Line Chart",
     "BAR_CHART": "Bar Chart",
-    "CIRCLE_CHART": "Circle Chart"
+    "CIRCLE_CHART": "Circle Chart",
+    "LINE_CHART_DESC": "A line chart is a type of chart used to show information that changes over time.  Line charts are created by plotting a series of several points and connecting them with a straight line.  Line charts are used to track changes over short and long periods."
   },
   "TOOLBAR": {
     "SAVE_AS_DEFAULTS": "Save as defaults",

@@ -31,8 +31,8 @@
               >
                 <si-circle-status class="my-n4 me-5" [icon]="widget.iconClass" />
                 <div class="d-flex flex-column align-items-start align-self-center">
-                  <span class="si-h5">{{ widget.name }}</span>
-                  <span class="si-body">{{ widget.description?.trim() }}</span>
+                  <span class="si-h5">{{ widget.name | translate }}</span>
+                  <span class="si-body">{{ widget.description?.trim() | translate }}</span>
                 </div>
               </li>
             }

@@ -8,7 +8,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ModalRef } from '@siemens/element-ng/modal';
 import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
-import { firstValueFrom } from 'rxjs';
+import {
+  provideMockTranslateServiceBuilder,
+  SiTranslateService
+} from '@siemens/element-translate-ng/translate';
+import { firstValueFrom, NEVER } from 'rxjs';
 
 import { TEST_WIDGET } from '../../../test/test-widget/test-widget';
 import { createTestingWidget, TestingModule } from '../../../test/testing.module';
@@ -283,4 +287,74 @@ describe('SiWidgetCatalogComponent', () => {
         .tagName
     ).not.toBe('SI-TEST-WIDGET-EDITOR');
   });
+
+  describe('Widget name and description translation', () => {
+    const translations: Record<string, string> = {
+      'WIDGET.NAME_KEY': 'Translated Widget Name',
+      'WIDGET.DESCRIPTION_KEY': 'Translated Widget Description'
+    };
+
+    beforeEach(() => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [TestingModule, SiWidgetCatalogComponent],
+        providers: [
+          { provide: ModalRef, useValue: new ModalRef() },
+          provideMockTranslateServiceBuilder(
+            () =>
+              ({
+                translate: (key: string) => translations[key] ?? key,
+                translateSync: (key: string) => translations[key] ?? key,
+                translationChange: NEVER
+              }) as unknown as SiTranslateService
+          )
+        ]
+      });
+
+      fixture = TestBed.createComponent(SiWidgetCatalogComponent);
+      component = fixture.componentInstance;
+    });
+
+    it('should display translated widget name and description', () => {
+      component.widgetCatalog = [
+        {
+          ...createTestingWidget('WIDGET.NAME_KEY', 'translatable-1'),
+          description: 'WIDGET.DESCRIPTION_KEY'
+        }
+      ];
+      fixture.detectChanges();
+
+      const listItems = fixture.debugElement.queryAll(By.css('.list-group-item'));
+      expect(listItems.length).toBe(1);
+      expect(listItems[0].query(By.css('.si-h5')).nativeElement.textContent).toBe(
+        'Translated Widget Name'
+      );
+      expect(listItems[0].query(By.css('.si-body')).nativeElement.textContent).toBe(
+        'Translated Widget Description'
+      );
+    });
+
+    it('should filter widgets by translated name', () => {
+      component.widgetCatalog = [
+        {
+          ...createTestingWidget('WIDGET.NAME_KEY', 'translatable-1'),
+          description: 'WIDGET.DESCRIPTION_KEY'
+        },
+        createTestingWidget('Other Widget', 'other-1')
+      ];
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.queryAll(By.css('.list-group-item')).length).toBe(2);
+
+      fixture.debugElement
+        .query(By.css('si-search-bar'))
+        .triggerEventHandler('searchChange', 'Translated');
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.queryAll(By.css('.list-group-item')).length).toBe(1);
+      expect(
+        fixture.debugElement.query(By.css('.list-group-item .si-h5')).nativeElement.textContent
+      ).toBe('Translated Widget Name');
+    });
+  });
 });
@@ -23,7 +23,11 @@ import { SiActionDialogService } from '@siemens/element-ng/action-modal';
 import { SiCircleStatusComponent } from '@siemens/element-ng/circle-status';
 import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';
 import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
-import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
+import {
+  injectSiTranslateService,
+  SiTranslatePipe,
+  t
+} from '@siemens/element-translate-ng/translate';
 import { Subscription } from 'rxjs';
 
 import {
@@ -108,6 +112,8 @@ export class SiWidgetCatalogComponent implements OnInit, OnDestroy {
     () => !!this.selected()?.componentFactory.editorComponentName
   );
 
+  private readonly translateService = injectSiTranslateService();
+
   protected labelCancel = t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.CANCEL:Cancel`);
   protected labelPrevious = t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.PREVIOUS:Previous`);
   protected labelNext = t(() => $localize`:@@DASHBOARD.WIDGET_LIBRARY.NEXT:Next`);
@@ -194,9 +200,11 @@ export class SiWidgetCatalogComponent implements OnInit, OnDestroy {
       this.filteredWidgetCatalog = this.widgetCatalog;
     } else {
       this.searchTerm = searchTerm;
-      this.filteredWidgetCatalog = this.widgetCatalog.filter(wd =>
-        wd.name.toLowerCase().includes(searchTerm.trim().toLowerCase())
-      );
+      const term = searchTerm.trim().toLowerCase();
+      this.filteredWidgetCatalog = this.widgetCatalog.filter(wd => {
+        const name = this.translateService.translateSync(wd.name);
+        return name.toLowerCase().includes(term);
+      });
     }
     if (this.filteredWidgetCatalog.length > 0) {
       this.selectWidget(this.filteredWidgetCatalog[0]);

@@ -6,6 +6,7 @@ import { EventEmitter, InputSignal, OutputEmitterRef, TemplateRef, Type } from '
 import { AccentLineType, MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';
 import { ContentActionBarMainItem, ViewType } from '@siemens/element-ng/content-action-bar';
 import { MenuItem } from '@siemens/element-ng/menu';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import { Subject } from 'rxjs';
 
 /**
@@ -19,9 +20,9 @@ export interface Widget {
   /** An optional version string. */
   version?: string;
   /** The name of the widget that is presented in the widget catalog. */
-  name: string;
+  name: TranslatableString;
   /** An optional description that is visible in the widget catalog. */
-  description?: string;
+  description?: TranslatableString;
   /** A CSS icon class that specifies the widget icon, displayed in the catalog. */
   iconClass?: string;
   /** The factory to instantiate a widget instance component that is added to the dashboard. */
@@ -183,7 +184,7 @@ export interface WidgetConfig {
   /**
    * grid item header text.
    */
-  heading?: string;
+  heading?: TranslatableString;
   /** Defines whether the widget instance component can be expanded and enlarged over the dashboard. */
   expandable?: boolean;
   /** A widget specific payload object. Placeholder to pass in additional configuration. */