@siemens/element-ng 48.9.0 → 49.0.0-rc.1

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

@@ -31,8 +31,8 @@ class SiFormlyComponent {
     /**
      * Formly main container to provide modelChange subscriptions.
      */
-    formlyForm = viewChild(FormlyForm);
-    form = model();
+    formlyForm = viewChild(FormlyForm, ...(ngDevMode ? [{ debugName: "formlyForm" }] : []));
+    form = model(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
     /**
      * Mapping of field name and its value.
      *
@@ -41,7 +41,7 @@ class SiFormlyComponent {
      * {}
      * ```
      */
-    model = model({});
+    model = model({}, ...(ngDevMode ? [{ debugName: "model" }] : []));
     /**
      * Define FormlyFormOptions.
      *
@@ -50,20 +50,20 @@ class SiFormlyComponent {
      * {}
      * ```
      */
-    options = input({});
+    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
     /**
      * JSONSchema7 can be used instead of FormlyFieldConfig array for defining form fields.
      * */
-    schema = model();
+    schema = model(...(ngDevMode ? [undefined, { debugName: "schema" }] : []));
     /**
      * Define all form fields with FormlyFieldConfig array.
      *
      * @defaultValue []
      */
-    fields = input([]);
+    fields = input([], ...(ngDevMode ? [{ debugName: "fields" }] : []));
     fieldsChange = output();
     /** Define width for field labels in pixel */
-    labelWidth = input();
+    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
     fieldConfig = computed(() => {
         let formlyFieldConfig;
         const schema = this.schema();
@@ -88,7 +88,7 @@ class SiFormlyComponent {
         }
         this.fieldsChange.emit(formlyFieldConfig);
         return formlyFieldConfig;
-    });
+    }, ...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
     ownForm = false;
     formlyJsonschema = inject(FormlyJsonschema);
     ngOnInit() {
@@ -114,13 +114,13 @@ class SiFormlyComponent {
         };
         apply(formlyFieldConfig);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyComponent, isStandalone: false, selector: "si-formly", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", model: "modelChange", schema: "schemaChange", fieldsChange: "fieldsChange" }, viewQueries: [{ propertyName: "formlyForm", first: true, predicate: FormlyForm, descendants: true, isSignal: true }], ngImport: i0, template: "@let formlyForm = form();\n@let formlyFieldConfig = fieldConfig();\n@let formlyFormOptions = options();\n@if (formlyForm && formlyFieldConfig) {\n  @if (ownForm) {\n    <form [formGroup]=\"formlyForm\">\n      <si-form-container [form]=\"formlyForm\">\n        <div si-form-container-content>\n          <ng-container *ngTemplateOutlet=\"formlytmpl\" />\n        </div>\n      </si-form-container>\n    </form>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"formlytmpl\" />\n  }\n\n  <ng-template #formlytmpl>\n    <formly-form\n      [fields]=\"formlyFieldConfig\"\n      [options]=\"formlyFormOptions\"\n      [form]=\"formlyForm\"\n      [(model)]=\"model\"\n    />\n  </ng-template>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.SiFormContainerComponent, selector: "si-form-container", inputs: ["form", "readonly", "contentContainerBreakpoints", "disableContainerBreakpoints", "errorCodeTranslateKeyMap", "controlNameTranslateKeyMap", "disableErrorPrinting", "labelWidth"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyComponent, isStandalone: false, selector: "si-formly", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { form: "formChange", model: "modelChange", schema: "schemaChange", fieldsChange: "fieldsChange" }, viewQueries: [{ propertyName: "formlyForm", first: true, predicate: FormlyForm, descendants: true, isSignal: true }], ngImport: i0, template: "@let formlyForm = form();\n@let formlyFieldConfig = fieldConfig();\n@let formlyFormOptions = options();\n@if (formlyForm && formlyFieldConfig) {\n  @if (ownForm) {\n    <form [formGroup]=\"formlyForm\">\n      <si-form-container [form]=\"formlyForm\">\n        <div si-form-container-content>\n          <ng-container *ngTemplateOutlet=\"formlytmpl\" />\n        </div>\n      </si-form-container>\n    </form>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"formlytmpl\" />\n  }\n\n  <ng-template #formlytmpl>\n    <formly-form\n      [fields]=\"formlyFieldConfig\"\n      [options]=\"formlyFormOptions\"\n      [form]=\"formlyForm\"\n      [(model)]=\"model\"\n    />\n  </ng-template>\n}\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.SiFormContainerComponent, selector: "si-form-container", inputs: ["form", "readonly", "contentContainerBreakpoints", "disableContainerBreakpoints", "errorCodeTranslateKeyMap", "controlNameTranslateKeyMap", "disableErrorPrinting", "labelWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly', standalone: false, template: "@let formlyForm = form();\n@let formlyFieldConfig = fieldConfig();\n@let formlyFormOptions = options();\n@if (formlyForm && formlyFieldConfig) {\n  @if (ownForm) {\n    <form [formGroup]=\"formlyForm\">\n      <si-form-container [form]=\"formlyForm\">\n        <div si-form-container-content>\n          <ng-container *ngTemplateOutlet=\"formlytmpl\" />\n        </div>\n      </si-form-container>\n    </form>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"formlytmpl\" />\n  }\n\n  <ng-template #formlytmpl>\n    <formly-form\n      [fields]=\"formlyFieldConfig\"\n      [options]=\"formlyFormOptions\"\n      [form]=\"formlyForm\"\n      [(model)]=\"model\"\n    />\n  </ng-template>\n}\n" }]
-        }] });
+        }], propDecorators: { formlyForm: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FormlyForm), { isSignal: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }, { type: i0.Output, args: ["formChange"] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }, { type: i0.Output, args: ["schemaChange"] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], fieldsChange: [{ type: i0.Output, args: ["fieldsChange"] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -163,10 +163,10 @@ class SiFormlyButtonComponent extends FieldType {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyButtonComponent, isStandalone: true, selector: "si-formly-button", usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"btn\"\n  [id]=\"id\"\n  [ngClass]=\"{\n    'btn-secondary': !props.btnType || props.btnType === 'secondary',\n    'btn-primary': props.btnType === 'primary',\n    'btn-tertiary': props.btnType === 'tertiary',\n    'btn-warning': props.btnType === 'warning',\n    'btn-danger': props.btnType === 'danger'\n  }\"\n  [formlyAttributes]=\"field\"\n  [hidden]=\"props.hidden\"\n  (click)=\"click()\"\n  >{{ props.label | translate }}</button\n>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyButtonComponent, isStandalone: true, selector: "si-formly-button", usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"btn\"\n  [id]=\"id\"\n  [ngClass]=\"{\n    'btn-secondary': !props.btnType || props.btnType === 'secondary',\n    'btn-primary': props.btnType === 'primary',\n    'btn-tertiary': props.btnType === 'tertiary',\n    'btn-warning': props.btnType === 'warning',\n    'btn-danger': props.btnType === 'danger'\n  }\"\n  [formlyAttributes]=\"field\"\n  [hidden]=\"props.hidden\"\n  (click)=\"click()\"\n  >{{ props.label | translate }}</button\n>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-button', imports: [NgClass, SiTranslatePipe, FormlyModule], template: "<button\n  type=\"button\"\n  class=\"btn\"\n  [id]=\"id\"\n  [ngClass]=\"{\n    'btn-secondary': !props.btnType || props.btnType === 'secondary',\n    'btn-primary': props.btnType === 'primary',\n    'btn-tertiary': props.btnType === 'tertiary',\n    'btn-warning': props.btnType === 'warning',\n    'btn-danger': props.btnType === 'danger'\n  }\"\n  [formlyAttributes]=\"field\"\n  [hidden]=\"props.hidden\"\n  (click)=\"click()\"\n  >{{ props.label | translate }}</button\n>\n" }]
         }] });
