@siemens/element-ng 49.10.0 → 49.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "49.10.0",
+  "version": "49.12.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,16 +35,16 @@
     "migrations": "./schematics/migration.json"
   },
   "peerDependencies": {
-    "@angular/cdk": "21",
-    "@angular/common": "21",
-    "@angular/core": "21",
-    "@angular/forms": "21",
-    "@angular/router": "21",
+    "@angular/cdk": "21 - 22",
+    "@angular/common": "21 - 22",
+    "@angular/core": "21 - 22",
+    "@angular/forms": "21 - 22",
+    "@angular/router": "21 - 22",
     "@ngx-formly/bootstrap": "^6.2.2",
     "@ngx-formly/core": "^6.2.2",
     "@siemens/element-icons": "1",
-    "@siemens/element-translate-ng": "49.10.0",
-    "@siemens/element-theme": "49.10.0",
+    "@siemens/element-translate-ng": "49.12.0",
+    "@siemens/element-theme": "49.12.0",
     "@siemens/ngx-datatable": "22 - 26",
     "ag-grid-community": "^34.3.1 || ^35.0.0",
     "flag-icons": "^7.3.2",
@@ -132,6 +132,10 @@
       "types": "./types/siemens-element-ng-card.d.ts",
       "default": "./fesm2022/siemens-element-ng-card.mjs"
     },
