@siemens/element-ng 48.10.0 → 49.0.0-rc.2

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

@@ -11,29 +11,29 @@ class SiFooterComponent {
     /**
      * Copyright of your application.
      */
-    copyright = input.required();
+    copyright = input.required(...(ngDevMode ? [{ debugName: "copyright" }] : []));
     /**
      * List of additional links.
      */
-    links = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFooterComponent, isStandalone: true, selector: "si-footer", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: true, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer>\n  <div class=\"container-fluid\">\n    <div class=\"row\">\n      <div class=\"col-sm-4 col-md-6\"> \u00A9 {{ copyright() }} </div>\n      <div class=\"col-sm-8 col-md-6 text-sm-end\">\n        @for (link of links(); track $index) {\n          <span>\n            <a [siLink]=\"link\">\n              {{ link.title | translate }}\n            </a>\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</footer>\n", styles: ["footer{margin-block-end:0;background-color:var(--element-base-0);color:var(--element-text-secondary);font-size:.75rem;border-block-start:1px solid var(--element-ui-4);overflow:auto}a,span{display:inline-flex}a+a:before,a+span:before,span+a:before,span+span:before{content:\"|\";padding-inline:8px}.container-fluid{padding-block:12px}\n"], dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    links = input(...(ngDevMode ? [undefined, { debugName: "links" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFooterComponent, isStandalone: true, selector: "si-footer", inputs: { copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: true, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<footer>\n  <div class=\"container-fluid\">\n    <div class=\"row\">\n      <div class=\"col-sm-4 col-md-6\"> \u00A9 {{ copyright() }} </div>\n      <div class=\"col-sm-8 col-md-6 text-sm-end\">\n        @for (link of links(); track $index) {\n          <span>\n            <a [siLink]=\"link\">\n              {{ link.title | translate }}\n            </a>\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</footer>\n", styles: ["footer{margin-block-end:0;background-color:var(--element-base-0);color:var(--element-text-secondary);font-size:.75rem;border-block-start:1px solid var(--element-ui-4);overflow:auto}a,span{display:inline-flex}a+a:before,a+span:before,span+a:before,span+span:before{content:\"|\";padding-inline:8px}.container-fluid{padding-block:12px}\n"], dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-footer', imports: [SiLinkDirective, SiTranslatePipe], template: "<footer>\n  <div class=\"container-fluid\">\n    <div class=\"row\">\n      <div class=\"col-sm-4 col-md-6\"> \u00A9 {{ copyright() }} </div>\n      <div class=\"col-sm-8 col-md-6 text-sm-end\">\n        @for (link of links(); track $index) {\n          <span>\n            <a [siLink]=\"link\">\n              {{ link.title | translate }}\n            </a>\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</footer>\n", styles: ["footer{margin-block-end:0;background-color:var(--element-base-0);color:var(--element-text-secondary);font-size:.75rem;border-block-start:1px solid var(--element-ui-4);overflow:auto}a,span{display:inline-flex}a+a:before,a+span:before,span+a:before,span+span:before{content:\"|\";padding-inline:8px}.container-fluid{padding-block:12px}\n"] }]
-        }] });
+        }], propDecorators: { copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: true }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiFooterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiFooterModule, imports: [SiFooterComponent], exports: [SiFooterComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFooterModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiFooterModule, imports: [SiFooterComponent], exports: [SiFooterComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFooterModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFooterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFooterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiFooterComponent],

package/fesm2022/siemens-element-ng-footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-footer.mjs","sources":["../../../../projects/element-ng/footer/si-footer.component.ts","../../../../projects/element-ng/footer/si-footer.component.html","../../../../projects/element-ng/footer/si-footer.module.ts","../../../../projects/element-ng/footer/index.ts","../../../../projects/element-ng/footer/siemens-element-ng-footer.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input } from '@angular/core';\nimport { Link, SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-footer',\n  imports: [SiLinkDirective, SiTranslatePipe],\n  templateUrl: './si-footer.component.html',\n  styleUrl: './si-footer.component.scss'\n})\nexport class SiFooterComponent {\n  /**\n   * Copyright of your application.\n   */\n  readonly copyright = input.required<string>();\n  /**\n   * List of additional links.\n   */\n  readonly links = input<Link[]>();\n}\n","<footer>\n  <div class=\"container-fluid\">\n    <div class=\"row\">\n      <div class=\"col-sm-4 col-md-6\"> © {{ copyright() }} </div>\n      <div class=\"col-sm-8 col-md-6 text-sm-end\">\n        @for (link of links(); track $index) {\n          <span>\n            <a [siLink]=\"link\">\n              {{ link.title | translate }}\n            </a>\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</footer>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiFooterComponent } from './si-footer.component';\n\n@NgModule({\n  imports: [SiFooterComponent],\n  exports: [SiFooterComponent]\n})\nexport class SiFooterModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-footer.component';\nexport * from './si-footer.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MAWU,iBAAiB,CAAA;AAC5B;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAU;AAC7C;;AAEG;IACM,KAAK,GAAG,KAAK,EAAU;uGARrB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECd9B,sbAgBA,EAAA,MAAA,EAAA,CAAA,iVAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNY,eAAe,uMAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAI/B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,sbAAA,EAAA,MAAA,EAAA,CAAA,iVAAA,CAAA,EAAA;;;AEV7C;;;AAGG;MASU,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAd,cAAc,EAAA,OAAA,EAAA,CAHf,iBAAiB,CAAA,EAAA,OAAA,EAAA,CACjB,iBAAiB,CAAA,EAAA,CAAA;wGAEhB,cAAc,EAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,OAAO,EAAE,CAAC,iBAAiB;AAC5B,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-footer.mjs","sources":["../../../../projects/element-ng/footer/si-footer.component.ts","../../../../projects/element-ng/footer/si-footer.component.html","../../../../projects/element-ng/footer/si-footer.module.ts","../../../../projects/element-ng/footer/index.ts","../../../../projects/element-ng/footer/siemens-element-ng-footer.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { Component, input } from '@angular/core';\nimport { Link, SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-footer',\n  imports: [SiLinkDirective, SiTranslatePipe],\n  templateUrl: './si-footer.component.html',\n  styleUrl: './si-footer.component.scss'\n})\nexport class SiFooterComponent {\n  /**\n   * Copyright of your application.\n   */\n  readonly copyright = input.required<string>();\n  /**\n   * List of additional links.\n   */\n  readonly links = input<Link[]>();\n}\n","<footer>\n  <div class=\"container-fluid\">\n    <div class=\"row\">\n      <div class=\"col-sm-4 col-md-6\"> © {{ copyright() }} </div>\n      <div class=\"col-sm-8 col-md-6 text-sm-end\">\n        @for (link of links(); track $index) {\n          <span>\n            <a [siLink]=\"link\">\n              {{ link.title | translate }}\n            </a>\n          </span>\n        }\n      </div>\n    </div>\n  </div>\n</footer>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiFooterComponent } from './si-footer.component';\n\n@NgModule({\n  imports: [SiFooterComponent],\n  exports: [SiFooterComponent]\n})\nexport class SiFooterModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-footer.component';\nexport * from './si-footer.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MAWU,iBAAiB,CAAA;AAC5B;;AAEG;AACM,IAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,oDAAU;AAC7C;;AAEG;IACM,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;uGARrB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECd9B,sbAgBA,EAAA,MAAA,EAAA,CAAA,iVAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNY,eAAe,uMAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA;;2FAI/B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAN7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,sbAAA,EAAA,MAAA,EAAA,CAAA,iVAAA,CAAA,EAAA;;;AEV7C;;;AAGG;MASU,cAAc,CAAA;uGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAd,cAAc,EAAA,OAAA,EAAA,CAHf,iBAAiB,CAAA,EAAA,OAAA,EAAA,CACjB,iBAAiB,CAAA,EAAA,CAAA;wGAEhB,cAAc,EAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,OAAO,EAAE,CAAC,iBAAiB;AAC5B,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}

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

