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

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

@@ -1,129 +1,25 @@
-import * as i0 from '@angular/core';
-import { viewChild, model, input, output, computed, inject, ChangeDetectionStrategy, Component, Pipe, Directive, NgModule } from '@angular/core';
-import * as i1$2 from '@angular/forms';
-import { FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i1$1 from '@ngx-formly/core';
-import { FormlyForm, FieldType, FormlyModule, FieldArrayType, FieldWrapper, FormlyConfig, FORMLY_CONFIG, FormlyFormBuilder } from '@ngx-formly/core';
-import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@siemens/element-ng/form';
-import { SiFormContainerComponent, SiFormFieldsetComponent, SI_FORM_ITEM_CONTROL, SiFormItemComponent, SiFormModule } from '@siemens/element-ng/form';
-import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
 import { FormlyFieldMultiCheckbox } from '@ngx-formly/bootstrap/multicheckbox';
 import { FormlyFieldRadio } from '@ngx-formly/bootstrap/radio';
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, Pipe, viewChild, input, computed, Directive, model, output, inject } from '@angular/core';
+import * as i1 from '@ngx-formly/core';
+import { FieldType, FormlyModule, FieldArrayType, FieldWrapper, FormlyForm, FORMLY_CONFIG, provideFormlyConfig } from '@ngx-formly/core';
 import { SiTranslatePipe, injectSiTranslateService } from '@siemens/element-translate-ng/translate';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, FormGroup } from '@angular/forms';
 import { SiDateRangeComponent, SiCalendarButtonComponent, SiDatepickerDirective, SiTimepickerComponent } from '@siemens/element-ng/datepicker';
 import { SiIp4InputDirective, SiIp6InputDirective } from '@siemens/element-ng/ip-input';
 import { SiNumberInputComponent } from '@siemens/element-ng/number-input';
 import { SiPasswordStrengthComponent, SiPasswordStrengthDirective } from '@siemens/element-ng/password-strength';
 import { SiSelectComponent, SiSelectSimpleOptionsDirective, SiSelectMultiValueDirective, SiSelectSingleValueDirective } from '@siemens/element-ng/select';
 import { SiCollapsiblePanelComponent, SiAccordionComponent } from '@siemens/element-ng/accordion';
+import { SiFormContainerComponent, SiFormFieldsetComponent, SI_FORM_ITEM_CONTROL, SiFormItemComponent } from '@siemens/element-ng/form';
 import { SiTabsetComponent, SiTabComponent } from '@siemens/element-ng/tabs';
 import { SiIconComponent } from '@siemens/element-ng/icon';
 import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
