@siemens/element-ng 48.0.0-next.3 → 48.0.0-next.5

package/about/index.d.ts

@@ -8,6 +8,7 @@ import { Link } from '@siemens/element-ng/link';
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+/** */
 interface LicenseInfo {
     /**
      * Title of the License Info.

package/card/index.d.ts

@@ -9,6 +9,10 @@ declare class SiCardComponent {
      * Card header text.
      */
     readonly heading: _angular_core.InputSignal<TranslatableString | undefined>;
+    /**
+     * Card secondary header text.
+     */
+    readonly subHeading: _angular_core.InputSignal<TranslatableString | undefined>;
     /**
      * Input list of primary action items. Supports up to **4** actions and omits additional ones.
      *
@@ -61,7 +65,7 @@ declare class SiCardComponent {
      *
      * @defaultValue 'scale-down'
      */
-    readonly imgObjectFit: _angular_core.InputSignal<"contain" | "cover" | "fill" | "none" | "scale-down" | undefined>;
+    readonly imgObjectFit: _angular_core.InputSignal<"fill" | "contain" | "cover" | "none" | "scale-down" | undefined>;
     /**
      * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
      */
@@ -75,7 +79,7 @@ declare class SiCardComponent {
      */
     readonly displayContentActionBar: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiCardComponent, "si-card", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "primaryActions": { "alias": "primaryActions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "actionBarViewType": { "alias": "actionBarViewType"; "required": false; "isSignal": true; }; "actionBarTitle": { "alias": "actionBarTitle"; "required": false; "isSignal": true; }; "imgSrc": { "alias": "imgSrc"; "required": false; "isSignal": true; }; "imgAlt": { "alias": "imgAlt"; "required": false; "isSignal": true; }; "imgDir": { "alias": "imgDir"; "required": false; "isSignal": true; }; "imgObjectFit": { "alias": "imgObjectFit"; "required": false; "isSignal": true; }; "imgObjectPosition": { "alias": "imgObjectPosition"; "required": false; "isSignal": true; }; }, {}, never, ["[headerIcon]", "[body]", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiCardComponent, "si-card", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "subHeading": { "alias": "subHeading"; "required": false; "isSignal": true; }; "primaryActions": { "alias": "primaryActions"; "required": false; "isSignal": true; }; "secondaryActions": { "alias": "secondaryActions"; "required": false; "isSignal": true; }; "actionParam": { "alias": "actionParam"; "required": false; "isSignal": true; }; "actionBarViewType": { "alias": "actionBarViewType"; "required": false; "isSignal": true; }; "actionBarTitle": { "alias": "actionBarTitle"; "required": false; "isSignal": true; }; "imgSrc": { "alias": "imgSrc"; "required": false; "isSignal": true; }; "imgAlt": { "alias": "imgAlt"; "required": false; "isSignal": true; }; "imgDir": { "alias": "imgDir"; "required": false; "isSignal": true; }; "imgObjectFit": { "alias": "imgObjectFit"; "required": false; "isSignal": true; }; "imgObjectPosition": { "alias": "imgObjectPosition"; "required": false; "isSignal": true; }; }, {}, never, ["[headerIcon]", "[body]", "[footer]"], true, never>;
 }
 
 declare class SiCardModule {

package/common/index.d.ts

@@ -354,6 +354,7 @@ declare const responsivelyCheckDirection: (params: {
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+/** */
 declare const isRTL: (elem?: HTMLElement) => boolean;
 declare const correctKeyRTL: (key: string) => string;
 

package/content-action-bar/index.d.ts

@@ -18,7 +18,7 @@ declare class SiContentActionBarComponent implements AfterViewInit {
     /**
      * List of primary actions. Supports up to **4** actions and omits additional ones.
      */
-    readonly primaryActions: _angular_core.InputSignal<readonly (ContentActionBarMainItem | MenuItem)[] | undefined>;
+    readonly primaryActions: _angular_core.InputSignal<readonly (MenuItem | ContentActionBarMainItem)[] | undefined>;
     /**
      * List of secondary actions.
      */

package/copyright-notice/index.d.ts

@@ -17,6 +17,7 @@ interface CopyrightDetails {
     lastUpdateYear?: number;
     /**
      * The company name to be displayed in the copyright notice (not to be translated).
+     * If empty (recommended), the company name from the theme will be used.
      */
     company?: string;
 }
@@ -35,7 +36,7 @@ declare class SiCopyrightNoticeComponent {
      */
     readonly copyright: _angular_core.InputSignal<CopyrightDetails | undefined>;
     protected readonly copyrightInfo: _angular_core.Signal<string>;
-    protected readonly company: _angular_core.Signal<string>;
+    protected readonly company: _angular_core.Signal<string | undefined>;
     protected readonly startYear: _angular_core.Signal<number>;
     protected readonly lastUpdateYear: _angular_core.Signal<number | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiCopyrightNoticeComponent, never>;

package/dashboard/index.d.ts

@@ -64,7 +64,7 @@ declare class SiDashboardCardComponent extends SiCardComponent implements OnDest
     readonly displayContentActionBar: _angular_core.Signal<boolean>;
     protected readonly actionBarViewTypeComputed: _angular_core.Signal<_siemens_element_ng_content_action_bar.ViewType>;
     protected readonly actionBarTitleComputed: _angular_core.Signal<_siemens_element_translate_ng_translate_types.TranslatableString>;
-    protected readonly primaryActionsComputed: _angular_core.Signal<(ContentActionBarMainItem | MenuItem)[]>;
+    protected readonly primaryActionsComputed: _angular_core.Signal<(MenuItem | ContentActionBarMainItem)[]>;
     private readonly expandRestoreIconTooltip;
     private readonly expandActionItem;
     private readonly restoreActionItem;
@@ -591,7 +591,7 @@ declare class SiTimelineWidgetComponent extends SiWidgetBaseComponent<SiTimeline
      *
      * @defaultValue []
      */
-    readonly primaryActions: _angular_core.InputSignal<(ContentActionBarMainItem | MenuItem)[]>;
+    readonly primaryActions: _angular_core.InputSignal<(MenuItem | ContentActionBarMainItem)[]>;
     /**
      * Input list of secondary action items.
      *
@@ -691,7 +691,7 @@ declare class SiValueWidgetComponent {
      *
      * @defaultValue []
      */
-    readonly primaryActions: _angular_core.InputSignal<(ContentActionBarMainItem | MenuItem)[]>;
+    readonly primaryActions: _angular_core.InputSignal<(MenuItem | ContentActionBarMainItem)[]>;
     /**
      * Input list of secondary action items.
      *

package/datatable/index.d.ts

@@ -5,9 +5,8 @@ declare class SiDatatableInteractionDirective implements OnDestroy, OnInit {
     /**
      * The selection type of the datatable, will automatically be set if set for datatable.
      *
-     * @defaultValue ''
      */
-    readonly selectionType: i0.InputSignal<string>;
+    readonly selectionType: i0.InputSignal<"multi" | "single" | "multiClick" | "cell" | "checkbox" | undefined>;
     /**
      * Automatically select every row or cell that is navigated trough.
      * Is ignored unless `selectionType` is `single` or `cell`.

package/datepicker/index.d.ts

@@ -601,7 +601,7 @@ declare class SiDatepickerOverlayDirective implements OnDestroy {
      * component are different.
      * @internal
      */
-    readonly placement: _angular_core.WritableSignal<"start" | "end" | "top" | "bottom" | "auto" | ConnectionPositionPair[]>;
+    readonly placement: _angular_core.WritableSignal<"auto" | "top" | "start" | "end" | "bottom" | ConnectionPositionPair[]>;
     /**
      * Output event on closing datepicker e.g. by clicking backdrop or escape key.
      */
@@ -712,16 +712,30 @@ declare class SiDatepickerDirective extends SiDateInputDirective implements Afte
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiDatepickerDirective, "[siDatepicker]", ["siDatepicker"], { "autoClose": { "alias": "autoClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof SiDatepickerOverlayDirective; inputs: {}; outputs: { "siDatepickerClose": "siDatepickerClose"; }; }]>;
 }
 
+interface Value {
+    value: string;
+    invalid: boolean;
+}
+interface TimeValue {
+    hours: Value;
+    minutes: Value;
+    seconds: Value;
+    milliseconds: Value;
+}
+interface Config {
+    ariaLabel: string;
+    label: string;
+    maxLength: number;
+    max: number;
+    name: keyof TimeValue;
+    pattern: string;
+    placeholder: string;
+    separator?: string;
+}
 declare class SiTimepickerComponent implements ControlValueAccessor, SiFormItemControl {
     private static idCounter;
     /** @internal */
-    invalidHours: boolean;
-    /** @internal */
-    invalidMinutes: boolean;
-    /** @internal */
-    invalidSeconds: boolean;
-    /** @internal */
-    invalidMilliseconds: boolean;
+    readonly forceInvalid: _angular_core.WritableSignal<boolean>;
     /**
      * @defaultValue
      * ```
@@ -841,17 +855,14 @@ declare class SiTimepickerComponent implements ControlValueAccessor, SiFormItemC
     readonly errormessageId: string;
     private onChange;
     private onTouched;
-    protected hours: string;
-    protected minutes: string;
-    protected seconds: string;
-    protected milliseconds: string;
     protected readonly periods: _angular_core.Signal<string[]>;
     protected readonly use12HourClock: _angular_core.Signal<boolean>;
     protected readonly disabled: _angular_core.Signal<boolean>;
     protected readonly meridian: _angular_core.WritableSignal<"" | "am" | "pm">;
+    protected readonly units: _angular_core.Signal<Config[]>;
+    protected readonly unitValues: _angular_core.WritableSignal<TimeValue>;
     private readonly disabledNgControl;
     private readonly locale;
-    private readonly cdRef;
     /**
      * Holds the time as date object that is presented by this control.
      */
@@ -869,10 +880,7 @@ declare class SiTimepickerComponent implements ControlValueAccessor, SiFormItemC
      */
     protected handleKeyPressEvent(event: KeyboardEvent): void;
     protected toHtmlInputElement: (target?: EventTarget | null) => HTMLInputElement;
-    protected updateHours(value: number | string): void;
-    protected updateMinutes(value: number | string): void;
-    protected updateSeconds(value: number | string): void;
-    protected updateMilliseconds(value: number | string): void;
+    protected updateField(name: keyof TimeValue, value: string): void;
     protected toggleMeridian(): void;
     /**
      * Takes the current UI values and updates the time object value
@@ -895,17 +903,9 @@ declare class SiTimepickerComponent implements ControlValueAccessor, SiFormItemC
     private updateUI;
     private isValidDate;
     private parseTime;
-    private parseHours;
-    private parseMinutes;
-    private parseSeconds;
-    private parseMilliseconds;
     private createDateUpdate;
     private toNumber;
     private isInputValid;
-    private isHourInputValid;
-    private isMinuteInputValid;
-    private isSecondInputValid;
-    private isMillisecondInputValid;
     private isValidLimit;
     private changeTimeComponent;
     private changeTime;

package/electron-titlebar/index.d.ts

@@ -83,6 +83,7 @@ declare class SiElectrontitlebarModule {
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+/** */
 declare const runsInElectron: () => boolean;
 
 export { SiElectrontitlebarComponent, SiElectrontitlebarModule, runsInElectron };

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

@@ -12,6 +12,10 @@ class SiCardComponent {
      * Card header text.
      */
     heading = input();
+    /**
+     * Card secondary header text.
+     */
+    subHeading = input();
     /**
      * Input list of primary action items. Supports up to **4** actions and omits additional ones.
      *
@@ -78,7 +82,7 @@ class SiCardComponent {
      */
     displayContentActionBar = computed(() => this.primaryActions()?.length > 0 || this.secondaryActions()?.length > 0);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiCardComponent, isStandalone: true, selector: "si-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, actionBarViewType: { classPropertyName: "actionBarViewType", publicName: "actionBarViewType", isSignal: true, isRequired: false, transformFunction: null }, actionBarTitle: { classPropertyName: "actionBarTitle", publicName: "actionBarTitle", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, imgDir: { classPropertyName: "imgDir", publicName: "imgDir", isSignal: true, isRequired: false, transformFunction: null }, imgObjectFit: { classPropertyName: "imgObjectFit", publicName: "imgObjectFit", isSignal: true, isRequired: false, transformFunction: null }, imgObjectPosition: { classPropertyName: "imgObjectPosition", publicName: "imgObjectPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.card-horizontal": "classCardHorizontal()", "style.--si-card-img-object-fit": "imgObjectFit()", "style.--si-card-img-object-position": "imgObjectPosition()" }, classAttribute: "card" }, ngImport: i0, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      @if (heading()) {\n        <div class=\"text-truncate\">{{ heading() | translate }}</div>\n      }\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiCardComponent, isStandalone: true, selector: "si-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subHeading: { classPropertyName: "subHeading", publicName: "subHeading", isSignal: true, isRequired: false, transformFunction: null }, primaryActions: { classPropertyName: "primaryActions", publicName: "primaryActions", isSignal: true, isRequired: false, transformFunction: null }, secondaryActions: { classPropertyName: "secondaryActions", publicName: "secondaryActions", isSignal: true, isRequired: false, transformFunction: null }, actionParam: { classPropertyName: "actionParam", publicName: "actionParam", isSignal: true, isRequired: false, transformFunction: null }, actionBarViewType: { classPropertyName: "actionBarViewType", publicName: "actionBarViewType", isSignal: true, isRequired: false, transformFunction: null }, actionBarTitle: { classPropertyName: "actionBarTitle", publicName: "actionBarTitle", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, imgDir: { classPropertyName: "imgDir", publicName: "imgDir", isSignal: true, isRequired: false, transformFunction: null }, imgObjectFit: { classPropertyName: "imgObjectFit", publicName: "imgObjectFit", isSignal: true, isRequired: false, transformFunction: null }, imgObjectPosition: { classPropertyName: "imgObjectPosition", publicName: "imgObjectPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.card-horizontal": "classCardHorizontal()", "style.--si-card-img-object-fit": "imgObjectFit()", "style.--si-card-img-object-position": "imgObjectPosition()" }, classAttribute: "card" }, ngImport: i0, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      <div>\n        @if (heading()) {\n          <div class=\"text-truncate si-title-2\">{{ heading() | translate }}</div>\n        }\n        @if (subHeading()) {\n          <div class=\"text-truncate si-body-2 text-secondary pt-2\">{{\n            subHeading() | translate\n          }}</div>\n        }\n      </div>\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"], dependencies: [{ kind: "component", type: SiContentActionBarComponent, selector: "si-content-action-bar", inputs: ["primaryActions", "secondaryActions", "actionParam", "viewType", "toggleItemLabel", "preventIconsInDropdownMenus", "disabled"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiCardComponent, decorators: [{
             type: Component,
@@ -87,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[class.card-horizontal]': 'classCardHorizontal()',
                         '[style.--si-card-img-object-fit]': 'imgObjectFit()',
                         '[style.--si-card-img-object-position]': 'imgObjectPosition()'
-                    }, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      @if (heading()) {\n        <div class=\"text-truncate\">{{ heading() | translate }}</div>\n      }\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"] }]
+                    }, template: "@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      <div>\n        @if (heading()) {\n          <div class=\"text-truncate si-title-2\">{{ heading() | translate }}</div>\n        }\n        @if (subHeading()) {\n          <div class=\"text-truncate si-body-2 text-secondary pt-2\">{{\n            subHeading() | translate\n          }}</div>\n        }\n      </div>\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n", styles: [":host.card-horizontal{flex-direction:row}.text-truncate{flex:0 1 auto}.cab{flex:1 0 0;min-inline-size:40px}.card-img-top{block-size:50%;inline-size:auto;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, center top)}.card-img-start{block-size:auto;inline-size:50%;object-fit:var(--si-card-img-object-fit, scale-down);object-position:var(--si-card-img-object-position, left center)}.card-content-split{flex:0 0 50%}.content-container{overflow:hidden;position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;word-wrap:break-word;border-radius:inherit}\n"] }]
         }] });
 
 /**

package/fesm2022/siemens-element-ng-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-card.mjs","sources":["../../../../projects/element-ng/card/si-card.component.ts","../../../../projects/element-ng/card/si-card.component.html","../../../../projects/element-ng/card/si-card.module.ts","../../../../projects/element-ng/card/index.ts","../../../../projects/element-ng/card/siemens-element-ng-card.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, computed, input } from '@angular/core';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport {\n  ContentActionBarMainItem,\n  SiContentActionBarComponent,\n  ViewType\n} from '@siemens/element-ng/content-action-bar';\nimport { MenuItem } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-card',\n  imports: [SiContentActionBarComponent, SiTranslatePipe],\n  templateUrl: './si-card.component.html',\n  styleUrl: './si-card.component.scss',\n  host: {\n    class: 'card',\n    '[class.card-horizontal]': 'classCardHorizontal()',\n    '[style.--si-card-img-object-fit]': 'imgObjectFit()',\n    '[style.--si-card-img-object-position]': 'imgObjectPosition()'\n  }\n})\nexport class SiCardComponent {\n  /**\n   * Card header text.\n   */\n  readonly heading = input<TranslatableString>();\n  /**\n   * Input list of primary action items. Supports up to **4** actions and omits additional ones.\n   *\n   * @defaultValue []\n   */\n  readonly primaryActions = input<(MenuItemLegacy | ContentActionBarMainItem)[]>([]);\n  /**\n   * Input list of secondary action items.\n   *\n   * @defaultValue []\n   */\n  readonly secondaryActions = input<(MenuItemLegacy | MenuItem)[]>([]);\n  /**\n   * A param that will be passed to the `action` in the primary/secondary actions.\n   * This allows to re-use the same primary/secondary action arrays across rows\n   * in a table.\n   */\n  readonly actionParam = input<any>();\n  /**\n   * The view type of the content action bar of the card. Default is `collapsible`\n   * for dashboards. However, in some cases you might need to change to `expanded`\n   * or `mobile`.\n   *\n   * @defaultValue 'collapsible'\n   */\n  readonly actionBarViewType = input<ViewType>('collapsible');\n  /**\n   * Optional setting of html title attribute for the content action bar.\n   * Helpful for a11y when only one action is configured in expand mode.\n   *\n   * @defaultValue ''\n   */\n  readonly actionBarTitle = input<TranslatableString>('');\n  /**\n   * Image source for the card.\n   */\n  readonly imgSrc = input<string>();\n  /**\n   * Alt text for a provided image.\n   */\n  readonly imgAlt = input<string>();\n  /**\n   * Defines if an image is placed on top or start (left) of the card.\n   *\n   * @defaultValue 'vertical'\n   */\n  readonly imgDir = input<('horizontal' | 'vertical') | undefined>('vertical');\n  /**\n   * Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.\n   *\n   * @defaultValue 'scale-down'\n   */\n  readonly imgObjectFit = input<('contain' | 'cover' | 'fill' | 'none' | 'scale-down') | undefined>(\n    'scale-down'\n  );\n  /**\n   * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.\n   */\n  readonly imgObjectPosition = input<string>();\n  /**\n   * In case the card uses an image and horizontal direction is used we set flex row direction.\n   */\n  protected readonly classCardHorizontal = computed(\n    () => !!this.imgSrc() && this.imgDir() === 'horizontal'\n  );\n  /**\n   * Returns `true` when primary or secondary actions are set.\n   */\n  readonly displayContentActionBar = computed(\n    () => this.primaryActions()?.length > 0 || this.secondaryActions()?.length > 0\n  );\n}\n","@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      @if (heading()) {\n        <div class=\"text-truncate\">{{ heading() | translate }}</div>\n      }\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCardComponent } from './si-card.component';\n\n@NgModule({\n  imports: [SiCardComponent],\n  exports: [SiCardComponent]\n})\nexport class SiCardModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-card.component';\nexport * from './si-card.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-card.mjs","sources":["../../../../projects/element-ng/card/si-card.component.ts","../../../../projects/element-ng/card/si-card.component.html","../../../../projects/element-ng/card/si-card.module.ts","../../../../projects/element-ng/card/index.ts","../../../../projects/element-ng/card/siemens-element-ng-card.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, computed, input } from '@angular/core';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport {\n  ContentActionBarMainItem,\n  SiContentActionBarComponent,\n  ViewType\n} from '@siemens/element-ng/content-action-bar';\nimport { MenuItem } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-card',\n  imports: [SiContentActionBarComponent, SiTranslatePipe],\n  templateUrl: './si-card.component.html',\n  styleUrl: './si-card.component.scss',\n  host: {\n    class: 'card',\n    '[class.card-horizontal]': 'classCardHorizontal()',\n    '[style.--si-card-img-object-fit]': 'imgObjectFit()',\n    '[style.--si-card-img-object-position]': 'imgObjectPosition()'\n  }\n})\nexport class SiCardComponent {\n  /**\n   * Card header text.\n   */\n  readonly heading = input<TranslatableString>();\n  /**\n   * Card secondary header text.\n   */\n  readonly subHeading = input<TranslatableString>();\n  /**\n   * Input list of primary action items. Supports up to **4** actions and omits additional ones.\n   *\n   * @defaultValue []\n   */\n  readonly primaryActions = input<(MenuItemLegacy | ContentActionBarMainItem)[]>([]);\n  /**\n   * Input list of secondary action items.\n   *\n   * @defaultValue []\n   */\n  readonly secondaryActions = input<(MenuItemLegacy | MenuItem)[]>([]);\n  /**\n   * A param that will be passed to the `action` in the primary/secondary actions.\n   * This allows to re-use the same primary/secondary action arrays across rows\n   * in a table.\n   */\n  readonly actionParam = input<any>();\n  /**\n   * The view type of the content action bar of the card. Default is `collapsible`\n   * for dashboards. However, in some cases you might need to change to `expanded`\n   * or `mobile`.\n   *\n   * @defaultValue 'collapsible'\n   */\n  readonly actionBarViewType = input<ViewType>('collapsible');\n  /**\n   * Optional setting of html title attribute for the content action bar.\n   * Helpful for a11y when only one action is configured in expand mode.\n   *\n   * @defaultValue ''\n   */\n  readonly actionBarTitle = input<TranslatableString>('');\n  /**\n   * Image source for the card.\n   */\n  readonly imgSrc = input<string>();\n  /**\n   * Alt text for a provided image.\n   */\n  readonly imgAlt = input<string>();\n  /**\n   * Defines if an image is placed on top or start (left) of the card.\n   *\n   * @defaultValue 'vertical'\n   */\n  readonly imgDir = input<('horizontal' | 'vertical') | undefined>('vertical');\n  /**\n   * Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.\n   *\n   * @defaultValue 'scale-down'\n   */\n  readonly imgObjectFit = input<('contain' | 'cover' | 'fill' | 'none' | 'scale-down') | undefined>(\n    'scale-down'\n  );\n  /**\n   * Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.\n   */\n  readonly imgObjectPosition = input<string>();\n  /**\n   * In case the card uses an image and horizontal direction is used we set flex row direction.\n   */\n  protected readonly classCardHorizontal = computed(\n    () => !!this.imgSrc() && this.imgDir() === 'horizontal'\n  );\n  /**\n   * Returns `true` when primary or secondary actions are set.\n   */\n  readonly displayContentActionBar = computed(\n    () => this.primaryActions()?.length > 0 || this.secondaryActions()?.length > 0\n  );\n}\n","@if (imgSrc()) {\n  <img\n    class=\"card-content-split\"\n    [class.card-img-top]=\"imgDir() !== 'horizontal'\"\n    [class.card-img-start]=\"imgDir() === 'horizontal'\"\n    [attr.src]=\"imgSrc()\"\n    [attr.alt]=\"imgAlt() | translate\"\n  />\n}\n\n<div class=\"content-container\" [class.card-content-split]=\"imgSrc()\">\n  @if (heading() || displayContentActionBar()) {\n    <div class=\"card-header d-flex justify-content-between\">\n      <ng-content #cardHeaderIcon select=\"[headerIcon]\" />\n      <div>\n        @if (heading()) {\n          <div class=\"text-truncate si-title-2\">{{ heading() | translate }}</div>\n        }\n        @if (subHeading()) {\n          <div class=\"text-truncate si-body-2 text-secondary pt-2\">{{\n            subHeading() | translate\n          }}</div>\n        }\n      </div>\n\n      <div class=\"cab d-flex ms-6 my-n4 me-n5\">\n        @if (displayContentActionBar()) {\n          <si-content-action-bar\n            class=\"ms-auto\"\n            [primaryActions]=\"primaryActions()\"\n            [secondaryActions]=\"secondaryActions()\"\n            [actionParam]=\"actionParam()\"\n            [viewType]=\"actionBarViewType()\"\n            [attr.title]=\"actionBarTitle() | translate\"\n          />\n        }\n      </div>\n    </div>\n  }\n  <ng-content #cardBody select=\"[body]\" />\n  <ng-content #cardFooter select=\"[footer]\" />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCardComponent } from './si-card.component';\n\n@NgModule({\n  imports: [SiCardComponent],\n  exports: [SiCardComponent]\n})\nexport class SiCardModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-card.component';\nexport * from './si-card.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-circle-status.mjs

@@ -65,8 +65,8 @@ class SiCircleStatusComponent {
         const status = this.status();
         const statusName = status && this.statusIcons[status] ? status : 'none';
         const direction = this.eventOut() ? ' out' : '';
-        const iconName = this.icon()?.replace(/^element-{0,1}/, '') ?? '';
-        return `${iconName.toLocaleLowerCase()}${this.status() && this.icon() ? ' in ' : ''}status ${statusName}${direction}`;
+        const iconName = this.icon()?.replace(/^element-{0,1}(.+)/, '$1 ') ?? '';
+        return `${iconName.toLocaleLowerCase()}${this.status() && this.icon() ? 'in ' : ''}status ${statusName}${direction}`;
     });
     statusIcon = computed(() => {
         const status = this.status();

package/fesm2022/siemens-element-ng-circle-status.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-circle-status.mjs","sources":["../../../../projects/element-ng/circle-status/si-circle-status.component.ts","../../../../projects/element-ng/circle-status/si-circle-status.component.html","../../../../projects/element-ng/circle-status/si-circle-status.module.ts","../../../../projects/element-ng/circle-status/index.ts","../../../../projects/element-ng/circle-status/siemens-element-ng-circle-status.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { BlinkService, EntityStatusType, StatusIcon } from '@siemens/element-ng/common';\nimport {\n  addIcons,\n  elementRight4,\n  SiIconComponent,\n  STATUS_ICON_CONFIG\n} from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n  selector: 'si-circle-status',\n  imports: [NgClass, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-circle-status.component.html',\n  styleUrl: './si-circle-status.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCircleStatusComponent implements OnChanges, OnDestroy {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /**\n   * The status (success, info, warning, danger) to be visualized.\n   */\n  readonly status = input<EntityStatusType>();\n\n  /* DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the\n   input. The possibility to have custom color is often requested by projects, so we keep it.\n   however in order to discourage it's use, we keep it marked deprecated.\n   */\n  /**\n   * A custom color (e.g. `#fefefe`) for exceptional cases.\n   * @deprecated use the semantic `status` input instead.\n   */\n  readonly color = input<string>();\n\n  /**\n   * Set a domain type icon (e.g. `element-door`) for which the status shall be shown.\n   * Leave undefined for visualizing the status without an icon.\n   */\n  readonly icon = input<string>();\n\n  /**\n   * Set the size using either regular or small only works when used together with `icon`\n   *\n   * @defaultValue 'regular'\n   */\n  readonly size = input<'regular' | 'small'>('regular');\n\n  /**\n   * event direction is out\n   *\n   * @defaultValue false\n   */\n  readonly eventOut = input(false, { transform: booleanAttribute });\n\n  /**\n   * Custom icon class for event out\n   */\n  readonly eventIcon = input<string>();\n\n  /**\n   * Whether the status should appear with a pulsing circle around the badge.\n   *\n   * @defaultValue false\n   */\n  readonly blink = input(false, { transform: booleanAttribute });\n\n  /**\n   * Blink pulse generator for synchronized blinking with other components\n   */\n  readonly blinkPulse = input<Observable<boolean>>();\n\n  /**\n   * Aria label for icon and status combo. Needed for a11y\n   */\n  readonly ariaLabel = input<string>();\n\n  protected readonly backgroundClass = computed(() => this.statusIcon()?.background ?? '');\n  protected readonly theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel());\n  protected readonly autoLabel = computed(() => {\n    const status = this.status();\n    const statusName = status && this.statusIcons[status] ? status : 'none';\n    const direction = this.eventOut() ? ' out' : '';\n    const iconName = this.icon()?.replace(/^element-{0,1}/, '') ?? '';\n    return `${iconName.toLocaleLowerCase()}${\n      this.status() && this.icon() ? ' in ' : ''\n    }status ${statusName}${direction}`;\n  });\n  protected readonly statusIcon = computed<StatusIcon | undefined>(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n  protected readonly blinkOn = signal(false);\n  protected readonly contrastFix = signal(false);\n  protected readonly icons = addIcons({ elementRight4 });\n  private blinkSubs?: Subscription;\n\n  private readonly bg = viewChild.required<ElementRef>('bg');\n\n  private blinkService = inject(BlinkService);\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.blinkService && changes.blink) {\n      this.blinkSubs?.unsubscribe();\n\n      if (this.blink()) {\n        const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n        this.blinkSubs = pulse.subscribe(onOff => {\n          this.blinkOn.set(onOff);\n        });\n      } else {\n        this.blinkOn.set(false);\n      }\n    }\n    if (changes.color || changes.blink) {\n      queueMicrotask(() => {\n        this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.blinkSubs?.unsubscribe();\n  }\n\n  private calculateContrastFix(): boolean {\n    // see https://www.w3.org/TR/AERT/#color-contrast\n    const rgb = getComputedStyle(this.bg().nativeElement)\n      .backgroundColor?.match(/\\d+/g)\n      ?.map(v => +v);\n    return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n  }\n}\n","<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    class=\"bg\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [ngClass]=\"backgroundClass()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon class=\"status-icon\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n      <si-icon\n        class=\"status-icon\"\n        [ngClass]=\"iconConfig.stackedColor\"\n        [icon]=\"iconConfig.stacked\"\n      />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCircleStatusComponent } from './si-circle-status.component';\n\n@NgModule({\n  imports: [SiCircleStatusComponent],\n  exports: [SiCircleStatusComponent]\n})\nexport class SiCircleStatusModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-circle-status.component';\nexport * from './si-circle-status.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-circle-status.mjs","sources":["../../../../projects/element-ng/circle-status/si-circle-status.component.ts","../../../../projects/element-ng/circle-status/si-circle-status.component.html","../../../../projects/element-ng/circle-status/si-circle-status.module.ts","../../../../projects/element-ng/circle-status/index.ts","../../../../projects/element-ng/circle-status/siemens-element-ng-circle-status.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgClass } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { BlinkService, EntityStatusType, StatusIcon } from '@siemens/element-ng/common';\nimport {\n  addIcons,\n  elementRight4,\n  SiIconComponent,\n  STATUS_ICON_CONFIG\n} from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n  selector: 'si-circle-status',\n  imports: [NgClass, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-circle-status.component.html',\n  styleUrl: './si-circle-status.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiCircleStatusComponent implements OnChanges, OnDestroy {\n  private readonly statusIcons = inject(STATUS_ICON_CONFIG);\n  /**\n   * The status (success, info, warning, danger) to be visualized.\n   */\n  readonly status = input<EntityStatusType>();\n\n  /* DO NOT REMOVE: Even though the input is marked as deprecated, the core-team decided not to remove the\n   input. The possibility to have custom color is often requested by projects, so we keep it.\n   however in order to discourage it's use, we keep it marked deprecated.\n   */\n  /**\n   * A custom color (e.g. `#fefefe`) for exceptional cases.\n   * @deprecated use the semantic `status` input instead.\n   */\n  readonly color = input<string>();\n\n  /**\n   * Set a domain type icon (e.g. `element-door`) for which the status shall be shown.\n   * Leave undefined for visualizing the status without an icon.\n   */\n  readonly icon = input<string>();\n\n  /**\n   * Set the size using either regular or small only works when used together with `icon`\n   *\n   * @defaultValue 'regular'\n   */\n  readonly size = input<'regular' | 'small'>('regular');\n\n  /**\n   * event direction is out\n   *\n   * @defaultValue false\n   */\n  readonly eventOut = input(false, { transform: booleanAttribute });\n\n  /**\n   * Custom icon class for event out\n   */\n  readonly eventIcon = input<string>();\n\n  /**\n   * Whether the status should appear with a pulsing circle around the badge.\n   *\n   * @defaultValue false\n   */\n  readonly blink = input(false, { transform: booleanAttribute });\n\n  /**\n   * Blink pulse generator for synchronized blinking with other components\n   */\n  readonly blinkPulse = input<Observable<boolean>>();\n\n  /**\n   * Aria label for icon and status combo. Needed for a11y\n   */\n  readonly ariaLabel = input<string>();\n\n  protected readonly backgroundClass = computed(() => this.statusIcon()?.background ?? '');\n  protected readonly theAriaLabel = computed(() => this.ariaLabel() ?? this.autoLabel());\n  protected readonly autoLabel = computed(() => {\n    const status = this.status();\n    const statusName = status && this.statusIcons[status] ? status : 'none';\n    const direction = this.eventOut() ? ' out' : '';\n    const iconName = this.icon()?.replace(/^element-{0,1}(.+)/, '$1 ') ?? '';\n    return `${iconName.toLocaleLowerCase()}${\n      this.status() && this.icon() ? 'in ' : ''\n    }status ${statusName}${direction}`;\n  });\n  protected readonly statusIcon = computed<StatusIcon | undefined>(() => {\n    const status = this.status();\n    return status ? this.statusIcons[status] : undefined;\n  });\n  protected readonly blinkOn = signal(false);\n  protected readonly contrastFix = signal(false);\n  protected readonly icons = addIcons({ elementRight4 });\n  private blinkSubs?: Subscription;\n\n  private readonly bg = viewChild.required<ElementRef>('bg');\n\n  private blinkService = inject(BlinkService);\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (this.blinkService && changes.blink) {\n      this.blinkSubs?.unsubscribe();\n\n      if (this.blink()) {\n        const pulse = this.blinkPulse() ?? this.blinkService.pulse$;\n        this.blinkSubs = pulse.subscribe(onOff => {\n          this.blinkOn.set(onOff);\n        });\n      } else {\n        this.blinkOn.set(false);\n      }\n    }\n    if (changes.color || changes.blink) {\n      queueMicrotask(() => {\n        this.contrastFix.set(!!this.color() && this.blink() && this.calculateContrastFix());\n      });\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.blinkSubs?.unsubscribe();\n  }\n\n  private calculateContrastFix(): boolean {\n    // see https://www.w3.org/TR/AERT/#color-contrast\n    const rgb = getComputedStyle(this.bg().nativeElement)\n      .backgroundColor?.match(/\\d+/g)\n      ?.map(v => +v);\n    return !!rgb && Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000) <= 128;\n  }\n}\n","<div\n  class=\"status-indication d-flex align-items-center justify-content-center\"\n  role=\"status\"\n  [class.has-icon]=\"icon()\"\n  [class.small]=\"size() === 'small'\"\n  [attr.aria-label]=\"theAriaLabel() | translate\"\n>\n  <div\n    #bg\n    class=\"bg\"\n    [class.pulse]=\"blinkOn()\"\n    [class.deprecated-color]=\"!status()\"\n    [class.contrast-fix]=\"contrastFix()\"\n    [ngClass]=\"backgroundClass()\"\n    [style.background-color]=\"color()\"\n  ></div>\n  @if (!status()) {\n    <div class=\"deprecated-dot\" [style.background-color]=\"color()\"></div>\n  }\n  @let iconConfig = statusIcon();\n  @if (iconConfig) {\n    <span class=\"status-icon icon-stack indicator\">\n      <si-icon class=\"status-icon\" [ngClass]=\"iconConfig.color\" [icon]=\"iconConfig.icon\" />\n      <si-icon\n        class=\"status-icon\"\n        [ngClass]=\"iconConfig.stackedColor\"\n        [icon]=\"iconConfig.stacked\"\n      />\n    </span>\n  }\n  @let eventIconValue = eventIcon();\n  @if (eventOut()) {\n    <si-icon class=\"icon text-body event-out flip-rtl\" [icon]=\"icons.elementRight4\" />\n  } @else if (eventIconValue) {\n    <si-icon class=\"icon text-body event-out\" [icon]=\"eventIconValue\" />\n  }\n  @let iconValue = icon();\n  @if (iconValue) {\n    <si-icon class=\"icon position-relative text-body\" [icon]=\"iconValue\" />\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiCircleStatusComponent } from './si-circle-status.component';\n\n@NgModule({\n  imports: [SiCircleStatusComponent],\n  exports: [SiCircleStatusComponent]\n})\nexport class SiCircleStatusModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-circle-status.component';\nexport * from './si-circle-status.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -455,6 +455,7 @@ const areAnimationsDisabled = () => {
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+/** */
 const isRTL = (elem) => getComputedStyle(elem ?? document.documentElement).direction === 'rtl';
 const correctKeyRTL = (key) => {
     if (!isRTL()) {