@igo2/common 21.0.0-next.4 → 21.0.0-next.40

package/fesm2022/igo2-common-form.mjs

@@ -1,28 +1,68 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, ChangeDetectionStrategy, Component, NgModule, Injectable, signal, inject, ChangeDetectorRef } from '@angular/core';
+import { input, output, viewChild, ChangeDetectionStrategy, Component, NgModule, Injectable, inject, signal, ChangeDetectorRef, computed } from '@angular/core';
 import * as i3 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NgForm, FormGroupDirective, FormGroup, FormControl, UntypedFormBuilder, Validators } from '@angular/forms';
 import { t } from 'typy';
 import { __decorate } from 'tslib';
-import { MatOptionModule } from '@angular/material/core';
+import * as i4 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { ErrorStateMatcher, provideNativeDateAdapter, MatOptionModule } from '@angular/material/core';
 import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/icon';
-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 { IgoLanguageModule, labelAttribute, LanguageService } from '@igo2/core/language';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import * as i5 from '@ngx-translate/core';
-import { AsyncPipe, NgClass } from '@angular/common';
-import * as i5$1 from '@angular/material/button';
+import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/material/input';
+import * as i3$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i7 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { BehaviorSubject } from 'rxjs';
+import * as i4$1 from '@angular/material/timepicker';
+import { MatTimepickerModule } from '@angular/material/timepicker';
+import * as i4$2 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i2$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 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';
+import { NgClass, AsyncPipe } from '@angular/common';
+import * as i1$1 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
+import * as i6 from '@igo2/common/custom-html';
+import { IgoCustomHtmlModule, CustomHtmlComponent } from '@igo2/common/custom-html';
+import * as i1$2 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions, MatDialogModule, MatDialog } from '@angular/material/dialog';
 
