@siemens/element-ng 49.4.0 → 49.6.0

package/navbar-vertical-next/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/siemens-element-ng-navbar-vertical-next.mjs",
+  "typings": "../types/siemens-element-ng-navbar-vertical-next.d.ts"
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "49.4.0",
+  "version": "49.6.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -43,8 +43,8 @@
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
     "@siemens/element-icons": "1",
-    "@siemens/element-translate-ng": "49.4.0",
-    "@siemens/element-theme": "49.4.0",
+    "@siemens/element-translate-ng": "49.6.0",
+    "@siemens/element-theme": "49.6.0",
     "@siemens/ngx-datatable": "22 - 26",
     "ag-grid-community": "^34.3.1",
     "flag-icons": "^7.3.2",
@@ -288,6 +288,10 @@
       "types": "./types/siemens-element-ng-navbar-vertical.d.ts",
       "default": "./fesm2022/siemens-element-ng-navbar-vertical.mjs"
     },
+    "./navbar-vertical-next": {
+      "types": "./types/siemens-element-ng-navbar-vertical-next.d.ts",
+      "default": "./fesm2022/siemens-element-ng-navbar-vertical-next.mjs"
+    },
     "./notification-item": {
       "types": "./types/siemens-element-ng-notification-item.d.ts",
       "default": "./fesm2022/siemens-element-ng-notification-item.mjs"

package/schematics/migrations/data/class-member-replacement.js

@@ -14,5 +14,10 @@ export const CLASS_MEMBER_REPLACEMENTS_MIGRATION = [
             { property: 'isXl', replacement: '${expression}.xl()' },
             { property: 'isXxl', replacement: '${expression}.xxl()' }
         ]
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/modal)?/,
+        typeNames: ['ModalOptions'],
+        propertyReplacements: [{ property: 'initialState', replacement: '${expression}.inputValues' }]
     }
 ];

package/schematics/migrations/data/migration-test-data.js

@@ -210,6 +210,11 @@ const CLASS_MEMBER_REPLACEMENTS_MIGRATION = [
             { property: 'isXl', replacement: '${expression}.xl()' },
             { property: 'isXxl', replacement: '${expression}.xxl()' }
         ]
