@siemens/element-ng 48.3.0 → 48.5.0

package/accordion/index.d.ts

@@ -69,7 +69,6 @@ declare class SiCollapsiblePanelComponent {
     protected headerId: string;
     protected isHCollapsible: boolean;
     protected readonly icons: Record<"elementDown2", string>;
-    private readonly destroyRef;
     private readonly accordionService;
     private readonly accordionHCollapseService;
     private enableAnimation;

package/chat-messages/index.d.ts

@@ -1,7 +1,7 @@
 import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
 import { TranslatableString } from '@siemens/element-translate-ng/translate-types';
 import * as _angular_core from '@angular/core';
-import { ElementRef, TemplateRef, AfterViewInit } from '@angular/core';
+import { ElementRef, TemplateRef, AfterContentInit, OnDestroy, AfterViewInit } from '@angular/core';
 import { MenuItem } from '@siemens/element-ng/menu';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { FileUploadError, UploadFile } from '@siemens/element-ng/file-uploader';
@@ -14,8 +14,12 @@ import * as i1 from '@siemens/element-ng/resize-observer';
  */
 
 /**
- * Actions for messages representing an action with icon, label (for accessibility), and handler.
+ * Actions for messages representing an action with icon, label (for accessibility), and handler, for use within {@link SiAiMessageComponent} and {@link SiUserMessageComponent}.
  * Only the icon will be displayed.
+ *
+ * @see {@link SiAiMessageComponent} for the AI message
+ * @see {@link SiUserMessageComponent} for thee user message
+ *
  * @experimental
  */
 interface MessageAction {
@@ -39,63 +43,18 @@ interface MessageAction {
  * The AI message component renders AI-generated content in chat interfaces,
  * supporting text formatting, markdown, loading states, and contextual actions.
  * It appears as text (no bubble) aligned to the left side without any avatar/icon slot.
- *
- * @remarks
- * This component is designed for use in:
- * - AI chat interfaces where model responses need to be displayed
- * - Chatbot implementations
- * - Conversational AI applications
- * - AI assistant interfaces
+ * Can be used within {@link SiChatContainerComponent}.
  *
  * The component automatically handles:
- * - Rendering markdown content with syntax highlighting
+ * - Styling for AI messages distinct from user or generic chat messages
+ * - Option to render markdown content, provide via `contentFormatter` input with a markdown renderer function (e.g., from {@link getMarkdownRenderer})
  * - Showing loading states with skeleton UI during generation
- * - Displaying primary and secondary actions on hover (desktop) or tap (mobile)
- * - Proper alignment and styling for AI messages
- * - Content sanitization for security
- *
- * @example
- * Basic usage with content only:
- * ```html
- * <si-ai-message [content]="'I can help you with that.'" />
- * ```
- *
- * @example
- * With loading state and actions:
- * ```typescript
- * import { Component } from '@angular/core';
- * import { SiAiMessageComponent } from '@siemens/element-ng/chat-messages';
- *
- * @Component({
- *   selector: 'app-chat',
- *   imports: [SiAiMessageComponent],
- *   template: `
- *     <si-ai-message
- *       [content]="message.text"
- *       [loading]="message.isGenerating"
- *       [actions]="messageActions"
- *       [secondaryActions]="menuActions"
- *       [actionParam]="message"
- *     />
- *   `
- * })
- * export class ChatComponent {
- *   messageActions = [
- *     { icon: 'thumbs-up', label: 'Good response', action: (id) => this.ratePositive(id) },
- *     { icon: 'thumbs-down', label: 'Bad response', action: (id) => this.rateNegative(id) },
- *     { icon: 'copy', label: 'Copy', action: (id) => this.copyMessage(id) }
- *   ];
- *
- *   menuActions = [
- *     { label: 'Regenerate', action: (id) => this.regenerate(id) },
- *     { label: 'Report', action: (id) => this.reportMessage(id) }
- *   ];
- * }
- * ```
+ * - Displaying primary and secondary actions
  *
  * @see {@link SiChatMessageComponent} for the base message wrapper component
- * @see {@link SiUserMessageComponent} for the companion user message component
+ * @see {@link SiUserMessageComponent} for the user message component
  * @see {@link getMarkdownRenderer} for markdown formatting support
+ * @see {@link SiChatContainerComponent} for the chat container to use this within
  *
  * @experimental
  */
@@ -153,7 +112,11 @@ declare class SiAiMessageComponent {
 }
 
 /**
- * Attachment item interface for file attachments in chat messages.
+ * Attachment item interface for file attachments in chat messages, used by {@link SiAttachmentListComponent} and inside {@link SiUserMessageComponent} as well as {@link SiChatInputComponent}.
+ *
+ * @see {@link SiAttachmentListComponent} for the attachment list component
+ * @see {@link SiUserMessageComponent} for the user message
+ * @see {@link SiChatInputComponent} for the chat input component
  *
  * @experimental
  */
@@ -170,55 +133,17 @@ interface Attachment {
  * preview and remove functionality. It's designed to work with chat message components
  * to show files that have been uploaded or shared in conversations.
  *
- * @remarks
  * This component provides:
- * - Automatic file type detection with appropriate icons
+ * - A list of pills showing each attachment's name and an icon
  * - Optional preview modal for attachments
  * - Optional remove functionality for editable messages
- * - Flexible alignment (start/end) to match message alignment
- * - Support for various file types (images, videos, audio, documents, archives)
  *
- * The component is typically used within {@link SiUserMessageComponent} or {@link SiAiMessageComponent}
- * to display uploaded files, but can also be used standalone.
- *
- * @example
- * Basic usage with attachments:
- * ```html
- * <si-attachment-list [attachments]="files" />
- * ```
- *
- * @example
- * With remove functionality and custom alignment:
- * ```typescript
- * import { Component } from '@angular/core';
- * import { SiAttachmentListComponent, Attachment } from '@siemens/element-ng/chat-messages';
- *
- * @Component({
- *   selector: 'app-chat',
- *   imports: [SiAttachmentListComponent],
- *   template: `
- *     <si-attachment-list
- *       [attachments]="attachments"
- *       [alignment]="'end'"
- *       [removable]="true"
- *       (remove)="handleRemove($event)"
- *     />
- *   `
- * })
- * export class ChatComponent {
- *   attachments: Attachment[] = [
- *     { id: '1', name: 'report.pdf' },
- *     { id: '2', name: 'image.png', previewTemplate: this.imagePreview }
- *   ];
- *
- *   handleRemove(attachment: Attachment) {
- *     this.attachments = this.attachments.filter(a => a !== attachment);
- *   }
- * }
- * ```
+ * The component is included within {@link SiUserMessageComponent}, {@link SiAiMessageComponent} and {@link SiChatInputComponent} but can also be used inside custom chat messages with {@link SiChatMessageComponent}
  *
  * @see {@link SiUserMessageComponent} for user message display
  * @see {@link SiAiMessageComponent} for AI message display
+ * @see {@link SiChatMessageComponent} for custom chat message display
+ * @see {@link SiChatInputComponent} for chat input with attachment support
  * @see {@link Attachment} for attachment data structure
  *
  * @experimental
@@ -260,6 +185,98 @@ declare class SiAttachmentListComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAttachmentListComponent, "si-attachment-list", never, { "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "remove": "remove"; }, never, never, true, never>;
 }
 
+/**
+ * A declarative container component for displaying a chat interface with automatic scroll-to-bottom behavior.
+ *
+ * This component provides the layout and styling for a chat interface, managing scrolling behavior
+ * to keep the newest messages visible while respecting user scrolling actions. It automatically
+ * scrolls to the bottom when new content is added, unless the user has scrolled up to view older messages.
+ *
+ * Use via content projection:
+ * - Default content: Chat messages displayed in the scrollable messages container or something like an empty state.
+ * - `si-inline-notification` selector: Notification component displayed above the input area
+ * - `si-chat-input` or `[siChatContainerInput]` selector: Input controls for composing messages
+ *
+ * @see {@link SiChatInputComponent} for the chat input wrapper component
+ * @see {@link SiChatContainerInputDirective} for other input controls to slot in
+ * @see {@link SiAiMessageComponent} for AI messages to slot in
+ * @see {@link SiUserMessageComponent} for user messages (in AI chats) to slot in
+ * @see {@link SiChatMessageComponent} for the chat message wrapper component to slot in other messages
+ *
+ * @experimental
+ */
+declare class SiChatContainerComponent implements AfterContentInit, OnDestroy {
+    private readonly messagesContainer;
+    private readonly platformId;
+    private isUserAtBottom;
+    private scrollTimeout;
+    private resizeObserver;
+    private contentObserver;
+    /**
+     * The color variant to apply to the container.
+     * @defaultValue 'base-0'
+     */
+    readonly colorVariant: _angular_core.InputSignal<string>;
+    /**
+     * Disables automatic scrolling to the bottom when new content is added.
+     * @defaultValue false
+     */
+    readonly noAutoScroll: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    constructor();
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    private scrollToBottom;
+    private debouncedScrollToBottom;
+    private setupResizeObserver;
+    private setupContentObserver;
+    private checkIfUserAtBottom;
+    protected onScroll(): void;
+    /**
+     * Focuses the messages container element.
+     */
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiChatContainerComponent, "si-chat-container", never, { "colorVariant": { "alias": "colorVariant"; "required": false; "isSignal": true; }; "noAutoScroll": { "alias": "noAutoScroll"; "required": false; "isSignal": true; }; }, {}, never, ["*", "si-inline-notification", "si-chat-input,[siChatContainerInput]"], true, never>;
+}
+
+/**
+ * A directive to mark elements as input controls within a {@link SiChatContainerComponent}.
+ *
+ * This directive is used to identify and style input elements that belong to
+ * the chat container component, typically applied to form inputs or textareas
+ * used for composing chat messages.
+ *
+ * @example
+ * ```html
+ * <si-chat-container>
+ *   <si-chat-message>Hello!</si-chat-message>
+ *   <si-chat-message>How are you?</si-chat-message>
+ *
+ *   <input siChatContainerInput type="text" placeholder="Type a message..." />
+ * </si-chat-container>
+ * ```
+ *
+ * @see {@link SiChatContainerComponent} for the chat container wrapper component
+ *
+ * @experimental
+ */
+declare class SiChatContainerInputDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatContainerInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiChatContainerInputDirective, "[siChatContainerInput]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Attachment item interface for file attachments in chat messages, extension of {@link Attachment} for {@link SiAttachmentListComponent} to use within {@link SiChatInputComponent}.
+ * Adds the action file information.
+ * Can be used within {@link SiChatContainerComponent}.
+ *
+ * @see {@link Attachment} for base attachment interface
+ * @see {@link SiAttachmentListComponent} for the attachment list component
+ * @see {@link SiChatInputComponent} for the chat input component
+ * @see {@link SiChatContainerComponent} for the chat container component
+ *
+ * @experimental
+ */
 interface ChatInputAttachment extends Attachment {
     /** File object */
     file: File;
@@ -268,10 +285,33 @@ interface ChatInputAttachment extends Attachment {
     /** MIME type */
     type: string;
 }
+/**
+ * Chat input component for composing and sending messages in conversational interfaces.
+ *
+ * The chat input component provides a text area for users to compose messages,
+ * supporting text, attachments, and contextual actions. It appears as a textarea
+ * with buttons for adding attachments and sending messages, as well as an optional disclaimer.
+ *
+ * The component automatically handles:
+ * - Styling for chat input and actions.
+ * - Dynamic resizing of the textarea based on content.
+ * - Uploading of and displaying of attachments above the input area.
+ * - Displaying primary and secondary actions.
+ *
+ * Additionally to the inputs and outputs documented here, the component supports content projection via the following slots:
+ * - Default content: Custom action buttons to display inline, prefer using the `actions` input for buttons, can be used in addition.
+ * - `siChatInputDisclaimer` selector: Custom disclaimer content to display below the input area, prefer using the `disclaimer` input for simple text disclaimers.
+ *
+ * @see {@link SiAttachmentListComponent} for the base attachment component
+ * @see {@link SiChatInputDisclaimerDirective} to slot in custom disclaimer content
+ *
+ * @experimental
+ */
 declare class SiChatInputComponent implements AfterViewInit {
     private static idCounter;
     private readonly textInput;
     private readonly projectedContent;
+    private readonly fileUploadDirective;
     /**
      * Current input value
      * @defaultValue ''
@@ -436,6 +476,7 @@ declare class SiChatInputComponent implements AfterViewInit {
     protected readonly buttonDisabled: _angular_core.Signal<boolean>;
     protected readonly buttonIcon: _angular_core.Signal<string>;
     protected readonly buttonLabel: _angular_core.Signal<TranslatableString$1>;
+    protected dragOver: boolean;
     protected get attachmentList(): Attachment[];
     protected onInputChange(value: string): void;
     protected onSend(): void;
@@ -451,13 +492,15 @@ declare class SiChatInputComponent implements AfterViewInit {
      * Focus the textarea input
      */
     focus(): void;
+    protected dropHandler(event: DragEvent): void;
+    protected dragOverHandler(event: DragEvent): void;
     private setTextareaHeight;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatInputComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiChatInputComponent, "si-chat-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "sending": { "alias": "sending"; "required": false; "isSignal": true; }; "interruptible": { "alias": "interruptible"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "disclaimer": { "alias": "disclaimer"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "allowAttachments": { "alias": "allowAttachments"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "sendButtonLabel": { "alias": "sendButtonLabel"; "required": false; "isSignal": true; }; "sendButtonIcon": { "alias": "sendButtonIcon"; "required": false; "isSignal": true; }; "interruptButtonLabel": { "alias": "interruptButtonLabel"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; "attachFileLabel": { "alias": "attachFileLabel"; "required": false; "isSignal": true; }; "removeAttachmentLabel": { "alias": "removeAttachmentLabel"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "attachments": "attachmentsChange"; "send": "send"; "interrupt": "interrupt"; "fileError": "fileError"; }, never, ["*", "[siChatInputDisclaimer]"], true, never>;
 }
 
 /**
- * Directive to mark content as chat input disclaimer.
+ * Directive to mark content as chat input disclaimer into {@link SiChatInputComponent}.
  * Apply this directive to content that should be slotted into the disclaimer area.
  *
  * @example
@@ -468,6 +511,10 @@ declare class SiChatInputComponent implements AfterViewInit {
  *   </div>
  * </si-chat-input>
  * ```
+ *
+ * @see {@link SiChatInputComponent} for the chat input wrapper component
+ *
+ * @experimental
  */
 declare class SiChatInputDisclaimerDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatInputDisclaimerDirective, never>;
@@ -475,10 +522,9 @@ declare class SiChatInputDisclaimerDirective {
 }
 
 /**
- * Directive to mark content as chat message actions.
+ * Directive to mark content as chat message actions into {@link SiChatMessageComponent}.
  * Apply this directive to e.g. buttons that should be slotted into the message actions area.
  *
- * @experimental
  * @example
  * ```html
  * <si-chat-message>
@@ -487,6 +533,10 @@ declare class SiChatInputDisclaimerDirective {
  *   <button siChatMessageAction>Share</button>
  * </si-chat-message>
  * ```
+ *
+ * @see {@link SiChatMessageComponent} for the chat message wrapper component
+ *
+ * @experimental
  */
 declare class SiChatMessageActionDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiChatMessageActionDirective, never>;
@@ -494,23 +544,33 @@ declare class SiChatMessageActionDirective {
 }
 
 /**
- * Base chat message component that provides the layout structure for conversational interfaces.
+ * Base declarative chat message component that provides the layout structure for chat messages.
  *
  * This component handles the core message layout including avatar positioning, loading states,
- * and action button placement. It serves as the foundation for more specialized message components
+ * and action button as well as attachment list placement. It serves as the foundation for more specialized message components
  * like {@link SiUserMessageComponent} and {@link SiAiMessageComponent}.
+ * Can be used within {@link SiChatContainerComponent}.
  *
- * @remarks
  * The component provides:
  * - Flexible alignment (start/end) for different message types
  * - Avatar/icon slot for message attribution
  * - Loading state with skeleton UI
  * - Action buttons positioned on the side or bottom
+ * - Attachment list display slot
  * - Responsive behavior that adapts to container size
- * - Attachment display slot
  *
- * This is a low-level component typically not used directly. Instead, use the higher-level
- * message components that wrap this component with specific styling and behavior.
+ * This is a low-level component designed for slotting in custom content, it provides slots via content projection:
+ * - Default content: Main message content area (consider using {@link SiMarkdownRendererComponent} for markdown support)
+ * - `si-avatar/si-icon/img` selector: Avatar or icon representing the message sender
+ * - `si-chat-message-action` selector: Action buttons related to the message
+ * - `si-attachment-list` selector: Attachment list component for displaying file attachments
+ *
+ * @see {@link SiUserMessageComponent} for user message display
+ * @see {@link SiAiMessageComponent} for AI message display
+ * @see {@link SiAttachmentListComponent} for attachment list to slot in
+ * @see {@link SiChatMessageActionDirective} for action buttons to slot in
+ * @see {@link SiMarkdownRendererComponent} for markdown content rendering
+ * @see {@link SiChatContainerComponent} for the chat container to use this within
  *
  * @experimental
  */
@@ -535,64 +595,24 @@ declare class SiChatMessageComponent {
 }
 
 /**
- * User message component for displaying user input in conversational interfaces.
+ * User message component for displaying the user's messages in conversational interfaces.
  *
- * The user message component renders user-submitted content in chat interfaces,
+ * The user message component renders user-submitted content in (AI) chat interfaces,
  * supporting text, attachments, and contextual actions. It appears as a text bubble
  * aligned to the right side and supports markdown formatting for rich content.
- *
- * @remarks
- * This component is designed for use in:
- * - AI chat interfaces where user input needs to be displayed
- * - Peer-to-peer conversation interfaces
- * - Conversation histories or chat transcripts
+ * Can be used within {@link SiChatContainerComponent}.
  *
  * The component automatically handles:
- * - Rendering markdown content with syntax highlighting
+ * - Styling for user messages distinct from AI or generic chat messages
+ * - Option to render markdown content, provide via `contentFormatter` input with a markdown renderer function (e.g., from {@link getMarkdownRenderer})
  * - Displaying attachments above the message bubble
- * - Showing primary and secondary actions on hover (desktop) or tap (mobile)
- * - Proper alignment and styling for user messages
- *
- * @example
- * Basic usage with content only:
- * ```html
- * <si-user-message [content]="'Hello, how can I help you?'" />
- * ```
- *
- * @example
- * With actions and attachments:
- * ```typescript
- * import { Component } from '@angular/core';
- * import { SiUserMessageComponent } from '@siemens/element-ng/chat-messages';
- *
- * @Component({
- *   selector: 'app-chat',
- *   imports: [SiUserMessageComponent],
- *   template: `
- *     <si-user-message
- *       [content]="message.text"
- *       [actions]="messageActions"
- *       [secondaryActions]="menuActions"
- *       [attachments]="message.attachments"
- *       [actionParam]="message"
- *     />
- *   `
- * })
- * export class ChatComponent {
- *   messageActions = [
- *     { icon: 'copy', label: 'Copy', action: (id) => this.copyMessage(id) },
- *     { icon: 'edit', label: 'Edit', action: (id) => this.editMessage(id) }
- *   ];
- *
- *   menuActions = [
- *     { label: 'Delete', action: (id) => this.deleteMessage(id) }
- *   ];
- * }
- * ```
+ * - Displaying primary and secondary actions
  *
  * @see {@link SiChatMessageComponent} for the base message wrapper component
- * @see {@link SiAttachmentListComponent} for attachment handling
- * @see {@link SiMarkdownRendererComponent} for markdown rendering
+ * @see {@link SiAiMessageComponent} for the AI message component
+ * @see {@link SiAttachmentListComponent} for the base attachment component
+ * @see {@link getMarkdownRenderer} for markdown formatting support
+ * @see {@link SiChatContainerComponent} for the chat container to use this within
  *
  * @experimental
  */
@@ -650,5 +670,5 @@ declare class SiUserMessageComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiUserMessageComponent, "si-user-message", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentFormatter": { "alias": "contentFormatter"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "secondaryActionsLabel": { "alias": "secondaryActionsLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { SiAiMessageComponent, SiAttachmentListComponent, SiChatInputComponent, SiChatInputDisclaimerDirective, SiChatMessageActionDirective, SiChatMessageComponent, SiUserMessageComponent };
+export { SiAiMessageComponent, SiAttachmentListComponent, SiChatContainerComponent, SiChatContainerInputDirective, SiChatInputComponent, SiChatInputDisclaimerDirective, SiChatMessageActionDirective, SiChatMessageComponent, SiUserMessageComponent };
 export type { Attachment, ChatInputAttachment, MessageAction };

package/dashboard/index.d.ts

@@ -86,7 +86,8 @@ declare class SiDashboardCardComponent extends SiCardComponent implements OnDest
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiDashboardCardComponent, "si-dashboard-card", never, { "restoreText": { "alias": "restoreText"; "required": false; "isSignal": true; }; "expandText": { "alias": "expandText"; "required": false; "isSignal": true; }; "enableExpandInteraction": { "alias": "enableExpandInteraction"; "required": false; "isSignal": true; }; "showMenubar": { "alias": "showMenubar"; "required": false; "isSignal": true; }; }, { "expandChange": "expandChange"; }, never, ["[headerIcon]", "[body]", "[footer]"], true, never>;
 }
 
-declare class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewInit {
+declare class SiDashboardComponent implements OnChanges, AfterViewInit {
+    private readonly destroyRef;
     /**
      * Heading for the dashboard page.
      */
@@ -117,7 +118,6 @@ declare class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewIni
     protected dashboardFrameEndPadding: number | null;
     protected readonly hideMenubarComputed: _angular_core.Signal<boolean>;
     private _isExpanded;
-    private unsubscribe;
     private scrollPosition;
     private cards;
     private readonly expandedPortalOutlet;
@@ -135,7 +135,6 @@ declare class SiDashboardComponent implements OnChanges, OnDestroy, AfterViewIni
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     private subscribeToCards;
     private initCards;
     /**

package/fesm2022/siemens-element-ng-accordion.mjs

@@ -1,7 +1,7 @@
 import { trigger, transition, style, query, animate } from '@angular/animations';
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, model, booleanAttribute, output, computed, inject, DestroyRef, viewChild, ChangeDetectionStrategy, Component, contentChildren, ElementRef, NgModule } from '@angular/core';
+import { signal, Injectable, input, model, booleanAttribute, output, computed, inject, viewChild, ChangeDetectionStrategy, Component, contentChildren, DestroyRef, ElementRef, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { areAnimationsDisabled } from '@siemens/element-ng/common';
 import { addIcons, elementDown2, SiIconComponent } from '@siemens/element-ng/icon';
@@ -131,7 +131,6 @@ class SiCollapsiblePanelComponent {
     headerId = this.controlId + '-header';
     isHCollapsible = false;
     icons = addIcons({ elementDown2 });
-    destroyRef = inject(DestroyRef);
     accordionService = inject(SiAccordionService, { optional: true });
     accordionHCollapseService = inject(SiAccordionHCollapseService, {
         optional: true
@@ -143,7 +142,7 @@ class SiCollapsiblePanelComponent {
     constructor() {
         this.isHCollapsible = !!this.accordionHCollapseService;
         this.accordionService?.toggle$
-            .pipe(takeUntilDestroyed(this.destroyRef), filter(item => item !== this))
+            .pipe(takeUntilDestroyed(), filter(item => item !== this))
             .subscribe(() => this.openClose(false));
     }
     get showHide() {