+function buildFormFromConfig(formService, formConfig) {
+    const fields = [];
+    const groups = [];
+    formConfig?.formFieldConfigs?.forEach((config) => {
+        fields.push(formService.field(config));
+    });
+    formConfig?.formGroupsConfigs?.forEach((formGroupsConfig) => {
+        const groupFields = formGroupsConfig.formFieldConfigs?.map((config) => formService.field(config));
+        groups.push(formService.group({ name: formGroupsConfig.name }, groupFields));
+    });
+    return formService.form(fields, groups);
+}
+function markFormAsTouched(form) {
+    if (form.groups?.length) {
+        form.groups.forEach((group) => {
+            Object.keys(group.control.controls).forEach((key) => {
+                group.control.controls[key].markAsTouched();
+                group.control.controls[key].updateValueAndValidity();
+            });
+        });
+        return;
+    }
+    form.fields.forEach((field) => {
+        field.control.markAsTouched();
+        field.control.updateValueAndValidity();
+    });
+}
 function formControlIsRequired(control) {
     if (control.validator) {
         const validator = control.validator({});
@@ -142,10 +182,10 @@ class FormComponent {
     clear() {
         this.form()?.control.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: FormComponent, isStandalone: true, selector: "igo-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, 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 class=\"igo-form-body\" [class.igo-form-body-with-buttons]=\"hasButtons\">\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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.24", type: FormComponent, isStandalone: true, selector: "igo-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, 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 class=\"igo-form-body\" [class.igo-form-body-with-buttons]=\"hasButtons\">\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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule], template: "<form\n  [autocomplete]=\"autocomplete()\"\n  [formGroup]=\"form().control\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"igo-form-body\" [class.igo-form-body-with-buttons]=\"hasButtons\">\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: true }] }], 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 }] }] } });
@@ -154,11 +194,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * @deprecated import the FormComponent directly
  */
 class IgoFormFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent], exports: [FormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent], exports: [FormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFormModule, imports: [FormComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormComponent],
@@ -182,10 +222,10 @@ class FormFieldService {
     getFieldByType(type) {
         return FormFieldService.fields[type];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -198,6 +238,472 @@ function IgoFormFieldComponent(type) {
     };
 }
 
+let FormFieldCheckboxComponent = class FormFieldCheckboxComponent {
+    errorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    showErrorState = signal(false, ...(ngDevMode ? [{ debugName: "showErrorState" }] : /* istanbul ignore next */ []));
+    selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    destroy$ = new Subject();
+    choices = input.required(...(ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []));
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : /* istanbul ignore next */ []));
+    maxSelected = input(...(ngDevMode ? [undefined, { debugName: "maxSelected" }] : /* istanbul ignore next */ []));
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : /* istanbul ignore next */ []));
+    get required() {
+        return formControlIsRequired(this.formControl());
+    }
+    ngOnInit() {
+        const control = this.formControl();
+        const maxSelected = this.maxSelected();
+        if (typeof maxSelected === 'number' && Number.isFinite(maxSelected)) {
+            control.addValidators(this.maxSelectedValidator(maxSelected));
+        }
+        const normalizedValue = this.normalizeValue(control.value);
+        control.setValue(normalizedValue, {
+            emitEvent: false
+        });
+        control.updateValueAndValidity({ emitEvent: false });
+        this.syncState(control);
+        control.events.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.syncState(control);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getErrorMessage() {
+        const maxSelectedError = this.formControl().errors?.['maxSelected'];
+        if (maxSelectedError) {
+            return (this.errors()?.['maxSelected'] ||
+                `Select at most ${maxSelectedError.max} options.`);
+        }
+        return getControlErrorMessage(this.formControl(), this.errors() || {});
+    }
+    showError() {
+        return this.showErrorState();
+    }
+    isChecked(value) {
+        return this.selectedValues().some((selectedValue) => selectedValue === value);
+    }
+    onChoiceChange(value, event) {
+        const selectedValues = this.selectedValues();
+        const nextValues = event.checked
+            ? selectedValues.some((selectedValue) => selectedValue === value)
+                ? selectedValues
+                : [...selectedValues, value]
+            : selectedValues.filter((selectedValue) => selectedValue !== value);
+        this.formControl().setValue(nextValues);
+        this.formControl().markAsDirty();
+        this.formControl().markAsTouched();
+    }
+    onDisableSwitchClick() {
+        this.toggleDisabled();
+    }
+    normalizeValue(value) {
+        if (Array.isArray(value)) {
+            return value;
+        }
+        if (value === undefined || value === null || value === '') {
+            return [];
+        }
+        return [value];
+    }
+    syncState(control) {
+        this.disabled.set(control.disabled);
+        this.selectedValues.set(this.normalizeValue(control.value));
+        this.showErrorState.set(this.errorStateMatcher.isErrorState(control, this.parentFormGroup ?? this.parentForm));
+    }
+    toggleDisabled() {
+        const disabled = !this.disabled();
+        if (disabled === true) {
+            this.formControl().disable();
+        }
+        else {
+            this.formControl().enable();
+        }
+        this.disabled.set(disabled);
+    }
+    maxSelectedValidator(maxSelected) {
+        return (control) => {
+            const selectedValues = this.normalizeValue(control.value);
+            if (selectedValues.length <= maxSelected) {
+                return null;
+            }
+            return {
+                maxSelected: {
+                    max: maxSelected,
+                    actual: selectedValues.length
+                }
+            };
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormFieldCheckboxComponent, isStandalone: true, selector: "igo-form-field-checkbox", inputs: { choices: { classPropertyName: "choices", publicName: "choices", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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 }, maxSelected: { classPropertyName: "maxSelected", publicName: "maxSelected", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"igo-form-field-choice-list\">\n  @if (placeholder()) {\n    <div class=\"igo-form-field-choice-label\">\n      {{ placeholder() | translate }}\n    </div>\n  }\n\n  <div class=\"igo-form-field-choice-options\">\n    @for (choice of choices(); track choice.value) {\n      <mat-checkbox\n        [checked]=\"isChecked(choice.value)\"\n        [disabled]=\"disabled()\"\n        [required]=\"required\"\n        (change)=\"onChoiceChange(choice.value, $event)\"\n      >\n        {{ choice.title }}\n      </mat-checkbox>\n    }\n  </div>\n\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      [attr.aria-label]=\"'Toggle field availability'\"\n    />\n  }\n\n  <mat-error [hidden]=\"!showError()\">\n    {{ getErrorMessage() | translate }}\n  </mat-error>\n</div>\n", styles: [":host{display:block;width:100%}.igo-form-field-choice-list{width:100%}.igo-form-field-choice-label{margin-bottom:8px;color:#000000de;font-size:1rem;line-height:1.25rem}::ng-deep .igo-form-field-choice-list mat-error{display:block;margin-top:6px;font-family:var(--mat-form-field-subscript-text-font, inherit);font-size:var(--mat-form-field-subscript-text-size, 12px);font-weight:var(--mat-form-field-subscript-text-weight, 400);line-height:var(--mat-form-field-subscript-text-line-height, 20px);letter-spacing:var(--mat-form-field-subscript-text-tracking, normal)}::ng-deep .igo-form-field-choice-list mat-error[hidden]{display:none}::ng-deep .igo-form-field-choice-list mat-radio-group,::ng-deep .igo-form-field-choice-list mat-checkbox{display:block}::ng-deep .igo-form-field-choice-list mat-radio-button{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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" }] });
+};
+FormFieldCheckboxComponent = __decorate([
+    IgoFormFieldComponent('checkbox')
+], FormFieldCheckboxComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-field-checkbox', imports: [
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        IgoLanguageModule
+                    ], template: "<div class=\"igo-form-field-choice-list\">\n  @if (placeholder()) {\n    <div class=\"igo-form-field-choice-label\">\n      {{ placeholder() | translate }}\n    </div>\n  }\n\n  <div class=\"igo-form-field-choice-options\">\n    @for (choice of choices(); track choice.value) {\n      <mat-checkbox\n        [checked]=\"isChecked(choice.value)\"\n        [disabled]=\"disabled()\"\n        [required]=\"required\"\n        (change)=\"onChoiceChange(choice.value, $event)\"\n      >\n        {{ choice.title }}\n      </mat-checkbox>\n    }\n  </div>\n\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      [attr.aria-label]=\"'Toggle field availability'\"\n    />\n  }\n\n  <mat-error [hidden]=\"!showError()\">\n    {{ getErrorMessage() | translate }}\n  </mat-error>\n</div>\n", styles: [":host{display:block;width:100%}.igo-form-field-choice-list{width:100%}.igo-form-field-choice-label{margin-bottom:8px;color:#000000de;font-size:1rem;line-height:1.25rem}::ng-deep .igo-form-field-choice-list mat-error{display:block;margin-top:6px;font-family:var(--mat-form-field-subscript-text-font, inherit);font-size:var(--mat-form-field-subscript-text-size, 12px);font-weight:var(--mat-form-field-subscript-text-weight, 400);line-height:var(--mat-form-field-subscript-text-line-height, 20px);letter-spacing:var(--mat-form-field-subscript-text-tracking, normal)}::ng-deep .igo-form-field-choice-list mat-error[hidden]{display:none}::ng-deep .igo-form-field-choice-list mat-radio-group,::ng-deep .igo-form-field-choice-list mat-checkbox{display:block}::ng-deep .igo-form-field-choice-list mat-radio-button{margin-right:16px}\n"] }]
+        }], propDecorators: { choices: [{ type: i0.Input, args: [{ isSignal: true, alias: "choices", required: true }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }] } });
+
+let FormFieldDatetimeComponent = class FormFieldDatetimeComponent {
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    dateTimeGroup = new FormGroup({
+        date: new FormControl(null),
+        time: new FormControl(null)
+    });
+    get dateControl() {
+        return this.dateTimeGroup.controls.date;
+    }
+    get timeControl() {
+        return this.dateTimeGroup.controls.time;
+    }
+    destroy$ = new Subject();
+    syncingExternalToInternal = false;
+    syncingInternalToExternal = false;
+    /**
+     * The field's form control
+     */
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Field placeholder used for date input
+     */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Placeholder used for time input
+     */
+    timePlaceholder = input(...(ngDevMode ? [undefined, { debugName: "timePlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum selectable date
+     */
+    minDate = input(...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum selectable date
+     */
+    maxDate = input(...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /**
+     * Minimum selectable time
+     */
+    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum selectable time
+     */
+    maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional explicit options rendered in the timepicker panel.
+     */
+    options = input(null, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Time option interval for the panel.
+     */
+    interval = input(null, ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether clicking the input should open the timepicker.
+     */
+    openOnClick = input(true, ...(ngDevMode ? [{ debugName: "openOnClick" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a disable switch should be available
+     */
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : /* istanbul ignore next */ []));
+    /**
+     * Error messages mapping
+     */
+    errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the field is required
+     */
+    get required() {
+        return formControlIsRequired(this.formControl());
+    }
+    ngOnInit() {
+        this.disabled.set(this.formControl().disabled);
+        this.syncInternalFromExternal(this.formControl().value);
+        this.formControl()
+            .valueChanges.pipe(takeUntil(this.destroy$))
+            .subscribe((value) => {
+            if (this.syncingInternalToExternal) {
+                return;
+            }
+            this.syncInternalFromExternal(value);
+        });
+        this.formControl()
+            .statusChanges.pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            const isDisabled = this.formControl().disabled;
+            this.disabled.set(isDisabled);
+            if (isDisabled) {
+                this.dateTimeGroup.disable({ emitEvent: false });
+            }
+            else {
+                this.dateTimeGroup.enable({ emitEvent: false });
+                this.updateTimeControlState();
+            }
+        });
+        this.dateTimeGroup.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.updateTimeControlState();
+            this.pushInternalToExternal();
+        });
+        if (this.formControl().disabled) {
+            this.dateTimeGroup.disable({ emitEvent: false });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getErrorMessage() {
+        return getControlErrorMessage(this.formControl(), this.errors() || {});
+    }
+    clearDate() {
+        this.dateControl.setValue(null);
+    }
+    clearTime() {
+        this.timeControl.setValue(null);
+    }
+    onDisableSwitchClick() {
+        const disabled = !this.disabled();
+        if (disabled) {
+            this.formControl().disable();
+        }
+        else {
+            this.formControl().enable();
+        }
+        this.disabled.set(disabled);
+    }
+    syncInternalFromExternal(value) {
+        const externalDate = this.toDateValue(value);
+        this.syncingExternalToInternal = true;
+        this.dateTimeGroup.patchValue({
+            date: externalDate ? new Date(externalDate) : null,
+            time: externalDate ? new Date(externalDate) : null
+        }, { emitEvent: false });
+        this.syncingExternalToInternal = false;
+        this.updateTimeControlState();
+    }
+    pushInternalToExternal() {
+        if (this.syncingExternalToInternal) {
+            return;
+        }
+        const { date: datePart, time: timeValue } = this.dateTimeGroup.getRawValue();
+        if (!datePart) {
+            if (this.formControl().value !== null) {
+                this.syncingInternalToExternal = true;
+                this.formControl().setValue(null);
+                this.syncingInternalToExternal = false;
+            }
+            return;
+        }
+        const sourceTime = timeValue;
+        const next = new Date(datePart);
+        next.setHours(sourceTime?.getHours() ?? 0, sourceTime?.getMinutes() ?? 0, sourceTime?.getSeconds() ?? 0, 0);
+        this.syncingInternalToExternal = true;
+        this.formControl().setValue(next);
+        this.syncingInternalToExternal = false;
+    }
+    updateTimeControlState() {
+        const hasDate = !!this.dateControl.value;
+        if (!hasDate && this.timeControl.enabled) {
+            this.timeControl.disable({ emitEvent: false });
+        }
+        else if (hasDate && this.timeControl.disabled && !this.disabled()) {
+            this.timeControl.enable({ emitEvent: false });
+        }
+    }
+    toDateValue(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        if (typeof value === 'string' && value.trim().length > 0) {
+            const date = new Date(value);
+            return Number.isNaN(date.getTime()) ? null : date;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormFieldDatetimeComponent, isStandalone: true, selector: "igo-form-field-datetime", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, timePlaceholder: { classPropertyName: "timePlaceholder", publicName: "timePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, openOnClick: { classPropertyName: "openOnClick", publicName: "openOnClick", isSignal: true, isRequired: false, transformFunction: null }, disableSwitch: { classPropertyName: "disableSwitch", publicName: "disableSwitch", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<div class=\"igo-form-field-datetime-row\">\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    @if (showLabel() === true) {\n      <mat-label>{{ placeholder() | translate }}</mat-label>\n    }\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matDatepicker]=\"datePicker\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder() | translate\"\n      [formControl]=\"dateControl\"\n      [min]=\"minDate() ?? null\"\n      [max]=\"maxDate() ?? null\"\n    />\n    @if (dateControl.value && !disabled()) {\n      <button matIconSuffix mat-icon-button type=\"button\" (click)=\"clearDate()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\" />\n    <mat-datepicker #datePicker />\n    @if (disableSwitch() === true) {\n      <mat-checkbox\n        class=\"igo-form-disable-switch\"\n        (click)=\"onDisableSwitchClick()\"\n        [checked]=\"!disabled()\"\n        matPrefix\n      />\n    }\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    <mat-label>{{ timePlaceholder() | translate }}</mat-label>\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matTimepicker]=\"timePicker\"\n      [required]=\"required\"\n      [placeholder]=\"timePlaceholder() | translate\"\n      [formControl]=\"timeControl\"\n      [matTimepickerMin]=\"minTime()\"\n      [matTimepickerMax]=\"maxTime()\"\n      [matTimepickerOpenOnClick]=\"openOnClick()\"\n    />\n\n    @if (timeControl.value && !disabled() && !timeControl.disabled) {\n      <button\n        matIconSuffix\n        mat-icon-button\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); clearTime()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-timepicker-toggle matIconSuffix [for]=\"timePicker\" />\n    <mat-timepicker #timePicker [interval]=\"interval()\" [options]=\"options()\" />\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [":host{display:block}.igo-form-field-datetime-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.igo-form-field-datetime-part{width:100%;min-width:0}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button,:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button.mat-mdc-button-base{margin:0}@media(max-width:767px){.igo-form-field-datetime-row{grid-template-columns:1fr}}\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.MatLabel, selector: "mat-label" }, { 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.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: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i4$1.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4$1.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4$1.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { 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: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+};
+FormFieldDatetimeComponent = __decorate([
+    IgoFormFieldComponent('datetime')
+], FormFieldDatetimeComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldDatetimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-field-datetime', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatTimepickerModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        IgoLanguageModule
+                    ], providers: [provideNativeDateAdapter()], template: "<div class=\"igo-form-field-datetime-row\">\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    @if (showLabel() === true) {\n      <mat-label>{{ placeholder() | translate }}</mat-label>\n    }\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matDatepicker]=\"datePicker\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder() | translate\"\n      [formControl]=\"dateControl\"\n      [min]=\"minDate() ?? null\"\n      [max]=\"maxDate() ?? null\"\n    />\n    @if (dateControl.value && !disabled()) {\n      <button matIconSuffix mat-icon-button type=\"button\" (click)=\"clearDate()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-datepicker-toggle matIconSuffix [for]=\"datePicker\" />\n    <mat-datepicker #datePicker />\n    @if (disableSwitch() === true) {\n      <mat-checkbox\n        class=\"igo-form-disable-switch\"\n        (click)=\"onDisableSwitchClick()\"\n        [checked]=\"!disabled()\"\n        matPrefix\n      />\n    }\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n\n  <mat-form-field class=\"igo-form-field-datetime-part\">\n    <mat-label>{{ timePlaceholder() | translate }}</mat-label>\n\n    <input\n      matInput\n      readonly=\"true\"\n      [matTimepicker]=\"timePicker\"\n      [required]=\"required\"\n      [placeholder]=\"timePlaceholder() | translate\"\n      [formControl]=\"timeControl\"\n      [matTimepickerMin]=\"minTime()\"\n      [matTimepickerMax]=\"maxTime()\"\n      [matTimepickerOpenOnClick]=\"openOnClick()\"\n    />\n\n    @if (timeControl.value && !disabled() && !timeControl.disabled) {\n      <button\n        matIconSuffix\n        mat-icon-button\n        type=\"button\"\n        (click)=\"$event.stopPropagation(); clearTime()\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <mat-timepicker-toggle matIconSuffix [for]=\"timePicker\" />\n    <mat-timepicker #timePicker [interval]=\"interval()\" [options]=\"options()\" />\n    @if (formControl().errors) {\n      <mat-error>{{ getErrorMessage() | translate }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [":host{display:block}.igo-form-field-datetime-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.igo-form-field-datetime-part{width:100%;min-width:0}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button,:host ::ng-deep .igo-form-field-datetime-part .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button.mat-mdc-button-base{margin:0}@media(max-width:767px){.igo-form-field-datetime-row{grid-template-columns:1fr}}\n"] }]
+        }], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], timePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePlaceholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], openOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnClick", required: false }] }], disableSwitch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSwitch", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
+
+/**
+ * This component renders a number field
+ */
+let FormFieldNumberComponent = class FormFieldNumberComponent {
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hide = true;
+    /**
+     * The field's form control
+     */
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Field placeholder
+     */
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Field placeholder
+     */
+    errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : /* istanbul ignore next */ []));
+    /**
+     * Wheter a disable switch should be available
+     */
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the field is required
+     */
+    get required() {
+        return formControlIsRequired(this.formControl());
+    }
+    ngOnInit() {
+        this.disabled.set(this.formControl().disabled);
+    }
+    /**
+     * Get error message
+     */
+    getErrorMessage() {
+        return getControlErrorMessage(this.formControl(), this.errors() || {});
+    }
+    onDisableSwitchClick() {
+        this.toggleDisabled();
+    }
+    toggleDisabled() {
+        const disabled = !this.disabled();
+        if (disabled === true) {
+            this.formControl().disable();
+        }
+        else {
+            this.formControl().enable();
+        }
+        this.disabled.set(disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormFieldNumberComponent, isStandalone: true, selector: "igo-form-field-number", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\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.MatLabel, selector: "mat-label" }, { 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.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+};
+FormFieldNumberComponent = __decorate([
+    IgoFormFieldComponent('number')
+], FormFieldNumberComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-field-number', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        MatButtonModule,
+                        IgoLanguageModule
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <input\n    matInput\n    type=\"number\"\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  />\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\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: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", 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 }] }] } });
+
+let FormFieldRadiobuttonComponent = class FormFieldRadiobuttonComponent {
+    errorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    showErrorState = signal(false, ...(ngDevMode ? [{ debugName: "showErrorState" }] : /* istanbul ignore next */ []));
+    destroy$ = new Subject();
+    choices = input.required(...(ngDevMode ? [{ debugName: "choices" }] : /* istanbul ignore next */ []));
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    errors = input(...(ngDevMode ? [undefined, { debugName: "errors" }] : /* istanbul ignore next */ []));
+    disableSwitch = input(false, ...(ngDevMode ? [{ debugName: "disableSwitch" }] : /* istanbul ignore next */ []));
+    get required() {
+        return formControlIsRequired(this.formControl());
+    }
+    ngOnInit() {
+        const control = this.formControl();
+        this.syncState(control);
+        control.events.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.syncState(control);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getErrorMessage() {
+        return getControlErrorMessage(this.formControl(), this.errors() || {});
+    }
+    showError() {
+        return this.showErrorState();
+    }
+    onDisableSwitchClick() {
+        this.toggleDisabled();
+    }
+    syncState(control) {
+        this.disabled.set(control.disabled);
+        this.showErrorState.set(this.errorStateMatcher.isErrorState(control, this.parentFormGroup ?? this.parentForm));
+    }
+    toggleDisabled() {
+        const disabled = !this.disabled();
+        if (disabled === true) {
+            this.formControl().disable();
+        }
+        else {
+            this.formControl().enable();
+        }
+        this.disabled.set(disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldRadiobuttonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormFieldRadiobuttonComponent, isStandalone: true, selector: "igo-form-field-radiobutton", inputs: { choices: { classPropertyName: "choices", publicName: "choices", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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: "<div class=\"igo-form-field-choice-list\">\n  @if (placeholder()) {\n    <div class=\"igo-form-field-choice-label\">\n      {{ placeholder() | translate }}\n    </div>\n  }\n\n  <mat-radio-group\n    class=\"igo-form-field-choice-options\"\n    [formControl]=\"formControl()\"\n    [required]=\"required\"\n  >\n    @for (choice of choices(); track choice.value) {\n      <mat-radio-button [value]=\"choice.value\" [disabled]=\"disabled()\">\n        {{ choice.title }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      [attr.aria-label]=\"'Toggle field availability'\"\n    />\n  }\n\n  <mat-error [hidden]=\"!showError()\">\n    {{ getErrorMessage() | translate }}\n  </mat-error>\n</div>\n", styles: [":host{display:block;width:100%}.igo-form-field-choice-list{width:100%}.igo-form-field-choice-label{margin-bottom:8px;color:#000000de;font-size:1rem;line-height:1.25rem}::ng-deep .igo-form-field-choice-list mat-error{display:block;margin-top:6px;font-family:var(--mat-form-field-subscript-text-font, inherit);font-size:var(--mat-form-field-subscript-text-size, 12px);font-weight:var(--mat-form-field-subscript-text-weight, 400);line-height:var(--mat-form-field-subscript-text-line-height, 20px);letter-spacing:var(--mat-form-field-subscript-text-tracking, normal)}::ng-deep .igo-form-field-choice-list mat-error[hidden]{display:none}::ng-deep .igo-form-field-choice-list mat-radio-group,::ng-deep .igo-form-field-choice-list mat-checkbox{display:block}::ng-deep .igo-form-field-choice-list mat-radio-button{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+};
+FormFieldRadiobuttonComponent = __decorate([
+    IgoFormFieldComponent('radiobuttons'),
+    IgoFormFieldComponent('radiobutton')
+], FormFieldRadiobuttonComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldRadiobuttonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-field-radiobutton', imports: [
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        MatRadioModule,
+                        IgoLanguageModule
+                    ], template: "<div class=\"igo-form-field-choice-list\">\n  @if (placeholder()) {\n    <div class=\"igo-form-field-choice-label\">\n      {{ placeholder() | translate }}\n    </div>\n  }\n\n  <mat-radio-group\n    class=\"igo-form-field-choice-options\"\n    [formControl]=\"formControl()\"\n    [required]=\"required\"\n  >\n    @for (choice of choices(); track choice.value) {\n      <mat-radio-button [value]=\"choice.value\" [disabled]=\"disabled()\">\n        {{ choice.title }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      [attr.aria-label]=\"'Toggle field availability'\"\n    />\n  }\n\n  <mat-error [hidden]=\"!showError()\">\n    {{ getErrorMessage() | translate }}\n  </mat-error>\n</div>\n", styles: [":host{display:block;width:100%}.igo-form-field-choice-list{width:100%}.igo-form-field-choice-label{margin-bottom:8px;color:#000000de;font-size:1rem;line-height:1.25rem}::ng-deep .igo-form-field-choice-list mat-error{display:block;margin-top:6px;font-family:var(--mat-form-field-subscript-text-font, inherit);font-size:var(--mat-form-field-subscript-text-size, 12px);font-weight:var(--mat-form-field-subscript-text-weight, 400);line-height:var(--mat-form-field-subscript-text-line-height, 20px);letter-spacing:var(--mat-form-field-subscript-text-tracking, normal)}::ng-deep .igo-form-field-choice-list mat-error[hidden]{display:none}::ng-deep .igo-form-field-choice-list mat-radio-group,::ng-deep .igo-form-field-choice-list mat-checkbox{display:block}::ng-deep .igo-form-field-choice-list mat-radio-button{margin-right:16px}\n"] }]
+        }], propDecorators: { choices: [{ type: i0.Input, args: [{ isSignal: true, alias: "choices", required: true }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", 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 select field
  */
@@ -215,6 +721,10 @@ let FormFieldSelectComponent = class FormFieldSelectComponent {
      * The field's form control
      */
     formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     /**
      * Field placeholder
      */
@@ -255,13 +765,13 @@ let FormFieldSelectComponent = class FormFieldSelectComponent {
         }
         this.disabled.set(disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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: true, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\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-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\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.MatLabel, selector: "mat-label" }, { 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$1.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$1.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: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: "21.2.10", ngImport: i0, type: FormFieldSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
@@ -269,23 +779,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         MatOptionModule,
-                        MatIconModule,
+                        MatCheckboxModule,
                         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(); 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: true }] }], 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 }] }] } });
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\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-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\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: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", 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
  */
 let FormFieldTextComponent = class FormFieldTextComponent {
     cdRef = inject(ChangeDetectorRef);
-    disabled$ = new BehaviorSubject(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     hide = true;
     lastTimeoutRequest;
     /**
      * The field's form control
      */
     formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     /**
      * Field placeholder
      */
@@ -309,7 +823,7 @@ let FormFieldTextComponent = class FormFieldTextComponent {
         return formControlIsRequired(this.formControl());
     }
     ngOnInit() {
-        this.disabled$.next(this.formControl().disabled);
+        this.disabled.set(this.formControl().disabled);
     }
     /**
      * Get error message
@@ -321,14 +835,14 @@ let FormFieldTextComponent = class FormFieldTextComponent {
         this.toggleDisabled();
     }
     toggleDisabled() {
-        const disabled = !this.disabled$.value;
+        const disabled = !this.disabled();
         if (disabled === true) {
             this.formControl().disable();
         }
         else {
             this.formControl().enable();
         }
-        this.disabled$.next(disabled);
+        this.disabled.set(disabled);
     }
     togglePassword() {
         this.hide = !this.hide;
@@ -345,13 +859,13 @@ let FormFieldTextComponent = class FormFieldTextComponent {
             }, delayMS);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormFieldTextComponent, isStandalone: true, selector: "igo-form-field-text", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormFieldTextComponent, isStandalone: true, selector: "igo-form-field-text", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\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-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\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.MatLabel, selector: "mat-label" }, { 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.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: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldTextComponent = __decorate([
     IgoFormFieldComponent('text')
 ], FormFieldTextComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
@@ -359,21 +873,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         MatIconModule,
+                        MatCheckboxModule,
                         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: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], 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 }] }] } });
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\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-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\n    />\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: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", 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
  */
 let FormFieldTextareaComponent = class FormFieldTextareaComponent {
-    disabled$ = new BehaviorSubject(false);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /**
      * The field's form control
      */
     formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Field showLabel
+     */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
     /**
      * Field placeholder
      */
@@ -393,7 +911,7 @@ let FormFieldTextareaComponent = class FormFieldTextareaComponent {
         return formControlIsRequired(this.formControl());
     }
     ngOnInit() {
-        this.disabled$.next(this.formControl().disabled);
+        this.disabled.set(this.formControl().disabled);
     }
     /**
      * Get error message
@@ -405,33 +923,32 @@ let FormFieldTextareaComponent = class FormFieldTextareaComponent {
         this.toggleDisabled();
     }
     toggleDisabled() {
-        const disabled = !this.disabled$.value;
+        const disabled = !this.disabled();
         if (disabled === true) {
             this.formControl().disable();
         }
         else {
             this.formControl().enable();
         }
-        this.disabled$.next(disabled);
+        this.disabled.set(disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormFieldTextareaComponent, isStandalone: true, selector: "igo-form-field-textarea", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormFieldTextareaComponent, isStandalone: true, selector: "igo-form-field-textarea", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", 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  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\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.MatLabel, selector: "mat-label" }, { 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.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: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
 FormFieldTextareaComponent = __decorate([
     IgoFormFieldComponent('textarea')
 ], FormFieldTextareaComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-field-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatFormFieldModule,
                         MatInputModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        MatIconModule,
-                        AsyncPipe,
+                        MatCheckboxModule,
                         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: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], 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 }] }] } });
+                    ], template: "<mat-form-field>\n  @if (showLabel() === true) {\n    <mat-label>{{ placeholder() | translate }}</mat-label>\n  }\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder() | translate\"\n    [formControl]=\"formControl()\"\n  >\n  </textarea>\n  @if (disableSwitch() === true) {\n    <mat-checkbox\n      class=\"igo-form-disable-switch\"\n      (click)=\"onDisableSwitchClick()\"\n      [checked]=\"!disabled()\"\n      matPrefix\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: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", 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);
@@ -498,10 +1015,10 @@ class FormService {
         const args = match[2];
         return Validators[name](args);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -553,16 +1070,20 @@ class FormFieldComponent {
         this.fieldSubscribers = Object.assign({}, this.field().subscribers || {});
         return this.fieldSubscribers;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormFieldComponent, isStandalone: true, selector: "igo-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormFieldComponent, isStandalone: true, selector: "igo-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, 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: "21.2.10", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", 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}\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: true }] }] } });
 
 const FORM_FIELD_DIRECTIVES = [
     FormFieldComponent,
+    FormFieldCheckboxComponent,
+    FormFieldDatetimeComponent,
+    FormFieldNumberComponent,
+    FormFieldRadiobuttonComponent,
     FormFieldSelectComponent,
     FormFieldTextComponent,
     FormFieldTextareaComponent
@@ -572,11 +1093,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: "21.2.10", ngImport: i0, type: IgoFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFieldModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent], exports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFieldModule, imports: [FORM_FIELD_DIRECTIVES] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFieldModule, imports: [FormFieldComponent, FormFieldCheckboxComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldRadiobuttonComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent], exports: [FormFieldComponent, FormFieldCheckboxComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldRadiobuttonComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFieldModule, imports: [FORM_FIELD_DIRECTIVES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...FORM_FIELD_DIRECTIVES],
@@ -637,23 +1158,23 @@ class FormGroupComponent {
         const options = this.group().options || {};
         return getControlErrorMessage(this.formControl, options.errors || {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FormGroupComponent, isStandalone: true, selector: "igo-form-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormGroupComponent, isStandalone: true, selector: "igo-form-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, 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-group-fields{display:flex;flex-direction:column;gap:12px}: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: "21.2.10", ngImport: i0, type: FormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", 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\" />\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"] }]
+            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-group-fields{display:flex;flex-direction:column;gap:12px}: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: true }] }], 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: "21.2.10", ngImport: i0, type: IgoFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent], exports: [FormGroupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.24", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent], exports: [FormGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormGroupModule, imports: [FormGroupComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [FormGroupComponent],
@@ -670,13 +1191,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: "21.2.10", ngImport: i0, type: IgoFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormModule, imports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
-            FormComponent], exports: [FormFieldComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.24", ngImport: i0, type: IgoFormModule, imports: [FormFieldComponent, FormFieldCheckboxComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldRadiobuttonComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
+            FormComponent], exports: [FormFieldComponent, FormFieldCheckboxComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldRadiobuttonComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
             FormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormModule, imports: [FORM_DIRECTIVES] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormModule, imports: [FORM_DIRECTIVES] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...FORM_DIRECTIVES],
@@ -684,6 +1205,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 }]
         }] });
 
+const DEFAULT_FORM_STEPPER_LABELS = {
+    nextButton: 'Suivant',
+    previousButton: 'Précédent',
+    processButton: 'Confirmer',
+    cancelButton: 'Annuler',
+    stepCounter: 'Étape {{current}} de {{total}}'
+};
+function resolveFormStepperStepFormConfig(step, context) {
+    return typeof step.form === 'function' ? step.form(context) : step.form;
+}
+
+class FormStepperComponent {
+    formService = inject(FormService);
+    steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    initialData = input({}, ...(ngDevMode ? [{ debugName: "initialData" }] : /* istanbul ignore next */ []));
+    notice = input(...(ngDevMode ? [undefined, { debugName: "notice" }] : /* istanbul ignore next */ []));
+    labels = input(DEFAULT_FORM_STEPPER_LABELS, { ...(ngDevMode ? { debugName: "labels" } : /* istanbul ignore next */ {}), transform: (value) => labelAttribute(value, DEFAULT_FORM_STEPPER_LABELS) });
+    showCancelButton = input(true, ...(ngDevMode ? [{ debugName: "showCancelButton" }] : /* istanbul ignore next */ []));
+    completed = output();
+    cancelled = output();
+    dataChange = output();
+    stepIndex = signal(0, ...(ngDevMode ? [{ debugName: "stepIndex" }] : /* istanbul ignore next */ []));
+    stepResults = signal({}, ...(ngDevMode ? [{ debugName: "stepResults" }] : /* istanbul ignore next */ []));
+    activeStep = computed(() => {
+        const steps = this.steps();
+        if (!steps.length) {
+            throw new Error('Form stepper requires at least one step.');
+        }
+        return steps[this.stepIndex()];
+    }, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+    activeContextData = computed(() => this.buildAggregateData(this.stepIndex() - 1), ...(ngDevMode ? [{ debugName: "activeContextData" }] : /* istanbul ignore next */ []));
+    activeFormData = computed(() => this.buildAggregateData(this.stepIndex()), ...(ngDevMode ? [{ debugName: "activeFormData" }] : /* istanbul ignore next */ []));
+    activeForm = computed(() => buildFormFromConfig(this.formService, resolveFormStepperStepFormConfig(this.activeStep(), {
+        data: this.activeContextData(),
+        stepIndex: this.stepIndex(),
+        steps: this.steps()
+    })), ...(ngDevMode ? [{ debugName: "activeForm" }] : /* istanbul ignore next */ []));
+    activeNotice = computed(() => this.activeStep().notice ?? this.notice(), ...(ngDevMode ? [{ debugName: "activeNotice" }] : /* istanbul ignore next */ []));
+    stepCount = computed(() => this.steps().length, ...(ngDevMode ? [{ debugName: "stepCount" }] : /* istanbul ignore next */ []));
+    stepNumber = computed(() => this.stepIndex() + 1, ...(ngDevMode ? [{ debugName: "stepNumber" }] : /* istanbul ignore next */ []));
+    resolvedLabels = computed(() => labelAttribute(this.labels(), DEFAULT_FORM_STEPPER_LABELS), ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    stepCounterLabel = computed(() => this.resolvedLabels()
+        .stepCounter.replace('{{current}}', String(this.stepNumber()))
+        .replace('{{total}}', String(this.stepCount())), ...(ngDevMode ? [{ debugName: "stepCounterLabel" }] : /* istanbul ignore next */ []));
+    progressWidth = computed(() => `${(this.stepNumber() / this.stepCount()) * 100}%`, ...(ngDevMode ? [{ debugName: "progressWidth" }] : /* istanbul ignore next */ []));
+    maxNavigableStepIndex = computed(() => {
+        const completedStepIndexes = Object.keys(this.stepResults())
+            .map((index) => Number(index))
+            .filter((index) => !Number.isNaN(index));
+        if (!completedStepIndexes.length) {
+            return 0;
+        }
+        return Math.min(Math.max(...completedStepIndexes) + 1, this.steps().length - 1);
+    }, ...(ngDevMode ? [{ debugName: "maxNavigableStepIndex" }] : /* istanbul ignore next */ []));
+    isLastStep = computed(() => this.stepIndex() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []));
+    onSubmitStep(stepData) {
+        const form = this.activeForm();
+        if (!form.control.valid) {
+            markFormAsTouched(form);
+            return;
+        }
+        const currentStepIndex = this.stepIndex();
+        const nextStepResults = {
+            ...this.stepResults(),
+            [currentStepIndex]: stepData
+        };
+        Object.keys(nextStepResults)
+            .map((index) => Number(index))
+            .filter((index) => index > currentStepIndex)
+            .forEach((index) => {
+            delete nextStepResults[index];
+        });
+        this.stepResults.set(nextStepResults);
+        const aggregateData = this.buildAggregateDataFrom(nextStepResults, currentStepIndex);
+        this.dataChange.emit(aggregateData);
+        if (this.isLastStep()) {
+            this.completed.emit(aggregateData);
+            return;
+        }
+        queueMicrotask(() => {
+            this.stepIndex.set(currentStepIndex + 1);
+        });
+    }
+    previous() {
+        if (this.stepIndex() === 0) {
+            return;
+        }
+        this.stepIndex.update((index) => index - 1);
+        this.dataChange.emit(this.activeFormData());
+    }
+    cancel() {
+        this.cancelled.emit();
+    }
+    reset() {
+        this.stepResults.set({});
+        this.stepIndex.set(0);
+        this.dataChange.emit({ ...this.initialData() });
+    }
+    onSelectedIndexChange(index) {
+        if (index <= this.maxNavigableStepIndex()) {
+            this.stepIndex.set(index);
+            this.dataChange.emit(this.activeFormData());
+            return;
+        }
+        queueMicrotask(() => {
+            this.stepIndex.set(this.stepIndex());
+        });
+    }
+    isCompletedStep(index) {
+        return this.stepResults()[index] !== undefined;
+    }
+    isEditableStep(index) {
+        return index <= this.maxNavigableStepIndex();
+    }
+    buildAggregateData(lastStepIndex) {
+        return this.buildAggregateDataFrom(this.stepResults(), lastStepIndex);
+    }
+    buildAggregateDataFrom(stepResults, lastStepIndex) {
+        const aggregateData = { ...this.initialData() };
+        for (let index = 0; index <= lastStepIndex; index += 1) {
+            Object.assign(aggregateData, stepResults[index] ?? {});
+        }
+        return aggregateData;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FormStepperComponent, isStandalone: true, selector: "igo-form-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, notice: { classPropertyName: "notice", publicName: "notice", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed", cancelled: "cancelled", dataChange: "dataChange" }, ngImport: i0, template: "<mat-stepper\n  class=\"form-stepper\"\n  [selectedIndex]=\"stepIndex()\"\n  (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n>\n  @for (step of steps(); track step.label) {\n    <mat-step\n      [completed]=\"isCompletedStep($index)\"\n      [editable]=\"isEditableStep($index)\"\n    >\n      <ng-template matStepLabel>{{ step.label | translate }}</ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n\n<section class=\"form-stepper-content\">\n  <header class=\"form-stepper-header\">\n    <div class=\"form-stepper-header-main\">\n      <div class=\"form-stepper-meta\">\n        <p class=\"form-stepper-counter\">\n          {{ stepCounterLabel() }}\n        </p>\n        <span class=\"form-stepper-badge\">{{\n          activeStep().label | translate\n        }}</span>\n      </div>\n\n      @if (activeStep().title) {\n        <h2 class=\"form-stepper-title\">{{ activeStep().title | translate }}</h2>\n      } @else {\n        <h2 class=\"form-stepper-title\">{{ activeStep().label | translate }}</h2>\n      }\n    </div>\n\n    <div class=\"form-stepper-progress\" aria-hidden=\"true\">\n      <span\n        class=\"form-stepper-progress-bar\"\n        [style.width]=\"progressWidth()\"\n      ></span>\n    </div>\n  </header>\n\n  <igo-form\n    [form]=\"activeForm()\"\n    [formData]=\"activeFormData()\"\n    (submitForm)=\"onSubmitStep($event)\"\n  >\n    @if (activeForm().fields.length || activeForm().groups.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of activeForm().fields; track field.name) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of activeForm().groups; track group.name) {\n          <igo-form-group [group]=\"group\" />\n        }\n      </div>\n    }\n\n    <div formButtons class=\"form-stepper-actions\">\n      @if (showCancelButton()) {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          color=\"primary\"\n          (click)=\"cancel()\"\n        >\n          {{ resolvedLabels().cancelButton }}\n        </button>\n      }\n\n      @if (stepIndex() > 0) {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          color=\"primary\"\n          (click)=\"previous()\"\n        >\n          {{ resolvedLabels().previousButton }}\n        </button>\n      }\n\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ isLastStep() ? labels().processButton : labels().nextButton }}\n      </button>\n    </div>\n  </igo-form>\n</section>\n\n@if (activeNotice()) {\n  <div class=\"form-stepper-notice\" role=\"note\">\n    <igo-custom-html [html]=\"activeNotice()!\" />\n  </div>\n}\n", styles: [":host{display:block}:host .form-stepper{width:100%;min-width:0}:host .form-stepper-content{padding-top:12px}:host .form-stepper-header{display:grid;gap:12px;margin-bottom:12px;padding:14px;border:1px solid #d6e1ef;border-radius:16px;background:linear-gradient(180deg,#fbfdff,#f4f8fc);box-shadow:0 10px 24px #135d9b14}:host .form-stepper-header-main{display:grid;gap:8px}:host .form-stepper-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}:host .form-stepper-counter{margin:0;color:#5d6a7a;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}:host .form-stepper-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#d9ebf9;color:#135d9b;font-size:.8rem;font-weight:700;letter-spacing:.02em}:host .form-stepper-progress{overflow:hidden;height:6px;border-radius:999px;background:#dbe3ef}:host .form-stepper-progress-bar{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#135d9b,#3f8cc7);transition:width .16s ease}:host .form-stepper-title{margin:0;font-weight:600;font-size:1.25rem;line-height:1.3}:host .form-stepper-notice{margin-top:12px;padding:12px 14px;border-left:4px solid #3f8cc7;border-radius:10px;background:#f4f8fc}:host .form-stepper-actions{margin:10px 0 0;gap:8px;justify-content:flex-end}:host .form-dialog-container{width:100%;padding:8px 0}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}@media(max-width:640px){:host .form-stepper-content{padding-top:8px}:host .form-stepper-header{gap:10px;margin-bottom:10px;padding:12px;border-radius:14px}:host .form-stepper-meta{align-items:flex-start;justify-content:flex-start}:host .form-stepper-title{font-size:1.1rem;line-height:1.35}:host .form-stepper-badge{font-size:.75rem}:host .form-stepper-actions{flex-direction:column-reverse;align-items:stretch}:host .form-stepper-actions button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "ngmodule", type: IgoFormModule }, { kind: "component", type: FormFieldComponent, selector: "igo-form-field", inputs: ["field"] }, { kind: "component", type: FormGroupComponent, selector: "igo-form-group", inputs: ["group", "errors"] }, { kind: "component", type: FormComponent, selector: "igo-form", inputs: ["form", "formData", "autocomplete"], outputs: ["submitForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.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: "ngmodule", type: IgoCustomHtmlModule }, { kind: "component", type: i6.CustomHtmlComponent, selector: "igo-custom-html", inputs: ["html"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-stepper', imports: [
+                        MatStepperModule,
+                        IgoFormModule,
+                        MatButtonModule,
+                        IgoCustomHtmlModule,
+                        IgoLanguageModule
+                    ], template: "<mat-stepper\n  class=\"form-stepper\"\n  [selectedIndex]=\"stepIndex()\"\n  (selectedIndexChange)=\"onSelectedIndexChange($event)\"\n>\n  @for (step of steps(); track step.label) {\n    <mat-step\n      [completed]=\"isCompletedStep($index)\"\n      [editable]=\"isEditableStep($index)\"\n    >\n      <ng-template matStepLabel>{{ step.label | translate }}</ng-template>\n    </mat-step>\n  }\n</mat-stepper>\n\n<section class=\"form-stepper-content\">\n  <header class=\"form-stepper-header\">\n    <div class=\"form-stepper-header-main\">\n      <div class=\"form-stepper-meta\">\n        <p class=\"form-stepper-counter\">\n          {{ stepCounterLabel() }}\n        </p>\n        <span class=\"form-stepper-badge\">{{\n          activeStep().label | translate\n        }}</span>\n      </div>\n\n      @if (activeStep().title) {\n        <h2 class=\"form-stepper-title\">{{ activeStep().title | translate }}</h2>\n      } @else {\n        <h2 class=\"form-stepper-title\">{{ activeStep().label | translate }}</h2>\n      }\n    </div>\n\n    <div class=\"form-stepper-progress\" aria-hidden=\"true\">\n      <span\n        class=\"form-stepper-progress-bar\"\n        [style.width]=\"progressWidth()\"\n      ></span>\n    </div>\n  </header>\n\n  <igo-form\n    [form]=\"activeForm()\"\n    [formData]=\"activeFormData()\"\n    (submitForm)=\"onSubmitStep($event)\"\n  >\n    @if (activeForm().fields.length || activeForm().groups.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of activeForm().fields; track field.name) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of activeForm().groups; track group.name) {\n          <igo-form-group [group]=\"group\" />\n        }\n      </div>\n    }\n\n    <div formButtons class=\"form-stepper-actions\">\n      @if (showCancelButton()) {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          color=\"primary\"\n          (click)=\"cancel()\"\n        >\n          {{ resolvedLabels().cancelButton }}\n        </button>\n      }\n\n      @if (stepIndex() > 0) {\n        <button\n          mat-stroked-button\n          type=\"button\"\n          color=\"primary\"\n          (click)=\"previous()\"\n        >\n          {{ resolvedLabels().previousButton }}\n        </button>\n      }\n\n      <button matButton=\"filled\" type=\"submit\" color=\"primary\">\n        {{ isLastStep() ? labels().processButton : labels().nextButton }}\n      </button>\n    </div>\n  </igo-form>\n</section>\n\n@if (activeNotice()) {\n  <div class=\"form-stepper-notice\" role=\"note\">\n    <igo-custom-html [html]=\"activeNotice()!\" />\n  </div>\n}\n", styles: [":host{display:block}:host .form-stepper{width:100%;min-width:0}:host .form-stepper-content{padding-top:12px}:host .form-stepper-header{display:grid;gap:12px;margin-bottom:12px;padding:14px;border:1px solid #d6e1ef;border-radius:16px;background:linear-gradient(180deg,#fbfdff,#f4f8fc);box-shadow:0 10px 24px #135d9b14}:host .form-stepper-header-main{display:grid;gap:8px}:host .form-stepper-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}:host .form-stepper-counter{margin:0;color:#5d6a7a;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}:host .form-stepper-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#d9ebf9;color:#135d9b;font-size:.8rem;font-weight:700;letter-spacing:.02em}:host .form-stepper-progress{overflow:hidden;height:6px;border-radius:999px;background:#dbe3ef}:host .form-stepper-progress-bar{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#135d9b,#3f8cc7);transition:width .16s ease}:host .form-stepper-title{margin:0;font-weight:600;font-size:1.25rem;line-height:1.3}:host .form-stepper-notice{margin-top:12px;padding:12px 14px;border-left:4px solid #3f8cc7;border-radius:10px;background:#f4f8fc}:host .form-stepper-actions{margin:10px 0 0;gap:8px;justify-content:flex-end}:host .form-dialog-container{width:100%;padding:8px 0}:host .form-dialog-container igo-form-field,:host .form-dialog-container igo-form-group{display:block;height:auto}@media(max-width:640px){:host .form-stepper-content{padding-top:8px}:host .form-stepper-header{gap:10px;margin-bottom:10px;padding:12px;border-radius:14px}:host .form-stepper-meta{align-items:flex-start;justify-content:flex-start}:host .form-stepper-title{font-size:1.1rem;line-height:1.35}:host .form-stepper-badge{font-size:.75rem}:host .form-stepper-actions{flex-direction:column-reverse;align-items:stretch}:host .form-stepper-actions button{width:100%}}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], notice: [{ type: i0.Input, args: [{ isSignal: true, alias: "notice", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }] } });
+
 class FormDialogComponent {
     languageService = inject(LanguageService);
     dialogRef = inject(MatDialogRef);
@@ -698,14 +1357,7 @@ class FormDialogComponent {
             this.data.cancelButtonText ?? 'igo.common.formDialog.cancelButtonText';
         this.data.title = this.data.title ?? 'igo.common.formDialog.title';
         this.data$ = this.data.data$ ?? new BehaviorSubject({});
-        const fields = [];
-        const groups = [];
-        this.data.formFieldConfigs?.map((config) => fields.push(this.formService.field(config)));
-        this.data.formGroupsConfigs?.map((formGroupsConfig) => {
-            const fields = formGroupsConfig.formFieldConfigs?.map((config) => this.formService.field(config));
-            groups.push(this.formService.group({ name: formGroupsConfig.name }, fields));
-        });
-        const form = this.formService.form(fields, groups);
+        const form = buildFormFromConfig(this.formService, this.data);
         this.form$.next(form);
     }
     onSubmit(data) {
@@ -716,29 +1368,16 @@ class FormDialogComponent {
             this.dialogRef.close(data);
         }
         else {
-            if (form.groups?.length) {
-                form.groups.map((group) => {
-                    Object.keys(group.control.controls).map((k) => {
-                        group.control.controls[k].markAsTouched();
-                        group.control.controls[k].updateValueAndValidity();
-                    });
-                });
-            }
-            else {
-                form.fields.map((f) => {
-                    f.control.markAsTouched();
-                    f.control.updateValueAndValidity();
-                });
-            }
+            markFormAsTouched(form);
         }
     }
     cancel() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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 || form.groups.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field.name) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of form.groups; track group.name) {\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: i8.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: "21.2.10", ngImport: i0, type: FormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igo-form-dialog', imports: [
                         MatDialogTitle,
@@ -750,9 +1389,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                         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\" />\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"] }]
+                    ], 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 || form.groups.length) {\n      <div class=\"form-dialog-container\">\n        @for (field of form.fields; track field.name) {\n          <igo-form-field [field]=\"field\" />\n        }\n        @for (group of form.groups; track group.name) {\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: () => [] });
 
+const DEFAULT_FORM_STEPPER_DIALOG_TITLE = 'Veuillez remplir le formulaire';
+class FormStepperDialogComponent {
+    formStepper = viewChild(FormStepperComponent, ...(ngDevMode ? [{ debugName: "formStepper" }] : /* istanbul ignore next */ []));
+    dialogRef = inject(MatDialogRef);
+    data = inject(MAT_DIALOG_DATA);
+    initialData;
+    constructor() {
+        if (!this.data.steps?.length) {
+            throw new Error('Form stepper dialog requires at least one step.');
+        }
+        this.data.title = this.data.title ?? DEFAULT_FORM_STEPPER_DIALOG_TITLE;
+        this.initialData = { ...(this.data.data$?.value ?? {}) };
+    }
+    onDataChange(data) {
+        this.data.data$?.next(data);
+    }
+    cancel() {
+        this.dialogRef.close();
+    }
+    onCompleted(data) {
+        this.data.data$?.next(data);
+        this.dialogRef.close(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStepperDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.24", type: FormStepperDialogComponent, isStandalone: true, selector: "igo-form-stepper-dialog", viewQueries: [{ propertyName: "formStepper", first: true, predicate: FormStepperComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n\n<igo-form-stepper\n  [steps]=\"data.steps\"\n  [initialData]=\"initialData\"\n  [notice]=\"data.notice\"\n  [labels]=\"data.labels\"\n  (dataChange)=\"onDataChange($event)\"\n  (completed)=\"onCompleted($event)\"\n  (cancelled)=\"cancel()\"\n/>\n", styles: [":host{display:block}:host ::ng-deep igo-form-stepper{display:block;padding:14px;border:1px solid #d6e1ef;border-radius:18px;background:#fff}:host ::ng-deep igo-form-stepper .form-stepper-content{padding-top:10px}:host ::ng-deep igo-form-stepper .form-stepper-header{margin-bottom:10px;padding:0 0 12px;border:0;border-bottom:1px solid #d6e1ef;border-radius:0;background:transparent;box-shadow:none}:host ::ng-deep igo-form-stepper .form-stepper-notice{margin-top:10px;border-radius:12px}@media(max-width:640px){:host ::ng-deep igo-form-stepper{padding:12px;border-radius:16px}:host ::ng-deep igo-form-stepper .form-stepper-content{padding-top:8px}:host ::ng-deep igo-form-stepper .form-stepper-header{margin-bottom:8px;padding-bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: FormStepperComponent, selector: "igo-form-stepper", inputs: ["steps", "initialData", "notice", "labels", "showCancelButton"], outputs: ["completed", "cancelled", "dataChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStepperDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'igo-form-stepper-dialog', imports: [MatDialogModule, FormStepperComponent], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n\n<igo-form-stepper\n  [steps]=\"data.steps\"\n  [initialData]=\"initialData\"\n  [notice]=\"data.notice\"\n  [labels]=\"data.labels\"\n  (dataChange)=\"onDataChange($event)\"\n  (completed)=\"onCompleted($event)\"\n  (cancelled)=\"cancel()\"\n/>\n", styles: [":host{display:block}:host ::ng-deep igo-form-stepper{display:block;padding:14px;border:1px solid #d6e1ef;border-radius:18px;background:#fff}:host ::ng-deep igo-form-stepper .form-stepper-content{padding-top:10px}:host ::ng-deep igo-form-stepper .form-stepper-header{margin-bottom:10px;padding:0 0 12px;border:0;border-bottom:1px solid #d6e1ef;border-radius:0;background:transparent;box-shadow:none}:host ::ng-deep igo-form-stepper .form-stepper-notice{margin-top:10px;border-radius:12px}@media(max-width:640px){:host ::ng-deep igo-form-stepper{padding:12px;border-radius:16px}:host ::ng-deep igo-form-stepper .form-stepper-content{padding-top:8px}:host ::ng-deep igo-form-stepper .form-stepper-header{margin-bottom:8px;padding-bottom:10px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formStepper: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FormStepperComponent), { isSignal: true }] }] } });
+
 class FormDialogService {
     dialog = inject(MatDialog);
     open(formDialogConfig, options) {
@@ -768,10 +1438,24 @@ class FormDialogService {
         });
         return dialogRef.afterClosed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogService });
+    openStepper(formDialogStepperConfig, options) {
+        const data = {
+            steps: formDialogStepperConfig.steps,
+            ...options
+        };
+        const dialogRef = this.dialog.open(FormStepperDialogComponent, {
+            disableClose: false,
+            width: 'min(92vw, 44rem)',
+            maxWidth: '95vw',
+            data,
+            ...options
+        });
+        return dialogRef.afterClosed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormDialogService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FormDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormDialogService, decorators: [{
             type: Injectable
         }] });
 
@@ -788,15 +1472,32 @@ class IgoFormDialogModule {
             providers: []
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule, FormDialogComponent], exports: [FormDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule, FormDialogComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.24", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule,
+            FormDialogComponent,
+            FormStepperComponent,
+            FormStepperDialogComponent], exports: [FormDialogComponent,
+            FormStepperComponent,
+            FormStepperDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule,
+            FormDialogComponent,
+            FormStepperComponent,
+            FormStepperDialogComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: IgoFormDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: IgoFormDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MatDialogModule, FormDialogComponent],
-                    exports: [FormDialogComponent],
+                    imports: [
+                        MatDialogModule,
+                        FormDialogComponent,
+                        FormStepperComponent,
+                        FormStepperDialogComponent
+                    ],
+                    exports: [
+                        FormDialogComponent,
+                        FormStepperComponent,
+                        FormStepperDialogComponent
+                    ],
                     providers: [FormDialogService]
                 }]
         }] });
