@siemens/element-ng 48.0.3 → 48.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "48.0.3",
+  "version": "48.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,8 +26,8 @@
     "@angular/router": "20",
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
-    "@siemens/element-translate-ng": "48.0.3",
-    "@siemens/element-theme": "48.0.3",
+    "@siemens/element-translate-ng": "48.1.0",
+    "@siemens/element-theme": "48.1.0",
     "@siemens/ngx-datatable": "22 - 24",
     "flag-icons": "^7.3.2",
     "google-libphonenumber": "^3.2.40",
@@ -63,6 +63,10 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/siemens-element-ng.mjs"
     },
+    "./about": {
+      "types": "./about/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-about.mjs"
+    },
     "./accordion": {
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-accordion.mjs"
@@ -71,10 +75,6 @@
       "types": "./action-modal/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-action-modal.mjs"
     },
-    "./about": {
-      "types": "./about/index.d.ts",
-      "default": "./fesm2022/siemens-element-ng-about.mjs"
-    },
     "./application-header": {
       "types": "./application-header/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-application-header.mjs"
@@ -139,14 +139,14 @@
       "types": "./dashboard/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-dashboard.mjs"
     },
-    "./datatable": {
-      "types": "./datatable/index.d.ts",
-      "default": "./fesm2022/siemens-element-ng-datatable.mjs"
-    },
     "./date-range-filter": {
       "types": "./date-range-filter/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-date-range-filter.mjs"
     },
+    "./datatable": {
+      "types": "./datatable/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-datatable.mjs"
+    },
     "./datepicker": {
       "types": "./datepicker/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-datepicker.mjs"
@@ -159,14 +159,14 @@
       "types": "./empty-state/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-empty-state.mjs"
     },
-    "./file-uploader": {
-      "types": "./file-uploader/index.d.ts",
-      "default": "./fesm2022/siemens-element-ng-file-uploader.mjs"
-    },
     "./filter-bar": {
       "types": "./filter-bar/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-filter-bar.mjs"
     },
+    "./file-uploader": {
+      "types": "./file-uploader/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-file-uploader.mjs"
+    },
     "./filtered-search": {
       "types": "./filtered-search/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-filtered-search.mjs"
@@ -255,6 +255,10 @@
       "types": "./navbar-vertical/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-navbar-vertical.mjs"
     },
+    "./notification-item": {
+      "types": "./notification-item/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-notification-item.mjs"
+    },
     "./number-input": {
       "types": "./number-input/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-number-input.mjs"
@@ -279,14 +283,14 @@
       "types": "./photo-upload/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-photo-upload.mjs"
     },
-    "./pills-input": {
-      "types": "./pills-input/index.d.ts",
-      "default": "./fesm2022/siemens-element-ng-pills-input.mjs"
-    },
     "./popover": {
       "types": "./popover/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-popover.mjs"
     },
+    "./pills-input": {
+      "types": "./pills-input/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-pills-input.mjs"
+    },
     "./popover-legacy": {
       "types": "./popover-legacy/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-popover-legacy.mjs"
@@ -307,14 +311,14 @@
       "types": "./search-bar/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-search-bar.mjs"
     },
-    "./shadow-root": {
-      "types": "./shadow-root/index.d.ts",
-      "default": "./fesm2022/siemens-element-ng-shadow-root.mjs"
-    },
     "./select": {
       "types": "./select/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-select.mjs"
     },