@@ -207,10 +207,10 @@ class SiValidationErrorIdPipe {
     transform(value, ...args) {
         return `${value}-formly-validation-error`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiValidationErrorIdPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiValidationErrorIdPipe, isStandalone: true, name: "siValidationErrorId" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiValidationErrorIdPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiValidationErrorIdPipe, isStandalone: true, name: "siValidationErrorId" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiValidationErrorIdPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiValidationErrorIdPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'siValidationErrorId' }]
         }] });
@@ -220,10 +220,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyDateRangeComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyDateRangeComponent, isStandalone: true, selector: "si-formly-date-range", usesInheritance: true, ngImport: i0, template: "<si-date-range\n  #dateRange\n  [id]=\"id\"\n  [formlyAttributes]=\"field\"\n  [formControl]=\"formControl\"\n  [siDatepickerConfig]=\"props.siDatepickerConfig\"\n  [startDatePlaceholder]=\"props.startDatePlaceholder ?? dateRange.startDatePlaceholder()\"\n  [endDatePlaceholder]=\"props.endDatePlaceholder ?? dateRange.endDatePlaceholder()\"\n  [ariaLabelCalendarButton]=\"props.ariaLabelCalendarButton ?? dateRange.ariaLabelCalendarButton()\"\n  [startTimeLabel]=\"props.startTimeLabel ?? dateRange.startTimeLabel()\"\n  [endTimeLabel]=\"props.endTimeLabel ?? dateRange.endTimeLabel()\"\n  [required]=\"props.required ?? false\"\n  [readonly]=\"props.readonly ?? dateRange.readonly()\"\n  [autoClose]=\"props.autoClose ?? dateRange.autoClose()\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiDateRangeComponent, selector: "si-date-range", inputs: ["id", "siDatepickerConfig", "startDatePlaceholder", "endDatePlaceholder", "ariaLabelCalendarButton", "startTimeLabel", "endTimeLabel", "autoClose", "disabled", "readonly", "value", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerRangeChange", "disabledTimeChange", "valueChange"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyDateRangeComponent, isStandalone: true, selector: "si-formly-date-range", usesInheritance: true, ngImport: i0, template: "<si-date-range\n  #dateRange\n  [id]=\"id\"\n  [formlyAttributes]=\"field\"\n  [formControl]=\"formControl\"\n  [siDatepickerConfig]=\"props.siDatepickerConfig\"\n  [startDatePlaceholder]=\"props.startDatePlaceholder ?? dateRange.startDatePlaceholder()\"\n  [endDatePlaceholder]=\"props.endDatePlaceholder ?? dateRange.endDatePlaceholder()\"\n  [ariaLabelCalendarButton]=\"props.ariaLabelCalendarButton ?? dateRange.ariaLabelCalendarButton()\"\n  [startTimeLabel]=\"props.startTimeLabel ?? dateRange.startTimeLabel()\"\n  [endTimeLabel]=\"props.endTimeLabel ?? dateRange.endTimeLabel()\"\n  [required]=\"props.required ?? false\"\n  [readonly]=\"props.readonly ?? dateRange.readonly()\"\n  [autoClose]=\"props.autoClose ?? dateRange.autoClose()\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiDateRangeComponent, selector: "si-date-range", inputs: ["id", "siDatepickerConfig", "startDatePlaceholder", "endDatePlaceholder", "ariaLabelCalendarButton", "startTimeLabel", "endTimeLabel", "autoClose", "disabled", "readonly", "value", "errormessageId"], outputs: ["siDatepickerConfigChange", "siDatepickerRangeChange", "disabledTimeChange", "valueChange"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-date-range', imports: [ReactiveFormsModule, FormlyModule, SiDateRangeComponent, SiValidationErrorIdPipe], template: "<si-date-range\n  #dateRange\n  [id]=\"id\"\n  [formlyAttributes]=\"field\"\n  [formControl]=\"formControl\"\n  [siDatepickerConfig]=\"props.siDatepickerConfig\"\n  [startDatePlaceholder]=\"props.startDatePlaceholder ?? dateRange.startDatePlaceholder()\"\n  [endDatePlaceholder]=\"props.endDatePlaceholder ?? dateRange.endDatePlaceholder()\"\n  [ariaLabelCalendarButton]=\"props.ariaLabelCalendarButton ?? dateRange.ariaLabelCalendarButton()\"\n  [startTimeLabel]=\"props.startTimeLabel ?? dateRange.startTimeLabel()\"\n  [endTimeLabel]=\"props.endTimeLabel ?? dateRange.endTimeLabel()\"\n  [required]=\"props.required ?? false\"\n  [readonly]=\"props.readonly ?? dateRange.readonly()\"\n  [autoClose]=\"props.autoClose ?? dateRange.autoClose()\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n" }]
         }] });
@@ -249,10 +249,10 @@ class SiFormlyDateTimeComponent extends FieldType {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyDateTimeComponent, isStandalone: true, selector: "si-formly-datetime", usesInheritance: true, ngImport: i0, template: "<si-calendar-button class=\"w-100\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    siDatepicker\n    [id]=\"id\"\n    [autoClose]=\"props.autoClose\"\n    [placeholder]=\"props.placeholder\"\n    [formControl]=\"formControl\"\n    [siDatepickerConfig]=\"props.dateConfig\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n</si-calendar-button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyDateTimeComponent, isStandalone: true, selector: "si-formly-datetime", usesInheritance: true, ngImport: i0, template: "<si-calendar-button class=\"w-100\">\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    siDatepicker\n    [id]=\"id\"\n    [autoClose]=\"props.autoClose\"\n    [placeholder]=\"props.placeholder\"\n    [formControl]=\"formControl\"\n    [siDatepickerConfig]=\"props.dateConfig\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n</si-calendar-button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyDateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-datetime', imports: [
                         FormsModule,
@@ -268,10 +268,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyEmailComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyEmailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyEmailComponent, isStandalone: true, selector: "si-formly-email", usesInheritance: true, ngImport: i0, template: "<input\n  type=\"email\"\n  class=\"form-control\"\n  [id]=\"id\"\n  [formControl]=\"formControl\"\n  [formlyAttributes]=\"field\"\n  [attr.aria-describedby]=\"id | siValidationErrorId\"\n/>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyEmailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyEmailComponent, isStandalone: true, selector: "si-formly-email", usesInheritance: true, ngImport: i0, template: "<input\n  type=\"email\"\n  class=\"form-control\"\n  [id]=\"id\"\n  [formControl]=\"formControl\"\n  [formlyAttributes]=\"field\"\n  [attr.aria-describedby]=\"id | siValidationErrorId\"\n/>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyEmailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyEmailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-email', imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe], template: "<input\n  type=\"email\"\n  class=\"form-control\"\n  [id]=\"id\"\n  [formControl]=\"formControl\"\n  [formlyAttributes]=\"field\"\n  [attr.aria-describedby]=\"id | siValidationErrorId\"\n/>\n" }]
         }] });
