@igo2/common 20.0.0 → 20.1.0-next.1

package/fesm2022/igo2-common-form.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component, NgModule, Injectable, inject, ChangeDetectorRef } from '@angular/core';
+import { input, output, viewChild, ChangeDetectionStrategy, Component, NgModule, Injectable, signal, inject, ChangeDetectorRef } from '@angular/core';
 import { NgClass, AsyncPipe } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
@@ -13,12 +13,12 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { IgoLanguageModule, LanguageService } from '@igo2/core/language';
-import { BehaviorSubject } from 'rxjs';
 import * as i5 from '@ngx-translate/core';
 import * as i5$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import { BehaviorSubject } from 'rxjs';
 import { DynamicOutletComponent } from '@igo2/common/dynamic-component';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CustomHtmlComponent } from '@igo2/common/custom-html';
@@ -71,22 +71,22 @@ class FormComponent {
     /**
      * Form
      */
-    form;
+    form = input(undefined, ...(ngDevMode ? [{ debugName: "form" }] : []));
     /**
      * Input data
      */
-    formData;
+    formData = input(undefined, ...(ngDevMode ? [{ debugName: "formData" }] : []));
     /**
      * Form autocomplete
      */
-    autocomplete = 'off';
+    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
     /**
      * Event emitted when the form is submitted
      */
-    submitForm = new EventEmitter();
-    buttons;
+    submitForm = output();
+    buttons = viewChild('buttons', ...(ngDevMode ? [{ debugName: "buttons" }] : []));
     get hasButtons() {
-        return this.buttons.nativeElement.children.length !== 0;
+        return this.buttons().nativeElement.children.length !== 0;
     }
     /**
      * Is the entity or the template change, recreate the form or repopulate it.
@@ -116,16 +116,16 @@ class FormComponent {
     }
     getData() {
         const data = {};
-        getAllFormFields(this.form).forEach((field) => {
+        getAllFormFields(this.form()).forEach((field) => {
             this.updateDataWithFormField(data, field);
         });
         return data;
     }
     setData(data) {
-        this.form.fields.forEach((field) => {
+        this.form().fields.forEach((field) => {
             field.control.setValue(t(data, field.name).safeObject);
         });
-        this.form.groups.forEach((group) => {
+        this.form().groups.forEach((group) => {
             group.fields.forEach((field) => {
                 field.control.setValue(t(data, field.name).safeObject);
             });
@@ -141,36 +141,25 @@ class FormComponent {
      * Clear form
      */
     clear() {
-        this.form.control.reset();
+        this.form().control.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: FormComponent, isStandalone: true, selector: "igo-form", inputs: { form: "form", formData: "formData", autocomplete: "autocomplete" }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "buttons", first: true, predicate: ["buttons"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  [autocomplete]=\"autocomplete\"\n  [formGroup]=\"form.control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div\n    class=\"igo-form-body\"\n    [ngClass]=\"{ 'igo-form-body-with-buttons': hasButtons }\"\n  >\n    <div class=\"igo-form-content\">\n      <ng-content></ng-content>\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\"></ng-content>\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: FormComponent, isStandalone: true, selector: "igo-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, formData: { classPropertyName: "formData", publicName: "formData", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitForm: "submitForm" }, viewQueries: [{ propertyName: "buttons", first: true, predicate: ["buttons"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  [autocomplete]=\"autocomplete()\"\n  [formGroup]=\"form().control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div\n    class=\"igo-form-body\"\n    [ngClass]=\"{ 'igo-form-body-with-buttons': hasButtons }\"\n  >\n    <div class=\"igo-form-content\">\n      <ng-content />\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\" />\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgClass], template: "<form\n  [autocomplete]=\"autocomplete\"\n  [formGroup]=\"form.control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div\n    class=\"igo-form-body\"\n    [ngClass]=\"{ 'igo-form-body-with-buttons': hasButtons }\"\n  >\n    <div class=\"igo-form-content\">\n      <ng-content></ng-content>\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\"></ng-content>\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"] }]
-        }], propDecorators: { form: [{
-                type: Input
-            }], formData: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], submitForm: [{
-                type: Output
-            }], buttons: [{
-                type: ViewChild,
-                args: ['buttons', { static: true }]
-            }] } });
+            args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgClass], template: "<form\n  [autocomplete]=\"autocomplete()\"\n  [formGroup]=\"form().control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div\n    class=\"igo-form-body\"\n    [ngClass]=\"{ 'igo-form-body-with-buttons': hasButtons }\"\n  >\n    <div class=\"igo-form-content\">\n      <ng-content />\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\" />\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], formData: [{ type: i0.Input, args: [{ isSignal: true, alias: "formData", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], submitForm: [{ type: i0.Output, args: ["submitForm"] }], buttons: [{ type: i0.ViewChild, args: ['buttons', { isSignal: true }] }] } });
 
 /**
  * @deprecated import the FormComponent directly
  */
 class IgoFormFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent], exports: [FormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent], exports: [FormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormComponent],