+    "./carousel": {
+      "types": "./types/siemens-element-ng-carousel.d.ts",
+      "default": "./fesm2022/siemens-element-ng-carousel.mjs"
+    },
     "./chat-messages": {
       "types": "./types/siemens-element-ng-chat-messages.d.ts",
       "default": "./fesm2022/siemens-element-ng-chat-messages.mjs"

package/template-i18n.json

@@ -1,4 +1,5 @@
 {
+  "SI_ABOUT.LOGO_ALT": "{{appName}} logo",
   "SI_AI_MESSAGE.SECONDARY_ACTIONS": "More actions",
   "SI_ALERT_DIALOG.OK": "OK",
   "SI_APPLICATION_HEADER.LAUNCHPAD": "Launchpad",
@@ -7,6 +8,13 @@
   "SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT": "Remove attachment",
   "SI_BREADCRUMB": "Breadcrumbs",
   "SI_BREADCRUMB_ROUTER_LABEL": "breadcrumb",
+  "SI_CAROUSEL.NEXT": "Next slide",
+  "SI_CAROUSEL.PAUSE": "Pause",
+  "SI_CAROUSEL.PLAY": "Play",
+  "SI_CAROUSEL.PREVIOUS": "Previous slide",
+  "SI_CAROUSEL.ROLE_DESCRIPTION": "carousel",
+  "SI_CAROUSEL.SLIDE_PAGE": "Slide {{page}} of {{total}}",
+  "SI_CAROUSEL.SLIDE_ROLE_DESCRIPTION": "Slide",
   "SI_CHANGE_PASSWORD.BACK": "Back",
   "SI_CHANGE_PASSWORD.CHANGE": "Change",
   "SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD": "Factory set password must be changed",
@@ -70,6 +78,7 @@
   "SI_DATE_RANGE_FILTER.REF_POINT": "Reference point",
   "SI_DATE_RANGE_FILTER.SEARCH": "Search",
   "SI_DATE_RANGE_FILTER.SELECT_RANGE_END": "Select end date",
+  "SI_DATE_RANGE_FILTER.SELECT_RANGE_LABEL": "Select date range",
   "SI_DATE_RANGE_FILTER.TO": "To",
   "SI_DATE_RANGE_FILTER.TODAY": "Today",
   "SI_DATE_RANGE_FILTER.UNIT": "Unit",
@@ -123,20 +132,20 @@
   "SI_FORM_CONTAINER.ERROR.IPV4": "Invalid IPv4 address",
   "SI_FORM_CONTAINER.ERROR.IPV6": "Invalid IPv6 address",
   "SI_FORM_CONTAINER.ERROR.MAX": "Max. {{max}}",
-  "SI_FORM_CONTAINER.ERROR.MAX_DATE": "Date prior to {{maxString}} required",
+  "SI_FORM_CONTAINER.ERROR.MAX_DATE": "Date up to and including {{maxString}} required",
   "SI_FORM_CONTAINER.ERROR.MAX_LENGTH": "Max. {{requiredLength}} characters",
-  "SI_FORM_CONTAINER.ERROR.MAX_TIME": "Time prior to {{maxString}} required",
+  "SI_FORM_CONTAINER.ERROR.MAX_TIME": "Time up to and including {{maxString}} required",
   "SI_FORM_CONTAINER.ERROR.MILLISECONDS": "Integer between 0 and 999 required",
   "SI_FORM_CONTAINER.ERROR.MIN": "Min. {{min}}",
   "SI_FORM_CONTAINER.ERROR.MINUTES": "Integer between 0 and 59 required",
-  "SI_FORM_CONTAINER.ERROR.MIN_DATE": "Date after {{minString}} required",
+  "SI_FORM_CONTAINER.ERROR.MIN_DATE": "Date from {{minString}} required",
   "SI_FORM_CONTAINER.ERROR.MIN_LENGTH": "Min. {{requiredLength}} characters",
-  "SI_FORM_CONTAINER.ERROR.MIN_TIME": "Time after {{minString}} required",
+  "SI_FORM_CONTAINER.ERROR.MIN_TIME": "Time from {{minString}} required",
   "SI_FORM_CONTAINER.ERROR.NUMBER_FORMAT": "Number required",
   "SI_FORM_CONTAINER.ERROR.PATTERN": "The value does not match the predefined pattern.",
   "SI_FORM_CONTAINER.ERROR.PHONE_COUNTRY": "Unsupported country/region code",
-  "SI_FORM_CONTAINER.ERROR.RANGE_AFTER_MAX_DATE": "Period prior to {{maxString}} required",
-  "SI_FORM_CONTAINER.ERROR.RANGE_BEFORE_MIN_DATE": "Period after {{minString}} required",
+  "SI_FORM_CONTAINER.ERROR.RANGE_AFTER_MAX_DATE": "Period up to and including {{maxString}} required",
+  "SI_FORM_CONTAINER.ERROR.RANGE_BEFORE_MIN_DATE": "Period from {{minString}} required",
   "SI_FORM_CONTAINER.ERROR.REQUIRED": "Required",
   "SI_FORM_CONTAINER.ERROR.REQUIRED_TRUE": "Required",
   "SI_FORM_CONTAINER.ERROR.SECONDS": "Integer between 0 and 59 required",

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

@@ -1,6 +1,7 @@
 import * as _angular_platform_browser from '@angular/platform-browser';
 import * as _angular_core from '@angular/core';
 import { OnInit } from '@angular/core';
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import { CopyrightDetails } from '@siemens/element-ng/copyright-notice';
 import { Link } from '@siemens/element-ng/link';
 
@@ -58,6 +59,15 @@ interface ApiInfo {
 declare class SiAboutComponent implements OnInit {
     private http;
     private sanitizer;
+    /**
+     * Alt text for the application logo. Supports `{{appName}}` placeholder for interpolation.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_ABOUT.LOGO_ALT:{{appName}} logo`)
+     * ```
+     */
+    readonly logoAlt: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     /**
      * Title shown above the about information.
      */
@@ -119,7 +129,7 @@ declare class SiAboutComponent implements OnInit {
     protected toggleLoadLicenseApi(apiInfo: ApiInfo): void;
     protected toggleLoadLicenseContent(apiInfo: ApiInfo): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiAboutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAboutComponent, "si-about", never, { "aboutTitle": { "alias": "aboutTitle"; "required": true; "isSignal": true; }; "licenseInfo": { "alias": "licenseInfo"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "appName": { "alias": "appName"; "required": true; "isSignal": true; }; "subheading": { "alias": "subheading"; "required": false; "isSignal": true; }; "acceptableUsePolicyLink": { "alias": "acceptableUsePolicyLink"; "required": false; "isSignal": true; }; "imprintLink": { "alias": "imprintLink"; "required": false; "isSignal": true; }; "privacyLink": { "alias": "privacyLink"; "required": false; "isSignal": true; }; "cookieNoticeLink": { "alias": "cookieNoticeLink"; "required": false; "isSignal": true; }; "termsLink": { "alias": "termsLink"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "copyrightDetails": { "alias": "copyrightDetails"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiAboutComponent, "si-about", never, { "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "aboutTitle": { "alias": "aboutTitle"; "required": true; "isSignal": true; }; "licenseInfo": { "alias": "licenseInfo"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "appName": { "alias": "appName"; "required": true; "isSignal": true; }; "subheading": { "alias": "subheading"; "required": false; "isSignal": true; }; "acceptableUsePolicyLink": { "alias": "acceptableUsePolicyLink"; "required": false; "isSignal": true; }; "imprintLink": { "alias": "imprintLink"; "required": false; "isSignal": true; }; "privacyLink": { "alias": "privacyLink"; "required": false; "isSignal": true; }; "cookieNoticeLink": { "alias": "cookieNoticeLink"; "required": false; "isSignal": true; }; "termsLink": { "alias": "termsLink"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "copyrightDetails": { "alias": "copyrightDetails"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SiAboutModule {

package/types/siemens-element-ng-application-header.d.ts

@@ -1,10 +1,9 @@
-import * as rxjs from 'rxjs';
-import { Subject } from 'rxjs';
 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 { OnDestroy, TemplateRef, Injector, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { HeaderWithDropdowns, SiHeaderDropdownTriggerDirective } from '@siemens/element-ng/header-dropdown';
+import { Subject } from 'rxjs';
 import * as _siemens_element_ng_application_header from '@siemens/element-ng/application-header';
 import { NavigationExtras, IsActiveMatchOptions, ActivatedRoute } from '@angular/router';
 
@@ -43,7 +42,8 @@ declare class SiApplicationHeaderComponent implements HeaderWithDropdowns, OnDes
     private openDropdown?;
     private closeMobileSub;
     /** @internal */
-    readonly inlineDropdown: rxjs.Observable<boolean>;
+    readonly inlineDropdown: _angular_core.Signal<boolean>;
+    constructor();
     ngOnDestroy(): void;
     /** @internal */
     onDropdownItemTriggered(): void;
@@ -109,7 +109,6 @@ declare class SiHeaderCollapsibleActionsComponent implements OnDestroy {
     private readonly focusTrap;
     private header;
     private closeMobileSub;
-    private inlineChangeSubscription?;
     ngOnDestroy(): void;
     protected toggleMobileExpanded(): void;
     protected escapePressed(): void;

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

@@ -0,0 +1,209 @@
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class SiCarouselItemDirective {
+    protected readonly carousel: SiCarouselComponent;
+    protected readonly isVisible: _angular_core.Signal<boolean>;
+    /** @internal */
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** @internal */
+    readonly order: _angular_core.WritableSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiCarouselItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiCarouselItemDirective, "[siCarouselItem]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * A carousel component for displaying slides with navigation controls and auto-play.
+ *
+ * Features horizontal scrolling with snap behavior, pagination dots, and ARIA accessibility.
+ * Suitable for dashboards, image galleries, and content showcases.
+ *
+ * @example
+ *
+ * ```typescript
+ * import { SiCarouselComponent, SiCarouselItemDirective } from '@siemens/element-ng/carousel';
+ *
+ * @Component({
+ *   imports: [SiCarouselComponent, SiCarouselItemDirective],
+ *   template: `
+ *     <si-carousel>
+ *       <div siCarouselItem><h2>Slide 1</h2></div>
+ *       <div siCarouselItem><h2>Slide 2</h2></div>
+ *       <div siCarouselItem><h2>Slide 3</h2></div>
+ *     </si-carousel>
+ *   `
+ * })
+ * export class MyComponent {}
+ * ```
+ */
+declare class SiCarouselComponent {
+    /**
+     * Controls whether pagination controls are shown.
+     * When `true`, the carousel shows one slide per page and hides pagination controls.
+     * @defaultValue false
+     * */
+    readonly hidePageControls: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enables or configures auto-play for the carousel. When set to `true`, the carousel automatically
+     * navigates to the next slide every 5000 milliseconds (5 seconds). Pass a positive number to set a
+     * custom interval in milliseconds. Pass `false` to disable auto-play.
+     * @defaultValue false
+     * */
+    readonly autoPlay: _angular_core.InputSignal<number | boolean>;
+    /**
+     * Aria role of the carousel element. Can be set to 'region' or 'group' depending on the desired accessibility semantics.
+     * @defaultValue 'region'
+     * */
+    readonly ariaRole: _angular_core.InputSignal<"group" | "region">;
+    /**
+     * Aria label for the previous button, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PREVIOUS:Previous slide`)
+     * ```
+     */
+    readonly previousButtonAriaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Aria label for the next button, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.NEXT:Next slide`)
+     * ```
+     */
+    readonly nextButtonAriaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.SLIDE_PAGE:Slide {{page}} of {{total}}`)
+     * ```
+     */
+    readonly slidePageAriaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Label for the play button when autoplay is paused.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PLAY:Play`)
+     * ```
+     */
+    readonly playButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Label for the pause button when autoplay is active.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.PAUSE:Pause`)
+     * ```
+     */
+    readonly pauseButtonLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Role description for the carousel container, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.ROLE_DESCRIPTION:carousel`)
+     * ```
+     */
+    readonly carouselRoleDescription: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * Role description for each slide, used for accessibility purposes.
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_CAROUSEL.SLIDE_ROLE_DESCRIPTION:Slide`)
+     * ```
+     */
+    readonly slideRoleDescription: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /** @internal */
+    readonly translatedSlideRoleDescription: _angular_core.Signal<string>;
+    /** @internal */
+    readonly currentActiveSlide: _angular_core.Signal<ElementRef<HTMLElement> | null>;
+    protected readonly translatedCarouselRoleDescription: _angular_core.Signal<string>;
+    protected readonly items: _angular_core.Signal<readonly SiCarouselItemDirective[]>;
+    protected readonly currentPage: _angular_core.WritableSignal<number | null>;
+    protected readonly isPaused: _angular_core.WritableSignal<boolean>;
+    protected readonly totalPages: _angular_core.Signal<number>;
+    protected readonly edgeLeftIndex: _angular_core.WritableSignal<number>;
+    protected readonly edgeRightIndex: _angular_core.WritableSignal<number>;
+    protected readonly insufficientSpace: _angular_core.WritableSignal<boolean>;
+    protected readonly pageControlContainerMinWidth: _angular_core.WritableSignal<number>;
+    protected readonly icons: Record<"elementLeft2" | "elementRight2" | "elementPlay" | "elementPause", string>;
+    private readonly autoPlayDuration;
+    private intervalId;
+    private scrollObserver;
+    /** requestAnimationFrame id of the running scroll animation, or null when idle. */
+    private animationFrameId;
+    /** Scroll position (`scrollLeft`) the running animation is easing towards. */
+    private animationTargetLeft;
+    /** Timestamp of the previous animation frame, used to make the easing frame-rate independent. */
+    private lastFrameTime;
+    /** Whether any slide's CSS order has been changed from its natural (source-index) position. */
+    private ordersModified;
+    private readonly destroyRef;
+    private readonly viewport;
+    private readonly pageControl;
+    private readonly playPauseBtn;
+    private readonly translateService;
+    private cdRef;
+    constructor();
+    protected goToPage(page: number, forceScroll?: boolean): void;
+    protected next(): void;
+    protected previous(): void;
+    /** Navigates directly to a specific slide, used by the pagination dots. */
+    protected goToSlide(index: number): void;
+    protected toggleAutoPlay(): void;
+    protected onResize(size: {
+        width: number;
+        height: number;
+    }): void;
+    /**
+     * Navigates a single slide forward (`1`) or backward (`-1`). Rapid clicks are intentionally not
+     * queued or throttled: each click advances {@link currentPage} immediately and retargets the
+     * running scroll animation (see {@link animateTo}) towards the new slide, so the carousel keeps
+     * gliding in the click direction without waiting for the previous scroll to finish.
+     *
+     * To keep the first/last wrap a continuous one-slide glide instead of a jump across the whole
+     * track, the target slide's CSS order is placed exactly one slot away from the current slide in
+     * the click direction (so it sits adjacent to it). The viewport scroll is compensated so this
+     * reorder is invisible. Orders may extend while the user keeps clicking; they are silently
+     * normalized once the animation settles (see {@link normalizeOrders}).
+     */
+    private step;
+    /**
+     * Changes a slide's CSS order while keeping the picture stable. Reordering shifts slides along
+     * the flex track, so the scroll position is adjusted by the exact amount the anchor slide moved,
+     * making the relocation invisible and letting any in-flight animation continue seamlessly.
+     */
+    private reorderSlide;
+    /**
+     * Sets the CSS order of a slide. The value is written to the DOM synchronously in addition to
+     * the signal, so a subsequent reflow/scroll uses the new order immediately instead of waiting
+     * for the asynchronous, signal-driven change detection update.
+     */
+    private setSlideOrder;
+    /**
+     * Silently restores the canonical slide order (each slide's CSS order equals its source index).
+     * Reordering shifts the track, so it anchors on the current slide and compensates the scroll
+     * position to avoid any visible jump. Called once the scroll animation settles.
+     */
+    private normalizeOrders;
+    /** Animates the viewport so the given slide is horizontally centered. */
+    private animateToSlide;
+    /**
+     * Eases `scrollLeft` towards `targetLeft` using a frame-rate independent exponential smoothing
+     * loop. The target can be updated mid-flight (rapid clicks), so the same animation simply chases
+     * the latest slide. Native scroll-snap and smooth scroll-behavior are disabled while animating so
+     * they do not fight the manual scrolling, and the scroll observer is paused to avoid feedback.
+     */
+    private animateTo;
+    private animationFrame;
+    /** Finalizes the animation: normalizes orders, restores native scrolling and the observer. */
+    private endAnimation;
+    /** Stops the running scroll animation and restores native scrolling, without normalizing. */
+    private cancelAnimation;
+    private scheduleAutoPlay;
+    private stopAutoPlay;
+    private setupScrollObserver;
+    private updateEdgeIndices;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiCarouselComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiCarouselComponent, "si-carousel", never, { "hidePageControls": { "alias": "hidePageControls"; "required": false; "isSignal": true; }; "autoPlay": { "alias": "autoPlay"; "required": false; "isSignal": true; }; "ariaRole": { "alias": "ariaRole"; "required": false; "isSignal": true; }; "previousButtonAriaLabel": { "alias": "previousButtonAriaLabel"; "required": false; "isSignal": true; }; "nextButtonAriaLabel": { "alias": "nextButtonAriaLabel"; "required": false; "isSignal": true; }; "slidePageAriaLabel": { "alias": "slidePageAriaLabel"; "required": false; "isSignal": true; }; "playButtonLabel": { "alias": "playButtonLabel"; "required": false; "isSignal": true; }; "pauseButtonLabel": { "alias": "pauseButtonLabel"; "required": false; "isSignal": true; }; "carouselRoleDescription": { "alias": "carouselRoleDescription"; "required": false; "isSignal": true; }; "slideRoleDescription": { "alias": "slideRoleDescription"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+export { SiCarouselComponent, SiCarouselItemDirective };

package/types/siemens-element-ng-chat-messages.d.ts

@@ -494,8 +494,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 readonly dragOver: _angular_core.WritableSignal<boolean>;
     protected onInputChange(value: string): void;
     protected onSend(): void;
     protected onButtonClick(): void;

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

@@ -55,7 +55,7 @@ declare class SiDashboardCardComponent extends SiCardComponent implements OnDest
      */
     readonly isExpanded: _angular_core.WritableSignal<boolean>;
     /** @internal */
-    hide: boolean;
+    readonly hide: _angular_core.WritableSignal<boolean>;
     /** @internal */
     readonly enableExpandInteractionInternal: _angular_core.WritableSignal<boolean>;
     readonly enableExpandInteractionComputed: _angular_core.Signal<boolean>;
@@ -112,12 +112,12 @@ declare class SiDashboardComponent implements OnChanges, AfterViewInit {
     readonly hideMenubar: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Is `true` if a card is expanded.
-     * @defaultref {@link _isExpanded}
+     * @defaultref {@link isExpandedSignal}
      */
     get isExpanded(): boolean;
-    protected dashboardFrameEndPadding: number | null;
+    protected readonly dashboardFrameEndPadding: _angular_core.WritableSignal<number | null>;
     protected readonly hideMenubarComputed: _angular_core.Signal<boolean>;
-    private _isExpanded;
+    protected readonly isExpandedSignal: _angular_core.WritableSignal<boolean>;
     private scrollPosition;
     private readonly reinitCards$;
     private cards;

package/types/siemens-element-ng-date-range-filter.d.ts

@@ -266,6 +266,15 @@ declare class SiDateRangeFilterComponent implements OnChanges {
      * ```
      */
     readonly rangeEndDateMissingLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
+    /**
+     * label when range is not defined in the preview
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_DATE_RANGE_FILTER.SELECT_RANGE_LABEL:Select date range`)
+     * ```
+     */
+    readonly selectRangeLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     /** Event fired when the apply button has been clicked */
     readonly applyClicked: _angular_core.OutputEmitterRef<void>;
     /** Base configuration on how the dates should be displayed, parts of it may be overwritten internally. */
@@ -300,9 +309,9 @@ declare class SiDateRangeFilterComponent implements OnChanges {
     protected updateFromDateRange(dateRange?: DateRange): void;
     protected point1Changed(): void;
     protected point2Changed(): void;
-    protected selectPresetItem(event: Event, item: DateRangePreset): void;
+    protected selectPresetItem(label: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiDateRangeFilterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiDateRangeFilterComponent, "si-date-range-filter", never, { "range": { "alias": "range"; "required": true; "isSignal": true; }; "presetList": { "alias": "presetList"; "required": false; "isSignal": true; }; "presetSearch": { "alias": "presetSearch"; "required": false; "isSignal": true; }; "enableTimeSelection": { "alias": "enableTimeSelection"; "required": false; "isSignal": true; }; "basicMode": { "alias": "basicMode"; "required": false; "isSignal": true; }; "reverseInputFields": { "alias": "reverseInputFields"; "required": false; "isSignal": true; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; "isSignal": true; }; "hideAdvancedMode": { "alias": "hideAdvancedMode"; "required": false; "isSignal": true; }; "refLabel": { "alias": "refLabel"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "rangeLabel": { "alias": "rangeLabel"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "nowLabel": { "alias": "nowLabel"; "required": false; "isSignal": true; }; "dateLabel": { "alias": "dateLabel"; "required": false; "isSignal": true; }; "previewLabel": { "alias": "previewLabel"; "required": false; "isSignal": true; }; "datePlaceholder": { "alias": "datePlaceholder"; "required": false; "isSignal": true; }; "beforeLabel": { "alias": "beforeLabel"; "required": false; "isSignal": true; }; "afterLabel": { "alias": "afterLabel"; "required": false; "isSignal": true; }; "withinLabel": { "alias": "withinLabel"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "unitLabel": { "alias": "unitLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "presetLabel": { "alias": "presetLabel"; "required": false; "isSignal": true; }; "advancedLabel": { "alias": "advancedLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "rangeEndDateMissingLabel": { "alias": "rangeEndDateMissingLabel"; "required": false; "isSignal": true; }; "datepickerConfig": { "alias": "datepickerConfig"; "required": false; "isSignal": true; }; }, { "range": "rangeChange"; "applyClicked": "applyClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiDateRangeFilterComponent, "si-date-range-filter", never, { "range": { "alias": "range"; "required": true; "isSignal": true; }; "presetList": { "alias": "presetList"; "required": false; "isSignal": true; }; "presetSearch": { "alias": "presetSearch"; "required": false; "isSignal": true; }; "enableTimeSelection": { "alias": "enableTimeSelection"; "required": false; "isSignal": true; }; "basicMode": { "alias": "basicMode"; "required": false; "isSignal": true; }; "reverseInputFields": { "alias": "reverseInputFields"; "required": false; "isSignal": true; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; "isSignal": true; }; "hideAdvancedMode": { "alias": "hideAdvancedMode"; "required": false; "isSignal": true; }; "refLabel": { "alias": "refLabel"; "required": false; "isSignal": true; }; "fromLabel": { "alias": "fromLabel"; "required": false; "isSignal": true; }; "toLabel": { "alias": "toLabel"; "required": false; "isSignal": true; }; "rangeLabel": { "alias": "rangeLabel"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "nowLabel": { "alias": "nowLabel"; "required": false; "isSignal": true; }; "dateLabel": { "alias": "dateLabel"; "required": false; "isSignal": true; }; "previewLabel": { "alias": "previewLabel"; "required": false; "isSignal": true; }; "datePlaceholder": { "alias": "datePlaceholder"; "required": false; "isSignal": true; }; "beforeLabel": { "alias": "beforeLabel"; "required": false; "isSignal": true; }; "afterLabel": { "alias": "afterLabel"; "required": false; "isSignal": true; }; "withinLabel": { "alias": "withinLabel"; "required": false; "isSignal": true; }; "valueLabel": { "alias": "valueLabel"; "required": false; "isSignal": true; }; "unitLabel": { "alias": "unitLabel"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "presetLabel": { "alias": "presetLabel"; "required": false; "isSignal": true; }; "advancedLabel": { "alias": "advancedLabel"; "required": false; "isSignal": true; }; "applyLabel": { "alias": "applyLabel"; "required": false; "isSignal": true; }; "rangeEndDateMissingLabel": { "alias": "rangeEndDateMissingLabel"; "required": false; "isSignal": true; }; "selectRangeLabel": { "alias": "selectRangeLabel"; "required": false; "isSignal": true; }; "datepickerConfig": { "alias": "datepickerConfig"; "required": false; "isSignal": true; }; }, { "range": "rangeChange"; "applyClicked": "applyClicked"; }, never, never, true, never>;
 }
 
 declare class SiDateRangeFilterModule {

package/types/siemens-element-ng-file-uploader.d.ts

@@ -1,7 +1,6 @@
 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, SimpleChanges } from '@angular/core';
 import { HttpHeaders, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
 import { Observable, Subscription } from 'rxjs';
 
@@ -219,7 +218,7 @@ declare class SiFileDropzoneComponent {
     private readonly fileUploadDirective;
     protected dropHandler(event: DragEvent): void;
     protected dragOverHandler(event: DragEvent): void;
-    protected inputEnterHandler(): void;
+    protected triggerFileSelect(): void;
     protected onFilesAdded(files: UploadFile[]): void;
     protected onFileError(error: FileUploadError): void;
     /**
@@ -271,7 +270,7 @@ interface ExtUploadFile extends UploadFile {
     successResponse?: HttpResponse<unknown>;
     fadeOut?: boolean;
 }
-declare class SiFileUploaderComponent implements OnChanges {
+declare class SiFileUploaderComponent {
     /**
      * Text of the link to open the file select dialog (follows `uploadDropText`).
      *
@@ -485,15 +484,14 @@ declare class SiFileUploaderComponent implements OnChanges {
      */
     readonly filesChanges: _angular_core.OutputEmitterRef<UploadFile[]>;
     protected readonly icons: Record<"elementCancel" | "elementDelete" | "elementDocument" | "elementRedo", string>;
-    protected files: ExtUploadFile[];
+    protected readonly files: _angular_core.WritableSignal<ExtUploadFile[]>;
     protected pending: number;
     private uploading;
-    protected uploadEnabled: boolean;
-    protected maxFilesReached: boolean;
+    protected readonly uploadEnabled: _angular_core.WritableSignal<boolean>;
+    protected readonly maxFilesReached: _angular_core.WritableSignal<boolean>;
     private readonly dropZone;
-    private cdRef;
     private http?;
-    ngOnChanges(changes: SimpleChanges<this>): void;
+    constructor();
     protected handleFiles(files: UploadFile[]): void;
     protected removeFile(index: number): void;
     protected cancelUpload(file: ExtUploadFile): void;

package/types/siemens-element-ng-header-dropdown.d.ts

@@ -1,9 +1,8 @@
 import * as _siemens_element_ng_header_dropdown from '@siemens/element-ng/header-dropdown';
 import * as _angular_core from '@angular/core';
-import { OnChanges, OnInit, OnDestroy, TemplateRef, InjectionToken } from '@angular/core';
+import { OnChanges, OnInit, OnDestroy, TemplateRef, Signal, InjectionToken } from '@angular/core';
 import { MenuItem } from '@siemens/element-ng/common';
 import { ConnectedPosition } from '@angular/cdk/overlay';
-import { Observable } from 'rxjs';
 
 /**
  * Trigger to open dropdowns in a navbar.
@@ -41,6 +40,7 @@ declare class SiHeaderDropdownTriggerDirective implements OnChanges, OnInit, OnD
     /** @internal */
     readonly ariaControls: string;
     private headerAnchorComponentRef?;
+    constructor();
     /** Whether the dropdown is open. */
     get isOpen(): boolean;
     /** @internal */
@@ -125,7 +125,7 @@ interface HeaderWithDropdowns {
     /** Called whenever an item is triggered that is not opening another dropdown. */
     onDropdownItemTriggered?(): void;
     /** Whether the dropdown should be opened inline. */
-    inlineDropdown?: Observable<boolean>;
+    inlineDropdown: Signal<boolean>;
     /** The position of the dropdown if opened in an overlay. */
     overlayPosition?: ConnectedPosition[];
     /** Called whenever a dropdown is opened **/