@siemens/element-ng 48.2.0 → 48.4.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/filtered-search/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { BackgroundColorVariant } from '@siemens/element-ng/common';
 import { TypeaheadOption } from '@siemens/element-ng/typeahead';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
@@ -150,7 +150,7 @@ interface InternalCriterionDefinition extends CriterionDefinition {
     translatedLabel: string;
 }
 
-declare class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy {
+declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     private static readonly criterionRegex;
     /**
      * Output callback event that provides an object describing the
@@ -370,10 +370,10 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy
     private typeaheadInputChange;
     /** Used to debounce the Search emissions */
     private searchEmitQueue;
-    private destroySubscriptions;
-    private cdRef;
-    private translateService;
-    private locale;
+    private readonly destroyRef;
+    private readonly cdRef;
+    private readonly translateService;
+    private readonly locale;
     /**
      * The cache is used to control when the interceptDisplayedCriteria event needs to be called.
      * Every time a criteria gain the focus we have to reset the cache to call the interceptor.
@@ -388,7 +388,6 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges, OnDestroy
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     private initCriteria;
     private initValue;
     /**

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/navbar-vertical/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 { OnChanges, OnInit, OnDestroy, SimpleChanges } from '@angular/core';
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { NavigationExtras, IsActiveMatchOptions, ActivatedRoute } from '@angular/router';
 import { MenuItem } from '@siemens/element-ng/common';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
@@ -91,7 +91,7 @@ declare class SiNavbarVerticalItemGuardDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalItemGuardDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiNavbarVerticalItemGuardDirective, "[siNavbarVerticalItemGuard]", never, {}, {}, never, never, true, never>;
 }
-declare class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy {
+declare class SiNavbarVerticalComponent implements OnChanges, OnInit {
     /**
      * Whether the navbar-vertical is collapsed.
      *
@@ -197,12 +197,10 @@ declare class SiNavbarVerticalComponent implements OnChanges, OnInit, OnDestroy
     private readonly itemsToComponents;
     protected readonly smallScreen: _angular_core.WritableSignal<boolean>;
     protected readonly uiStateExpandedItems: _angular_core.WritableSignal<Record<string, boolean>>;
-    private destroyer;
     private preferCollapse;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     protected toggleCollapse(): void;
     /** Expands the vertical navbar. */
     expand(): void;

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.4.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.4.0",
+    "@siemens/element-theme": "48.4.0",
     "@siemens/ngx-datatable": "22 - 24",
     "flag-icons": "^7.3.2",
     "google-libphonenumber": "^3.2.40",
@@ -67,10 +67,6 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/siemens-element-ng.mjs"
     },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "default": "./fesm2022/siemens-element-ng-accordion.mjs"
-    },
     "./about": {
       "types": "./about/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-about.mjs"
@@ -87,6 +83,10 @@
       "types": "./auto-collapsable-list/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-auto-collapsable-list.mjs"
     },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-accordion.mjs"
+    },
     "./autocomplete": {
       "types": "./autocomplete/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-autocomplete.mjs"
@@ -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) {
@@ -29,7 +29,11 @@ export const actionModalMigrationRule = (options) => {
                 continue;
             }
             const pendingTransformations = [];
+            const usedIdentifier = new Set();
             const visitNodeAndCollectTransformations = (node) => {
+                if (ts.isImportDeclaration(node)) {
+                    return;
+                }
                 // Collect method call transformations
                 if (ts.isCallExpression(node)) {
                     const methodTransformation = createActionDialogMethodCallTransformation(node);
@@ -42,11 +46,17 @@ export const actionModalMigrationRule = (options) => {
                     const typeTransformation = createActionDialogTypeTransformation(node);
                     if (typeTransformation) {
                         pendingTransformations.push(typeTransformation);
+                        // We remove the usage here. In order to avoid counting it as used identifier, we skip further processing.
+                        return;
                     }
                 }
+                if (ts.isIdentifier(node)) {
+                    usedIdentifier.add(node.text);
+                }
                 node.forEachChild(visitNodeAndCollectTransformations);
             };
             sourceFile.forEachChild(visitNodeAndCollectTransformations);
+            pendingTransformations.push(...removeUnusedImports(sourceFile, usedIdentifier));
             if (pendingTransformations.length > 0) {
                 applyCodeTransformations(tree, filePath, pendingTransformations);
             }
@@ -69,8 +79,7 @@ const createActionDialogMethodCallTransformation = (node) => {
     const newCode = printer.printNode(ts.EmitHint.Expression, newNode, node.getSourceFile());
     return {
         node,
-        newCode,
-        type: 'method-call'
+        newCode
     };
 };
 const createActionDialogTypeTransformation = (node) => {
@@ -81,8 +90,7 @@ const createActionDialogTypeTransformation = (node) => {
     }
     return {
         node,
-        newCode: `'${matchingReplacement.new}'`,
-        type: 'type-reference'
+        newCode: `'${matchingReplacement.new}'`
     };
 };
 /**
@@ -119,3 +127,36 @@ const applyCodeTransformations = (tree, filePath, codeTransformations) => {
     });
     tree.commitUpdate(recorder);
 };
+const removeUnusedImports = (sourceFile, usedIdentifier) => {
+    const printer = ts.createPrinter();
+    const importFinder = (node) => {
+        if (ts.isImportDeclaration(node) &&
+            ts.isStringLiteral(node.moduleSpecifier) &&
+            /@(siemens|simpl)\/element-ng(\/action-modal)?/.test(node.moduleSpecifier.text) &&
+            node.importClause?.namedBindings &&
+            ts.isNamedImports(node.importClause.namedBindings)) {
+            const usedBindings = node.importClause.namedBindings.elements.filter(element => 
+            // This script anyway is not capable of handling aliasing imports, so we can ignore them here.
+            usedIdentifier.has(element.name.text) || !ACTION_MODAL_SYMBOLS.includes(element.name.text));
+            if (usedBindings.length === node.importClause.namedBindings.elements.length) {
+                // All bindings are used, no changes needed
+                return undefined;
+            }
+            if (usedBindings.length === 0) {
+                // No bindings are used, remove the entire import statement
+                return {
+                    node,
+                    newCode: ''
+                };
+            }
+            // Recreate import statement with only used bindings
+            const newImport = ts.factory.createImportDeclaration(node.modifiers, ts.factory.createImportClause(node.importClause.isTypeOnly, node.importClause.name, ts.factory.createNamedImports(usedBindings)), node.moduleSpecifier, node.attributes);
+            return {
+                node,
+                newCode: printer.printNode(ts.EmitHint.Unspecified, newImport, sourceFile)
+            };
+        }
+        return undefined;
+    };
+    return sourceFile.statements.map(importFinder).filter(transform => transform !== undefined);
+};

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,7 @@
+export const OUTPUT_NAMES_MIGRATION = [
+    {
+        module: /@(siemens|simpl)\/element-ng(\/accordion)?/,
+        elementSelector: 'si-collapsible-panel',
+        apiMappings: [{ replace: '(toggle)', replaceWith: '(panelToggle)' }]
+    }
+];