@siemens/element-ng 48.2.0 → 48.3.0

package/file-uploader/index.d.ts

@@ -20,6 +20,112 @@ interface UploadFile {
     progress: number;
 }
 
+interface FileUploadError extends UploadFile {
+    status: 'invalid';
+    errorText: TranslatableString;
+}
+/**
+ * Directive for handling file uploads with validation for file type and size.
+ *
+ * @example
+ * ```html
+ * <input
+ *   #fileInput
+ *   type="file"
+ *   class="d-none"
+ *   siFileUpload
+ *   [accept]="accept()"
+ *   [maxFileSize]="maxFileSize()"
+ *   [multiple]="true"
+ *   (validFiles)="onFilesAdded($event)"
+ *   (fileError)="onFileError($event)"
+ * />
+ * ```
+ */
+declare class SiFileUploadDirective {
+    /**
+     * Text or translation key of message title if incorrect file type is dragged / dropped.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
+     * ```
+     */
+    readonly errorTextFileType: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Message or translation key if file exceeds the maximum file size limit.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`)
+     * ```
+     */
+    readonly errorTextFileMaxSize: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Define which file types are suggested in file browser.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
+     */
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Define maximal allowed file size in bytes.
+     */
+    readonly maxFileSize: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Defines whether the file input allows selecting multiple files.
+     * When {@link directoryUpload} is enabled, this will have no effect.
+     *
+     * @defaultValue false
+     */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enable directory upload.
+     *
+     * @defaultValue false
+     */
+    readonly directoryUpload: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Event emitted when valid files are added.
+     * Invalid files (due to size or type) will be ignored and instead the {@link fileError} event will be emitted.
+     */
+    readonly validFiles: _angular_core.OutputEmitterRef<UploadFile[]>;
+    /**
+     * Event emitted when valid files are added.
+     * Also includes invalid files, but with status 'invalid' and an errorText describing why they were ignored.
+     */
+    readonly filesAdded: _angular_core.OutputEmitterRef<UploadFile[]>;
+    /**
+     * Event emitted when file validation errors occur, including files that were ignored due to size or type.
+     */
+    readonly fileError: _angular_core.OutputEmitterRef<FileUploadError>;
+    private readonly elementRef;
+    private locale;
+    private numberFormat;
+    protected onInputChange(event: Event): void;
+    /**
+     * Handle files from input or drag and drop
+     */
+    handleFiles(files: FileList | null): void;
+    /**
+     * Handle directory entries for drag and drop
+     */
+    handleItems(items: DataTransferItemList): void;
+    /**
+     * Reset the file input value
+     */
+    reset(): void;
+    /**
+     * Trigger the file input click
+     */
+    triggerClick(): void;
+    private makeUploadFile;
+    private verifyFileSize;
+    private verifyFileType;
+    fileSizeToString(num: number): string;
+    static formatFileSize(num: number, formatter?: Intl.NumberFormat): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFileUploadDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiFileUploadDirective, "input[type=\"file\"][siFileUpload]", never, { "errorTextFileType": { "alias": "errorTextFileType"; "required": false; "isSignal": true; }; "errorTextFileMaxSize": { "alias": "errorTextFileMaxSize"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "directoryUpload": { "alias": "directoryUpload"; "required": false; "isSignal": true; }; }, { "validFiles": "validFiles"; "filesAdded": "filesAdded"; "fileError": "fileError"; }, never, never, true, never>;
+}
+
 declare class SiFileDropzoneComponent {
     /**
      * Text or translation key of the input file selector (is combined with the `uploadTextRest`).
@@ -92,9 +198,14 @@ declare class SiFileDropzoneComponent {
      */
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * Event emitted when files are added.
+     * Event emitted when valid files are added.
+     * Invalid files are also included here, but with status 'invalid' and an errorText describing why they were ignored.
      */
     readonly filesAdded: _angular_core.OutputEmitterRef<UploadFile[]>;
+    /**
+     * Event emitted when file validation errors occur, including files that were ignored due to size or type.
+     */
+    readonly fileError: _angular_core.OutputEmitterRef<FileUploadError>;
     /**
      * Enable directory upload.
      *
@@ -104,25 +215,18 @@ declare class SiFileDropzoneComponent {
     protected readonly maxFileSizeString: _angular_core.Signal<string>;
     protected readonly icons: Record<"elementUpload", string>;
     protected dragOver: boolean;
-    private readonly fileInput;
-    private locale;
-    private numberFormat;
+    private readonly fileUploadDirective;
     protected dropHandler(event: DragEvent): void;
     protected dragOverHandler(event: DragEvent): void;
     protected inputEnterHandler(): void;
-    protected inputHandler(event: Event): void;
-    protected handleFiles(files: FileList | null): void;
+    protected onFilesAdded(files: UploadFile[]): void;
+    protected onFileError(error: FileUploadError): void;
     /**
      * Reset all the files inside the native file input (and therefore the dropzone).
      */
     reset(): void;
-    private makeUploadFile;
-    private verifyFileSize;
-    private verifyFileType;
-    private fileSizeToString;
-    private handleItems;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFileDropzoneComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFileDropzoneComponent, "si-file-dropzone", never, { "uploadTextFileSelect": { "alias": "uploadTextFileSelect"; "required": false; "isSignal": true; }; "uploadDropText": { "alias": "uploadDropText"; "required": false; "isSignal": true; }; "maxFileSizeText": { "alias": "maxFileSizeText"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; "errorTextFileType": { "alias": "errorTextFileType"; "required": false; "isSignal": true; }; "errorTextFileMaxSize": { "alias": "errorTextFileMaxSize"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "directoryUpload": { "alias": "directoryUpload"; "required": false; "isSignal": true; }; }, { "filesAdded": "filesAdded"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFileDropzoneComponent, "si-file-dropzone", never, { "uploadTextFileSelect": { "alias": "uploadTextFileSelect"; "required": false; "isSignal": true; }; "uploadDropText": { "alias": "uploadDropText"; "required": false; "isSignal": true; }; "maxFileSizeText": { "alias": "maxFileSizeText"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; "errorTextFileType": { "alias": "errorTextFileType"; "required": false; "isSignal": true; }; "errorTextFileMaxSize": { "alias": "errorTextFileMaxSize"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "directoryUpload": { "alias": "directoryUpload"; "required": false; "isSignal": true; }; }, { "filesAdded": "filesAdded"; "fileError": "fileError"; }, never, never, true, never>;
 }
 
 /**
@@ -418,9 +522,9 @@ declare class SiFileUploaderComponent implements OnChanges {
 
 declare class SiFileUploaderModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFileUploaderModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiFileUploaderModule, never, [typeof SiFileDropzoneComponent, typeof SiFileUploaderComponent], [typeof SiFileDropzoneComponent, typeof SiFileUploaderComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiFileUploaderModule, never, [typeof SiFileDropzoneComponent, typeof SiFileUploaderComponent, typeof SiFileUploadDirective], [typeof SiFileDropzoneComponent, typeof SiFileUploaderComponent, typeof SiFileUploadDirective]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiFileUploaderModule>;
 }
 
-export { SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploaderModule };
-export type { FileUploadConfig, FileUploadResult, UploadFile };
+export { SiFileDropzoneComponent, SiFileUploadDirective, SiFileUploaderComponent, SiFileUploaderModule };
+export type { FileUploadConfig, FileUploadError, FileUploadResult, UploadFile };

package/icon/index.d.ts

@@ -246,6 +246,8 @@ declare const elementAlarmFilled = "data:image/svg+xml;utf8,<svg xmlns='http://w
 declare const elementAlarmTick = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M427.72 116.64 279.19 277.47l-73.9-73.9a12 12 0 0 0-17 17l82.73 82.73a12 12 0 0 0 8.48 3.51h.24a12 12 0 0 0 8.58-3.86l157-170a12 12 0 0 0-17.63-16.28Z'/></svg>";
 declare const elementUser = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 252a76 76 0 1 0-76-76 76.08 76.08 0 0 0 76 76Zm0-128a52 52 0 1 1-52 52 52.06 52.06 0 0 1 52-52ZM124 360.14a12 12 0 0 0 6.71-2.06c.61-.41 61.54-41.08 126.14-41.08 75.3 0 122.86 39.84 123.3 40.23a12 12 0 0 0 15.68-18.18c-2.19-1.88-54.39-46.05-139-46.05C185 293 120 336.35 117.28 338.19a12 12 0 0 0 6.72 21.95Z'/></svg>";
 declare const elementHelp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 64C150.13 64 64 150.13 64 256s86.13 192 192 192 192-86.13 192-192S361.87 64 256 64Zm0 360c-92.64 0-168-75.36-168-168S163.36 88 256 88s168 75.36 168 168-75.36 168-168 168Z'/><path d='M256 305a12 12 0 0 1-12-12v-29.22a12 12 0 0 1 6.51-10.67 11.63 11.63 0 0 1 1.67-.71c1.14-.4 38.54-14.05 38.54-36.4a36 36 0 0 0-70-12 12 12 0 1 1-22.64-8 60 60 0 0 1 116.6 20c0 31-31.39 48.92-46.72 55.84V293A12 12 0 0 1 256 305ZM256.11 360h-.22a16 16 0 0 1 0-32h.22a16 16 0 0 1 0 32Z'/></svg>";
+declare const elementPinch = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M248.46 275.15c0-.19-.05-.37-.07-.55s-.06-.41-.1-.61a6 6 0 0 0-.15-.61c0-.18-.08-.36-.13-.53s-.14-.39-.2-.58-.13-.36-.2-.53-.16-.35-.24-.53-.17-.36-.26-.53-.19-.33-.29-.49-.2-.35-.32-.52-.25-.35-.38-.52-.2-.29-.32-.43c-.24-.29-.5-.58-.77-.85-.28-.27-.56-.52-.86-.77-.14-.12-.29-.22-.44-.33l-.5-.37-.53-.32-.48-.28c-.18-.1-.37-.18-.55-.27l-.51-.23c-.18-.08-.37-.14-.55-.21l-.56-.19-.56-.15-.58-.14-.66-.1-.5-.07a11.85 11.85 0 0 0-1.19-.06h-120a12 12 0 0 0 0 24h91L108 387.84a12 12 0 1 0 17 17l99.51-99.51v91a12 12 0 0 0 24 0v-120a10.88 10.88 0 0 0-.05-1.18ZM405.1 106.75a12 12 0 0 0-17 0l-99.51 99.51v-91a12 12 0 0 0-24 0v120a10.88 10.88 0 0 0 .06 1.14c0 .18.05.36.08.54s.05.41.09.62.1.4.15.6.08.36.14.54.13.38.2.58.12.35.19.52.17.36.25.53.16.36.26.54.19.33.29.49.2.35.31.52l.38.51.32.43c.25.3.5.58.77.86.27.27.56.53.85.77l.44.33a6 6 0 0 0 .51.37 5.74 5.74 0 0 0 .53.32l.47.29.55.26c.17.08.34.17.52.24l.54.2c.19.07.37.14.57.2l.54.14.6.14.63.1c.17 0 .35.06.53.07a11.66 11.66 0 0 0 1.18.06h120a12 12 0 0 0 0-24h-91l99.51-99.51a12 12 0 0 0 .05-16.91Z'/></svg>";
+declare const elementZoom = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M423.94 98.82c0-.19-.05-.37-.08-.55s-.05-.41-.09-.61-.1-.41-.15-.61a4.58 4.58 0 0 0-.14-.53c-.06-.2-.13-.39-.2-.58s-.12-.36-.19-.53-.16-.35-.25-.53-.16-.36-.26-.54-.19-.32-.29-.48-.2-.35-.31-.52-.25-.35-.38-.52l-.32-.43c-.24-.29-.5-.58-.77-.85s-.56-.53-.85-.77l-.44-.33c-.17-.12-.33-.25-.51-.37l-.53-.32-.47-.28c-.18-.1-.37-.18-.56-.27l-.51-.24-.55-.2-.55-.19c-.19-.06-.38-.1-.57-.15l-.57-.14-.67-.1-.49-.07q-.6-.06-1.2-.06H308a12 12 0 0 0 0 24h75l-100.82 100.8a12 12 0 0 0 17 17L400 129v75a12 12 0 0 0 24 0V100a10.88 10.88 0 0 0-.06-1.18ZM212.85 282.18 112 383v-75a12 12 0 0 0-24 0v104a10.88 10.88 0 0 0 .06 1.14c0 .19 0 .37.08.55s0 .41.09.61.1.41.15.61a4.58 4.58 0 0 0 .14.53c.06.2.13.39.2.58s.12.36.19.53.17.35.25.53.16.36.26.54.19.32.29.48.2.35.31.52.25.35.38.52l.32.43c.24.29.5.58.77.85s.56.53.85.77l.44.33c.17.12.33.25.51.37l.52.32.48.28c.18.1.37.18.55.27l.52.24.54.19c.19.07.37.14.57.2a5.36 5.36 0 0 0 .54.14c.2.05.39.11.6.15s.42.06.63.09l.53.08a11.51 11.51 0 0 0 1.23.15h104a12 12 0 0 0 0-24h-75l100.82-100.85a12 12 0 1 0-17-17Z'/></svg>";
 
-export { STATUS_ICON_CONFIG, SiIconComponent, SiIconLegacyComponent, SiIconModule, SiStatusIconComponent, addIcons, element2dEditor, elementAlarmFilled, elementAlarmTick, elementBreadcrumbRoot, elementCalendar, elementCancel, elementChecked, elementCheckedFilled, elementCircleFilled, elementDelete, elementDocument, elementDoubleLeft, elementDoubleRight, elementDown2, elementExport, elementFavorites, elementFavoritesFilled, elementHelp, elementHide, elementLeft2, elementLeft3, elementLeft4, elementLock, elementMenu, elementMinus, elementNotChecked, elementOctagonFilled, elementOk, elementOptionsVertical, elementOutOfService, elementPlus, elementRadioChecked, elementRecordFilled, elementRedo, elementRight2, elementRight3, elementRight4, elementSearch, elementShow, elementSortDown, elementSortUp, elementSoundMute, elementSoundOn, elementSquare45Filled, elementSquareFilled, elementStateExclamationMark, elementStateInfo, elementStatePause, elementStateProgress, elementStateQuestionMark, elementStateTick, elementThumbnails, elementTriangleFilled, elementUpload, elementUser, elementWarningFilled, provideIconConfig };
+export { STATUS_ICON_CONFIG, SiIconComponent, SiIconLegacyComponent, SiIconModule, SiStatusIconComponent, addIcons, element2dEditor, elementAlarmFilled, elementAlarmTick, elementBreadcrumbRoot, elementCalendar, elementCancel, elementChecked, elementCheckedFilled, elementCircleFilled, elementDelete, elementDocument, elementDoubleLeft, elementDoubleRight, elementDown2, elementExport, elementFavorites, elementFavoritesFilled, elementHelp, elementHide, elementLeft2, elementLeft3, elementLeft4, elementLock, elementMenu, elementMinus, elementNotChecked, elementOctagonFilled, elementOk, elementOptionsVertical, elementOutOfService, elementPinch, elementPlus, elementRadioChecked, elementRecordFilled, elementRedo, elementRight2, elementRight3, elementRight4, elementSearch, elementShow, elementSortDown, elementSortUp, elementSoundMute, elementSoundOn, elementSquare45Filled, elementSquareFilled, elementStateExclamationMark, elementStateInfo, elementStatePause, elementStateProgress, elementStateQuestionMark, elementStateTick, elementThumbnails, elementTriangleFilled, elementUpload, elementUser, elementWarningFilled, elementZoom, provideIconConfig };
 export type { IconConfig };

package/ip-input/index.d.ts

@@ -45,7 +45,15 @@ declare abstract class SiIpInputDirective {
     setDisabledState(isDisabled: boolean): void;
     writeValue(value?: string | null): void;
     protected onInput(e: Event): void;
+    /** @internal */
     protected blur(): void;
+    /**
+     * Allow to adjust the input value when leaving the input field.
+     */
+    protected leaveInput(): void;
+    /**
+     * Enforce a format on user input.
+     */
     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>;
@@ -72,6 +80,11 @@ declare abstract class SiIpInputDirective {
  */
 declare class SiIp4InputDirective extends SiIpInputDirective implements ControlValueAccessor, Validator {
     validate(control: AbstractControl): ValidationErrors | null;
+    /**
+     * Trim leading zeros from each part of the IPv4 address
+     */
+    protected leaveInput(): void;
+    /** @internal */
     protected maskInput(e: AddrInputEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiIp4InputDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SiIp4InputDirective, "input[siIpV4]", ["siIpV4"], {}, {}, never, never, true, never>;

package/markdown-renderer/index.d.ts

@@ -0,0 +1,36 @@
+import * as i0 from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Component to display markdown text, uses the {@link getMarkdownRenderer} function internally, relies on `markdown-content` theme class.
+ * @experimental
+ */
+declare class SiMarkdownRendererComponent {
+    private sanitizer;
+    private hostElement;
+    private markdownRenderer;
+    /**
+     * The markdown text to transform and display
+     * @defaultValue ''
+     */
+    readonly text: i0.InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiMarkdownRendererComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiMarkdownRendererComponent, "si-markdown-renderer", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Returns a markdown renderer function which_
+ * - Transforms markdown text into formatted HTML.
+ * - Returns a DOM node containing the formatted content.
+ *
+ * **Warning:** The returned Node is inserted without additional sanitization.
+ * Input content is sanitized before processing.
+ *
+ * @experimental
+ * @param sanitizer - Angular DomSanitizer instance
+ * @returns A function taking the markdown text to transform and returning a DOM div element containing the formatted HTML
+ */
+declare const getMarkdownRenderer: (sanitizer: DomSanitizer) => ((text: string) => Node);
+
+export { SiMarkdownRendererComponent, getMarkdownRenderer };

package/markdown-renderer/package.json

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "48.2.0",
+  "version": "48.3.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,8 +30,8 @@
     "@angular/router": "20",
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
-    "@siemens/element-translate-ng": "48.2.0",
-    "@siemens/element-theme": "48.2.0",
+    "@siemens/element-translate-ng": "48.3.0",
+    "@siemens/element-theme": "48.3.0",
     "@siemens/ngx-datatable": "22 - 24",
     "flag-icons": "^7.3.2",
     "google-libphonenumber": "^3.2.40",
@@ -111,6 +111,10 @@
       "types": "./card/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-card.mjs"
     },
+    "./chat-messages": {
+      "types": "./chat-messages/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-chat-messages.mjs"
+    },
     "./circle-status": {
       "types": "./circle-status/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-circle-status.mjs"
@@ -243,6 +247,10 @@
       "types": "./main-detail-container/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-main-detail-container.mjs"
     },
+    "./markdown-renderer": {
+      "types": "./markdown-renderer/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-markdown-renderer.mjs"
+    },
     "./menu": {
       "types": "./menu/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-menu.mjs"

package/resize-observer/index.d.ts

@@ -36,6 +36,19 @@ declare class ResizeObserverService {
     private processQueue;
     /**
      * check size on all observed elements. Only use in testing!
+     * @deprecated Will be removed in major version 50! For testing purposes use the resize observer mock:
+     *
+     * ```ts
+     * beforeEach(() => mockResizeObserver());
+     * afterEach(() => restoreResizeObserver());
+     * it('should trigger resize', () => {
+     *   // For all observed elements
+     *   MockResizeObserver.triggerResize({});
+     *   // For specific HTML element
+     *   MockResizeObserver.triggerResize({ target: myElement });
+     * });
+     * ```
+  
      */
     _checkAll(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResizeObserverService, never>;

package/schematics/migrations/action-modal-migration/action-modal-migration.js

@@ -12,9 +12,9 @@ import { ACTION_DIALOG_TYPES_REPLACEMENTS, ACTION_MODAL_SYMBOLS, DIALOG_METHOD_C
  * @returns A schematic rule for migrating action modal methods.
  */
 export const actionModalMigrationRule = (options) => {
-    return (tree, context) => {
+    return async (tree, context) => {
         context.logger.info('🔄 Migrating action modal methods to v48...');
-        const tsSourceFiles = discoverSourceFiles(tree, context, options.path);
+        const tsSourceFiles = await discoverSourceFiles(tree, context, options.path);
         for (const filePath of tsSourceFiles) {
             const content = tree.read(filePath);
             if (!content) {

package/schematics/migrations/data/attribute-selectors.js

@@ -0,0 +1,6 @@
+export const ATTRIBUTE_SELECTORS_MIGRATION = [
+    // current to legacy
+    { replace: 'siPopover', replaceWith: 'siPopoverLegacy' },
+    // next to current
+    { replace: 'siPopoverNext', replaceWith: 'siPopover' }
+];

package/schematics/migrations/data/component-names.js

@@ -0,0 +1,78 @@
+export const COMPONENT_NAMES_MIGRATION = [
+    // Icon current to legacy
+    {
+        module: /@(siemens|simpl)\/element-ng(\/icon)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiIconComponent',
+                replaceWith: 'SiIconLegacyComponent'
+            }
+        ]
+    },
+    // Icon next to current
+    {
+        module: /@(siemens|simpl)\/element-ng(\/icon-next)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiIconNextComponent',
+                replaceWith: 'SiIconComponent'
+            }
+        ]
+    },
+    // Tabs current to legacy
+    {
+        module: /@(siemens|simpl)\/element-ng(\/tabs)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiTabComponent',
+                replaceWith: 'SiTabLegacyComponent'
+            },
+            {
+                replace: 'SiTabsetComponent',
+                replaceWith: 'SiTabsetLegacyComponent'
+            },
+            {
+                replace: 'SiTabsModule',
+                replaceWith: 'SiTabsLegacyModule'
+            }
+        ],
+        toModule: '@siemens/element-ng/tabs-legacy'
+    },
+    // Tabs next to current
+    {
+        module: /@(siemens|simpl)\/element-ng(\/tabs-next)?/,
+        symbolRenamings: [
+            {
+                replace: 'SiTabNextComponent',
+                replaceWith: 'SiTabComponent'
+            },
+            {
+                replace: 'SiTabsetNextComponent',
+                replaceWith: 'SiTabsetComponent'
+            },
+            {
+                replace: 'SiTabsNextModule',
+                replaceWith: 'SiTabsModule'
+            }
+        ],
+        toModule: '@siemens/element-ng/tabs'
+    },
+    // Popover current to legacy
+    {
+        module: /@(siemens|simpl)\/element-ng(\/popover)?/,
+        symbolRenamings: [
+            { replace: 'SiPopoverDirective', replaceWith: 'SiPopoverLegacyDirective' },
+            { replace: 'SiPopoverModule', replaceWith: 'SiPopoverLegacyModule' }
+        ],
+        toModule: '@siemens/element-ng/popover-legacy'
+    },
+    // Popover next to current
+    {
+        module: /@(siemens|simpl)\/element-ng(\/popover-next)?/,
+        symbolRenamings: [
+            { replace: 'SiPopoverNextDirective', replaceWith: 'SiPopoverDirective' },
+            { replace: 'SiPopoverNextModule', replaceWith: 'SiPopoverModule' }
+        ],
+        toModule: '@siemens/element-ng/popover'
+    }
+];

package/schematics/migrations/data/element-selectors.js

@@ -0,0 +1,10 @@
+export const ELEMENT_SELECTORS_MIGRATION = [
+    // current to legacy
+    { replace: 'si-icon', replaceWith: 'si-icon-legacy' },
+    { replace: 'si-tabset', replaceWith: 'si-tabset-legacy' },
+    { replace: 'si-tab', replaceWith: 'si-tab-legacy' },
+    // next to current
+    { replace: 'si-icon-next', replaceWith: 'si-icon' },
+    { replace: 'si-tabset-next', replaceWith: 'si-tabset' },
+    { replace: 'si-tab-next', replaceWith: 'si-tab' }
+];

package/schematics/migrations/data/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { ATTRIBUTE_SELECTORS_MIGRATION } from './attribute-selectors.js';
+import { COMPONENT_NAMES_MIGRATION } from './component-names.js';
+import { ELEMENT_SELECTORS_MIGRATION } from './element-selectors.js';
+import { OUTPUT_NAMES_MIGRATION } from './output-names.js';
+import { SYMBOL_REMOVALS_MIGRATION } from './symbol-removals.js';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const getElementMigrationData = () => ({
+    attributeSelectorChanges: ATTRIBUTE_SELECTORS_MIGRATION,
+    componentNameChanges: COMPONENT_NAMES_MIGRATION,
+    elementSelectorChanges: ELEMENT_SELECTORS_MIGRATION,
+    symbolRemovalChanges: SYMBOL_REMOVALS_MIGRATION,
+    outputNameChanges: OUTPUT_NAMES_MIGRATION
+});

package/schematics/migrations/data/output-names.js

@@ -0,0 +1,8 @@
+export const OUTPUT_NAMES_MIGRATION = [
+    {
+        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
+        elementSelector: 'si-collapsible-panel',
+        componentOrModuleName: ['SiCollapsiblePanelComponent', 'SiAccordionModule'],
+        apiMappings: [{ replace: '(toggle)', replaceWith: '(panelToggle)' }]
+    }
+];

package/schematics/migrations/data/symbol-removals.js

@@ -0,0 +1,58 @@
+export const SYMBOL_REMOVALS_MIGRATION = [
+    {
+        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
+        elementSelector: 'si-accordion',
+        componentOrModuleName: ['SiAccordionComponent', 'SiAccordionModule'],
+        names: ['colorVariant']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
+        elementSelector: 'input',
+        attributeSelector: 'siDateInput',
+        componentOrModuleName: ['SiDateInputDirective', 'SiDatepickerModule'],
+        names: ['dateInputDebounceTime']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
+        elementSelector: 'input',
+        attributeSelector: 'siDatepicker',
+        componentOrModuleName: ['SiDateInputDirective', 'SiDatepickerModule'],
+        names: ['triggeringInput']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/datepicker)?/,
+        elementSelector: 'si-date-range',
+        componentOrModuleName: ['SiDateRangeComponent', 'SiDatepickerModule'],
+        names: ['debounceTime']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/filtered-search)?/,
+        elementSelector: 'si-filtered-search',
+        componentOrModuleName: ['SiFilteredSearchComponent', 'SiFilteredSearchModule'],
+        names: ['showIcon', 'noMatchingCriteriaText']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/form)?/,
+        elementSelector: 'si-form-item',
+        componentOrModuleName: ['SiFormItemComponent', 'SiFormModule'],
+        names: ['inputId', 'readonly']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
+        elementSelector: 'si-navbar-vertical',
+        componentOrModuleName: ['SiNavbarVerticalComponent', 'SiNavbarVerticalModule'],
+        names: ['autoCollapseDelay']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/split)?/,
+        elementSelector: 'si-split-part',
+        componentOrModuleName: ['SiSplitPartComponent', 'SiSplitModule'],
+        names: ['headerStatusColor', 'headerStatusIconClass']
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/navbar-vertical)?/,
+        elementSelector: 'si-tree-view',
+        componentOrModuleName: ['SiTreeViewComponent', 'SiTreeViewModule'],
+        names: ['disableFilledIcons', 'trackByFunction']
+    }
+];

package/schematics/migrations/element-migration/element-migration.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import * as ts from 'typescript';
+import { EmitHint } from 'typescript';
+import { discoverSourceFiles, getImportSpecifiers, renameApi, renameAttribute, renameElementTag, renameIdentifier, removeSymbol } from '../../utils/index.js';
+import { getElementMigrationData } from '../data/index.js';
+export const elementMigrationRule = (options) => {
+    return async (tree, context) => {
+        const tsSourceFiles = await discoverSourceFiles(tree, context, options.path);
+        const migrationData = getElementMigrationData();
+        for (const filePath of tsSourceFiles) {
+            const content = tree.read(filePath);
+            if (!content) {
+                continue;
+            }
+            const sourceFile = ts.createSourceFile(filePath, content.toString(), ts.ScriptTarget.Latest, true);
+            let recorder = undefined;
+            let printer = undefined;
+            // Remove the ifs when it grows a bit more and split into multiple functions
+            if (migrationData.componentNameChanges) {
+                const changeInstructions = renameIdentifier({
+                    sourceFile,
+                    renamingInstructions: migrationData.componentNameChanges
+                });
+                for (const changeInstruction of changeInstructions) {
+                    recorder ??= tree.beginUpdate(filePath);
+                    printer ??= ts.createPrinter();
+                    recorder.remove(changeInstruction.start, changeInstruction.width);
+                    recorder.insertLeft(changeInstruction.start, printer.printNode(EmitHint.Unspecified, changeInstruction.newNode, sourceFile));
+                }
+            }
+            if (migrationData.attributeSelectorChanges) {
+                recorder ??= tree.beginUpdate(filePath);
+                for (const change of migrationData.attributeSelectorChanges) {
+                    renameAttribute({
+                        tree,
+                        recorder,
+                        sourceFile,
+                        filePath,
+                        fromName: change.replace,
+                        toName: change.replaceWith
+                    });
+                }
+            }
+            if (migrationData.elementSelectorChanges) {
+                recorder ??= tree.beginUpdate(filePath);
+                for (const change of migrationData.elementSelectorChanges) {
+                    renameElementTag({
+                        tree,
+                        recorder,
+                        sourceFile,
+                        filePath,
+                        fromName: change.replace,
+                        toName: change.replaceWith
+                    });
+                }
+            }
+            if (migrationData.outputNameChanges) {
+                recorder ??= tree.beginUpdate(filePath);
+                for (const change of migrationData.outputNameChanges) {
+                    const importSpecifiers = getImportSpecifiers(sourceFile, change.module, change.componentOrModuleName);
+                    if (!importSpecifiers?.length) {
+                        continue;
+                    }
+                    renameApi({
+                        tree,
+                        recorder,
+                        sourceFile,
+                        filePath,
+                        elementName: change.elementSelector,
+                        apis: change.apiMappings
+                    });
+                }
+            }
+            if (migrationData.symbolRemovalChanges) {
+                recorder ??= tree.beginUpdate(filePath);
+                for (const change of migrationData.symbolRemovalChanges) {
+                    const importSpecifiers = getImportSpecifiers(sourceFile, change.module, change.componentOrModuleName);
+                    if (!importSpecifiers?.length) {
+                        continue;
+                    }
+                    removeSymbol({
+                        tree,
+                        recorder,
+                        sourceFile,
+                        filePath,
+                        elementName: change.elementSelector,
+                        attributeSelector: change.attributeSelector,
+                        names: change.names
+                    });
+                }
+            }
+            if (recorder) {
+                tree.commitUpdate(recorder);
+            }
+        }
+        return tree;
+    };
+};

package/schematics/migrations/element-migration/index.js

@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export * from './element-migration.js';

package/schematics/migrations/index.js

@@ -4,10 +4,15 @@
  */
 import { chain } from '@angular-devkit/schematics';
 import { actionModalMigrationRule } from './action-modal-migration/index.js';
-import { toLegacyMigrationRule } from './to-legacy-migration/to-legacy-migration';
+import { elementMigrationRule } from './element-migration/index.js';
+import { wizardMigrationRule } from './wizard-migration/index.js';
 export const v47to48Migration = (options) => {
     return (tree, context) => {
         context.logger.info('🚀 Starting migration from v47 to v48...');
-        return chain([actionModalMigrationRule(options), toLegacyMigrationRule(options)])(tree, context);
+        return chain([
+            actionModalMigrationRule(options),
+            elementMigrationRule(options),
+            wizardMigrationRule(options)
+        ])(tree, context);
     };
 };