@siemens/element-ng 49.14.0 → 51.0.0-rc.5

package/types/siemens-element-ng-file-uploader.d.ts

@@ -48,7 +48,7 @@ declare class SiFileUploadDirective {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`)
      * ```
      */
     readonly errorTextFileType: _angular_core.InputSignal<TranslatableString>;
@@ -57,7 +57,7 @@ declare class SiFileUploadDirective {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`)
      * ```
      */
     readonly errorTextFileMaxSize: _angular_core.InputSignal<TranslatableString>;
@@ -128,20 +128,11 @@ declare class SiFileUploadDirective {
 
 declare class SiFileDropzoneComponent {
     /**
-     * Text or translation key of the input file selector (is combined with the `uploadTextRest`).
+     * Text or translation key of the drag&drop field.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
-     * ```
-     */
-    readonly uploadTextFileSelect: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
-    /**
-     * Text or translation key of the drag&drop field (is combined with the `uploadTextFileSelect`).
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
      * ```
      */
     readonly uploadDropText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -150,7 +141,7 @@ declare class SiFileDropzoneComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Max. {{maxFileSize}} upload size.`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Upload max. {{maxFileSize}}`)
      * ```
      */
     readonly maxFileSizeText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -168,7 +159,7 @@ declare class SiFileDropzoneComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`)
      * ```
      */
     readonly errorTextFileType: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -177,7 +168,7 @@ declare class SiFileDropzoneComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`)
      * ```
      */
     readonly errorTextFileMaxSize: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -226,7 +217,7 @@ declare class SiFileDropzoneComponent {
      */
     reset(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFileDropzoneComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFileDropzoneComponent, "si-file-dropzone", never, { "uploadTextFileSelect": { "alias": "uploadTextFileSelect"; "required": false; "isSignal": true; }; "uploadDropText": { "alias": "uploadDropText"; "required": false; "isSignal": true; }; "maxFileSizeText": { "alias": "maxFileSizeText"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; "errorTextFileType": { "alias": "errorTextFileType"; "required": false; "isSignal": true; }; "errorTextFileMaxSize": { "alias": "errorTextFileMaxSize"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "directoryUpload": { "alias": "directoryUpload"; "required": false; "isSignal": true; }; }, { "filesAdded": "filesAdded"; "fileError": "fileError"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFileDropzoneComponent, "si-file-dropzone", never, { "uploadDropText": { "alias": "uploadDropText"; "required": false; "isSignal": true; }; "maxFileSizeText": { "alias": "maxFileSizeText"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; "errorTextFileType": { "alias": "errorTextFileType"; "required": false; "isSignal": true; }; "errorTextFileMaxSize": { "alias": "errorTextFileMaxSize"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "directoryUpload": { "alias": "directoryUpload"; "required": false; "isSignal": true; }; }, { "filesAdded": "filesAdded"; "fileError": "fileError"; }, never, never, true, never>;
 }
 
 /**
@@ -271,21 +262,12 @@ interface ExtUploadFile extends UploadFile {
     fadeOut?: boolean;
 }
 declare class SiFileUploaderComponent {
-    /**
-     * Text of the link to open the file select dialog (follows `uploadDropText`).
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
-     * ```
-     */
-    readonly uploadTextFileSelect: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     /**
      * Text instructing a user to drop the files inside the dropzone.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
      * ```
      */
     readonly uploadDropText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -294,7 +276,7 @@ declare class SiFileUploaderComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Max. {{maxFileSize}} upload size.`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Upload max. {{maxFileSize}}`)
      * ```
      */
     readonly maxFileSizeText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -390,7 +372,7 @@ declare class SiFileUploaderComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`)
      * ```
      */
     readonly errorTextFileType: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -399,7 +381,7 @@ declare class SiFileUploaderComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`)
      * ```
      */
     readonly errorTextFileMaxSize: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -516,7 +498,7 @@ declare class SiFileUploaderComponent {
     private updateStates;
     private countValid;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFileUploaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFileUploaderComponent, "si-file-uploader", never, { "uploadTextFileSelect": { "alias": "uploadTextFileSelect"; "required": false; "isSignal": true; }; "uploadDropText": { "alias": "uploadDropText"; "required": false; "isSignal": true; }; "maxFileSizeText": { "alias": "maxFileSizeText"; "required": false; "isSignal": true; }; "maxFilesReachedText": { "alias": "maxFilesReachedText"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; "uploadButtonText": { "alias": "uploadButtonText"; "required": false; "isSignal": true; }; "clearButtonText": { "alias": "clearButtonText"; "required": false; "isSignal": true; }; "uploadingText": { "alias": "uploadingText"; "required": false; "isSignal": true; }; "removeButtonText": { "alias": "removeButtonText"; "required": false; "isSignal": true; }; "cancelButtonText": { "alias": "cancelButtonText"; "required": false; "isSignal": true; }; "successTextTitle": { "alias": "successTextTitle"; "required": false; "isSignal": true; }; "errorUploadFailed": { "alias": "errorUploadFailed"; "required": false; "isSignal": true; }; "showHttpError": { "alias": "showHttpError"; "required": false; "isSignal": true; }; "errorTextFileType": { "alias": "errorTextFileType"; "required": false; "isSignal": true; }; "errorTextFileMaxSize": { "alias": "errorTextFileMaxSize"; "required": false; "isSignal": true; }; "uploadConfig": { "alias": "uploadConfig"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "maxConcurrentUploads": { "alias": "maxConcurrentUploads"; "required": false; "isSignal": true; }; "retries": { "alias": "retries"; "required": false; "isSignal": true; }; "autoUpload": { "alias": "autoUpload"; "required": false; "isSignal": true; }; "disableUpload": { "alias": "disableUpload"; "required": false; "isSignal": true; }; "directoryUpload": { "alias": "directoryUpload"; "required": false; "isSignal": true; }; }, { "uploadCanceled": "uploadCanceled"; "uploadCompleted": "uploadCompleted"; "filesChanges": "filesChanges"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFileUploaderComponent, "si-file-uploader", never, { "uploadDropText": { "alias": "uploadDropText"; "required": false; "isSignal": true; }; "maxFileSizeText": { "alias": "maxFileSizeText"; "required": false; "isSignal": true; }; "maxFilesReachedText": { "alias": "maxFilesReachedText"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; "uploadButtonText": { "alias": "uploadButtonText"; "required": false; "isSignal": true; }; "clearButtonText": { "alias": "clearButtonText"; "required": false; "isSignal": true; }; "uploadingText": { "alias": "uploadingText"; "required": false; "isSignal": true; }; "removeButtonText": { "alias": "removeButtonText"; "required": false; "isSignal": true; }; "cancelButtonText": { "alias": "cancelButtonText"; "required": false; "isSignal": true; }; "successTextTitle": { "alias": "successTextTitle"; "required": false; "isSignal": true; }; "errorUploadFailed": { "alias": "errorUploadFailed"; "required": false; "isSignal": true; }; "showHttpError": { "alias": "showHttpError"; "required": false; "isSignal": true; }; "errorTextFileType": { "alias": "errorTextFileType"; "required": false; "isSignal": true; }; "errorTextFileMaxSize": { "alias": "errorTextFileMaxSize"; "required": false; "isSignal": true; }; "uploadConfig": { "alias": "uploadConfig"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "maxConcurrentUploads": { "alias": "maxConcurrentUploads"; "required": false; "isSignal": true; }; "retries": { "alias": "retries"; "required": false; "isSignal": true; }; "autoUpload": { "alias": "autoUpload"; "required": false; "isSignal": true; }; "disableUpload": { "alias": "disableUpload"; "required": false; "isSignal": true; }; "directoryUpload": { "alias": "directoryUpload"; "required": false; "isSignal": true; }; }, { "uploadCanceled": "uploadCanceled"; "uploadCompleted": "uploadCompleted"; "filesChanges": "filesChanges"; }, never, never, true, never>;
 }
 
 declare class SiFileUploaderModule {

package/types/siemens-element-ng-filter-bar.d.ts

@@ -85,7 +85,7 @@ declare class SiFilterBarComponent {
      * Custom text for the collapsed filters.
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} filters`)
+     * t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} criteria`)
      * ```
      */
     readonly collapsedFiltersDescription: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;

package/types/siemens-element-ng-filtered-search.d.ts

@@ -61,7 +61,7 @@ interface CriterionDefinition {
     /**
      * Optional configuration object for the datepicker.
      */
-    datepickerConfig?: DatepickerInputConfig;
+    datepickerConfig?: Omit<DatepickerInputConfig, 'enableDateRange' | 'enableTwoMonthDateRange'>;
     /**
      * Limit criterion options to the predefined ones.
      */
@@ -261,7 +261,7 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILTERED_SEARCH.SEARCH:Search`)
+     * t(() => $localize`:@@SI_FILTERED_SEARCH.SEARCH:Search…`)
      * ```
      */
     readonly searchLabel: _angular_core.InputSignal<TranslatableString>;
@@ -279,7 +279,7 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`)
+     * t(() => $localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Apply search criteria`)
      * ```
      */
     readonly submitButtonLabel: _angular_core.InputSignal<TranslatableString>;
@@ -289,7 +289,7 @@ declare class SiFilteredSearchComponent implements OnInit, OnChanges {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} items`)
+     * t(() => $localize`:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} selected`)
      * ```
      */
     readonly itemCountText: _angular_core.InputSignal<TranslatableString>;

package/types/siemens-element-ng-form.d.ts

@@ -1,10 +1,12 @@
 import * as _angular_core from '@angular/core';
-import { DoCheck, InjectionToken, Signal, AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy, ElementRef, SimpleChanges, ModuleWithProviders, Provider } from '@angular/core';
+import { InjectionToken, Signal, AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy, ElementRef, SimpleChanges, Provider, DoCheck, ModuleWithProviders } from '@angular/core';
 import * as _angular_forms from '@angular/forms';
 import { AbstractControl, FormGroup, NgControl, RequiredValidator } from '@angular/forms';
 import { Breakpoints } from '@siemens/element-ng/resize-observer';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 import * as _siemens_element_ng_form from '@siemens/element-ng/form';
+import * as _angular_forms_signals from '@angular/forms/signals';
+import { SignalFormsConfig } from '@angular/forms/signals';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -69,6 +71,43 @@ interface SiFormValidationError {
     errorCodeTranslationKey?: string;
     errorParams?: any;
 }
+/**
+ * @deprecated This component should no longer be used.
+ *
+ * When providing a form wide error mapper, use the {@link provideFormValidationErrorMapper}.
+ * ```ts
+ * import { provideFormValidationErrorMapper } form '@siemens/element-ng/forms'
+ *
+ * @Component({
+ *   template: `<form>...</form>`
+ *   providers: [provideFormValidationErrorMapper({
+ *     'name.required': 'CUSTOM_REQUIRED_ERROR'
+ *   })]
+ * })
+ * class MyFormComponent {}
+ * ```
+ *
+ * When using the column layout, use the `form-col-layout` classes.
+ *
+ * ```html
+ * <!-- Responsive column layout -->
+ * <form class="responsive-form-col-layout">...</form>
+ * <!-- Always column layout -->
+ * <form class="form-col-layout">...</form>
+ * ```
+ *
+ * For a custom breakpoint use the SCSS mixin:
+ *
+ * ```scss
+ * @use '@siemens/element-theme/src/styles/bootstrap/mixins/form-layout';
+ *
+ * // Custom responsive breakpoint
+ * .custom-form-col-layout {
+ *   // Above 400px the column layout is used
+ *   @include form-layout.responsive-form-col-layout(400px);
+ * }
+ * ```
+ */
 declare class SiFormContainerComponent<TControl extends {
     [K in keyof TControl]: AbstractControl;
 }> {
@@ -202,40 +241,6 @@ declare class SiFormContainerComponent<TControl extends {
     static ɵcmp: _angular_core.ɵɵ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>;
 }
 
-declare class SiFormFieldsetComponent implements DoCheck {
-    private static labelIdCounter;
-    /** The label for the entire fieldset. */
-    readonly label: _angular_core.InputSignal<TranslatableString>;
-    /** Overrides the parent label width. */
-    readonly labelWidth: _angular_core.InputSignal<string | undefined>;
-    /**
-     * Adds a required marker to the label
-     *
-     * @defaultValue false
-     */
-    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /**
-     * Switches all child inputs to inline mode
-     *
-     * @defaultValue false
-     */
-    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    private readonly formItems;
-    /** @internal */
-    readonly hasOnlyRadios: _angular_core.Signal<boolean>;
-    protected readonly errors: _angular_core.Signal<_siemens_element_ng_form.SiFormError[]>;
-    protected readonly touched: _angular_core.WritableSignal<boolean>;
-    protected readonly isRequired: _angular_core.Signal<boolean>;
-    protected readonly labelId: string;
-    ngDoCheck(): void;
-    /** @internal */
-    registerFormItem(item: SiFormItemComponent): void;
-    /** @internal */
-    unregisterFormItem(item: SiFormItemComponent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFormFieldsetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵ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, ["[si-help-button]", "*"], true, never>;
-}
-
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -276,7 +281,7 @@ interface SiFormError {
     message?: TranslatableString;
     params: any;
 }
-declare class SiFormItemComponent implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy {
+declare class SiFormItemComponent implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy, SiFormFieldsetControl {
     /**
      * The label to be displayed in the form item.
      * It will be translated if a translation key is available.
@@ -312,6 +317,8 @@ declare class SiFormItemComponent implements AfterContentInit, AfterContentCheck
     protected readonly requiredValidator: _angular_core.Signal<RequiredValidator | undefined>;
     /** @internal */
     readonly errors: _angular_core.WritableSignal<SiFormError[]>;
+    /** @internal */
+    readonly touched: _angular_core.WritableSignal<boolean>;
     protected fieldset: SiFormFieldsetComponent | null;
     protected container: SiFormContainerComponent<{
         [x: string]: _angular_forms.AbstractControl<any, any, any>;
@@ -330,6 +337,8 @@ declare class SiFormItemComponent implements AfterContentInit, AfterContentCheck
     protected readonly printErrors: _angular_core.Signal<boolean>;
     /** @internal */
     readonly required: _angular_core.Signal<boolean>;
+    /** @internal */
+    readonly control: _angular_core.Signal<_angular_forms.AbstractControl<any, any, any> | null | undefined>;
     ngOnChanges(changes: SimpleChanges<this>): void;
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -341,6 +350,135 @@ declare class SiFormItemComponent implements AfterContentInit, AfterContentCheck
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFormItemComponent, "si-form-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "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"], ["[si-help-button]", ".warning-feedback, .info-feedback, .invalid-feedback", "*"], true, never>;
 }
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+interface SiFormFieldsetControl {
+    readonly control: Signal<unknown>;
+    readonly required: Signal<boolean>;
+    readonly touched: Signal<boolean>;
+    readonly errors: Signal<readonly SiFormError[]>;
+}
+
+declare class SiFormFieldsetComponent {
+    private static labelIdCounter;
+    /** The label for the entire fieldset. */
+    readonly label: _angular_core.InputSignal<TranslatableString>;
+    /** Overrides the parent label width. */
+    readonly labelWidth: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Adds a required marker to the label
+     *
+     * @defaultValue false
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Switches all child inputs to inline mode
+     *
+     * @defaultValue false
+     */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly formItems;
+    /** @internal */
+    readonly hasOnlyRadios: _angular_core.Signal<boolean>;
+    protected readonly errors: _angular_core.Signal<readonly _siemens_element_ng_form.SiFormError[]>;
+    protected readonly touched: _angular_core.Signal<boolean>;
+    protected readonly isRequired: _angular_core.Signal<boolean>;
+    protected readonly labelId: string;
+    /** @internal */
+    registerControl(item: SiFormFieldsetControl): void;
+    /** @internal */
+    unregisterControl(item: SiFormFieldsetControl): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFormFieldsetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵ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, ["[si-help-button]", "*"], true, never>;
+}
+
+/**
+ * Constructs a full form field including error messages, labels and aria-* attributes.
+ * It must be used with Angular's signal forms.
+ *
+ * @example
+ * ```html
+ * <si-form-field label="Name">
+ *   <input class="form-control" [formField]="form.name" />
+ *
+ *   <!-- Optional help button -->
+ *   <button
+ *     si-help-button
+ *     type="button"
+ *     siHelpTitle="Help for name"
+ *     siHelpContent="The context help description"
+ *   >More information about the name</button>
+ * </si-form-field>
+ * ```
+ */
+declare class SiFormFieldComponent implements SiFormFieldsetControl {
+    private static idCounter;
+    /**
+     * The label to be displayed in the form field.
+     * It will be translated if a translation key is available.
+     */
+    readonly label: _angular_core.InputSignal<TranslatableString>;
+    private readonly formField;
+    private readonly fieldControl;
+    protected readonly fieldset: SiFormFieldsetComponent | null;
+    private readonly validationErrorService;
+    private readonly generatedId;
+    /** The id of the connected control, used for the label's `for` attribute. */
+    protected readonly controlId: _angular_core.Signal<string>;
+    protected readonly errormessageId: _angular_core.Signal<string>;
+    protected readonly labelledby: _angular_core.Signal<string | null | undefined>;
+    /** Whether the connected control is a form-check (checkbox, radio or switch). */
+    protected readonly isFormCheck: _angular_core.Signal<boolean>;
+    private readonly fieldState;
+    /** @internal */
+    readonly control: _angular_core.Signal<_angular_forms_signals.FieldTree<unknown, string | number, "writable">>;
+    /** @internal */
+    readonly required: _angular_core.Signal<boolean>;
+    /** @internal  */
+    readonly showRequired: _angular_core.Signal<boolean>;
+    private readonly invalid;
+    /** @internal */
+    readonly touched: _angular_core.Signal<boolean>;
+    protected readonly isPartOfRadioGroup: _angular_core.Signal<boolean>;
+    /** @internal */
+    readonly errors: _angular_core.Signal<_siemens_element_ng_form.SiFormError[]>;
+    constructor();
+    private syncControlId;
+    /** Associates the error messages with the projected control for assistive technologies. */
+    private syncErrorDescription;
+    /**
+     * Reflects the validation state onto the projected control via `aria-invalid`. This is needed
+     * because signal forms does not set `aria-invalid`, and the native `:user-invalid` pseudo-class
+     * ignores `markAsTouched()`. The matching `.ng-invalid`/`.ng-touched` classes that drive the
+     * styling are added by signal forms itself, see `provideSiFormFieldConfig()`.
+     */
+    private syncInvalidState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFormFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiFormFieldComponent, "si-form-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, ["formField", "fieldControl"], ["*", "[si-help-button]"], true, never>;
+}
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Provides the signal forms configuration required by {@link SiFormFieldComponent}.
+ *
+ * It restores the `ng-*` classes applied by the directives of {@link @angular/forms#FormsModule | FormsModule} / {@link @angular/forms#ReactiveFormsModule | ReactiveFormsModule}.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideSiFormFieldConfig()]
+ * });
+ * ```
+ */
+declare const provideSiFormFieldConfig: (config?: SignalFormsConfig) => Provider[];
+
 /**
  * Directive to show a tooltip with validation errors of a form control.
  *
@@ -353,7 +491,7 @@ declare class SiFormItemComponent implements AfterContentInit, AfterContentCheck
  * <input siFormValidationTooltip [formControl]="control" />
  * ```
  */
