@siemens/element-ng 51.4.0 → 51.6.0

package/types/siemens-element-ng-loading-spinner.d.ts

@@ -1,6 +1,5 @@
 import * as _angular_core from '@angular/core';
 import { OnInit, OnChanges, OnDestroy } from '@angular/core';
-import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as rxjs from 'rxjs';
 import { BehaviorSubject } from 'rxjs';
@@ -56,9 +55,13 @@ declare class SiLoadingSpinnerComponent {
      * t(() => $localize`:@@SI_LOADING_SPINNER.LABEL:Loading`)
      * ```
      */
-    readonly ariaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    readonly ariaLabel: _angular_core.InputSignal<TranslatableString>;
+    /**
+     * Optional text to be displayed below the spinner.
+     */
+    readonly loadingText: _angular_core.InputSignal<TranslatableString | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingSpinnerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLoadingSpinnerComponent, "si-loading-spinner", never, { "isBlockingSpinner": { "alias": "isBlockingSpinner"; "required": false; "isSignal": true; }; "isSpinnerOverlay": { "alias": "isSpinnerOverlay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLoadingSpinnerComponent, "si-loading-spinner", never, { "isBlockingSpinner": { "alias": "isBlockingSpinner"; "required": false; "isSignal": true; }; "isSpinnerOverlay": { "alias": "isSpinnerOverlay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy {
@@ -78,6 +81,10 @@ declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy
      * @defaultValue true
      */
     readonly initialDelay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Optional text to be displayed below the spinner.
+     */
+    readonly loadingText: _angular_core.InputSignal<TranslatableString | undefined>;
     private el;
     private readonly viewRef;
     private cdRef;
@@ -95,7 +102,7 @@ declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy
     ngOnChanges(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingSpinnerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiLoadingSpinnerDirective, "[siLoading]", never, { "siLoading": { "alias": "siLoading"; "required": true; "isSignal": true; }; "blocking": { "alias": "blocking"; "required": false; "isSignal": true; }; "initialDelay": { "alias": "initialDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiLoadingSpinnerDirective, "[siLoading]", never, { "siLoading": { "alias": "siLoading"; "required": true; "isSignal": true; }; "blocking": { "alias": "blocking"; "required": false; "isSignal": true; }; "initialDelay": { "alias": "initialDelay"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SiLoadingService {

package/types/siemens-element-ng-markdown-extensions-katex.d.ts

@@ -11,7 +11,10 @@ import { Options } from 'remark-math';
  * An extension to render LaTeX math expressions using KaTeX. Uses `remark-math` to parse
  * the expressions inside the markdown document.
  * @param parseOptions - options passed to `remark-math`
- * @param katexOptions - options passed to `katex`
+ * @param katexOptions - options passed to `katex`. Keep the default `trust: false` for untrusted
+ * expressions. Do not set `trust: true` unless all expressions rendered with that configuration
+ * come from sources you fully trust. For untrusted expressions that require specific commands,
+ * use a narrowly scoped `trust` callback that validates commands and their arguments, including URLs.
  * @returns extension for `SiMarkdownOption.installExtension()`
  */
 declare const siMarkdownMathKaTeX: (parseOptions?: Options, katexOptions?: KatexOptions) => SiMarkdownExtension;

package/types/siemens-element-ng-markdown-extensions-mermaid.d.ts

@@ -6,6 +6,15 @@ import { MermaidConfig } from 'mermaid';
  * SPDX-License-Identifier: MIT
  */
 
+/**
+ * An extension to render Mermaid diagrams.
+ *
+ * Options configure the shared Mermaid instance and are not isolated per Markdown component.
+ * Keep `securityLevel: 'strict'` for untrusted content and avoid mixing strict and permissive
+ * configurations. The integration trusts Mermaid's generated SVG output.
+ *
+ * @param options - trusted application configuration passed to Mermaid
+ */
 declare const siMarkdownMermaid: (options?: MermaidConfig) => SiMarkdownExtension;
 
 export { siMarkdownMermaid };

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

@@ -2,6 +2,7 @@ import { DomPortal } from '@angular/cdk/portal';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import { SiNavbarVerticalLayout } from '@siemens/element-ng/common';
 import * as _siemens_element_ng_navbar_vertical_next from '@siemens/element-ng/navbar-vertical-next';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
 import { ConnectedPosition } from '@angular/cdk/overlay';
@@ -171,7 +172,7 @@ declare class SiNavbarVerticalNextItemComponent implements OnInit {
 }
 
 /** @experimental */
-declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
+declare class SiNavbarVerticalNextComponent implements OnChanges, OnInit, SiNavbarVerticalLayout {
     protected readonly icons: Record<"elementDoubleLeft" | "elementDoubleRight" | "elementLayoutPane2" | "elementLayoutPane2Right", string>;
     /**
      * Whether the navbar-vertical is collapsed.

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

@@ -3,7 +3,7 @@ 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';
+import { SiNavbarVerticalLayout, MenuItem } from '@siemens/element-ng/common';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -96,7 +96,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 {
+declare class SiNavbarVerticalComponent implements OnChanges, OnInit, SiNavbarVerticalLayout {
     protected readonly icons: Record<"elementSearch" | "elementDoubleLeft" | "elementDoubleRight", string>;
     /**
      * Whether the navbar-vertical is collapsed.

package/types/siemens-element-ng-popover.d.ts

@@ -57,6 +57,15 @@ declare class SiPopoverDirective implements OnDestroy {
     readonly popoverCounter: number;
     /** @internal */
     readonly popoverId: string;
+    /**
+     * The ID of the trigger element.
+     *
+     * @defaultValue
+     * ```
+     * `__popover-trigger_${this.popoverCounter}`
+     * ```
+     */
+    readonly id: _angular_core.InputSignal<string>;
     /** @internal */
     protected readonly isOpen: _angular_core.WritableSignal<boolean>;
     private overlayref?;
@@ -80,7 +89,7 @@ declare class SiPopoverDirective implements OnDestroy {
     protected onClick(): void;
     private createOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiPopoverDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiPopoverDirective, "[siPopover]", ["si-popover"], { "siPopover": { "alias": "siPopover"; "required": false; "isSignal": true; }; "placement": { "alias": "siPopoverPlacement"; "required": false; "isSignal": true; }; "title": { "alias": "siPopoverTitle"; "required": false; "isSignal": true; }; "containerClass": { "alias": "siPopoverContainerClass"; "required": false; "isSignal": true; }; "icon": { "alias": "siPopoverIcon"; "required": false; "isSignal": true; }; "context": { "alias": "siPopoverContext"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "siPopoverScrollStrategy"; "required": false; "isSignal": true; }; }, { "visibilityChange": "siPopoverVisibilityChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiPopoverDirective, "[siPopover]", ["si-popover"], { "siPopover": { "alias": "siPopover"; "required": false; "isSignal": true; }; "placement": { "alias": "siPopoverPlacement"; "required": false; "isSignal": true; }; "title": { "alias": "siPopoverTitle"; "required": false; "isSignal": true; }; "containerClass": { "alias": "siPopoverContainerClass"; "required": false; "isSignal": true; }; "icon": { "alias": "siPopoverIcon"; "required": false; "isSignal": true; }; "context": { "alias": "siPopoverContext"; "required": false; "isSignal": true; }; "scrollStrategy": { "alias": "siPopoverScrollStrategy"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "visibilityChange": "siPopoverVisibilityChange"; }, never, never, true, never>;
 }
 
 declare class PopoverComponent implements OnInit, OnDestroy {
@@ -89,9 +98,16 @@ declare class PopoverComponent implements OnInit, OnDestroy {
     readonly popoverWrapper: _angular_core.Signal<ElementRef<any>>;
     /** @internal */
     labelledBy: string | undefined;
+    /**
+     * This property is set by the {@link SiPopoverTitleDirective} if present.
+     *
+     * @internal
+     */
+    readonly hasTemplateTitle: _angular_core.WritableSignal<boolean>;
     /** @internal */
     describedBy: string | undefined;
     protected readonly positionClass: _angular_core.WritableSignal<string>;
+    protected readonly ariaLabelledBy: _angular_core.Signal<string | undefined>;
     protected readonly arrowPos: _angular_core.WritableSignal<OverlayArrowPosition | undefined>;
     protected readonly description: _angular_core.Signal<_siemens_element_translate_ng_translate.TranslatableString | undefined>;
     protected popoverTemplate: TemplateRef<any> | null;
@@ -113,6 +129,7 @@ declare class PopoverComponent implements OnInit, OnDestroy {
 
 declare class SiPopoverTitleDirective {
     readonly popover: PopoverComponent;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiPopoverTitleDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiPopoverTitleDirective, "si-popover-title", never, {}, {}, never, never, true, never>;
 }

package/types/siemens-element-ng-side-panel.d.ts

@@ -2,11 +2,12 @@ import * as _angular_core from '@angular/core';
 import { OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { Portal } from '@angular/cdk/portal';
 import { Observable } from 'rxjs';
+import * as _siemens_element_ng_common from '@siemens/element-ng/common';
+import { MenuItem } from '@siemens/element-ng/common';
 import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import { Breakpoints, ElementDimensions } from '@siemens/element-ng/resize-observer';
 import { NavigationExtras, ActivatedRoute } from '@angular/router';
-import { MenuItem } from '@siemens/element-ng/common';
 import { ContentActionBarMainItem } from '@siemens/element-ng/content-action-bar';
 import { MenuItem as MenuItem$1 } from '@siemens/element-ng/menu';
 
@@ -208,6 +209,9 @@ declare class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
     protected readonly isHidden: _angular_core.WritableSignal<boolean>;
     protected readonly isFullscreenOverlay: _angular_core.WritableSignal<boolean>;
     protected readonly showTempContent: _angular_core.WritableSignal<boolean>;
+    protected readonly navbarLayout: _angular_core.Signal<_siemens_element_ng_common.SiNavbarVerticalLayout | undefined>;
+    private readonly enclosingNavbar;
+    private readonly projectedNavbar;
     private readonly panelElement;
     private readonly contentElement;
     private readonly portalOutlet;
@@ -246,7 +250,7 @@ declare class SiSidePanelComponent implements OnInit, OnDestroy, OnChanges {
     private doOpenClose;
     private moveFocusInside;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiSidePanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelComponent, "si-side-panel", never, { "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; "enableMobile": { "alias": "enableMobile"; "required": false; "isSignal": true; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "closed": "closed"; "contentResize": "contentResize"; }, never, ["si-side-panel-content, element-side-panel-content", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiSidePanelComponent, "si-side-panel", never, { "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "toggleItemLabel": { "alias": "toggleItemLabel"; "required": false; "isSignal": true; }; "breakpoints": { "alias": "breakpoints"; "required": false; "isSignal": true; }; "enableMobile": { "alias": "enableMobile"; "required": false; "isSignal": true; }; "disableBackdrop": { "alias": "disableBackdrop"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "closed": "closed"; "contentResize": "contentResize"; }, ["projectedNavbar"], ["si-side-panel-content, element-side-panel-content", "*"], true, never>;
 }
 
 /**
@@ -412,6 +416,7 @@ declare class SiSidePanelContentComponent implements OnInit {
      * For the animation we need to wait until the resize is done.
      */
     private readonly resizeAnimationDelay;
+    private readonly document;
     private readonly destroyRef;
     private readonly breakpointObserver;
     private expandedTimeout;

package/types/siemens-element-ng-skip-links.d.ts

@@ -4,7 +4,8 @@ import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 /**
  * Directive to mark an element as a target for a skip link.
- * If this directive is applied to a none interactive element, a tabindex of -1 must be added manually.
+ * Focuses the target if it is focusable, otherwise its first usable tabbable descendant.
+ * Add tabindex="-1" to a non-interactive element to focus the target itself.
  */
 declare class SiSkipLinkTargetDirective implements OnInit, OnDestroy {
     /**
@@ -13,10 +14,11 @@ declare class SiSkipLinkTargetDirective implements OnInit, OnDestroy {
     readonly name: i0.InputSignal<TranslatableString>;
     private skipLinkService;
     private elementRef;
+    private interactivityChecker;
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
-     * Call this methode to "activate" a skip link target. It will focus this element and scroll it into the view.
+     * Activate a skip link target by scrolling it into view and focusing it or its first tabbable descendant.
      */
     jumpToThisTarget(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SiSkipLinkTargetDirective, never>;

package/types/siemens-element-ng-translate.d.ts

@@ -4,11 +4,13 @@ interface SiTranslatableKeys {
     'SI_ABOUT.LOGO_ALT'?: string;
     'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;
     'SI_ALERT_DIALOG.OK'?: string;
+    'SI_APPLICATION_HEADER.ACCOUNT'?: string;
     'SI_APPLICATION_HEADER.LAUNCHPAD'?: string;
     'SI_APPLICATION_HEADER.TOGGLE_ACTIONS'?: string;
     'SI_APPLICATION_HEADER.TOGGLE_NAVIGATION'?: string;
     'SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT'?: string;
     'SI_BREADCRUMB'?: string;
+    'SI_BREADCRUMB.HIDDEN_ITEMS'?: string;
     'SI_BREADCRUMB_ROUTER_LABEL'?: string;
     'SI_CAROUSEL.NEXT'?: string;
     'SI_CAROUSEL.PAUSE'?: string;