@siemens/element-ng 47.8.0 → 48.0.0-next.1

package/loading-spinner/index.d.ts

@@ -1,9 +1,128 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export * from './si-loading-button.component';
-export * from './si-loading-spinner.component';
-export * from './si-loading-spinner.directive';
-export * from './si-loading-spinner.service';
-export * from './si-loading-spinner.module';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, OnInit, OnChanges, OnDestroy } from '@angular/core';
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import * as rxjs from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+
+declare class SiLoadingButtonComponent {
+    /**
+     * Whether the button is disabled.
+     * @defaultValue false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the loading state should be displayed.
+     * @defaultValue false
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Type of the button.
+     * @defaultValue 'button'
+     **/
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    /** aria-label for the button */
+    readonly ariaLabel: _angular_core.InputSignal<TranslatableString | undefined>;
+    /** aria-labelledby for the button */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * CSS class for the button.
+     * @defaultValue ''
+     */
+    readonly buttonClass: _angular_core.InputSignal<string>;
+    protected handleClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLoadingButtonComponent, "si-loading-button", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "buttonClass": { "alias": "buttonClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare const LOADING_SPINNER_BLOCKING: InjectionToken<boolean>;
+declare const LOADING_SPINNER_OVERLAY: InjectionToken<boolean>;
+declare class SiLoadingSpinnerComponent {
+    protected fadeAnimation: string;
+    /**
+     * @defaultValue
+     * ```
+     * inject(LOADING_SPINNER_BLOCKING, { optional: true })
+     * ```
+     */
+    readonly isBlockingSpinner: _angular_core.InputSignal<boolean | null>;
+    /**
+     * @defaultValue
+     * ```
+     * inject(LOADING_SPINNER_OVERLAY, { optional: true })
+     * ```
+     */
+    readonly isSpinnerOverlay: _angular_core.InputSignal<boolean | null>;
+    /**
+     * Needed for a11y
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_LOADING_SPINNER.LABEL:Loading`)
+     * ```
+     */
+    readonly ariaLabel: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiLoadingSpinnerComponent, "si-loading-spinner", never, { "isBlockingSpinner": { "alias": "isBlockingSpinner"; "required": false; "isSignal": true; }; "isSpinnerOverlay": { "alias": "isSpinnerOverlay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SiLoadingSpinnerDirective implements OnInit, OnChanges, OnDestroy {
+    /**
+     * Displays the loading spinner when the value is either true or non-zero.
+     */
+    readonly siLoading: _angular_core.InputSignal<number | boolean>;
+    /**
+     * Displays semi-transparent backdrop for the spinner, default is false.
+     *
+     * @defaultValue false
+     */
+    readonly blocking: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Specifies if the spinner should be displayed after a delay, default is true.
+     *
+     * @defaultValue true
+     */
+    readonly initialDelay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private el;
+    private readonly viewRef;
+    private sub?;
+    private progressSubject;
+    private off$;
+    private on$;
+    private readonly initialWaitTime;
+    private minSpinTime;
+    private portalOutlet?;
+    private readonly compPortal;
+    protected readonly spinner$: rxjs.Observable<boolean>;
+    private createPortal;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingSpinnerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiLoadingSpinnerDirective, "[siLoading]", never, { "siLoading": { "alias": "siLoading"; "required": true; "isSignal": true; }; "blocking": { "alias": "blocking"; "required": false; "isSignal": true; }; "initialDelay": { "alias": "initialDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class SiLoadingService {
+    /**
+     * Counts the number of loads active, is `0` when all loading is finished (or hasn't started).
+     */
+    readonly counter: BehaviorSubject<number>;
+    /**
+     * Start the loading.
+     */
+    startLoad(): void;
+    /**
+     * Stop the loading.
+     */
+    stopLoad(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SiLoadingService>;
+}
+
+declare class SiLoadingSpinnerModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiLoadingSpinnerModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiLoadingSpinnerModule, never, [typeof SiLoadingSpinnerComponent, typeof SiLoadingSpinnerDirective], [typeof SiLoadingSpinnerComponent, typeof SiLoadingSpinnerDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiLoadingSpinnerModule>;
+}
+
+export { LOADING_SPINNER_BLOCKING, LOADING_SPINNER_OVERLAY, SiLoadingButtonComponent, SiLoadingService, SiLoadingSpinnerComponent, SiLoadingSpinnerDirective, SiLoadingSpinnerModule };

package/localization/index.d.ts

@@ -1,8 +1,151 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter } from '@angular/core';
+import { BehaviorSubject, ReplaySubject, Observable } from 'rxjs';
+import { Directionality, Direction } from '@angular/cdk/bidi';
+
+declare const SI_LOCALE_STORE: InjectionToken<string>;
+declare const SI_LOCALE_CONFIG: InjectionToken<SiLocaleConfig>;
+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;
+}
+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>;
+}
+
+/**
+ * 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.
+ */
+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>;
+}
+
 /**
  * Copyright (c) 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';
+
+declare abstract class SiLocaleStore {
+    abstract get locale(): string | undefined;
+    abstract saveLocale(locale: string): Observable<boolean>;
+}
+declare const SI_LOCALE_LOCAL_STORAGE_KEY = "lang";
+declare class SiDefaultLocaleStore extends SiLocaleStore {
+    private isBrowser;
+    constructor(isBrowser: boolean);
+    get locale(): string | undefined;
+    saveLocale(locale: string): Observable<boolean>;
+}
+
+/**
+ * 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)
+ *    ...
+ *
+ * ```
+ */
+declare class SiDirectionality implements Directionality {
+    readonly change: EventEmitter<Direction>;
+    /** @defaultValue 'ltr' */
+    readonly valueSignal: i0.WritableSignal<Direction>;
+    get value(): Direction;
+    /** @internal */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiDirectionality, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiDirectionality>;
+}
+
+export { SI_LOCALE_CONFIG, SI_LOCALE_LOCAL_STORAGE_KEY, SI_LOCALE_STORE, SiDefaultLocaleStore, SiDirectionality, SiLocaleId, SiLocaleService, SiLocaleStore };
+export type { SiLocaleConfig };

package/main-detail-container/index.d.ts

@@ -1,6 +1,161 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-export * from './si-main-detail-container.component';
-export * from './si-main-detail-container.module';
+import * as _siemens_element_translate_ng_translate_types from '@siemens/element-translate-ng/translate-types';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+
+declare class SiMainDetailContainerComponent implements OnInit, OnChanges, OnDestroy {
+    private animationDuration;
+    private resizeSubs?;
+    private elementRef;
+    private resizeObserver;
+    private changeDetectorRef;
+    /**
+     * A numeric value defining the minimum width in px, which the container 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 largeLayoutBreakpoint: _angular_core.InputSignal<number>;
+    /**
+     * Whether the main-detail layout component has a large size or not,
+     * `true` if the container´s width matches or exceeds the `largeLayoutBreakpoint`.
+     */
+    hasLargeSize: boolean;
+    /**
+     * Emits whether the components size is large enough to display
+     * main and details views next to each other or not.
+     */
+    readonly hasLargeSizeChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Whether the details are currently active or not, mostly relevant in the
+     * responsive scenario when the viewport only shows either the main or the detail.
+     *
+     * @defaultValue false
+     */
+    readonly detailsActive: _angular_core.ModelSignal<boolean>;
+    /**
+     * The heading of the main-detail layout component, usually a page heading.
+     *
+     * @defaultValue ''
+     */
+    readonly heading: _angular_core.InputSignal<string>;
+    /**
+     * Whether the heading should be truncated (single line) or not.
+     * Default value is `false`.
+     *
+     * @defaultValue false
+     */
+    readonly truncateHeading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The heading of the detail area.
+     *
+     * @defaultValue ''
+     */
+    readonly detailsHeading: _angular_core.InputSignal<string>;
+    /**
+     * Whether the main 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 resizableParts: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * 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: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Details back button text. Required for a11y.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_MAIN_DETAIL_CONTAINER.BACK:Back`)
+     * ```
+     */
+    readonly detailsBackButtonText: _angular_core.InputSignal<_siemens_element_translate_ng_translate_types.TranslatableString>;
+    /**
+     * CSS class(es) applied to the outermost container. Per default, Bootstrap classes
+     * to handle responsive paddings are applied: `px-6 pt-6 px-md-9`.
+     *
+     * @defaultValue 'px-6 pt-6 px-md-9'
+     */
+    readonly containerClass: _angular_core.InputSignal<string>;
+    /**
+     * CSS class(es) applied to the main container. In combination with `containerClass`,
+     * this allows for settings individual padding and margin values on the individual containers.
+     *
+     * @defaultValue 'pb-6'
+     */
+    readonly mainContainerClass: _angular_core.InputSignal<string>;
+    /**
+     * CSS class(es) applied to the detail container. In combination with `containerClass`,
+     * this allows for settings individual padding and margin values on the individual containers.
+     *
+     * @defaultValue 'pb-6'
+     */
+    readonly detailContainerClass: _angular_core.InputSignal<string>;
+    /**
+     * The percentage width of the main container from the overall component width.
+     * Can be a number or `'default'`, which is 32% when {@link resizableParts} is active, otherwise 50%.
+     *
+     * @defaultValue 'default'
+     */
+    readonly mainContainerWidth: _angular_core.ModelSignal<number | "default">;
+    /**
+     * Sets the minimal width of the main container in pixel.
+     *
+     * @defaultValue 300
+     */
+    readonly minMainSize: _angular_core.InputSignal<number>;
+    /**
+     * Sets the minimal width of the detail container in pixel.
+     *
+     * @defaultValue 300
+     */
+    readonly minDetailSize: _angular_core.InputSignal<number>;
+    /**
+     * An optional stateId to uniquely identify a component instance.
+     * Required for persistence of ui state.
+     */
+    readonly stateId: _angular_core.InputSignal<string | undefined>;
+    /**
+     * The attribute is set to true when the detail area is not visible to ensure that the user
+     * can't tab to details area when it is hidden.
+     */
+    protected preventFocusDetails: boolean;
+    private readonly actualMainContainerWidth;
+    protected splitSizes: [number, number];
+    protected maxMainSize: string;
+    protected maxDetailSize: string;
+    protected readonly mainStateId: _angular_core.Signal<string | undefined>;
+    protected readonly detailStateId: _angular_core.Signal<string | undefined>;
+    protected animate: boolean;
+    protected opacity: string;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected onSplitSizesChange(sizes: number[]): void;
+    protected detailsBackClicked(): void;
+    /**
+     * Get the max size to limit in the static flex layout (if less than 50%), otherwise not set
+     */
+    private getMaxSize;
+    private determineLayout;
+    private doAnimation;
+    private updateDetailsFocusable;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiMainDetailContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiMainDetailContainerComponent, "si-main-detail-container", never, { "largeLayoutBreakpoint": { "alias": "largeLayoutBreakpoint"; "required": false; "isSignal": true; }; "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "truncateHeading": { "alias": "truncateHeading"; "required": false; "isSignal": true; }; "detailsHeading": { "alias": "detailsHeading"; "required": false; "isSignal": true; }; "resizableParts": { "alias": "resizableParts"; "required": false; "isSignal": true; }; "hideBackButton": { "alias": "hideBackButton"; "required": false; "isSignal": true; }; "detailsBackButtonText": { "alias": "detailsBackButtonText"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "mainContainerClass": { "alias": "mainContainerClass"; "required": false; "isSignal": true; }; "detailContainerClass": { "alias": "detailContainerClass"; "required": false; "isSignal": true; }; "mainContainerWidth": { "alias": "mainContainerWidth"; "required": false; "isSignal": true; }; "minMainSize": { "alias": "minMainSize"; "required": false; "isSignal": true; }; "minDetailSize": { "alias": "minDetailSize"; "required": false; "isSignal": true; }; "stateId": { "alias": "stateId"; "required": false; "isSignal": true; }; }, { "hasLargeSizeChange": "hasLargeSizeChange"; "detailsActive": "detailsActiveChange"; "mainContainerWidth": "mainContainerWidthChange"; }, never, ["[slot=mainSearch]", "[slot=mainActions]", "[slot=mainData]", "[slot=detailActions]", "[slot=details]"], true, never>;
+}
+
+declare class SiMainDetailContainerModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiMainDetailContainerModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SiMainDetailContainerModule, never, [typeof SiMainDetailContainerComponent], [typeof SiMainDetailContainerComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiMainDetailContainerModule>;
+}
+
+export { SiMainDetailContainerComponent, SiMainDetailContainerModule };