-
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
-class SiFormlyComponent {
-    /**
-     * Formly main container to provide modelChange subscriptions.
-     */
-    formlyForm = viewChild(FormlyForm, ...(ngDevMode ? [{ debugName: "formlyForm" }] : []));
-    /** Reactive form used by Formly. A form is created when none is provided. */
-    form = model(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
-    /**
-     * Mapping of field name and its value.
-     *
-     * @defaultValue
-     * ```
-     * {}
-     * ```
-     */
-    model = model({}, ...(ngDevMode ? [{ debugName: "model" }] : []));
-    /**
-     * Define FormlyFormOptions.
-     *
-     * @defaultValue
-     * ```
-     * {}
-     * ```
-     */
-    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /**
-     * JSONSchema7 can be used instead of FormlyFieldConfig array for defining form fields.
-     * */
-    schema = model(...(ngDevMode ? [undefined, { debugName: "schema" }] : []));
-    /**
-     * Define all form fields with FormlyFieldConfig array.
-     *
-     * @defaultValue []
-     */
-    // eslint-disable-next-line @angular-eslint/prefer-signal-model
-    fields = input([], ...(ngDevMode ? [{ debugName: "fields" }] : []));
-    /** Emits the effective field configuration, including configuration generated from `schema`. */
-    fieldsChange = output();
-    /** Width in pixels applied to field labels. */
-    labelWidth = input(...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : []));
-    fieldConfig = computed(() => {
-        let formlyFieldConfig;
-        const schema = this.schema();
-        const labelWidth = this.labelWidth();
-        const opts = {
-            map: (field, s) => {
-                if (labelWidth) {
-                    field.props ??= {};
-                    field.props.labelWidth = labelWidth;
-                }
-                return field;
-            }
-        };
-        if (schema) {
-            formlyFieldConfig = [this.formlyJsonschema.toFieldConfig(schema, opts)];
-        }
-        else {
-            formlyFieldConfig = this.fields();
-        }
-        if (formlyFieldConfig && formlyFieldConfig.length > 0) {
-            this.applyLabelWidth(formlyFieldConfig);
-        }
-        this.fieldsChange.emit(formlyFieldConfig);
-        return formlyFieldConfig;
-    }, ...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
-    ownForm = false;
-    formlyJsonschema = inject(FormlyJsonschema);
-    ngOnInit() {
-        if (!this.form()) {
-            this.ownForm = true;
-            this.form.set(new FormGroup({}));
-        }
-    }
-    applyLabelWidth(formlyFieldConfig) {
-        const apply = (cfg) => {
-            cfg.forEach(field => {
-                field.props ??= {};
-                field.props.labelWidth = this.labelWidth();
-                if (Array.isArray(field.fieldGroup)) {
-                    apply(field.fieldGroup);
-                }
-                if (typeof field.fieldArray !== 'function') {
-                    if (Array.isArray(field.fieldArray?.fieldGroup)) {
-                        apply(field.fieldArray.fieldGroup);
-                    }
-                }
-            });
-        };
-        apply(formlyFieldConfig);
-    }
-    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"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'si-formly', standalone: false, changeDetection: ChangeDetectionStrategy.Default, 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 }] }] } });
+import { NgTemplateOutlet } from '@angular/common';
+import { withFormlyBootstrap } from '@ngx-formly/bootstrap';
+import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -166,12 +62,12 @@ class SiFormlyButtonComponent extends FieldType {
             }
         }
     }