@@ -15,7 +15,7 @@ class SiFormContainerComponent {
      * Set the form entity to the container to enable the overall form validation on in
      * the form container edit panel.
      */
-    form = input();
+    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
     /**
      * 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 +23,13 @@ class SiFormContainerComponent {
      *
      * @defaultValue false
      */
-    readonly = input(false, { transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), 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();
+    contentContainerBreakpoints = input(...(ngDevMode ? [undefined, { debugName: "contentContainerBreakpoints" }] : []));
     /**
      * 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 +37,7 @@ class SiFormContainerComponent {
      *
      * @defaultValue false
      */
-    disableContainerBreakpoints = input(false, { transform: booleanAttribute });
+    disableContainerBreakpoints = input(false, { ...(ngDevMode ? { debugName: "disableContainerBreakpoints" } : {}), 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 +45,7 @@ class SiFormContainerComponent {
      *
      * Use the input to set your own translate keys for the form validators you need.
      */
-    errorCodeTranslateKeyMap = input();
+    errorCodeTranslateKeyMap = input(...(ngDevMode ? [undefined, { debugName: "errorCodeTranslateKeyMap" }] : []));
     /**
      * 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 +56,19 @@ class SiFormContainerComponent {
      * new Map<string, string>()
      * ```
      */
-    controlNameTranslateKeyMap = input(new Map());
+    controlNameTranslateKeyMap = input(new Map(), ...(ngDevMode ? [{ debugName: "controlNameTranslateKeyMap" }] : []));
     /**
      * Disables the automatic error printing in all nested {@link SiFormItemComponent}. Error printing will be enabled by default in v46.
      *
      * @defaultValue false
      */
-    disableErrorPrinting = input(false, { transform: booleanAttribute });
+    disableErrorPrinting = input(false, { ...(ngDevMode ? { debugName: "disableErrorPrinting" } : {}), transform: booleanAttribute });
     /**
      * A custom width value to be applied to all labels.
      *
      * @example labelWidth="100px".
      */
-    labelWidth = input();
+    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
     hasParentContainer = !!inject(SiFormContainerComponent, {
         optional: true,
         skipSelf: true
@@ -86,7 +86,7 @@ class SiFormContainerComponent {
         return {
             ...customMapper
         };
-    });
+    }, ...(ngDevMode ? [{ debugName: "formErrorMapper" }] : []));
     /**
      * Indicates whether the user interacted with the form.
      * @returns `true`, if the user selected at least one form element and
@@ -121,15 +121,15 @@ class SiFormContainerComponent {
         }
         return controlNameTranslateKeyMap.get(controlName) ?? controlName;
     }
-    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"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-form-container', imports: [NgTemplateOutlet, SiResponsiveContainerDirective], 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 }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -138,22 +138,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 class SiFormFieldsetComponent {
     static labelIdCounter = 0;
     /** The label for the entire fieldset. */
-    label = input.required();
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Overrides the parent label width. */
-    labelWidth = input();
+    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
     /**
      * Adds a required marker to the label
      *
      * @defaultValue false
      */
-    required = input(false, { transform: booleanAttribute });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
     /**
      * Switches all child inputs to inline mode
      *
      * @defaultValue false
      */
-    inline = input(false, { transform: booleanAttribute });
-    formItems = signal([]);
+    inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : {}), transform: booleanAttribute });
+    formItems = signal([], ...(ngDevMode ? [{ debugName: "formItems" }] : []));
     /** @internal */
     hasOnlyRadios = computed(() => {
         // Check if the fieldset only contains radio buttons.
@@ -164,12 +164,12 @@ class SiFormFieldsetComponent {
             return items.every(item => item.ngControl()?.name === first.ngControl()?.name);
         }
         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() : []);
-    touched = signal(false);
-    isRequired = computed(() => this.required() || (this.hasOnlyRadios() && this.formItems().every(item => item.required())));
+    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" }] : []));
     labelId = `__si-form-fieldset-label-${SiFormFieldsetComponent.labelIdCounter++}`;
     ngDoCheck() {
         this.touched.set(this.formItems().some(item => item.ngControl()?.touched));
@@ -182,17 +182,17 @@ class SiFormFieldsetComponent {
     unregisterFormItem(item) {
         this.formItems.update(items => items.filter(i => i !== item));
     }
-    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 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:1.1428571429}: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: "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": "this.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:1.1428571429}: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: "20.0.6", ngImport: i0, type: SiFormFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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=\"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:1.1428571429}: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: [{
+        }], 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 }] }], labelId: [{
                 type: HostBinding,
                 args: ['attr.aria-labelledby']
             }] } });