@@ -281,10 +281,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyIpInputComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyIpInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyIpInputComponent, isStandalone: true, selector: "si-formly-ip-address", usesInheritance: true, ngImport: i0, template: "@if (field.type === 'ipv6') {\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    siIpV6\n    [cidr]=\"props.cidr\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [id]=\"id\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  />\n} @else {\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    siIpV4\n    [cidr]=\"props.cidr\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [id]=\"id\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: SiIp4InputDirective, selector: "input[siIpV4]", exportAs: ["siIpV4"] }, { kind: "directive", type: SiIp6InputDirective, selector: "input[siIpV6]", exportAs: ["siIpV6"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyIpInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyIpInputComponent, isStandalone: true, selector: "si-formly-ip-address", usesInheritance: true, ngImport: i0, template: "@if (field.type === 'ipv6') {\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    siIpV6\n    [cidr]=\"props.cidr\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [id]=\"id\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  />\n} @else {\n  <input\n    type=\"text\"\n    class=\"form-control\"\n    siIpV4\n    [cidr]=\"props.cidr\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [id]=\"id\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: SiIp4InputDirective, selector: "input[siIpV4]", exportAs: ["siIpV4"] }, { kind: "directive", type: SiIp6InputDirective, selector: "input[siIpV6]", exportAs: ["siIpV6"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyIpInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyIpInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-ip-address', imports: [
                         ReactiveFormsModule,
@@ -300,10 +300,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyNumberComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyNumberComponent, isStandalone: true, selector: "si-formly-number", usesInheritance: true, ngImport: i0, template: "<si-number-input\n  class=\"form-control\"\n  [inputId]=\"id\"\n  [formControl]=\"formControl\"\n  [formlyAttributes]=\"field\"\n  [min]=\"props.min\"\n  [max]=\"props.max\"\n  [placeholder]=\"props.placeholder\"\n  [showButtons]=\"props.showButtons ?? true\"\n  [step]=\"props.numberStep ?? 1\"\n  [unit]=\"props.unit\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder", "errormessageId"], outputs: ["valueChange"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyNumberComponent, isStandalone: true, selector: "si-formly-number", usesInheritance: true, ngImport: i0, template: "<si-number-input\n  class=\"form-control\"\n  [inputId]=\"id\"\n  [formControl]=\"formControl\"\n  [formlyAttributes]=\"field\"\n  [min]=\"props.min\"\n  [max]=\"props.max\"\n  [placeholder]=\"props.placeholder\"\n  [showButtons]=\"props.showButtons ?? true\"\n  [step]=\"props.numberStep ?? 1\"\n  [unit]=\"props.unit\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiNumberInputComponent, selector: "si-number-input", inputs: ["min", "max", "step", "value", "unit", "showButtons", "aria-label", "inputId", "disabled", "readonly", "placeholder", "errormessageId"], outputs: ["valueChange"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyNumberComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-number', imports: [ReactiveFormsModule, FormlyModule, SiNumberInputComponent, SiValidationErrorIdPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-number-input\n  class=\"form-control\"\n  [inputId]=\"id\"\n  [formControl]=\"formControl\"\n  [formlyAttributes]=\"field\"\n  [min]=\"props.min\"\n  [max]=\"props.max\"\n  [placeholder]=\"props.placeholder\"\n  [showButtons]=\"props.showButtons ?? true\"\n  [step]=\"props.numberStep ?? 1\"\n  [unit]=\"props.unit\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n" }]
         }] });
@@ -313,10 +313,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyPasswordComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyPasswordComponent, isStandalone: true, selector: "si-formly-password", usesInheritance: true, ngImport: i0, template: "<si-password-strength>\n  <input\n    type=\"password\"\n    name=\"password\"\n    class=\"form-control\"\n    [id]=\"id\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [siPasswordStrength]=\"{\n      minLength: props.minLength && props.minLength > 0 ? props.minLength : 8,\n      uppercase: props.upperCase !== false,\n      lowercase: props.lowerCase !== false,\n      digits: props.digits !== false,\n      special: props.special !== false\n    }\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  />\n</si-password-strength>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiPasswordStrengthComponent, selector: "si-password-strength", inputs: ["showVisibilityIcon"] }, { kind: "directive", type: SiPasswordStrengthDirective, selector: "[siPasswordStrength]", inputs: ["siPasswordStrength"], outputs: ["passwordStrengthChanged"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyPasswordComponent, isStandalone: true, selector: "si-formly-password", usesInheritance: true, ngImport: i0, template: "<si-password-strength>\n  <input\n    type=\"password\"\n    name=\"password\"\n    class=\"form-control\"\n    [id]=\"id\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [siPasswordStrength]=\"{\n      minLength: props.minLength && props.minLength > 0 ? props.minLength : 8,\n      uppercase: props.upperCase !== false,\n      lowercase: props.lowerCase !== false,\n      digits: props.digits !== false,\n      special: props.special !== false\n    }\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  />\n</si-password-strength>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiPasswordStrengthComponent, selector: "si-password-strength", inputs: ["showVisibilityIcon"] }, { kind: "directive", type: SiPasswordStrengthDirective, selector: "[siPasswordStrength]", inputs: ["siPasswordStrength"], outputs: ["passwordStrengthChanged"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-password', imports: [
                         FormsModule,
