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

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

@@ -1,108 +1,11 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, booleanAttribute, computed, Component, signal, HostBinding, ChangeDetectionStrategy, InjectionToken, contentChild, ElementRef, isSignal, Input, Injector, HostListener, Directive, NgModule } from '@angular/core';
-import { FormGroup, FormControl, NgControl, RequiredValidator } from '@angular/forms';
+import { input, booleanAttribute, inject, computed, Component, signal, HostBinding, ChangeDetectionStrategy, InjectionToken, Injectable, contentChild, ElementRef, isSignal, Injector, HostListener, Directive, NgModule } from '@angular/core';
 import { SiResponsiveContainerDirective } from '@siemens/element-ng/resize-observer';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { NgControl, RequiredValidator, FormControl } from '@angular/forms';
+import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { SiTooltipService } from '@siemens/element-ng/tooltip';
 
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-/**
- * Creates the map of default error resolver.
- * This is a function as $localize requires an injection context.
- *
- * @internal
- */
-const buildDefaults = () => ({
-    min: $localize `:@@SI_FORM_CONTAINER.ERROR.MIN:The value is too small`,
-    max: $localize `:@@SI_FORM_CONTAINER.ERROR.MAX:The value is too large.`,
-    required: $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED:A value is required.`,
-    requiredTrue: $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED_TRUE:The value should be true.`,
-    email: $localize `:@@SI_FORM_CONTAINER.ERROR.EMAIL:The email is not valid.`,
-    minlength: $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_LENGTH:The minimum number of characters is not met.`,
-    maxlength: $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_LENGTH:A maximum number of characters is exceeded.`,
-    ipv4Address: $localize `:@@SI_FORM_CONTAINER.ERROR.IPV4:Invalid IPv4 address.`,
-    ipv6Address: $localize `:@@SI_FORM_CONTAINER.ERROR.IPV6:Invalid IPv6 address.`,
-    pattern: $localize `:@@SI_FORM_CONTAINER.ERROR.PATTERN:The value does not match the predefined pattern.`,
-    numberFormat: $localize `:@@SI_FORM_CONTAINER.ERROR.NUMBER_FORMAT:The value is not a valid number.`,
-    dateFormat: $localize `:@@SI_FORM_CONTAINER.ERROR.DATE_FORMAT:Invalid date format.`,
-    maxDate: $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_DATE:The date is too far in the future.`,
-    minDate: $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_DATE:The date is too far in the past.`
-});
-/**
- * A service to resolve the validation error of an Angular control to a message or translation key.
- *
- * It can be provided using {@link provideFormValidationErrorMapper}.
- * If not provided, there will be a default instance in the root injector using only the default keys.
- *
- * There can be multiple instances to support providing in a lazy loaded module.
- * If the service cannot find a message, it will try to resolve it using a parent service if available.
- *
- * @internal
- */
-class SiFormValidationErrorService {
-    errorMapper;
-    parent = inject(SiFormValidationErrorService, {
-        optional: true,
-        skipSelf: true
-    });
-    // eslint-disable-next-line @angular-eslint/prefer-inject
-    constructor(errorMapper) {
-        this.errorMapper = errorMapper;
-    }
-    /**
-     * Resolves the provided form errors to a list of {@link SiFormError}.
-     * To resolution order is:
-     * 1. componentMapper
-     * 2. containerMapper using the controlName
-     * 3. containerMapper without controlName
-     * 4. errorMapper of the service using the controlName
-     * 5. errorMapper of the service
-     * 6: parent service
-     */
-    resolveErrors(controlName, errors, componentMapper, containerMapper) {
-        if (!errors) {
-            return [];
-        }
-        /*
-         * Converts the angular error object (like: {required: true, minLength: {actualLength: 1, requiredLength: 3}})
-         * to SiFormError[].
-         * Therefore, the error key is look up in the error mappers.
-         * If it can be resolved, the error will be printed using the resolved text.
-         */
-        return Object.entries(errors).map(([key, params]) => this.resolveError(key, controlName, params, componentMapper, containerMapper));
-    }
-    resolveError(key, controlName, params, componentMapper, containerMapper) {
-        return (this.resolveMessage(key, controlName, params, componentMapper) ??
-            this.resolveMessage(key, controlName, params, containerMapper) ??
-            this.resolveMessage(key, controlName, params, this.errorMapper) ??
-            this.parent?.resolveError(key, controlName, params) ?? { key, params });
-    }
-    resolveMessage(key, controlName, params, mapper) {
-        if (!mapper) {
-            return undefined;
-        }
-        const resolver = mapper[`${controlName}.${key}`] ?? mapper[key];
-        if (resolver) {
-            const message = typeof resolver === 'function' ? resolver(params) : resolver;
-            return message ? { key, message, params } : undefined;
-        }
-        return undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormValidationErrorService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormValidationErrorService, providedIn: 'root', useFactory: () => new SiFormValidationErrorService(buildDefaults()) });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormValidationErrorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                    useFactory: () => new SiFormValidationErrorService(buildDefaults())
-                }]
-        }], ctorParameters: () => [{ type: undefined }] });
-
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
@@ -170,7 +73,6 @@ class SiFormContainerComponent {
         optional: true,
         skipSelf: true
     });