-declare class SiFormValidationTooltipDirective implements OnDestroy, DoCheck {
+declare class SiFormValidationTooltipDirective implements DoCheck {
     private static idCounter;
     private tooltipService;
     private formValidationService;
@@ -361,16 +499,14 @@ declare class SiFormValidationTooltipDirective implements OnDestroy, DoCheck {
     readonly formErrorMapper: _angular_core.InputSignal<SiFormValidationErrorMapper | undefined>;
     private ngControl;
     private elementRef;
-    private tooltipRef?;
+    protected readonly describedBy: string;
     private readonly errors;
+    private readonly touched;
+    private readonly canShowTooltip;
     private currentErrors;
-    private touched;
-    protected readonly describedBy: string;
+    constructor();
     ngDoCheck(): void;
-    ngOnDestroy(): void;
     private updateErrors;
-    private createTooltip;
-    private destroyTooltip;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiFormValidationTooltipDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SiFormValidationTooltipDirective, "[siFormValidationTooltip]", never, { "formErrorMapper": { "alias": "formErrorMapper"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -406,5 +542,5 @@ declare class SiFormModule {
  */
 declare const provideFormValidationErrorMapper: (mapper: SiFormValidationErrorMapper) => Provider;
 
-export { SI_FORM_ITEM_CONTROL, SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent, SiFormModule, SiFormValidationTooltipDirective, provideFormValidationErrorMapper };
+export { SI_FORM_ITEM_CONTROL, SiFormContainerComponent, SiFormFieldComponent, SiFormFieldsetComponent, SiFormItemComponent, SiFormModule, SiFormValidationTooltipDirective, provideFormValidationErrorMapper, provideSiFormFieldConfig };
 export type { SiFormError, SiFormItemControl, SiFormValidationError, SiFormValidationErrorMapper };

package/types/siemens-element-ng-formly-legacy.d.ts

@@ -0,0 +1,40 @@
+import { SiFormlyComponent as SiFormlyComponent$1 } from '@siemens/element-ng/formly';
+export { SiFormlyTranslateExtension, dynamicUiConfig } from '@siemens/element-ng/formly';
+import * as i5 from '@angular/forms';
+import { AbstractControl } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { ModuleWithProviders } from '@angular/core';
+import * as i4 from '@ngx-formly/core';
+import { ConfigOption } from '@ngx-formly/core';
+import * as i2 from '@angular/common';
+import * as i3 from '@ngx-formly/bootstrap';
+import * as i6 from '@siemens/element-ng/form';
+
+/**
+ * @deprecated This component is based on Angular Formly v6 and will be removed in
+ * a future release. Migrate to the standalone `SiFormlyComponent` from
+ * `@siemens/element-ng/formly` (Formly v7.1) instead.
+ */
+declare class SiFormlyComponent<TControl extends {
+    [K in keyof TControl]: AbstractControl;
+}> extends SiFormlyComponent$1<TControl> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormlyComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SiFormlyComponent<any>, "si-formly", never, {}, {}, never, never, false, never>;
+}
+
+/**
+ * @deprecated This module is based on Angular Formly v6 and will be removed in a
+ * future release. Migrate to the standalone `SiFormlyComponent` from
+ * `@siemens/element-ng/formly` (Formly v7.1) instead.
+ */
+declare class SiFormlyModule {
+    private config;
+    private configs;
+    static forRoot(formlyConfig?: ConfigOption): ModuleWithProviders<SiFormlyModule>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SiFormlyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SiFormlyModule, [typeof SiFormlyComponent], [typeof i2.CommonModule, typeof i3.FormlyBootstrapModule, typeof i4.FormlyModule, typeof i5.ReactiveFormsModule, typeof i6.SiFormModule], [typeof SiFormlyComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SiFormlyModule>;
+}
+
+export { SiFormlyComponent, SiFormlyModule };