@@ -333,10 +333,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlySelectComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlySelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlySelectComponent, isStandalone: true, selector: "si-formly-select", usesInheritance: true, ngImport: i0, template: "@if (props.multi) {\n  <si-select\n    #select\n    class=\"form-control\"\n    multi\n    [id]=\"id\"\n    [options]=\"props.optionsList\"\n    [hasFilter]=\"props.hasFilter ?? select.hasFilter()\"\n    [filterPlaceholder]=\"props.filterPlaceholder ?? select.filterPlaceholder()\"\n    [placeholder]=\"props.placeholder ?? select.placeholder()\"\n    [ariaLabel]=\"props.ariaLabel ?? select.ariaLabel()\"\n    [noResultsFoundLabel]=\"props.noResultsFoundLabel ?? select.noResultsFoundLabel()\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n} @else {\n  <si-select\n    #select\n    class=\"form-control\"\n    [id]=\"id\"\n    [options]=\"props.optionsList\"\n    [hasFilter]=\"props.hasFilter ?? select.hasFilter()\"\n    [filterPlaceholder]=\"props.filterPlaceholder ?? select.filterPlaceholder()\"\n    [placeholder]=\"props.placeholder ?? select.placeholder()\"\n    [ariaLabel]=\"props.ariaLabel ?? select.ariaLabel()\"\n    [noResultsFoundLabel]=\"props.noResultsFoundLabel ?? select.noResultsFoundLabel()\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "errormessageId", "hasFilter"], outputs: ["dropdownClose", "openChange"] }, { kind: "directive", type: SiSelectSimpleOptionsDirective, selector: "si-select[options]", inputs: ["options", "optionEqualCheckFn"] }, { kind: "directive", type: SiSelectMultiValueDirective, selector: "si-select[multi]" }, { kind: "directive", type: SiSelectSingleValueDirective, selector: "si-select:not([multi])" }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlySelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlySelectComponent, isStandalone: true, selector: "si-formly-select", usesInheritance: true, ngImport: i0, template: "@if (props.multi) {\n  <si-select\n    #select\n    class=\"form-control\"\n    multi\n    [id]=\"id\"\n    [options]=\"props.optionsList\"\n    [hasFilter]=\"props.hasFilter ?? select.hasFilter()\"\n    [filterPlaceholder]=\"props.filterPlaceholder ?? select.filterPlaceholder()\"\n    [placeholder]=\"props.placeholder ?? select.placeholder()\"\n    [ariaLabel]=\"props.ariaLabel ?? select.ariaLabel()\"\n    [noResultsFoundLabel]=\"props.noResultsFoundLabel ?? select.noResultsFoundLabel()\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n} @else {\n  <si-select\n    #select\n    class=\"form-control\"\n    [id]=\"id\"\n    [options]=\"props.optionsList\"\n    [hasFilter]=\"props.hasFilter ?? select.hasFilter()\"\n    [filterPlaceholder]=\"props.filterPlaceholder ?? select.filterPlaceholder()\"\n    [placeholder]=\"props.placeholder ?? select.placeholder()\"\n    [ariaLabel]=\"props.ariaLabel ?? select.ariaLabel()\"\n    [noResultsFoundLabel]=\"props.noResultsFoundLabel ?? select.noResultsFoundLabel()\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "errormessageId", "hasFilter"], outputs: ["openChange"] }, { kind: "directive", type: SiSelectSimpleOptionsDirective, selector: "si-select[options]", inputs: ["options", "optionEqualCheckFn"] }, { kind: "directive", type: SiSelectMultiValueDirective, selector: "si-select[multi]" }, { kind: "directive", type: SiSelectSingleValueDirective, selector: "si-select:not([multi])" }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlySelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-select', imports: [
                         FormsModule,
@@ -371,10 +371,10 @@ class SiFormlyTextDisplayComponent extends FieldType {
         const path = getKeyPath(this.props.key);
         return getFieldValue(sourceModel, path);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyTextDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyTextDisplayComponent, isStandalone: true, selector: "si-formly-text-display", usesInheritance: true, ngImport: i0, template: "<input type=\"hidden\" [id]=\"id\" [formControl]=\"formControl\" [formlyAttributes]=\"field\" />\n<div class=\"py-4\">\n  @if (props.prefix) {\n    {{ props.prefix | translate }}\n  }\n  {{ value }}\n  @if (props.suffix) {\n    {{ props.suffix | translate }}\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTextDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyTextDisplayComponent, isStandalone: true, selector: "si-formly-text-display", usesInheritance: true, ngImport: i0, template: "<input type=\"hidden\" [id]=\"id\" [formControl]=\"formControl\" [formlyAttributes]=\"field\" />\n<div class=\"py-4\">\n  @if (props.prefix) {\n    {{ props.prefix | translate }}\n  }\n  {{ value }}\n  @if (props.suffix) {\n    {{ props.suffix | translate }}\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyTextDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTextDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-text-display', imports: [FormlyModule, ReactiveFormsModule, SiTranslatePipe], template: "<input type=\"hidden\" [id]=\"id\" [formControl]=\"formControl\" [formlyAttributes]=\"field\" />\n<div class=\"py-4\">\n  @if (props.prefix) {\n    {{ props.prefix | translate }}\n  }\n  {{ value }}\n  @if (props.suffix) {\n    {{ props.suffix | translate }}\n  }\n</div>\n" }]
         }] });