@@ -194,10 +183,10 @@ class FormFieldService {
     getFieldByType(type) {
         return FormFieldService.fields[type];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -214,72 +203,66 @@ function IgoFormFieldComponent(type) {
  * This component renders a select field
  */
 let FormFieldSelectComponent = class FormFieldSelectComponent {
-    disabled$ = new BehaviorSubject(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
      * Select input choices
      */
-    set choices(value) {
-        this.choices$.next(value);
-    }
-    get choices() {
-        return this.choices$.value;
-    }
-    choices$ = new BehaviorSubject([]);
+    choices = input.required(...(ngDevMode ? [{ debugName: "choices" }] : []));
     /**
      * If the select allow multiple selections
      */
-    multiple = false;
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
     /**
      * The field's form control
      */
-    formControl;
+    formControl = input(undefined, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
     /**
      * Field placeholder
      */
-    placeholder;
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /**
      * Field placeholder
      */
-    errors;
+    errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : []));
     /**
      * Wheter a disable switch should be available
      */
-    disableSwitch = false;
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : []));
     /**
      * Whether the field is required
      */
     get required() {
-        return formControlIsRequired(this.formControl);
+        return formControlIsRequired(this.formControl());
     }
     ngOnInit() {
-        this.disabled$.next(this.formControl.disabled);
+        this.disabled.set(this.formControl().disabled);
     }
     /**
      * Get error message
      */
     getErrorMessage() {
-        return getControlErrorMessage(this.formControl, this.errors);
+        return getControlErrorMessage(this.formControl(), this.errors());
     }
     onDisableSwitchClick() {
         this.toggleDisabled();
     }
     toggleDisabled() {
-        const disabled = !this.disabled$.value;
+        const disabled = !this.disabled();
         if (disabled === true) {
-            this.formControl.disable();
+            this.formControl().disable();
         }
         else {
-            this.formControl.enable();
+            this.formControl().enable();
         }
-        this.disabled$.next(disabled);
+        this.disabled.set(disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldSelectComponent, isStandalone: true, selector: "igo-form-field-select", inputs: { choices: "choices", multiple: "multiple", formControl: "formControl", placeholder: "placeholder", errors: "errors", disableSwitch: "disableSwitch" }, ngImport: i0, template: "<mat-form-field>\n  <mat-select\n    [multiple]=\"multiple\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder | translate\"\n    [formControl]=\"formControl\"\n  >\n    @for (choice of choices$ | async; track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl.errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: FormFieldSelectComponent, isStandalone: true, selector: "igo-form-field-select", inputs: { choices: { classPropertyName: "choices", publicName: "choices", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  <mat-select\n    [multiple]=\"multiple()\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n    @for (choice of choices(); track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{ disabled() === true ? 'check_box_outline_blank' : 'check_box' }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldSelectComponent = __decorate([
     IgoFormFieldComponent('select')
 ], FormFieldSelectComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
@@ -288,22 +271,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         ReactiveFormsModule,
                         MatOptionModule,
                         MatIconModule,
-                        AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<mat-form-field>\n  <mat-select\n    [multiple]=\"multiple\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder | translate\"\n    [formControl]=\"formControl\"\n  >\n    @for (choice of choices$ | async; track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl.errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
-        }], propDecorators: { choices: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], formControl: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], disableSwitch: [{
-                type: Input
-            }] } });
+                    ], template: "<mat-form-field>\n  <mat-select\n    [multiple]=\"multiple()\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n    @for (choice of choices(); track choice) {\n      <mat-option [value]=\"choice.value\">\n        {{ choice.title }}\n      </mat-option>\n    }\n  </mat-select>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{ disabled() === true ? 'check_box_outline_blank' : 'check_box' }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
+        }], propDecorators: { choices: [{ type: i0.Input, args: [{ isSignal: true, alias: "choices", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
 
 /**
  * This component renders a text field
@@ -316,37 +286,37 @@ let FormFieldTextComponent = class FormFieldTextComponent {
     /**
      * The field's form control
      */
-    formControl;
+    formControl = input(undefined, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
     /**
      * Field placeholder
      */
-    placeholder;
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /**
      * if the input is a password
      */
-    isPassword;
+    isPassword = input(undefined, ...(ngDevMode ? [{ debugName: "isPassword" }] : []));
     /**
      * Field placeholder
      */
-    errors;
+    errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : []));
     /**
      * Wheter a disable switch should be available
      */
-    disableSwitch = false;
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : []));
     /**
      * Whether the field is required
      */
     get required() {
-        return formControlIsRequired(this.formControl);
+        return formControlIsRequired(this.formControl());
     }
     ngOnInit() {
-        this.disabled$.next(this.formControl.disabled);
+        this.disabled$.next(this.formControl().disabled);
     }
     /**
      * Get error message
      */
     getErrorMessage() {
-        return getControlErrorMessage(this.formControl, this.errors);
+        return getControlErrorMessage(this.formControl(), this.errors());
     }
     onDisableSwitchClick() {
         this.toggleDisabled();
@@ -354,10 +324,10 @@ let FormFieldTextComponent = class FormFieldTextComponent {
     toggleDisabled() {
         const disabled = !this.disabled$.value;
         if (disabled === true) {
-            this.formControl.disable();
+            this.formControl().disable();
         }
         else {
-            this.formControl.enable();
+            this.formControl().enable();
         }
         this.disabled$.next(disabled);
     }
@@ -366,7 +336,7 @@ let FormFieldTextComponent = class FormFieldTextComponent {
         this.delayedHide();
     }
     delayedHide(delayMS = 10000) {
-        if (this.isPassword && !this.hide) {
+        if (this.isPassword() && !this.hide) {
             if (this.lastTimeoutRequest) {
                 clearTimeout(this.lastTimeoutRequest);
             }
@@ -376,13 +346,13 @@ let FormFieldTextComponent = class FormFieldTextComponent {
             }, delayMS);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldTextComponent, isStandalone: true, selector: "igo-form-field-text", inputs: { formControl: "formControl", placeholder: "placeholder", isPassword: "isPassword", errors: "errors", disableSwitch: "disableSwitch" }, ngImport: i0, template: "<mat-form-field>\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword ? 'true' : required\"\n    [placeholder]=\"placeholder | translate\"\n    [formControl]=\"formControl\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n\n  @if (isPassword) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl.errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: FormFieldTextComponent, isStandalone: true, selector: "igo-form-field-text", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isPassword: { classPropertyName: "isPassword", publicName: "isPassword", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword() ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword() ? 'true' : required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n\n  @if (isPassword()) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldTextComponent = __decorate([
     IgoFormFieldComponent('text')
 ], FormFieldTextComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
@@ -393,18 +363,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         MatButtonModule,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<mat-form-field>\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword ? 'true' : required\"\n    [placeholder]=\"placeholder | translate\"\n    [formControl]=\"formControl\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n\n  @if (isPassword) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl.errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
-        }], propDecorators: { formControl: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], isPassword: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], disableSwitch: [{
-                type: Input
-            }] } });
+                    ], template: "<mat-form-field>\n  <input\n    matInput\n    (blur)=\"delayedHide(0)\"\n    [type]=\"isPassword() ? (hide ? 'password' : 'text') : 'text'\"\n    [required]=\"isPassword() ? 'true' : required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n    (change)=\"delayedHide()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n\n  @if (isPassword()) {\n    <button type=\"button\" matSuffix mat-icon-button (click)=\"togglePassword()\">\n      <mat-icon color=\"primary\">{{\n        hide ? 'visibility_off' : 'visibility'\n      }}</mat-icon>\n    </button>\n  }\n\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
+        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPassword", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
 
 /**
  * This component renders a textarea field
@@ -414,33 +374,33 @@ let FormFieldTextareaComponent = class FormFieldTextareaComponent {
     /**
      * The field's form control
      */
-    formControl;
+    formControl = input(undefined, ...(ngDevMode ? [{ debugName: "formControl" }] : []));
     /**
      * Field placeholder
      */
-    placeholder;
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /**
      * Field placeholder
      */
-    errors;
+    errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : []));
     /**
      * Wheter a disable switch should be available
      */
-    disableSwitch = false;
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : []));
     /**
      * Whether the field is required
      */
     get required() {
-        return formControlIsRequired(this.formControl);
+        return formControlIsRequired(this.formControl());
     }
     ngOnInit() {
-        this.disabled$.next(this.formControl.disabled);
+        this.disabled$.next(this.formControl().disabled);
     }
     /**
      * Get error message
      */
     getErrorMessage() {
-        return getControlErrorMessage(this.formControl, this.errors);
+        return getControlErrorMessage(this.formControl(), this.errors());
     }
     onDisableSwitchClick() {
         this.toggleDisabled();
@@ -448,20 +408,20 @@ let FormFieldTextareaComponent = class FormFieldTextareaComponent {
     toggleDisabled() {
         const disabled = !this.disabled$.value;
         if (disabled === true) {
-            this.formControl.disable();
+            this.formControl().disable();
         }
         else {
-            this.formControl.enable();
+            this.formControl().enable();
         }
         this.disabled$.next(disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldTextareaComponent, isStandalone: true, selector: "igo-form-field-textarea", inputs: { formControl: "formControl", placeholder: "placeholder", errors: "errors", disableSwitch: "disableSwitch" }, ngImport: i0, template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder | translate\"\n    [formControl]=\"formControl\"\n  >\n  </textarea>\n  @if (disableSwitch === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl.errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: FormFieldTextareaComponent, isStandalone: true, selector: "igo-form-field-textarea", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldTextareaComponent = __decorate([
     IgoFormFieldComponent('textarea')
 ], FormFieldTextareaComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
@@ -471,16 +431,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         MatIconModule,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder | translate\"\n    [formControl]=\"formControl\"\n  >\n  </textarea>\n  @if (disableSwitch === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl.errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
-        }], propDecorators: { formControl: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], disableSwitch: [{
-                type: Input
-            }] } });
+                    ], template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-icon\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      matPrefix\n      >{{\n        (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'\n      }}\n    </mat-icon>\n  }\n  @if (formControl().errors) {\n    <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n  }\n</mat-form-field>\n" }]
+        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
 
 class FormService {
     formBuilder = inject(UntypedFormBuilder);
@@ -547,10 +499,10 @@ class FormService {
         const args = match[2];
         return Validators[name](args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -566,7 +518,7 @@ class FormFieldComponent {
     /**
      * Field configuration
      */
-    field;
+    field = input(undefined, ...(ngDevMode ? [{ debugName: "field" }] : []));
     /**
      * Field inputs cache
      */
@@ -576,10 +528,10 @@ class FormFieldComponent {
      */
     fieldSubscribers = undefined;
     get fieldOptions() {
-        return this.field.options || {};
+        return this.field().options || {};
     }
     getFieldComponent() {
-        return this.formFieldService.getFieldByType(this.field.type || 'text');
+        return this.formFieldService.getFieldByType(this.field().type || 'text');
     }
     getFieldInputs() {
         if (this.fieldInputs !== undefined) {
@@ -587,10 +539,10 @@ class FormFieldComponent {
         }
         const errors = this.fieldOptions.errors || {};
         this.fieldInputs = Object.assign({
-            placeholder: this.field.title,
+            placeholder: this.field().title,
             disableSwitch: this.fieldOptions.disableSwitch || false
-        }, Object.assign({}, this.field.inputs || {}), {
-            formControl: this.field.control,
+        }, Object.assign({}, this.field().inputs || {}), {
+            formControl: this.field().control,
             errors: Object.assign({}, getDefaultErrorMessages(), errors)
         });
         return this.fieldInputs;
@@ -599,18 +551,16 @@ class FormFieldComponent {
         if (this.fieldSubscribers !== undefined) {
             return this.fieldSubscribers;
         }
-        this.fieldSubscribers = Object.assign({}, this.field.subscribers || {});
+        this.fieldSubscribers = Object.assign({}, this.field().subscribers || {});
         return this.fieldSubscribers;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormFieldComponent, isStandalone: true, selector: "igo-form-field", inputs: { field: "field" }, ngImport: i0, template: "@if (field !== undefined) {\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  >\n  </igo-dynamic-outlet>\n}\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"], dependencies: [{ kind: "component", type: DynamicOutletComponent, selector: "igo-dynamic-outlet", inputs: ["component", "inputs", "subscribers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: FormFieldComponent, isStandalone: true, selector: "igo-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (field() !== undefined) {\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  />\n}\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"], dependencies: [{ kind: "component", type: DynamicOutletComponent, selector: "igo-dynamic-outlet", inputs: ["component", "inputs", "subscribers"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DynamicOutletComponent], template: "@if (field !== undefined) {\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  >\n  </igo-dynamic-outlet>\n}\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"] }]
-        }], propDecorators: { field: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'igo-form-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DynamicOutletComponent], template: "@if (field() !== undefined) {\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\"\n  />\n}\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"] }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }] } });
 
 const FORM_FIELD_DIRECTIVES = [
     FormFieldComponent,
@@ -623,11 +573,11 @@ const FORM_FIELD_DIRECTIVES = [
  * @deprecated import the components directly or FORM_FIELD_DIRECTIVES for every components/directives
  */
 class IgoFormFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFieldModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent], exports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFieldModule, imports: [FORM_FIELD_DIRECTIVES] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFieldModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent], exports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFieldModule, imports: [FORM_FIELD_DIRECTIVES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...FORM_FIELD_DIRECTIVES],
@@ -644,16 +594,16 @@ class FormGroupComponent {
     /**
      * Form field group
      */
-    group;
+    group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : []));
     /**
      * Field placeholder
      */
-    errors;
+    errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : []));
     /**
      * Form group control
      */
     get formControl() {
-        return this.group.control;
+        return this.group().control;
     }
     /**
      * Return the number of columns a field should occupy.
@@ -685,30 +635,26 @@ class FormGroupComponent {
      * Get error message
      */
     getErrorMessage() {
-        const options = this.group.options || {};
+        const options = this.group().options || {};
         return getControlErrorMessage(this.formControl, options.errors || {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormGroupComponent, isStandalone: true, selector: "igo-form-group", inputs: { group: "group", errors: "errors" }, ngImport: i0, template: "@if (group && group.fields.length > 0) {\n  <div class=\"igo-form-group-fields\">\n    @for (field of group.fields; track field) {\n      <div class=\"igo-form-field-wrapper\" [ngClass]=\"getFieldNgClass(field)\">\n        <igo-form-field [field]=\"field\"></igo-form-field>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content></ng-content>\n</div>\n\n@if (formControl.errors) {\n  <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n}\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: FormGroupComponent, isStandalone: true, selector: "igo-form-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (group() && group().fields.length > 0) {\n  <div class=\"igo-form-group-fields\">\n    @for (field of group().fields; track field) {\n      <div class=\"igo-form-field-wrapper\" [ngClass]=\"getFieldNgClass(field)\">\n        <igo-form-field [field]=\"field\" />\n      </div>\n    }\n  </div>\n}\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content />\n</div>\n\n@if (formControl.errors) {\n  <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n}\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igo-form-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, FormFieldComponent, MatFormFieldModule, IgoLanguageModule], template: "@if (group && group.fields.length > 0) {\n  <div class=\"igo-form-group-fields\">\n    @for (field of group.fields; track field) {\n      <div class=\"igo-form-field-wrapper\" [ngClass]=\"getFieldNgClass(field)\">\n        <igo-form-field [field]=\"field\"></igo-form-field>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content></ng-content>\n</div>\n\n@if (formControl.errors) {\n  <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n}\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"] }]
-        }], propDecorators: { group: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'igo-form-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, FormFieldComponent, MatFormFieldModule, IgoLanguageModule], template: "@if (group() && group().fields.length > 0) {\n  <div class=\"igo-form-group-fields\">\n    @for (field of group().fields; track field) {\n      <div class=\"igo-form-field-wrapper\" [ngClass]=\"getFieldNgClass(field)\">\n        <igo-form-field [field]=\"field\" />\n      </div>\n    }\n  </div>\n}\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content />\n</div>\n\n@if (formControl.errors) {\n  <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n}\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px;box-sizing:border-box}:host .igo-form-field-colspan-2{width:100%}:host .igo-form-field-colspan-1{width:50%}\n"] }]
+        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
 
 /**
  * @deprecated import the FormGroupComponent directly
  */
 class IgoFormGroupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent], exports: [FormGroupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent], exports: [FormGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormGroupComponent],
@@ -725,13 +671,13 @@ const FORM_DIRECTIVES = [
  * @deprecated import the components directly or FORM_DIRECTIVES for every components/directives
  */
 class IgoFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: IgoFormModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: IgoFormModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
             FormComponent], exports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
             FormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormModule, imports: [FORM_DIRECTIVES] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormModule, imports: [FORM_DIRECTIVES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...FORM_DIRECTIVES],
@@ -788,10 +734,10 @@ class FormDialogComponent {
     cancel() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FormDialogComponent, isStandalone: true, selector: "igo-form-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n@if (form$ | async; as form) {\n  <igo-form\n    [form]=\"form\"\n    [formData]=\"data$ | async\"\n    (submitForm)=\"onSubmit($event)\"\n  >\n    @if (form.fields.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field) {\n          <igo-form-field [field]=\"field\"></igo-form-field>\n        }\n        @for (group of form.groups; track group) {\n          <igo-form-group [group]=\"group\"></igo-form-group>\n        }\n      </div>\n    }\n    <div formButtons mat-dialog-actions>\n      <button\n        mat-stroked-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"cancel()\"\n      >\n        {{ data.cancelButtonText | translate }}\n      </button>\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ data.processButtonText | translate }}\n      </button>\n    </div>\n  </igo-form>\n}\n<div>\n  @if (data.notice && data.notice !== '') {\n    <igo-custom-html [html]=\"data.notice\"> </igo-custom-html>\n  }\n</div>\n", styles: [":host div[mat-dialog-actions]{margin:10px 0 0}:host .form-dialog-container{width:100%;padding:10px}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "component", type: FormGroupComponent, selector: "igo-form-group", inputs: ["group", "errors"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: FormDialogComponent, isStandalone: true, selector: "igo-form-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n@if (form$ | async; as form) {\n  <igo-form\n    [form]=\"form\"\n    [formData]=\"data$ | async\"\n    (submitForm)=\"onSubmit($event)\"\n  >\n    @if (form.fields.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of form.groups; track group) {\n          <igo-form-group [group]=\"group\" />\n        }\n      </div>\n    }\n    <div formButtons mat-dialog-actions>\n      <button\n        mat-stroked-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"cancel()\"\n      >\n        {{ data.cancelButtonText | translate }}\n      </button>\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ data.processButtonText | translate }}\n      </button>\n    </div>\n  </igo-form>\n}\n<div>\n  @if (data.notice && data.notice !== '') {\n    <igo-custom-html [html]=\"data.notice\" />\n  }\n</div>\n", styles: [":host div[mat-dialog-actions]{margin:10px 0 0}:host .form-dialog-container{width:100%;padding:10px}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "component", type: FormGroupComponent, selector: "igo-form-group", inputs: ["group", "errors"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-dialog', imports: [
                         MatDialogTitle,
@@ -803,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         CustomHtmlComponent,
                         AsyncPipe,
                         IgoLanguageModule
-                    ], template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n@if (form$ | async; as form) {\n  <igo-form\n    [form]=\"form\"\n    [formData]=\"data$ | async\"\n    (submitForm)=\"onSubmit($event)\"\n  >\n    @if (form.fields.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field) {\n          <igo-form-field [field]=\"field\"></igo-form-field>\n        }\n        @for (group of form.groups; track group) {\n          <igo-form-group [group]=\"group\"></igo-form-group>\n        }\n      </div>\n    }\n    <div formButtons mat-dialog-actions>\n      <button\n        mat-stroked-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"cancel()\"\n      >\n        {{ data.cancelButtonText | translate }}\n      </button>\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ data.processButtonText | translate }}\n      </button>\n    </div>\n  </igo-form>\n}\n<div>\n  @if (data.notice && data.notice !== '') {\n    <igo-custom-html [html]=\"data.notice\"> </igo-custom-html>\n  }\n</div>\n", styles: [":host div[mat-dialog-actions]{margin:10px 0 0}:host .form-dialog-container{width:100%;padding:10px}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}\n"] }]
+                    ], template: "<h1 mat-dialog-title>{{ data.title | translate }}</h1>\n\n@if (form$ | async; as form) {\n  <igo-form\n    [form]=\"form\"\n    [formData]=\"data$ | async\"\n    (submitForm)=\"onSubmit($event)\"\n  >\n    @if (form.fields.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of form.groups; track group) {\n          <igo-form-group [group]=\"group\" />\n        }\n      </div>\n    }\n    <div formButtons mat-dialog-actions>\n      <button\n        mat-stroked-button\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"cancel()\"\n      >\n        {{ data.cancelButtonText | translate }}\n      </button>\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ data.processButtonText | translate }}\n      </button>\n    </div>\n  </igo-form>\n}\n<div>\n  @if (data.notice && data.notice !== '') {\n    <igo-custom-html [html]=\"data.notice\" />\n  }\n</div>\n", styles: [":host div[mat-dialog-actions]{margin:10px 0 0}:host .form-dialog-container{width:100%;padding:10px}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 class FormDialogService {
@@ -821,10 +767,10 @@ class FormDialogService {
         });
         return dialogRef.afterClosed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormDialogService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormDialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FormDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: FormDialogService, decorators: [{
             type: Injectable
         }] });
 
@@ -841,11 +787,11 @@ class IgoFormDialogModule {
             providers: []
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule, FormDialogComponent], exports: [FormDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule, FormDialogComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule, FormDialogComponent], exports: [FormDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule, FormDialogComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IgoFormDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgoFormDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MatDialogModule, FormDialogComponent],