@siemens/element-ng 47.2.0 → 47.3.0

package/form/form-fieldset/si-form-fieldset.component.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { DoCheck } from '@angular/core';
+import { SiFormItemComponent } from '../si-form-item/si-form-item.component';
+import * as i0 from "@angular/core";
+export declare class SiFormFieldsetComponent implements DoCheck {
+    private static labelIdCounter;
+    /** The label for the entire fieldset. */
+    readonly label: import("@angular/core").InputSignal<string>;
+    /** Overrides the parent label width. */
+    readonly labelWidth: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Adds a required marker to the label
+     *
+     * @defaultValue false
+     */
+    readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Switches all child inputs to inline mode
+     *
+     * @defaultValue false
+     */
+    readonly inline: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    private readonly formItems;
+    /** @internal */
+    readonly hasOnlyRadios: import("@angular/core").Signal<boolean>;
+    protected readonly errors: import("@angular/core").Signal<import("../si-form-item/si-form-item.component").SiFormError[]>;
+    protected readonly touched: import("@angular/core").WritableSignal<boolean>;
+    protected readonly isRequired: import("@angular/core").Signal<boolean>;
+    protected labelId: string;
+    ngDoCheck(): void;
+    /** @internal */
+    registerFormItem(item: SiFormItemComponent): void;
+    /** @internal */
+    unregisterFormItem(item: SiFormItemComponent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormFieldsetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiFormFieldsetComponent, "si-form-fieldset", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/form/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-form-container/si-form-container.component';
+export * from './si-form-item/si-form-item.component';
+export * from './si-form-validation-tooltip/si-form-validation-tooltip.directive';
+export * from './form-fieldset/si-form-fieldset.component';
+export * from './si-form-item-control-input.directive';
+export * from './si-form.module';
+export * from './si-form-item-control-input.directive';
+export * from './si-form-item.control';
+export * from './si-form-validation-error.provider';
+export * from './si-form-validation-error.model';

package/form/package.json

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

package/form/si-form-container/si-form-container.component.d.ts

@@ -0,0 +1,155 @@
+import { AbstractControl, FormGroup } from '@angular/forms';
+import { Breakpoints } from '@siemens/element-ng/resize-observer';
+import { SiFormValidationErrorMapper } from '../si-form-validation-error.model';
+import * as i0 from "@angular/core";
+export interface SiFormValidationError {
+    controlName?: string;
+    controlNameTranslationKey?: string;
+    errorCode: string;
+    errorCodeTranslationKey?: string;
+    errorParams?: any;
+}
+export declare class SiFormContainerComponent<TControl extends {
+    [K in keyof TControl]: AbstractControl;
+}> {
+    /**
+     * Set the form entity to the container to enable the overall form validation on in
+     * the form container edit panel.
+     */
+    readonly form: import("@angular/core").InputSignal<FormGroup<TControl> | undefined>;
+    /**
+     * A form container in readonly mode is only displaying the form content without ability
+     * to change it. The edit panel with typically save and cancel buttons is hidden. Set
+     * to true to display the edit panel.
+     *
+     * @defaultValue false
+     */
+    readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The container hosts the form within a siResizeContainer to configure the breakpoint for
+     * different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints
+     * input.
+     */
+    readonly contentContainerBreakpoints: import("@angular/core").InputSignal<Breakpoints | undefined>;
+    /**
+     * In some scenarios, one may not want the form container to be responsible for the layout relevant
+     * `si-container-[xs|...]` classes, but let this be done by a different, nested component, e.g. by a
+     * group box. In these cases, the property should be set to true.
+     *
+     * @defaultValue false
+     */
+    readonly disableContainerBreakpoints: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Every validation error has an errorCode. This map holds translate keys for error codes. The keys can
+     * be used to display a translated message for each validation error. The defaults old english readable
+     * key defaults for the Angular standard validators of the `Validators` class like `min`, `max` or `required`.
+     *
+     * Use the input to set your own translate keys for the form validators you need.
+     */
+    readonly errorCodeTranslateKeyMap: import("@angular/core").InputSignal<SiFormValidationErrorMapper | Map<string, string> | undefined>;
+    /**
+     * A map the maps from control names of the form to their translate keys.
+     * The initial map is empty and the user is responsible to add the required
+     * translate keys.
+     *
+     * @defaultValue
+     * ```
+     * new Map<string, string>()
+     * ```
+     */
+    readonly controlNameTranslateKeyMap: import("@angular/core").InputSignal<Map<string, string>>;
+    /**
+     * Disables the automatic error printing in all nested {@link SiFormItemComponent}. Error printing will be enabled by default in v46.
+     *
+     * @defaultValue false
+     */
+    readonly disableErrorPrinting: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * A custom width value to be applied to all labels.
+     *
+     * @example labelWidth="100px".
+     */
+    readonly labelWidth: import("@angular/core").InputSignal<string | undefined>;
+    protected hasParentContainer: boolean;
+    private errorResolver;
+    /** @internal */
+    readonly formErrorMapper: import("@angular/core").Signal<{
+        [x: string]: string | ((error: any) => string) | undefined;
+        required?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            required: boolean;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        requiredTrue?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            required: boolean;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        email?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            email: boolean;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        min?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            min: number;
+            actual: number;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        max?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            max: number;
+            actual: number;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        minLength?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            requiredLength: number;
+            actualLength: number;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        maxLength?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            requiredLength: number;
+            actualLength: number;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        pattern?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            pattern: string | RegExp;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        numberFormat?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            numberFormat: boolean;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        dateFormat?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            format: string;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        maxDate?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            max: Date;
+            actual: Date;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+        minDate?: import("@siemens/element-translate-ng/translate").TranslatableString | ((error: {
+            min: Date;
+            actual: Date;
+        }) => import("@siemens/element-translate-ng/translate").TranslatableString);
+    }>;
+    /**
+     * Indicates whether the user interacted with the form.
+     * @returns `true`, if the user selected at least one form element and
+     * [blurred]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event} by losing focus again
+     * (e.g. by setting focus on another element), or by editing the content of a form element.
+     * Otherwise `false`.
+     */
+    get userInteractedWithForm(): boolean;
+    /**
+     * Indicates whether content editor message shall be styled as success.
+     * @returns `true`, if {@link SiFormContainerComponent.userInteractedWithForm} is true and
+     * the form is valid.
+     */
+    get validFormContainerMessage(): boolean;
+    /**
+     * Indicates whether the content editor message shall be styled as warning.
+     * @returns `true`, if {@link SiFormContainerComponent.userInteractedWithForm} is true and
+     * the form is invalid.
+     */
+    get invalidFormContainerMessage(): boolean;
+    /**
+     * Returns the validation errors of the form's control when the control name is provided. Otherwise,
+     * returns all validation errors of the form. Returns an empty arry when no form is available or if
+     * the name does not match to a control.
+     * @param controlName - An optional name of a control that is part of the form.
+     *
+     * @deprecated The {@link SiFormItemComponent} is able to display validation errors automatically when `siFormInput` directive is used.
+     */
+    getValidationErrors(controlName?: string): SiFormValidationError[];
+    protected getControlNameTranslateKey(controlName: string): string | undefined;
+    private getFormValidationErrorsPrivate;
+    private getFormGroupErrors;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormContainerComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiFormContainerComponent<any>, "si-form-container", never, { "form": { "alias": "form"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "contentContainerBreakpoints": { "alias": "contentContainerBreakpoints"; "required": false; "isSignal": true; }; "disableContainerBreakpoints": { "alias": "disableContainerBreakpoints"; "required": false; "isSignal": true; }; "errorCodeTranslateKeyMap": { "alias": "errorCodeTranslateKeyMap"; "required": false; "isSignal": true; }; "controlNameTranslateKeyMap": { "alias": "controlNameTranslateKeyMap"; "required": false; "isSignal": true; }; "disableErrorPrinting": { "alias": "disableErrorPrinting"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[si-form-container-message]", "[si-form-container-buttons]", "[si-form-container-content]"], true, never>;
+}

package/form/si-form-item/si-form-field-native.control.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { ElementRef } from '@angular/core';
+import { SiFormItemControl } from '../si-form-item.control';
+/**
+ * This will be used by the `si-form-item` to create a form item control if none is provided.
+ * This is typically the case for native form controls like `input`, `textarea` and `select`.
+ * It allows accessing the control's id and type.
+ */
+export declare class SiFormFieldNativeControl implements SiFormItemControl {
+    private readonly element;
+    private static idCounter;
+    private static readonly supportedTypes;
+    static createForElementRef(element: ElementRef<HTMLElement> | undefined): SiFormFieldNativeControl | undefined;
+    private constructor();
+    isFormCheck: boolean;
+    get id(): string;
+    set id(value: string);
+    readonly errormessageId: string;
+}

package/form/si-form-item/si-form-item.component.d.ts

@@ -0,0 +1,90 @@
+import { AfterContentChecked, AfterContentInit, AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { NgControl, RequiredValidator } from '@angular/forms';
+import { SiFormFieldsetComponent } from '../form-fieldset/si-form-fieldset.component';
+import { SiFormContainerComponent } from '../si-form-container/si-form-container.component';
+import { SiFormItemControl } from '../si-form-item.control';
+import { SiFormValidationErrorMapper } from '../si-form-validation-error.model';
+import * as i0 from "@angular/core";
+/** @internal */
+export interface SiFormError {
+    key: string;
+    message?: string;
+    params: any;
+}
+export declare class SiFormItemComponent implements AfterContentInit, AfterViewInit, AfterContentChecked, OnChanges, OnInit, OnDestroy {
+    /** @deprecated property has longer an effect. SiFormItem detects IDs automatically  */
+    inputId?: string;
+    /**
+     * The label to be displayed in the form item.
+     * It will be translated if a translation key is available.
+     */
+    readonly label: import("@angular/core").InputSignal<string | null | undefined>;
+    /**
+     * A custom width value to be applied to the label.
+     * A value of 0 is allowed as well to visually hide away the label area.
+     *
+     * Numbers will be converted to pixels.
+     * Using numbers is discouraged and might be dropped.
+     *
+     * @example labelWidth="100px"
+     */
+    readonly labelWidth: import("@angular/core").InputSignal<string | number | undefined>;
+    /**
+     * @deprecated This input has no effect and can be removed.
+     *
+     * @defaultValue false
+     */
+    readonly: boolean;
+    /**
+     * Disables the automatic error printing. Error printing will be enabled by default in v46.
+     *
+     * @defaultValue false
+     */
+    readonly disableErrorPrinting: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly formErrorMapper: import("@angular/core").InputSignal<SiFormValidationErrorMapper | undefined>;
+    /**
+     * Defines that this form item is required for the overall form to be valid.
+     *
+     * @defaultValue false
+     */
+    readonly requiredInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    protected readonly fieldControlQuery: import("@angular/core").Signal<SiFormItemControl | undefined>;
+    /** @internal */
+    readonly ngControl: import("@angular/core").Signal<NgControl | undefined>;
+    protected readonly controlElementRef: import("@angular/core").Signal<ElementRef<HTMLElement> | undefined>;
+    protected readonly requiredValidator: import("@angular/core").Signal<RequiredValidator | undefined>;
+    /** @internal */
+    readonly errors: import("@angular/core").WritableSignal<SiFormError[]>;
+    /** @deprecated Remove with v48 */
+    protected readonly isLegacyMode: import("@angular/core").WritableSignal<boolean>;
+    protected fieldset: SiFormFieldsetComponent | null;
+    protected container: SiFormContainerComponent<{
+        [x: string]: import("@angular/forms").AbstractControl<any, any>;
+    }> | null;
+    protected get formItemId(): string | null;
+    protected get formItemLabelledBy(): string | null;
+    protected get formItemErrormessageId(): string | null;
+    protected readonly fieldControl: import("@angular/core").Signal<SiFormItemControl | undefined>;
+    private elementRef;
+    private validationErrorService;
+    private requiredTestControl;
+    private validator?;
+    private previousErrors?;
+    private readonly hasRequiredValidator;
+    private readonly fieldControlNative;
+    protected readonly labelWidthCssVar: import("@angular/core").Signal<string | undefined>;
+    protected readonly printErrors: import("@angular/core").Signal<boolean>;
+    /** @internal */
+    readonly required: import("@angular/core").Signal<boolean>;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private updateRequiredState;
+    private updateValidationMessages;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiFormItemComponent, "si-form-item", never, { "inputId": { "alias": "inputId"; "required": false; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; }; "disableErrorPrinting": { "alias": "disableErrorPrinting"; "required": false; "isSignal": true; }; "formErrorMapper": { "alias": "formErrorMapper"; "required": false; "isSignal": true; }; "requiredInput": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, ["fieldControlQuery", "ngControl", "controlElementRef", "requiredValidator"], ["input[type='checkbox'], input[type='radio']", "*"], true, never>;
+    static ngAcceptInputType_readonly: unknown;
+}

package/form/si-form-item-control-input.directive.d.ts

@@ -0,0 +1,18 @@
+import { SiFormItemControl } from './si-form-item.control';
+import * as i0 from "@angular/core";
+/** @deprecated This directive is no longer needed. {@link SiFormItemComponent} will detect native controls automatically. */
+export declare class SiFormItemControlInputDirective implements SiFormItemControl {
+    private static idCounter;
+    id: string;
+    set type(value: string);
+    protected formControlClass: string;
+    /**
+     * Indicate the form item is a checkbox or radio input.
+     * @defaultValue false
+     */
+    isFormCheck: boolean;
+    /** @internal */
+    readonly errormessageId: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormItemControlInputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiFormItemControlInputDirective, "[siFormItemControl]", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>;
+}

package/form/si-form-item.control.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { InjectionToken, Signal } from '@angular/core';
+export declare const SI_FORM_ITEM_CONTROL: InjectionToken<SiFormItemControl>;
+/**
+ * Common interface for form item controls.
+ * Controls that should be connected to {@link SiFormItemComponent} must implement this interface
+ * and must be provided using the {@link SI_FORM_ITEM_CONTROL} token.
+ */
+export interface SiFormItemControl {
+    /** The actual id of the control that should be used in the `for` attribute of a label. */
+    readonly id?: string | Signal<string | undefined>;
+    /**
+     * ID that should be assigned to the label element inside the {@link SiFormItemComponent}.
+     *
+     * If the target control is not of type <i>input</i>, <i>select</i> or <i>button</i>, it cannot be referenced by a label.
+     * Instead, aria-labelledby must be used to create a reference to a label.
+     * In such a case, an implementation of {@link SiFormItemControl} must provide the id of the label in {@link labelledby}.
+     * {@link SiFormItemComponent} will apply the id to the label
+     * so that it can be used inside the control to reference it in the aria-labelledby attribute.
+     */
+    readonly labelledby?: string | Signal<string | undefined> | null;
+    /**
+     * Generated ID that the {@link SiFormItemComponent} will assign to the element containing the error messages.
+     * Implementations of {@link SiFormItemControl} must generate this ID
+     * and assign it to the `aria-describedby` attribute of their focusable elements.
+     *
+     * This property will be required with v48.
+     */
+    readonly errormessageId?: string | Signal<string | undefined>;
+    /** If the control is meant to be used a checkbox. This affects the label positioning. */
+    readonly isFormCheck?: boolean;
+}

package/form/si-form-validation-error.model.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { TranslatableString } from '@siemens/element-translate-ng/translate';
+/**
+ * Interface for form error mapper.
+ * It resolves a key to either a translatable string or function
+ * which is called with the validation error for its key and should return a translatable string.
+ */
+export interface SiFormValidationErrorMapper {
+    required?: TranslatableString | ((error: {
+        required: boolean;
+    }) => TranslatableString);
+    requiredTrue?: TranslatableString | ((error: {
+        required: boolean;
+    }) => TranslatableString);
+    email?: TranslatableString | ((error: {
+        email: boolean;
+    }) => TranslatableString);
+    min?: TranslatableString | ((error: {
+        min: number;
+        actual: number;
+    }) => TranslatableString);
+    max?: TranslatableString | ((error: {
+        max: number;
+        actual: number;
+    }) => TranslatableString);
+    minLength?: TranslatableString | ((error: {
+        requiredLength: number;
+        actualLength: number;
+    }) => TranslatableString);
+    maxLength?: TranslatableString | ((error: {
+        requiredLength: number;
+        actualLength: number;
+    }) => TranslatableString);
+    pattern?: TranslatableString | ((error: {
+        pattern: string | RegExp;
+    }) => TranslatableString);
+    numberFormat?: TranslatableString | ((error: {
+        numberFormat: boolean;
+    }) => TranslatableString);
+    dateFormat?: TranslatableString | ((error: {
+        format: string;
+    }) => TranslatableString);
+    maxDate?: TranslatableString | ((error: {
+        max: Date;
+        actual: Date;
+    }) => TranslatableString);
+    minDate?: TranslatableString | ((error: {
+        min: Date;
+        actual: Date;
+    }) => TranslatableString);
+    [key: string]: undefined | string | ((error: any) => string);
+}

package/form/si-form-validation-error.provider.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { Provider } from '@angular/core';
+import { SiFormValidationErrorMapper } from './si-form-validation-error.model';
+/**
+ * The error mapper is used to resolve an angular validation error to a {@link TranslatableString}.
+ * It will be merged with already existing error mappers.
+ */
+export declare const provideFormValidationErrorMapper: (mapper: SiFormValidationErrorMapper) => Provider;

package/form/si-form-validation-error.service.d.ts

@@ -0,0 +1,42 @@
+import { ValidationErrors } from '@angular/forms';
+import { SiFormError } from './si-form-item/si-form-item.component';
+import { SiFormValidationErrorMapper } from './si-form-validation-error.model';
+import * as i0 from "@angular/core";
+/**
+ * Creates the map of default error resolver.
+ * This is a function as $localize requires an injection context.
+ *
+ * @internal
+ */
+export declare const buildDefaults: () => SiFormValidationErrorMapper;
+/**
+ * A service to resolve the validation error of an Angular control to a message or translation key.
+ *
+ * It can be provided using {@link provideFormValidationErrorMapper}.
+ * If not provided, there will be a default instance in the root injector using only the default keys.
+ *
+ * There can be multiple instances to support providing in a lazy loaded module.
+ * If the service cannot find a message, it will try to resolve it using a parent service if available.
+ *
+ * @internal
+ */
+export declare class SiFormValidationErrorService {
+    private errorMapper;
+    private readonly parent;
+    constructor(errorMapper: SiFormValidationErrorMapper);
+    /**
+     * Resolves the provided form errors to a list of {@link SiFormError}.
+     * To resolution order is:
+     * 1. componentMapper
+     * 2. containerMapper using the controlName
+     * 3. containerMapper without controlName
+     * 4. errorMapper of the service using the controlName
+     * 5. errorMapper of the service
+     * 6: parent service
+     */
+    resolveErrors(controlName: string | number | null | undefined, errors: ValidationErrors | null, componentMapper?: SiFormValidationErrorMapper, containerMapper?: SiFormValidationErrorMapper): SiFormError[];
+    private resolveError;
+    private resolveMessage;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormValidationErrorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SiFormValidationErrorService>;
+}

package/form/si-form-validation-tooltip/si-form-validation-tooltip.component.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { InjectionToken, Signal } from '@angular/core';
+import { SiFormError } from '../si-form-item/si-form-item.component';
+import * as i0 from "@angular/core";
+export declare const SI_FORM_VALIDATION_TOOLTIP_DATA: InjectionToken<Signal<SiFormError[]>>;
+export declare class SiFormValidationTooltipComponent {
+    protected errors: Signal<SiFormError[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormValidationTooltipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiFormValidationTooltipComponent, "si-form-validation-tooltip", never, {}, {}, never, never, true, never>;
+}

package/form/si-form-validation-tooltip/si-form-validation-tooltip.directive.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { DoCheck, OnDestroy } from '@angular/core';
+import { SiFormValidationErrorMapper } from '../si-form-validation-error.model';
+import * as i0 from "@angular/core";
+/**
+ * Directive to show a tooltip with validation errors of a form control.
+ *
+ * In general, `si-form-item` should be used.
+ * This directive is intended only for cases where the tooltip cannot be shown inline.
+ * This is typically the case for tables and lists where the validation message would break the layout.
+ *
+ * @example
+ * ```html
+ * <input siFormValidationTooltip [formControl]="control" />
+ * ```
+ */
+export declare class SiFormValidationTooltipDirective implements OnDestroy, DoCheck {
+    private static idCounter;
+    private tooltipService;
+    private formValidationService;
+    private formContainer;
+    readonly formErrorMapper: import("@angular/core").InputSignal<SiFormValidationErrorMapper | undefined>;
+    private ngControl;
+    private elementRef;
+    private tooltipRef?;
+    private readonly errors;
+    private currentErrors;
+    private touched;
+    private activationCount;
+    protected readonly describedBy: string;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    protected increaseActivation(): void;
+    private updateErrors;
+    protected decreaseActivation(): void;
+    private destroyTooltip;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormValidationTooltipDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SiFormValidationTooltipDirective, "[siFormValidationTooltip]", never, { "formErrorMapper": { "alias": "formErrorMapper"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/form/si-form.module.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+import { ModuleWithProviders } from '@angular/core';
+import { SiFormValidationErrorMapper } from './si-form-validation-error.model';
+import * as i0 from "@angular/core";
+import * as i1 from "./si-form-container/si-form-container.component";
+import * as i2 from "./form-fieldset/si-form-fieldset.component";
+import * as i3 from "./si-form-item/si-form-item.component";
+import * as i4 from "./si-form-item-control-input.directive";
+export declare class SiFormModule {
+    /**
+     * Overrides the default configuration of the form module.
+     *
+     * @param errorMapper - The error mappers is used to resolve angular validation errors.
+     * It will be merged with already existing error mappers.
+     */
+    static withConfiguration({ validationErrorMapper }: {
+        validationErrorMapper: SiFormValidationErrorMapper;
+    }): ModuleWithProviders<SiFormModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiFormModule, never, [typeof i1.SiFormContainerComponent, typeof i2.SiFormFieldsetComponent, typeof i3.SiFormItemComponent, typeof i4.SiFormItemControlInputDirective], [typeof i1.SiFormContainerComponent, typeof i2.SiFormFieldsetComponent, typeof i3.SiFormItemComponent, typeof i4.SiFormItemControlInputDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiFormModule>;
+}

package/icon/element-icons.d.ts

@@ -10,8 +10,10 @@ export declare const elementExport = "data:image/svg+xml;utf8,<svg xmlns='http:/
 export declare const elementThumbnails = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><circle cx='144' cy='144' r='24'/><circle cx='368' cy='144' r='24'/><circle cx='256' cy='144' r='24'/><circle cx='144' cy='368' r='24'/><circle cx='368' cy='368' r='24'/><circle cx='256' cy='368' r='24'/><circle cx='144' cy='256' r='24'/><circle cx='368' cy='256' r='24'/><circle cx='256' cy='256' r='24'/></svg>";
 export declare const elementOptionsVertical = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M284 256a28 28 0 1 1-28-28 28 28 0 0 1 28 28ZM284 144a28 28 0 1 1-28-28 28 28 0 0 1 28 28ZM284 368a28 28 0 1 1-28-28 28 28 0 0 1 28 28Z'/></svg>";
 export declare const elementMenu = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M400 244H112a12 12 0 0 0 0 24h288a12 12 0 0 0 0-24ZM400 148H112a12 12 0 0 0 0 24h288a12 12 0 0 0 0-24ZM400 340H112a12 12 0 0 0 0 24h288a12 12 0 0 0 0-24Z'/></svg>";
+export declare const elementMinus = "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M356 268H156a12 12 0 0 1 0-24h200a12 12 0 0 1 0 24Z'/></svg>";
 export declare const elementCircleFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 64C150.13 64 64 150.13 64 256s86.13 192 192 192 192-86.13 192-192S361.87 64 256 64Z'/></svg>";
 export declare const elementOctagonFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M320.2 77H191.8a24 24 0 0 0-17 7L84 174.83a24 24 0 0 0-7 17V320.2a24 24 0 0 0 7 17l90.8 90.8a24 24 0 0 0 17 7h128.4a24 24 0 0 0 17-7l90.8-90.8a24 24 0 0 0 7-17V191.8a24 24 0 0 0-7-17L337.17 84a24 24 0 0 0-16.97-7Z'/></svg>";
+export declare const elementPlus = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M356 244h-88v-88a12 12 0 0 0-24 0v88h-88a12 12 0 0 0 0 24h88v88a12 12 0 0 0 24 0v-88h88a12 12 0 0 0 0-24Z'/></svg>";
 export declare const elementSquare45Filled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='113.17' y='113.17' width='285.65' height='285.65' rx='24' transform='rotate(-45 256 256.002)'/></svg>";
 export declare const elementSquareFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='88' y='88' width='336' height='336' rx='48'/></svg>";
 export declare const elementStateExclamationMark = "data:image/svg+xml;utf8,<svg id='Icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><defs><style>.cls-1{stroke-width:0}</style></defs><path class='cls-1' d='M256 279.12c-11.05 0-20-8.95-20-20v-89.8c0-11.05 8.95-20 20-20s20 8.95 20 20v89.8c0 11.05-8.95 20-20 20ZM256.17 359.03h-.34c-13.16 0-23.83-10.75-23.83-24s10.67-24 23.83-24h.34c13.16 0 23.83 10.75 23.83 24s-10.67 24-23.83 24Z'/></svg>";
@@ -28,3 +30,11 @@ export declare const elementLeft3 = "data:image/svg+xml;utf8,<svg xmlns='http://
 export declare const elementRight3 = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M192.61 106.22a11.1 11.1 0 0 0 2.09 6.51L292.51 256l-97.82 143.29a11.05 11.05 0 0 0-2.08 6.49 11.24 11.24 0 0 0 4.7 9.13 11.12 11.12 0 0 0 6.51 2.09 11.24 11.24 0 0 0 9.13-4.69L319.39 256 213 99.71a11.24 11.24 0 0 0-9.18-4.71 11.12 11.12 0 0 0-6.51 2.09 11.24 11.24 0 0 0-4.7 9.13Z'/></svg>";
 export declare const elementHide = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M254.85 173.58c42.57 0 84.25 14.94 123.9 44.4a278.05 278.05 0 0 1 41.59 38 278.05 278.05 0 0 1-41.59 38 260.79 260.79 0 0 1-25.17 16.59l17.48 17.48q11.49-7 22.63-15.27c32.57-24.34 51.1-48.55 51.87-49.57a12 12 0 0 0 0-14.5c-.77-1-19.3-25.23-51.87-49.57-43.43-32.45-91.44-49.6-138.84-49.6a204.56 204.56 0 0 0-54.72 7.58L220 177a180.12 180.12 0 0 1 34.85-3.42ZM436.49 427.51 349 340l-18-18-28.36-28.36-17.12-17.12-50.09-50.09-17.12-17.12-25-25-18.47-18.47-90.35-90.33a12 12 0 0 0-17 17l84.29 84.28a267.53 267.53 0 0 0-34.72 22.47c-32 24.38-50 48.64-50.75 49.66a12 12 0 0 0 0 14.2c.75 1 18.72 25.28 50.75 49.66 42.69 32.49 90.33 49.66 137.77 49.66a210.29 210.29 0 0 0 70.2-12.4l94.46 94.47a12 12 0 0 0 17-17Zm-215.15-181.2 44.35 44.35a36 36 0 0 1-44.35-44.35Zm33.51 92.11c-42.52 0-83.79-14.91-122.65-44.32A268.8 268.8 0 0 1 91.46 256a268.29 268.29 0 0 1 40.74-38.1 242.38 242.38 0 0 1 37.32-23.41L203 228a59.95 59.95 0 0 0 81 81l22 22.05a183.47 183.47 0 0 1-51.15 7.37Z'/><path d='m291.13 248.16 22.94 22.94a60 60 0 0 0-73.17-73.17l22.94 22.94a36.1 36.1 0 0 1 27.29 27.29Z'/></svg>";
 export declare const elementShow = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M254.85 362.42c-47.44 0-95.08-17.17-137.77-49.66-32-24.38-50-48.64-50.75-49.66a12 12 0 0 1 0-14.2c.75-1 18.72-25.28 50.75-49.66 42.69-32.49 90.33-49.66 137.77-49.66s95.41 17.15 138.84 49.6c32.57 24.34 51.1 48.55 51.87 49.57a12 12 0 0 1 0 14.5c-.77 1-19.3 25.23-51.87 49.57-43.43 32.45-91.44 49.6-138.84 49.6ZM91.46 256a268.8 268.8 0 0 0 40.74 38.1c38.86 29.41 80.13 44.32 122.65 44.32s84.25-14.94 123.9-44.4a278.05 278.05 0 0 0 41.59-38 278.05 278.05 0 0 0-41.59-38c-39.65-29.46-81.33-44.4-123.9-44.4s-83.79 14.87-122.65 44.28A268.29 268.29 0 0 0 91.46 256Z'/><path d='M256 316a60 60 0 1 1 60-60 60.07 60.07 0 0 1-60 60Zm0-96a36 36 0 1 0 36 36 36 36 0 0 0-36-36Z'/></svg>";
+export declare const elementSearch = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='m420.49 403.51-76.88-76.87A139.39 139.39 0 0 0 377 236c0-77.2-62.8-140-140-140S97 158.8 97 236s62.8 140 140 140a139.33 139.33 0 0 0 89.55-32.48l77 77a12 12 0 0 0 17-17ZM121 236a116 116 0 1 1 116 116 116.13 116.13 0 0 1-116-116Z' /></svg>";
+export declare const elementChecked = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 76c-99.25 0-180 80.75-180 180s80.75 180 180 180 180-80.75 180-180S355.25 76 256 76Zm0 336c-86 0-156-70-156-156s70-156 156-156 156 70 156 156-70 156-156 156Z'/><path d='M218.5 336.75a12 12 0 0 1-8.49-3.51l-62.5-62.5a12 12 0 0 1 17-17l54 54 129-129a12 12 0 0 1 17 17L227 333.24a12 12 0 0 1-8.5 3.51Z'/></svg>";
+export declare const elementCheckedFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 76c-99.25 0-180 80.75-180 180s80.75 180 180 180 180-80.75 180-180S355.25 76 256 76Zm108.49 119.74L227 333.24a12 12 0 0 1-17 0l-62.5-62.5a12 12 0 0 1 17-17l54 54 129-129a12 12 0 0 1 17 17Z'/></svg>";
+export declare const elementLeft4 = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M391 244H150.09l78.51-78.51a12 12 0 1 0-17-17l-98.09 98.09a12 12 0 0 0 0 18.78l98.09 98.09a12 12 0 1 0 17-17L150.09 268H391a12 12 0 0 0 0-24Z'/></svg>";
+export declare const elementNotChecked = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 76c-99.25 0-180 80.75-180 180s80.75 180 180 180 180-80.75 180-180S355.25 76 256 76Zm0 336c-86 0-156-70-156-156s70-156 156-156 156 70 156 156-70 156-156 156Z'/></svg>";
+export declare const elementRight4 = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M403 256a12 12 0 0 0-4.54-9.39l-98.09-98.09a12 12 0 1 0-17 17L361.91 244H121a12 12 0 0 0 0 24h240.91l-78.51 78.51a12 12 0 1 0 17 17l98.09-98.09A12 12 0 0 0 403 256Z'/></svg>";
+export declare const elementRadioChecked = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 436c-99.25 0-180-80.75-180-180S156.75 76 256 76s180 80.75 180 180-80.75 180-180 180Zm0-336c-86.02 0-156 69.98-156 156s69.98 156 156 156 156-69.98 156-156-69.98-156-156-156Z'/><circle cx='256' cy='256' r='86'/></svg>";
+export declare const elementWarningFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='m441.77 354.25-.09-.16-146-243.66a46.45 46.45 0 0 0-79.44 0v.06L70.33 354.09l-.1.16A46.47 46.47 0 0 0 110 423.94h292.1a46.45 46.45 0 0 0 39.72-69.69ZM244 205.2a12 12 0 0 1 24 0v68.92a12 12 0 0 1-24 0ZM256.2 360h-.2a16 16 0 0 1 0-32h.22a16 16 0 0 1 0 32Z'/></svg>";

package/icon-status/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+export * from './si-icon-status.module';
+export * from './si-icon-status.component';

package/icon-status/package.json

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