+    "./shadow-root": {
+      "types": "./shadow-root/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-shadow-root.mjs"
+    },
     "./side-panel": {
       "types": "./side-panel/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-side-panel.mjs"

package/progressbar/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 declare class SiProgressbarComponent {
     /**
@@ -10,7 +10,7 @@ declare class SiProgressbarComponent {
      * t(() => $localize`:@@SI_PROGRESSBAR.LABEL:Progress`)
      * ```
      */
-    readonly ariaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly ariaLabel: _angular_core.InputSignal<TranslatableString>;
     /**
      * Max value for progressbar
      *
@@ -26,7 +26,7 @@ declare class SiProgressbarComponent {
     /**
      * Heading to display on top of progress bar.
      */
-    readonly heading: _angular_core.InputSignal<string | undefined>;
+    readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
     /**
      * Optional progress text to be shown on top right (in LTR).
      * It can be percentage value or a progress status. E.g `50 %` or `Downloading 2/8`.

package/result-details-list/index.d.ts

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+
 /** */
 interface ResultDetailStep {
     /**
      * A description of the step.
      */
-    description: string;
+    description: TranslatableString;
     /**
      * A state object defining the state of the step.
      */
@@ -29,7 +31,7 @@ interface ResultDetailStep {
     /**
      * Optional detail text which appears below description.
      */
-    detail?: string;
+    detail?: TranslatableString;
     /**
      * Optional translation params to be used with translate pipe.
      */

package/select/index.d.ts

@@ -62,7 +62,9 @@ declare abstract class SiSelectSelectionStrategy<T, IV = T | T[]> implements Con
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
- *
+ */
+
+/**
  * @deprecated Use {@link SelectOption} instead.
  */
 interface SelectOptionLegacy {
@@ -71,7 +73,7 @@ interface SelectOptionLegacy {
     /** Identifies the option, will be used as `value` for the component */
     id: string;
     /** Title to display */
-    title: string;
+    title: TranslatableString;
     /** Optional icon to display */
     icon?: string;
     /** Optional color class for the icon */
@@ -86,7 +88,7 @@ interface SelectGroup<T> {
     /** An optional key to identify this group in a custom template. */
     key?: string;
     /** A label to be shown as header for this group. Is optional if a custom template is provided. */
-    label?: string;
+    label?: TranslatableString;
     /** All options that are part of this group. */
     options: SelectOption<T>[];
 }
@@ -115,12 +117,12 @@ interface SelectOption<T> {
      * A label to be shown for this option.
      * Is optional if a custom template is provided or if the value should directly be rendered.
      */
-    label?: string;
+    label?: TranslatableString;
     /**
      * Used for typeahead functionality when filtering is disabled.
      * If provided, this will be used, otherwise the innerText of the rendered element.
      */
-    typeaheadLabel?: string;
+    typeaheadLabel?: TranslatableString;
 }
 /** Alias for {@link SelectOption} or {@link SelectGroup} */
 type SelectItem<T> = SelectGroup<T> | SelectOption<T>;

package/sort-bar/index.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { OnInit } from '@angular/core';
-import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 import { HttpParams } from '@angular/common/http';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 interface SortCriteria {
-    name: string;
+    name: TranslatableString;
     key: number | string;
 }
 declare class SiSortBarComponent implements OnInit {
@@ -16,7 +16,7 @@ declare class SiSortBarComponent implements OnInit {
      * t(() => $localize`:@@SI_SORT_BAR.TITLE:Sort by`)
      * ```
      */
-    readonly sortTitle: i0.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly sortTitle: i0.InputSignal<TranslatableString>;
     /**
      * List of sort criteria.
      */

package/split/index.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { OnChanges, TemplateRef, EventEmitter, SimpleChanges, AfterContentInit, QueryList, Signal } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -43,7 +44,7 @@ declare class SiSplitPartComponent implements OnChanges {
     /**
      * Sets the title of the split part header.
      */
-    heading: string;
+    heading: TranslatableString;
     /**
      * Minimum size in px.
      *
@@ -83,7 +84,7 @@ declare class SiSplitPartComponent implements OnChanges {
      *
      * @defaultValue 'collapse'
      */
-    collapseLabel: string;
+    collapseLabel: TranslatableString;
     /**
      * An optional stateId to uniquely identify a component instance.
      * Required for persistence of ui state.

package/status-bar/index.d.ts

@@ -4,6 +4,7 @@ import { DoCheck, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { Observable } from 'rxjs';
 import * as _siemens_element_ng_common from '@siemens/element-ng/common';
 import { ExtendedStatusType } from '@siemens/element-ng/common';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -160,8 +161,8 @@ declare class SiStatusBarModule {
 declare class SiStatusBarItemComponent {
     private readonly statusIcons;
     readonly status: _angular_core.InputSignal<ExtendedStatusType | undefined>;
-    readonly value: _angular_core.InputSignal<string | number>;
-    readonly heading: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<number | TranslatableString>;
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
     readonly color: _angular_core.InputSignal<string | undefined>;
     /** @defaultValue false */
     readonly blink: _angular_core.InputSignalWithTransform<boolean, unknown>;

package/tabs/index.d.ts

@@ -41,6 +41,7 @@ declare abstract class SiTabBaseDirective implements OnDestroy, FocusableOption
     readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Event emitter to notify when a tab is closed. */
     readonly closeTriggered: _angular_core.OutputEmitterRef<void>;
+    /** @internal */
     protected readonly tabButton: ElementRef<HTMLElement>;
     /** @internal */
     readonly tabContent: Signal<TemplateRef<any> | undefined>;
@@ -64,6 +65,8 @@ declare abstract class SiTabBaseDirective implements OnDestroy, FocusableOption
     selectTab(retainFocus?: boolean): void;
     /** @internal */
     deSelectTab(): void;
+    /** @internal */
+    scrollTabIntoView(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabBaseDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiTabBaseDirective, "[siTabNextBase]", never, { "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badgeContent": { "alias": "badgeContent"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "disabledTab": { "alias": "disabled"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closeTriggered": "closeTriggered"; }, never, never, true, never>;
 }
@@ -107,6 +110,7 @@ declare class SiTabsetComponent {
     /** @internal */
     protected readonly showMenuButton: _angular_core.WritableSignal<boolean>;
     protected tabIsLink(tab: unknown): tab is SiTabLinkComponent;
+    constructor();
     /** @internal */
     removedTabByUser(index: number, active?: boolean): void;
     protected resizeContainer(width: number, scrollWidth: number): void;
@@ -134,13 +138,23 @@ declare class SiTabComponent extends SiTabBaseDirective implements OnDestroy {
      * @defaultValue false
      * */
     readonly active: _angular_core.ModelSignal<boolean>;
+    /**
+     * Guard to check if the tab can be activated.
+     * If not provided, the tab can always be activated.
+     */
+    readonly canActivate: _angular_core.InputSignal<(() => boolean) | undefined>;
+    /**
+     * Guard to check if the tab can be deactivated.
+     * If not provided, the tab can always be deactivated.
+     */
+    readonly canDeactivate: _angular_core.InputSignal<(() => boolean) | undefined>;
     protected selectTabByUser(): void;
     /** {@inheritDoc} */
     selectTab(retainFocus?: boolean): void;
     /** @internal */
     deSelectTab(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiTabComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabComponent, "si-tab", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiTabComponent, "si-tab", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "canActivate": { "alias": "canActivate"; "required": false; "isSignal": true; }; "canDeactivate": { "alias": "canDeactivate"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, ["*"], true, never>;
 }
 
 export { SiTabComponent, SiTabLinkComponent, SiTabsetComponent };

package/template-i18n.json

@@ -24,6 +24,7 @@
   "SI_CONFIRMATION_DIALOG.YES": "Yes",
   "SI_CONTENT_ACTION_BAR.TOGGLE": "Toggle",
   "SI_DASHBOARD.EXPAND": "Expand",
+  "SI_DASHBOARD.EXPAND_WIDGET_ACTIONS": "Expand actions",
   "SI_DASHBOARD.RESTORE": "Restore",
   "SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON": "Open calendar",
   "SI_DATEPICKER.CALENDAR_WEEK_LABEL": "Calendar week",

package/translate/index.d.ts

@@ -27,6 +27,7 @@ interface SiTranslatableKeys {
     'SI_CONFIRMATION_DIALOG.YES'?: string;
     'SI_CONTENT_ACTION_BAR.TOGGLE'?: string;
     'SI_DASHBOARD.EXPAND'?: string;
+    'SI_DASHBOARD.EXPAND_WIDGET_ACTIONS'?: string;
     'SI_DASHBOARD.RESTORE'?: string;
     'SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON'?: string;
     'SI_DATEPICKER.CALENDAR_WEEK_LABEL'?: string;

package/tree-view/index.d.ts

@@ -2,8 +2,8 @@ import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy, AfterViewInit, DoCheck, TemplateRef, OnChanges, AfterViewChecked, Signal, SimpleChanges, ElementRef } from '@angular/core';
 import { MenuItem } from '@siemens/element-ng/common';
 import { MenuItem as MenuItem$1 } from '@siemens/element-ng/menu';
-import { Subject, Observable } from 'rxjs';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import { Subject, Observable } from 'rxjs';
 import * as _siemens_element_ng_tree_view from '@siemens/element-ng/tree-view';
 import { FocusableOption } from '@angular/cdk/a11y';
 import { CdkMenuTrigger } from '@angular/cdk/menu';
@@ -591,11 +591,11 @@ interface TreeItem<T = any> {
     /**
      * The text shown for the tree item data field 1.
      */
-    dataField1?: string;
+    dataField1?: TranslatableString;
     /**
      * The text shown for the tree item data field 2.
      */
-    dataField2?: string;
+    dataField2?: TranslatableString;
     /**
      * The hierarchy level of the node. This will be auto-calculated by the tree view control.
      */
@@ -607,7 +607,7 @@ interface TreeItem<T = any> {
     /**
      * The text shown for the tree item label (header).
      */
-    label?: string;
+    label?: TranslatableString;
     /**
      * The parent tree item. This will be automatically set by the tree view control.
      */

package/wizard/index.d.ts

@@ -1,10 +1,11 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 
 declare class SiWizardStepComponent {
     /** @defaultValue '' */
-    readonly heading: _angular_core.InputSignal<string>;
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
     /** @defaultValue true */
     readonly isValid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** @defaultValue true */