@@ -214,26 +214,39 @@ const SI_FORM_ITEM_CONTROL = new InjectionToken('si.form-item.control');
  * @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.`),
+    // Phone number specific
+    notSupportedPhoneNumberCountry: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.PHONE_COUNTRY:Unsupported country/region code`),
+    invalidPhoneNumberFormat: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.INVALID_PHONE:Invalid phone number`),
+    // IP address specific
+    ipv4Address: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.IPV4:Invalid IPv4 address`),
+    ipv6Address: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.IPV6:Invalid IPv6 address`),
+    // Min / max
+    max: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX:Max. {{max}}`),
+    min: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN:Min. {{min}}`),
+    maxlength: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_LENGTH:Max. {{requiredLength}} characters`),
+    minlength: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_LENGTH:Min. {{requiredLength}} characters`),
+    // Date specific
+    dateFormat: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.DATE_FORMAT:Invalid date`),
+    endBeforeStart: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.END_BEFORE_START:End date before start date`),
+    invalidEndDateFormat: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.DATE_FORMAT_END:Invalid end date`),
+    invalidStartDateFormat: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.DATE_FORMAT_START:Invalid start date`),
+    maxDate: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_DATE:Date prior to {{maxString}} required`),
+    minDate: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_DATE:Date after {{minString}} required`),
+    maxTime: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_TIME:Time prior to {{maxString}} required`),
+    minTime: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_TIME:Time after {{minString}} required`),
+    rangeAfterMaxDate: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.RANGE_AFTER_MAX_DATE:Period prior to {{maxString}} required`),
+    rangeBeforeMinDate: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.RANGE_BEFORE_MIN_DATE:Period after {{minString}} required`),
+    // Time units
+    hours: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.HOURS:Integer between 0 and {{max}} required`),
+    minutes: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MINUTES:Integer between 0 and 59 required`),
+    seconds: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.SECONDS:Integer between 0 and 59 required`),
+    milliseconds: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MILLISECONDS:Integer between 0 and 999 required`),
+    // 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.`),
-    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.`),
-    maxTime: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MAX_TIME:The time is too far in the future.`),
-    minTime: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MIN_TIME:The time is too far in the past.`),
-    hours: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.HOURS:The hours are not valid.`),
-    minutes: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MINUTES:The minutes are not valid.`),
-    seconds: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.SECONDS:The seconds are not valid.`),
-    milliseconds: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.MILLISECONDS:The milliseconds are not valid.`)
+    required: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED:Required`),
+    requiredTrue: t(() => $localize `:@@SI_FORM_CONTAINER.ERROR.REQUIRED_TRUE:Required`)
 });
 /**
  * A service to resolve the validation error of an Angular control to a message or translation key.
@@ -295,10 +308,10 @@ class SiFormValidationErrorService {
         }
         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()) });
+    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()) });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormValidationErrorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationErrorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -357,7 +370,7 @@ class SiFormItemComponent {
      * The label to be displayed in the form item.
      * It will be translated if a translation key is available.
      */
-    label = input();
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     /**
      * 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.
@@ -367,31 +380,29 @@ class SiFormItemComponent {
      *
      * @example labelWidth="100px"
      */
-    labelWidth = input();
+    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
     /**
      * Disables the automatic error printing. Error printing will be enabled by default in v46.
      *
      * @defaultValue false
      */
-    disableErrorPrinting = input(false, { transform: booleanAttribute });
-    formErrorMapper = input();
+    disableErrorPrinting = input(false, { ...(ngDevMode ? { debugName: "disableErrorPrinting" } : {}), transform: booleanAttribute });
+    formErrorMapper = input(...(ngDevMode ? [undefined, { debugName: "formErrorMapper" }] : []));
     /**
      * 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, { transform: booleanAttribute, alias: 'required' });
-    fieldControlQuery = contentChild(SI_FORM_ITEM_CONTROL, { descendants: true });
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : {}), transform: booleanAttribute, alias: 'required' });
+    fieldControlQuery = contentChild(SI_FORM_ITEM_CONTROL, { ...(ngDevMode ? { debugName: "fieldControlQuery" } : {}), descendants: true });
     /** @internal */
-    ngControl = contentChild(NgControl, { descendants: true });
-    controlElementRef = contentChild(NgControl, {
-        read: ElementRef,
-        descendants: true
-    });
-    requiredValidator = contentChild(RequiredValidator, { descendants: true });
+    ngControl = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControl" } : {}), descendants: true });
+    controlElementRef = contentChild(NgControl, { ...(ngDevMode ? { debugName: "controlElementRef" } : {}), read: ElementRef,
+        descendants: true });
+    requiredValidator = contentChild(RequiredValidator, { ...(ngDevMode ? { debugName: "requiredValidator" } : {}), descendants: true });
     /** @internal */