+    },
+    {
+        module: /@(siemens|simpl)\/element-ng(\/modal)?/,
+        typeNames: ['ModalOptions'],
+        propertyReplacements: [{ property: 'initialState', replacement: '${expression}.inputValues' }]
     }
 ];
 const ELEMENT_CLASS_CHANGES_MIGRATION = [

package/schematics/migrations/utilities/class-member-replacement.migration.js

@@ -36,7 +36,7 @@ const classMemberReplacements = ({ recorder, sourceFile, instruction, typeChecke
         return;
     }
     const replacementsToMake = [];
-    // Visit all nodes to find property access expressions
+    // Visit all nodes to find property access expressions and property assignments
     const visit = (node) => {
         if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.name)) {
             try {
@@ -63,6 +63,34 @@ const classMemberReplacements = ({ recorder, sourceFile, instruction, typeChecke
                 // Ignore type checking errors
             }
         }
+        // Handle property assignments in object literals (e.g. { initialState: value })
+        if (ts.isPropertyAssignment(node) &&
+            ts.isIdentifier(node.name) &&
+            ts.isObjectLiteralExpression(node.parent)) {
+            try {
+                const contextualType = typeChecker.getContextualType(node.parent);
+                const typeName = contextualType?.symbol?.name;
+                if (typeName && instruction.typeNames.includes(typeName)) {
+                    const propertyName = node.name.text;
+                    const replacement = instruction.propertyReplacements.find(r => r.property === propertyName);
+                    if (replacement) {
+                        // Extract the new property name from the replacement template.
+                        // Only apply for simple renames (e.g. '${expression}.inputValues' -> 'inputValues').
+                        const match = replacement.replacement.match(/^\$\{expression\}\.(\w+)$/);
+                        if (match) {
+                            replacementsToMake.push({
+                                start: node.name.getStart(sourceFile),
+                                end: node.name.getEnd(),
+                                text: match[1]
+                            });
+                        }
+                    }
+                }
+            }
+            catch {
+                // Ignore type checking errors
+            }
+        }
         ts.forEachChild(node, visit);
     };
     visit(sourceFile);

package/types/siemens-element-ng-filtered-search.d.ts

@@ -1,7 +1,6 @@
 import * as _angular_core 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';
 import { Observable } from 'rxjs';
 import { DatepickerInputConfig } from '@siemens/element-ng/datepicker';
@@ -147,7 +146,6 @@ interface InternalCriterionDefinition extends CriterionDefinition {
 }
 
 declare class SiFilteredSearchComponent implements OnInit, OnChanges {
-    private static readonly criterionRegex;
     /**
      * Output callback event that provides an object describing the
      * selected criteria and additional filter text.
@@ -366,7 +364,7 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
      * ```
      */
     readonly interceptDisplayedCriteria: _angular_core.OutputEmitterRef<DisplayedCriteriaEventArgs>;
-    private readonly freeTextInputElement;
+    private readonly freeTextInput;
     private readonly scrollContainer;
     private readonly valueComponents;
     protected dataSource: Observable<InternalCriterionDefinition[]>;
@@ -379,14 +377,12 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     /** Internal criteria model */
     protected internalCriterionDefinitions: InternalCriterionDefinition[];
     protected readonly icons: Record<"elementCancel" | "elementSearch", string>;
-    /** Used to trigger a renewed search */
-    private typeaheadInputChange;
     /** Used to debounce the Search emissions */
     private searchEmitQueue;
     private readonly destroyRef;
-    private readonly cdRef;
     private readonly translateService;
     private readonly locale;
+    private readonly freeTextFocused;
     protected readonly allowFreeTextCache: _angular_core.WritableSignal<boolean>;
     private lastEmittedSearchCriteria?;
     protected readonly isStrictOrOnlySelectValue: _angular_core.Signal<boolean>;
@@ -413,7 +409,6 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
         triggerSearch: boolean;
     } | void): void;
     protected submit(): void;
-    protected typeaheadOnSelectCriterion(event: TypeaheadOption): void;
     protected validateCriterionLabel(criterion: InternalCriterionDefinition): boolean;
     /**
      * Converts the internally used data model to the external model.
@@ -428,9 +423,16 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
     private getFilteredTypeaheadCriteria;
     private getCriteriaToDisplayFromSubscription;
     protected freeTextFocus(): void;
-    protected freeTextBackspace(event: Event): void;
-    protected freeTextInput(event: Event): void;
-    protected freeTextBlur(): void;
+    protected freeTextBackspace(): void;
+    protected onCreateCriterion(event: {
+        criterion: InternalCriterionDefinition;
+        value?: string;
+    }): void;
+    protected onCreateCriterionByName(event: {
+        criterionName: string;
+        value?: string;
+    }): void;
+    protected onSearchValueChange(value: string): void;
     protected valueChange(value: CriterionValue, criterion: {
         config: InternalCriterionDefinition;
         value: CriterionValue;

package/types/siemens-element-ng-markdown-renderer.d.ts

@@ -13,7 +13,7 @@ declare class SiMarkdownRendererComponent {
      * The markdown text to transform and display
      * @defaultValue ''
      */
-    readonly text: i0.InputSignal<string>;
+    readonly text: i0.InputSignal<string | undefined>;
     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>;

package/types/siemens-element-ng-navbar-vertical-next.d.ts

@@ -0,0 +1,264 @@
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import * as _angular_core from '@angular/core';
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { NavigationExtras, IsActiveMatchOptions, ActivatedRoute } from '@angular/router';
+import { MenuItem } from '@siemens/element-ng/common';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Common properties shared among navbar item types.
+ * @experimental
+ */
+interface NavbarVerticalNextItemBase {
+    /** The ID is required if the navbar is used with UIState. */
+    id?: string;
+    /** Label that is shown to the user. */
+    label: TranslatableString;
+    /** Optional icon that will be rendered before the label. */
+    icon?: string;
+    /** Badge that is rendered after the label or as a red dot in the collapsed state. */
+    badge?: string | number;
+    /** Color of the badge.
+     * Use any color shown here {@link https://element.siemens.io/components/status-notifications/badges/#example}
+     * without `bg-` prefix.
+     */
+    badgeColor?: string;
+    /**
+     * Hide badge when navbar is collapsed.
+     * By default, badges are always visible (both expanded and collapsed).
+     */
+    hideBadgeWhenCollapsed?: boolean;
+}
+/**
+ * Use this type to create a group that can hold multiple items.
+ * @experimental
+ */
+interface NavbarVerticalNextItemGroup extends NavbarVerticalNextItemBase {
+    type: 'group';
+    /** Submenu items for this menu item. */
+    children: NavbarVerticalNextSubItem[];
+    /** Set this property if the item should be expanded by default. */
+    expanded?: boolean;
+}
+/**
+ * Use this type to create a routerLink item.
+ * @experimental
+ */
+interface NavbarVerticalNextItemRouterLink extends NavbarVerticalNextItemBase {
+    type: 'router-link';
+    /** Link for the angular router. Accepts the same values as {@link RouterLink}. */
+    routerLink: string | any[];
+    /** Navigation extras that are passed to the {@link RouterLink}. */
+    extras?: NavigationExtras;
+    /** Active match options for routerLinkActive */
+    activeMatchOptions?: {
+        exact: boolean;
+    } | IsActiveMatchOptions;
+}
+/**
+ * Use this type to create an href link that will cause a real navigation.
+ * @experimental
+ */
+interface NavbarVerticalNextItemLink extends NavbarVerticalNextItemBase {
+    type: 'link';
+    /** The href property of the anchor. */
+    href: string;
+    /** The target property of the anchor. */
+    target?: string;
+}
+/**
+ * AVOID USING THIS TYPE!
+ * Actions inside the navbar are an indication for a code smell.
+ *
+ * Use {@link NavbarVerticalNextItemRouterLink} instead whenever possible.
+ * @experimental
+ */
+interface NavbarVerticalNextItemAction extends NavbarVerticalNextItemBase {
+    type: 'action';
+    /** Action that is called when the navbar item is triggered. */
+    action: (source: this) => void;
+    /**
+     * The active state of the item.
+     * Note: It must be set manually.
+     */
+    active?: boolean;
+}
+/** @experimental */
+interface NavbarVerticalNextItemHeader {
+    type: 'header';
+    label: TranslatableString;
+}
+/** @experimental */
+interface NavbarVerticalNextItemDivider {
+    type: 'divider';
+}
+/**
+ * Union type for all possible all items in the navbar.
+ * @experimental
+ */
+type NavbarVerticalNextItem = NavbarVerticalNextItemGroup | NavbarVerticalNextItemRouterLink | NavbarVerticalNextItemLink | NavbarVerticalNextItemAction | NavbarVerticalNextItemHeader | NavbarVerticalNextItemDivider;
+/**
+ * Union type for all items that can be wrapped in a group.
+ * @experimental
+ */
+type NavbarVerticalNextSubItem = NavbarVerticalNextItemRouterLink | NavbarVerticalNextItemLink | NavbarVerticalNextItemAction;
+
+/**
+ * Required to have compiler checks on the factory template
+ * @experimental
+ */
+declare class SiNavbarVerticalNextItemGuardDirective {
+    static ngTemplateContextGuard(dir: SiNavbarVerticalNextItemGuardDirective, ctx: any): ctx is {
+        item: NavbarVerticalNextItem;
+        group: NavbarVerticalNextItemGroup;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalNextItemGuardDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiNavbarVerticalNextItemGuardDirective, "[siNavbarVerticalNextItemGuard]", never, {}, {}, never, never, true, never>;
+}
+/** @experimental */
+declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
+    protected readonly icons: Record<"elementSearch" | "elementDoubleLeft" | "elementDoubleRight", string>;
+    /**
+     * Whether the navbar-vertical is collapsed.
+     *
+     * @defaultValue false
+     */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * Toggles search bar
+     *
+     * @defaultValue false
+     */
+    readonly searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Placeholder text for search
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`)
+     * ```
+     */
+    readonly searchPlaceholder: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * List of vertical navigation items
+     *
+     * @defaultValue []
+     */
+    readonly items: _angular_core.ModelSignal<(MenuItem | NavbarVerticalNextItem)[]>;
+    /**
+     * Set to `true` if there are no icons
+     *
+     * @defaultValue false
+     */
+    /**
+     * Set to `true` if there are no icons
+     *
+     * @defaultValue false
+     */
+    readonly textOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Set to false to hide the vertical navbar
+     *
+     * @defaultValue true
+     */
+    /**
+     * Set to false to hide the vertical navbar
+     *
+     * @defaultValue true
+     */
+    readonly visible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Text for the navbar expand button. Required for a11y
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.EXPAND:Expand`)
+     * ```
+     */
+    readonly navbarExpandButtonText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Text for the navbar collapse button. Required for a11y
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.COLLAPSE:Collapse`)
+     * ```
+     */
+    readonly navbarCollapseButtonText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * An optional stateId to uniquely identify a component instance.
+     * Required for persistence of ui state.
+     */
+    readonly stateId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Label for the skip link to the vertical navbar
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL:Navigation`)
+     * ```
+     */
+    readonly skipLinkNavigationLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Label for the skip link to main content
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`)
+     * ```
+     */
+    readonly skipLinkMainContentLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Debounce time for the search input
+     * @defaultValue 400
+     */
+    readonly searchDebounceTime: _angular_core.InputSignal<number>;
+    /**
+     * Output for search bar input
+     */
+    readonly searchEvent: _angular_core.OutputEmitterRef<string>;
+    private readonly searchBar;
+    protected readonly activatedRoute: ActivatedRoute | null;
+    protected readonly ready = true;
+    private uiStateService;
+    private breakpointObserver;
+    private readonly navbarItems;
+    private readonly navbarItemsLegacy;
+    private readonly itemsToComponents;
+    protected readonly smallScreen: _angular_core.WritableSignal<boolean>;
+    protected readonly uiStateExpandedItems: _angular_core.WritableSignal<Record<string, boolean>>;
+    private preferCollapse;
+    constructor();
+    ngOnChanges(changes: SimpleChanges<this>): void;
+    ngOnInit(): void;
+    protected toggleCollapse(): void;
+    /** Expands the vertical navbar. */
+    expand(): void;
+    /** Collapses the vertical navbar. */
+    collapse(): void;
+    protected expandForSearch(): void;
+    protected doSearch(event: string): void;
+    /** @internal */
+    groupTriggered(): void;
+    protected saveUIState(): void;
+    /** @internal */
+    itemTriggered(): void;
+    protected isLegacyStyle(item: MenuItem | NavbarVerticalNextItem): item is MenuItem;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalNextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiNavbarVerticalNextComponent, "si-navbar-vertical-next", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "textOnly": { "alias": "textOnly"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "navbarExpandButtonText": { "alias": "navbarExpandButtonText"; "required": false; "isSignal": true; }; "navbarCollapseButtonText": { "alias": "navbarCollapseButtonText"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; "skipLinkNavigationLabel": { "alias": "skipLinkNavigationLabel"; "required": false; "isSignal": true; }; "skipLinkMainContentLabel": { "alias": "skipLinkMainContentLabel"; "required": false; "isSignal": true; }; "searchDebounceTime": { "alias": "searchDebounceTime"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "items": "itemsChange"; "searchEvent": "searchEvent"; }, never, ["*"], true, never>;
+}
+
+/** @experimental */
+declare class SiNavbarVerticalNextModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiNavbarVerticalNextModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiNavbarVerticalNextModule, never, [typeof SiNavbarVerticalNextComponent], [typeof SiNavbarVerticalNextComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiNavbarVerticalNextModule>;
+}
+
+export { SiNavbarVerticalNextComponent, SiNavbarVerticalNextItemGuardDirective, SiNavbarVerticalNextModule };
+export type { NavbarVerticalNextItem, NavbarVerticalNextItemAction, NavbarVerticalNextItemBase, NavbarVerticalNextItemDivider, NavbarVerticalNextItemGroup, NavbarVerticalNextItemHeader, NavbarVerticalNextItemLink, NavbarVerticalNextItemRouterLink, NavbarVerticalNextSubItem };

package/types/siemens-element-ng-toast-notification.d.ts

@@ -28,14 +28,10 @@ interface SiToast {
 declare const SI_TOAST_AUTO_HIDE_DELAY = 6000;
 
 declare class SiToastNotificationService implements OnDestroy {
-    /**
-     * List of currently active toasts to see details or close them.
-     *
-     * @defaultValue []
-     */
-    activeToasts: SiToast[];
-    private activeToastsSubject;
-    private queuedToastSubject;
+    private readonly activeToastsSignal;
+    /** List of currently active toasts to see details or close them.  */
+    get activeToasts(): SiToast[];
+    private token;
     private readonly maxToasts;
     private componentRef?;
     private overlayRef?;

package/types/siemens-element-ng-tree-view.d.ts

@@ -49,6 +49,7 @@ declare class SiTreeViewItemComponent implements OnInit, OnDestroy, AfterViewIni
     protected get ariaSelected(): boolean | null;
     protected get ariaChecked(): boolean | null;
     protected get ariaExpanded(): boolean | null;
+    constructor();
     ngOnInit(): void;
     ngDoCheck(): void;
     ngAfterViewInit(): void;