-    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  [class]=\"{\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  [id]=\"id\"\n  [formlyAttributes]=\"field\"\n  [hidden]=\"props.hidden\"\n  (click)=\"click()\"\n  >{{ props.label | translate }}</button\n>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiFormlyButtonComponent, isStandalone: true, selector: "si-formly-button", usesInheritance: true, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"btn\"\n  [class]=\"{\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  [id]=\"id\"\n  [formlyAttributes]=\"field\"\n  [hidden]=\"props.hidden\"\n  (click)=\"click()\"\n  >{{ props.label | translate }}</button\n>\n", dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-formly-button', imports: [SiTranslatePipe, FormlyModule], changeDetection: ChangeDetectionStrategy.Default, template: "<button\n  type=\"button\"\n  class=\"btn\"\n  [class]=\"{\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  [id]=\"id\"\n  [formlyAttributes]=\"field\"\n  [hidden]=\"props.hidden\"\n  (click)=\"click()\"\n  >{{ props.label | translate }}</button\n>\n" }]
+            args: [{ selector: 'si-formly-button', imports: [SiTranslatePipe, FormlyModule], changeDetection: ChangeDetectionStrategy.Eager, template: "<button\n  type=\"button\"\n  class=\"btn\"\n  [class]=\"{\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  [id]=\"id\"\n  [formlyAttributes]=\"field\"\n  [hidden]=\"props.hidden\"\n  (click)=\"click()\"\n  >{{ props.label | translate }}</button\n>\n" }]
         }] });
 
 /**
@@ -210,10 +106,10 @@ class SiValidationErrorIdPipe {
     transform(value, ...args) {
         return `${value}-formly-validation-error`;
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiValidationErrorIdPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiValidationErrorIdPipe, isStandalone: true, name: "siValidationErrorId" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiValidationErrorIdPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiValidationErrorIdPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'siValidationErrorId' }]
         }] });
@@ -223,12 +119,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyDateRangeComponent extends FieldType {
-    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  [scrollStrategy]=\"props.scrollStrategy\"\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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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  [scrollStrategy]=\"props.scrollStrategy\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-formly-date-range', imports: [ReactiveFormsModule, FormlyModule, SiDateRangeComponent, SiValidationErrorIdPipe], changeDetection: ChangeDetectionStrategy.Default, 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  [scrollStrategy]=\"props.scrollStrategy\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n" }]
+            args: [{ selector: 'si-formly-date-range', imports: [ReactiveFormsModule, FormlyModule, SiDateRangeComponent, SiValidationErrorIdPipe], changeDetection: ChangeDetectionStrategy.Eager, 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  [scrollStrategy]=\"props.scrollStrategy\"\n  [errormessageId]=\"id | siValidationErrorId\"\n/>\n" }]
         }] });
 
 /**
@@ -252,10 +148,10 @@ class SiFormlyDateTimeComponent extends FieldType {
             }
         }
     }
-    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    [siDatepickerScrollStrategy]=\"props.scrollStrategy\"\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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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    [siDatepickerScrollStrategy]=\"props.scrollStrategy\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n</si-calendar-button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyDateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-datetime', imports: [
                         FormsModule,
@@ -263,7 +159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiCalendarButtonComponent,
                         SiDatepickerDirective,
                         SiValidationErrorIdPipe
-                    ], changeDetection: ChangeDetectionStrategy.Default, 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    [siDatepickerScrollStrategy]=\"props.scrollStrategy\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n</si-calendar-button>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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    [siDatepickerScrollStrategy]=\"props.scrollStrategy\"\n    [readonly]=\"props.readonly || false\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n</si-calendar-button>\n" }]
         }] });
 
 /**
@@ -271,12 +167,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyEmailComponent extends FieldType {
-    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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyEmailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyEmailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyEmailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-formly-email', imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe], changeDetection: ChangeDetectionStrategy.Default, 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" }]
+            args: [{ selector: 'si-formly-email', imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }] });
 
 /**
@@ -284,10 +180,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyIpInputComponent extends FieldType {
-    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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyIpInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "directive", type: SiIp4InputDirective, selector: "input[siIpV4]", exportAs: ["siIpV4"] }, { kind: "directive", type: SiIp6InputDirective, selector: "input[siIpV6]", exportAs: ["siIpV6"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyIpInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyIpInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-ip-address', imports: [
                         ReactiveFormsModule,
@@ -295,7 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiIp4InputDirective,
                         SiIp6InputDirective,
                         SiValidationErrorIdPipe
-                    ], changeDetection: ChangeDetectionStrategy.Default, 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }] });
 
 /**
@@ -303,12 +199,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyNumberComponent extends FieldType {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyNumberComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-number', imports: [ReactiveFormsModule, FormlyModule, SiNumberInputComponent, SiValidationErrorIdPipe], 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" }]
         }] });
 
 /**
@@ -316,10 +212,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyPasswordComponent extends FieldType {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyPasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-password', imports: [
                         FormsModule,
@@ -328,7 +224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiPasswordStrengthComponent,
                         SiPasswordStrengthDirective,
                         SiValidationErrorIdPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+                    ], 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" }]
         }] });
 
 /**
@@ -336,10 +232,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlySelectComponent extends FieldType {
-    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    [scrollStrategy]=\"props.scrollStrategy\"\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    [scrollStrategy]=\"props.scrollStrategy\"\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", "scrollStrategy", "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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlySelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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    [scrollStrategy]=\"props.scrollStrategy\"\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    [scrollStrategy]=\"props.scrollStrategy\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "component", type: SiSelectComponent, selector: "si-select", inputs: ["id", "ariaLabel", "labelledby", "filterPlaceholder", "noResultsFoundLabel", "placeholder", "readonly", "scrollStrategy", "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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlySelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-select', imports: [
                         FormsModule,
@@ -350,7 +246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiSelectMultiValueDirective,
                         SiSelectSingleValueDirective,
                         SiValidationErrorIdPipe
-                    ], changeDetection: ChangeDetectionStrategy.Default, 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    [scrollStrategy]=\"props.scrollStrategy\"\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    [scrollStrategy]=\"props.scrollStrategy\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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    [scrollStrategy]=\"props.scrollStrategy\"\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    [scrollStrategy]=\"props.scrollStrategy\"\n    [errormessageId]=\"id | siValidationErrorId\"\n  />\n}\n" }]
         }] });
 
 /**
@@ -374,12 +270,12 @@ class SiFormlyTextDisplayComponent extends FieldType {
         const path = getKeyPath(this.props.key);
         return getFieldValue(sourceModel, path);
     }
-    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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyTextDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTextDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyTextDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-formly-text-display', imports: [FormlyModule, ReactiveFormsModule, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, 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" }]
+            args: [{ selector: 'si-formly-text-display', imports: [FormlyModule, ReactiveFormsModule, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, 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" }]
         }] });
 
 /**
@@ -387,7 +283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyTextareaComponent extends FieldType {
-    textArea = viewChild.required('textArea');
+    textArea = viewChild.required('textArea', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textArea" }] : /* istanbul ignore next */ []));
     contentGrowTextarea() {
         return this.props.autoGrow ? `attr(data-replicated-value) ' '` : 'none';
     }
