@igo2/common 21.0.0-next.32 → 21.0.0-next.34

package/fesm2022/igo2-common-form.mjs

@@ -1,35 +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, FormGroup, FormControl, 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 * 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 { 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 * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { provideNativeDateAdapter, MatOptionModule } from '@angular/material/core';
 import * as i3$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
 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 * as i4 from '@angular/material/timepicker';
+import * as i4$1 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
-import { IgoLanguageModule, LanguageService } from '@igo2/core/language';
-import { Subject, BehaviorSubject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as i5 from '@ngx-translate/core';
+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 { NgClass, AsyncPipe } from '@angular/common';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { CustomHtmlComponent } from '@igo2/common/custom-html';
+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({});
@@ -205,6 +238,126 @@ 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.23", ngImport: i0, type: FormFieldCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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.23", 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({
@@ -389,7 +542,7 @@ let FormFieldDatetimeComponent = class FormFieldDatetimeComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i4.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i4.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$1.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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')
@@ -465,7 +618,7 @@ let FormFieldNumberComponent = class FormFieldNumberComponent {
         this.disabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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$1.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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')
@@ -483,6 +636,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                     ], 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.23", ngImport: i0, type: FormFieldRadiobuttonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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.23", 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
  */
@@ -545,7 +766,7 @@ let FormFieldSelectComponent = class FormFieldSelectComponent {
         this.disabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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$1.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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')
@@ -639,7 +860,7 @@ let FormFieldTextComponent = class FormFieldTextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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$1.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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')
@@ -712,7 +933,7 @@ let FormFieldTextareaComponent = class FormFieldTextareaComponent {
         this.disabled.set(disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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$1.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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')
@@ -859,8 +1080,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
 
 const FORM_FIELD_DIRECTIVES = [
     FormFieldComponent,
+    FormFieldCheckboxComponent,
     FormFieldDatetimeComponent,
     FormFieldNumberComponent,
+    FormFieldRadiobuttonComponent,
     FormFieldSelectComponent,
     FormFieldTextComponent,
     FormFieldTextareaComponent
@@ -871,7 +1094,7 @@ const FORM_FIELD_DIRECTIVES = [
  */
 class IgoFormFieldModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFieldModule, imports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent], exports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", 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.23", ngImport: i0, type: IgoFormFieldModule, imports: [FORM_FIELD_DIRECTIVES] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormFieldModule, decorators: [{
@@ -936,11 +1159,11 @@ class FormGroupComponent {
         return getControlErrorMessage(this.formControl, options.errors || {});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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.23", 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 }] }] } });
 
 /**
@@ -969,8 +1192,8 @@ const FORM_DIRECTIVES = [
  */
 class IgoFormModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormModule, imports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
-            FormComponent], exports: [FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, FormFieldSelectComponent, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", 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.23", ngImport: i0, type: IgoFormModule, imports: [FORM_DIRECTIVES] });
 }
@@ -982,6 +1205,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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.23", ngImport: i0, type: FormStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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.23", 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);
@@ -996,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) {
@@ -1014,27 +1368,14 @@ 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.23", ngImport: i0, type: FormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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: 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", 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.23", ngImport: i0, type: FormDialogComponent, decorators: [{
             type: Component,
@@ -1048,9 +1389,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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.23", ngImport: i0, type: FormStepperDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", 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.23", 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) {
@@ -1066,6 +1438,20 @@ class FormDialogService {
         });
         return dialogRef.afterClosed();
     }
+    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.23", ngImport: i0, type: FormDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormDialogService });
 }
@@ -1087,14 +1473,31 @@ class IgoFormDialogModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule, FormDialogComponent], exports: [FormDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule, FormDialogComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, imports: [MatDialogModule,
+            FormDialogComponent,
+            FormStepperComponent,
+            FormStepperDialogComponent], exports: [FormDialogComponent,
+            FormStepperComponent,
+            FormStepperDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, providers: [FormDialogService], imports: [MatDialogModule,
+            FormDialogComponent,
+            FormStepperComponent,
+            FormStepperDialogComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: IgoFormDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [MatDialogModule, FormDialogComponent],
-                    exports: [FormDialogComponent],
+                    imports: [
+                        MatDialogModule,
+                        FormDialogComponent,
+                        FormStepperComponent,
+                        FormStepperDialogComponent
+                    ],
+                    exports: [
+                        FormDialogComponent,
+                        FormStepperComponent,
+                        FormStepperDialogComponent
+                    ],
                     providers: [FormDialogService]
                 }]
         }] });
@@ -1103,5 +1506,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FORM_DIRECTIVES, FORM_FIELD_DIRECTIVES, FormComponent, FormDialogComponent, FormDialogService, FormFieldComponent, FormFieldDatetimeComponent, FormFieldNumberComponent, 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