-    errors = signal([]);
+    errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
     fieldset = inject(SiFormFieldsetComponent, { optional: true });
     container = inject(SiFormContainerComponent, { optional: true });
     get formItemId() {
@@ -410,25 +421,25 @@ class SiFormItemComponent {
             ? (fieldControl?.errormessageId() ?? null)
             : (fieldControl?.errormessageId ?? null);
     }
-    fieldControl = computed(() => this.fieldControlQuery() ?? this.fieldControlNative());
+    fieldControl = computed(() => this.fieldControlQuery() ?? this.fieldControlNative(), ...(ngDevMode ? [{ debugName: "fieldControl" }] : []));
     validationErrorService = inject(SiFormValidationErrorService);
     requiredTestControl = new FormControl('');
     validator;
     previousErrors;
-    hasRequiredValidator = signal(false);
-    fieldControlNative = signal(undefined);
+    hasRequiredValidator = signal(false, ...(ngDevMode ? [{ debugName: "hasRequiredValidator" }] : []));
+    fieldControlNative = signal(undefined, ...(ngDevMode ? [{ debugName: "fieldControlNative" }] : []));
     labelWidthCssVar = computed(() => {
         const labelWidth = this.labelWidth();
         if (typeof labelWidth === 'number') {
             return `${labelWidth}px`;
         }
         return labelWidth;
-    });
+    }, ...(ngDevMode ? [{ debugName: "labelWidthCssVar" }] : []));
     printErrors = computed(() => {
         return !this.disableErrorPrinting() && !(this.container?.disableErrorPrinting() ?? false);
-    });
+    }, ...(ngDevMode ? [{ debugName: "printErrors" }] : []));
     /** @internal */
-    required = computed(() => this.requiredInput() || this.hasRequiredValidator());
+    required = computed(() => this.requiredInput() || this.hasRequiredValidator(), ...(ngDevMode ? [{ debugName: "required" }] : []));
     ngOnChanges(changes) {
         if (changes.formErrorMapper) {
             this.updateValidationMessages();
@@ -483,10 +494,10 @@ class SiFormItemComponent {
             }
         }
     }
-    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    <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:1.1428571429}: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 });
+    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:1.1428571429}: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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-form-item', imports: [SiTranslatePipe, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.required]': 'required()',
@@ -495,7 +506,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[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:1.1428571429}: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: { 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
+                        }, isSignal: true }] }], requiredValidator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RequiredValidator), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -504,14 +518,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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: "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: `
+    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: `
     @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: "20.0.6", ngImport: i0, type: SiFormValidationTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationTooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-form-validation-tooltip',
@@ -522,7 +536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
     }
   `,
                     host: {
-                        'class': 'd-flex flex-column gap-2'
+                        'class': 'd-flex flex-column gap-2 text-start'
                     }
                 }]
         }] });
@@ -548,11 +562,11 @@ class SiFormValidationTooltipDirective {
     tooltipService = inject(SiTooltipService);
     formValidationService = inject(SiFormValidationErrorService);
     formContainer = inject(SiFormContainerComponent, { optional: true });
-    formErrorMapper = input();
+    formErrorMapper = input(...(ngDevMode ? [undefined, { debugName: "formErrorMapper" }] : []));
     ngControl = inject(NgControl);
     elementRef = inject(ElementRef);
     tooltipRef;
-    errors = signal([]);
+    errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
     currentErrors = null;
     touched = null;
     // Use a counter to track how many events are matched that keep the tooltip active.
@@ -606,10 +620,10 @@ class SiFormValidationTooltipDirective {
         this.tooltipRef?.destroy();
         this.tooltipRef = undefined;
     }
-    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 });
+    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: { 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: "20.0.6", ngImport: i0, type: SiFormValidationTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormValidationTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siFormValidationTooltip]',
@@ -618,7 +632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[attr.aria-describedby]': 'describedBy'
                     }
                 }]
-        }], propDecorators: { increaseActivation: [{
+        }], propDecorators: { formErrorMapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorMapper", required: false }] }], increaseActivation: [{
                 type: HostListener,
                 args: ['focus']
             }, {
@@ -660,11 +674,11 @@ class SiFormModule {
             providers: [provideFormValidationErrorMapper(validationErrorMapper)]
         };
     }
-    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 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiFormContainerComponent, SiFormFieldsetComponent, SiFormItemComponent],