@@ -805,5 +1506,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FORM_DIRECTIVES, FORM_FIELD_DIRECTIVES, FormComponent, FormDialogComponent, FormDialogService, FormFieldComponent, FormFieldSelectComponent, FormFieldService, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent, FormService, IgoFormDialogModule, IgoFormFieldComponent, IgoFormFieldModule, IgoFormFormModule, IgoFormGroupModule, IgoFormModule, formControlIsRequired, getAllFormFields, getControlErrorMessage, getDefaultErrorMessages, getFormFieldByName };
+export { DEFAULT_FORM_STEPPER_DIALOG_TITLE, FORM_DIRECTIVES, FORM_FIELD_DIRECTIVES, FormComponent, FormDialogComponent, FormDialogService, FormFieldCheckboxComponent, FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldRadiobuttonComponent, FormFieldSelectComponent, FormFieldService, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent, FormService, FormStepperComponent, FormStepperDialogComponent, IgoFormDialogModule, IgoFormFieldComponent, IgoFormFieldModule, IgoFormFormModule, IgoFormGroupModule, IgoFormModule, buildFormFromConfig, formControlIsRequired, getAllFormFields, getControlErrorMessage, getDefaultErrorMessages, getFormFieldByName, markFormAsTouched };
 //# sourceMappingURL=igo2-common-form.mjs.map