@@ -410,12 +307,12 @@ class SiFormlyTextareaComponent extends FieldType {
         this.textArea().nativeElement.parentNode.dataset.replicatedValue =
             this.textArea().nativeElement.value;
     }
-    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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.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$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-formly-textarea', imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe], changeDetection: ChangeDetectionStrategy.Default, 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"] }]
+            args: [{ selector: 'si-formly-textarea', imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe], changeDetection: ChangeDetectionStrategy.Eager, 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 }] }] } });
 
 /**
@@ -439,8 +336,8 @@ class SiFormlyTimeComponent extends FieldType {
             }
         }
     }
-    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
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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"
@@ -450,9 +347,9 @@ class SiFormlyTimeComponent extends FieldType {
     [formControl]="formControl"
     [readonly]="props.readonly || false"
     [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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+  />`, 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyTimeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-formly-time',
@@ -468,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
     [readonly]="props.readonly || false"
     [errormessageId]="id | siValidationErrorId"
   />`,
-                    changeDetection: ChangeDetectionStrategy.Default
+                    changeDetection: ChangeDetectionStrategy.Eager
                 }]
         }] });
 
@@ -538,12 +435,12 @@ class SiFormlyAccordionComponent extends FieldType {
             }
         }
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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.LegacyFormlyField, selector: "formly-field" }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "component", type: SiAccordionComponent, selector: "si-accordion", inputs: ["expandFirstPanel", "fullHeight", "hcollapsed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-accordion', imports: [SiCollapsiblePanelComponent, FormlyModule, SiAccordionComponent], 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" }]
         }] });
 
 /**
@@ -551,12 +448,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyArrayComponent extends FieldArrayType {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i1.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-array', imports: [FormlyModule, SiTranslatePipe], 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" }]
         }] });
 
 /**
@@ -612,12 +509,12 @@ class SiFormlyObjectGridComponent extends FieldType {
             this.rows.push({ classes: rowClasses, columns });
         });
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyObjectGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i1.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "component", type: SiFormContainerComponent, selector: "si-form-container", inputs: ["form", "readonly", "contentContainerBreakpoints", "disableContainerBreakpoints", "errorCodeTranslateKeyMap", "controlNameTranslateKeyMap", "disableErrorPrinting", "labelWidth"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-object-grid', imports: [FormlyModule, SiFormContainerComponent], 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" }]
         }] });
 
 /**
@@ -625,12 +522,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyObjectPlainComponent extends FieldType {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyObjectPlainComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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.LegacyFormlyField, selector: "formly-field" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectPlainComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-object-plain', imports: [FormlyModule], 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" }]
         }] });
 
 /**
@@ -638,12 +535,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyObjectComponent extends FieldType {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyObjectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i1.LegacyFormlyValidationMessage, selector: "formly-validation-message" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-object', imports: [FormlyModule], 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" }]
         }] });
 
 /**
@@ -656,12 +553,12 @@ class SiFormlyObjectTabsetComponent extends FieldType {
             this.options.formState.selectedTabIndex = selectedTab;
         }
     }
-    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", inputs: ["contentOverflowAuto"] }, { 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: "22.0.8", ngImport: i0, type: SiFormlyObjectTabsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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", inputs: ["contentOverflowAuto"] }, { kind: "component", type: SiTabComponent, selector: "si-tab", inputs: ["active", "canActivate", "canDeactivate"], outputs: ["activeChange"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1.LegacyFormlyField, selector: "formly-field" }, { kind: "directive", type: i1.LegacyFormlyAttributes, selector: "[formlyAttributes]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyObjectTabsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-object-tabset', imports: [SiTabsetComponent, SiTabComponent, FormlyModule], 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" }]
         }] });
 
 /**
@@ -675,12 +572,12 @@ class SiFormlyFieldsetComponent extends FieldWrapper {
     get labelWidth() {
         return this.props.labelWidth ? this.props.labelWidth + 'px' : undefined;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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  <div class=\"d-flex flex-column gap-2 mt-n2\">\n    <ng-template #fieldComponent />\n  </div>\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.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "component", type: SiFormFieldsetComponent, selector: "si-form-fieldset", inputs: ["label", "labelWidth", "required", "inline"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-fieldset', imports: [FormlyModule, SiFormFieldsetComponent], template: "<si-form-fieldset [label]=\"label!\" [labelWidth]=\"labelWidth\" [required]=\"props.required\">\n  <div class=\"d-flex flex-column gap-2 mt-n2\">\n    <ng-template #fieldComponent />\n  </div>\n  <div class=\"invalid-feedback\" [class.d-block]=\"showError\">\n    <formly-validation-message [field]=\"field\" />\n  </div>\n</si-form-fieldset>\n" }]
         }] });
 
 /**
@@ -688,12 +585,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyHorizontalWrapperComponent extends FieldWrapper {
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyHorizontalWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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.LegacyFormlyValidationMessage, selector: "formly-validation-message" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyHorizontalWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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" }]
+            args: [{ selector: 'si-formly-horizontal-wrapper', imports: [FormlyModule], 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" }]
         }] });
 
 /**
@@ -701,12 +598,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFormlyIconWrapperComponent extends FieldWrapper {
-    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 icon\"\n      [style.font-size.px]=\"props.iconSize\"\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", "isDisabled", "tooltipScrollStrategy", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyIconWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.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 icon\"\n      [style.font-size.px]=\"props.iconSize\"\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", "isDisabled", "tooltipScrollStrategy", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyIconWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.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 icon\"\n      [style.font-size.px]=\"props.iconSize\"\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"] }]
+            args: [{ selector: 'si-formly-icon-wrapper', imports: [SiIconComponent, SiTooltipDirective, SiTranslatePipe], 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 icon\"\n      [style.font-size.px]=\"props.iconSize\"\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"] }]
         }] });
 
 /**
@@ -715,9 +612,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiFormlyFormFieldProviderDirective {
     /** Formly field configuration used to provide form-item control metadata. */
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    id = computed(() => this.field().id, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    errormessageId = computed(() => `${this.field().id}-errormessage`, ...(ngDevMode ? [{ debugName: "errormessageId" }] : []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    id = computed(() => this.field().id, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    errormessageId = computed(() => `${this.field().id}-errormessage`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errormessageId" }] : /* istanbul ignore next */ []));
     isFormCheck;
     labelledby = computed(() => {
         const fieldValue = this.field();
@@ -727,14 +627,15 @@ class SiFormlyFormFieldProviderDirective {
         else {
             return undefined;
         }
-    }, ...(ngDevMode ? [{ debugName: "labelledby" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledby" }] : /* istanbul ignore next */ []));
     ngOnChanges() {
         this.isFormCheck = this.field().type === 'checkbox' || this.field().type === 'boolean';
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyFormFieldProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.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: "21.0.8", ngImport: i0, type: SiFormlyFormFieldProviderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyFormFieldProviderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siFormlyFormFieldProvider]',
@@ -753,17 +654,17 @@ class SiFormlyWrapperComponent extends FieldWrapper {
     get labelWidth() {
         return this.props.labelWidth;
     }
-    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" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.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\n    class=\"w-100\"\n    siFormlyFormFieldProvider\n    [class.mb-2]=\"field.type === 'checkbox'\"\n    [field]=\"field\"\n  >\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.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "directive", type: SiFormlyFormFieldProviderDirective, selector: "[siFormlyFormFieldProvider]", inputs: ["field"] }, { kind: "pipe", type: SiValidationErrorIdPipe, name: "siValidationErrorId" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-formly-wrapper', imports: [
                         SiFormItemComponent,
                         FormlyModule,
                         SiFormlyFormFieldProviderDirective,
                         SiValidationErrorIdPipe
-                    ], changeDetection: ChangeDetectionStrategy.Default, 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<si-form-item\n  [class.ms-n8]=\"field.type === 'checkbox'\"\n  [label]=\"label\"\n  [labelWidth]=\"labelWidth\"\n  [required]=\"props.required\"\n>\n  <div\n    class=\"w-100\"\n    siFormlyFormFieldProvider\n    [class.mb-2]=\"field.type === 'checkbox'\"\n    [field]=\"field\"\n  >\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" }]
         }] });
 
 /**
@@ -839,117 +740,122 @@ const dynamicUiConfig = () => {
         ]
     };
 };
-class SiFormlyModule {
-    config = inject(FormlyConfig);
-    configs = inject(FORMLY_CONFIG, { optional: true });
-    static forRoot(formlyConfig = {}) {
-        return {
-            ngModule: SiFormlyModule,
-            providers: [
-                { provide: FORMLY_CONFIG, useValue: formlyConfig, multi: true },
-                FormlyConfig,
-                FormlyFormBuilder
-            ]
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+class SiFormlyComponent {
+    /**
+     * Formly main container to provide modelChange subscriptions.
+     */
+    formlyForm = viewChild(FormlyForm, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formlyForm" }] : /* istanbul ignore next */ []));
+    /** Reactive form used by Formly. A form is created when none is provided. */
+    form = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
+    /**
+     * Mapping of field name and its value.
+     *
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    model = model({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    /**
+     * Define FormlyFormOptions.
+     *
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    options = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * JSONSchema7 can be used instead of FormlyFieldConfig array for defining form fields.
+     * */
+    schema = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "schema" }] : /* istanbul ignore next */ []));
+    /**
+     * Define all form fields with FormlyFieldConfig array.
+     *
+     * @defaultValue []
+     */
+    // eslint-disable-next-line @angular-eslint/prefer-signal-model
+    fields = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    /** Emits the effective field configuration, including configuration generated from `schema`. */
+    fieldsChange = output();
+    /** Width in pixels applied to field labels. */
+    labelWidth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    fieldConfig = computed(() => {
+        let formlyFieldConfig;
+        const schema = this.schema();
+        const labelWidth = this.labelWidth();
+        const opts = {
+            map: (field, s) => {
+                if (labelWidth) {
+                    field.props ??= {};
+                    field.props.labelWidth = labelWidth;
+                }
+                return field;
+            }
         };
-    }
-    constructor() {
-        if (!this.configs) {
-            return;
+        if (schema) {
+            formlyFieldConfig = [this.formlyJsonschema.toFieldConfig(schema, opts)];
+        }
+        else {
+            formlyFieldConfig = this.fields();
+        }
+        if (formlyFieldConfig && formlyFieldConfig.length > 0) {
+            this.applyLabelWidth(formlyFieldConfig);
+        }
+        this.fieldsChange.emit(formlyFieldConfig);
+        return formlyFieldConfig;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldConfig" }] : /* istanbul ignore next */ []));
+    ownForm = false;
+    formlyJsonschema = inject(FormlyJsonschema);
+    ngOnInit() {
+        if (!this.form()) {
+            this.ownForm = true;
+            this.form.set(new FormGroup({}));
         }
-        this.configs.forEach(configuration => {
-            this.config.addConfig(configuration);
-        });
     }
-    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,
-            SiFormlyIpInputComponent,
-            SiFormlyAccordionComponent,
-            SiFormlyArrayComponent,
-            SiFormlyButtonComponent,
-            SiFormlyDateTimeComponent,
-            SiFormlyEmailComponent,
-            SiFormlyHorizontalWrapperComponent,
-            SiFormlyIconWrapperComponent,
-            SiFormlyObjectComponent,
-            SiFormlyObjectGridComponent,
-            SiFormlyObjectPlainComponent,
-            SiFormlyObjectTabsetComponent,
-            SiFormlyPasswordComponent,
-            SiFormlySelectComponent,
-            SiFormlyTextareaComponent,
-            SiFormlyTextDisplayComponent,
-            SiFormlyWrapperComponent,
-            SiFormModule], exports: [SiFormlyComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyModule, providers: [
-            {
-                provide: FORMLY_CONFIG,
-                multi: true,
-                useFactory: dynamicUiConfig
-            }
-        ], imports: [CommonModule,
-            FormlyBootstrapModule,
-            FormlyModule,
-            ReactiveFormsModule,
-            SiFormlyIpInputComponent,
-            SiFormlyAccordionComponent,
-            SiFormlyArrayComponent,
-            SiFormlyButtonComponent,
-            SiFormlyDateTimeComponent,
-            SiFormlyEmailComponent,
-            SiFormlyHorizontalWrapperComponent,
-            SiFormlyIconWrapperComponent,
-            SiFormlyObjectComponent,
-            SiFormlyObjectGridComponent,
-            SiFormlyObjectPlainComponent,
-            SiFormlyObjectTabsetComponent,
-            SiFormlyPasswordComponent,
-            SiFormlySelectComponent,
-            SiFormlyTextareaComponent,
-            SiFormlyTextDisplayComponent,
-            SiFormlyWrapperComponent,
-            SiFormModule] });
+    applyLabelWidth(formlyFieldConfig) {
+        const apply = (cfg) => {
+            cfg.forEach(field => {
+                field.props ??= {};
+                field.props.labelWidth = this.labelWidth();
+                if (Array.isArray(field.fieldGroup)) {
+                    apply(field.fieldGroup);
+                }
+                if (typeof field.fieldArray !== 'function') {
+                    if (Array.isArray(field.fieldArray?.fieldGroup)) {
+                        apply(field.fieldArray.fieldGroup);
+                    }
+                }
+            });
+        };
+        apply(formlyFieldConfig);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFormlyComponent, isStandalone: true, 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" }, providers: [
+            provideFormlyConfig(withFormlyBootstrap()),
+            { provide: FORMLY_CONFIG, multi: true, useFactory: dynamicUiConfig }
+        ], 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: SiFormContainerComponent, selector: "si-form-container", inputs: ["form", "readonly", "contentContainerBreakpoints", "disableContainerBreakpoints", "errorCodeTranslateKeyMap", "controlNameTranslateKeyMap", "disableErrorPrinting", "labelWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFormlyModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormlyBootstrapModule,
-                        FormlyModule,
-                        ReactiveFormsModule,
-                        SiFormlyIpInputComponent,
-                        SiFormlyAccordionComponent,
-                        SiFormlyArrayComponent,
-                        SiFormlyButtonComponent,
-                        SiFormlyDateTimeComponent,
-                        SiFormlyEmailComponent,
-                        SiFormlyHorizontalWrapperComponent,
-                        SiFormlyIconWrapperComponent,
-                        SiFormlyObjectComponent,
-                        SiFormlyObjectGridComponent,
-                        SiFormlyObjectPlainComponent,
-                        SiFormlyObjectTabsetComponent,
-                        SiFormlyPasswordComponent,
-                        SiFormlySelectComponent,
-                        SiFormlyTextareaComponent,
-                        SiFormlyTextDisplayComponent,
-                        SiFormlyWrapperComponent,
-                        SiFormModule
-                    ],
-                    declarations: [SiFormlyComponent],
-                    providers: [
-                        {
-                            provide: FORMLY_CONFIG,
-                            multi: true,
-                            useFactory: dynamicUiConfig
-                        }
-                    ],
-                    exports: [SiFormlyComponent]
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFormlyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-formly', imports: [ReactiveFormsModule, FormlyForm, SiFormContainerComponent, NgTemplateOutlet], providers: [
+                        provideFormlyConfig(withFormlyBootstrap()),
+                        { provide: FORMLY_CONFIG, multi: true, useFactory: dynamicUiConfig }
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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 - 2026
@@ -960,5 +866,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiFormlyComponent, SiFormlyModule };
+export { SiFormlyComponent, SiFormlyTranslateExtension, SiValidationErrorIdPipe, dynamicUiConfig, getFieldValue, getKeyPath };
 //# sourceMappingURL=siemens-element-ng-formly.mjs.map