-    errorResolver = inject(SiFormValidationErrorService);
     /** @internal */
     formErrorMapper = computed(() => {
         const map = this.errorCodeTranslateKeyMap();
@@ -212,32 +114,6 @@ class SiFormContainerComponent {
     get invalidFormContainerMessage() {
         return this.userInteractedWithForm && this.form().status === 'INVALID';
     }
-    /**
-     * Returns the validation errors of the form's control when the control name is provided. Otherwise,
-     * returns all validation errors of the form. Returns an empty arry when no form is available or if
-     * the name does not match to a control.
-     * @param controlName - An optional name of a control that is part of the form.
-     *
-     * @deprecated The {@link SiFormItemComponent} is able to display validation errors automatically when `siFormInput` directive is used.
-     */
-    getValidationErrors(controlName) {
-        const form = this.form();
-        if (!form) {
-            return [];
-        }
-        else if (!controlName) {
-            return this.getFormValidationErrorsPrivate(form);
-        }
-        else {
-            const control = form.get(controlName);
-            if (control) {
-                return this.getFormValidationErrorsPrivate(control, controlName);
-            }
-            else {
-                return [];
-            }
-        }
-    }
     getControlNameTranslateKey(controlName) {
         const controlNameTranslateKeyMap = this.controlNameTranslateKeyMap();
         if (!controlNameTranslateKeyMap) {
@@ -245,50 +121,10 @@ class SiFormContainerComponent {
         }
         return controlNameTranslateKeyMap.get(controlName) ?? controlName;
     }
-    getFormValidationErrorsPrivate(control, controlName) {
-        let errors = [];
-        // a form must either consist of
-        // a) a formgroup (with nested form controls or groups) or
-        // b) a single form control
-        if (control instanceof FormGroup) {
-            const formGroupErrors = this.getFormGroupErrors(control);
-            errors = errors.concat(formGroupErrors);
-            if (control.controls) {
-                Object.keys(control.controls).forEach(key => {
-                    const formGroupControl = control.controls[key];
-                    const formGroupControlErrors = this.getFormValidationErrorsPrivate(formGroupControl, key);
-                    errors = errors.concat(formGroupControlErrors);
-                });
-            }
-        }
-        else if (control instanceof FormControl) {
-            errors.push(...this.errorResolver
-                .resolveErrors(controlName, control.errors, undefined, this.formErrorMapper())
-                .map(error => ({
-                controlName,
-                errorCode: error.key,
-                errorParams: error.params,
-                errorCodeTranslationKey: error.message,
-                controlNameTranslationKey: controlName
-                    ? this.getControlNameTranslateKey(controlName)
-                    : undefined
-            })));
-        }
-        return errors;
-    }
-    getFormGroupErrors(formGroup) {
-        return this.errorResolver
-            .resolveErrors(null, formGroup.errors, undefined, this.formErrorMapper())
-            .map(error => ({
-            errorCode: error.key,
-            errorParams: error.params,
-            errorCodeTranslationKey: error.message
-        }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-form-container', imports: [NgTemplateOutlet, SiResponsiveContainerDirective], host: {
                         '[style.--si-form-label-width]': 'labelWidth()'
@@ -346,16 +182,16 @@ class SiFormFieldsetComponent {
     unregisterFormItem(item) {
         this.formItems.update(items => items.filter(i => i !== item));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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": "this.labelId" }, classAttribute: "si-form-input" }, ngImport: i0, template: "<div class=\"pt-1 pb-0\">\n  <div class=\"form-label\" [class.required]=\"isRequired()\" [id]=\"labelId\">{{\n    label() | translate\n  }}</div>\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{margin-block-end:12px;display:flex;flex-direction:column}:host.si-form-input .form-item-content{flex:1 1 0;display:flex;align-items:center;flex-wrap:wrap;position:relative}.form-label:empty{display:none}:host-context(si-form-fieldset) :host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm),:host-context(.si-container-md),:host-context(.si-container-lg),:host-context(.si-container-xl),:host-context(.si-container-xxl){flex-direction:row}: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{padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1.143}: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: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: "20.0.6", ngImport: i0, type: SiFormFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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": "this.labelId" }, classAttribute: "si-form-input" }, ngImport: i0, template: "<div class=\"form-label\" [class.required]=\"isRequired()\" [id]=\"labelId\">{{\n  label() | translate\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:1.143}: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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-form-fieldset', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'group',
                         class: 'si-form-input',
                         '[style.--si-form-label-width]': 'labelWidth()'
-                    }, template: "<div class=\"pt-1 pb-0\">\n  <div class=\"form-label\" [class.required]=\"isRequired()\" [id]=\"labelId\">{{\n    label() | translate\n  }}</div>\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{margin-block-end:12px;display:flex;flex-direction:column}:host.si-form-input .form-item-content{flex:1 1 0;display:flex;align-items:center;flex-wrap:wrap;position:relative}.form-label:empty{display:none}:host-context(si-form-fieldset) :host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm),:host-context(.si-container-md),:host-context(.si-container-lg),:host-context(.si-container-xl),:host-context(.si-container-xxl){flex-direction:row}: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{padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1.143}: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: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\" [class.required]=\"isRequired()\" [id]=\"labelId\">{{\n  label() | translate\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:1.143}: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"] }]
         }], propDecorators: { labelId: [{
                 type: HostBinding,
                 args: ['attr.aria-labelledby']
@@ -367,6 +203,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  */
 const SI_FORM_ITEM_CONTROL = new InjectionToken('si.form-item.control');
 
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Creates the map of default error resolver.
+ * This is a function as $localize requires an injection context.
+ *
+ * @internal
+ */
+const buildDefaults = () => ({
+    min: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN:The value is too small`),
+    max: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX:The value is too large.`),
+    required: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED:A value is required.`),
+    requiredTrue: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED_TRUE:The value should be true.`),
+    email: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.EMAIL:The email is not valid.`),
+    minlength: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_LENGTH:The minimum number of characters is not met.`),
+    maxlength: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_LENGTH:A maximum number of characters is exceeded.`),
+    ipv4Address: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.IPV4:Invalid IPv4 address.`),
+    ipv6Address: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.IPV6:Invalid IPv6 address.`),
+    pattern: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.PATTERN:The value does not match the predefined pattern.`),
+    numberFormat: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.NUMBER_FORMAT:The value is not a valid number.`),
+    dateFormat: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.DATE_FORMAT:Invalid date format.`),
+    maxDate: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_DATE:The date is too far in the future.`),
+    minDate: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_DATE:The date is too far in the past.`)
+});
+/**
+ * A service to resolve the validation error of an Angular control to a message or translation key.
+ *
+ * It can be provided using {@link provideFormValidationErrorMapper}.
+ * If not provided, there will be a default instance in the root injector using only the default keys.
+ *
+ * There can be multiple instances to support providing in a lazy loaded module.
+ * If the service cannot find a message, it will try to resolve it using a parent service if available.
+ *
+ * @internal
+ */
+class SiFormValidationErrorService {
+    errorMapper;
+    parent = inject(SiFormValidationErrorService, {
+        optional: true,
+        skipSelf: true
+    });
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(errorMapper) {
+        this.errorMapper = errorMapper;
+    }
+    /**
+     * Resolves the provided form errors to a list of {@link SiFormError}.
+     * To resolution order is:
+     * 1. componentMapper
+     * 2. containerMapper using the controlName
+     * 3. containerMapper without controlName
+     * 4. errorMapper of the service using the controlName
+     * 5. errorMapper of the service
+     * 6: parent service
+     */
+    resolveErrors(controlName, errors, componentMapper, containerMapper) {
+        if (!errors) {
+            return [];
+        }
+        /*
+         * Converts the angular error object (like: {required: true, minLength: {actualLength: 1, requiredLength: 3}})
+         * to SiFormError[].
+         * Therefore, the error key is look up in the error mappers.
+         * If it can be resolved, the error will be printed using the resolved text.
+         */
+        return Object.entries(errors).map(([key, params]) => this.resolveError(key, controlName, params, componentMapper, containerMapper));
+    }
+    resolveError(key, controlName, params, componentMapper, containerMapper) {
+        return (this.resolveMessage(key, controlName, params, componentMapper) ??
+            this.resolveMessage(key, controlName, params, containerMapper) ??
+            this.resolveMessage(key, controlName, params, this.errorMapper) ??
+            this.parent?.resolveError(key, controlName, params) ?? { key, params });
+    }
+    resolveMessage(key, controlName, params, mapper) {
+        if (!mapper) {
+            return undefined;
+        }
+        const resolver = mapper[`${controlName}.${key}`] ?? mapper[key];
+        if (resolver) {
+            const message = typeof resolver === 'function' ? resolver(params) : resolver;
+            return message ? { key, message, params } : undefined;
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationErrorService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationErrorService, providedIn: 'root', useFactory: () => new SiFormValidationErrorService(buildDefaults()) });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationErrorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: () => new SiFormValidationErrorService(buildDefaults())
+                }]
+        }], ctorParameters: () => [{ type: undefined }] });
+
 /**
  * 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`.
@@ -414,8 +347,6 @@ class SiFormFieldNativeControl {
  * SPDX-License-Identifier: MIT
  */
 class SiFormItemComponent {
-    /** @deprecated property has longer an effect. SiFormItem detects IDs automatically  */
-    inputId;
     /**
      * The label to be displayed in the form item.
      * It will be translated if a translation key is available.
@@ -431,12 +362,6 @@ class SiFormItemComponent {
      * @example labelWidth="100px"
      */
     labelWidth = input();
-    /**
-     * @deprecated This input has no effect and can be removed.
-     *
-     * @defaultValue false
-     */
-    readonly = false;
     /**
      * Disables the automatic error printing. Error printing will be enabled by default in v46.
      *
@@ -461,8 +386,6 @@ class SiFormItemComponent {
     requiredValidator = contentChild(RequiredValidator, { descendants: true });
     /** @internal */
     errors = signal([]);
-    /** @deprecated Remove with v48 */
-    isLegacyMode = signal(false);
     fieldset = inject(SiFormFieldsetComponent, { optional: true });
     container = inject(SiFormContainerComponent, { optional: true });
     get formItemId() {
@@ -482,7 +405,6 @@ class SiFormItemComponent {
             : (fieldControl?.errormessageId ?? null);
     }
     fieldControl = computed(() => this.fieldControlQuery() ?? this.fieldControlNative());
-    elementRef = inject(ElementRef);
     validationErrorService = inject(SiFormValidationErrorService);
     requiredTestControl = new FormControl('');
     validator;
@@ -518,9 +440,6 @@ class SiFormItemComponent {
         this.updateRequiredState();
         this.updateValidationMessages();
     }
-    ngAfterViewInit() {
-        this.isLegacyMode.set(!!this.elementRef.nativeElement.querySelector('.form-check'));
-    }
     ngOnDestroy() {
         this.fieldset?.unregisterFormItem(this);
     }
@@ -558,10 +477,10 @@ class SiFormItemComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiFormItemComponent, isStandalone: true, selector: "si-form-item", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, 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: "@if (!fieldControl()?.isFormCheck || (isLegacyMode() && label())) {\n  @if (label()) {\n    @let labeledBy = formItemLabelledBy;\n    @if (labeledBy) {\n      <span\n        class=\"text-break form-label\"\n        [id]=\"labeledBy\"\n        [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n        >{{ label() | translate }}</span\n      >\n    } @else {\n      <label class=\"text-break form-label\" [for]=\"formItemId\" [class.required]=\"required()\">{{\n        label() | translate\n      }}</label>\n    }\n  }\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\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  </div>\n} @else {\n  <!--Block the space if no form-field is provided. Otherwise it looks weird.-->\n  @if (!fieldset) {\n    <div class=\"form-label\"></div>\n  }\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"checkbox\" />\n    @if (label()) {\n      @if (fieldControl()?.labelledby) {\n        <span\n          class=\"text-break form-check-label\"\n          [id]=\"fieldControl()!.labelledby\"\n          [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n          >{{ label()! | translate }}</span\n        >\n      } @else {\n        <label\n          class=\"text-break form-check-label\"\n          [for]=\"formItemId\"\n          [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n          >{{ label()! | translate }}</label\n        >\n      }\n    }\n    <ng-container [ngTemplateOutlet]=\"content\" />\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  </div>\n}\n\n<ng-template #checkbox>\n  <ng-content select=\"input[type='checkbox'], input[type='radio']\" />\n</ng-template>\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host.si-form-input{margin-block-end:12px;display:flex;flex-direction:column}:host.si-form-input .form-item-content{flex:1 1 0;display:flex;align-items:center;flex-wrap:wrap;position:relative}.form-label:empty{display:none}:host-context(si-form-fieldset) :host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm),:host-context(.si-container-md),:host-context(.si-container-lg),:host-context(.si-container-xl),:host-context(.si-container-xxl){flex-direction:row}: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{padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1.143}: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: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" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormItemComponent, isStandalone: true, selector: "si-form-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, 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    @let labeledBy = formItemLabelledBy;\n    @if (labeledBy) {\n      <span\n        class=\"text-break\"\n        [id]=\"labeledBy\"\n        [class.form-label]=\"!fieldControl()?.isFormCheck\"\n        [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n        [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n        >{{ label()! | translate }}</span\n      >\n    } @else {\n      <label\n        class=\"text-break\"\n        [for]=\"formItemId\"\n        [class.form-label]=\"!fieldControl()?.isFormCheck\"\n        [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n        [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n        >{{ label()! | translate }}</label\n      >\n    }\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:1.143}: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" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-form-item', imports: [SiTranslatePipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.required]': 'required()',
@@ -569,13 +488,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         '[class.form-check]': 'fieldControl()?.isFormCheck',
                         '[class.form-check-inline]': 'fieldset?.inline()',
                         '[class.si-form-input]': '!fieldset'
-                    }, template: "@if (!fieldControl()?.isFormCheck || (isLegacyMode() && label())) {\n  @if (label()) {\n    @let labeledBy = formItemLabelledBy;\n    @if (labeledBy) {\n      <span\n        class=\"text-break form-label\"\n        [id]=\"labeledBy\"\n        [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n        >{{ label() | translate }}</span\n      >\n    } @else {\n      <label class=\"text-break form-label\" [for]=\"formItemId\" [class.required]=\"required()\">{{\n        label() | translate\n      }}</label>\n    }\n  }\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\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  </div>\n} @else {\n  <!--Block the space if no form-field is provided. Otherwise it looks weird.-->\n  @if (!fieldset) {\n    <div class=\"form-label\"></div>\n  }\n  <div class=\"form-item-content\">\n    <ng-container [ngTemplateOutlet]=\"checkbox\" />\n    @if (label()) {\n      @if (fieldControl()?.labelledby) {\n        <span\n          class=\"text-break form-check-label\"\n          [id]=\"fieldControl()!.labelledby\"\n          [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n          >{{ label()! | translate }}</span\n        >\n      } @else {\n        <label\n          class=\"text-break form-check-label\"\n          [for]=\"formItemId\"\n          [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n          >{{ label()! | translate }}</label\n        >\n      }\n    }\n    <ng-container [ngTemplateOutlet]=\"content\" />\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  </div>\n}\n\n<ng-template #checkbox>\n  <ng-content select=\"input[type='checkbox'], input[type='radio']\" />\n</ng-template>\n<ng-template #content>\n  <ng-content />\n</ng-template>\n", styles: [":host.si-form-input{margin-block-end:12px;display:flex;flex-direction:column}:host.si-form-input .form-item-content{flex:1 1 0;display:flex;align-items:center;flex-wrap:wrap;position:relative}.form-label:empty{display:none}:host-context(si-form-fieldset) :host(.form-check):not(.form-check-inline){display:block}:host(.form-check):has(.form-check){padding-block:0}:host-context(.si-container-sm),:host-context(.si-container-md),:host-context(.si-container-lg),:host-context(.si-container-xl),:host-context(.si-container-xxl){flex-direction:row}: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{padding-block:8px;padding-inline:16px;inline-size:var(--si-form-label-width, 16.6666666667%);line-height:1.143}: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: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: { inputId: [{
-                type: Input
-            }], readonly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+                    }, 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    @let labeledBy = formItemLabelledBy;\n    @if (labeledBy) {\n      <span\n        class=\"text-break\"\n        [id]=\"labeledBy\"\n        [class.form-label]=\"!fieldControl()?.isFormCheck\"\n        [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n        [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n        >{{ label()! | translate }}</span\n      >\n    } @else {\n      <label\n        class=\"text-break\"\n        [for]=\"formItemId\"\n        [class.form-label]=\"!fieldControl()?.isFormCheck\"\n        [class.form-check-label]=\"fieldControl()?.isFormCheck\"\n        [class.required]=\"required() && !this.fieldset?.hasOnlyRadios()\"\n        >{{ label()! | translate }}</label\n      >\n    }\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:1.143}: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"] }]
+        }] });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -584,14 +498,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", 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: "19.0.6", ngImport: i0, type: SiFormValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiFormValidationTooltipComponent, isStandalone: true, selector: "si-form-validation-tooltip", host: { classAttribute: "d-flex flex-column gap-2" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormValidationTooltipComponent, isStandalone: true, selector: "si-form-validation-tooltip", host: { classAttribute: "d-flex flex-column gap-2" }, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormValidationTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationTooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-form-validation-tooltip',
@@ -686,10 +600,10 @@ class SiFormValidationTooltipDirective {
         this.tooltipRef?.destroy();
         this.tooltipRef = undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormValidationTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiFormValidationTooltipDirective, isStandalone: true, selector: "[siFormValidationTooltip]", inputs: { formErrorMapper: { classPropertyName: "formErrorMapper", publicName: "formErrorMapper", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "increaseActivation()", "mouseenter": "increaseActivation()", "blur": "decreaseActivation()", "mouseleave": "decreaseActivation()" }, properties: { "attr.aria-describedby": "describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiFormValidationTooltipDirective, isStandalone: true, selector: "[siFormValidationTooltip]", inputs: { formErrorMapper: { classPropertyName: "formErrorMapper", publicName: "formErrorMapper", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "increaseActivation()", "mouseenter": "increaseActivation()", "blur": "decreaseActivation()", "mouseleave": "decreaseActivation()" }, properties: { "attr.aria-describedby": "describedBy" } }, providers: [SiTooltipService], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormValidationTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siFormValidationTooltip]',
@@ -712,50 +626,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 args: ['mouseleave']
             }] } });
 
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-/** @deprecated This directive is no longer needed. {@link SiFormItemComponent} will detect native controls automatically. */
-class SiFormItemControlInputDirective {
-    static idCounter = 0;
-    id = `__si-form-element-control-input-${SiFormItemControlInputDirective.idCounter++}`;
-    set type(value) {
-        this.isFormCheck = value === 'checkbox' || value === 'radio';
-        this.formControlClass = this.isFormCheck ? 'form-check-input' : 'form-control';
-    }
-    formControlClass = 'form-control';
-    /**
-     * Indicate the form item is a checkbox or radio input.
-     * @defaultValue false
-     */
-    isFormCheck = false;
-    /** @internal */
-    errormessageId = `${this.id}-errormessage`;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormItemControlInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiFormItemControlInputDirective, isStandalone: true, selector: "[siFormItemControl]", inputs: { id: "id", type: "type" }, host: { properties: { "id": "this.id", "class": "this.formControlClass", "attr.aria-describedby": "this.errormessageId" } }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiFormItemControlInputDirective }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormItemControlInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[siFormItemControl]',
-                    providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiFormItemControlInputDirective }]
-                }]
-        }], propDecorators: { id: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['id']
-            }], type: [{
-                type: Input
-            }], formControlClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], errormessageId: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
-            }] } });
-
 /**
  * The error mapper is used to resolve an angular validation error to a {@link TranslatableString}.
  * It will be merged with already existing error mappers.
@@ -784,31 +654,15 @@ class SiFormModule {
             providers: [provideFormValidationErrorMapper(validationErrorMapper)]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiFormModule, imports: [SiFormContainerComponent,
-            SiFormFieldsetComponent,
-            SiFormItemComponent,
-            SiFormItemControlInputDirective], exports: [SiFormContainerComponent,
-            SiFormFieldsetComponent,
-            SiFormItemComponent,
-            SiFormItemControlInputDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiFormModule, imports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent], exports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        SiFormContainerComponent,
-                        SiFormFieldsetComponent,
-                        SiFormItemComponent,
-                        SiFormItemControlInputDirective
-                    ],
-                    exports: [
-                        SiFormContainerComponent,
-                        SiFormFieldsetComponent,
-                        SiFormItemComponent,
-                        SiFormItemControlInputDirective
-                    ]
+                    imports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent],
+                    exports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent]
                 }]
         }] });
 
@@ -821,5 +675,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SI_FORM_ITEM_CONTROL, SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent, SiFormItemControlInputDirective, SiFormModule, SiFormValidationTooltipDirective, provideFormValidationErrorMapper };
+export { SI_FORM_ITEM_CONTROL, SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent, SiFormModule, SiFormValidationTooltipDirective, provideFormValidationErrorMapper };
 //# sourceMappingURL=siemens-element-ng-form.mjs.map