@siemens/element-ng 49.16.0 → 51.0.0-rc.10

package/fesm2022/siemens-element-ng-form.mjs

@@ -1,21 +1,61 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, computed, ChangeDetectionStrategy, Component, signal, InjectionToken, Injectable, contentChild, ElementRef, isSignal, Injector, Directive, NgModule } from '@angular/core';
+import { input, booleanAttribute, inject, computed, ChangeDetectionStrategy, Component, signal, InjectionToken, Injectable, contentChild, isSignal, DestroyRef, effect, ElementRef, Injector, Directive, NgModule } from '@angular/core';
 import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
-import { NgControl, RequiredValidator, FormControl } from '@angular/forms';
+import { FormField, provideSignalFormsConfig } from '@angular/forms/signals';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
+import { NG_STATUS_CLASSES } from '@angular/forms/signals/compat';
+import { NgControl, RequiredValidator, FormControl } from '@angular/forms';
 import { SiTooltipService } from '@siemens/element-ng/tooltip';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
+/**
+ * @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);
+ * }
+ * ```
+ */
 class SiFormContainerComponent {
     /**
      * Set the form entity to the container to enable the overall form validation on in
      * the form container edit panel.
      */
-    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+    form = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
     /**
      * 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
@@ -23,13 +63,14 @@ class SiFormContainerComponent {
      *
      * @defaultValue false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * 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.
      */
-    contentContainerBreakpoints = input(...(ngDevMode ? [undefined, { debugName: "contentContainerBreakpoints" }] : []));
+    contentContainerBreakpoints = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentContainerBreakpoints" }] : /* istanbul ignore next */ []));
     /**
      * 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
@@ -37,7 +78,7 @@ class SiFormContainerComponent {
      *
      * @defaultValue false
      */
-    disableContainerBreakpoints = input(false, { ...(ngDevMode ? { debugName: "disableContainerBreakpoints" } : {}), transform: booleanAttribute });
+    disableContainerBreakpoints = input(false, { ...(ngDevMode ? { debugName: "disableContainerBreakpoints" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * 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
@@ -45,7 +86,8 @@ class SiFormContainerComponent {
      *
      * Use the input to set your own translate keys for the form validators you need.
      */
-    errorCodeTranslateKeyMap = input(...(ngDevMode ? [undefined, { debugName: "errorCodeTranslateKeyMap" }] : []));
+    errorCodeTranslateKeyMap = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorCodeTranslateKeyMap" }] : /* istanbul ignore next */ []));
     /**
      * 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
@@ -56,19 +98,21 @@ class SiFormContainerComponent {
      * new Map<string, string>()
      * ```
      */
-    controlNameTranslateKeyMap = input(new Map(), ...(ngDevMode ? [{ debugName: "controlNameTranslateKeyMap" }] : []));
+    controlNameTranslateKeyMap = input(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlNameTranslateKeyMap" }] : /* istanbul ignore next */ []));
     /**
      * Disables the automatic error printing in all nested {@link SiFormItemComponent}. Error printing will be enabled by default in v46.
      *
      * @defaultValue false
      */
-    disableErrorPrinting = input(false, { ...(ngDevMode ? { debugName: "disableErrorPrinting" } : {}), transform: booleanAttribute });
+    disableErrorPrinting = input(false, { ...(ngDevMode ? { debugName: "disableErrorPrinting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * A custom width value to be applied to all labels.
      *
      * @example labelWidth="100px".
      */
-    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
+    labelWidth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : /* istanbul ignore next */ []));
     hasParentContainer = !!inject(SiFormContainerComponent, {
         optional: true,
         skipSelf: true
@@ -86,7 +130,8 @@ class SiFormContainerComponent {
         return {
             ...customMapper
         };
-    }, ...(ngDevMode ? [{ debugName: "formErrorMapper" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formErrorMapper" }] : /* istanbul ignore next */ []));
     /**
      * Indicates whether the user interacted with the form.
      * @returns `true`, if the user selected at least one form element and
@@ -121,12 +166,12 @@ class SiFormContainerComponent {
         }
         return controlNameTranslateKeyMap.get(controlName) ?? controlName;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormContainerComponent, isStandalone: true, selector: "si-form-container", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, contentContainerBreakpoints: { classPropertyName: "contentContainerBreakpoints", publicName: "contentContainerBreakpoints", isSignal: true, isRequired: false, transformFunction: null }, disableContainerBreakpoints: { classPropertyName: "disableContainerBreakpoints", publicName: "disableContainerBreakpoints", isSignal: true, isRequired: false, transformFunction: null }, errorCodeTranslateKeyMap: { classPropertyName: "errorCodeTranslateKeyMap", publicName: "errorCodeTranslateKeyMap", isSignal: true, isRequired: false, transformFunction: null }, controlNameTranslateKeyMap: { classPropertyName: "controlNameTranslateKeyMap", publicName: "controlNameTranslateKeyMap", isSignal: true, isRequired: false, transformFunction: null }, disableErrorPrinting: { classPropertyName: "disableErrorPrinting", publicName: "disableErrorPrinting", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--si-form-label-width": "labelWidth()" } }, ngImport: i0, template: "<div class=\"d-flex flex-column align-content-stretch flex-grow-1 flex-shrink-1\">\n  @if (disableContainerBreakpoints() || hasParentContainer) {\n    <div class=\"flex-grow-1 flex-shrink-1\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate\" />\n    </div>\n  } @else {\n    <div\n      class=\"flex-grow-1 flex-shrink-1\"\n      siResponsiveContainer\n      [breakpoints]=\"contentContainerBreakpoints()\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\" />\n    </div>\n  }\n\n  @if (!readonly()) {\n    <div class=\"d-flex flex-row flex-nowrap flex-grow-0 flex-shrink-0 py-4\">\n      <div\n        class=\"d-flex flex-grow-1 flex-shrink-1 justify-content-end text-end overflow-hidden mx-6 my-auto\"\n        [class.text-success]=\"validFormContainerMessage\"\n        [class.text-danger]=\"invalidFormContainerMessage\"\n      >\n        <ng-content select=\"[si-form-container-message]\" />\n      </div>\n\n      <div class=\"m-auto flex-grow-0 flex-shrink-0\">\n        <ng-content select=\"[si-form-container-buttons]\" />\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #contentTemplate>\n  <ng-content select=\"[si-form-container-content]\" />\n</ng-template>\n", styles: [":host{display:flex;flex:1 1 auto;flex-direction:column}:host ::slotted([si-form-container-message]),:host ::ng-deep [si-form-container-message]{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-container-edit-help{text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiResponsiveContainerDirective, selector: "[siResponsiveContainer]", inputs: ["resizeThrottle", "breakpoints"], exportAs: ["siResponsiveContainer"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFormContainerComponent, isStandalone: true, selector: "si-form-container", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, contentContainerBreakpoints: { classPropertyName: "contentContainerBreakpoints", publicName: "contentContainerBreakpoints", isSignal: true, isRequired: false, transformFunction: null }, disableContainerBreakpoints: { classPropertyName: "disableContainerBreakpoints", publicName: "disableContainerBreakpoints", isSignal: true, isRequired: false, transformFunction: null }, errorCodeTranslateKeyMap: { classPropertyName: "errorCodeTranslateKeyMap", publicName: "errorCodeTranslateKeyMap", isSignal: true, isRequired: false, transformFunction: null }, controlNameTranslateKeyMap: { classPropertyName: "controlNameTranslateKeyMap", publicName: "controlNameTranslateKeyMap", isSignal: true, isRequired: false, transformFunction: null }, disableErrorPrinting: { classPropertyName: "disableErrorPrinting", publicName: "disableErrorPrinting", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--si-form-label-width": "labelWidth()" } }, ngImport: i0, template: "<div class=\"d-flex flex-column align-content-stretch flex-grow-1 flex-shrink-1\">\n  @if (disableContainerBreakpoints() || hasParentContainer) {\n    <div class=\"flex-grow-1 flex-shrink-1\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate\" />\n    </div>\n  } @else {\n    <div\n      class=\"flex-grow-1 flex-shrink-1\"\n      siResponsiveContainer\n      [breakpoints]=\"contentContainerBreakpoints()\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\" />\n    </div>\n  }\n\n  @if (!readonly()) {\n    <div class=\"d-flex flex-row flex-nowrap flex-grow-0 flex-shrink-0 py-4\">\n      <div\n        class=\"d-flex flex-grow-1 flex-shrink-1 justify-content-end text-end overflow-hidden mx-6 my-auto\"\n        [class.text-success]=\"validFormContainerMessage\"\n        [class.text-danger]=\"invalidFormContainerMessage\"\n      >\n        <ng-content select=\"[si-form-container-message]\" />\n      </div>\n\n      <div class=\"m-auto flex-grow-0 flex-shrink-0\">\n        <ng-content select=\"[si-form-container-buttons]\" />\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #contentTemplate>\n  <ng-content select=\"[si-form-container-content]\" />\n</ng-template>\n", styles: [":host{display:flex;flex:1 1 auto;flex-direction:column}:host ::slotted([si-form-container-message]),:host ::ng-deep [si-form-container-message]{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-container-edit-help{text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiResponsiveContainerDirective, selector: "[siResponsiveContainer]", inputs: ["resizeThrottle", "breakpoints"], exportAs: ["siResponsiveContainer"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-form-container', imports: [NgTemplateOutlet, SiResponsiveContainerDirective], changeDetection: ChangeDetectionStrategy.Default, host: {
+            args: [{ selector: 'si-form-container', imports: [NgTemplateOutlet, SiResponsiveContainerDirective], changeDetection: ChangeDetectionStrategy.Eager, host: {
                         '[style.--si-form-label-width]': 'labelWidth()'
                     }, template: "<div class=\"d-flex flex-column align-content-stretch flex-grow-1 flex-shrink-1\">\n  @if (disableContainerBreakpoints() || hasParentContainer) {\n    <div class=\"flex-grow-1 flex-shrink-1\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate\" />\n    </div>\n  } @else {\n    <div\n      class=\"flex-grow-1 flex-shrink-1\"\n      siResponsiveContainer\n      [breakpoints]=\"contentContainerBreakpoints()\"\n    >\n      <ng-container *ngTemplateOutlet=\"contentTemplate\" />\n    </div>\n  }\n\n  @if (!readonly()) {\n    <div class=\"d-flex flex-row flex-nowrap flex-grow-0 flex-shrink-0 py-4\">\n      <div\n        class=\"d-flex flex-grow-1 flex-shrink-1 justify-content-end text-end overflow-hidden mx-6 my-auto\"\n        [class.text-success]=\"validFormContainerMessage\"\n        [class.text-danger]=\"invalidFormContainerMessage\"\n      >\n        <ng-content select=\"[si-form-container-message]\" />\n      </div>\n\n      <div class=\"m-auto flex-grow-0 flex-shrink-0\">\n        <ng-content select=\"[si-form-container-buttons]\" />\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #contentTemplate>\n  <ng-content select=\"[si-form-container-content]\" />\n</ng-template>\n", styles: [":host{display:flex;flex:1 1 auto;flex-direction:column}:host ::slotted([si-form-container-message]),:host ::ng-deep [si-form-container-message]{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-container-edit-help{text-decoration:underline;cursor:pointer}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], contentContainerBreakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentContainerBreakpoints", required: false }] }], disableContainerBreakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableContainerBreakpoints", required: false }] }], errorCodeTranslateKeyMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorCodeTranslateKeyMap", required: false }] }], controlNameTranslateKeyMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlNameTranslateKeyMap", required: false }] }], disableErrorPrinting: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableErrorPrinting", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }] } });
@@ -138,61 +183,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SiFormFieldsetComponent {
     static labelIdCounter = 0;
     /** The label for the entire fieldset. */
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Overrides the parent label width. */
-    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
+    labelWidth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : /* istanbul ignore next */ []));
     /**
      * Adds a required marker to the label
      *
      * @defaultValue false
      */
-    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Switches all child inputs to inline mode
      *
      * @defaultValue false
      */
-    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : {}), transform: booleanAttribute });
-    formItems = signal([], ...(ngDevMode ? [{ debugName: "formItems" }] : []));
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    formItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formItems" }] : /* istanbul ignore next */ []));
     /** @internal */
     hasOnlyRadios = computed(() => {
         // Check if the fieldset only contains radio buttons.
-        // We can safely assume that, if all items have the same control name and if there are at least 2 items.
+        // Reactive and signal form radios share a control, while template-driven radios share a name.
         const items = this.formItems();
         if (items.length > 1) {
-            const first = items[0];
-            return items.every(item => item.ngControl()?.name === first.ngControl()?.name);
+            const first = items[0].control();
+            const firstRadioGroupName = items[0].radioGroupName?.();
+            return ((first != null && items.every(item => item.control() === first)) ||
+                (firstRadioGroupName != null &&
+                    items.every(item => item.radioGroupName?.() === firstRadioGroupName)));
         }
         return false;
-    }, ...(ngDevMode ? [{ debugName: "hasOnlyRadios" }] : []));
-    errors = computed(() => 
-    // All errors should be the same for radios, so we just take the first.
-    this.hasOnlyRadios() ? this.formItems()[0].errors() : [], ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
-    isRequired = computed(() => this.required() || (this.hasOnlyRadios() && this.formItems().every(item => item.required())), ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasOnlyRadios" }] : /* istanbul ignore next */ []));
+    errors = computed(() => this.formItems()[0].errors(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = computed(() => this.formItems().some(item => item.touched()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.required() || (this.hasOnlyRadios() && this.formItems().every(item => item.required())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
     labelId = `__si-form-fieldset-label-${SiFormFieldsetComponent.labelIdCounter++}`;
-    ngDoCheck() {
-        this.touched.set(this.formItems().some(item => item.ngControl()?.touched));
-    }
     /** @internal */
-    registerFormItem(item) {
+    registerControl(item) {
         this.formItems.update(items => [...items, item]);
     }
     /** @internal */
-    unregisterFormItem(item) {
+    unregisterControl(item) {
         this.formItems.update(items => items.filter(i => i !== item));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormFieldsetComponent, isStandalone: true, selector: "si-form-fieldset", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "style.--si-form-label-width": "labelWidth()", "attr.aria-labelledby": "labelId" }, classAttribute: "si-form-input" }, ngImport: i0, template: "<div class=\"form-label d-flex gap-2\">\n  <span [class.required]=\"isRequired()\" [id]=\"labelId\">{{ label() | translate }}</span>\n  <ng-content select=\"[si-help-button]\" />\n</div>\n<div>\n  <ng-content />\n  @if (hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [class.d-block]=\"touched()\">\n      @for (error of errors(); track error) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host.si-form-input{display:flex;flex-direction:column;margin-block-end:12px}:host.si-form-input .form-item-content{flex-grow:1}.form-label:empty{display:none}:host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1rem}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(si-form-fieldset) .form-label{padding-block:2px 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFormFieldsetComponent, isStandalone: true, selector: "si-form-fieldset", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "style.--si-form-label-width": "labelWidth()", "attr.aria-labelledby": "labelId" }, classAttribute: "si-form-fieldset" }, ngImport: i0, template: "<div class=\"form-label d-flex gap-2\">\n  <span [class.required]=\"isRequired()\" [id]=\"labelId\">{{ label() | translate }}</span>\n  <ng-content select=\"[si-help-button]\" />\n</div>\n<div>\n  <div [class]=\"inline() ? '' : 'd-flex flex-column gap-2 mb-2'\">\n    <ng-content />\n  </div>\n  @if (hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [class.d-block]=\"touched()\">\n      @for (error of errors(); track error) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:calc(calc(var(--si-sys-sizing-spacing-y-40) - 1px) + 1px);padding-inline:var(--si-sys-sizing-spacing-x-60);inline-size:var(--si-form-label-width, 16.6666666667%);line-height:calc(var(--si-sys-typography-font-size-body) * var(--si-sys-typography-line-height-body))}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(.si-form-fieldset) .form-label{padding-block:var(--si-sys-sizing-spacing-y-10) 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormFieldsetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-form-fieldset', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-form-fieldset', imports: [SiTranslatePipe], host: {
                         role: 'group',
-                        class: 'si-form-input',
+                        class: 'si-form-fieldset',
                         '[style.--si-form-label-width]': 'labelWidth()',
                         '[attr.aria-labelledby]': 'labelId'
-                    }, template: "<div class=\"form-label d-flex gap-2\">\n  <span [class.required]=\"isRequired()\" [id]=\"labelId\">{{ label() | translate }}</span>\n  <ng-content select=\"[si-help-button]\" />\n</div>\n<div>\n  <ng-content />\n  @if (hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [class.d-block]=\"touched()\">\n      @for (error of errors(); track error) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host.si-form-input{display:flex;flex-direction:column;margin-block-end:12px}:host.si-form-input .form-item-content{flex-grow:1}.form-label:empty{display:none}:host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1rem}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(si-form-fieldset) .form-label{padding-block:2px 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"] }]
+                    }, template: "<div class=\"form-label d-flex gap-2\">\n  <span [class.required]=\"isRequired()\" [id]=\"labelId\">{{ label() | translate }}</span>\n  <ng-content select=\"[si-help-button]\" />\n</div>\n<div>\n  <div [class]=\"inline() ? '' : 'd-flex flex-column gap-2 mb-2'\">\n    <ng-content />\n  </div>\n  @if (hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [class.d-block]=\"touched()\">\n      @for (error of errors(); track error) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:calc(calc(var(--si-sys-sizing-spacing-y-40) - 1px) + 1px);padding-inline:var(--si-sys-sizing-spacing-x-60);inline-size:var(--si-form-label-width, 16.6666666667%);line-height:calc(var(--si-sys-typography-font-size-body) * var(--si-sys-typography-line-height-body))}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(.si-form-fieldset) .form-label{padding-block:var(--si-sys-sizing-spacing-y-10) 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
 
 /**
@@ -242,7 +292,7 @@ const buildDefaults = () => ({
     // Various
     email: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.EMAIL:Invalid email address`),
     numberFormat: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.NUMBER_FORMAT:Number required`),
-    pattern: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.PATTERN:The value does not match the predefined pattern.`),
+    pattern: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.PATTERN:Required value format not fulfilled`),
     required: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED:Required`),
     requiredTrue: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED_TRUE:Required`)
 });
@@ -267,6 +317,30 @@ class SiFormValidationErrorService {
     constructor(errorMapper) {
         this.errorMapper = errorMapper;
     }
+    /**
+     * Resolves validation errors for Angular signal forms.
+     *
+     * If the validation error has no message associated, the resolution flow of {@link resolveErrors} is followed.
+     *
+     * @param state - the fieldState of the formfield.
+     */
+    resolveFormFieldErrors(state) {
+        return state.errors().map(error => {
+            const { message, kind, fieldTree, formField, ...rawErrorParams } = error;
+            const errorParams = this.getErrorParams(rawErrorParams);
+            if (!message) {
+                return this.resolveError(kind, state.name(), errorParams);
+            }
+            else {
+                return { message, key: kind, params: errorParams };
+            }
+        });
+    }
+    /** Returns legacy reactive-form parameters stored in `context`, or the signal-form error. */
+    getErrorParams(error) {
+        const { context } = error;
+        return context ?? error;
+    }
     /**
      * Resolves the provided form errors to a list of {@link SiFormError}.
      * To resolution order is:
@@ -306,10 +380,10 @@ class SiFormValidationErrorService {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationErrorService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationErrorService, providedIn: 'root', useFactory: () => new SiFormValidationErrorService(buildDefaults()) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormValidationErrorService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormValidationErrorService, providedIn: 'root', useFactory: () => new SiFormValidationErrorService(buildDefaults()) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationErrorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormValidationErrorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -317,6 +391,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: undefined }] });
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * 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>
+ * ```
+ */
+class SiFormFieldComponent {
+    static idCounter = 0;
+    /**
+     * The label to be displayed in the form field.
+     * It will be translated if a translation key is available.
+     */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    formField = contentChild.required(FormField, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formField" }] : /* istanbul ignore next */ []));
+    fieldControl = contentChild(SI_FORM_ITEM_CONTROL, { ...(ngDevMode ? { debugName: "fieldControl" } : /* istanbul ignore next */ {}), descendants: true });
+    fieldset = inject(SiFormFieldsetComponent, { optional: true });
+    validationErrorService = inject(SiFormValidationErrorService);
+    generatedId = `__si-form-field-${SiFormFieldComponent.idCounter++}`;
+    /** The id of the connected control, used for the label's `for` attribute. */
+    controlId = computed(() => {
+        const id = this.fieldControl()?.id;
+        return (isSignal(id) ? id() : id) ?? (this.formField().element.id || this.generatedId);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    errormessageId = computed(() => {
+        const id = this.fieldControl()?.errormessageId;
+        return (isSignal(id) ? id() : id) ?? `${this.controlId()}-errormessage`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
+    labelledby = computed(() => {
+        const labelledby = this.fieldControl()?.labelledby;
+        return isSignal(labelledby) ? labelledby() : labelledby;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
+    /** Whether the connected control is a form-check (checkbox, radio or switch). */
+    isFormCheck = computed(() => this.fieldControl()?.isFormCheck ??
+        this.formField().element.classList.contains('form-check-input'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormCheck" }] : /* istanbul ignore next */ []));
+    fieldState = computed(() => this.formField().state(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldState" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    control = computed(() => this.fieldState().fieldTree, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    required = computed(() => this.fieldState().required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @internal  */
+    showRequired = computed(() => this.required() && !this.isPartOfRadioGroup(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRequired" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => {
+        const state = this.fieldState();
+        return state.touched() && state.invalid();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    touched = computed(() => this.fieldState().touched(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    isPartOfRadioGroup = computed(() => this.fieldset?.hasOnlyRadios() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPartOfRadioGroup" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    errors = computed(() => {
+        const state = this.fieldState();
+        if (!state.touched()) {
+            return [];
+        }
+        return this.validationErrorService.resolveFormFieldErrors(state);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this.fieldset) {
+            this.fieldset.registerControl(this);
+            inject(DestroyRef).onDestroy(() => this.fieldset.unregisterControl(this));
+        }
+        effect(() => this.syncControlId());
+        effect(() => this.syncErrorDescription());
+        effect(() => this.syncInvalidState());
+    }
+    syncControlId() {
+        const element = this.formField().element;
+        if (!element.id) {
+            element.id = this.generatedId;
+        }
+    }
+    /** Associates the error messages with the projected control for assistive technologies. */
+    syncErrorDescription() {
+        this.formField().element.setAttribute('aria-describedby', this.errormessageId());
+    }
+    /**
+     * 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()`.
+     */
+    syncInvalidState() {
+        const element = this.formField().element;
+        if (this.invalid()) {
+            element.setAttribute('aria-invalid', 'true');
+        }
+        else {
+            element.removeAttribute('aria-invalid');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFormFieldComponent, isStandalone: true, selector: "si-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.required": "showRequired()", "class.form-check": "isFormCheck()", "class.form-check-inline": "fieldset?.inline()", "class.si-form-input": "!fieldset" } }, queries: [{ propertyName: "formField", first: true, predicate: FormField, descendants: true, isSignal: true }, { propertyName: "fieldControl", first: true, predicate: SI_FORM_ITEM_CONTROL, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isFormCheck()) {\n  <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n} @else if (!fieldset) {\n  <!-- Empty spacer so the control aligns with the label column in form-col-layout. -->\n  <div class=\"form-label\"></div>\n}\n<div class=\"form-item-content\">\n  <ng-content />\n  @if (isFormCheck()) {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n  }\n  @if (!isPartOfRadioGroup()) {\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  }\n</div>\n\n<ng-template #labelTemplate>\n  <div\n    class=\"d-flex gap-2\"\n    [class.form-label]=\"!isFormCheck()\"\n    [class.form-check-label]=\"isFormCheck()\"\n  >\n    @if (labelledby()) {\n      <span [id]=\"labelledby()\" [class.required]=\"showRequired()\">{{ label() | translate }}</span>\n    } @else {\n      <label [for]=\"controlId()\" [class.required]=\"showRequired()\">{{ label() | translate }}</label>\n    }\n    <ng-content select=\"[si-help-button]\" />\n  </div>\n</ng-template>\n\n<ng-template #feedbackTemplate>\n  <div class=\"invalid-feedback\" [class.d-block]=\"errors().length\" [attr.id]=\"errormessageId()\">\n    @for (error of errors(); track $index) {\n      <div>\n        {{ error.message ?? error.key | translate: error.params }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host(.si-form-input){margin-block-end:var(--si-sys-sizing-spacing-y-60)}:host(:not(.form-check)){display:flex;flex-direction:column}:host(:not(.form-check)) .form-item-content{flex-grow:1}.form-label:empty{display:none}:host(.form-check:not(.form-check-inline)){display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-form-field', imports: [SiTranslatePipe, NgTemplateOutlet], host: {
+                        '[class.required]': 'showRequired()',
+                        '[class.form-check]': 'isFormCheck()',
+                        '[class.form-check-inline]': 'fieldset?.inline()',
+                        '[class.si-form-input]': '!fieldset'
+                    }, template: "@if (!isFormCheck()) {\n  <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n} @else if (!fieldset) {\n  <!-- Empty spacer so the control aligns with the label column in form-col-layout. -->\n  <div class=\"form-label\"></div>\n}\n<div class=\"form-item-content\">\n  <ng-content />\n  @if (isFormCheck()) {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n  }\n  @if (!isPartOfRadioGroup()) {\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  }\n</div>\n\n<ng-template #labelTemplate>\n  <div\n    class=\"d-flex gap-2\"\n    [class.form-label]=\"!isFormCheck()\"\n    [class.form-check-label]=\"isFormCheck()\"\n  >\n    @if (labelledby()) {\n      <span [id]=\"labelledby()\" [class.required]=\"showRequired()\">{{ label() | translate }}</span>\n    } @else {\n      <label [for]=\"controlId()\" [class.required]=\"showRequired()\">{{ label() | translate }}</label>\n    }\n    <ng-content select=\"[si-help-button]\" />\n  </div>\n</ng-template>\n\n<ng-template #feedbackTemplate>\n  <div class=\"invalid-feedback\" [class.d-block]=\"errors().length\" [attr.id]=\"errormessageId()\">\n    @for (error of errors(); track $index) {\n      <div>\n        {{ error.message ?? error.key | translate: error.params }}\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host(.si-form-input){margin-block-end:var(--si-sys-sizing-spacing-y-60)}:host(:not(.form-check)){display:flex;flex-direction:column}:host(:not(.form-check)) .form-item-content{flex-grow:1}.form-label:empty{display:none}:host(.form-check:not(.form-check-inline)){display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], formField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormField), { isSignal: true }] }], fieldControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SI_FORM_ITEM_CONTROL), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * 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()]
+ * });
+ * ```
+ */
+const provideSiFormFieldConfig = (config = {}) => provideSignalFormsConfig({
+    ...config,
+    classes: {
+        ...NG_STATUS_CLASSES,
+        ...config.classes
+    }
+});
+
 /**
  * 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`.
@@ -368,7 +596,8 @@ class SiFormItemComponent {
      * The label to be displayed in the form item.
      * It will be translated if a translation key is available.
      */
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /**
      * 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.
@@ -378,30 +607,36 @@ class SiFormItemComponent {
      *
      * @example labelWidth="100px"
      */
-    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
+    labelWidth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : /* istanbul ignore next */ []));
     /**
      * Disables the automatic error printing. Error printing will be enabled by default in v46.
      *
      * @defaultValue false
      */
-    disableErrorPrinting = input(false, { ...(ngDevMode ? { debugName: "disableErrorPrinting" } : {}), transform: booleanAttribute });
+    disableErrorPrinting = input(false, { ...(ngDevMode ? { debugName: "disableErrorPrinting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Maps validation errors of the contained control to custom messages. */
-    formErrorMapper = input(...(ngDevMode ? [undefined, { debugName: "formErrorMapper" }] : []));
+    formErrorMapper = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "formErrorMapper" }] : /* istanbul ignore next */ []));
     /**
      * Defines that this form item is required for the overall form to be valid.
      *
      * @defaultValue false
      */
     // eslint-disable-next-line @angular-eslint/no-input-rename
-    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : {}), transform: booleanAttribute, alias: 'required' });
-    fieldControlQuery = contentChild(SI_FORM_ITEM_CONTROL, { ...(ngDevMode ? { debugName: "fieldControlQuery" } : {}), descendants: true });
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'required' });
+    fieldControlQuery = contentChild(SI_FORM_ITEM_CONTROL, { ...(ngDevMode ? { debugName: "fieldControlQuery" } : /* istanbul ignore next */ {}), descendants: true });
     /** @internal */
-    ngControl = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControl" } : {}), descendants: true });
-    controlElementRef = contentChild(NgControl, { ...(ngDevMode ? { debugName: "controlElementRef" } : {}), read: ElementRef,
+    ngControl = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControl" } : /* istanbul ignore next */ {}), descendants: true });
+    controlElementRef = contentChild(NgControl, { ...(ngDevMode ? { debugName: "controlElementRef" } : /* istanbul ignore next */ {}), read: ElementRef,
         descendants: true });
-    requiredValidator = contentChild(RequiredValidator, { ...(ngDevMode ? { debugName: "requiredValidator" } : {}), descendants: true });
+    requiredValidator = contentChild(RequiredValidator, { ...(ngDevMode ? { debugName: "requiredValidator" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @internal */
+    errors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     /** @internal */
-    errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    touched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     fieldset = inject(SiFormFieldsetComponent, { optional: true });
     container = inject(SiFormContainerComponent, { optional: true });
     get formItemId() {
@@ -420,32 +655,51 @@ class SiFormItemComponent {
             ? (fieldControl?.errormessageId() ?? null)
             : (fieldControl?.errormessageId ?? null);
     }
-    fieldControl = computed(() => this.fieldControlQuery() ?? this.fieldControlNative(), ...(ngDevMode ? [{ debugName: "fieldControl" }] : []));
+    fieldControl = computed(() => this.fieldControlQuery() ?? this.fieldControlNative(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldControl" }] : /* istanbul ignore next */ []));
     validationErrorService = inject(SiFormValidationErrorService);
     requiredTestControl = new FormControl('');
     validator;
     previousErrors;
-    hasRequiredValidator = signal(false, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
-    fieldControlNative = signal(undefined, ...(ngDevMode ? [{ debugName: "fieldControlNative" }] : []));
+    hasRequiredValidator = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : /* istanbul ignore next */ []));
+    fieldControlNative = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldControlNative" }] : /* istanbul ignore next */ []));
     labelWidthCssVar = computed(() => {
         const labelWidth = this.labelWidth();
         if (typeof labelWidth === 'number') {
             return `${labelWidth}px`;
         }
         return labelWidth;
-    }, ...(ngDevMode ? [{ debugName: "labelWidthCssVar" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidthCssVar" }] : /* istanbul ignore next */ []));
     printErrors = computed(() => {
         return !this.disableErrorPrinting() && !(this.container?.disableErrorPrinting() ?? false);
-    }, ...(ngDevMode ? [{ debugName: "printErrors" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "printErrors" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    required = computed(() => this.requiredInput() || this.hasRequiredValidator(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /** @internal */
-    required = computed(() => this.requiredInput() || this.hasRequiredValidator(), ...(ngDevMode ? [{ debugName: "required" }] : []));
+    control = computed(() => this.ngControl()?.control, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    radioGroupName = computed(() => {
+        const element = this.controlElementRef()?.nativeElement;
+        if (element?.tagName === 'INPUT') {
+            const inputElement = element;
+            return inputElement.type === 'radio' ? inputElement.name || undefined : undefined;
+        }
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radioGroupName" }] : /* istanbul ignore next */ []));
     ngOnChanges(changes) {
         if (changes.formErrorMapper) {
             this.updateValidationMessages();
         }
     }
     ngOnInit() {
-        this.fieldset?.registerFormItem(this);
+        this.fieldset?.registerControl(this);
     }
     ngAfterContentInit() {
         if (!this.fieldControlQuery()) {
@@ -455,9 +709,10 @@ class SiFormItemComponent {
     ngAfterContentChecked() {
         this.updateRequiredState();
         this.updateValidationMessages();
+        this.touched.set(!!this.ngControl()?.touched);
     }
     ngOnDestroy() {
-        this.fieldset?.unregisterFormItem(this);
+        this.fieldset?.unregisterControl(this);
     }
     updateRequiredState() {
         const requiredValidator = this.requiredValidator();
@@ -493,18 +748,18 @@ class SiFormItemComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormItemComponent, isStandalone: true, selector: "si-form-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, disableErrorPrinting: { classPropertyName: "disableErrorPrinting", publicName: "disableErrorPrinting", isSignal: true, isRequired: false, transformFunction: null }, formErrorMapper: { classPropertyName: "formErrorMapper", publicName: "formErrorMapper", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.required": "required()", "style.--si-form-label-width": "labelWidthCssVar()", "class.form-check": "fieldControl()?.isFormCheck", "class.form-check-inline": "fieldset?.inline()", "class.si-form-input": "!fieldset" } }, queries: [{ propertyName: "fieldControlQuery", first: true, predicate: SI_FORM_ITEM_CONTROL, descendants: true, isSignal: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "controlElementRef", first: true, predicate: NgControl, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!--Block the space if no form-field is provided. Otherwise it looks weird in the formly field inline representation.-->\n@if (fieldControl()?.isFormCheck && !fieldset) {\n  <div class=\"form-label\"></div>\n}\n@if (fieldControl()?.isFormCheck) {\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n}\n\n<ng-template #labelTemplate>\n  @if (label()) {\n    <div\n      class=\"d-flex gap-2\"\n      [class.form-label]=\"!fieldControl()?.isFormCheck\"\n      [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n    >\n      @let labeledBy = formItemLabelledBy;\n      @let required = this.required() && !this.fieldset?.hasOnlyRadios();\n      @if (labeledBy) {\n        <span [id]=\"labeledBy\" [class.required]=\"required\">{{ label()! | translate }}</span>\n      } @else {\n        <label [for]=\"formItemId\" [class.required]=\"required\">{{ label()! | translate }}</label>\n      }\n      <ng-content select=\"[si-help-button]\" />\n    </div>\n  }\n</ng-template>\n<ng-template #feedbackTemplate>\n  @if (printErrors() && !fieldset?.hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [attr.id]=\"formItemErrormessageId\">\n      @for (error of errors(); track error.key) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n  <ng-content select=\".warning-feedback, .info-feedback, .invalid-feedback\" />\n</ng-template>\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host.si-form-input{display:flex;flex-direction:column;margin-block-end:12px}:host.si-form-input .form-item-content{flex-grow:1}.form-label:empty{display:none}:host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1rem}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(si-form-fieldset) .form-label{padding-block:2px 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFormItemComponent, isStandalone: true, selector: "si-form-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, disableErrorPrinting: { classPropertyName: "disableErrorPrinting", publicName: "disableErrorPrinting", isSignal: true, isRequired: false, transformFunction: null }, formErrorMapper: { classPropertyName: "formErrorMapper", publicName: "formErrorMapper", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.required": "required()", "style.--si-form-label-width": "labelWidthCssVar()", "class.form-check": "fieldControl()?.isFormCheck", "class.form-check-inline": "fieldset?.inline()", "class.si-form-input": "!fieldset" } }, queries: [{ propertyName: "fieldControlQuery", first: true, predicate: SI_FORM_ITEM_CONTROL, descendants: true, isSignal: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "controlElementRef", first: true, predicate: NgControl, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<!--Block the space if no form-field is provided. Otherwise it looks weird in the formly field inline representation.-->\n@if (fieldControl()?.isFormCheck && !fieldset) {\n  <div class=\"form-label\"></div>\n}\n@if (fieldControl()?.isFormCheck) {\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n}\n\n<ng-template #labelTemplate>\n  @if (label()) {\n    <div\n      class=\"d-flex gap-2 align-items-start\"\n      [class.form-label]=\"!fieldControl()?.isFormCheck\"\n      [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n    >\n      @let labeledBy = formItemLabelledBy;\n      @let required = this.required() && !this.fieldset?.hasOnlyRadios();\n      @if (labeledBy) {\n        <span [id]=\"labeledBy\" [class.required]=\"required\">{{ label()! | translate }}</span>\n      } @else {\n        <label [for]=\"formItemId\" [class.required]=\"required\">{{ label()! | translate }}</label>\n      }\n      <ng-content select=\"[si-help-button]\" />\n    </div>\n  }\n</ng-template>\n<ng-template #feedbackTemplate>\n  @if (printErrors() && !fieldset?.hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [attr.id]=\"formItemErrormessageId\">\n      @for (error of errors(); track error.key) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n  <ng-content select=\".warning-feedback, .info-feedback, .invalid-feedback\" />\n</ng-template>\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:calc(calc(var(--si-sys-sizing-spacing-y-40) - 1px) + 1px);padding-inline:var(--si-sys-sizing-spacing-x-60);inline-size:var(--si-form-label-width, 16.6666666667%);line-height:calc(var(--si-sys-typography-font-size-body) * var(--si-sys-typography-line-height-body))}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(.si-form-fieldset) .form-label{padding-block:var(--si-sys-sizing-spacing-y-10) 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-form-item', imports: [SiTranslatePipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-form-item', imports: [SiTranslatePipe, NgTemplateOutlet], host: {
                         '[class.required]': 'required()',
                         '[style.--si-form-label-width]': 'labelWidthCssVar()',
                         '[class.form-check]': 'fieldControl()?.isFormCheck',
                         '[class.form-check-inline]': 'fieldset?.inline()',
                         '[class.si-form-input]': '!fieldset'
-                    }, template: "<!--Block the space if no form-field is provided. Otherwise it looks weird in the formly field inline representation.-->\n@if (fieldControl()?.isFormCheck && !fieldset) {\n  <div class=\"form-label\"></div>\n}\n@if (fieldControl()?.isFormCheck) {\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n}\n\n<ng-template #labelTemplate>\n  @if (label()) {\n    <div\n      class=\"d-flex gap-2\"\n      [class.form-label]=\"!fieldControl()?.isFormCheck\"\n      [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n    >\n      @let labeledBy = formItemLabelledBy;\n      @let required = this.required() && !this.fieldset?.hasOnlyRadios();\n      @if (labeledBy) {\n        <span [id]=\"labeledBy\" [class.required]=\"required\">{{ label()! | translate }}</span>\n      } @else {\n        <label [for]=\"formItemId\" [class.required]=\"required\">{{ label()! | translate }}</label>\n      }\n      <ng-content select=\"[si-help-button]\" />\n    </div>\n  }\n</ng-template>\n<ng-template #feedbackTemplate>\n  @if (printErrors() && !fieldset?.hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [attr.id]=\"formItemErrormessageId\">\n      @for (error of errors(); track error.key) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n  <ng-content select=\".warning-feedback, .info-feedback, .invalid-feedback\" />\n</ng-template>\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host.si-form-input{display:flex;flex-direction:column;margin-block-end:12px}:host.si-form-input .form-item-content{flex-grow:1}.form-label:empty{display:none}:host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1rem}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(si-form-fieldset) .form-label{padding-block:2px 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"] }]
+                    }, template: "<!--Block the space if no form-field is provided. Otherwise it looks weird in the formly field inline representation.-->\n@if (fieldControl()?.isFormCheck && !fieldset) {\n  <div class=\"form-label\"></div>\n}\n@if (fieldControl()?.isFormCheck) {\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n    <ng-container [ngTemplateOutlet]=\"feedbackTemplate\" />\n  </div>\n}\n\n<ng-template #labelTemplate>\n  @if (label()) {\n    <div\n      class=\"d-flex gap-2 align-items-start\"\n      [class.form-label]=\"!fieldControl()?.isFormCheck\"\n      [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n    >\n      @let labeledBy = formItemLabelledBy;\n      @let required = this.required() && !this.fieldset?.hasOnlyRadios();\n      @if (labeledBy) {\n        <span [id]=\"labeledBy\" [class.required]=\"required\">{{ label()! | translate }}</span>\n      } @else {\n        <label [for]=\"formItemId\" [class.required]=\"required\">{{ label()! | translate }}</label>\n      }\n      <ng-content select=\"[si-help-button]\" />\n    </div>\n  }\n</ng-template>\n<ng-template #feedbackTemplate>\n  @if (printErrors() && !fieldset?.hasOnlyRadios()) {\n    <div class=\"invalid-feedback\" [attr.id]=\"formItemErrormessageId\">\n      @for (error of errors(); track error.key) {\n        <div>\n          {{ error.message | translate: error.params }}\n        </div>\n      }\n    </div>\n  }\n  <ng-content select=\".warning-feedback, .info-feedback, .invalid-feedback\" />\n</ng-template>\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host-context(.si-container-sm) :host.si-form-input,:host-context(.si-container-md) :host.si-form-input,:host-context(.si-container-lg) :host.si-form-input,:host-context(.si-container-xl) :host.si-form-input,:host-context(.si-container-xxl) :host.si-form-input{display:flex;flex-direction:row;align-items:center}:host-context(.si-container-sm) .form-label,:host-context(.si-container-md) .form-label,:host-context(.si-container-lg) .form-label,:host-context(.si-container-xl) .form-label,:host-context(.si-container-xxl) .form-label{align-self:start;padding-block:calc(calc(var(--si-sys-sizing-spacing-y-40) - 1px) + 1px);padding-inline:var(--si-sys-sizing-spacing-x-60);inline-size:var(--si-form-label-width, 16.6666666667%);line-height:calc(var(--si-sys-typography-font-size-body) * var(--si-sys-typography-line-height-body))}:host-context(.si-container-sm) .form-label:empty,:host-context(.si-container-md) .form-label:empty,:host-context(.si-container-lg) .form-label:empty,:host-context(.si-container-xl) .form-label:empty,:host-context(.si-container-xxl) .form-label:empty{display:block}:host-context(.si-container-sm) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-md) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-lg) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xl) :host-context(.si-form-fieldset) .form-label,:host-context(.si-container-xxl) :host-context(.si-form-fieldset) .form-label{padding-block:var(--si-sys-sizing-spacing-y-10) 0}:host-context(.si-container-sm) :host(.form-check) .form-label,:host-context(.si-container-md) :host(.form-check) .form-label,:host-context(.si-container-lg) :host(.form-check) .form-label,:host-context(.si-container-xl) :host(.form-check) .form-label,:host-context(.si-container-xxl) :host(.form-check) .form-label{padding-block:2px}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], disableErrorPrinting: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableErrorPrinting", required: false }] }], formErrorMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorMapper", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], fieldControlQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SI_FORM_ITEM_CONTROL), { ...{ descendants: true }, isSignal: true }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }], controlElementRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{
                             read: ElementRef,
                             descendants: true
@@ -517,14 +772,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 const SI_FORM_VALIDATION_TOOLTIP_DATA = new InjectionToken('SiFormValidationTooltipData');
 class SiFormValidationTooltipComponent {
     errors = inject(SI_FORM_VALIDATION_TOOLTIP_DATA);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormValidationTooltipComponent, isStandalone: true, selector: "si-form-validation-tooltip", host: { classAttribute: "d-flex flex-column gap-2 text-start" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFormValidationTooltipComponent, isStandalone: true, selector: "si-form-validation-tooltip", host: { classAttribute: "d-flex flex-column gap-2 text-start" }, ngImport: i0, template: `
     @for (error of errors(); track error.key) {
       <div>{{ error.message | translate: error.params }}</div>
     }
-  `, isInline: true, dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+  `, isInline: true, dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormValidationTooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-form-validation-tooltip',
@@ -534,7 +789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
       <div>{{ error.message | translate: error.params }}</div>
     }
   `,
-                    changeDetection: ChangeDetectionStrategy.Default,
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     host: {
                         'class': 'd-flex flex-column gap-2 text-start'
                     }
@@ -563,60 +818,50 @@ class SiFormValidationTooltipDirective {
     formValidationService = inject(SiFormValidationErrorService);
     formContainer = inject(SiFormContainerComponent, { optional: true });
     /** Maps validation errors of the associated form control to custom tooltip messages. */
-    formErrorMapper = input(...(ngDevMode ? [undefined, { debugName: "formErrorMapper" }] : []));
+    formErrorMapper = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "formErrorMapper" }] : /* istanbul ignore next */ []));
     ngControl = inject(NgControl);
     elementRef = inject(ElementRef);
-    tooltipRef;
-    errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
-    currentErrors = null;
-    touched = null;
     describedBy = `__si-form-validation-tooltip-${SiFormValidationTooltipDirective.idCounter++}`;
+    errors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    canShowTooltip = computed(() => this.errors().length > 0 && this.touched(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canShowTooltip" }] : /* istanbul ignore next */ []));
+    currentErrors = null;
+    constructor() {
+        this.tooltipService.createTooltip({
+            placement: () => 'auto',
+            element: this.elementRef,
+            describedBy: this.describedBy,
+            injector: Injector.create({
+                providers: [{ provide: SI_FORM_VALIDATION_TOOLTIP_DATA, useValue: this.errors }]
+            }),
+            canShow: this.canShowTooltip,
+            tooltip: () => SiFormValidationTooltipComponent,
+            // Not actually used, but errors in the context triggers a resize if the errors changes.
+            tooltipContext: this.errors
+        });
+    }
     ngDoCheck() {
         const nextErrors = this.ngControl.errors;
-        const nextTouched = this.ngControl.touched;
-        if (this.currentErrors !== nextErrors || this.touched !== nextTouched) {
+        this.touched.set(!!this.ngControl.touched);
+        if (this.currentErrors !== nextErrors) {
             this.currentErrors = nextErrors;
-            this.touched = nextTouched;
             this.updateErrors();
         }
     }
-    ngOnDestroy() {
-        this.destroyTooltip();
-    }
     updateErrors() {
         const errors = this.formValidationService
             .resolveErrors(this.ngControl.name, this.currentErrors, this.formErrorMapper(), this.formContainer?.formErrorMapper())
             .filter(error => !!error.message);
-        const shouldShow = errors.length > 0 && !!this.ngControl.touched;
-        if (shouldShow) {
-            this.createTooltip();
-        }
-        else {
-            this.destroyTooltip();
-        }
         this.errors.set(errors);
     }
-    createTooltip() {
-        this.tooltipRef ??= this.tooltipService.createTooltip({
-            placement: 'auto',
-            element: this.elementRef,
-            describedBy: this.describedBy,
-            injector: Injector.create({
-                providers: [{ provide: SI_FORM_VALIDATION_TOOLTIP_DATA, useValue: this.errors }]
-            }),
-            tooltip: () => SiFormValidationTooltipComponent,
-            // Not actually used, but errors in the context triggers a resize if the errors changes.
-            tooltipContext: () => this.errors()
-        });
-    }
-    destroyTooltip() {
-        this.tooltipRef?.destroy();
-        this.tooltipRef = undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiFormValidationTooltipDirective, isStandalone: true, selector: "[siFormValidationTooltip]", inputs: { formErrorMapper: { classPropertyName: "formErrorMapper", publicName: "formErrorMapper", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-describedby": "describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormValidationTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiFormValidationTooltipDirective, isStandalone: true, selector: "[siFormValidationTooltip]", inputs: { formErrorMapper: { classPropertyName: "formErrorMapper", publicName: "formErrorMapper", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-describedby": "describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormValidationTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siFormValidationTooltip]',
@@ -625,7 +870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[attr.aria-describedby]': 'describedBy'
                     }
                 }]
-        }], propDecorators: { formErrorMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorMapper", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { formErrorMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorMapper", required: false }] }] } });
 
 /**
  * The error mapper is used to resolve an angular validation error to a {@link TranslatableString}.
@@ -655,11 +900,11 @@ class SiFormModule {
             providers: [provideFormValidationErrorMapper(validationErrorMapper)]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiFormModule, imports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent], exports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiFormModule, imports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent], exports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent],
@@ -676,5 +921,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SI_FORM_ITEM_CONTROL, SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent, SiFormModule, SiFormValidationTooltipDirective, provideFormValidationErrorMapper };
+export { SI_FORM_ITEM_CONTROL, SiFormContainerComponent, SiFormFieldComponent, SiFormFieldsetComponent, SiFormItemComponent, SiFormModule, SiFormValidationTooltipDirective, provideFormValidationErrorMapper, provideSiFormFieldConfig };
 //# sourceMappingURL=siemens-element-ng-form.mjs.map