@siemens/element-ng 47.3.0 → 47.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/element-ng",
   "description": "Element Angular component library, implementing the Siemens Design Language",
-  "version": "47.3.0",
+  "version": "47.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -18,18 +18,42 @@
   },
   "type": "module",
   "peerDependencies": {
-    "@angular/animations": "19",
-    "@angular/cdk": "19",
-    "@angular/common": "19",
-    "@angular/core": "19",
-    "@angular/forms": "19",
-    "@angular/router": "19",
-    "@siemens/element-translate-ng": "47.3.0",
-    "@siemens/element-theme": "47.3.0"
+    "@angular/animations": "19 - 20",
+    "@angular/cdk": "19 - 20",
+    "@angular/common": "19 - 20",
+    "@angular/core": "19 - 20",
+    "@angular/forms": "19 - 20",
+    "@angular/router": "19 - 20",
+    "@ngx-formly/bootstrap": "^6.2.2",
+    "@ngx-formly/core": "^6.2.2",
+    "@siemens/element-translate-ng": "47.5.0",
+    "@siemens/element-theme": "47.5.0",
+    "@siemens/ngx-datatable": "22 - 23",
+    "flag-icons": "^7.3.2",
+    "google-libphonenumber": "^3.2.40",
+    "ngx-image-cropper": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/animations": {
       "optional": true
+    },
+    "@ngx-formly/bootstrap": {
+      "optional": true
+    },
+    "@ngx-formly/core": {
+      "optional": true
+    },
+    "@siemens/ngx-datatable": {
+      "optional": true
+    },
+    "ngx-image-cropper": {
+      "optional": true
+    },
+    "flag-icons": {
+      "optional": true
+    },
+    "google-libphonenumber": {
+      "optional": true
     }
   },
   "module": "fesm2022/siemens-element-ng.mjs",
@@ -70,10 +94,26 @@
       "types": "./badge/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-badge.mjs"
     },
+    "./breadcrumb": {
+      "types": "./breadcrumb/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-breadcrumb.mjs"
+    },
+    "./card": {
+      "types": "./card/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-card.mjs"
+    },
+    "./circle-status": {
+      "types": "./circle-status/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-circle-status.mjs"
+    },
     "./color-picker": {
       "types": "./color-picker/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-color-picker.mjs"
     },
+    "./column-selection-dialog": {
+      "types": "./column-selection-dialog/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-column-selection-dialog.mjs"
+    },
     "./common": {
       "types": "./common/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-common.mjs"
@@ -90,10 +130,38 @@
       "types": "./copyright-notice/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-copyright-notice.mjs"
     },
+    "./datatable": {
+      "types": "./datatable/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-datatable.mjs"
+    },
+    "./date-range-filter": {
+      "types": "./date-range-filter/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-date-range-filter.mjs"
+    },
+    "./datepicker": {
+      "types": "./datepicker/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-datepicker.mjs"
+    },
+    "./electron-titlebar": {
+      "types": "./electron-titlebar/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-electron-titlebar.mjs"
+    },
     "./empty-state": {
       "types": "./empty-state/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-empty-state.mjs"
     },
+    "./file-uploader": {
+      "types": "./file-uploader/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-file-uploader.mjs"
+    },
+    "./filter-bar": {
+      "types": "./filter-bar/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-filter-bar.mjs"
+    },
+    "./filtered-search": {
+      "types": "./filtered-search/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-filtered-search.mjs"
+    },
     "./footer": {
       "types": "./footer/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-footer.mjs"
@@ -102,6 +170,10 @@
       "types": "./form/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-form.mjs"
     },
+    "./formly": {
+      "types": "./formly/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-formly.mjs"
+    },
     "./header-dropdown": {
       "types": "./header-dropdown/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-header-dropdown.mjs"
@@ -114,10 +186,18 @@
       "types": "./icon-status/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-icon-status.mjs"
     },
+    "./info-page": {
+      "types": "./info-page/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-info-page.mjs"
+    },
     "./inline-notification": {
       "types": "./inline-notification/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-inline-notification.mjs"
     },
+    "./ip-input": {
+      "types": "./ip-input/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-ip-input.mjs"
+    },
     "./language-switcher": {
       "types": "./language-switcher/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-language-switcher.mjs"
@@ -126,10 +206,18 @@
       "types": "./link/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-link.mjs"
     },
+    "./list-details": {
+      "types": "./list-details/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-list-details.mjs"
+    },
     "./loading-spinner": {
       "types": "./loading-spinner/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-loading-spinner.mjs"
     },
+    "./localization": {
+      "types": "./localization/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-localization.mjs"
+    },
     "./menu": {
       "types": "./menu/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-menu.mjs"
@@ -158,6 +246,14 @@
       "types": "./password-toggle/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-password-toggle.mjs"
     },
+    "./phone-number": {
+      "types": "./phone-number/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-phone-number.mjs"
+    },
+    "./photo-upload": {
+      "types": "./photo-upload/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-photo-upload.mjs"
+    },
     "./pills-input": {
       "types": "./pills-input/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-pills-input.mjs"
@@ -178,14 +274,50 @@
       "types": "./resize-observer/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-resize-observer.mjs"
     },
+    "./result-details-list": {
+      "types": "./result-details-list/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-result-details-list.mjs"
+    },
+    "./search-bar": {
+      "types": "./search-bar/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-search-bar.mjs"
+    },
     "./select": {
       "types": "./select/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-select.mjs"
     },
+    "./shadow-root": {
+      "types": "./shadow-root/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-shadow-root.mjs"
+    },
+    "./side-panel": {
+      "types": "./side-panel/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-side-panel.mjs"
+    },
     "./skip-links": {
       "types": "./skip-links/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-skip-links.mjs"
     },
+    "./slider": {
+      "types": "./slider/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-slider.mjs"
+    },
+    "./sort-bar": {
+      "types": "./sort-bar/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-sort-bar.mjs"
+    },
+    "./split": {
+      "types": "./split/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-split.mjs"
+    },
+    "./status-bar": {
+      "types": "./status-bar/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-status-bar.mjs"
+    },
+    "./status-toggle": {
+      "types": "./status-toggle/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-status-toggle.mjs"
+    },
     "./summary-chip": {
       "types": "./summary-chip/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-summary-chip.mjs"
@@ -194,6 +326,18 @@
       "types": "./summary-widget/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-summary-widget.mjs"
     },
+    "./system-banner": {
+      "types": "./system-banner/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-system-banner.mjs"
+    },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-tabs.mjs"
+    },
+    "./tabs-next": {
+      "types": "./tabs-next/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-tabs-next.mjs"
+    },
     "./theme": {
       "types": "./theme/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-theme.mjs"
@@ -210,10 +354,18 @@
       "types": "./translate/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-translate.mjs"
     },
+    "./tree-view": {
+      "types": "./tree-view/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-tree-view.mjs"
+    },
     "./typeahead": {
       "types": "./typeahead/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-typeahead.mjs"
     },
+    "./unauthorized-page": {
+      "types": "./unauthorized-page/index.d.ts",
+      "default": "./fesm2022/siemens-element-ng-unauthorized-page.mjs"
+    },
     "./wizard": {
       "types": "./wizard/index.d.ts",
       "default": "./fesm2022/siemens-element-ng-wizard.mjs"

package/password-strength/si-password-strength.directive.d.ts

@@ -21,6 +21,17 @@ export interface PasswordPolicy {
      * Define if special characters are required in password.
      */
     special: boolean;
+    /**
+     * Whether to allow whitespaces. By default whitespaces are not allowed.
+     */
+    allowWhitespace?: boolean;
+    /**
+     * Minimum required policies for valid password. When set to a number greater than 0,
+     * defines the number of policies that must be met for the password to be valid.
+     * E.g. when set to 3 and the policies uppercase/lowercase/digits/special are all set
+     * and the password contains 3 out of these four, the password will be valid.
+     */
+    minRequiredPolicies?: number;
 }
 export declare class SiPasswordStrengthDirective implements Validator {
     private readonly maxStrength;

package/phone-number/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-phone-number-input.module';
+export * from './si-phone-number-input.component';
+export * from './si-phone-number-input.models';

package/phone-number/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-phone-number.mjs"
+}

package/phone-number/si-phone-number-input-select.directive.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@siemens/element-ng/select";
+/**
+ * This directive provides the si-select options and value strategy for the phone number input.
+ * As we don't use si-select directly, we need to provide these strategies manually.
+ */
+export declare class SiPhoneNumberInputSelectDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPhoneNumberInputSelectDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiPhoneNumberInputSelectDirective, "[siPhoneNumberInputSelect]", never, {}, {}, never, never, true, [{ directive: typeof i1.SiSelectComplexOptionsDirective; inputs: { "complexOptions": "complexOptions"; "valueProvider": "valueProvider"; }; outputs: {}; }, { directive: typeof i1.SiSelectSingleValueDirective; inputs: { "value": "value"; }; outputs: { "valueChange": "valueChange"; }; }]>;
+}

package/phone-number/si-phone-number-input.component.d.ts

