@siemens/element-ng 48.2.0-rc.1 → 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/header-dropdown/index.d.ts

@@ -66,15 +66,22 @@ declare class SiHeaderDropdownTriggerDirective implements OnChanges, OnInit, OnD
  * Must only be opened using an {@link SiHeaderDropdownTriggerDirective}.
  */
 declare class SiHeaderDropdownComponent {
+    /** @internal */
     protected trigger: SiHeaderDropdownTriggerDirective;
     private readonly focusTrap;
     private previousElement;
     private readonly document;
     private readonly options;
     constructor();
+    /** @internal */
     protected get show(): boolean;
+    /** @internal */
+    protected get overlay(): boolean;
+    /** @internal */
     protected get submenu(): boolean;
+    /** @internal */
     protected get trapFocus(): boolean;
+    /** @internal */
     protected escape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiHeaderDropdownComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiHeaderDropdownComponent, "si-header-dropdown", never, {}, {}, never, ["*"], true, never>;

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>;
@@ -111,7 +124,6 @@ declare class SiIp6InputDirective extends SiIpInputDirective implements ControlV
 
 /**
  * Validator factory for a IPV6 address.
-
  */
 declare const ipV6Validator: (options: {
     zeroCompression?: boolean;

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-rc.1",
+  "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-rc.1",
-    "@siemens/element-theme": "48.2.0-rc.1",
+    "@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/collection.json

@@ -23,6 +23,12 @@
       "factory": "./ts-import-to-siemens-migration/index#tsImportMigration",
       "schema": "./ts-import-to-siemens-migration/schema.json",
       "aliases": ["ts-i-migration"]
+    },
+    "migrate-v47-to-v48": {
+      "description": "A migration schematic for updating Element from v47 to v48",
+      "factory": "./migrations/index#v47to48Migration",
+      "schema": "./migrations/schema.json",
+      "aliases": ["v47-to-v48"]
     }
   }
 }

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

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+import { SchematicsException } from '@angular-devkit/schematics';
+import * as ts from 'typescript';
+import { discoverSourceFiles, getImportSpecifiers } from '../../utils/index.js';
+import { ACTION_DIALOG_TYPES_REPLACEMENTS, ACTION_MODAL_SYMBOLS, DIALOG_METHOD_CONFIGS, LEGACY_METHODS } from './action-modal.mappings.js';
+/**
+ * Migration rule for action modal methods.
+ * @param options - The options object containing the path to the project files to be migrated.
+ * @returns A schematic rule for migrating action modal methods.
+ */
+export const actionModalMigrationRule = (options) => {
+    return async (tree, context) => {
+        context.logger.info('🔄 Migrating action modal methods to v48...');
+        const tsSourceFiles = await discoverSourceFiles(tree, context, options.path);
+        for (const filePath of tsSourceFiles) {
+            const content = tree.read(filePath);
+            if (!content) {
+                continue;
+            }
+            const sourceFile = ts.createSourceFile(filePath, content.toString(), ts.ScriptTarget.Latest, true);
+            // Match both @siemens/element-ng and @simpl/element-ng, with or without /action-modal
+            // This ensures we only process files that import from these modules
+            const modulePathToMatch = /@(siemens|simpl)\/element-ng(\/action-modal)?/;
+            const actionModalImports = getImportSpecifiers(sourceFile, modulePathToMatch, ACTION_MODAL_SYMBOLS);
+            if (!actionModalImports?.length) {
+                continue;
+            }
+            const pendingTransformations = [];
+            const visitNodeAndCollectTransformations = (node) => {
+                // Collect method call transformations
+                if (ts.isCallExpression(node)) {
+                    const methodTransformation = createActionDialogMethodCallTransformation(node);
+                    if (methodTransformation) {
+                        pendingTransformations.push(methodTransformation);
+                    }
+                }
+                // Collect type reference transformations
+                if (ts.isPropertyAccessExpression(node)) {
+                    const typeTransformation = createActionDialogTypeTransformation(node);
+                    if (typeTransformation) {
+                        pendingTransformations.push(typeTransformation);
+                    }
+                }
+                node.forEachChild(visitNodeAndCollectTransformations);
+            };
+            sourceFile.forEachChild(visitNodeAndCollectTransformations);
+            if (pendingTransformations.length > 0) {
+                applyCodeTransformations(tree, filePath, pendingTransformations);
+            }
+        }
+        return tree;
+    };
+};
+const createActionDialogMethodCallTransformation = (node) => {
+    const expression = node.expression;
+    if (!ts.isPropertyAccessExpression(expression)) {
+        return null;
+    }
+    const methodName = expression.name.text;
+    if (!LEGACY_METHODS.includes(methodName)) {
+        return null;
+    }
+    const dialogPropertiesArray = generateDialogProperties(methodName, node.arguments);
+    const printer = ts.createPrinter();
+    const newNode = ts.factory.createCallExpression(ts.factory.createPropertyAccessExpression(expression.expression, ts.factory.createIdentifier('showActionDialog')), undefined, [ts.factory.createObjectLiteralExpression(dialogPropertiesArray)]);
+    const newCode = printer.printNode(ts.EmitHint.Expression, newNode, node.getSourceFile());
+    return {
+        node,
+        newCode,
+        type: 'method-call'
+    };
+};
+const createActionDialogTypeTransformation = (node) => {
+    const nodeText = node.getText().trim();
+    const matchingReplacement = ACTION_DIALOG_TYPES_REPLACEMENTS.find(typeReplacement => nodeText === typeReplacement.old);
+    if (!matchingReplacement) {
+        return null;
+    }
+    return {
+        node,
+        newCode: `'${matchingReplacement.new}'`,
+        type: 'type-reference'
+    };
+};
+/**
+ * Generates the dialog properties for the action dialog.
+ * @param methodName - The name of the method being migrated.
+ * @param nodeArguments - The arguments passed to the method.
+ * @returns An array of PropertyAssignment nodes for TypeScript printer.
+ * @throws SchematicsException if the method configuration is unknown.
+ */
+const generateDialogProperties = (methodName, nodeArguments) => {
+    const methodConfig = DIALOG_METHOD_CONFIGS[methodName];
+    if (!methodConfig) {
+        throw new SchematicsException(`Unknown method configuration for: ${methodName}`);
+    }
+    const dialogProperties = [
+        ts.factory.createPropertyAssignment(ts.factory.createIdentifier('type'), ts.factory.createStringLiteral(methodConfig.type, true))
+    ];
+    nodeArguments.forEach((arg, index) => {
+        const paramName = methodConfig.parameters[index];
+        if (paramName) {
+            dialogProperties.push(ts.factory.createPropertyAssignment(ts.factory.createIdentifier(paramName), arg));
+        }
+    });
+    return dialogProperties;
+};
+const applyCodeTransformations = (tree, filePath, codeTransformations) => {
+    const recorder = tree.beginUpdate(filePath);
+    // Sort by position (descending) to avoid offset issues
+    codeTransformations
+        .sort((a, b) => b.node.getStart() - a.node.getStart())
+        .forEach(({ node, newCode }) => {
+        recorder.remove(node.getStart(), node.getWidth());
+        recorder.insertLeft(node.getStart(), newCode);
+    });
+    tree.commitUpdate(recorder);
+};

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

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+export const ACTION_MODAL_SYMBOLS = [
+    'AlertDialogResult',
+    'ConfirmationDialogResult',
+    'DeleteConfirmationDialogResult',
+    'EditDiscardDialogResult',
+    'SiActionDialogService'
+];
+export const LEGACY_METHODS = [
+    'showAlertDialog',
+    'showConfirmationDialog',
+    'showEditDiscardDialog',
+    'showDeleteConfirmationDialog'
+];
+export const DIALOG_METHOD_CONFIGS = {
+    showAlertDialog: {
+        type: 'alert',
+        parameters: ['message', 'heading', 'confirmBtnName', 'translationParams', 'icon', 'diOptions']
+    },
+    showConfirmationDialog: {
+        type: 'confirmation',
+        parameters: [
+            'message',
+            'heading',
+            'confirmBtnName',
+            'declineBtnName',
+            'translationParams',
+            'icon',
+            'diOptions'
+        ]
+    },
+    showEditDiscardDialog: {
+        type: 'edit-discard',
+        parameters: [
+            'disableSave',
+            'message',
+            'heading',
+            'saveBtnName',
+            'discardBtnName',
+            'cancelBtnName',
+            'disableSaveMessage',
+            'disableSaveDiscardBtnName',
+            'translationParams',
+            'icon',
+            'diOptions'
+        ]
+    },
+    showDeleteConfirmationDialog: {
+        type: 'delete-confirm',
+        parameters: [
+            'message',
+            'heading',
+            'deleteBtnName',
+            'cancelBtnName',
+            'translationParams',
+            'icon',
+            'diOptions'
+        ]
+    }
+};
+export const ACTION_DIALOG_TYPES_REPLACEMENTS = [
+    // Alert dialog
+    {
+        old: 'AlertDialogResult.Confirm',
+        new: 'confirm'
+    },
+    // Edit discard dialog
+    {
+        old: 'EditDiscardDialogResult.Save',
+        new: 'save'
+    },
+    {
+        old: 'EditDiscardDialogResult.Discard',
+        new: 'discard'
+    },
+    {
+        old: 'EditDiscardDialogResult.Cancel',
+        new: 'cancel'
+    },
+    // Confirmation dialog
+    {
+        old: 'ConfirmationDialogResult.Confirm',
+        new: 'confirm'
+    },
+    { old: 'ConfirmationDialogResult.Decline', new: 'decline' },
+    // Delete confirmation dialog
+    {
+        old: 'DeleteConfirmationDialogResult.Delete',
+        new: 'delete'
+    },
+    {
+        old: 'DeleteConfirmationDialogResult.Cancel',
+        new: 'cancel'
+    }
+];

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

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

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' }
+];