@@ -407,13 +407,13 @@ class SiFormlyTextareaComponent extends FieldType {
         this.textArea().nativeElement.parentNode.dataset.replicatedValue =
             this.textArea().nativeElement.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.6", type: SiFormlyTextareaComponent, isStandalone: true, selector: "si-formly-textarea", viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"textarea-grow-wrap text-break\"\n  [style.--content-grow]=\"contentGrowTextarea()\"\n  [style.max-height]=\"maxHeightConfiguration()\"\n>\n  <textarea\n    #textArea\n    class=\"form-control\"\n    [id]=\"id\"\n    [rows]=\"props.rows ?? 1\"\n    [cols]=\"props.cols ?? 1\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [style.resize]=\"resizeConfiguration()\"\n    [style.max-height]=\"maxHeightConfiguration()\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  >\n  </textarea>\n</div>\n", styles: [".textarea-grow-wrap{display:grid}.textarea-grow-wrap:after{content:var(--content-grow);white-space:pre-wrap;visibility:hidden;margin-block:3px}.textarea-grow-wrap>textarea,.textarea-grow-wrap:after{grid-area:1/1/2/2;padding-block:6px;font:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiFormlyTextareaComponent, isStandalone: true, selector: "si-formly-textarea", viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"textarea-grow-wrap text-break\"\n  [style.--content-grow]=\"contentGrowTextarea()\"\n  [style.max-height]=\"maxHeightConfiguration()\"\n>\n  <textarea\n    #textArea\n    class=\"form-control\"\n    [id]=\"id\"\n    [rows]=\"props.rows ?? 1\"\n    [cols]=\"props.cols ?? 1\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [style.resize]=\"resizeConfiguration()\"\n    [style.max-height]=\"maxHeightConfiguration()\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  >\n  </textarea>\n</div>\n", styles: [".textarea-grow-wrap{display:grid}.textarea-grow-wrap:after{content:var(--content-grow);white-space:pre-wrap;visibility:hidden;margin-block:3px}.textarea-grow-wrap>textarea,.textarea-grow-wrap:after{grid-area:1/1/2/2;padding-block:6px;font:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-textarea', imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe], template: "<div\n  class=\"textarea-grow-wrap text-break\"\n  [style.--content-grow]=\"contentGrowTextarea()\"\n  [style.max-height]=\"maxHeightConfiguration()\"\n>\n  <textarea\n    #textArea\n    class=\"form-control\"\n    [id]=\"id\"\n    [rows]=\"props.rows ?? 1\"\n    [cols]=\"props.cols ?? 1\"\n    [formControl]=\"formControl\"\n    [formlyAttributes]=\"field\"\n    [style.resize]=\"resizeConfiguration()\"\n    [style.max-height]=\"maxHeightConfiguration()\"\n    [attr.aria-describedby]=\"id | siValidationErrorId\"\n  >\n  </textarea>\n</div>\n", styles: [".textarea-grow-wrap{display:grid}.textarea-grow-wrap:after{content:var(--content-grow);white-space:pre-wrap;visibility:hidden;margin-block:3px}.textarea-grow-wrap>textarea,.textarea-grow-wrap:after{grid-area:1/1/2/2;padding-block:6px;font:inherit}\n"] }]
-        }] });
+        }], propDecorators: { textArea: [{ type: i0.ViewChild, args: ['textArea', { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -436,8 +436,8 @@ class SiFormlyTimeComponent extends FieldType {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyTimeComponent, isStandalone: true, selector: "si-formly-time", usesInheritance: true, ngImport: i0, template: `<si-timepicker
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyTimeComponent, isStandalone: true, selector: "si-formly-time", usesInheritance: true, ngImport: i0, template: `<si-timepicker
     [id]="id"
     [hideLabels]="props.timeConfig?.hideLabels ?? true"
     [showMinutes]="props.timeConfig?.showMinutes ?? true"
@@ -449,7 +449,7 @@ class SiFormlyTimeComponent extends FieldType {
     [errormessageId]="id | siValidationErrorId"
   />`, isInline: true, dependencies: [{ kind: "component", type: SiTimepickerComponent, selector: "si-timepicker", inputs: ["id", "disabled", "hoursLabel", "minutesLabel", "secondsLabel", "millisecondsLabel", "hideLabels", "hoursAriaLabel", "minutesAriaLabel", "secondsAriaLabel", "millisecondsAriaLabel", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "millisecondsPlaceholder", "meridians", "meridiansLabel", "meridiansAriaLabel", "showMinutes", "showSeconds", "showMilliseconds", "showMeridian", "min", "max", "readonly", "errormessageId"], outputs: ["isValid", "meridianChange", "inputCompleted"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTimeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-formly-time',
@@ -534,10 +534,10 @@ class SiFormlyAccordionComponent extends FieldType {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyAccordionComponent, isStandalone: true, selector: "si-formly-accordion", usesInheritance: true, ngImport: i0, template: "<si-accordion\n  #accordion\n  [expandFirstPanel]=\"props.expandFirstPanel ?? accordion.expandFirstPanel()\"\n  [fullHeight]=\"props.fullHeight ?? accordion.fullHeight()\"\n  [hcollapsed]=\"props.hcollapsed ?? accordion.collapsed()\"\n>\n  @for (f of field.fieldGroup; track $index) {\n    <si-collapsible-panel\n      #panel\n      [heading]=\"f.props?.label\"\n      [contentCssClasses]=\"f.props?.cssClasses ?? 'p-5'\"\n      [headerCssClasses]=\"f.props?.headerCssClasses ?? panel.headerCssClasses()\"\n      [contentBgClasses]=\"f.props?.contentBgClasses ?? panel.contentBgClasses()\"\n      [badge]=\"f.props?.badge ?? panel.badge()\"\n      [badgeColor]=\"f.props?.badgeColor ?? panel.badgeColor()\"\n      [icon]=\"f.props?.icon ?? panel.icon()\"\n      [opened]=\"f.props?.opened ?? panel.opened()\"\n      [disabled]=\"f.props?.disabled ?? panel.disabled()\"\n      [colorVariant]=\"f.props?.colorVariant ?? panel.colorVariant()\"\n      (panelToggle)=\"panelToggle($event, f)\"\n    >\n      <formly-field [field]=\"f\" [formlyAttributes]=\"field\" />\n    </si-collapsible-panel>\n  }\n</si-accordion>\n", dependencies: [{ kind: "component", type: SiCollapsiblePanelComponent, selector: "si-collapsible-panel", inputs: ["heading", "headerCssClasses", "contentBgClasses", "contentCssClasses", "opened", "icon", "disabled", "colorVariant", "badge", "badgeColor"], outputs: ["openedChange", "panelToggle"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiAccordionComponent, selector: "si-accordion", inputs: ["expandFirstPanel", "fullHeight", "hcollapsed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyAccordionComponent, isStandalone: true, selector: "si-formly-accordion", usesInheritance: true, ngImport: i0, template: "<si-accordion\n  #accordion\n  [expandFirstPanel]=\"props.expandFirstPanel ?? accordion.expandFirstPanel()\"\n  [fullHeight]=\"props.fullHeight ?? accordion.fullHeight()\"\n  [hcollapsed]=\"props.hcollapsed ?? accordion.collapsed()\"\n>\n  @for (f of field.fieldGroup; track $index) {\n    <si-collapsible-panel\n      #panel\n      [heading]=\"f.props?.label\"\n      [contentCssClasses]=\"f.props?.cssClasses ?? 'p-5'\"\n      [headerCssClasses]=\"f.props?.headerCssClasses ?? panel.headerCssClasses()\"\n      [contentBgClasses]=\"f.props?.contentBgClasses ?? panel.contentBgClasses()\"\n      [badge]=\"f.props?.badge ?? panel.badge()\"\n      [badgeColor]=\"f.props?.badgeColor ?? panel.badgeColor()\"\n      [icon]=\"f.props?.icon ?? panel.icon()\"\n      [opened]=\"f.props?.opened ?? panel.opened()\"\n      [disabled]=\"f.props?.disabled ?? panel.disabled()\"\n      [colorVariant]=\"f.props?.colorVariant ?? panel.colorVariant()\"\n      (panelToggle)=\"panelToggle($event, f)\"\n    >\n      <formly-field [field]=\"f\" [formlyAttributes]=\"field\" />\n    </si-collapsible-panel>\n  }\n</si-accordion>\n", dependencies: [{ kind: "component", type: SiCollapsiblePanelComponent, selector: "si-collapsible-panel", inputs: ["heading", "headerCssClasses", "contentBgClasses", "contentCssClasses", "opened", "icon", "disabled", "colorVariant", "badge", "badgeColor"], outputs: ["openedChange", "panelToggle"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: SiAccordionComponent, selector: "si-accordion", inputs: ["expandFirstPanel", "fullHeight", "hcollapsed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-accordion', imports: [SiCollapsiblePanelComponent, FormlyModule, SiAccordionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-accordion\n  #accordion\n  [expandFirstPanel]=\"props.expandFirstPanel ?? accordion.expandFirstPanel()\"\n  [fullHeight]=\"props.fullHeight ?? accordion.fullHeight()\"\n  [hcollapsed]=\"props.hcollapsed ?? accordion.collapsed()\"\n>\n  @for (f of field.fieldGroup; track $index) {\n    <si-collapsible-panel\n      #panel\n      [heading]=\"f.props?.label\"\n      [contentCssClasses]=\"f.props?.cssClasses ?? 'p-5'\"\n      [headerCssClasses]=\"f.props?.headerCssClasses ?? panel.headerCssClasses()\"\n      [contentBgClasses]=\"f.props?.contentBgClasses ?? panel.contentBgClasses()\"\n      [badge]=\"f.props?.badge ?? panel.badge()\"\n      [badgeColor]=\"f.props?.badgeColor ?? panel.badgeColor()\"\n      [icon]=\"f.props?.icon ?? panel.icon()\"\n      [opened]=\"f.props?.opened ?? panel.opened()\"\n      [disabled]=\"f.props?.disabled ?? panel.disabled()\"\n      [colorVariant]=\"f.props?.colorVariant ?? panel.colorVariant()\"\n      (panelToggle)=\"panelToggle($event, f)\"\n    >\n      <formly-field [field]=\"f\" [formlyAttributes]=\"field\" />\n    </si-collapsible-panel>\n  }\n</si-accordion>\n" }]
         }] });
@@ -547,10 +547,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyArrayComponent extends FieldArrayType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyArrayComponent, isStandalone: true, selector: "si-formly-array", usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n  @if (props.label) {\n    <b>{{ props.label }}</b>\n  }\n  @if (props.description) {\n    <p>{{ props.description }}</p>\n  }\n  @if (showError && formControl.errors) {\n    <div class=\"alert alert-danger\" role=\"alert\">\n      <formly-validation-message [field]=\"field\" />\n    </div>\n  }\n  @for (field of field.fieldGroup; track $index) {\n    <div class=\"row\">\n      <formly-field class=\"col-10\" [field]=\"field\" />\n      @if (!props.readonly && !props.disabled && !props.noRemove) {\n        <div class=\"col-1 text-end\">\n          @if (props.removeText) {\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"remove($index)\">\n              {{ props.removeText | translate }}\n            </button>\n          } @else {\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"remove($index)\"> - </button>\n          }\n        </div>\n      }\n    </div>\n  }\n  @if (!props.readonly && !props.disabled && !props.noAdd) {\n    <div class=\"d-flex flex-row-reverse\">\n      @if (props.addText) {\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"add()\">\n          {{ props.addText | translate }}\n        </button>\n      } @else {\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"add()\"> + </button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { 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: SiFormlyArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyArrayComponent, isStandalone: true, selector: "si-formly-array", usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n  @if (props.label) {\n    <b>{{ props.label }}</b>\n  }\n  @if (props.description) {\n    <p>{{ props.description }}</p>\n  }\n  @if (showError && formControl.errors) {\n    <div class=\"alert alert-danger\" role=\"alert\">\n      <formly-validation-message [field]=\"field\" />\n    </div>\n  }\n  @for (field of field.fieldGroup; track $index) {\n    <div class=\"row\">\n      <formly-field class=\"col-10\" [field]=\"field\" />\n      @if (!props.readonly && !props.disabled && !props.noRemove) {\n        <div class=\"col-1 text-end\">\n          @if (props.removeText) {\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"remove($index)\">\n              {{ props.removeText | translate }}\n            </button>\n          } @else {\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"remove($index)\"> - </button>\n          }\n        </div>\n      }\n    </div>\n  }\n  @if (!props.readonly && !props.disabled && !props.noAdd) {\n    <div class=\"d-flex flex-row-reverse\">\n      @if (props.addText) {\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"add()\">\n          {{ props.addText | translate }}\n        </button>\n      } @else {\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"add()\"> + </button>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyArrayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-array', imports: [FormlyModule, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-3\">\n  @if (props.label) {\n    <b>{{ props.label }}</b>\n  }\n  @if (props.description) {\n    <p>{{ props.description }}</p>\n  }\n  @if (showError && formControl.errors) {\n    <div class=\"alert alert-danger\" role=\"alert\">\n      <formly-validation-message [field]=\"field\" />\n    </div>\n  }\n  @for (field of field.fieldGroup; track $index) {\n    <div class=\"row\">\n      <formly-field class=\"col-10\" [field]=\"field\" />\n      @if (!props.readonly && !props.disabled && !props.noRemove) {\n        <div class=\"col-1 text-end\">\n          @if (props.removeText) {\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"remove($index)\">\n              {{ props.removeText | translate }}\n            </button>\n          } @else {\n            <button class=\"btn btn-danger\" type=\"button\" (click)=\"remove($index)\"> - </button>\n          }\n        </div>\n      }\n    </div>\n  }\n  @if (!props.readonly && !props.disabled && !props.noAdd) {\n    <div class=\"d-flex flex-row-reverse\">\n      @if (props.addText) {\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"add()\">\n          {{ props.addText | translate }}\n        </button>\n      } @else {\n        <button class=\"btn btn-primary\" type=\"button\" (click)=\"add()\"> + </button>\n      }\n    </div>\n  }\n</div>\n" }]
         }] });
@@ -608,10 +608,10 @@ class SiFormlyObjectGridComponent extends FieldType {
             this.rows.push({ classes: rowClasses, columns });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyObjectGridComponent, isStandalone: true, selector: "si-formly-object-grid", usesInheritance: true, ngImport: i0, template: "@if (props.hidden !== true) {\n  <div>\n    @if (props.label && props.plain !== true) {\n      <b>{{ props.label }}</b>\n    }\n    @if (props.description && props.plain !== true) {\n      <p>{{ props.description }}</p>\n    }\n    @if (displayErrorMessages) {\n      <div class=\"alert alert-danger\" role=\"alert\">\n        <formly-validation-message [field]=\"field\" />\n      </div>\n    }\n    <div [class]=\"containerClass\">\n      @for (row of rows; track $index) {\n        <div [class]=\"row.classes\">\n          @for (column of row.columns; track $index) {\n            <div [class]=\"column.classes\">\n              <si-form-container>\n                <div si-form-container-content>\n                  @for (f of column.fields; track $index) {\n                    <formly-field class=\"d-block\" [field]=\"f\" />\n                  }\n                </div>\n              </si-form-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: SiFormContainerComponent, selector: "si-form-container", inputs: ["form", "readonly", "contentContainerBreakpoints", "disableContainerBreakpoints", "errorCodeTranslateKeyMap", "controlNameTranslateKeyMap", "disableErrorPrinting", "labelWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyObjectGridComponent, isStandalone: true, selector: "si-formly-object-grid", usesInheritance: true, ngImport: i0, template: "@if (props.hidden !== true) {\n  <div>\n    @if (props.label && props.plain !== true) {\n      <b>{{ props.label }}</b>\n    }\n    @if (props.description && props.plain !== true) {\n      <p>{{ props.description }}</p>\n    }\n    @if (displayErrorMessages) {\n      <div class=\"alert alert-danger\" role=\"alert\">\n        <formly-validation-message [field]=\"field\" />\n      </div>\n    }\n    <div [class]=\"containerClass\">\n      @for (row of rows; track $index) {\n        <div [class]=\"row.classes\">\n          @for (column of row.columns; track $index) {\n            <div [class]=\"column.classes\">\n              <si-form-container>\n                <div si-form-container-content>\n                  @for (f of column.fields; track $index) {\n                    <formly-field class=\"d-block\" [field]=\"f\" />\n                  }\n                </div>\n              </si-form-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: SiFormContainerComponent, selector: "si-form-container", inputs: ["form", "readonly", "contentContainerBreakpoints", "disableContainerBreakpoints", "errorCodeTranslateKeyMap", "controlNameTranslateKeyMap", "disableErrorPrinting", "labelWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-object-grid', imports: [FormlyModule, SiFormContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (props.hidden !== true) {\n  <div>\n    @if (props.label && props.plain !== true) {\n      <b>{{ props.label }}</b>\n    }\n    @if (props.description && props.plain !== true) {\n      <p>{{ props.description }}</p>\n    }\n    @if (displayErrorMessages) {\n      <div class=\"alert alert-danger\" role=\"alert\">\n        <formly-validation-message [field]=\"field\" />\n      </div>\n    }\n    <div [class]=\"containerClass\">\n      @for (row of rows; track $index) {\n        <div [class]=\"row.classes\">\n          @for (column of row.columns; track $index) {\n            <div [class]=\"column.classes\">\n              <si-form-container>\n                <div si-form-container-content>\n                  @for (f of column.fields; track $index) {\n                    <formly-field class=\"d-block\" [field]=\"f\" />\n                  }\n                </div>\n              </si-form-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n" }]
         }] });
@@ -621,10 +621,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyObjectPlainComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectPlainComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyObjectPlainComponent, isStandalone: true, selector: "si-formly-object-plain", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (props.description) {\n    <p>{{ props.description }}</p>\n  }\n  @for (f of field.fieldGroup; track $index) {\n    <formly-field [field]=\"f\" />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectPlainComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyObjectPlainComponent, isStandalone: true, selector: "si-formly-object-plain", usesInheritance: true, ngImport: i0, template: "<div>\n  @if (props.description) {\n    <p>{{ props.description }}</p>\n  }\n  @for (f of field.fieldGroup; track $index) {\n    <formly-field [field]=\"f\" />\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectPlainComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectPlainComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-object-plain', imports: [FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  @if (props.description) {\n    <p>{{ props.description }}</p>\n  }\n  @for (f of field.fieldGroup; track $index) {\n    <formly-field [field]=\"f\" />\n  }\n</div>\n" }]
         }] });
@@ -634,10 +634,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyObjectComponent extends FieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyObjectComponent, isStandalone: true, selector: "si-formly-object", usesInheritance: true, ngImport: i0, template: "@if (props.hidden !== true) {\n  <div class=\"mb-3\">\n    @if (props.label) {\n      <b>{{ props.label }}</b>\n    }\n    @if (props.description) {\n      <p>{{ props.description }}</p>\n    }\n    @if (showError && formControl.errors) {\n      <div class=\"alert alert-danger\" role=\"alert\">\n        <formly-validation-message [field]=\"field\" />\n      </div>\n    }\n    @for (f of field.fieldGroup; track $index) {\n      <formly-field [field]=\"f\" />\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyObjectComponent, isStandalone: true, selector: "si-formly-object", usesInheritance: true, ngImport: i0, template: "@if (props.hidden !== true) {\n  <div class=\"mb-3\">\n    @if (props.label) {\n      <b>{{ props.label }}</b>\n    }\n    @if (props.description) {\n      <p>{{ props.description }}</p>\n    }\n    @if (showError && formControl.errors) {\n      <div class=\"alert alert-danger\" role=\"alert\">\n        <formly-validation-message [field]=\"field\" />\n      </div>\n    }\n    @for (f of field.fieldGroup; track $index) {\n      <formly-field [field]=\"f\" />\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-object', imports: [FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (props.hidden !== true) {\n  <div class=\"mb-3\">\n    @if (props.label) {\n      <b>{{ props.label }}</b>\n    }\n    @if (props.description) {\n      <p>{{ props.description }}</p>\n    }\n    @if (showError && formControl.errors) {\n      <div class=\"alert alert-danger\" role=\"alert\">\n        <formly-validation-message [field]=\"field\" />\n      </div>\n    }\n    @for (f of field.fieldGroup; track $index) {\n      <formly-field [field]=\"f\" />\n    }\n  </div>\n}\n" }]
         }] });
@@ -652,10 +652,10 @@ class SiFormlyObjectTabsetComponent extends FieldType {
             this.options.formState.selectedTabIndex = selectedTab;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectTabsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyObjectTabsetComponent, isStandalone: true, selector: "si-formly-object-tabset", usesInheritance: true, ngImport: i0, template: "<si-tabset class=\"d-flex si-layout-fixed-height\">\n  @for (f of field.fieldGroup; track $index) {\n    @let isTabActive = options.formState.selectedTabIndex === $index;\n    @if (!(f.props?.hidden === true)) {\n      <si-tab\n        [heading]=\"f.props?.label || ''\"\n        [active]=\"isTabActive\"\n        (activeChange)=\"tabIndexChange($event, $index)\"\n      >\n        <div class=\"pt-8\">\n          <formly-field [field]=\"f\" [formlyAttributes]=\"field\" />\n        </div>\n      </si-tab>\n    }\n  }\n</si-tabset>\n", dependencies: [{ kind: "component", type: SiTabsetComponent, selector: "si-tabset" }, { kind: "component", type: SiTabComponent, selector: "si-tab", inputs: ["active", "canActivate", "canDeactivate"], outputs: ["activeChange"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectTabsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyObjectTabsetComponent, isStandalone: true, selector: "si-formly-object-tabset", usesInheritance: true, ngImport: i0, template: "<si-tabset class=\"d-flex si-layout-fixed-height\">\n  @for (f of field.fieldGroup; track $index) {\n    @let isTabActive = options.formState.selectedTabIndex === $index;\n    @if (!(f.props?.hidden === true)) {\n      <si-tab\n        [heading]=\"f.props?.label || ''\"\n        [active]=\"isTabActive\"\n        (activeChange)=\"tabIndexChange($event, $index)\"\n      >\n        <div class=\"pt-8\">\n          <formly-field [field]=\"f\" [formlyAttributes]=\"field\" />\n        </div>\n      </si-tab>\n    }\n  }\n</si-tabset>\n", dependencies: [{ kind: "component", type: SiTabsetComponent, selector: "si-tabset" }, { kind: "component", type: SiTabComponent, selector: "si-tab", inputs: ["active", "canActivate", "canDeactivate"], outputs: ["activeChange"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyObjectTabsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectTabsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-object-tabset', imports: [SiTabsetComponent, SiTabComponent, FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-tabset class=\"d-flex si-layout-fixed-height\">\n  @for (f of field.fieldGroup; track $index) {\n    @let isTabActive = options.formState.selectedTabIndex === $index;\n    @if (!(f.props?.hidden === true)) {\n      <si-tab\n        [heading]=\"f.props?.label || ''\"\n        [active]=\"isTabActive\"\n        (activeChange)=\"tabIndexChange($event, $index)\"\n      >\n        <div class=\"pt-8\">\n          <formly-field [field]=\"f\" [formlyAttributes]=\"field\" />\n        </div>\n      </si-tab>\n    }\n  }\n</si-tabset>\n" }]
         }] });
@@ -671,10 +671,10 @@ class SiFormlyFieldsetComponent extends FieldWrapper {
     get labelWidth() {
         return this.props.labelWidth ? this.props.labelWidth + 'px' : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyFieldsetComponent, isStandalone: true, selector: "si-formly-fieldset", usesInheritance: true, ngImport: i0, template: "<si-form-fieldset [label]=\"label!\" [labelWidth]=\"labelWidth\" [required]=\"props.required\">\n  <ng-template #fieldComponent />\n  <div class=\"invalid-feedback\" [class.d-block]=\"showError\">\n    <formly-validation-message [field]=\"field\" />\n  </div>\n</si-form-fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: SiFormFieldsetComponent, selector: "si-form-fieldset", inputs: ["label", "labelWidth", "required", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyFieldsetComponent, isStandalone: true, selector: "si-formly-fieldset", usesInheritance: true, ngImport: i0, template: "<si-form-fieldset [label]=\"label!\" [labelWidth]=\"labelWidth\" [required]=\"props.required\">\n  <ng-template #fieldComponent />\n  <div class=\"invalid-feedback\" [class.d-block]=\"showError\">\n    <formly-validation-message [field]=\"field\" />\n  </div>\n</si-form-fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "component", type: SiFormFieldsetComponent, selector: "si-form-fieldset", inputs: ["label", "labelWidth", "required", "inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyFieldsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-fieldset', imports: [FormlyModule, SiFormFieldsetComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-form-fieldset [label]=\"label!\" [labelWidth]=\"labelWidth\" [required]=\"props.required\">\n  <ng-template #fieldComponent />\n  <div class=\"invalid-feedback\" [class.d-block]=\"showError\">\n    <formly-validation-message [field]=\"field\" />\n  </div>\n</si-form-fieldset>\n" }]
         }] });
@@ -684,10 +684,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyHorizontalWrapperComponent extends FieldWrapper {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyHorizontalWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyHorizontalWrapperComponent, isStandalone: true, selector: "si-formly-horizontal-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"mb-6 row\">\n  @if (props.label) {\n    <label class=\"col-sm-2 col-form-label\" [attr.for]=\"id\">\n      {{ props.label }}\n      @if (props.required && props.hideRequiredMarker !== true) {\n        *\n      }\n    </label>\n  }\n  <div class=\"col-sm-10\">\n    <ng-template #fieldComponent />\n  </div>\n\n  @if (showError) {\n    <div class=\"col-sm-3 invalid-feedback d-block\">\n      <formly-validation-message [field]=\"field\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyHorizontalWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyHorizontalWrapperComponent, isStandalone: true, selector: "si-formly-horizontal-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"mb-6 row\">\n  @if (props.label) {\n    <label class=\"col-sm-2 col-form-label\" [attr.for]=\"id\">\n      {{ props.label }}\n      @if (props.required && props.hideRequiredMarker !== true) {\n        *\n      }\n    </label>\n  }\n  <div class=\"col-sm-10\">\n    <ng-template #fieldComponent />\n  </div>\n\n  @if (showError) {\n    <div class=\"col-sm-3 invalid-feedback d-block\">\n      <formly-validation-message [field]=\"field\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyHorizontalWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyHorizontalWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-horizontal-wrapper', imports: [FormlyModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-6 row\">\n  @if (props.label) {\n    <label class=\"col-sm-2 col-form-label\" [attr.for]=\"id\">\n      {{ props.label }}\n      @if (props.required && props.hideRequiredMarker !== true) {\n        *\n      }\n    </label>\n  }\n  <div class=\"col-sm-10\">\n    <ng-template #fieldComponent />\n  </div>\n\n  @if (showError) {\n    <div class=\"col-sm-3 invalid-feedback d-block\">\n      <formly-validation-message [field]=\"field\" />\n    </div>\n  }\n</div>\n" }]
         }] });
@@ -697,10 +697,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyIconWrapperComponent extends FieldWrapper {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyIconWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiFormlyIconWrapperComponent, isStandalone: true, selector: "si-formly-icon-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <div class=\"flex-1 me-2\">\n    <ng-template #fieldComponent />\n  </div>\n  @if (props.icon) {\n    <div\n      class=\"wrapper-icon\"\n      [style]=\"'font-size: ' + (props.iconSize ? props.iconSize : 24) + 'px'\"\n      [siTooltip]=\"props.iconTooltip | translate\"\n    >\n      <si-icon [icon]=\"props.icon\" />\n    </div>\n  }\n</div>\n", styles: [".flex-1{flex:1}.wrapper-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "triggers", "isDisabled", "tooltipContext"] }, { 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: SiFormlyIconWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFormlyIconWrapperComponent, isStandalone: true, selector: "si-formly-icon-wrapper", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <div class=\"flex-1 me-2\">\n    <ng-template #fieldComponent />\n  </div>\n  @if (props.icon) {\n    <div\n      class=\"wrapper-icon\"\n      [style]=\"'font-size: ' + (props.iconSize ? props.iconSize : 24) + 'px'\"\n      [siTooltip]=\"props.iconTooltip | translate\"\n    >\n      <si-icon [icon]=\"props.icon\" />\n    </div>\n  }\n</div>\n", styles: [".flex-1{flex:1}.wrapper-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "triggers", "isDisabled", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyIconWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyIconWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-icon-wrapper', imports: [SiIconComponent, SiTooltipDirective, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex\">\n  <div class=\"flex-1 me-2\">\n    <ng-template #fieldComponent />\n  </div>\n  @if (props.icon) {\n    <div\n      class=\"wrapper-icon\"\n      [style]=\"'font-size: ' + (props.iconSize ? props.iconSize : 24) + 'px'\"\n      [siTooltip]=\"props.iconTooltip | translate\"\n    >\n      <si-icon [icon]=\"props.icon\" />\n    </div>\n  }\n</div>\n", styles: [".flex-1{flex:1}.wrapper-icon{display:flex;align-items:center}\n"] }]
         }] });
@@ -710,8 +710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyFormFieldProviderDirective {
-    field = input.required();
-    id = computed(() => this.field().id);
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    id = computed(() => this.field().id, ...(ngDevMode ? [{ debugName: "id" }] : []));
     isFormCheck;
     labelledby = computed(() => {
         const fieldValue = this.field();
@@ -721,20 +721,20 @@ class SiFormlyFormFieldProviderDirective {
         else {
             return undefined;
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
     ngOnChanges() {
         this.isFormCheck = this.field().type === 'checkbox' || this.field().type === 'boolean';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyFormFieldProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiFormlyFormFieldProviderDirective, isStandalone: true, selector: "[siFormlyFormFieldProvider]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiFormlyFormFieldProviderDirective }], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyFormFieldProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiFormlyFormFieldProviderDirective, isStandalone: true, selector: "[siFormlyFormFieldProvider]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiFormlyFormFieldProviderDirective }], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyFormFieldProviderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyFormFieldProviderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siFormlyFormFieldProvider]',
                     providers: [{ provide: SI_FORM_ITEM_CONTROL, useExisting: SiFormlyFormFieldProviderDirective }]
                 }]
-        }] });
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -747,10 +747,10 @@ class SiFormlyWrapperComponent extends FieldWrapper {
     get labelWidth() {
         return this.props.labelWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiFormlyWrapperComponent, isStandalone: true, selector: "si-formly-wrapper", usesInheritance: true, ngImport: i0, template: "<si-form-item\n  [class.ms-n8]=\"field.type === 'checkbox'\"\n  [label]=\"label\"\n  [labelWidth]=\"labelWidth\"\n  [required]=\"props.required\"\n>\n  <div class=\"w-100\" siFormlyFormFieldProvider [field]=\"field\">\n    <ng-template #fieldComponent />\n    <div class=\"invalid-feedback\" [class.d-block]=\"showError\">\n      <!-- This string is hard-coded in the bootstrap fields. -->\n      <!-- See https://github.com/ngx-formly/ngx-formly/blob/main/src/ui/bootstrap/input/src/input.type.ts -->\n      <!-- We should get rid of the bootstrap package, to make it rely on our si-form-item code. -->\n      <formly-validation-message [field]=\"field\" [id]=\"id | siValidationErrorId\" />\n    </div>\n  </div>\n</si-form-item>\n", dependencies: [{ kind: "component", type: SiFormItemComponent, selector: "si-form-item", inputs: ["label", "labelWidth", "disableErrorPrinting", "formErrorMapper", "required"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: SiFormlyFormFieldProviderDirective, selector: "[siFormlyFormFieldProvider]", inputs: ["field"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiFormlyWrapperComponent, isStandalone: true, selector: "si-formly-wrapper", usesInheritance: true, ngImport: i0, template: "<si-form-item\n  [class.ms-n8]=\"field.type === 'checkbox'\"\n  [label]=\"label\"\n  [labelWidth]=\"labelWidth\"\n  [required]=\"props.required\"\n>\n  <div class=\"w-100\" siFormlyFormFieldProvider [field]=\"field\">\n    <ng-template #fieldComponent />\n    <div class=\"invalid-feedback\" [class.d-block]=\"showError\">\n      <!-- This string is hard-coded in the bootstrap fields. -->\n      <!-- See https://github.com/ngx-formly/ngx-formly/blob/main/src/ui/bootstrap/input/src/input.type.ts -->\n      <!-- We should get rid of the bootstrap package, to make it rely on our si-form-item code. -->\n      <formly-validation-message [field]=\"field\" [id]=\"id | siValidationErrorId\" />\n    </div>\n  </div>\n</si-form-item>\n", dependencies: [{ kind: "component", type: SiFormItemComponent, selector: "si-form-item", inputs: ["label", "labelWidth", "disableErrorPrinting", "formErrorMapper", "required"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "directive", type: SiFormlyFormFieldProviderDirective, selector: "[siFormlyFormFieldProvider]", inputs: ["field"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-wrapper', imports: [
                         SiFormItemComponent,
@@ -854,8 +854,8 @@ class SiFormlyModule {
             this.config.addConfig(configuration);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyModule, declarations: [SiFormlyComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyModule, declarations: [SiFormlyComponent], imports: [CommonModule,
             FormlyBootstrapModule,
             FormlyModule,
             ReactiveFormsModule,
@@ -877,7 +877,7 @@ class SiFormlyModule {
             SiFormlyTextDisplayComponent,
             SiFormlyWrapperComponent,
             SiFormModule], exports: [SiFormlyComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyModule, providers: [
             {
                 provide: FORMLY_CONFIG,
                 multi: true,
@@ -906,7 +906,7 @@ class SiFormlyModule {
             SiFormlyWrapperComponent,
             SiFormModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFormlyModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [