@siemens/element-ng 47.3.0 → 47.5.0

package/ip-input/si-ip-input.directive.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { ElementRef, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface AddrInputEvent {
+    type?: 'insert' | 'delete' | 'paste';
+    pos: number;
+    change: string | null;
+    value?: string | null;
+    previous?: string | null;
+}
+/**
+ * Base directive for ip address input fields.
+ */
+export declare abstract class SiIpInputDirective {
+    private static idCounter;
+    protected readonly elementRef: ElementRef<any>;
+    protected readonly renderer: Renderer2;
+    protected readonly inputEl: any;
+    /**
+     * @defaultValue
+     * ```
+     * `si-ip-input-${SiIpInputDirective.idCounter++}`
+     * ```
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    /**
+     * Enable CIDR (Classless Inter-Domain Routing) notation.
+     * @defaultValue false
+     */
+    readonly cidr: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the ip address input is disabled.
+     * @defaultValue false
+     */
+    readonly disabledInput: import("@angular/core").InputSignal<boolean>;
+    private readonly disabledNgControl;
+    protected readonly disabled: import("@angular/core").Signal<boolean>;
+    protected onTouched: () => void;
+    protected onChange: (value: any) => void;
+    protected value?: string | null;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    writeValue(value?: string | null): void;
+    protected onInput(e: InputEvent): void;
+    protected blur(): void;
+    abstract maskInput(e: AddrInputEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiIpInputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiIpInputDirective, never, never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "cidr": { "alias": "cidr"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/ip-input/si-ip4-input.directive.d.ts

@@ -0,0 +1,9 @@
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { AddrInputEvent, SiIpInputDirective } from './si-ip-input.directive';
+import * as i0 from "@angular/core";
+export declare class SiIp4InputDirective extends SiIpInputDirective implements ControlValueAccessor, Validator {
+    validate(control: AbstractControl): ValidationErrors | null;
+    maskInput(e: AddrInputEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiIp4InputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiIp4InputDirective, "input[siIpV4]", ["siIpV4"], {}, {}, never, never, true, never>;
+}

package/ip-input/si-ip6-input.directive.d.ts

@@ -0,0 +1,10 @@
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { AddrInputEvent, SiIpInputDirective } from './si-ip-input.directive';
+import * as i0 from "@angular/core";
+export declare class SiIp6InputDirective extends SiIpInputDirective implements ControlValueAccessor, Validator {
+    readonly validatorFn: import("@angular/core").Signal<import("@angular/forms").ValidatorFn>;
+    validate(control: AbstractControl): ValidationErrors | null;
+    maskInput(e: AddrInputEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiIp6InputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiIp6InputDirective, "input[siIpV6]", ["siIpV6"], {}, {}, never, never, true, never>;
+}

package/list-details/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-list-details.component';
+export * from './si-list-pane/si-list-pane.component';
+export * from './si-list-pane-header/si-list-pane-header.component';
+export * from './si-list-pane-body/si-list-pane-body.component';
+export * from './si-details-pane/si-details-pane.component';
+export * from './si-details-pane-header/si-details-pane-header.component';
+export * from './si-details-pane-body/si-details-pane-body.component';
+export * from './si-details-pane-footer/si-details-pane-footer.component';

package/list-details/package.json

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

package/list-details/si-details-pane/si-details-pane.component.d.ts

@@ -0,0 +1,8 @@
+import { SiListDetailsComponent } from '../si-list-details.component';
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiDetailsPaneComponent {
+    protected parent: SiListDetailsComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDetailsPaneComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiDetailsPaneComponent, "si-details-pane", never, {}, {}, never, ["*"], true, never>;
+}

package/list-details/si-details-pane-body/si-details-pane-body.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiDetailsPaneBodyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDetailsPaneBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiDetailsPaneBodyComponent, "si-details-pane-body", never, {}, {}, never, ["*"], true, never>;
+}

package/list-details/si-details-pane-footer/si-details-pane-footer.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiDetailsPaneFooterComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDetailsPaneFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiDetailsPaneFooterComponent, "si-details-pane-footer", never, {}, {}, never, ["*"], true, never>;
+}

package/list-details/si-details-pane-header/si-details-pane-header.component.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { Signal } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiDetailsPaneHeaderComponent {
+    private parent;
+    /**
+     * Optional title to be displayed.
+     */
+    readonly title: import("@angular/core").InputSignal<TranslatableString | undefined>;
+    /**
+     * You can hide the back button in the mobile view by setting true. Required
+     * in add, edit workflows on mobile sizes. During add or edit, the back button
+     * should be hidden. Default value is `false`.
+     *
+     * @defaultValue false
+     */
+    readonly hideBackButton: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Details back button text. Required for a11y.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_LIST_DETAILS.BACK:Back`
+     * ```
+     */
+    readonly backButtonText: import("@angular/core").InputSignal<TranslatableString>;
+    private readonly backButton;
+    constructor();
+    protected get hasLargeSize(): Signal<boolean>;
+    protected backClicked(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDetailsPaneHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiDetailsPaneHeaderComponent, "si-details-pane-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "hideBackButton": { "alias": "hideBackButton"; "required": false; "isSignal": true; }; "backButtonText": { "alias": "backButtonText"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/list-details/si-list-details.component.d.ts

@@ -0,0 +1,100 @@
+import { OnChanges, OnDestroy, OnInit, Signal, SimpleChanges } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiListDetailsComponent implements OnInit, OnChanges, OnDestroy {
+    private resizeSubs?;
+    private elementRef;
+    private resizeObserver;
+    private readonly animationsGloballyDisabled;
+    /**
+     * A numeric value defining the minimum width in px, which the component needs
+     * to be displayed in its large layout. Whenever smaller than
+     * this threshold, the small layout will be used. Default is
+     * value is BOOTSTRAP_BREAKPOINTS.mdMinimum.
+     *
+     * @defaultValue BOOTSTRAP_BREAKPOINTS.mdMinimum
+     */
+    readonly expandBreakpoint: import("@angular/core").InputSignal<number>;
+    readonly hasLargeSize: Signal<boolean>;
+    /**
+     * Whether the details are currently active or not, mostly relevant in the
+     * responsive scenario when the viewport only shows either the list or the detail.
+     *
+     * @defaultValue false
+     */
+    readonly detailsActive: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * Whether the list and detail parts should be resizable by a splitter or not.
+     * This is only supported in the 'large' scenario (when `hasLargeSize` is `true`).
+     * Default value is `false`.
+     *
+     * @defaultValue false
+     */
+    readonly disableResizing: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The percentage width of the list view of the overall component width.
+     * Can be a number or `'default'`, which is 32%.
+     *
+     * @defaultValue 'default'
+     */
+    readonly listWidth: import("@angular/core").ModelSignal<number | "default">;
+    /**
+     * Sets the minimal width of the list component in pixel.
+     *
+     * @defaultValue 300
+     */
+    readonly minListSize: import("@angular/core").InputSignal<number>;
+    /**
+     * Sets the minimal width of the detail component in pixel.
+     *
+     * @defaultValue 300
+     */
+    readonly minDetailsSize: import("@angular/core").InputSignal<number>;
+    /**
+     * An optional stateId to uniquely identify a component instance.
+     * Required for persistence of ui state.
+     */
+    readonly stateId: import("@angular/core").InputSignal<string | undefined>;
+    private readonly actualListWidth;
+    protected readonly splitSizes: Signal<[number, number]>;
+    /**
+     * The max size to limit the list view in the static flex layout (if less than 50%), otherwise not set.
+     * @internal
+     */
+    readonly maxListSize: Signal<string>;
+    /**
+     * The max size to limit the details view in the static flex layout (if less than 50%), otherwise not set.
+     * @internal
+     */
+    readonly maxDetailsSize: Signal<string>;
+    protected readonly listStateId: Signal<string | undefined>;
+    protected readonly detailsStateId: Signal<string | undefined>;
+    protected readonly opacity: Signal<"" | "0">;
+    /** @internal */
+    readonly detailsExpandedAnimation: Signal<"disabled" | "expanded" | "collapsed">;
+    private hadLargeSizePreviously;
+    private detailsActivePreviously;
+    private previouslyFocusedElementInList;
+    /** @internal */
+    readonly transferFocusToList: Subject<HTMLElement | undefined>;
+    /**
+     * A behavior subject because the details component may only be created when details are visible.
+     * @internal
+     */
+    readonly transferFocusToDetails: BehaviorSubject<boolean>;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private readonly resizeDimensions;
+    protected onSplitSizesChange(sizes: number[]): void;
+    /** @internal */
+    detailsBackClicked(): void;
+    private transferFocus;
+    /**
+     * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set
+     */
+    private getMaxSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiListDetailsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiListDetailsComponent, "si-list-details", never, { "expandBreakpoint": { "alias": "expandBreakpoint"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "disableResizing": { "alias": "disableResizing"; "required": false; "isSignal": true; }; "listWidth": { "alias": "listWidth"; "required": false; "isSignal": true; }; "minListSize": { "alias": "minListSize"; "required": false; "isSignal": true; }; "minDetailsSize": { "alias": "minDetailsSize"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; }, { "detailsActive": "detailsActiveChange"; "listWidth": "listWidthChange"; }, never, ["si-list-pane", "si-details-pane"], true, never>;
+}

package/list-details/si-list-pane/si-list-pane.component.d.ts

@@ -0,0 +1,10 @@
+import { SiListDetailsComponent } from '../si-list-details.component';
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiListPaneComponent {
+    protected parent: SiListDetailsComponent;
+    private element;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiListPaneComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiListPaneComponent, "si-list-pane", never, {}, {}, never, ["*"], true, never>;
+}

package/list-details/si-list-pane-body/si-list-pane-body.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiListPaneBodyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiListPaneBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiListPaneBodyComponent, "si-list-pane-body", never, {}, {}, never, ["*"], true, never>;
+}

package/list-details/si-list-pane-header/si-list-pane-header.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+/** @experimental */
+export declare class SiListPaneHeaderComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiListPaneHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiListPaneHeaderComponent, "si-list-pane-header", never, {}, {}, never, ["*"], true, never>;
+}

package/loading-spinner/si-loading-spinner.directive.d.ts

@@ -18,14 +18,15 @@ export declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnD
      */
     readonly initialDelay: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     private el;
-    private appRef;
+    private readonly viewRef;
     private sub?;
     private progressSubject;
     private off$;
     private on$;
     private readonly initialWaitTime;
     private minSpinTime;
-    private compPortal;
+    private portalOutlet?;
+    private readonly compPortal;
     protected readonly spinner$: import("rxjs").Observable<boolean>;
     private createPortal;
     ngOnInit(): void;

package/localization/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-locale-id';
+export * from './si-locale-store';
+export * from './si-locale.service';
+export * from './si-directionality';

package/localization/package.json

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

package/localization/si-directionality.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { Direction, Directionality } from '@angular/cdk/bidi';
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Provider for dynamic CDK directionality.
+ *
+ * CDK per default evaluates directionality once during initialization. This is a problem when
+ * switching language later in the lifecycle. This provider can be used to make this dynamic.
+ * To use, simply provide this in the `ApplicationConfig`:
+ *
+ * ```ts
+ * import { Directionality } from '@angular/cdk/bidi';
+ * import { SiDirectionality } from '@siemens/element-ng/localization';
+ *
+ * ...
+ * export const APP_CONFIG: ApplicationConfig = {
+ *   providers: [
+ *     { provide: Directionality, useClass: SiDirectionality },
+ *     ...
+ *   ]
+ * }
+ *
+ * bootstrapApplication(AppComponent, APP_CONFIG)
+ *    ...
+ *
+ * ```
+ */
+export declare class SiDirectionality implements Directionality {
+    readonly change: EventEmitter<Direction>;
+    /** @defaultValue 'ltr' */
+    readonly valueSignal: import("@angular/core").WritableSignal<Direction>;
+    get value(): Direction;
+    /** @internal */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDirectionality, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiDirectionality>;
+}

package/localization/si-locale-id.d.ts

@@ -0,0 +1,22 @@
+import { SiLocaleService } from './si-locale.service';
+import * as i0 from "@angular/core";
+/**
+ * The SiLocaleId is used to provide a locale id from the translate service
+ * to the angular localization. The Angular services call toString or valueOf
+ * so that the current locale of the translation service is provided. The Intl.
+ * library does not invoke toString() and using the value directly in Intl
+ * formatting results always having the `en` locale. Thus, when using the SiLocaleId
+ * in other services, make sure to use the `toString()` method before.
+ */
+export declare class SiLocaleId extends String {
+    protected service: SiLocaleService;
+    constructor();
+    /**
+     * Outputs the locale id as a string.
+     */
+    toString(): string;
+    valueOf(): string;
+    toLowerCase(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiLocaleId, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiLocaleId>;
+}

package/localization/si-locale-store.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { Observable } from 'rxjs';
+export declare abstract class SiLocaleStore {
+    abstract get locale(): string | undefined;
+    abstract saveLocale(locale: string): Observable<boolean>;
+}
+export declare const SI_LOCALE_LOCAL_STORAGE_KEY = "lang";
+export declare class SiDefaultLocaleStore extends SiLocaleStore {
+    private isBrowser;
+    constructor(isBrowser: boolean);
+    get locale(): string | undefined;
+    saveLocale(locale: string): Observable<boolean>;
+}

package/localization/si-locale.service.d.ts

@@ -0,0 +1,73 @@
+import { InjectionToken } from '@angular/core';
+import { BehaviorSubject, ReplaySubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare const SI_LOCALE_STORE: InjectionToken<string>;
+export declare const SI_LOCALE_CONFIG: InjectionToken<SiLocaleConfig>;
+export interface SiLocaleConfig {
+    /**
+     * The default locale to be used, when no user preference
+     * available and the browser language is not part of the
+     * available languages.
+     */
+    defaultLocale?: string;
+    /**
+     * The list of available locales (e.g. en, fr, de, en-GB, de-AT)
+     */
+    availableLocales?: string[];
+    /**
+     * The localeInitializer function is invoked on every locale change.
+     * Make sure to invoke `registerLocaleData` with the locale to enable
+     * the Angular localization.
+     */
+    localeInitializer?: (localeId: string) => Promise<any>;
+    /**
+     * Set to true to also enable the default language on ngx-translate. When true,
+     * ngx-translate will use a translate value from the default language when a required
+     * value is not available in the current language. But note, this will also enforce
+     * to load the default language translation file into the application, even if a different
+     * locale is active. In other words, the application start time increases.
+     */
+    fallbackEnabled?: boolean;
+    /**
+     * Default is false and defines that on setting a new locale, the locale is stored and the
+     * browser is reloaded. When changing to true, window reload is not invoked, but angular
+     * pure pipes like DatePipe will not work.
+     */
+    dynamicLanguageChange?: boolean;
+}
+export declare class SiLocaleService {
+    /**
+     * Holds the used locale definition like en, de, or en-US.
+     */
+    readonly locale$: BehaviorSubject<string>;
+    /**
+     * Emits to indicate that the localization package (e.g. \@angular/common/locales/$\{localeId\})
+     * is loaded and registered. Emits after calling `localeInitializer` from the `config` object.
+     */
+    readonly localePackageLoaded$: ReplaySubject<void>;
+    private _nextLocale;
+    private isBrowser;
+    private translate;
+    private localeStore;
+    /**
+     * The config for the local service.
+     */
+    config: SiLocaleConfig;
+    constructor();
+    /**
+     * Sets a new locale to the locale service and also to the translate
+     * service.
+     * @throws An error if the new value is not configured in the available locales
+     * or if the new locale cannot be saved, an error is thrown.
+     */
+    set locale(value: string);
+    get locale(): string;
+    private doSetLocale;
+    /**
+     * Test if the given locale is part of the available locales.
+     * @param locale - The locale to be tested.
+     */
+    hasLocale(locale?: string): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiLocaleService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiLocaleService>;
+}