@siemens/element-ng 48.0.3 → 48.2.0-rc.1

package/form/index.d.ts

@@ -1,4 +1,3 @@
-import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 import * as _angular_core from '@angular/core';
 import { DoCheck, Signal, InjectionToken, AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy, ElementRef, SimpleChanges, ModuleWithProviders, Provider } from '@angular/core';
 import * as _angular_forms from '@angular/forms';
@@ -66,7 +65,7 @@ interface SiFormValidationErrorMapper {
 interface SiFormValidationError {
     controlName?: string;
     controlNameTranslationKey?: string;
-    errorCode: string;
+    errorCode: TranslatableString;
     errorCodeTranslationKey?: string;
     errorParams?: any;
 }
@@ -135,48 +134,48 @@ declare class SiFormContainerComponent<TControl extends {
     /** @internal */
     readonly formErrorMapper: _angular_core.Signal<{
         [key: string]: string | ((error: any) => string) | undefined;
-        required?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        required?: TranslatableString | ((error: {
             required: boolean;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        requiredTrue?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        requiredTrue?: TranslatableString | ((error: {
             required: boolean;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        email?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        email?: TranslatableString | ((error: {
             email: boolean;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        min?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        min?: TranslatableString | ((error: {
             min: number;
             actual: number;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        max?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        max?: TranslatableString | ((error: {
             max: number;
             actual: number;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        minLength?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        minLength?: TranslatableString | ((error: {
             requiredLength: number;
             actualLength: number;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        maxLength?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        maxLength?: TranslatableString | ((error: {
             requiredLength: number;
             actualLength: number;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        pattern?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        pattern?: TranslatableString | ((error: {
             pattern: string | RegExp;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        numberFormat?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        numberFormat?: TranslatableString | ((error: {
             numberFormat: boolean;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        dateFormat?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        dateFormat?: TranslatableString | ((error: {
             format: string;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        maxDate?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        maxDate?: TranslatableString | ((error: {
             max: Date;
             actual: Date;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
-        minDate?: _siemens_element_translate_ng_translate_types.TranslatableString | ((error: {
+        }) => TranslatableString);
+        minDate?: TranslatableString | ((error: {
             min: Date;
             actual: Date;
-        }) => _siemens_element_translate_ng_translate_types.TranslatableString);
+        }) => TranslatableString);
     }>;
     /**
      * Indicates whether the user interacted with the form.
@@ -206,7 +205,7 @@ declare class SiFormContainerComponent<TControl extends {
 declare class SiFormFieldsetComponent implements DoCheck {
     private static labelIdCounter;
     /** The label for the entire fieldset. */
-    readonly label: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<TranslatableString>;
     /** Overrides the parent label width. */
     readonly labelWidth: _angular_core.InputSignal<string | undefined>;
     /**
@@ -276,7 +275,7 @@ interface SiFormItemControl {
 /** @internal */
 interface SiFormError {
     key: string;
-    message?: string;
+    message?: TranslatableString;
     params: any;
 }
 declare class SiFormItemComponent implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy {
@@ -284,7 +283,7 @@ declare class SiFormItemComponent implements AfterContentInit, AfterContentCheck
      * The label to be displayed in the form item.
      * It will be translated if a translation key is available.
      */
-    readonly label: _angular_core.InputSignal<string | null | undefined>;
+    readonly label: _angular_core.InputSignal<TranslatableString | null | undefined>;
     /**
      * A custom width value to be applied to the label.
      * A value of 0 is allowed as well to visually hide away the label area.

package/inline-notification/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { StatusType } from '@siemens/element-ng/common';
 import { Link } from '@siemens/element-ng/link';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 declare class SiInlineNotificationComponent {
     /**
@@ -10,11 +11,11 @@ declare class SiInlineNotificationComponent {
     /**
      * Heading of the message.
      */
-    readonly heading: _angular_core.InputSignal<string | undefined>;
+    readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
     /**
      * Main message of this inline notification.
      */
-    readonly message: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<TranslatableString>;
     /**
      * Optional link action for inline notification events.
      */

package/ip-input/index.d.ts

@@ -46,22 +46,60 @@ declare abstract class SiIpInputDirective {
     writeValue(value?: string | null): void;
     protected onInput(e: Event): void;
     protected blur(): void;
-    abstract maskInput(e: AddrInputEvent): void;
+    protected abstract maskInput(e: AddrInputEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiIpInputDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SiIpInputDirective, "input[siIpInput]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "cidr": { "alias": "cidr"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Directive for IPv4 address input fields.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import { SiFormItemComponent } from '@siemens/element-ng/form';
+ * import { SiIp4InputDirective } from '@siemens/element-ng/ip-input';
+ *
+ * @Component({
+ *   template: `
+ *     <si-form-item label="IPv4 address">
+ *       <input type="text" class="form-control" siIpV4 />
+ *     </si-form-item>
+ *   `,
+ *   imports: [SiFormItemComponent, SiIp4InputDirective, ...]
+ * })
+ * ```
+ */
 declare class SiIp4InputDirective extends SiIpInputDirective implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
-    maskInput(e: AddrInputEvent): void;
+    protected maskInput(e: AddrInputEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiIp4InputDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SiIp4InputDirective, "input[siIpV4]", ["siIpV4"], {}, {}, never, never, true, never>;
 }
 
+/**
+ * Directive for IPv6 address input fields.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import { SiFormItemComponent } from '@siemens/element-ng/form';
+ * import { SiIp6InputDirective } from '@siemens/element-ng/ip-input';
+ *
+ * @Component({
+ *   template: `
+ *     <si-form-item label="IPv6 address">
+ *       <input type="text" class="form-control" siIpV6 />
+ *     </si-form-item>
+ *   `,
+ *   imports: [SiFormItemComponent, SiIp6InputDirective, ...]
+ * })
+ * ```
+ */
 declare class SiIp6InputDirective extends SiIpInputDirective implements ControlValueAccessor, Validator {
-    readonly validatorFn: i0.Signal<_angular_forms.ValidatorFn>;
+    protected readonly validatorFn: i0.Signal<_angular_forms.ValidatorFn>;
     validate(control: AbstractControl): ValidationErrors | null;
-    maskInput(e: AddrInputEvent): void;
+    protected maskInput(e: AddrInputEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiIp6InputDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SiIp6InputDirective, "input[siIpV6]", ["siIpV6"], {}, {}, never, never, true, never>;
 }

package/landing-page/index.d.ts

@@ -28,9 +28,10 @@ interface AlertConfig {
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+
 interface LandingPageWarning {
-    title: string;
-    content: string;
+    title: TranslatableString;
+    content: TranslatableString;
 }
 interface UsernamePassword {
     username: string | null | undefined;

package/language-switcher/index.d.ts

@@ -1,4 +1,5 @@
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 import * as i0 from '@angular/core';
 
@@ -6,6 +7,7 @@ import * as i0 from '@angular/core';
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+
 /** */
 interface IsoLanguageValue {
     /**
@@ -15,7 +17,7 @@ interface IsoLanguageValue {
     /**
      * Language name, ex "English" or translatable string, ex "LANGUAGES.EN"
      */
-    name: string;
+    name: TranslatableString;
 }
 
 declare class SiLanguageSwitcherComponent {

package/list-details/index.d.ts

@@ -114,6 +114,8 @@ declare class SiListPaneBodyComponent {
 declare class SiDetailsPaneComponent {
     protected parent: SiListDetailsComponent;
     private readonly routerOutlet;
+    private subscription?;
+    private destroyer;
     /** @internal */
     readonly isRouterBased: _angular_core.Signal<boolean>;
     constructor();

package/main-detail-container/index.d.ts

@@ -1,6 +1,6 @@
-import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 import * as _angular_core from '@angular/core';
 import { OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 declare class SiMainDetailContainerComponent implements OnInit, OnChanges, OnDestroy {
     private animationDuration;
@@ -39,7 +39,7 @@ declare class SiMainDetailContainerComponent implements OnInit, OnChanges, OnDes
      *
      * @defaultValue ''
      */
-    readonly heading: _angular_core.InputSignal<string>;
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
     /**
      * Whether the heading should be truncated (single line) or not.
      * Default value is `false`.
@@ -52,7 +52,7 @@ declare class SiMainDetailContainerComponent implements OnInit, OnChanges, OnDes
      *
      * @defaultValue ''
      */
-    readonly detailsHeading: _angular_core.InputSignal<string>;
+    readonly detailsHeading: _angular_core.InputSignal<TranslatableString>;
     /**
      * Whether the main and detail parts should be resizable by a splitter or not.
      * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).
@@ -77,7 +77,7 @@ declare class SiMainDetailContainerComponent implements OnInit, OnChanges, OnDes
      * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)
      * ```
      */
-    readonly detailsBackButtonText: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    readonly detailsBackButtonText: _angular_core.InputSignal<TranslatableString>;
     /**
      * CSS class(es) applied to the outermost container. Per default, Bootstrap classes
      * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.

package/navbar/index.d.ts

@@ -44,7 +44,7 @@ interface AccountItem extends MenuItem {
     /**
      * Role name shown as a badge in the bottom
      */
-    role?: string;
+    role?: TranslatableString;
 }
 
 /**

package/notification-item/index.d.ts

@@ -0,0 +1,141 @@
+import * as _angular_core from '@angular/core';
+import { NavigationExtras, ActivatedRoute } from '@angular/router';
+import { MenuItem } from '@siemens/element-ng/menu';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+
+/**
+ * Interface for a router link in a notification item.
+ * @param type - The type of the link, always 'router-link'.
+ * @param routerLink - The router link to navigate to.
+ * @param extras - Optional navigation extras for the router.
+ */
+interface NotificationItemRouterLink {
+    type: 'router-link';
+    routerLink: string | any[];
+    extras?: NavigationExtras;
+}
+/**
+ * Interface for a standard link in a notification item.
+ * @param type - The type of the link, always 'link'.
+ * @param href - The URL to navigate to.
+ * @param target - Optional target attribute for the link.
+ */
+interface NotificationItemLink {
+    type: 'link';
+    href: string;
+    target?: string;
+}
+/**
+ * Base interface for notification item actions.
+ * @param ariaLabel - The ARIA label for accessibility.
+ * @param icon - The icon to display for the action.
+ */
+interface NotificationItemBase {
+    ariaLabel: TranslatableString;
+    icon: string;
+}
+/**
+ * Interface for an action circle button in a notification item.
+ * @param type - The type of the action, always 'action-circle-button'.
+ * @param customClass - Optional custom CSS class for styling.
+ * @param action - The action to perform when the button is clicked.
+ */
+interface NotificationItemActionCircleButton extends NotificationItemBase {
+    type: 'action-circle-button';
+    customClass?: string;
+    action: (source: this) => void;
+}
+/**
+ * Interface for a router link with an icon in a notification item.
+ * @param type - The type of the link, always 'router-link'.
+ * @param routerLink - The router link to navigate to.
+ * @param extras - Optional navigation extras for the router.
+ */
+interface NotificationItemRouterLinkIcon extends NotificationItemBase {
+    type: 'router-link';
+    routerLink: string | any[];
+    extras?: NavigationExtras;
+}
+/**
+ * Interface for a standard link with an icon in a notification item.
+ * @param type - The type of the link, always 'link'.
+ * @param href - The URL to navigate to.
+ * @param target - Optional target attribute for the link.
+ */
+interface NotificationItemLinkIcon extends NotificationItemBase {
+    type: 'link';
+    href: string;
+    target?: string;
+}
+/**
+ * Interface for an action button in a notification item.
+ * @param type - The type of the action, always 'action-button'.
+ * @param label - The label to display on the button.
+ * @param action - The action to perform when the button is clicked.
+ */
+interface NotificationItemActionButton {
+    type: 'action-button';
+    label: TranslatableString;
+    action: (source: this) => void;
+}
+/**
+ * Interface for a menu in a notification item.
+ * @param type - The type of the action, always 'menu'.
+ * @param menuItems - The menu items to display in the menu.
+ */
+interface NotificationItemMenu {
+    type: 'menu';
+    menuItems: MenuItem[];
+}
+/**
+ * Union type for quick actions in a notification item.
+ */
+type NotificationItemQuickAction = NotificationItemActionCircleButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon;
+/**
+ * Union type for primary actions in a notification item.
+ */
+type NotificationItemPrimaryAction = NotificationItemActionCircleButton | NotificationItemLinkIcon | NotificationItemRouterLinkIcon | NotificationItemMenu | NotificationItemActionButton;
+/**
+ * This component represents a single notification that can be used within notification
+ * centers, popovers, or other containers. It supports various action types including
+ * router links, standard links, action buttons, and menus.
+ */
+declare class SiNotificationItemComponent {
+    /**
+     * The timestamp of the notification item.
+     */
+    readonly timeStamp: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * The heading of the notification item.
+     */
+    readonly heading: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Optional translatable description.
+     */
+    readonly description: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * Unread messages are emphasized with a bolder font.
+     *
+     * @defaultValue false
+     */
+    readonly unread: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Link to the source or relevant information of the notification,
+     * which triggers when clicking on the notification item text area.
+     */
+    readonly itemLink: _angular_core.InputSignal<NotificationItemRouterLink | NotificationItemLink | undefined>;
+    /**
+     * Actions that are displayed below the text of the notification.
+     */
+    readonly quickActions: _angular_core.InputSignal<NotificationItemQuickAction[] | undefined>;
+    /**
+     * Action that is displayed on the right side of the notification.
+     */
+    readonly primaryAction: _angular_core.InputSignal<NotificationItemPrimaryAction | undefined>;
+    protected readonly activatedRoute: ActivatedRoute | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNotificationItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiNotificationItemComponent, "si-notification-item", never, { "timeStamp": { "alias": "timeStamp"; "required": true; "isSignal": true; }; "heading": { "alias": "heading"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "itemLink": { "alias": "itemLink"; "required": false; "isSignal": true; }; "quickActions": { "alias": "quickActions"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; }, {}, never, ["si-avatar,si-circle-status,si-icon,si-status-icon", "[action]", "[quick-actions]", "[description]"], true, never>;
+}
+
+export { SiNotificationItemComponent };
+export type { NotificationItemActionButton, NotificationItemActionCircleButton, NotificationItemBase, NotificationItemLink, NotificationItemLinkIcon, NotificationItemMenu, NotificationItemPrimaryAction, NotificationItemQuickAction, NotificationItemRouterLink, NotificationItemRouterLinkIcon };

package/notification-item/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-notification-item.mjs"
+}

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.2.0-rc.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -17,6 +17,10 @@
     "access": "public"
   },
   "type": "module",
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
   "peerDependencies": {
     "@angular/animations": "20",
     "@angular/cdk": "20",
@@ -26,8 +30,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.2.0-rc.1",
+    "@siemens/element-theme": "48.2.0-rc.1",
     "@siemens/ngx-datatable": "22 - 24",
     "flag-icons": "^7.3.2",
     "google-libphonenumber": "^3.2.40",
@@ -67,14 +71,14 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-accordion.mjs"
     },
-    "./action-modal": {
-      "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"
     },
+    "./action-modal": {
+      "types": "./action-modal/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-action-modal.mjs"
+    },
     "./application-header": {
       "types": "./application-header/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-application-header.mjs"
@@ -255,6 +259,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"
@@ -307,14 +315,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/schematics/collection.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../../../hello-world/node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "simpl-siemens-migration": {
+      "description": "A migration schematic for replacing @simpl/* packages with @siemens/*",
+      "factory": "./simpl-siemens-migration/index#simplSiemensMigration",
+      "schema": "./simpl-siemens-migration/schema.json",
+      "aliases": ["s2s-migration"]
+    },
+    "ng-add": {
+      "description": "A schematic to add the @siemens/element-ng to your project.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    },
+    "migrate-scss-imports-to-siemens": {
+      "description": "A migration schematic for updating SCSS imports from @simpl/* to @siemens/*",
+      "factory": "./scss-import-to-siemens-migration/index#scssImportMigration",
+      "schema": "./scss-import-to-siemens-migration/schema.json",
+      "aliases": ["scss-i-migration"]
+    },
+    "migrate-ts-imports-to-siemens": {
+      "description": "A migration schematic for updating TypeScript imports from @simpl/* to @siemens/*",
+      "factory": "./ts-import-to-siemens-migration/index#tsImportMigration",
+      "schema": "./ts-import-to-siemens-migration/schema.json",
+      "aliases": ["ts-i-migration"]
+    }
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { chain, schematic } from '@angular-devkit/schematics';
+import { getPackageJsonDependency } from '@schematics/angular/utility/dependencies';
+export const ngAdd = (options) => {
+    return (tree, context) => {
+        context.logger.info('🔧 Adding @siemens/element-ng to your project...');
+        const hasSimplElementNgDependency = getPackageJsonDependency(tree, '@simpl/element-ng');
+        if (hasSimplElementNgDependency) {
+            const chainedRules = chain([schematic('simpl-siemens-migration', options)]);
+            return chainedRules(tree, context);
+        }
+    };
+};

package/schematics/ng-add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "siemens-element-ng-add",
+  "title": "Siemens Element ng-add schematic",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "description": "Path to the directory where all simpl imports should be migrated.",
+      "x-prompt": "Which directory do you want to migrate?",
+      "format": "path",
+      "default": "/"
+    }
+  },
+  "required": []
+}