@@ -0,0 +1,137 @@
+import { ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { SiFormItemControl } from '@siemens/element-ng/form';
+import { CountryInfo, PhoneDetails } from './si-phone-number-input.models';
+import * as i0 from "@angular/core";
+export declare class SiPhoneNumberInputComponent implements ControlValueAccessor, Validator, OnChanges, SiFormItemControl {
+    private static idCounter;
+    private phoneUtil;
+    private translate;
+    private changeDetectorRef;
+    private elementRef;
+    /**
+     * Unique identifier.
+     *
+     * @defaultValue
+     * ```
+     * `__si-phone-number-input-${SiPhoneNumberInputComponent.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    /**
+     * ISO_3166-2 Code of the selected country.
+     */
+    readonly country: import("@angular/core").ModelSignal<string | undefined>;
+    /**
+     * ISO_3166-2 Code of the country which shall be used on form-control reset.
+     */
+    readonly defaultCountry: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Placeholder text for country search input.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER:Search`
+     * ```
+     */
+    readonly placeholderForSearch: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND:No results found`
+     * ```
+     */
+    readonly searchNoResultsFoundLabel: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * Text for the country dropdown aria-label attribute.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY:Select country`
+     * ```
+     */
+    readonly selectCountryAriaLabel: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * Text for the phone number input aria-label attribute.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL:Enter phone number`
+     * ```
+     */
+    readonly phoneNumberAriaLabel: import("@angular/core").InputSignal<import("@siemens/element-translate-ng/translate").TranslatableString>;
+    /**
+     * List of countries in ISO2 format, from which the user is allowed to select one.
+     * If no values are provided, the dropdown will show all known countries.
+     */
+    readonly supportedCountries: import("@angular/core").InputSignal<readonly string[] | null | undefined>;
+    /**
+     * @defaultValue
+     * ```
+     * `${this.id()}-label`
+     * ```
+     */
+    readonly labelledby: import("@angular/core").InputSignal<string>;
+    /** @defaultValue false */
+    readonly disabledInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** @defaultValue false */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<PhoneDetails>;
+    /** @internal */
+    readonly errormessageId: string;
+    protected readonly phoneInput: import("@angular/core").Signal<ElementRef<HTMLInputElement>>;
+    protected selectedCountry?: CountryInfo;
+    protected placeholder: string;
+    protected readonly countryFocused: import("@angular/core").WritableSignal<boolean>;
+    protected open: boolean;
+    protected overlayWidth: number;
+    protected readonly disabled: import("@angular/core").Signal<boolean>;
+    protected readonly countryList: import("@angular/core").Signal<{
+        name: string;
+        countryCode: number;
+        isoCode: string;
+    }[]>;
+    protected readonly icons: Record<"elementDown2", string>;
+    private readonly allowedCountries;
+    private readonly disabledNgControl;
+    private isValidNumber;
+    private phoneNumber?;
+    private onChange;
+    private onTouched;
+    ngOnChanges(changes: SimpleChanges): void;
+    /** @internal */
+    writeValue(value: string | undefined): void;
+    /** @internal */
+    registerOnChange(fn: any): void;
+    /** @internal */
+    registerOnTouched(fn: () => void): void;
+    /** @internal */
+    setDisabledState(isDisabled: boolean): void;
+    /** @internal */
+    validate(control: AbstractControl): ValidationErrors | null;
+    protected input(): void;
+    protected blur(): void;
+    protected countryInput(num: CountryInfo): void;
+    protected openOverlay(): void;
+    protected overlayDetach(): void;
+    protected valueProvider(country: CountryInfo): string;
+    private writeCountry;
+    private getCountryName;
+    private updatePlaceholder;
+    private parseNumber;
+    /**
+     * PhoneUtil does not resolve country code early enough when the national prefix is shared among other countries (+1 and +44).
+     * This Method fakes a complete number to force PhoneUtil returning a proper region code.
+     */
+    private getRegionCode;
+    private formatPhoneNumber;
+    private handleChange;
+    private writeTextToInput;
+    /**
+     * Format and update input text or clear input text if the input value is undefined.
+     */
+    private writeValueToInput;
+    private refreshValueAfterCountryChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPhoneNumberInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiPhoneNumberInputComponent, "si-phone-number-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "country": { "alias": "country"; "required": false; "isSignal": true; }; "defaultCountry": { "alias": "defaultCountry"; "required": false; "isSignal": true; }; "placeholderForSearch": { "alias": "placeholderForSearch"; "required": false; "isSignal": true; }; "searchNoResultsFoundLabel": { "alias": "searchNoResultsFoundLabel"; "required": false; "isSignal": true; }; "selectCountryAriaLabel": { "alias": "selectCountryAriaLabel"; "required": false; "isSignal": true; }; "phoneNumberAriaLabel": { "alias": "phoneNumberAriaLabel"; "required": false; "isSignal": true; }; "supportedCountries": { "alias": "supportedCountries"; "required": false; "isSignal": true; }; "labelledby": { "alias": "labelledby"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; }, { "country": "countryChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}

package/phone-number/si-phone-number-input.models.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export interface PhoneNumberModel {
+    /**
+     * Country code
+     */
+    countryCode?: string;
+    /**
+     * Phone number
+     */
+    phoneNumber?: string;
+}
+/**
+ * Describes the country information of the phone number.
+ */
+export interface CountryInfo {
+    /**
+     * The name of the country.
+     **/
+    name: string;
+    /**
+     * The country dial code
+     */
+    countryCode: number;
+    /**
+     * The country ISO code.
+     */
+    isoCode: string;
+}
+/**
+ * Describes the phone number, its validity and associated country information.
+ */
+export interface PhoneDetails {
+    /**
+     * CountryInfo object containing name, countryCode and isoCode of the phone number.
+     */
+    country?: CountryInfo;
+    /**
+     * Phone number entered by the user.
+     */
+    phoneNumber?: string;
+    /**
+     * Confirms if the phone number is valid or not
+     */
+    isValid: boolean;
+}

package/phone-number/si-phone-number-input.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./si-phone-number-input.component";
+export declare class SiPhoneNumberInputModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiPhoneNumberInputModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiPhoneNumberInputModule, never, [typeof i1.SiPhoneNumberInputComponent], [typeof i1.SiPhoneNumberInputComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiPhoneNumberInputModule>;
+}

package/photo-upload/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-image-cropper-style.component';
+export * from './si-photo-upload.component';

package/photo-upload/package.json

@@ -0,0 +1,3 @@
+{
+  "module": "../fesm2022/siemens-element-ng-photo-upload.mjs"
+}

package/photo-upload/si-image-cropper-style.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SiImageCropperStyleComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiImageCropperStyleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiImageCropperStyleComponent, "si-image-cropper-style", never, {}, {}, never, ["*"], true, never>;
+}