@sotoa-ui/dynamic-form 0.0.13 → 0.0.14

package/fesm2022/sotoa-ui-dynamic-form.mjs

@@ -1,10 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, computed, output, ViewChild, model, signal, effect } from '@angular/core';
+import { Component, inject, DestroyRef, Injectable, input, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, EventEmitter, Output, Optional, Host, SkipSelf, Directive, computed, output, ViewChild, model, signal, effect } from '@angular/core';
 import { distinctUntilChanged, isObservable, take, BehaviorSubject, map } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as _ from 'lodash-es';
-import { isArray } from 'lodash-es';
+import { Validators, FormBuilder, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { debounceTime } from 'rxjs/operators';
 import { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
@@ -28,6 +26,8 @@ import * as i3$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i2$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as _ from 'lodash-es';
+import { isArray } from 'lodash-es';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatBadge } from '@angular/material/badge';
@@ -45,12 +45,211 @@ import { DateAdapter } from '@angular/material/core';
 import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
-import { MatTab, MatTabLabel } from '@angular/material/tabs';
 import * as i4$1 from '@angular/material/stepper';
 import { MatStepperModule, MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { BreakpointObserver } from '@angular/cdk/layout';
 
+class AbstractFieldComponent {
+    field;
+    group;
+    path;
+    instancePath;
+    data;
+    get control() {
+        return this.group() && this.field()?.name ? this.group().get(this.field().name) : null;
+    }
+    get required() {
+        return this.group().get(this.field().name)?.hasValidator(Validators.required);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AbstractFieldComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, template: '' }]
+        }] });
+
+class AbstractControlFieldComponent extends AbstractFieldComponent {
+    destroyRef = inject(DestroyRef);
+    uuid;
+    ngOnInit() {
+        this.uuid = 'sot-field-' + this.field().name + '-' + (Math.random() + 1).toString(36).substring(7);
+        if (this.field().onValueChanges) {
+            const control = this.group().get(this.field().name);
+            if (control) {
+                this.field().onValueChanges(control.value, this.group(), this.data, this.instancePath);
+                control.valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                    this.field().onValueChanges(value, this.group(), this.data, this.instancePath);
+                });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractControlFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AbstractControlFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractControlFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, template: '' }]
+        }] });
+
+class AcCustomComponentField {
+    field;
+    group;
+    registerOnChange(fn) {
+    }
+    registerOnTouched(fn) {
+    }
+    writeValue(obj) {
+    }
+}
+
+/**
+ * Liste des valeurs possible pour l'attribut autocomplete
+ * (https://accessibilite.numerique.gouv.fr/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete)
+ */
+var AutocompleteAttribute;
+(function (AutocompleteAttribute) {
+    AutocompleteAttribute["Off"] = "off";
+    /** Nom complet */
+    AutocompleteAttribute["Name"] = "name";
+    /** Abréviation, civilité ou titre */
+    AutocompleteAttribute["HonorificPrefix"] = "honorific-prefix";
+    /** Prénom */
+    AutocompleteAttribute["GivenName"] = "given-name";
+    /** Prénoms additionnels */
+    AutocompleteAttribute["AdditionalName"] = "additional-name";
+    /** Nom de famille */
+    AutocompleteAttribute["FamilyName"] = "family-name";
+    /** Suffixe honorifique */
+    AutocompleteAttribute["HonorificSuffix"] = "honorific-suffix";
+    /** Surnom, diminutif */
+    AutocompleteAttribute["Nickname"] = "nickname";
+    /** Fonction, intitulé de poste */
+    AutocompleteAttribute["OrganizationTitle"] = "organization-title";
+    /** Nom d’utilisateur */
+    AutocompleteAttribute["Username"] = "username";
+    /**
+     * Nouveau mot de passe (par exemple, lors de la création d’un compte
+     * ou d’un changement de mot de passe)
+     */
+    AutocompleteAttribute["NewPassword"] = "new-password";
+    /**
+     * Mot de passe actuel pour le compte identifié par le champ username
+     * (par exemple, lors d’une connexion)
+     */
+    AutocompleteAttribute["CurrentPassword"] = "current-password";
+    /**
+     * Nom de l’organisation correspondant à la personne, à l’adresse
+     * ou à l’information de contact dans les autres champs associés avec ce champ
+     */
+    AutocompleteAttribute["Organization"] = "organization";
+    /** Adresse postale (multiligne, nouvelles lignes conservées) */
+    AutocompleteAttribute["StreetAddress"] = "street-address";
+    /** Adresse postale (une ligne par champ, ligne 1) */
+    AutocompleteAttribute["AddressLine1"] = "address-line1";
+    /** Adresse postale (une ligne par champ, ligne 2) */
+    AutocompleteAttribute["AddressLine2"] = "address-line2";
+    /** Adresse postale (une ligne par champ, ligne 3) */
+    AutocompleteAttribute["AddressLine3"] = "address-line3";
+    /** Le niveau administratif le plus détaillé, pour les adresses pourvues de quatre niveaux administratifs */
+    AutocompleteAttribute["AddressLevel4"] = "address-level4";
+    /** Le troisième niveau administratif, pour les adresses pourvues d’au moins trois niveaux administratifs */
+    AutocompleteAttribute["AddressLevel3"] = "address-level3";
+    /** Le deuxième niveau administratif, pour les adresses pourvues d’au moins deux niveaux administratifs */
+    AutocompleteAttribute["AddressLevel2"] = "address-level2";
+    /** Le plus large niveau administratif d’une adresse, c’est-à-dire la province dans laquelle se trouve la localité */
+    AutocompleteAttribute["AddressLevel1"] = "address-level1";
+    /** Code pays */
+    AutocompleteAttribute["Country"] = "country";
+    /** Nom de pays */
+    AutocompleteAttribute["CountryName"] = "country-name";
+    /**
+     * Code postal, code CEDEX (si le CEDEX est présent, ajouter “CEDEX”,
+     * et ce qui le suit doit être ajouté dans le champ address-level2)
+     */
+    AutocompleteAttribute["PostalCode"] = "postal-code";
+    /** Nom complet figurant sur le moyen de paiement */
+    AutocompleteAttribute["CcName"] = "cc-name";
+    /** Prénom figurant sur le moyen de paiement */
+    AutocompleteAttribute["CcGivenName"] = "cc-given-name";
+    /** Prénoms additionnels figurant sur le moyen de paiement */
+    AutocompleteAttribute["CcAdditionalName"] = "cc-additional-name";
+    /** Nom de famille figurant sur le moyen de paiement */
+    AutocompleteAttribute["CcFamilyName"] = "cc-family-name";
+    /** Code identifiant le moyen de paiement (e.g., un numéro de carte bancaire) */
+    AutocompleteAttribute["CcNumber"] = "cc-number";
+    /** Date d’expiration du moyen de paiement */
+    AutocompleteAttribute["CcExp"] = "cc-exp";
+    /** Le mois de la date d’expiration du moyen de paiement */
+    AutocompleteAttribute["CcExpMonth"] = "cc-exp-month";
+    /** L’année de la date d’expiration du moyen de paiement */
+    AutocompleteAttribute["CcExpYear"] = "cc-exp-year";
+    /**
+     * Code de sécurité du moyen de paiement (also known as the card security code (CSC),
+     * card validation code (CVC), card verification value (CVV), signature panel code (SPC),
+     * credit card ID (CCID), etc.)
+     */
+    AutocompleteAttribute["CcCsc"] = "cc-csc";
+    /** Type de moyen de paiement (e.g. Visa) */
+    AutocompleteAttribute["CcType"] = "cc-type";
+    /** La devise qui a la préférence de l’utilisateur lors d’une transaction */
+    AutocompleteAttribute["TransactionCurrency"] = "transaction-currency";
+    /** Le montant qui a la préférence de l’utilisateur lors d’une transaction (e.g., en réponse à une enchère ou à un prix soldé) */
+    AutocompleteAttribute["TransactionAmount"] = "transaction-amount";
+    /** Langue préférée */
+    AutocompleteAttribute["Language"] = "language";
+    /** Date d’anniversaire */
+    AutocompleteAttribute["Bday"] = "bday";
+    /** Le jour de la date d’anniversaire */
+    AutocompleteAttribute["BdayDay"] = "bday-day";
+    /** Le mois de la date d’anniversaire */
+    AutocompleteAttribute["BdayMonth"] = "bday-month";
+    /** L’année de la date d’anniversaire */
+    AutocompleteAttribute["BdayYear"] = "bday-year";
+    /** Identité de genre */
+    AutocompleteAttribute["Sex"] = "sex";
+    /**
+     * Page d’accueil ou une autre page Web correspondant à l’organisation, la personne,
+     * l’adresse ou à l’information de contact dans les autres champs associés avec ce champ
+     */
+    AutocompleteAttribute["Url"] = "url";
+    /**
+     * Photographie, icône ou une autre image correspondant à l’organisation, la personne,
+     * l’adresse ou à l’information de contact dans les autres champs associés avec ce champ
+     */
+    AutocompleteAttribute["Photo"] = "photo";
+    /** Numéro de téléphone complet, y compris le code pays */
+    AutocompleteAttribute["Tel"] = "tel";
+    /** Code pays du numéro de téléphone */
+    AutocompleteAttribute["TelCountryCode"] = "tel-country-code";
+    /** Numéro de téléphone sans la partie code pays, avec un préfixe interne au pays, s’il y a lieu */
+    AutocompleteAttribute["TelNational"] = "tel-national";
+    /** Indicatif régional du numéro de téléphone, avec un préfixe interne au pays, s’il y a lieu */
+    AutocompleteAttribute["TelAreaCode"] = "tel-area-code";
+    /** Numéro de téléphone sans la partie code pays ni l’indicatif régional */
+    AutocompleteAttribute["TelLocal"] = "tel-local";
+    /**
+     * La première partie du composant du numéro de téléphone qui suit l’indicatif régional,
+     * lorsque ce composant est scindé en deux parties
+     */
+    AutocompleteAttribute["TelLocalPrefix"] = "tel-local-prefix";
+    /**
+     * La seconde partie du composant du numéro de téléphone qui suit l’indicatif régional,
+     * lorsque ce composant est scindé en deux parties
+     */
+    AutocompleteAttribute["TelLocalSuffix"] = "tel-local-suffix";
+    /** Numéro de téléphone d’un poste interne */
+    AutocompleteAttribute["TelExtension"] = "tel-extension";
+    /** Adresse électronique */
+    AutocompleteAttribute["Email"] = "email";
+    /**
+     * URL correspondant d’un protocole de messagerie instantanée
+     * (par exemple, "aim:goim?screenname=example" ou "xmpp:fred@example.net")
+     */
+    AutocompleteAttribute["Impp"] = "impp";
+})(AutocompleteAttribute || (AutocompleteAttribute = {}));
+
 var AcLogicOperatorEnum;
 (function (AcLogicOperatorEnum) {
     AcLogicOperatorEnum["OR"] = "OR";
@@ -355,11 +554,9 @@ class DynamicFormService {
         return g;
     }
     createArrayInstance(arrayConfig, arrayPath, instanceNumber, initialValues) {
-        const fields = _.cloneDeep(arrayConfig.field.fields);
+        const fields = structuredClone(arrayConfig.field.fields);
         const grp = this.createGroup(fields, `${arrayPath}[${instanceNumber}]`, `${arrayPath}[${instanceNumber}]`, initialValues);
-        if (!arrayConfig.instances) {
-            arrayConfig.instances = [];
-        }
+        arrayConfig.instances ??= [];
         arrayConfig.instances.push({
             number: instanceNumber,
             group: grp,
@@ -372,7 +569,7 @@ class DynamicFormService {
         arrayConfig.instances = [];
         const list = [];
         let value = arrayConfig.value;
-        if (initialValues && Object.keys(initialValues).indexOf(arrayConfig.name) !== -1) {
+        if (initialValues && Object.keys(initialValues).includes(arrayConfig.name)) {
             value = initialValues[arrayConfig.name];
         }
         let i = 0;
@@ -413,7 +610,7 @@ class DynamicFormService {
     }
     createControl(config, initialValues) {
         let { disabled, validations, value } = config;
-        if (initialValues && Object.keys(initialValues).indexOf(config.name) !== -1) {
+        if (initialValues && Object.keys(initialValues).includes(config.name)) {
             value = initialValues[config.name];
         }
         if (value === undefined) {
@@ -444,235 +641,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
-class AbstractFieldComponent {
-    path;
-    field;
-    group;
-    instancePath;
-    dynamicFormService = inject(DynamicFormService);
-    get control() {
-        return this.group && this.field && this.field.name ? this.group.get(this.field.name) : null;
-    }
-    get required() {
-        return this.group.get(this.field.name)?.hasValidator(Validators.required);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AbstractFieldComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractFieldComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, template: '' }]
-        }] });
-
-class AbstractControlFieldComponent extends AbstractFieldComponent {
-    destroyRef = inject(DestroyRef);
-    uuid;
-    ngOnInit() {
-        this.uuid = 'sot-field-' + this.field.name + '-' + (Math.random() + 1).toString(36).substring(7);
-        if (this.field.onValueChanges) {
-            const control = this.group.get(this.field.name);
-            if (control) {
-                this.field.onValueChanges(control.value, this.dynamicFormService.data, this.group, this.instancePath);
-                control.valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
-                    this.field.onValueChanges(value, this.dynamicFormService.data, this.group, this.instancePath);
-                });
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractControlFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AbstractControlFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractControlFieldComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, template: '' }]
-        }] });
-
-class AcCustomComponentField {
-    field;
-    group;
-    registerOnChange(fn) {
-    }
-    registerOnTouched(fn) {
-    }
-    writeValue(obj) {
-    }
-}
-
-/**
- * Liste des valeurs possible pour l'attribut autocomplete
- * (https://accessibilite.numerique.gouv.fr/methode/glossaire/#liste-des-valeurs-possibles-pour-l-attribut-autocomplete)
- */
-var AutocompleteAttribute;
-(function (AutocompleteAttribute) {
-    AutocompleteAttribute["Off"] = "off";
-    /** Nom complet */
-    AutocompleteAttribute["Name"] = "name";
-    /** Abréviation, civilité ou titre */
-    AutocompleteAttribute["HonorificPrefix"] = "honorific-prefix";
-    /** Prénom */
-    AutocompleteAttribute["GivenName"] = "given-name";
-    /** Prénoms additionnels */
-    AutocompleteAttribute["AdditionalName"] = "additional-name";
-    /** Nom de famille */
-    AutocompleteAttribute["FamilyName"] = "family-name";
-    /** Suffixe honorifique */
-    AutocompleteAttribute["HonorificSuffix"] = "honorific-suffix";
-    /** Surnom, diminutif */
-    AutocompleteAttribute["Nickname"] = "nickname";
-    /** Fonction, intitulé de poste */
-    AutocompleteAttribute["OrganizationTitle"] = "organization-title";
-    /** Nom d’utilisateur */
-    AutocompleteAttribute["Username"] = "username";
-    /**
-     * Nouveau mot de passe (par exemple, lors de la création d’un compte
-     * ou d’un changement de mot de passe)
-     */
-    AutocompleteAttribute["NewPassword"] = "new-password";
-    /**
-     * Mot de passe actuel pour le compte identifié par le champ username
-     * (par exemple, lors d’une connexion)
-     */
-    AutocompleteAttribute["CurrentPassword"] = "current-password";
-    /**
-     * Nom de l’organisation correspondant à la personne, à l’adresse
-     * ou à l’information de contact dans les autres champs associés avec ce champ
-     */
-    AutocompleteAttribute["Organization"] = "organization";
-    /** Adresse postale (multiligne, nouvelles lignes conservées) */
-    AutocompleteAttribute["StreetAddress"] = "street-address";
-    /** Adresse postale (une ligne par champ, ligne 1) */
-    AutocompleteAttribute["AddressLine1"] = "address-line1";
-    /** Adresse postale (une ligne par champ, ligne 2) */
-    AutocompleteAttribute["AddressLine2"] = "address-line2";
-    /** Adresse postale (une ligne par champ, ligne 3) */
-    AutocompleteAttribute["AddressLine3"] = "address-line3";
-    /** Le niveau administratif le plus détaillé, pour les adresses pourvues de quatre niveaux administratifs */
-    AutocompleteAttribute["AddressLevel4"] = "address-level4";
-    /** Le troisième niveau administratif, pour les adresses pourvues d’au moins trois niveaux administratifs */
-    AutocompleteAttribute["AddressLevel3"] = "address-level3";
-    /** Le deuxième niveau administratif, pour les adresses pourvues d’au moins deux niveaux administratifs */
-    AutocompleteAttribute["AddressLevel2"] = "address-level2";
-    /** Le plus large niveau administratif d’une adresse, c’est-à-dire la province dans laquelle se trouve la localité */
-    AutocompleteAttribute["AddressLevel1"] = "address-level1";
-    /** Code pays */
-    AutocompleteAttribute["Country"] = "country";
-    /** Nom de pays */
-    AutocompleteAttribute["CountryName"] = "country-name";
-    /**
-     * Code postal, code CEDEX (si le CEDEX est présent, ajouter “CEDEX”,
-     * et ce qui le suit doit être ajouté dans le champ address-level2)
-     */
-    AutocompleteAttribute["PostalCode"] = "postal-code";
-    /** Nom complet figurant sur le moyen de paiement */
-    AutocompleteAttribute["CcName"] = "cc-name";
-    /** Prénom figurant sur le moyen de paiement */
-    AutocompleteAttribute["CcGivenName"] = "cc-given-name";
-    /** Prénoms additionnels figurant sur le moyen de paiement */
-    AutocompleteAttribute["CcAdditionalName"] = "cc-additional-name";
-    /** Nom de famille figurant sur le moyen de paiement */
-    AutocompleteAttribute["CcFamilyName"] = "cc-family-name";
-    /** Code identifiant le moyen de paiement (e.g., un numéro de carte bancaire) */
-    AutocompleteAttribute["CcNumber"] = "cc-number";
-    /** Date d’expiration du moyen de paiement */
-    AutocompleteAttribute["CcExp"] = "cc-exp";
-    /** Le mois de la date d’expiration du moyen de paiement */
-    AutocompleteAttribute["CcExpMonth"] = "cc-exp-month";
-    /** L’année de la date d’expiration du moyen de paiement */
-    AutocompleteAttribute["CcExpYear"] = "cc-exp-year";
-    /**
-     * Code de sécurité du moyen de paiement (also known as the card security code (CSC),
-     * card validation code (CVC), card verification value (CVV), signature panel code (SPC),
-     * credit card ID (CCID), etc.)
-     */
-    AutocompleteAttribute["CcCsc"] = "cc-csc";
-    /** Type de moyen de paiement (e.g. Visa) */
-    AutocompleteAttribute["CcType"] = "cc-type";
-    /** La devise qui a la préférence de l’utilisateur lors d’une transaction */
-    AutocompleteAttribute["TransactionCurrency"] = "transaction-currency";
-    /** Le montant qui a la préférence de l’utilisateur lors d’une transaction (e.g., en réponse à une enchère ou à un prix soldé) */
-    AutocompleteAttribute["TransactionAmount"] = "transaction-amount";
-    /** Langue préférée */
-    AutocompleteAttribute["Language"] = "language";
-    /** Date d’anniversaire */
-    AutocompleteAttribute["Bday"] = "bday";
-    /** Le jour de la date d’anniversaire */
-    AutocompleteAttribute["BdayDay"] = "bday-day";
-    /** Le mois de la date d’anniversaire */
-    AutocompleteAttribute["BdayMonth"] = "bday-month";
-    /** L’année de la date d’anniversaire */
-    AutocompleteAttribute["BdayYear"] = "bday-year";
-    /** Identité de genre */
-    AutocompleteAttribute["Sex"] = "sex";
-    /**
-     * Page d’accueil ou une autre page Web correspondant à l’organisation, la personne,
-     * l’adresse ou à l’information de contact dans les autres champs associés avec ce champ
-     */
-    AutocompleteAttribute["Url"] = "url";
-    /**
-     * Photographie, icône ou une autre image correspondant à l’organisation, la personne,
-     * l’adresse ou à l’information de contact dans les autres champs associés avec ce champ
-     */
-    AutocompleteAttribute["Photo"] = "photo";
-    /** Numéro de téléphone complet, y compris le code pays */
-    AutocompleteAttribute["Tel"] = "tel";
-    /** Code pays du numéro de téléphone */
-    AutocompleteAttribute["TelCountryCode"] = "tel-country-code";
-    /** Numéro de téléphone sans la partie code pays, avec un préfixe interne au pays, s’il y a lieu */
-    AutocompleteAttribute["TelNational"] = "tel-national";
-    /** Indicatif régional du numéro de téléphone, avec un préfixe interne au pays, s’il y a lieu */
-    AutocompleteAttribute["TelAreaCode"] = "tel-area-code";
-    /** Numéro de téléphone sans la partie code pays ni l’indicatif régional */
-    AutocompleteAttribute["TelLocal"] = "tel-local";
-    /**
-     * La première partie du composant du numéro de téléphone qui suit l’indicatif régional,
-     * lorsque ce composant est scindé en deux parties
-     */
-    AutocompleteAttribute["TelLocalPrefix"] = "tel-local-prefix";
-    /**
-     * La seconde partie du composant du numéro de téléphone qui suit l’indicatif régional,
-     * lorsque ce composant est scindé en deux parties
-     */
-    AutocompleteAttribute["TelLocalSuffix"] = "tel-local-suffix";
-    /** Numéro de téléphone d’un poste interne */
-    AutocompleteAttribute["TelExtension"] = "tel-extension";
-    /** Adresse électronique */
-    AutocompleteAttribute["Email"] = "email";
-    /**
-     * URL correspondant d’un protocole de messagerie instantanée
-     * (par exemple, "aim:goim?screenname=example" ou "xmpp:fred@example.net")
-     */
-    AutocompleteAttribute["Impp"] = "impp";
-})(AutocompleteAttribute || (AutocompleteAttribute = {}));
-
 class MatDivTextComponent extends AbstractFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatDivTextComponent, isStandalone: true, selector: "sot-mat-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatDivTextComponent, isStandalone: true, selector: "sot-mat-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field().className\">\n  <div [innerHTML]=\"field().label\"></div>\n  @if(field().description) {\n    <p [innerHTML]=\"field().description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatDivTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n" }]
+            args: [{ selector: 'sot-mat-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field().className\">\n  <div [innerHTML]=\"field().label\"></div>\n  @if(field().description) {\n    <p [innerHTML]=\"field().description\"></p>\n  }\n</div>\n" }]
         }] });
 
 class AcFieldCheckboxComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldCheckboxComponent, isStandalone: true, selector: "sot-mat-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-checkbox [formControlName]=\"field.name\"\r\n                  [id]=\"uuid\"\r\n                  [aria-describedby]=\"'error-' + uuid\"\r\n    >\r\n      <div [ngClass]=\"field.labelClassName\">\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </div>\r\n    </mat-checkbox>\r\n\r\n    <div [attr.id]=\"'error-' + uuid\" class=\"error-wrapper\" matError>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.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: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldCheckboxComponent, isStandalone: true, selector: "sot-mat-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field().className\">\r\n  <div [formGroup]=\"group()\">\r\n    <mat-checkbox [formControlName]=\"field().name\"\r\n                  [id]=\"uuid\"\r\n                  [aria-describedby]=\"'error-' + uuid\"\r\n    >\r\n      <div [ngClass]=\"field().labelClassName\">\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field().description) {\r\n          <span class=\"sot-label-description\">{{ field().description }}</span>\r\n        }\r\n      </div>\r\n    </mat-checkbox>\r\n\r\n    <div [attr.id]=\"'error-' + uuid\" class=\"error-wrapper\" matError>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.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: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-checkbox [formControlName]=\"field.name\"\r\n                  [id]=\"uuid\"\r\n                  [aria-describedby]=\"'error-' + uuid\"\r\n    >\r\n      <div [ngClass]=\"field.labelClassName\">\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </div>\r\n    </mat-checkbox>\r\n\r\n    <div [attr.id]=\"'error-' + uuid\" class=\"error-wrapper\" matError>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"] }]
+            args: [{ selector: 'sot-mat-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field().className\">\r\n  <div [formGroup]=\"group()\">\r\n    <mat-checkbox [formControlName]=\"field().name\"\r\n                  [id]=\"uuid\"\r\n                  [aria-describedby]=\"'error-' + uuid\"\r\n    >\r\n      <div [ngClass]=\"field().labelClassName\">\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field().description) {\r\n          <span class=\"sot-label-description\">{{ field().description }}</span>\r\n        }\r\n      </div>\r\n    </mat-checkbox>\r\n\r\n    <div [attr.id]=\"'error-' + uuid\" class=\"error-wrapper\" matError>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"] }]
         }] });
 
 class MatFieldInputComponent extends AbstractControlFieldComponent {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
     inputType = 'text';
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     ngOnInit() {
         super.ngOnInit();
-        this.inputType = this.field.inputType ?? 'text';
-        const control = this.group.get(this.field.name);
+        this.inputType = this.field().inputType ?? 'text';
+        const control = this.group().get(this.field().name);
         if (control) {
             control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
                 if (value?.length == 0) {
@@ -682,19 +681,19 @@ class MatFieldInputComponent extends AbstractControlFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldInputComponent, isStandalone: true, selector: "sot-mat-field-input", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field.name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [readonly]=\"field.readonly\"\r\n           [maxlength]=\"field.maxlength ?? 100000000\"\r\n    >\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                     [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                     (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldInputComponent, isStandalone: true, selector: "sot-mat-field-input", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field().name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [readonly]=\"field().readonly\"\r\n           [maxlength]=\"field().maxlength ?? 100000000\"\r\n    >\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                     [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                     (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field.name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [readonly]=\"field.readonly\"\r\n           [maxlength]=\"field.maxlength ?? 100000000\"\r\n    >\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                     [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                     (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
-        }] });
+            args: [{ selector: 'sot-mat-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field().name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [readonly]=\"field().readonly\"\r\n           [maxlength]=\"field().maxlength ?? 100000000\"\r\n    >\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                     [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                     (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
 
 class MatGroupComponent extends AbstractControlFieldComponent {
     get subGroup() {
-        return this.group.controls[this.field.name];
+        return this.group().controls[this.field().name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatGroupComponent, isStandalone: true, selector: "sot-mat-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-group-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container matDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatGroupComponent, isStandalone: true, selector: "sot-mat-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field().className\">\n  <fieldset class=\"sot-formfield\">\n    @if (field().accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field().opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-group-label\">{{ field().label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field().description) {\n            <p [innerHTML]=\"field().description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field().labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"sot-label-description\">{{ field().description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field().fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container matDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n                    [data]=\"data\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field().validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath", "data"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatGroupComponent, decorators: [{
             type: Component,
@@ -706,26 +705,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatExpansionPanelHeader,
                         MatExpansionPanelTitle,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-group-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container matDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field().className\">\n  <fieldset class=\"sot-formfield\">\n    @if (field().accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field().opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-group-label\">{{ field().label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field().description) {\n            <p [innerHTML]=\"field().description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field().labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"sot-label-description\">{{ field().description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field().fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container matDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n                    [data]=\"data\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field().validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
         }] });
 
 class MatArrayComponent extends AbstractControlFieldComponent {
     dynamicService = inject(DynamicFormService);
     ref = inject(ChangeDetectorRef);
     get array() {
-        return this.group.controls[this.field.name];
+        return this.group().controls[this.field().name];
     }
     constructor() {
         super();
     }
     addItem() {
-        if (!this.field.instances) {
-            this.field.instances = [];
+        if (!this.field().instances) {
+            this.field().instances = [];
         }
-        const i = this.field.instances.length > 0 ? this.field.instances[this.field.instances.length - 1].number + 1 : 0;
-        const fields = _.cloneDeep(this.field.field.fields);
+        const i = this.field().instances.length > 0 ? this.field().instances[this.field().instances.length - 1].number + 1 : 0;
+        const fields = structuredClone(this.field().field.fields);
         const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null, null);
-        this.field.instances.push({
+        this.field().instances.push({
             number: i,
             group: grp,
             fields
@@ -734,10 +733,10 @@ class MatArrayComponent extends AbstractControlFieldComponent {
         this.ref.detectChanges();
     }
     deleteItem(index, inst) {
-        this.field.instances.splice(index, 1);
+        this.field().instances.splice(index, 1);
         for (const key of this.dynamicService.data.pathFieldMap.keys()) {
             if (key.startsWith(`${this.path}[${inst.number}]`)) {
-                this.dynamicFormService.data.pathFieldMap.delete(key);
+                this.data?.pathFieldMap.delete(key);
             }
         }
         ;
@@ -745,7 +744,7 @@ class MatArrayComponent extends AbstractControlFieldComponent {
         this.ref.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n    } @else {\n      <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n      @if (field.description) {\n        <p [innerHTML]=\"field.description\"></p>\n      }\n      <div class=\"sot-formfield-array-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container matDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n                @if (field.deleteButton && field.deleteButton.matIcon) {\n                  <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n                    {{ field.deleteButton!.matIcon }}\n                  </mat-icon>\n                }\n                {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button mat-raised-button\n                  type=\"button\"\n                  (click)=\"addItem()\"\n          >\n            @if (field.addButton && field.addButton.matIcon) {\n              <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n                {{ field.addButton!.matIcon }}\n              </mat-icon>\n            }\n            {{ field.addButton ? field.addButton!.label : 'Ajouter' }}\n          </button>\n        </div>\n      }\n      <mat-error>\n        @for (validation of field.validations; track validation) {\n          @if (array && !array.untouched && array.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field().className\">\n  <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n    @if (field().accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field().opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-array-label\">{{ field().label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field().description) {\n            <p [innerHTML]=\"field().description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n    } @else {\n      <legend class=\"sot-formfield-array-label\">{{ field().label }}</legend>\n      @if (field().description) {\n        <p [innerHTML]=\"field().description\"></p>\n      }\n      <div class=\"sot-formfield-array-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group()\">\n    <div [formArrayName]=\"field().name\">\n      @for (inst of field().instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field().elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field().itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field().elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container matDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                              [data]=\"data\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field().disabled && (!field().minNbRow || field().minNbRow! < array.controls.length)) {\n              <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n                @if (field().deleteButton && field().deleteButton!.matIcon) {\n                  <mat-icon [title]=\"field().deleteButton!.title ? field().deleteButton!.title : ''\">\n                    {{ field().deleteButton!.matIcon }}\n                  </mat-icon>\n                }\n                {{ field().deleteButton ? field().deleteButton!.label : 'Supprimer' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field().disabled && (!field().maxNbRow || field().maxNbRow! > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button mat-raised-button\n                  type=\"button\"\n                  (click)=\"addItem()\"\n          >\n            @if (field().addButton && field().addButton!.matIcon) {\n              <mat-icon [title]=\"field().addButton!.title ? field().addButton!.title : ''\">\n                {{ field().addButton!.matIcon }}\n              </mat-icon>\n            }\n            {{ field().addButton ? field().addButton!.label : 'Ajouter' }}\n          </button>\n        </div>\n      }\n      <mat-error>\n        @for (validation of field().validations; track validation) {\n          @if (array && !array.untouched && array.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath", "data"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => 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: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, decorators: [{
             type: Component,
@@ -759,12 +758,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ReactiveFormsModule,
                         MatError,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n    } @else {\n      <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n      @if (field.description) {\n        <p [innerHTML]=\"field.description\"></p>\n      }\n      <div class=\"sot-formfield-array-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container matDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n                @if (field.deleteButton && field.deleteButton.matIcon) {\n                  <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n                    {{ field.deleteButton!.matIcon }}\n                  </mat-icon>\n                }\n                {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button mat-raised-button\n                  type=\"button\"\n                  (click)=\"addItem()\"\n          >\n            @if (field.addButton && field.addButton.matIcon) {\n              <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n                {{ field.addButton!.matIcon }}\n              </mat-icon>\n            }\n            {{ field.addButton ? field.addButton!.label : 'Ajouter' }}\n          </button>\n        </div>\n      }\n      <mat-error>\n        @for (validation of field.validations; track validation) {\n          @if (array && !array.untouched && array.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field().className\">\n  <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n    @if (field().accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field().opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-array-label\">{{ field().label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field().description) {\n            <p [innerHTML]=\"field().description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n    } @else {\n      <legend class=\"sot-formfield-array-label\">{{ field().label }}</legend>\n      @if (field().description) {\n        <p [innerHTML]=\"field().description\"></p>\n      }\n      <div class=\"sot-formfield-array-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group()\">\n    <div [formArrayName]=\"field().name\">\n      @for (inst of field().instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field().elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field().itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field().elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container matDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                              [data]=\"data\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field().disabled && (!field().minNbRow || field().minNbRow! < array.controls.length)) {\n              <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n                @if (field().deleteButton && field().deleteButton!.matIcon) {\n                  <mat-icon [title]=\"field().deleteButton!.title ? field().deleteButton!.title : ''\">\n                    {{ field().deleteButton!.matIcon }}\n                  </mat-icon>\n                }\n                {{ field().deleteButton ? field().deleteButton!.label : 'Supprimer' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field().disabled && (!field().maxNbRow || field().maxNbRow! > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button mat-raised-button\n                  type=\"button\"\n                  (click)=\"addItem()\"\n          >\n            @if (field().addButton && field().addButton!.matIcon) {\n              <mat-icon [title]=\"field().addButton!.title ? field().addButton!.title : ''\">\n                {{ field().addButton!.matIcon }}\n              </mat-icon>\n            }\n            {{ field().addButton ? field().addButton!.label : 'Ajouter' }}\n          </button>\n        </div>\n      }\n      <mat-error>\n        @for (validation of field().validations; track validation) {\n          @if (array && !array.untouched && array.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class MatRowComponent extends AbstractFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatRowComponent, isStandalone: true, selector: "sot-mat-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        matDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatRowComponent, isStandalone: true, selector: "sot-mat-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field().className\">\n  @for (f of field().fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        matDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group()\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath", "data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatRowComponent, decorators: [{
             type: Component,
@@ -773,7 +772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgClass,
                         forwardRef(() => AcDynamicFieldDirective),
                         AcDynamicFieldDirective
-                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        matDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field().className\">\n  @for (f of field().fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        matDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group()\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
         }] });
 
 let PasswordValidators$2 = class PasswordValidators {
@@ -795,16 +794,16 @@ class MatFieldPasswordComponent extends AbstractControlFieldComponent {
     iconErrorLabel;
     iconSuccessLabel;
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     ngOnInit() {
         super.ngOnInit();
-        this.showPasswordLabel = this.field.labels?.showPassword ?? "Show password";
-        this.hidePasswordLabel = this.field.labels?.hidePassword ?? "Hide password";
-        this.iconSuccessLabel = this.field.labels?.iconSuccess ?? "Success";
-        this.iconErrorLabel = this.field.labels?.iconError ?? "Error";
+        this.showPasswordLabel = this.field().labels?.showPassword ?? "Show password";
+        this.hidePasswordLabel = this.field().labels?.hidePassword ?? "Hide password";
+        this.iconSuccessLabel = this.field().labels?.iconSuccess ?? "Success";
+        this.iconErrorLabel = this.field().labels?.iconError ?? "Error";
         if (this.control) {
             this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
                 if (value?.length == 0) {
@@ -836,29 +835,29 @@ class MatFieldPasswordComponent extends AbstractControlFieldComponent {
         return this.control.value && !this.control.hasError("requiresSpecialChars");
     }
     setPasswordValidators() {
-        if (this.field.minlength) {
-            this.control?.addValidators(Validators.minLength(this.field.minlength));
+        if (this.field().minlength) {
+            this.control?.addValidators(Validators.minLength(this.field().minlength));
         }
-        if (this.field.maxlength) {
-            this.control?.addValidators(Validators.maxLength(this.field.maxlength));
+        if (this.field().maxlength) {
+            this.control?.addValidators(Validators.maxLength(this.field().maxlength));
         }
-        if (this.field.requiresDigit) {
+        if (this.field().requiresDigit) {
             this.control?.addValidators(PasswordValidators$2.patternValidator(/(?=.*[0-9])/, {
                 requiresDigit: true
             }));
         }
-        if (this.field.requiresUppercase) {
+        if (this.field().requiresUppercase) {
             this.control?.addValidators(PasswordValidators$2.patternValidator(/(?=.*[A-Z])/, {
                 requiresUppercase: true
             }));
         }
-        if (this.field.requiresLowercase) {
+        if (this.field().requiresLowercase) {
             this.control?.addValidators(PasswordValidators$2.patternValidator(/(?=.*[a-z])/, {
                 requiresLowercase: true
             }));
         }
-        if (this.field.requiresSpecialChars) {
-            const chars = this.field.specialChars?.join("") ?? "$@^!%*?&";
+        if (this.field().requiresSpecialChars) {
+            const chars = this.field().specialChars?.join("") ?? "$@^!%*?&";
             const regex = "(?=.*[" + chars + "])";
             this.control?.addValidators(PasswordValidators$2.patternValidator(new RegExp(regex), {
                 requiresSpecialChars: true
@@ -866,69 +865,70 @@ class MatFieldPasswordComponent extends AbstractControlFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldPasswordComponent, isStandalone: true, selector: "sot-mat-field-password", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-password\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field.name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [aria-describedby]=\"uuid + '-description'\"\r\n    >\r\n    <button type=\"button\" matIconButton matSuffix (click)=\"tooglePassword()\"\r\n            [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n            [attr.aria-pressed]=\"inputType === 'password'\">\r\n      <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n    </button>\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldPasswordComponent, isStandalone: true, selector: "sot-mat-field-password", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-password\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field().name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [aria-describedby]=\"uuid + '-description'\"\r\n    >\r\n    <button type=\"button\" matIconButton matSuffix (click)=\"tooglePassword()\"\r\n            [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n            [attr.aria-pressed]=\"inputType === 'password'\">\r\n      <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n    </button>\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field().minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule, MatIconButton], template: "<div\r\n  class=\"sot-formfield sot-formfield-password\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field.name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [aria-describedby]=\"uuid + '-description'\"\r\n    >\r\n    <button type=\"button\" matIconButton matSuffix (click)=\"tooglePassword()\"\r\n            [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n            [attr.aria-pressed]=\"inputType === 'password'\">\r\n      <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n    </button>\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"] }]
+            args: [{ selector: 'sot-mat-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule, MatIconButton], template: "<div\r\n  class=\"sot-formfield sot-formfield-password\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n    <input matInput\r\n           [id]=\"uuid\"\r\n           [formControlName]=\"field().name\"\r\n           [required]=\"!!required\"\r\n           [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n           [type]=\"inputType\"\r\n           [aria-describedby]=\"uuid + '-description'\"\r\n    >\r\n    <button type=\"button\" matIconButton matSuffix (click)=\"tooglePassword()\"\r\n            [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n            [attr.aria-pressed]=\"inputType === 'password'\">\r\n      <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n    </button>\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{prefix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field().minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"] }]
         }] });
 
 class MatFieldRadioButtonComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldRadioButtonComponent, isStandalone: true, selector: "sot-mat-field-radio-button", usesInheritance: true, ngImport: i0, template: "<fieldset\r\n  class=\"sot-formfield sot-formfield-radiobutton\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <legend [attr.id]=\"'radiobutton-'+uuid\" class=\"sot-formfield-radiobutton-label\">\r\n    {{ field.label }} {{ !!required ? '*' : '' }}\r\n    @if (field.description) {\r\n      <span class=\"radiobutton-description\">{{ field.description }}</span>\r\n    }\r\n  </legend>\r\n  <mat-radio-group class=\"sot-formfield-radiobutton-content\"\r\n                   [id]=\"uuid\"\r\n                   [attr.aria-labelledby]=\"'radiobutton-'+uuid\"\r\n                   [formControlName]=\"field.name\"\r\n                   [ngClass]=\"{'verticalAlign': field.verticalAlign, 'horizontalAlign': !field.verticalAlign}\"\r\n  >\r\n    @if (field.options) {\r\n      @for (item of field.options; track item) {\r\n        <mat-radio-button\r\n          class=\"sot-formfield-radiobutton-item\"\r\n          [ngClass]=\"field.radioButtonClassName\"\r\n          [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n          [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n          <span class=\"item-label\">{{ field.labelKey ? item[field.labelKey!] : item }}</span>\r\n          @if (field.descriptionKey) {\r\n            <span class=\"item-description\">{{ item[field.descriptionKey] }}</span>\r\n          }\r\n        </mat-radio-button>\r\n      }\r\n    }\r\n  </mat-radio-group>\r\n  <mat-error>\r\n    @for (validation of field.validations; track validation) {\r\n      @if (control && !control.untouched && control.hasError(validation.name)) {\r\n        {{ validation.message }}\r\n      }\r\n    }\r\n  </mat-error>\r\n</fieldset>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$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: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatIconModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldRadioButtonComponent, isStandalone: true, selector: "sot-mat-field-radio-button", usesInheritance: true, ngImport: i0, template: "<fieldset\r\n  class=\"sot-formfield sot-formfield-radiobutton\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <legend [attr.id]=\"'radiobutton-'+uuid\" class=\"sot-formfield-radiobutton-label\">\r\n    {{ field().label }} {{ !!required ? '*' : '' }}\r\n    @if (field().description) {\r\n      <span class=\"radiobutton-description\">{{ field().description }}</span>\r\n    }\r\n  </legend>\r\n  <mat-radio-group class=\"sot-formfield-radiobutton-content\"\r\n                   [id]=\"uuid\"\r\n                   [attr.aria-labelledby]=\"'radiobutton-'+uuid\"\r\n                   [formControlName]=\"field().name\"\r\n                   [ngClass]=\"{'verticalAlign': field().verticalAlign, 'horizontalAlign': !field().verticalAlign}\"\r\n  >\r\n    @if (field().options) {\r\n      @for (item of field().options; track item) {\r\n        <mat-radio-button\r\n          class=\"sot-formfield-radiobutton-item\"\r\n          [ngClass]=\"field().radioButtonClassName\"\r\n          [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n          [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n          <span class=\"item-label\">{{ field().labelKey ? item[field().labelKey!] : item }}</span>\r\n          @if (field().descriptionKey) {\r\n            <span class=\"item-description\">{{ item[field().descriptionKey!] }}</span>\r\n          }\r\n        </mat-radio-button>\r\n      }\r\n    }\r\n  </mat-radio-group>\r\n  <mat-error>\r\n    @for (validation of field().validations; track validation) {\r\n      @if (control && !control.untouched && control.hasError(validation.name)) {\r\n        {{ validation.message }}\r\n      }\r\n    }\r\n  </mat-error>\r\n</fieldset>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$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: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatIconModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass, MatRadioModule, MatError, MatTooltipModule, MatIconModule], template: "<fieldset\r\n  class=\"sot-formfield sot-formfield-radiobutton\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <legend [attr.id]=\"'radiobutton-'+uuid\" class=\"sot-formfield-radiobutton-label\">\r\n    {{ field.label }} {{ !!required ? '*' : '' }}\r\n    @if (field.description) {\r\n      <span class=\"radiobutton-description\">{{ field.description }}</span>\r\n    }\r\n  </legend>\r\n  <mat-radio-group class=\"sot-formfield-radiobutton-content\"\r\n                   [id]=\"uuid\"\r\n                   [attr.aria-labelledby]=\"'radiobutton-'+uuid\"\r\n                   [formControlName]=\"field.name\"\r\n                   [ngClass]=\"{'verticalAlign': field.verticalAlign, 'horizontalAlign': !field.verticalAlign}\"\r\n  >\r\n    @if (field.options) {\r\n      @for (item of field.options; track item) {\r\n        <mat-radio-button\r\n          class=\"sot-formfield-radiobutton-item\"\r\n          [ngClass]=\"field.radioButtonClassName\"\r\n          [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n          [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n          <span class=\"item-label\">{{ field.labelKey ? item[field.labelKey!] : item }}</span>\r\n          @if (field.descriptionKey) {\r\n            <span class=\"item-description\">{{ item[field.descriptionKey] }}</span>\r\n          }\r\n        </mat-radio-button>\r\n      }\r\n    }\r\n  </mat-radio-group>\r\n  <mat-error>\r\n    @for (validation of field.validations; track validation) {\r\n      @if (control && !control.untouched && control.hasError(validation.name)) {\r\n        {{ validation.message }}\r\n      }\r\n    }\r\n  </mat-error>\r\n</fieldset>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'sot-mat-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass, MatRadioModule, MatError, MatTooltipModule, MatIconModule], template: "<fieldset\r\n  class=\"sot-formfield sot-formfield-radiobutton\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <legend [attr.id]=\"'radiobutton-'+uuid\" class=\"sot-formfield-radiobutton-label\">\r\n    {{ field().label }} {{ !!required ? '*' : '' }}\r\n    @if (field().description) {\r\n      <span class=\"radiobutton-description\">{{ field().description }}</span>\r\n    }\r\n  </legend>\r\n  <mat-radio-group class=\"sot-formfield-radiobutton-content\"\r\n                   [id]=\"uuid\"\r\n                   [attr.aria-labelledby]=\"'radiobutton-'+uuid\"\r\n                   [formControlName]=\"field().name\"\r\n                   [ngClass]=\"{'verticalAlign': field().verticalAlign, 'horizontalAlign': !field().verticalAlign}\"\r\n  >\r\n    @if (field().options) {\r\n      @for (item of field().options; track item) {\r\n        <mat-radio-button\r\n          class=\"sot-formfield-radiobutton-item\"\r\n          [ngClass]=\"field().radioButtonClassName\"\r\n          [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n          [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n          <span class=\"item-label\">{{ field().labelKey ? item[field().labelKey!] : item }}</span>\r\n          @if (field().descriptionKey) {\r\n            <span class=\"item-description\">{{ item[field().descriptionKey!] }}</span>\r\n          }\r\n        </mat-radio-button>\r\n      }\r\n    }\r\n  </mat-radio-group>\r\n  <mat-error>\r\n    @for (validation of field().validations; track validation) {\r\n      @if (control && !control.untouched && control.hasError(validation.name)) {\r\n        {{ validation.message }}\r\n      }\r\n    }\r\n  </mat-error>\r\n</fieldset>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
         }] });
 
 class MatFieldSelectComponent extends AbstractControlFieldComponent {
     options = [];
     ngOnInit() {
         super.ngOnInit();
-        if (isObservable(this.field.options)) {
-            this.field.options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
+        const options = this.field().options;
+        if (isObservable(options)) {
+            options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
                 this.options = options;
             });
         }
         else {
-            this.options = this.field.options;
+            this.options = options;
         }
     }
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldSelectComponent, isStandalone: true, selector: "sot-mat-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\"\r\n     [ngClass]=\"field.className\"\r\n     [formGroup]=\"group\">\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n    <mat-select\r\n      [id]=\"uuid\"\r\n      [formControlName]=\"field.name\"\r\n      [multiple]=\"field.multiple\"\r\n      panelClass=\"sot-formfield-select-panel\">\r\n      @if (field.resetOption) {\r\n        <mat-option [value]=\"undefined\">\r\n          {{ field.resetOptionLabel }}\r\n        </mat-option>\r\n      }\r\n      @if (field.options) {\r\n        @if (field.groupLabelKey) {\r\n          @for (group of options; track group) {\r\n            <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n              @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n                @for (item of group[field.groupOptionsKey]; track item) {\r\n                  <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                              [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                    {{ field.labelKey ? item[field.labelKey!] : item }}\r\n                  </mat-option>\r\n                }\r\n              }\r\n            </mat-optgroup>\r\n          }\r\n        } @else {\r\n          @for (item of options; track item) {\r\n            <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                        [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n              {{ field.labelKey ? item[field.labelKey!] : item }}\r\n            </mat-option>\r\n          }\r\n        }\r\n      }\r\n    </mat-select>\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </mat-error>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.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: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldSelectComponent, isStandalone: true, selector: "sot-mat-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\"\r\n     [ngClass]=\"field().className\"\r\n     [formGroup]=\"group()\">\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n    <mat-select\r\n      [id]=\"uuid\"\r\n      [formControlName]=\"field().name\"\r\n      [multiple]=\"field().multiple\"\r\n      panelClass=\"sot-formfield-select-panel\">\r\n      @if (field().resetOption) {\r\n        <mat-option [value]=\"undefined\">\r\n          {{ field().resetOptionLabel }}\r\n        </mat-option>\r\n      }\r\n      @if (field().options) {\r\n        @if (field().groupLabelKey) {\r\n          @for (group of options; track group) {\r\n            <mat-optgroup [label]=\"field().groupLabelKey ? group[field().groupLabelKey!] : ''\">\r\n              @if (field().groupOptionsKey && group[field().groupOptionsKey!]) {\r\n                @for (item of group[field().groupOptionsKey!]; track item) {\r\n                  <mat-option [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                              [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                    {{ field().labelKey ? item[field().labelKey!] : item }}\r\n                  </mat-option>\r\n                }\r\n              }\r\n            </mat-optgroup>\r\n          }\r\n        } @else {\r\n          @for (item of options; track item) {\r\n            <mat-option [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                        [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n              {{ field().labelKey ? item[field().labelKey!] : item }}\r\n            </mat-option>\r\n          }\r\n        }\r\n      }\r\n    </mat-select>\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </mat-error>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.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: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\"\r\n     [ngClass]=\"field.className\"\r\n     [formGroup]=\"group\">\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n    <mat-select\r\n      [id]=\"uuid\"\r\n      [formControlName]=\"field.name\"\r\n      [multiple]=\"field.multiple\"\r\n      panelClass=\"sot-formfield-select-panel\">\r\n      @if (field.resetOption) {\r\n        <mat-option [value]=\"undefined\">\r\n          {{ field.resetOptionLabel }}\r\n        </mat-option>\r\n      }\r\n      @if (field.options) {\r\n        @if (field.groupLabelKey) {\r\n          @for (group of options; track group) {\r\n            <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n              @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n                @for (item of group[field.groupOptionsKey]; track item) {\r\n                  <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                              [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                    {{ field.labelKey ? item[field.labelKey!] : item }}\r\n                  </mat-option>\r\n                }\r\n              }\r\n            </mat-optgroup>\r\n          }\r\n        } @else {\r\n          @for (item of options; track item) {\r\n            <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                        [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n              {{ field.labelKey ? item[field.labelKey!] : item }}\r\n            </mat-option>\r\n          }\r\n        }\r\n      }\r\n    </mat-select>\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </mat-error>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-mat-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\"\r\n     [ngClass]=\"field().className\"\r\n     [formGroup]=\"group()\">\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n    <mat-select\r\n      [id]=\"uuid\"\r\n      [formControlName]=\"field().name\"\r\n      [multiple]=\"field().multiple\"\r\n      panelClass=\"sot-formfield-select-panel\">\r\n      @if (field().resetOption) {\r\n        <mat-option [value]=\"undefined\">\r\n          {{ field().resetOptionLabel }}\r\n        </mat-option>\r\n      }\r\n      @if (field().options) {\r\n        @if (field().groupLabelKey) {\r\n          @for (group of options; track group) {\r\n            <mat-optgroup [label]=\"field().groupLabelKey ? group[field().groupLabelKey!] : ''\">\r\n              @if (field().groupOptionsKey && group[field().groupOptionsKey!]) {\r\n                @for (item of group[field().groupOptionsKey!]; track item) {\r\n                  <mat-option [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                              [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                    {{ field().labelKey ? item[field().labelKey!] : item }}\r\n                  </mat-option>\r\n                }\r\n              }\r\n            </mat-optgroup>\r\n          }\r\n        } @else {\r\n          @for (item of options; track item) {\r\n            <mat-option [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                        [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n              {{ field().labelKey ? item[field().labelKey!] : item }}\r\n            </mat-option>\r\n          }\r\n        }\r\n      }\r\n    </mat-select>\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n    <mat-error>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </mat-error>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 class MatFieldTextareaComponent extends AbstractControlFieldComponent {
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldTextareaComponent, isStandalone: true, selector: "sot-mat-field-textarea", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sot-formfield sot-formfield-textarea\"\n  [ngClass]=\"field.className\"\n  [formGroup]=\"group\"\n>\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\n    <textarea matInput\n              [id]=\"uuid\"\n              [formControlName]=\"field.name\"\n              [readonly]=\"field.readonly\"\n              [required]=\"!!required\"\n              [rows]=\"field.rows\"\n    ></textarea>\n\n    @for (b of field.prefixes; track b) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @for (b of field.suffixes; track b) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @if (field.description) {\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n    }\n\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field.validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldTextareaComponent, isStandalone: true, selector: "sot-mat-field-textarea", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sot-formfield sot-formfield-textarea\"\n  [ngClass]=\"field().className\"\n  [formGroup]=\"group()\"\n>\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\n    <textarea matInput\n              [id]=\"uuid\"\n              [formControlName]=\"field().name\"\n              [readonly]=\"field().readonly\"\n              [required]=\"!!required\"\n              [rows]=\"field().rows\"\n    ></textarea>\n\n    @for (b of field().prefixes; track b) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @for (b of field().suffixes; track b) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @if (field().description) {\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\n    }\n\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field().validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div\n  class=\"sot-formfield sot-formfield-textarea\"\n  [ngClass]=\"field.className\"\n  [formGroup]=\"group\"\n>\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\n    <textarea matInput\n              [id]=\"uuid\"\n              [formControlName]=\"field.name\"\n              [readonly]=\"field.readonly\"\n              [required]=\"!!required\"\n              [rows]=\"field.rows\"\n    ></textarea>\n\n    @for (b of field.prefixes; track b) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @for (b of field.suffixes; track b) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @if (field.description) {\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n    }\n\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field.validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-mat-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div\n  class=\"sot-formfield sot-formfield-textarea\"\n  [ngClass]=\"field().className\"\n  [formGroup]=\"group()\"\n>\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\n    <textarea matInput\n              [id]=\"uuid\"\n              [formControlName]=\"field().name\"\n              [readonly]=\"field().readonly\"\n              [required]=\"!!required\"\n              [rows]=\"field().rows\"\n    ></textarea>\n\n    @for (b of field().prefixes; track b) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @for (b of field().suffixes; track b) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (b.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"b.actionAriaLabel\"\n                  (click)=\"buttonAction(b)\"\n          >{{b.label}}</button>\n        } @else {\n          <span [innerHTML]=\"b.label\"></span>\n        }\n      </span>\n    }\n    @if (field().description) {\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\n    }\n\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field().validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 class MatFieldToggleComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldToggleComponent, isStandalone: true, selector: "sot-mat-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toggle\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-slide-toggle\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'toggle-' + field.name\"\r\n      [labelPosition]=\"field.labelPosition ?? 'after'\"\r\n    >\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"red\">*</span>\r\n      }\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"messages-group\" [attr.id]=\"'toggle-' + field.name + '-error'\" aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p>{{ validation.message }}</p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldToggleComponent, isStandalone: true, selector: "sot-mat-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toggle\" [ngClass]=\"field().className\">\r\n  <div [formGroup]=\"group()\">\r\n    <mat-slide-toggle\r\n      [formControlName]=\"field().name\"\r\n      [attr.id]=\"'toggle-' + field().name\"\r\n      [labelPosition]=\"field().labelPosition ?? 'after'\"\r\n    >\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"red\">*</span>\r\n      }\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"messages-group\" [attr.id]=\"'toggle-' + field().name + '-error'\" aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p>{{ validation.message }}</p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatSlideToggleModule], template: "<div class=\"sot-formfield sot-formfield-toggle\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-slide-toggle\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'toggle-' + field.name\"\r\n      [labelPosition]=\"field.labelPosition ?? 'after'\"\r\n    >\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"red\">*</span>\r\n      }\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"messages-group\" [attr.id]=\"'toggle-' + field.name + '-error'\" aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p>{{ validation.message }}</p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'sot-mat-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatSlideToggleModule], template: "<div class=\"sot-formfield sot-formfield-toggle\" [ngClass]=\"field().className\">\r\n  <div [formGroup]=\"group()\">\r\n    <mat-slide-toggle\r\n      [formControlName]=\"field().name\"\r\n      [attr.id]=\"'toggle-' + field().name\"\r\n      [labelPosition]=\"field().labelPosition ?? 'after'\"\r\n    >\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"red\">*</span>\r\n      }\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"messages-group\" [attr.id]=\"'toggle-' + field().name + '-error'\" aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p>{{ validation.message }}</p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class AcFieldCustomDirective extends NgControl {
@@ -1016,11 +1016,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class MatFieldCustomComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MatFieldCustomComponent, isStandalone: true, selector: "ac-mat-field-custom", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field.className\"\n     [formGroup]=\"group\" >\n    <ng-container fieldCustom [field]=\"field\" [group]=\"group\" > </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AcFieldCustomDirective, selector: "[fieldCustom]", inputs: ["field", "group"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MatFieldCustomComponent, isStandalone: true, selector: "ac-mat-field-custom", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field().className\"\n     [formGroup]=\"group()\" >\n    <ng-container fieldCustom [field]=\"field()\" [group]=\"group()\" > </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AcFieldCustomDirective, selector: "[fieldCustom]", inputs: ["field", "group"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldCustomComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ac-mat-field-custom", standalone: true, imports: [ReactiveFormsModule, NgClass, AcFieldCustomDirective], template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field.className\"\n     [formGroup]=\"group\" >\n    <ng-container fieldCustom [field]=\"field\" [group]=\"group\" > </ng-container>\n</div>\n" }]
+            args: [{ selector: "ac-mat-field-custom", standalone: true, imports: [ReactiveFormsModule, NgClass, AcFieldCustomDirective], template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field().className\"\n     [formGroup]=\"group()\" >\n    <ng-container fieldCustom [field]=\"field()\" [group]=\"group()\" > </ng-container>\n</div>\n" }]
         }] });
 
 class ConfirmDialogComponent {
@@ -1212,7 +1212,7 @@ class MatInputFileComponent {
                 multi: true,
                 useExisting: forwardRef(() => MatInputFileComponent),
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n  <label [ngClass]=\"field()?.labelClassName\"\n         [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n  <div class=\"sot-file-list\">\n    @if (field().multiple) {\n      <ul>\n        @for (item of fileList; track item) {\n          <li class=\"file-list-item\">\n            <div>\n              <div>\n                @if (item.srcUrl) {\n                  <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n                } @else {\n                  {{ item.file.name }}\n                }\n              </div>\n            </div>\n            <div>\n              @if (!field().disabled) {\n                <button matIconButton\n                        type=\"button\"\n                        (click)=\"deleteFile(item)\"\n                        title=\"Supprimer\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </div>\n          </li>\n        }\n      </ul>\n    } @else {\n      @if (fichier) {\n        <div class=\"file-list-item\">\n          <div>\n            @if (fichier.srcUrl) {\n              <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n            } @else {\n              {{ fichier.file.name }}\n            }\n          </div>\n          @if (!field().disabled) {\n            <sot-mat-button\n              type=\"button\"\n              [className]=\"field().deleteButton?.className\"\n              [matType]=\"field().deleteButton?.matButtonType\"\n              [matIcon]=\"field().deleteButton?.matIcon\"\n              [label]=\"field().deleteButton?.label ?? 'Delete'\"\n              [title]=\"field().deleteButton?.title\"\n              [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n              (buttonClick)=\"confirmDeleteFile(fichier!)\"\n            ></sot-mat-button>\n          }\n        </div>\n      }\n    }\n  </div>\n  <div class=\"sot-file-button\">\n    <sot-mat-button\n      type=\"button\"\n      [className]=\"field().addButton?.className\"\n      [matType]=\"field().addButton?.matButtonType\"\n      [matIcon]=\"field().addButton?.matIcon\"\n      [label]=\"field().addButton?.label ?? 'Select a file'\"\n      [title]=\"field().addButton?.title\"\n      [ariaLabel]=\"field().addButton?.ariaLabel\"\n      [disabled]=\"field().disabled\"\n      (buttonClick)=\"fileInput.click()\"\n    ></sot-mat-button>\n    <input\n      #fileInput\n      hidden\n      type=\"file\"\n      [attr.id]=\"'file-upload-' + field().id\"\n      name=\"file-upload\"\n      (change)=\"onSelectFile($event)\"\n      [accept]=\"field().accept ? field().accept : '*/*'\"\n      [multiple]=\"field().multiple\"\n    />\n  </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n  <label [ngClass]=\"field().labelClassName\"\n         [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n  <div class=\"sot-file-list\">\n    @if (field().multiple) {\n      <ul>\n        @for (item of fileList; track item) {\n          <li class=\"file-list-item\">\n            <div>\n              <div>\n                @if (item.srcUrl) {\n                  <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n                } @else {\n                  {{ item.file.name }}\n                }\n              </div>\n            </div>\n            <div>\n              @if (!field().disabled) {\n                <button matIconButton\n                        type=\"button\"\n                        (click)=\"deleteFile(item)\"\n                        title=\"Supprimer\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </div>\n          </li>\n        }\n      </ul>\n    } @else {\n      @if (fichier) {\n        <div class=\"file-list-item\">\n          <div>\n            @if (fichier.srcUrl) {\n              <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n            } @else {\n              {{ fichier.file.name }}\n            }\n          </div>\n          @if (!field().disabled) {\n            <sot-mat-button\n              type=\"button\"\n              [className]=\"field().deleteButton?.className\"\n              [matType]=\"field().deleteButton?.matButtonType\"\n              [matIcon]=\"field().deleteButton?.matIcon\"\n              [label]=\"field().deleteButton?.label ?? 'Delete'\"\n              [title]=\"field().deleteButton?.title\"\n              [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n              (buttonClick)=\"confirmDeleteFile(fichier!)\"\n            ></sot-mat-button>\n          }\n        </div>\n      }\n    }\n  </div>\n  <div class=\"sot-file-button\">\n    <sot-mat-button\n      type=\"button\"\n      [className]=\"field().addButton?.className\"\n      [matType]=\"field().addButton?.matButtonType\"\n      [matIcon]=\"field().addButton?.matIcon\"\n      [label]=\"field().addButton?.label ?? 'Select a file'\"\n      [title]=\"field().addButton?.title\"\n      [ariaLabel]=\"field().addButton?.ariaLabel\"\n      [disabled]=\"field().disabled\"\n      (buttonClick)=\"fileInput.click()\"\n    ></sot-mat-button>\n    <input\n      #fileInput\n      hidden\n      type=\"file\"\n      [attr.id]=\"'file-upload-' + field().id\"\n      name=\"file-upload\"\n      (change)=\"onSelectFile($event)\"\n      [accept]=\"field().accept ? field().accept : '*/*'\"\n      [multiple]=\"field().multiple\"\n    />\n  </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, decorators: [{
             type: Component,
@@ -1222,7 +1222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => MatInputFileComponent),
                         },
-                    ], template: "<div class=\"sot-file-wrapper\">\n  <label [ngClass]=\"field()?.labelClassName\"\n         [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n  <div class=\"sot-file-list\">\n    @if (field().multiple) {\n      <ul>\n        @for (item of fileList; track item) {\n          <li class=\"file-list-item\">\n            <div>\n              <div>\n                @if (item.srcUrl) {\n                  <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n                } @else {\n                  {{ item.file.name }}\n                }\n              </div>\n            </div>\n            <div>\n              @if (!field().disabled) {\n                <button matIconButton\n                        type=\"button\"\n                        (click)=\"deleteFile(item)\"\n                        title=\"Supprimer\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </div>\n          </li>\n        }\n      </ul>\n    } @else {\n      @if (fichier) {\n        <div class=\"file-list-item\">\n          <div>\n            @if (fichier.srcUrl) {\n              <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n            } @else {\n              {{ fichier.file.name }}\n            }\n          </div>\n          @if (!field().disabled) {\n            <sot-mat-button\n              type=\"button\"\n              [className]=\"field().deleteButton?.className\"\n              [matType]=\"field().deleteButton?.matButtonType\"\n              [matIcon]=\"field().deleteButton?.matIcon\"\n              [label]=\"field().deleteButton?.label ?? 'Delete'\"\n              [title]=\"field().deleteButton?.title\"\n              [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n              (buttonClick)=\"confirmDeleteFile(fichier!)\"\n            ></sot-mat-button>\n          }\n        </div>\n      }\n    }\n  </div>\n  <div class=\"sot-file-button\">\n    <sot-mat-button\n      type=\"button\"\n      [className]=\"field().addButton?.className\"\n      [matType]=\"field().addButton?.matButtonType\"\n      [matIcon]=\"field().addButton?.matIcon\"\n      [label]=\"field().addButton?.label ?? 'Select a file'\"\n      [title]=\"field().addButton?.title\"\n      [ariaLabel]=\"field().addButton?.ariaLabel\"\n      [disabled]=\"field().disabled\"\n      (buttonClick)=\"fileInput.click()\"\n    ></sot-mat-button>\n    <input\n      #fileInput\n      hidden\n      type=\"file\"\n      [attr.id]=\"'file-upload-' + field().id\"\n      name=\"file-upload\"\n      (change)=\"onSelectFile($event)\"\n      [accept]=\"field().accept ? field().accept : '*/*'\"\n      [multiple]=\"field().multiple\"\n    />\n  </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"] }]
+                    ], template: "<div class=\"sot-file-wrapper\">\n  <label [ngClass]=\"field().labelClassName\"\n         [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n  <div class=\"sot-file-list\">\n    @if (field().multiple) {\n      <ul>\n        @for (item of fileList; track item) {\n          <li class=\"file-list-item\">\n            <div>\n              <div>\n                @if (item.srcUrl) {\n                  <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n                } @else {\n                  {{ item.file.name }}\n                }\n              </div>\n            </div>\n            <div>\n              @if (!field().disabled) {\n                <button matIconButton\n                        type=\"button\"\n                        (click)=\"deleteFile(item)\"\n                        title=\"Supprimer\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              }\n            </div>\n          </li>\n        }\n      </ul>\n    } @else {\n      @if (fichier) {\n        <div class=\"file-list-item\">\n          <div>\n            @if (fichier.srcUrl) {\n              <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n            } @else {\n              {{ fichier.file.name }}\n            }\n          </div>\n          @if (!field().disabled) {\n            <sot-mat-button\n              type=\"button\"\n              [className]=\"field().deleteButton?.className\"\n              [matType]=\"field().deleteButton?.matButtonType\"\n              [matIcon]=\"field().deleteButton?.matIcon\"\n              [label]=\"field().deleteButton?.label ?? 'Delete'\"\n              [title]=\"field().deleteButton?.title\"\n              [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n              (buttonClick)=\"confirmDeleteFile(fichier!)\"\n            ></sot-mat-button>\n          }\n        </div>\n      }\n    }\n  </div>\n  <div class=\"sot-file-button\">\n    <sot-mat-button\n      type=\"button\"\n      [className]=\"field().addButton?.className\"\n      [matType]=\"field().addButton?.matButtonType\"\n      [matIcon]=\"field().addButton?.matIcon\"\n      [label]=\"field().addButton?.label ?? 'Select a file'\"\n      [title]=\"field().addButton?.title\"\n      [ariaLabel]=\"field().addButton?.ariaLabel\"\n      [disabled]=\"field().disabled\"\n      (buttonClick)=\"fileInput.click()\"\n    ></sot-mat-button>\n    <input\n      #fileInput\n      hidden\n      type=\"file\"\n      [attr.id]=\"'file-upload-' + field().id\"\n      name=\"file-upload\"\n      (change)=\"onSelectFile($event)\"\n      [accept]=\"field().accept ? field().accept : '*/*'\"\n      [multiple]=\"field().multiple\"\n    />\n  </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -1230,11 +1230,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class MatFieldFileComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldFileComponent, isStandalone: true, selector: "sot-mat-field-file", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-file\" [ngClass]=\"field.className\" [formGroup]=\"group\">\n  <sot-mat-input-file [formControlName]=\"field.name\" [field]=\"field\"\n                      [group]=\"group\"></sot-mat-input-file>\n  @for (validation of field.validations; track validation) {\n    @if (control && !control.untouched && control.hasError(validation.name)) {\n      <mat-error>{{ validation.message }}</mat-error>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatInputFileComponent, selector: "sot-mat-input-file", inputs: ["field", "group"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldFileComponent, isStandalone: true, selector: "sot-mat-field-file", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-file\" [ngClass]=\"field().className\" [formGroup]=\"group()\">\n  <sot-mat-input-file [formControlName]=\"field().name\" [field]=\"field()\"\n                      [group]=\"group()\"></sot-mat-input-file>\n  @for (validation of field().validations; track validation) {\n    @if (control && !control.untouched && control.hasError(validation.name)) {\n      <mat-error>{{ validation.message }}</mat-error>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatInputFileComponent, selector: "sot-mat-input-file", inputs: ["field", "group"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-file', standalone: true, imports: [ReactiveFormsModule, NgClass, MatError, MatInputFileComponent], template: "<div class=\"sot-formfield sot-formfield-file\" [ngClass]=\"field.className\" [formGroup]=\"group\">\n  <sot-mat-input-file [formControlName]=\"field.name\" [field]=\"field\"\n                      [group]=\"group\"></sot-mat-input-file>\n  @for (validation of field.validations; track validation) {\n    @if (control && !control.untouched && control.hasError(validation.name)) {\n      <mat-error>{{ validation.message }}</mat-error>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'sot-mat-field-file', standalone: true, imports: [ReactiveFormsModule, NgClass, MatError, MatInputFileComponent], template: "<div class=\"sot-formfield sot-formfield-file\" [ngClass]=\"field().className\" [formGroup]=\"group()\">\n  <sot-mat-input-file [formControlName]=\"field().name\" [field]=\"field()\"\n                      [group]=\"group()\"></sot-mat-input-file>\n  @for (validation of field().validations; track validation) {\n    @if (control && !control.untouched && control.hasError(validation.name)) {\n      <mat-error>{{ validation.message }}</mat-error>\n    }\n  }\n</div>\n" }]
         }] });
 
 class MatFieldChipsComponent extends AbstractControlFieldComponent {
@@ -1254,23 +1254,23 @@ class MatFieldChipsComponent extends AbstractControlFieldComponent {
     constructor() {
         super();
         effect(() => {
-            this.group.get(this.field.name)?.setValue(this.values());
+            this.group().get(this.field().name)?.setValue(this.values());
         });
     }
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     ngOnInit() {
         super.ngOnInit();
-        if (this.field.options) {
-            this.options = this.field.options;
+        if (this.field().options) {
+            this.options = this.field().options;
         }
-        if (this.field.value) {
-            this.values.set(this.field.value);
+        if (this.field().value) {
+            this.values.set(this.field().value);
         }
-        const control = this.group.get(this.field.name);
+        const control = this.group().get(this.field().name);
         if (control) {
             control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
                 if (JSON.stringify(value) !== JSON.stringify(this.values())) {
@@ -1308,11 +1308,11 @@ class MatFieldChipsComponent extends AbstractControlFieldComponent {
         event.option.deselect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldChipsComponent, isStandalone: true, selector: "sot-mat-field-chips", inputs: { currentOption: { classPropertyName: "currentOption", publicName: "currentOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentOption: "currentOptionChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n    <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n      @for (option of values(); track $index) {\r\n        <mat-chip-row (removed)=\"remove(option)\">\r\n          {{ option }}\r\n          <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n\r\n    <input\r\n      #chipsInput\r\n      [id]=\"uuid\"\r\n      name=\"option\"\r\n      [(ngModel)]=\"currentOption\"\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      [required]=\"!!required\"\r\n      [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n      [type]=\"inputType\"\r\n      [readonly]=\"field.readonly\"\r\n      [matChipInputFor]=\"chipGrid\"\r\n      [matAutocomplete]=\"auto\"\r\n      [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n      (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n    >\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n      @for (option of filteredOptions(); track option) {\r\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldChipsComponent, isStandalone: true, selector: "sot-mat-field-chips", inputs: { currentOption: { classPropertyName: "currentOption", publicName: "currentOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentOption: "currentOptionChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n\r\n    <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n      @for (option of values(); track $index) {\r\n        <mat-chip-row (removed)=\"remove(option)\">\r\n          {{ option }}\r\n          <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n\r\n    <input\r\n      #chipsInput\r\n      [id]=\"uuid\"\r\n      name=\"option\"\r\n      [(ngModel)]=\"currentOption\"\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      [required]=\"!!required\"\r\n      [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n      [type]=\"inputType\"\r\n      [readonly]=\"field().readonly\"\r\n      [matChipInputFor]=\"chipGrid\"\r\n      [matAutocomplete]=\"auto\"\r\n      [matChipInputSeparatorKeyCodes]=\"field().separatorKeysCodes ?? separatorKeysCodes\"\r\n      (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n    >\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n      @for (option of filteredOptions(); track option) {\r\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-mat-field-chips', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatButtonModule, MatChipsModule, MatAutocompleteModule, FormsModule], template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n    <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n      @for (option of values(); track $index) {\r\n        <mat-chip-row (removed)=\"remove(option)\">\r\n          {{ option }}\r\n          <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n\r\n    <input\r\n      #chipsInput\r\n      [id]=\"uuid\"\r\n      name=\"option\"\r\n      [(ngModel)]=\"currentOption\"\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      [required]=\"!!required\"\r\n      [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n      [type]=\"inputType\"\r\n      [readonly]=\"field.readonly\"\r\n      [matChipInputFor]=\"chipGrid\"\r\n      [matAutocomplete]=\"auto\"\r\n      [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n      (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n    >\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n      @for (option of filteredOptions(); track option) {\r\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @for (prefix of field.prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field.suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-mat-field-chips', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatButtonModule, MatChipsModule, MatAutocompleteModule, FormsModule], template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field().className\"\r\n  [formGroup]=\"group()\"\r\n>\r\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\r\n    <mat-label><span [innerHTML]=\"field().label\"></span></mat-label>\r\n\r\n    <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n      @for (option of values(); track $index) {\r\n        <mat-chip-row (removed)=\"remove(option)\">\r\n          {{ option }}\r\n          <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n            <mat-icon>cancel</mat-icon>\r\n          </button>\r\n        </mat-chip-row>\r\n      }\r\n    </mat-chip-grid>\r\n\r\n    <input\r\n      #chipsInput\r\n      [id]=\"uuid\"\r\n      name=\"option\"\r\n      [(ngModel)]=\"currentOption\"\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      [required]=\"!!required\"\r\n      [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n      [type]=\"inputType\"\r\n      [readonly]=\"field().readonly\"\r\n      [matChipInputFor]=\"chipGrid\"\r\n      [matAutocomplete]=\"auto\"\r\n      [matChipInputSeparatorKeyCodes]=\"field().separatorKeysCodes ?? separatorKeysCodes\"\r\n      (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n    >\r\n    <mat-autocomplete #auto=\"matAutocomplete\"\r\n                      (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n      @for (option of filteredOptions(); track option) {\r\n        <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @for (prefix of field().prefixes; track prefix) {\r\n      <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n    @for (suffix of field().suffixes; track suffix) {\r\n      <span class=\"sot-formfield-suffix\" matSuffix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field().description) {\r\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { currentOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentOption", required: false }] }, { type: i0.Output, args: ["currentOptionChange"] }] } });
 
 class MatFieldDateComponent extends AbstractControlFieldComponent {
@@ -1322,41 +1322,41 @@ class MatFieldDateComponent extends AbstractControlFieldComponent {
     locale;
     ngOnInit() {
         super.ngOnInit();
-        this.locale = this.field.locale ?? 'en';
+        this.locale = this.field().locale ?? 'en';
         this._adapter.setLocale(this.locale);
-        this.dateFormatString = this.field.format ?? 'YYYY/MM/DD';
+        this.dateFormatString = this.field().format ?? 'YYYY/MM/DD';
         this.updateCloseButtonLabel();
-        const control = this.group.get(this.field.name);
+        const control = this.group().get(this.field().name);
         if (control) {
             if (typeof control.value === 'string') {
-                //TODO control.setValue(moment(control.value, this.field.format));
+                //TODO control.setValue(moment(control.value, this.field().format));
             }
         }
     }
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     filterDate = (d) => {
-        return this.field.filter ? this.field.filter(d, this.field, this.group) : true;
+        return this.field().filter ? this.field().filter(d, this.field(), this.group()) : true;
     };
     updateCloseButtonLabel() {
-        if (this.field.closeCalendarLabel) {
-            this._intl.closeCalendarLabel = this.field.closeCalendarLabel;
+        if (this.field().closeCalendarLabel) {
+            this._intl.closeCalendarLabel = this.field().closeCalendarLabel;
         }
         this._intl.changes.next();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldDateComponent, isStandalone: true, selector: "sot-field-date", providers: [
             provideLuxonDateAdapter(),
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ac-form-field ac-form-field-date\"\n  [ngClass]=\"field.className\"\n  [formGroup]=\"group\"\n>\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n    <mat-label>\n      {{ field.label }}\n    </mat-label>\n    <input matInput\n           type=\"text\"\n           [id]=\"uuid\"\n           [matDatepicker]=\"picker\"\n           [formControlName]=\"field.name\"\n           [required]=\"!!required\"\n           [readonly]=\"field.readonly\"\n           [min]=\"field.minDate ? field.minDate : null\"\n           [max]=\"field.maxDate ? field.maxDate : null\"\n           [matDatepickerFilter]=\"filterDate\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n    @for (prefix of field.prefixes; track prefix) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (prefix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\n                  (click)=\"buttonAction(prefix)\"\n          >{{prefix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"prefix.label\"></span>\n        }\n      </span>\n    }\n    @for (suffix of field.suffixes; track suffix) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (suffix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\n                  (click)=\"buttonAction(suffix)\"\n          >{{suffix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"suffix.label\"></span>\n        }\n      </span>\n    }\n\n    @if (field.description) {\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n    }\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field.validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ac-form-field ac-form-field-date\"\n  [ngClass]=\"field().className\"\n  [formGroup]=\"group()\"\n>\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\n    <mat-label>\n      {{ field().label }}\n    </mat-label>\n    <input matInput\n           type=\"text\"\n           [id]=\"uuid\"\n           [matDatepicker]=\"picker\"\n           [formControlName]=\"field().name\"\n           [required]=\"!!required\"\n           [readonly]=\"field().readonly\"\n           [min]=\"field().minDate ? field().minDate : null\"\n           [max]=\"field().maxDate ? field().maxDate : null\"\n           [matDatepickerFilter]=\"filterDate\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker [touchUi]=\"!!field().touchUi\"></mat-datepicker>\n\n    @for (prefix of field().prefixes; track prefix) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (prefix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\n                  (click)=\"buttonAction(prefix)\"\n          >{{prefix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"prefix.label\"></span>\n        }\n      </span>\n    }\n    @for (suffix of field().suffixes; track suffix) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (suffix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\n                  (click)=\"buttonAction(suffix)\"\n          >{{suffix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"suffix.label\"></span>\n        }\n      </span>\n    }\n\n    @if (field().description) {\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\n    }\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field().validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sot-field-date', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatDatepickerModule, MatInputModule, MatButtonModule], providers: [
                         provideLuxonDateAdapter(),
-                    ], template: "<div\n  class=\"ac-form-field ac-form-field-date\"\n  [ngClass]=\"field.className\"\n  [formGroup]=\"group\"\n>\n  <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n    <mat-label>\n      {{ field.label }}\n    </mat-label>\n    <input matInput\n           type=\"text\"\n           [id]=\"uuid\"\n           [matDatepicker]=\"picker\"\n           [formControlName]=\"field.name\"\n           [required]=\"!!required\"\n           [readonly]=\"field.readonly\"\n           [min]=\"field.minDate ? field.minDate : null\"\n           [max]=\"field.maxDate ? field.maxDate : null\"\n           [matDatepickerFilter]=\"filterDate\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n    @for (prefix of field.prefixes; track prefix) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (prefix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\n                  (click)=\"buttonAction(prefix)\"\n          >{{prefix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"prefix.label\"></span>\n        }\n      </span>\n    }\n    @for (suffix of field.suffixes; track suffix) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (suffix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\n                  (click)=\"buttonAction(suffix)\"\n          >{{suffix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"suffix.label\"></span>\n        }\n      </span>\n    }\n\n    @if (field.description) {\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n    }\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field.validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"] }]
+                    ], template: "<div\n  class=\"ac-form-field ac-form-field-date\"\n  [ngClass]=\"field().className\"\n  [formGroup]=\"group()\"\n>\n  <mat-form-field [appearance]=\"field().appearance ?? 'fill'\">\n    <mat-label>\n      {{ field().label }}\n    </mat-label>\n    <input matInput\n           type=\"text\"\n           [id]=\"uuid\"\n           [matDatepicker]=\"picker\"\n           [formControlName]=\"field().name\"\n           [required]=\"!!required\"\n           [readonly]=\"field().readonly\"\n           [min]=\"field().minDate ? field().minDate : null\"\n           [max]=\"field().maxDate ? field().maxDate : null\"\n           [matDatepickerFilter]=\"filterDate\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker [touchUi]=\"!!field().touchUi\"></mat-datepicker>\n\n    @for (prefix of field().prefixes; track prefix) {\n      <span class=\"sot-formfield-prefix\" matPrefix>\n        @if (prefix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\n                  (click)=\"buttonAction(prefix)\"\n          >{{prefix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"prefix.label\"></span>\n        }\n      </span>\n    }\n    @for (suffix of field().suffixes; track suffix) {\n      <span class=\"sot-formfield-suffix\" matSuffix>\n        @if (suffix.action) {\n          <button type=\"button\" matButton\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\n                  (click)=\"buttonAction(suffix)\"\n          >{{suffix.label}}</button>\n        } @else {\n          <span [innerHTML]=\"suffix.label\"></span>\n        }\n      </span>\n    }\n\n    @if (field().description) {\n      <mat-hint align=\"start\"> {{ field().description }}</mat-hint>\n    }\n    @if (control && !control.untouched && control.invalid) {\n      <mat-error>\n        @for (validation of field().validations; track validation) {\n          @if (control.hasError(validation.name)) {\n            {{ validation.message }}\n          }\n        }\n      </mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 const components$2 = {
@@ -1389,6 +1389,7 @@ class AcDynamicFieldDirective {
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
     group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
     instancePath = input(...(ngDevMode ? [undefined, { debugName: "instancePath" }] : []));
+    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
     component;
     ngOnChanges(changes) {
         if (!components$2[this.field().type]) {
@@ -1403,14 +1404,15 @@ class AcDynamicFieldDirective {
                     environmentInjector: this.injector
                 });
             }
-            this.component.instance.field = this.field();
-            this.component.instance.group = this.group();
+            this.component.instance.field = this.field;
+            this.component.instance.group = this.group;
             this.component.instance.instancePath = this.instancePath();
             this.component.instance.path = this.path();
+            this.component.instance.data = this.data();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: AcDynamicFieldDirective, isStandalone: true, selector: "[matDynamicField]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, instancePath: { classPropertyName: "instancePath", publicName: "instancePath", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: AcDynamicFieldDirective, isStandalone: true, selector: "[matDynamicField]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, instancePath: { classPropertyName: "instancePath", publicName: "instancePath", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFieldDirective, decorators: [{
             type: Directive,
@@ -1418,7 +1420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     selector: "[matDynamicField]",
                     standalone: true
                 }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], instancePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "instancePath", required: false }] }] } });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], instancePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "instancePath", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class MaterialDynamicFormComponent {
     dynamicFormService = inject(DynamicFormService);
@@ -1432,6 +1434,9 @@ class MaterialDynamicFormComponent {
     get form() {
         return this.dynamicFormService.form;
     }
+    get data() {
+        return this.dynamicFormService.data;
+    }
     get controls() {
         return this.form ? this.form.controls : null;
     }
@@ -1498,11 +1503,11 @@ class MaterialDynamicFormComponent {
         // TODO
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormComponent, isStandalone: true, selector: "sot-material-dynamic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange", formInit: "formInit" }, providers: [DynamicFormService], exportAs: ["dynamicForm"], ngImport: i0, template: "@if (form && config()) {\r\n  <form class=\"dynamic-form\"\r\n        [formGroup]=\"form\"\r\n        (submit)=\"handleSubmit($event)\"\r\n        [ngClass]=\"config()!.className?.form\">\r\n    @if (this.config()!.fields) {\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"config()!.className?.formContent\">\r\n        @for (field of config()!.fields; track field.type + field.name) {\r\n          <div [hidden]=\"!!field.hidden\"\r\n               [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- TODO Revoir l'affichage des erreurs -->\r\n    @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n      <mat-error class=\"dynamic-form-error\">\r\n        @for (validation of config()!.validations!; track validation) {\r\n          @if (form.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n    @if (config()!.buttons) {\r\n      <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n        @for (button of config()!.buttons; track $index) {\r\n          <sot-mat-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-mat-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormComponent, isStandalone: true, selector: "sot-material-dynamic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange", formInit: "formInit" }, providers: [DynamicFormService], exportAs: ["dynamicForm"], ngImport: i0, template: "@if (form && config()) {\r\n  <form class=\"dynamic-form\"\r\n        [formGroup]=\"form\"\r\n        (submit)=\"handleSubmit($event)\"\r\n        [ngClass]=\"config()!.className?.form\">\r\n    @if (this.config()!.fields) {\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"config()!.className?.formContent\">\r\n        @for (field of config()!.fields; track field.type + field.name) {\r\n          <div [hidden]=\"!!field.hidden\"\r\n               [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n              [data]=\"data\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- TODO Revoir l'affichage des erreurs -->\r\n    @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n      <mat-error class=\"dynamic-form-error\">\r\n        @for (validation of config()!.validations!; track validation) {\r\n          @if (form.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n    @if (config()!.buttons) {\r\n      <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n        @for (button of config()!.buttons; track $index) {\r\n          <sot-mat-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-mat-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath", "data"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule, MaterialButton], providers: [DynamicFormService], template: "@if (form && config()) {\r\n  <form class=\"dynamic-form\"\r\n        [formGroup]=\"form\"\r\n        (submit)=\"handleSubmit($event)\"\r\n        [ngClass]=\"config()!.className?.form\">\r\n    @if (this.config()!.fields) {\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"config()!.className?.formContent\">\r\n        @for (field of config()!.fields; track field.type + field.name) {\r\n          <div [hidden]=\"!!field.hidden\"\r\n               [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- TODO Revoir l'affichage des erreurs -->\r\n    @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n      <mat-error class=\"dynamic-form-error\">\r\n        @for (validation of config()!.validations!; track validation) {\r\n          @if (form.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n    @if (config()!.buttons) {\r\n      <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n        @for (button of config()!.buttons; track $index) {\r\n          <sot-mat-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-mat-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"] }]
+            args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule, MaterialButton], providers: [DynamicFormService], template: "@if (form && config()) {\r\n  <form class=\"dynamic-form\"\r\n        [formGroup]=\"form\"\r\n        (submit)=\"handleSubmit($event)\"\r\n        [ngClass]=\"config()!.className?.form\">\r\n    @if (this.config()!.fields) {\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"config()!.className?.formContent\">\r\n        @for (field of config()!.fields; track field.type + field.name) {\r\n          <div [hidden]=\"!!field.hidden\"\r\n               [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n              [data]=\"data\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- TODO Revoir l'affichage des erreurs -->\r\n    @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n      <mat-error class=\"dynamic-form-error\">\r\n        @for (validation of config()!.validations!; track validation) {\r\n          @if (form.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n    @if (config()!.buttons) {\r\n      <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n        @for (button of config()!.buttons; track $index) {\r\n          <sot-mat-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-mat-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], formCancel: [{ type: i0.Output, args: ["formCancel"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }], formInit: [{ type: i0.Output, args: ["formInit"] }] } });
 
 class MaterialDynamicFormModalComponent {
@@ -1514,6 +1519,9 @@ class MaterialDynamicFormModalComponent {
     get form() {
         return this.dynamicFormService.form;
     }
+    get formData() {
+        return this.dynamicFormService.data;
+    }
     constructor() {
         this.dynamicFormService.createForm(this.data.fields, this.data.validations, this.data.updateOn ?? "change", this.data.initialObject);
     }
@@ -1536,14 +1544,14 @@ class MaterialDynamicFormModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormModalComponent, isStandalone: true, selector: "ac-dynamic-form-modal", providers: [DynamicFormService], ngImport: i0, template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-mat-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-mat-button>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormModalComponent, isStandalone: true, selector: "ac-dynamic-form-modal", providers: [DynamicFormService], ngImport: i0, template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n              [data]=\"formData\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-mat-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-mat-button>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath", "data"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ac-dynamic-form-modal", standalone: true, imports: [NgClass, ReactiveFormsModule, MatIconModule, MatButtonModule, MatDialogModule, AcDynamicFieldDirective, MaterialButton], providers: [DynamicFormService], template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-mat-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-mat-button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: "ac-dynamic-form-modal", standalone: true, imports: [NgClass, ReactiveFormsModule, MatIconModule, MatButtonModule, MatDialogModule, AcDynamicFieldDirective, MaterialButton], providers: [DynamicFormService], template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n              [data]=\"formData\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-mat-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-mat-button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
-class AcDynamicFormStepperComponent {
+class MaterialDynamicFormStepperComponent {
     dynamicFormService = inject(DynamicFormService);
     destroyRef = inject(DestroyRef);
     cdr = inject(ChangeDetectorRef);
@@ -1558,6 +1566,9 @@ class AcDynamicFormStepperComponent {
     get form() {
         return this.dynamicFormService.form;
     }
+    get data() {
+        return this.dynamicFormService.data;
+    }
     get controls() {
         return this.form ? this.form.controls : null;
     }
@@ -1624,24 +1635,24 @@ class AcDynamicFormStepperComponent {
         this.stepper.reset();
         this.formCancel.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFormStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDynamicFormStepperComponent, isStandalone: true, selector: "sot-material-dynamic-form-stepper", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormStepperComponent, isStandalone: true, selector: "sot-material-dynamic-form-stepper", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange" }, providers: [
             DynamicFormService, {
                 provide: STEPPER_GLOBAL_OPTIONS,
                 useValue: { showError: true, displayDefaultIndicatorType: false },
             }
-        ], viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], exportAs: ["dynamicFormStepper"], usesOnChanges: true, ngImport: i0, template: "@if (form) {\r\n  <form [formGroup]=\"form\"\r\n        class=\"dynamic-form-stepper\"\r\n        [ngClass]=\"config().className\"\r\n  >\r\n    <mat-stepper #stepper\r\n                 [linear]=\"config().linear\"\r\n                 [orientation]=\"(stepperOrientation | async)!\">\r\n      @for (step of config().steps; track step.name; let stepFirst = $first; let stepLast = $last) {\r\n        <mat-step [stepControl]=\"form.controls[step.name]\"\r\n                  [formGroup]=\"getSubGroup(step.name)\"\r\n                  [errorMessage]=\"step.errorMessage ?? ''\">\r\n          <ng-template matStepLabel>{{ step.label }}</ng-template>\r\n          <ng-template matStepContent>\r\n            <div class=\"dynamic-form-stepper-content\"\r\n                 [ngClass]=\"config().className?.formContent\">\r\n              @for (field of step.fields; track field.name) {\r\n                <div [hidden]=\"!!field.hidden\" [ngClass]=\"field.hostClassName\">\r\n                  <ng-container\r\n                    matDynamicField\r\n                    [path]=\"field.name\"\r\n                    [type]=\"field.type\"\r\n                    [field]=\"field\"\r\n                    [group]=\"getSubGroup(step.name)\"\r\n                  >\r\n                  </ng-container>\r\n                </div>\r\n              }\r\n            </div>\r\n            @if (config()!.buttons) {\r\n              <div class=\"dynamic-form-stepper-buttons\" [ngClass]=\"config().className?.formButtons\">\r\n                @for (button of config().buttons; track $index) {\r\n\r\n                  @if (button.type === 'previous' && !stepFirst) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperPrevious\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'next' && !stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperNext\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if ((button.type === 'submit' || button.type === 'reset') && stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'button') {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mat-step>\r\n      }\r\n    </mat-stepper>\r\n  </form>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;flex:1}.dynamic-form-stepper-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i4$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i4$1.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i4$1.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i4$1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+        ], viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], exportAs: ["dynamicFormStepper"], usesOnChanges: true, ngImport: i0, template: "@if (form) {\r\n  <form [formGroup]=\"form\"\r\n        class=\"dynamic-form-stepper\"\r\n        [ngClass]=\"config().className\"\r\n  >\r\n    <mat-stepper #stepper\r\n                 [linear]=\"config().linear\"\r\n                 [orientation]=\"(stepperOrientation | async)!\">\r\n      @for (step of config().steps; track step.name; let stepFirst = $first; let stepLast = $last) {\r\n        <mat-step [stepControl]=\"form.controls[step.name]\"\r\n                  [formGroup]=\"getSubGroup(step.name)\"\r\n                  [errorMessage]=\"step.errorMessage ?? ''\">\r\n          <ng-template matStepLabel>{{ step.label }}</ng-template>\r\n          <ng-template matStepContent>\r\n            <div class=\"dynamic-form-stepper-content\"\r\n                 [ngClass]=\"config().className?.formContent\">\r\n              @for (field of step.fields; track field.name) {\r\n                <div [hidden]=\"!!field.hidden\" [ngClass]=\"field.hostClassName\">\r\n                  <ng-container\r\n                    matDynamicField\r\n                    [path]=\"field.name\"\r\n                    [type]=\"field.type\"\r\n                    [field]=\"field\"\r\n                    [group]=\"getSubGroup(step.name)\"\r\n                    [data]=\"data\"\r\n                  >\r\n                  </ng-container>\r\n                </div>\r\n              }\r\n            </div>\r\n            @if (config()!.buttons) {\r\n              <div class=\"dynamic-form-stepper-buttons\" [ngClass]=\"config().className?.formButtons\">\r\n                @for (button of config().buttons; track $index) {\r\n\r\n                  @if (button.type === 'previous' && !stepFirst) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperPrevious\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'next' && !stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperNext\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if ((button.type === 'submit' || button.type === 'reset') && stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'button') {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mat-step>\r\n      }\r\n    </mat-stepper>\r\n  </form>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;flex:1}.dynamic-form-stepper-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath", "data"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i4$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i4$1.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i4$1.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i4$1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFormStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormStepperComponent, decorators: [{
             type: Component,
-            args: [{ exportAs: "dynamicFormStepper", selector: "sot-material-dynamic-form-stepper", standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule, MatError,
-                        MatIconModule, MatButtonModule, MatSidenavModule, MatListModule, MatTab, MatTabLabel,
+            args: [{ exportAs: "dynamicFormStepper", selector: "sot-material-dynamic-form-stepper", standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule,
+                        MatIconModule, MatButtonModule, MatSidenavModule, MatListModule,
                         MatStepperModule, AsyncPipe, MatStepperPrevious, MatStepperNext, MatIcon], providers: [
                         DynamicFormService, {
                             provide: STEPPER_GLOBAL_OPTIONS,
                             useValue: { showError: true, displayDefaultIndicatorType: false },
                         }
-                    ], template: "@if (form) {\r\n  <form [formGroup]=\"form\"\r\n        class=\"dynamic-form-stepper\"\r\n        [ngClass]=\"config().className\"\r\n  >\r\n    <mat-stepper #stepper\r\n                 [linear]=\"config().linear\"\r\n                 [orientation]=\"(stepperOrientation | async)!\">\r\n      @for (step of config().steps; track step.name; let stepFirst = $first; let stepLast = $last) {\r\n        <mat-step [stepControl]=\"form.controls[step.name]\"\r\n                  [formGroup]=\"getSubGroup(step.name)\"\r\n                  [errorMessage]=\"step.errorMessage ?? ''\">\r\n          <ng-template matStepLabel>{{ step.label }}</ng-template>\r\n          <ng-template matStepContent>\r\n            <div class=\"dynamic-form-stepper-content\"\r\n                 [ngClass]=\"config().className?.formContent\">\r\n              @for (field of step.fields; track field.name) {\r\n                <div [hidden]=\"!!field.hidden\" [ngClass]=\"field.hostClassName\">\r\n                  <ng-container\r\n                    matDynamicField\r\n                    [path]=\"field.name\"\r\n                    [type]=\"field.type\"\r\n                    [field]=\"field\"\r\n                    [group]=\"getSubGroup(step.name)\"\r\n                  >\r\n                  </ng-container>\r\n                </div>\r\n              }\r\n            </div>\r\n            @if (config()!.buttons) {\r\n              <div class=\"dynamic-form-stepper-buttons\" [ngClass]=\"config().className?.formButtons\">\r\n                @for (button of config().buttons; track $index) {\r\n\r\n                  @if (button.type === 'previous' && !stepFirst) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperPrevious\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'next' && !stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperNext\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if ((button.type === 'submit' || button.type === 'reset') && stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'button') {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mat-step>\r\n      }\r\n    </mat-stepper>\r\n  </form>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;flex:1}.dynamic-form-stepper-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}\n"] }]
+                    ], template: "@if (form) {\r\n  <form [formGroup]=\"form\"\r\n        class=\"dynamic-form-stepper\"\r\n        [ngClass]=\"config().className\"\r\n  >\r\n    <mat-stepper #stepper\r\n                 [linear]=\"config().linear\"\r\n                 [orientation]=\"(stepperOrientation | async)!\">\r\n      @for (step of config().steps; track step.name; let stepFirst = $first; let stepLast = $last) {\r\n        <mat-step [stepControl]=\"form.controls[step.name]\"\r\n                  [formGroup]=\"getSubGroup(step.name)\"\r\n                  [errorMessage]=\"step.errorMessage ?? ''\">\r\n          <ng-template matStepLabel>{{ step.label }}</ng-template>\r\n          <ng-template matStepContent>\r\n            <div class=\"dynamic-form-stepper-content\"\r\n                 [ngClass]=\"config().className?.formContent\">\r\n              @for (field of step.fields; track field.name) {\r\n                <div [hidden]=\"!!field.hidden\" [ngClass]=\"field.hostClassName\">\r\n                  <ng-container\r\n                    matDynamicField\r\n                    [path]=\"field.name\"\r\n                    [type]=\"field.type\"\r\n                    [field]=\"field\"\r\n                    [group]=\"getSubGroup(step.name)\"\r\n                    [data]=\"data\"\r\n                  >\r\n                  </ng-container>\r\n                </div>\r\n              }\r\n            </div>\r\n            @if (config()!.buttons) {\r\n              <div class=\"dynamic-form-stepper-buttons\" [ngClass]=\"config().className?.formButtons\">\r\n                @for (button of config().buttons; track $index) {\r\n\r\n                  @if (button.type === 'previous' && !stepFirst) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperPrevious\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'next' && !stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            matStepperNext\r\n                            type=\"button\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if ((button.type === 'submit' || button.type === 'reset') && stepLast) {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  } @else if (button.type === 'button') {\r\n                    <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n                            [type]=\"button.type\"\r\n                            [ngClass]=\"button.className\"\r\n                            (click)=\"onClickButton(button)\"\r\n                            [title]=\"button.title ? button.title : ''\"\r\n                            [attr.aria-label]=\"button.ariaLabel\"\r\n                    >\r\n                      @if (button.matIcon) {\r\n                        <mat-icon>\r\n                          {{ button.matIcon }}\r\n                        </mat-icon>\r\n                      }\r\n                      {{ button.label }}\r\n                    </button>\r\n                  }\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mat-step>\r\n      }\r\n    </mat-stepper>\r\n  </form>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;flex:1}.dynamic-form-stepper-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}\n"] }]
         }], propDecorators: { stepper: [{
                 type: ViewChild,
                 args: ['stepper']
@@ -1649,33 +1660,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class DsfrDivTextComponent extends AbstractFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrDivTextComponent, isStandalone: true, selector: "sot-dsfr-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrDivTextComponent, isStandalone: true, selector: "sot-dsfr-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field().className\">\n  <div [innerHTML]=\"field().label\"></div>\n  @if(field().description) {\n    <p [innerHTML]=\"field().description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDivTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n" }]
+            args: [{ selector: 'sot-dsfr-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field().className\">\n  <div [innerHTML]=\"field().label\"></div>\n  @if(field().description) {\n    <p [innerHTML]=\"field().description\"></p>\n  }\n</div>\n" }]
         }] });
 
 class DsfrFieldCheckboxComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldCheckboxComponent, isStandalone: true, selector: "sot-dsfr-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-checkbox-group\"\r\n    [ngClass]=\"{\r\n        'fr-checkbox-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-checkbox-group--valid': control && !control.untouched && control.valid,\r\n        'fr-checkbox-group--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid\"\r\n      [ngClass]=\"{\r\n          'fr-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-checkbox--valid': control && !control.untouched && control.valid,\r\n          'fr-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldCheckboxComponent, isStandalone: true, selector: "sot-dsfr-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-checkbox-group\"\r\n    [ngClass]=\"{\r\n        'fr-checkbox-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-checkbox-group--valid': control && !control.untouched && control.valid,\r\n        'fr-checkbox-group--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [formControlName]=\"field().name\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid\"\r\n      [ngClass]=\"{\r\n          'fr-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-checkbox--valid': control && !control.untouched && control.valid,\r\n          'fr-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-checkbox-group\"\r\n    [ngClass]=\"{\r\n        'fr-checkbox-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-checkbox-group--valid': control && !control.untouched && control.valid,\r\n        'fr-checkbox-group--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid\"\r\n      [ngClass]=\"{\r\n          'fr-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-checkbox--valid': control && !control.untouched && control.valid,\r\n          'fr-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"] }]
+            args: [{ selector: 'sot-dsfr-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-checkbox-group\"\r\n    [ngClass]=\"{\r\n        'fr-checkbox-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-checkbox-group--valid': control && !control.untouched && control.valid,\r\n        'fr-checkbox-group--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [formControlName]=\"field().name\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid\"\r\n      [ngClass]=\"{\r\n          'fr-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-checkbox--valid': control && !control.untouched && control.valid,\r\n          'fr-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"] }]
         }] });
 
 class DsfrFieldInputComponent extends AbstractControlFieldComponent {
     inputType = 'text';
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     ngOnInit() {
         super.ngOnInit();
-        this.inputType = this.field.inputType ?? 'text';
-        const control = this.group.get(this.field.name);
+        this.inputType = this.field().inputType ?? 'text';
+        const control = this.group().get(this.field().name);
         if (control) {
             control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
                 if (value?.length == 0) {
@@ -1685,47 +1696,43 @@ class DsfrFieldInputComponent extends AbstractControlFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldInputComponent, isStandalone: true, selector: "sot-dsfr-field-input", usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-input\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled) || field.readonly,\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldInputComponent, isStandalone: true, selector: "sot-dsfr-field-input", usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-input\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled) || field().readonly,\r\n          }\"\r\n        [type]=\"field().inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [readonly]=\"field().readonly\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div class=\"form-field-input\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled) || field.readonly,\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-dsfr-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div class=\"form-field-input\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled) || field().readonly,\r\n          }\"\r\n        [type]=\"field().inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [readonly]=\"field().readonly\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 class DsfrGroupComponent extends AbstractControlFieldComponent {
     get subGroup() {
-        return this.group.controls[this.field.name];
+        return this.group().controls[this.field().name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrGroupComponent, isStandalone: true, selector: "sot-dsfr-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'fr-accordion': field.accordion,\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + field.name\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + field.name\">\n        @if (field.description) {\n          <p class=\"fr-hint-text\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div *ngTemplateOutlet=\"groupFields\"></div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"\">\n    @for (f of field.fields; track f.type + f.name) {\n      <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n        <ng-container dsfrDynamicField\n                      [type]=\"f.type\"\n                      [path]=\"path + '.' + f.name\"\n                      [field]=\"f\"\n                      [group]=\"subGroup\"\n                      [instancePath]=\"instancePath\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrGroupComponent, isStandalone: true, selector: "sot-dsfr-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'fr-accordion': field().accordion,\n      }\"\n  >\n    @if (field().accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'group-content-' + field().name\">\n          {{ field().label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'group-content-' + field().name\">\n        @if (field().description) {\n          <p class=\"fr-hint-text\">{{ field().description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n    } @else {\n      <legend [ngClass]=\"field().labelClassName\">\n        {{ field().label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"fr-hint-text\">{{ field().description }}</span>\n        }\n      </legend>\n      <div *ngTemplateOutlet=\"groupFields\"></div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"\">\n    @for (f of field().fields; track f.type + f.name) {\n      <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n        <ng-container dsfrDynamicField\n                      [type]=\"f.type\"\n                      [path]=\"path + '.' + f.name\"\n                      [field]=\"f\"\n                      [group]=\"subGroup\"\n                      [instancePath]=\"instancePath\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field().validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sot-dsfr-group', standalone: true, imports: [
                         forwardRef(() => DsfrDynamicFieldDirective),
                         NgClass,
-                        MatAccordion,
-                        MatExpansionPanel,
-                        MatExpansionPanelHeader,
-                        MatExpansionPanelTitle,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'fr-accordion': field.accordion,\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + field.name\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + field.name\">\n        @if (field.description) {\n          <p class=\"fr-hint-text\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div *ngTemplateOutlet=\"groupFields\"></div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"\">\n    @for (f of field.fields; track f.type + f.name) {\n      <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n        <ng-container dsfrDynamicField\n                      [type]=\"f.type\"\n                      [path]=\"path + '.' + f.name\"\n                      [field]=\"f\"\n                      [group]=\"subGroup\"\n                      [instancePath]=\"instancePath\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'fr-accordion': field().accordion,\n      }\"\n  >\n    @if (field().accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'group-content-' + field().name\">\n          {{ field().label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'group-content-' + field().name\">\n        @if (field().description) {\n          <p class=\"fr-hint-text\">{{ field().description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n    } @else {\n      <legend [ngClass]=\"field().labelClassName\">\n        {{ field().label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"fr-hint-text\">{{ field().description }}</span>\n        }\n      </legend>\n      <div *ngTemplateOutlet=\"groupFields\"></div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"\">\n    @for (f of field().fields; track f.type + f.name) {\n      <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n        <ng-container dsfrDynamicField\n                      [type]=\"f.type\"\n                      [path]=\"path + '.' + f.name\"\n                      [field]=\"f\"\n                      [group]=\"subGroup\"\n                      [instancePath]=\"instancePath\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field().validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
         }] });
 
 class DsfrArrayComponent extends AbstractControlFieldComponent {
     dynamicService = inject(DynamicFormService);
     ref = inject(ChangeDetectorRef);
     get array() {
-        return this.group.controls[this.field.name];
+        return this.group().controls[this.field().name];
     }
     constructor() {
         super();
     }
     addItem() {
-        const i = this.field.instances.length > 0 ? this.field.instances[this.field.instances.length - 1].number + 1 : 0;
-        const fields = _.cloneDeep(this.field.field.fields);
+        const i = this.field().instances.length > 0 ? this.field().instances[this.field().instances.length - 1].number + 1 : 0;
+        const fields = structuredClone(this.field().field.fields);
         const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null, null);
-        this.field.instances.push({
+        this.field().instances.push({
             number: i,
             group: grp,
             fields
@@ -1736,7 +1743,7 @@ class DsfrArrayComponent extends AbstractControlFieldComponent {
     deleteItem(index, inst) {
         /*
         TODO
-        this.field.instances!.splice(index, 1);
+        this.field().instances!.splice(index, 1);
         for (const key of this.dynamicService.pathFieldMap.keys()) {
           if (key.startsWith(`${this.path}[${inst.number}]`)) {
             this.dynamicFormService.pathFieldMap.delete(key);
@@ -1748,7 +1755,7 @@ class DsfrArrayComponent extends AbstractControlFieldComponent {
         this.ref.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrArrayComponent, isStandalone: true, selector: "sot-dsfr-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{'fr-accordion': field.accordion}\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container dsfrDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"fr-btn\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"fr-btn\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"fr-messages-group\"\n        [attr.id]=\"'fr-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"fr-message fr-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrArrayComponent, isStandalone: true, selector: "sot-dsfr-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{'fr-accordion': field().accordion}\"\n  >\n    @if (field().accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field().label }}\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field().description) {\n          <span class=\"fr-hint-text\">{{ field().description }}</span>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend [ngClass]=\"field().labelClassName\">\n        {{ field().label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"fr-hint-text\">{{ field().description }}</span>\n        }\n      </legend>\n      <div [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group()\">\n    <div [formArrayName]=\"field().name\">\n      @for (inst of field().instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field().elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field().itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field().elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container dsfrDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field().disabled && (!field().minNbRow || field().minNbRow! < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"fr-btn\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field().deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field().disabled && (!field().maxNbRow || field().maxNbRow! > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"fr-btn\"\n                  (click)=\"addItem()\"\n          >\n            {{ field().addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"fr-messages-group\"\n        [attr.id]=\"'fr-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field().validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"fr-message fr-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrArrayComponent, decorators: [{
             type: Component,
@@ -1759,12 +1766,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatCardModule,
                         ReactiveFormsModule,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{'fr-accordion': field.accordion}\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container dsfrDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"fr-btn\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"fr-btn\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"fr-messages-group\"\n        [attr.id]=\"'fr-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"fr-message fr-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{'fr-accordion': field().accordion}\"\n  >\n    @if (field().accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field().label }}\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field().description) {\n          <span class=\"fr-hint-text\">{{ field().description }}</span>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend [ngClass]=\"field().labelClassName\">\n        {{ field().label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"fr-hint-text\">{{ field().description }}</span>\n        }\n      </legend>\n      <div [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group()\">\n    <div [formArrayName]=\"field().name\">\n      @for (inst of field().instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field().elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field().itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field().elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container dsfrDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field().disabled && (!field().minNbRow || field().minNbRow! < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"fr-btn\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field().deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field().disabled && (!field().maxNbRow || field().maxNbRow! > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"fr-btn\"\n                  (click)=\"addItem()\"\n          >\n            {{ field().addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"fr-messages-group\"\n        [attr.id]=\"'fr-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field().validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"fr-message fr-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class DsfrRowComponent extends AbstractFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrRowComponent, isStandalone: true, selector: "sot-dsfr-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        dsfrDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrRowComponent, isStandalone: true, selector: "sot-dsfr-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field().className\">\n  @for (f of field().fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        dsfrDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group()\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrRowComponent, decorators: [{
             type: Component,
@@ -1773,7 +1780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgClass,
                         forwardRef(() => DsfrDynamicFieldDirective),
                         DsfrDynamicFieldDirective
-                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        dsfrDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field().className\">\n  @for (f of field().fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        dsfrDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group()\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
         }] });
 
 let PasswordValidators$1 = class PasswordValidators {
@@ -1795,16 +1802,16 @@ class DsfrFieldPasswordComponent extends AbstractControlFieldComponent {
     iconErrorLabel;
     iconSuccessLabel;
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     ngOnInit() {
         super.ngOnInit();
-        this.showPasswordLabel = this.field.labels?.showPassword ?? "Show password";
-        this.hidePasswordLabel = this.field.labels?.hidePassword ?? "Hide password";
-        this.iconSuccessLabel = this.field.labels?.iconSuccess ?? "Success";
-        this.iconErrorLabel = this.field.labels?.iconError ?? "Error";
+        this.showPasswordLabel = this.field().labels?.showPassword ?? "Show password";
+        this.hidePasswordLabel = this.field().labels?.hidePassword ?? "Hide password";
+        this.iconSuccessLabel = this.field().labels?.iconSuccess ?? "Success";
+        this.iconErrorLabel = this.field().labels?.iconError ?? "Error";
         if (this.control) {
             this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
                 if (value?.length == 0) {
@@ -1836,29 +1843,29 @@ class DsfrFieldPasswordComponent extends AbstractControlFieldComponent {
         return this.control.value && !this.control.hasError("requiresSpecialChars");
     }
     setPasswordValidators() {
-        if (this.field.minlength) {
-            this.control?.addValidators(Validators.minLength(this.field.minlength));
+        if (this.field().minlength) {
+            this.control?.addValidators(Validators.minLength(this.field().minlength));
         }
-        if (this.field.maxlength) {
-            this.control?.addValidators(Validators.maxLength(this.field.maxlength));
+        if (this.field().maxlength) {
+            this.control?.addValidators(Validators.maxLength(this.field().maxlength));
         }
-        if (this.field.requiresDigit) {
+        if (this.field().requiresDigit) {
             this.control?.addValidators(PasswordValidators$1.patternValidator(/(?=.*[0-9])/, {
                 requiresDigit: true
             }));
         }
-        if (this.field.requiresUppercase) {
+        if (this.field().requiresUppercase) {
             this.control?.addValidators(PasswordValidators$1.patternValidator(/(?=.*[A-Z])/, {
                 requiresUppercase: true
             }));
         }
-        if (this.field.requiresLowercase) {
+        if (this.field().requiresLowercase) {
             this.control?.addValidators(PasswordValidators$1.patternValidator(/(?=.*[a-z])/, {
                 requiresLowercase: true
             }));
         }
-        if (this.field.requiresSpecialChars) {
-            const chars = this.field.specialChars?.join("") ?? "$@^!%*?&";
+        if (this.field().requiresSpecialChars) {
+            const chars = this.field().specialChars?.join("") ?? "$@^!%*?&";
             const regex = "(?=.*[" + chars + "])";
             this.control?.addValidators(PasswordValidators$1.patternValidator(new RegExp(regex), {
                 requiresSpecialChars: true
@@ -1866,69 +1873,70 @@ class DsfrFieldPasswordComponent extends AbstractControlFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldPasswordComponent, isStandalone: true, selector: "sot-dsfr-field-password", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"fr-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldPasswordComponent, isStandalone: true, selector: "sot-dsfr-field-password", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"fr-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field().minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"fr-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"] }]
+            args: [{ selector: 'sot-dsfr-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"fr-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field().minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field().labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"] }]
         }] });
 
 class DsfrFieldRadioButtonComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldRadioButtonComponent, isStandalone: true, selector: "sot-dsfr-field-radio-button", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"form-field-radio\"\r\n  [hidden]=\"field.hidden\"\r\n  [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"fr-fieldset\"\r\n    [ngClass]=\"{\r\n      'fr-fieldset--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'fr-fieldset--valid': control && !control.untouched && control.valid,\r\n      'fr-fieldset--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"fr-fieldset__legend--regular fr-fieldset__legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if(field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"fr-fieldset__element\"\r\n          [ngClass]=\"{ 'fr-fieldset__element--inline': !field.verticalAlign }\">\r\n          <div class=\"fr-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"/>\r\n            <label\r\n              class=\"fr-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              @if (field.descriptionKey) {\r\n                <span class=\"fr-hint-text\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <div\r\n        class=\"fr-messages-group\"\r\n        [attr.id]=\"'text-radio-' + uuid + '-error'\"\r\n        aria-live=\"polite\">\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            <p class=\"fr-error-text\">\r\n              {{ validation.message }}\r\n            </p>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatIconModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldRadioButtonComponent, isStandalone: true, selector: "sot-dsfr-field-radio-button", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"form-field-radio\"\r\n  [hidden]=\"field().hidden\"\r\n  [ngClass]=\"field().className\">\r\n  <fieldset\r\n    class=\"fr-fieldset\"\r\n    [ngClass]=\"{\r\n      'fr-fieldset--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'fr-fieldset--valid': control && !control.untouched && control.valid,\r\n      'fr-fieldset--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group()\">\r\n    <legend\r\n      class=\"fr-fieldset__legend--regular fr-fieldset__legend\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </legend>\r\n    @if(field().options) {\r\n      @for (item of field().options; track item; let i = $index) {\r\n        <div\r\n          class=\"fr-fieldset__element\"\r\n          [ngClass]=\"{ 'fr-fieldset__element--inline': !field().verticalAlign }\">\r\n          <div class=\"fr-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field().name\"\r\n              [attr.disabled]=\"field().disabledKey && !!item[field().disabledKey!] ? true : undefined\"/>\r\n            <label\r\n              class=\"fr-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              {{ field().labelKey ? item[field().labelKey!] : item }}\r\n              @if (field().descriptionKey) {\r\n                <span class=\"fr-hint-text\">{{ item[field().descriptionKey!] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <div\r\n        class=\"fr-messages-group\"\r\n        [attr.id]=\"'text-radio-' + uuid + '-error'\"\r\n        aria-live=\"polite\">\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            <p class=\"fr-error-text\">\r\n              {{ validation.message }}\r\n            </p>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatIconModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass, MatRadioModule, MatTooltipModule, MatIconModule], template: "<div\r\n  class=\"form-field-radio\"\r\n  [hidden]=\"field.hidden\"\r\n  [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"fr-fieldset\"\r\n    [ngClass]=\"{\r\n      'fr-fieldset--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'fr-fieldset--valid': control && !control.untouched && control.valid,\r\n      'fr-fieldset--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"fr-fieldset__legend--regular fr-fieldset__legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if(field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"fr-fieldset__element\"\r\n          [ngClass]=\"{ 'fr-fieldset__element--inline': !field.verticalAlign }\">\r\n          <div class=\"fr-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"/>\r\n            <label\r\n              class=\"fr-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              @if (field.descriptionKey) {\r\n                <span class=\"fr-hint-text\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <div\r\n        class=\"fr-messages-group\"\r\n        [attr.id]=\"'text-radio-' + uuid + '-error'\"\r\n        aria-live=\"polite\">\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            <p class=\"fr-error-text\">\r\n              {{ validation.message }}\r\n            </p>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'sot-dsfr-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass, MatRadioModule, MatTooltipModule, MatIconModule], template: "<div\r\n  class=\"form-field-radio\"\r\n  [hidden]=\"field().hidden\"\r\n  [ngClass]=\"field().className\">\r\n  <fieldset\r\n    class=\"fr-fieldset\"\r\n    [ngClass]=\"{\r\n      'fr-fieldset--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'fr-fieldset--valid': control && !control.untouched && control.valid,\r\n      'fr-fieldset--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group()\">\r\n    <legend\r\n      class=\"fr-fieldset__legend--regular fr-fieldset__legend\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </legend>\r\n    @if(field().options) {\r\n      @for (item of field().options; track item; let i = $index) {\r\n        <div\r\n          class=\"fr-fieldset__element\"\r\n          [ngClass]=\"{ 'fr-fieldset__element--inline': !field().verticalAlign }\">\r\n          <div class=\"fr-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field().name\"\r\n              [attr.disabled]=\"field().disabledKey && !!item[field().disabledKey!] ? true : undefined\"/>\r\n            <label\r\n              class=\"fr-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              {{ field().labelKey ? item[field().labelKey!] : item }}\r\n              @if (field().descriptionKey) {\r\n                <span class=\"fr-hint-text\">{{ item[field().descriptionKey!] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <div\r\n        class=\"fr-messages-group\"\r\n        [attr.id]=\"'text-radio-' + uuid + '-error'\"\r\n        aria-live=\"polite\">\r\n        @for (validation of field().validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            <p class=\"fr-error-text\">\r\n              {{ validation.message }}\r\n            </p>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
         }] });
 
 class AcFieldSelectComponent extends AbstractControlFieldComponent {
     options = [];
     ngOnInit() {
         super.ngOnInit();
-        if (isObservable(this.field.options)) {
-            this.field.options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
+        const options = this.field().options;
+        if (isObservable(options)) {
+            options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
                 this.options = options;
             });
         }
         else {
-            this.options = this.field.options;
+            this.options = options;
         }
     }
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldSelectComponent, isStandalone: true, selector: "sot-dsfr-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-select-group\"\r\n    [ngClass]=\"{\r\n        'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-select-group--valid': control && !control.untouched && control.valid,\r\n        'fr-select-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"fr-select\"\r\n        [multiple]=\"field.multiple\"\r\n        [ngClass]=\"{\r\n          'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-select--valid': control && !control.untouched && control.valid,\r\n          'fr-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field.name\">\r\n        @if (field.resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field.resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field.options) {\r\n          @if (field.groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n                @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n                  @for (item of group[field.groupOptionsKey]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                      [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                      {{ field.labelKey ? item[field.labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldSelectComponent, isStandalone: true, selector: "sot-dsfr-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-select-group\"\r\n    [ngClass]=\"{\r\n        'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-select-group--valid': control && !control.untouched && control.valid,\r\n        'fr-select-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"fr-select\"\r\n        [multiple]=\"field().multiple\"\r\n        [ngClass]=\"{\r\n          'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-select--valid': control && !control.untouched && control.valid,\r\n          'fr-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field().name\">\r\n        @if (field().resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field().resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field().options) {\r\n          @if (field().groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field().groupLabelKey ? group[field().groupLabelKey!] : ''\">\r\n                @if (field().groupOptionsKey && group[field().groupOptionsKey!]) {\r\n                  @for (item of group[field().groupOptionsKey!]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                      [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                      {{ field().labelKey ? item[field().labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                {{ field().labelKey ? item[field().labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatSelectModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-select-group\"\r\n    [ngClass]=\"{\r\n        'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-select-group--valid': control && !control.untouched && control.valid,\r\n        'fr-select-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"fr-select\"\r\n        [multiple]=\"field.multiple\"\r\n        [ngClass]=\"{\r\n          'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-select--valid': control && !control.untouched && control.valid,\r\n          'fr-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field.name\">\r\n        @if (field.resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field.resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field.options) {\r\n          @if (field.groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n                @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n                  @for (item of group[field.groupOptionsKey]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                      [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                      {{ field.labelKey ? item[field.labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-dsfr-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-select-group\"\r\n    [ngClass]=\"{\r\n        'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-select-group--valid': control && !control.untouched && control.valid,\r\n        'fr-select-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      {{ field().label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"fr-select\"\r\n        [multiple]=\"field().multiple\"\r\n        [ngClass]=\"{\r\n          'fr-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-select--valid': control && !control.untouched && control.valid,\r\n          'fr-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field().name\">\r\n        @if (field().resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field().resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field().options) {\r\n          @if (field().groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field().groupLabelKey ? group[field().groupLabelKey!] : ''\">\r\n                @if (field().groupOptionsKey && group[field().groupOptionsKey!]) {\r\n                  @for (item of group[field().groupOptionsKey!]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                      [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                      {{ field().labelKey ? item[field().labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                {{ field().labelKey ? item[field().labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 class DsfrFieldTextareaComponent extends AbstractControlFieldComponent {
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldTextareaComponent, isStandalone: true, selector: "sot-dsfr-field-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"fr-input-group\"\n    [ngClass]=\"{\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\n        'fr-input-group--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"fr-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      {{ field.label }}\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\" matPrefix>\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"fr-input\"\n        [ngClass]=\"{\n          'fr-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'fr-input--valid': control && !control.untouched && control.valid ,\n          'fr-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"fr-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"fr-error-text\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldTextareaComponent, isStandalone: true, selector: "sot-dsfr-field-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field().className\">\n  <div\n    [formGroup]=\"group()\"\n    class=\"fr-input-group\"\n    [ngClass]=\"{\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\n        'fr-input-group--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"fr-label\"\n      [ngClass]=\"field().labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      {{ field().label }}\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field().description) {\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\n      }\n    </label>\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\n      @for (prefix of field().prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\" matPrefix>\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"fr-input\"\n        [ngClass]=\"{\n          'fr-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'fr-input--valid': control && !control.untouched && control.valid ,\n          'fr-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field().name\"\n        [required]=\"!!required\"\n        [readonly]=\"field().readonly\"\n        [rows]=\"field().rows\"\n        [maxlength]=\"field().maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field().suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"fr-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field().validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"fr-error-text\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"fr-input-group\"\n    [ngClass]=\"{\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\n        'fr-input-group--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"fr-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      {{ field.label }}\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\" matPrefix>\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"fr-input\"\n        [ngClass]=\"{\n          'fr-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'fr-input--valid': control && !control.untouched && control.valid ,\n          'fr-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"fr-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"fr-error-text\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-dsfr-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field().className\">\n  <div\n    [formGroup]=\"group()\"\n    class=\"fr-input-group\"\n    [ngClass]=\"{\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\n        'fr-input-group--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"fr-label\"\n      [ngClass]=\"field().labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      {{ field().label }}\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field().description) {\n        <span class=\"fr-hint-text\">{{ field().description }}</span>\n      }\n    </label>\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\n      @for (prefix of field().prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\" matPrefix>\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"fr-input\"\n        [ngClass]=\"{\n          'fr-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'fr-input--valid': control && !control.untouched && control.valid ,\n          'fr-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field().name\"\n        [required]=\"!!required\"\n        [readonly]=\"field().readonly\"\n        [rows]=\"field().rows\"\n        [maxlength]=\"field().maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field().suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"fr-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field().validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"fr-error-text\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 class DsfrFieldToggleComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldToggleComponent, isStandalone: true, selector: "sot-dsfr-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"fr-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"fr-toggle__input\"\r\n        [attr.id]=\"'toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"/>\r\n      <label\r\n        class=\"fr-toggle__label\"\r\n        [attr.for]=\"'toggle-' + uuid\"\r\n        [attr.data-fr-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-fr-unchecked-label]=\"field.uncheckedLabel\"\r\n      >{{ field.label }}\r\n        @if (required) {\r\n          <span class=\"red\">*</span>\r\n        }\r\n      </label>\r\n      <p\r\n        class=\"fr-hint-text\">\r\n        {{ field.description }}\r\n      </p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldToggleComponent, isStandalone: true, selector: "sot-dsfr-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"fr-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"fr-toggle__input\"\r\n        [attr.id]=\"'toggle-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field().disabled\"/>\r\n      <label\r\n        class=\"fr-toggle__label\"\r\n        [attr.for]=\"'toggle-' + uuid\"\r\n        [attr.data-fr-checked-label]=\"field().checkedLabel\"\r\n        [attr.data-fr-unchecked-label]=\"field().uncheckedLabel\"\r\n      >{{ field().label }}\r\n        @if (required) {\r\n          <span class=\"red\">*</span>\r\n        }\r\n      </label>\r\n      <p\r\n        class=\"fr-hint-text\">\r\n        {{ field().description }}\r\n      </p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-dsfr-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatSlideToggleModule], template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"fr-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"fr-toggle__input\"\r\n        [attr.id]=\"'toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"/>\r\n      <label\r\n        class=\"fr-toggle__label\"\r\n        [attr.for]=\"'toggle-' + uuid\"\r\n        [attr.data-fr-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-fr-unchecked-label]=\"field.uncheckedLabel\"\r\n      >{{ field.label }}\r\n        @if (required) {\r\n          <span class=\"red\">*</span>\r\n        }\r\n      </label>\r\n      <p\r\n        class=\"fr-hint-text\">\r\n        {{ field.description }}\r\n      </p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'sot-dsfr-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatSlideToggleModule], template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"fr-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"fr-toggle__input\"\r\n        [attr.id]=\"'toggle-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field().disabled\"/>\r\n      <label\r\n        class=\"fr-toggle__label\"\r\n        [attr.for]=\"'toggle-' + uuid\"\r\n        [attr.data-fr-checked-label]=\"field().checkedLabel\"\r\n        [attr.data-fr-unchecked-label]=\"field().uncheckedLabel\"\r\n      >{{ field().label }}\r\n        @if (required) {\r\n          <span class=\"red\">*</span>\r\n        }\r\n      </label>\r\n      <p\r\n        class=\"fr-hint-text\">\r\n        {{ field().description }}\r\n      </p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 const components$1 = {
@@ -1973,8 +1981,8 @@ class DsfrDynamicFieldDirective {
                     environmentInjector: this.injector
                 });
             }
-            this.component.instance.field = this.field();
-            this.component.instance.group = this.group();
+            this.component.instance.field = this.field;
+            this.component.instance.group = this.group;
             this.component.instance.instancePath = this.instancePath();
             this.component.instance.path = this.path();
         }
@@ -2018,7 +2026,7 @@ class DsfrDynamicFormComponent {
             if (!this.form && this.config() != null) {
                 this.createForm();
             }
-            if (this.initialValues() && this.form && this.form.pristine) {
+            if (this.initialValues() && this.form?.pristine) {
                 this.setValue(this.initialValues());
             }
         });
@@ -2076,33 +2084,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
 class ClassicDivTextComponent extends AbstractFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicDivTextComponent, isStandalone: true, selector: "sot-classic-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicDivTextComponent, isStandalone: true, selector: "sot-classic-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field().className\">\n  <div [innerHTML]=\"field().label\"></div>\n  @if(field().description) {\n    <p [innerHTML]=\"field().description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicDivTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n" }]
+            args: [{ selector: 'sot-classic-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field().className\">\n  <div [innerHTML]=\"field().label\"></div>\n  @if(field().description) {\n    <p [innerHTML]=\"field().description\"></p>\n  }\n</div>\n" }]
         }] });
 
 class ClassicFieldCheckboxComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldCheckboxComponent, isStandalone: true, selector: "sot-classic-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n      [formGroup]=\"group\"\r\n      class=\"sot-formfield-wrapper\"\r\n      [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n        type=\"checkbox\"\r\n        [formControlName]=\"field.name\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid\"\r\n        [ngClass]=\"{\r\n          'sot-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-checkbox--valid': control && !control.untouched && control.valid,\r\n          'sot-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n        class=\"sot-label\"\r\n        [ngClass]=\"field.labelClassName\"\r\n        [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n        class=\"sot-messages-group\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n        aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldCheckboxComponent, isStandalone: true, selector: "sot-classic-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field().className\">\r\n  <div\r\n      [formGroup]=\"group()\"\r\n      class=\"sot-formfield-wrapper\"\r\n      [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n        type=\"checkbox\"\r\n        [formControlName]=\"field().name\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid\"\r\n        [ngClass]=\"{\r\n          'sot-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-checkbox--valid': control && !control.untouched && control.valid,\r\n          'sot-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n        class=\"sot-label\"\r\n        [ngClass]=\"field().labelClassName\"\r\n        [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n        class=\"sot-messages-group\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n        aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n      [formGroup]=\"group\"\r\n      class=\"sot-formfield-wrapper\"\r\n      [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n        type=\"checkbox\"\r\n        [formControlName]=\"field.name\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid\"\r\n        [ngClass]=\"{\r\n          'sot-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-checkbox--valid': control && !control.untouched && control.valid,\r\n          'sot-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n        class=\"sot-label\"\r\n        [ngClass]=\"field.labelClassName\"\r\n        [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n        class=\"sot-messages-group\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n        aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'sot-classic-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field().className\">\r\n  <div\r\n      [formGroup]=\"group()\"\r\n      class=\"sot-formfield-wrapper\"\r\n      [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n        type=\"checkbox\"\r\n        [formControlName]=\"field().name\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid\"\r\n        [ngClass]=\"{\r\n          'sot-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-checkbox--valid': control && !control.untouched && control.valid,\r\n          'sot-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n        class=\"sot-label\"\r\n        [ngClass]=\"field().labelClassName\"\r\n        [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n        class=\"sot-messages-group\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n        aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class ClassicFieldInputComponent extends AbstractControlFieldComponent {
     inputType = 'text';
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     ngOnInit() {
         super.ngOnInit();
-        this.inputType = this.field.inputType ?? 'text';
-        const control = this.group.get(this.field.name);
+        this.inputType = this.field().inputType ?? 'text';
+        const control = this.group().get(this.field().name);
         if (control) {
             control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
                 if (value?.length == 0) {
@@ -2112,19 +2120,19 @@ class ClassicFieldInputComponent extends AbstractControlFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldInputComponent, isStandalone: true, selector: "sot-classic-field-input", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-input\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n          @if (prefix.action) {\r\n            <button type=\"button\"\r\n                    class=\"sot-button\"\r\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                    (click)=\"buttonAction(prefix)\"\r\n            >{{ prefix.label }}</button>\r\n          } @else {\r\n            <span [innerHTML]=\"prefix.label\"></span>\r\n          }\r\n        </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldInputComponent, isStandalone: true, selector: "sot-classic-field-input", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-input\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n          @if (prefix.action) {\r\n            <button type=\"button\"\r\n                    class=\"sot-button\"\r\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                    (click)=\"buttonAction(prefix)\"\r\n            >{{ prefix.label }}</button>\r\n          } @else {\r\n            <span [innerHTML]=\"prefix.label\"></span>\r\n          }\r\n        </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"field().inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [readonly]=\"field().readonly\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-input\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n          @if (prefix.action) {\r\n            <button type=\"button\"\r\n                    class=\"sot-button\"\r\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                    (click)=\"buttonAction(prefix)\"\r\n            >{{ prefix.label }}</button>\r\n          } @else {\r\n            <span [innerHTML]=\"prefix.label\"></span>\r\n          }\r\n        </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-classic-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-input\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n          @if (prefix.action) {\r\n            <button type=\"button\"\r\n                    class=\"sot-button\"\r\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                    (click)=\"buttonAction(prefix)\"\r\n            >{{ prefix.label }}</button>\r\n          } @else {\r\n            <span [innerHTML]=\"prefix.label\"></span>\r\n          }\r\n        </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"field().inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [readonly]=\"field().readonly\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 class ClassicGroupComponent extends AbstractControlFieldComponent {
     get subGroup() {
-        return this.group.controls[this.field.name];
+        return this.group().controls[this.field().name];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicGroupComponent, isStandalone: true, selector: "sot-classic-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n  @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n\n  } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n  }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container classicDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicGroupComponent, isStandalone: true, selector: "sot-classic-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'sot-accordion': field().accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n  @if (field().accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'group-content-' + uuid\">\n          {{ field().label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'group-content-' + uuid\">\n        @if (field().description) {\n          <p class=\"sot-label-description\">{{ field().description }}</p>\n        }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n\n  } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field().labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"sot-label-description\">{{ field().description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n  }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field().fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container classicDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field().validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicGroupComponent, decorators: [{
             type: Component,
@@ -2132,23 +2140,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         forwardRef(() => ClassiDynamicFieldDirective),
                         NgClass,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n  @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n\n  } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n  }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container classicDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'sot-accordion': field().accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n  @if (field().accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'group-content-' + uuid\">\n          {{ field().label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'group-content-' + uuid\">\n        @if (field().description) {\n          <p class=\"sot-label-description\">{{ field().description }}</p>\n        }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n\n  } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field().labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"sot-label-description\">{{ field().description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n  }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field().fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container classicDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field().validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
         }] });
 
 class ClassicArrayComponent extends AbstractControlFieldComponent {
     dynamicService = inject(DynamicFormService);
     ref = inject(ChangeDetectorRef);
     get array() {
-        return this.group.controls[this.field.name];
+        return this.group().controls[this.field().name];
     }
     constructor() {
         super();
     }
     addItem() {
-        const i = this.field.instances.length > 0 ? this.field.instances[this.field.instances.length - 1].number + 1 : 0;
-        const fields = _.cloneDeep(this.field.field.fields);
+        const i = this.field().instances.length > 0 ? this.field().instances[this.field().instances.length - 1].number + 1 : 0;
+        const fields = structuredClone(this.field().field.fields);
         const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null, null);
-        this.field.instances.push({
+        this.field().instances.push({
             number: i,
             group: grp,
             fields
@@ -2159,7 +2167,7 @@ class ClassicArrayComponent extends AbstractControlFieldComponent {
     deleteItem(index, inst) {
         /*
         TODO
-        this.field.instances!.splice(index, 1);
+        this.field().instances!.splice(index, 1);
         for (const key of this.dynamicService.pathFieldMap.keys()) {
           if (key.startsWith(`${this.path}[${inst.number}]`)) {
             this.dynamicFormService.pathFieldMap.delete(key);
@@ -2171,7 +2179,7 @@ class ClassicArrayComponent extends AbstractControlFieldComponent {
         this.ref.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicArrayComponent, isStandalone: true, selector: "sot-classic-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\"\n           [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container classicDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"sot-button\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"sot-button\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"sot-messages-group\"\n        [attr.id]=\"'sot-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"sot-message sot-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicArrayComponent, isStandalone: true, selector: "sot-classic-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{\n        'sot-accordion': field().accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n    @if (field().accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field().label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field().description) {\n          <p class=\"sot-label-description\">{{ field().description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field().labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"sot-label-description\">{{ field().description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\"\n           [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group()\">\n    <div [formArrayName]=\"field().name\">\n      @for (inst of field().instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field().elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field().itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field().elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container classicDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field().disabled && (!field().minNbRow || field().minNbRow! < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"sot-button\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field().deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field().disabled && (!field().maxNbRow || field().maxNbRow! > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"sot-button\"\n                  (click)=\"addItem()\"\n          >\n            {{ field().addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"sot-messages-group\"\n        [attr.id]=\"'sot-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field().validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"sot-message sot-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicArrayComponent, decorators: [{
             type: Component,
@@ -2180,12 +2188,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgClass,
                         ReactiveFormsModule,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\"\n           [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container classicDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"sot-button\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"sot-button\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"sot-messages-group\"\n        [attr.id]=\"'sot-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"sot-message sot-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field().className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{\n        'sot-accordion': field().accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n    @if (field().accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field().labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field().opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field().label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field().opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field().description) {\n          <p class=\"sot-label-description\">{{ field().description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field().labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field().description) {\n          <span class=\"sot-label-description\">{{ field().description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\"\n           [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group()\">\n    <div [formArrayName]=\"field().name\">\n      @for (inst of field().instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field().elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field().itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field().elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container classicDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field().disabled && (!field().minNbRow || field().minNbRow! < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"sot-button\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field().deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field().disabled && (!field().maxNbRow || field().maxNbRow! > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"sot-button\"\n                  (click)=\"addItem()\"\n          >\n            {{ field().addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"sot-messages-group\"\n        [attr.id]=\"'sot-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field().validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"sot-message sot-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
         }], ctorParameters: () => [] });
 
 class ClassicRowComponent extends AbstractFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicRowComponent, isStandalone: true, selector: "sot-classic-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        classicDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicRowComponent, isStandalone: true, selector: "sot-classic-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field().className\">\n  @for (f of field().fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        classicDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group()\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicRowComponent, decorators: [{
             type: Component,
@@ -2193,7 +2201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ReactiveFormsModule,
                         NgClass,
                         forwardRef(() => ClassiDynamicFieldDirective)
-                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        classicDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field().className\">\n  @for (f of field().fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        classicDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group()\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
         }] });
 
 class PasswordValidators {
@@ -2215,16 +2223,16 @@ class ClassicFieldPasswordComponent extends AbstractControlFieldComponent {
     iconErrorLabel;
     iconSuccessLabel;
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     ngOnInit() {
         super.ngOnInit();
-        this.showPasswordLabel = this.field.labels?.showPassword ?? "Show password";
-        this.hidePasswordLabel = this.field.labels?.hidePassword ?? "Hide password";
-        this.iconSuccessLabel = this.field.labels?.iconSuccess ?? "Success";
-        this.iconErrorLabel = this.field.labels?.iconError ?? "Error";
+        this.showPasswordLabel = this.field().labels?.showPassword ?? "Show password";
+        this.hidePasswordLabel = this.field().labels?.hidePassword ?? "Hide password";
+        this.iconSuccessLabel = this.field().labels?.iconSuccess ?? "Success";
+        this.iconErrorLabel = this.field().labels?.iconError ?? "Error";
         if (this.control) {
             this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
                 if (value?.length == 0) {
@@ -2256,29 +2264,29 @@ class ClassicFieldPasswordComponent extends AbstractControlFieldComponent {
         return this.control.value && !this.control.hasError("requiresSpecialChars");
     }
     setPasswordValidators() {
-        if (this.field.minlength) {
-            this.control?.addValidators(Validators.minLength(this.field.minlength));
+        if (this.field().minlength) {
+            this.control?.addValidators(Validators.minLength(this.field().minlength));
         }
-        if (this.field.maxlength) {
-            this.control?.addValidators(Validators.maxLength(this.field.maxlength));
+        if (this.field().maxlength) {
+            this.control?.addValidators(Validators.maxLength(this.field().maxlength));
         }
-        if (this.field.requiresDigit) {
+        if (this.field().requiresDigit) {
             this.control?.addValidators(PasswordValidators.patternValidator(/(?=.*[0-9])/, {
                 requiresDigit: true
             }));
         }
-        if (this.field.requiresUppercase) {
+        if (this.field().requiresUppercase) {
             this.control?.addValidators(PasswordValidators.patternValidator(/(?=.*[A-Z])/, {
                 requiresUppercase: true
             }));
         }
-        if (this.field.requiresLowercase) {
+        if (this.field().requiresLowercase) {
             this.control?.addValidators(PasswordValidators.patternValidator(/(?=.*[a-z])/, {
                 requiresLowercase: true
             }));
         }
-        if (this.field.requiresSpecialChars) {
-            const chars = this.field.specialChars?.join("") ?? "$@^!%*?&";
+        if (this.field().requiresSpecialChars) {
+            const chars = this.field().specialChars?.join("") ?? "$@^!%*?&";
             const regex = "(?=.*[" + chars + "])";
             this.control?.addValidators(PasswordValidators.patternValidator(new RegExp(regex), {
                 requiresSpecialChars: true
@@ -2286,69 +2294,70 @@ class ClassicFieldPasswordComponent extends AbstractControlFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldPasswordComponent, isStandalone: true, selector: "sot-classic-field-password", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"sot-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <span [ngClass]=\"minLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <span [ngClass]=\"maxLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"maxLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <span [ngClass]=\"requiresDigitValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresDigitValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <span [ngClass]=\"requiresUppercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresUppercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <span [ngClass]=\"requiresLowercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresLowercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <span [ngClass]=\"requiresSpecialCharsValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresSpecialCharsValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldPasswordComponent, isStandalone: true, selector: "sot-classic-field-password", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"sot-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field().minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <span [ngClass]=\"minLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <span [ngClass]=\"maxLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"maxLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <span [ngClass]=\"requiresDigitValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresDigitValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <span [ngClass]=\"requiresUppercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresUppercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <span [ngClass]=\"requiresLowercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresLowercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <span [ngClass]=\"requiresSpecialCharsValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresSpecialCharsValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"sot-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <span [ngClass]=\"minLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <span [ngClass]=\"maxLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"maxLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <span [ngClass]=\"requiresDigitValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresDigitValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <span [ngClass]=\"requiresUppercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresUppercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <span [ngClass]=\"requiresLowercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresLowercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <span [ngClass]=\"requiresSpecialCharsValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresSpecialCharsValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}\n"] }]
+            args: [{ selector: 'sot-classic-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field().autocomplete ?? 'off'\"\r\n        [maxlength]=\"field().maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"sot-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field().minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <span [ngClass]=\"minLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <span [ngClass]=\"maxLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"maxLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <span [ngClass]=\"requiresDigitValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresDigitValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <span [ngClass]=\"requiresUppercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresUppercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <span [ngClass]=\"requiresLowercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresLowercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field().requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <span [ngClass]=\"requiresSpecialCharsValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresSpecialCharsValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field().labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}\n"] }]
         }] });
 
 class ClassicFieldRadioButtonComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldRadioButtonComponent, isStandalone: true, selector: "sot-classic-field-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-radio\" [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"sot-formfield-wrapper sot-fieldset\"\r\n    [ngClass]=\"{\r\n      'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'sot-formfield--valid': control && !control.untouched && control.valid,\r\n      'sot-formfield--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"sot-fieldset-legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      <span class=\"sot-legend-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if (field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"sot-fieldset-element\"\r\n          [ngClass]=\"{ 'sot-fieldset--inline': !field.verticalAlign }\">\r\n          <div class=\"sot-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"\r\n              [ngClass]=\"{\r\n                'sot-radio--error': control && !control.untouched && !control.valid && !control.disabled,\r\n                'sot-radio--valid': control && !control.untouched && control.valid,\r\n                'sot-radio--disabled': control && control.disabled,\r\n              }\"/>\r\n            <label\r\n              class=\"sot-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              <span class=\"sot-label-text\"\r\n                    [innerHTML]=\"field.labelKey ? item[field.labelKey!] : item\"></span>\r\n              @if (field.descriptionKey) {\r\n                <span class=\"sot-label-description\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-radio-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldRadioButtonComponent, isStandalone: true, selector: "sot-classic-field-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-radio\" [ngClass]=\"field().className\">\r\n  <fieldset\r\n    class=\"sot-formfield-wrapper sot-fieldset\"\r\n    [ngClass]=\"{\r\n      'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'sot-formfield--valid': control && !control.untouched && control.valid,\r\n      'sot-formfield--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group()\">\r\n    <legend\r\n      class=\"sot-fieldset-legend\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      <span class=\"sot-legend-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </legend>\r\n    @if (field().options) {\r\n      @for (item of field().options; track item; let i = $index) {\r\n        <div\r\n          class=\"sot-fieldset-element\"\r\n          [ngClass]=\"{ 'sot-fieldset--inline': !field().verticalAlign }\">\r\n          <div class=\"sot-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field().name\"\r\n              [attr.disabled]=\"field().disabledKey && !!item[field().disabledKey!] ? true : undefined\"\r\n              [ngClass]=\"{\r\n                'sot-radio--error': control && !control.untouched && !control.valid && !control.disabled,\r\n                'sot-radio--valid': control && !control.untouched && control.valid,\r\n                'sot-radio--disabled': control && control.disabled,\r\n              }\"/>\r\n            <label\r\n              class=\"sot-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              <span class=\"sot-label-text\"\r\n                    [innerHTML]=\"field().labelKey ? item[field().labelKey!] : item\"></span>\r\n              @if (field().descriptionKey) {\r\n                <span class=\"sot-label-description\">{{ item[field().descriptionKey!] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-radio-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-radio\" [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"sot-formfield-wrapper sot-fieldset\"\r\n    [ngClass]=\"{\r\n      'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'sot-formfield--valid': control && !control.untouched && control.valid,\r\n      'sot-formfield--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"sot-fieldset-legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      <span class=\"sot-legend-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if (field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"sot-fieldset-element\"\r\n          [ngClass]=\"{ 'sot-fieldset--inline': !field.verticalAlign }\">\r\n          <div class=\"sot-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"\r\n              [ngClass]=\"{\r\n                'sot-radio--error': control && !control.untouched && !control.valid && !control.disabled,\r\n                'sot-radio--valid': control && !control.untouched && control.valid,\r\n                'sot-radio--disabled': control && control.disabled,\r\n              }\"/>\r\n            <label\r\n              class=\"sot-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              <span class=\"sot-label-text\"\r\n                    [innerHTML]=\"field.labelKey ? item[field.labelKey!] : item\"></span>\r\n              @if (field.descriptionKey) {\r\n                <span class=\"sot-label-description\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-radio-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'sot-classic-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-radio\" [ngClass]=\"field().className\">\r\n  <fieldset\r\n    class=\"sot-formfield-wrapper sot-fieldset\"\r\n    [ngClass]=\"{\r\n      'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'sot-formfield--valid': control && !control.untouched && control.valid,\r\n      'sot-formfield--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group()\">\r\n    <legend\r\n      class=\"sot-fieldset-legend\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      <span class=\"sot-legend-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </legend>\r\n    @if (field().options) {\r\n      @for (item of field().options; track item; let i = $index) {\r\n        <div\r\n          class=\"sot-fieldset-element\"\r\n          [ngClass]=\"{ 'sot-fieldset--inline': !field().verticalAlign }\">\r\n          <div class=\"sot-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field().name\"\r\n              [attr.disabled]=\"field().disabledKey && !!item[field().disabledKey!] ? true : undefined\"\r\n              [ngClass]=\"{\r\n                'sot-radio--error': control && !control.untouched && !control.valid && !control.disabled,\r\n                'sot-radio--valid': control && !control.untouched && control.valid,\r\n                'sot-radio--disabled': control && control.disabled,\r\n              }\"/>\r\n            <label\r\n              class=\"sot-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              <span class=\"sot-label-text\"\r\n                    [innerHTML]=\"field().labelKey ? item[field().labelKey!] : item\"></span>\r\n              @if (field().descriptionKey) {\r\n                <span class=\"sot-label-description\">{{ item[field().descriptionKey!] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-radio-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
         }] });
 
 class ClassicFieldSelectComponent extends AbstractControlFieldComponent {
     options = [];
     ngOnInit() {
         super.ngOnInit();
-        if (isObservable(this.field.options)) {
-            this.field.options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
+        const options = this.field().options;
+        if (isObservable(options)) {
+            options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
                 this.options = options;
             });
         }
         else {
-            this.options = this.field.options;
+            this.options = options;
         }
     }
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldSelectComponent, isStandalone: true, selector: "sot-classic-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"sot-select\"\r\n        [multiple]=\"field.multiple\"\r\n        [ngClass]=\"{\r\n          'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-select--valid': control && !control.untouched && control.valid,\r\n          'sot-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field.name\">\r\n        @if (field.resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field.resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field.options) {\r\n          @if (field.groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n                @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n                  @for (item of group[field.groupOptionsKey]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                      [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                      {{ field.labelKey ? item[field.labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldSelectComponent, isStandalone: true, selector: "sot-classic-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"sot-select\"\r\n        [multiple]=\"field().multiple\"\r\n        [ngClass]=\"{\r\n          'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-select--valid': control && !control.untouched && control.valid,\r\n          'sot-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field().name\">\r\n        @if (field().resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field().resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field().options) {\r\n          @if (field().groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field().groupLabelKey ? group[field().groupLabelKey!] : ''\">\r\n                @if (field().groupOptionsKey && group[field().groupOptionsKey!]) {\r\n                  @for (item of group[field().groupOptionsKey!]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                      [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                      {{ field().labelKey ? item[field().labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                {{ field().labelKey ? item[field().labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"sot-select\"\r\n        [multiple]=\"field.multiple\"\r\n        [ngClass]=\"{\r\n          'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-select--valid': control && !control.untouched && control.valid,\r\n          'sot-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field.name\">\r\n        @if (field.resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field.resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field.options) {\r\n          @if (field.groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n                @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n                  @for (item of group[field.groupOptionsKey]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                      [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                      {{ field.labelKey ? item[field.labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field.valueKey ? item[field.valueKey] : item\"\r\n                [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n                {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-classic-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field().labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field().description) {\r\n        <span class=\"sot-label-description\">{{ field().description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field().prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"sot-select\"\r\n        [multiple]=\"field().multiple\"\r\n        [ngClass]=\"{\r\n          'sot-select--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-select--valid': control && !control.untouched && control.valid,\r\n          'sot-select--disabled': control && control.disabled,\r\n        }\"\r\n        [attr.id]=\"'sot-select-' + uuid\"\r\n        [formControlName]=\"field().name\">\r\n        @if (field().resetOption) {\r\n          <option [ngValue]=\"undefined\">\r\n            {{ field().resetOptionLabel }}\r\n          </option>\r\n        }\r\n\r\n        @if (field().options) {\r\n          @if (field().groupLabelKey) {\r\n            @for (group of options; track group) {\r\n              <optgroup [label]=\"field().groupLabelKey ? group[field().groupLabelKey!] : ''\">\r\n                @if (field().groupOptionsKey && group[field().groupOptionsKey!]) {\r\n                  @for (item of group[field().groupOptionsKey!]; track item) {\r\n                    <option\r\n                      [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                      [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                      {{ field().labelKey ? item[field().labelKey!] : item }}\r\n                    </option>\r\n                  }\r\n                }\r\n              </optgroup>\r\n            }\r\n          } @else {\r\n            @for (item of options; track item) {\r\n              <option\r\n                [ngValue]=\"field().valueKey ? item[field().valueKey!] : item\"\r\n                [disabled]=\"field().disabledKey ? item[field().disabledKey!] : false\">\r\n                {{ field().labelKey ? item[field().labelKey!] : item }}\r\n              </option>\r\n            }\r\n          }\r\n\r\n        }\r\n      </select>\r\n      @for (suffix of field().suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-select-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-select{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 class ClassicFieldToggleComponent extends AbstractControlFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldToggleComponent, isStandalone: true, selector: "sot-classic-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"sot-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"sot-toggle-input\"\r\n        [attr.id]=\"'sot-toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"\r\n        [ngClass]=\"{\r\n          'sot-toggle--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-toggle--valid': control && !control.untouched && control.valid,\r\n          'sot-toggle--disabled': control && control.disabled,\r\n        }\"/>\r\n      <label\r\n        class=\"sot-toggle-label\"\r\n        [attr.for]=\"'sot-toggle-' + uuid\"\r\n        [attr.data-sot-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-sot-unchecked-label]=\"field.uncheckedLabel\"\r\n      >\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </label>\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldToggleComponent, isStandalone: true, selector: "sot-classic-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"sot-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"sot-toggle-input\"\r\n        [attr.id]=\"'sot-toggle-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field().disabled\"\r\n        [ngClass]=\"{\r\n          'sot-toggle--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-toggle--valid': control && !control.untouched && control.valid,\r\n          'sot-toggle--disabled': control && control.disabled,\r\n        }\"/>\r\n      <label\r\n        class=\"sot-toggle-label\"\r\n        [attr.for]=\"'sot-toggle-' + uuid\"\r\n        [attr.data-sot-checked-label]=\"field().checkedLabel\"\r\n        [attr.data-sot-unchecked-label]=\"field().uncheckedLabel\"\r\n      >\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field().description) {\r\n          <span class=\"sot-label-description\">{{ field().description }}</span>\r\n        }\r\n      </label>\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"sot-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"sot-toggle-input\"\r\n        [attr.id]=\"'sot-toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"\r\n        [ngClass]=\"{\r\n          'sot-toggle--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-toggle--valid': control && !control.untouched && control.valid,\r\n          'sot-toggle--disabled': control && control.disabled,\r\n        }\"/>\r\n      <label\r\n        class=\"sot-toggle-label\"\r\n        [attr.for]=\"'sot-toggle-' + uuid\"\r\n        [attr.data-sot-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-sot-unchecked-label]=\"field.uncheckedLabel\"\r\n      >\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </label>\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'sot-classic-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field().className\">\r\n  <div\r\n    [formGroup]=\"group()\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"sot-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"sot-toggle-input\"\r\n        [attr.id]=\"'sot-toggle-' + uuid\"\r\n        [formControlName]=\"field().name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field().disabled\"\r\n        [ngClass]=\"{\r\n          'sot-toggle--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-toggle--valid': control && !control.untouched && control.valid,\r\n          'sot-toggle--disabled': control && control.disabled,\r\n        }\"/>\r\n      <label\r\n        class=\"sot-toggle-label\"\r\n        [attr.for]=\"'sot-toggle-' + uuid\"\r\n        [attr.data-sot-checked-label]=\"field().checkedLabel\"\r\n        [attr.data-sot-unchecked-label]=\"field().uncheckedLabel\"\r\n      >\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field().description) {\r\n          <span class=\"sot-label-description\">{{ field().description }}</span>\r\n        }\r\n      </label>\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field().validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class ClassicFieldTextareaComponent extends AbstractControlFieldComponent {
     buttonAction(b) {
-        if (b.action && this.field && this.group) {
-            b.action(this.field, this.group, this.dynamicFormService.data);
+        if (b.action && this.field() && this.group()) {
+            b.action(this.field(), this.group(), this.data);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldTextareaComponent, isStandalone: true, selector: "sot-classic-field-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"sot-formfield-wrapper\"\n    [ngClass]=\"{\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\n        'sot-formfield--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"sot-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"sot-label-description\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"sot-input-wrapper\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\">\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"sot-textarea\"\n        [ngClass]=\"{\n          'sot-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'sot-input--valid': control && !control.untouched && control.valid ,\n          'sot-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"sot-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"sot-message sot-message--error\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldTextareaComponent, isStandalone: true, selector: "sot-classic-field-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field().className\">\n  <div\n    [formGroup]=\"group()\"\n    class=\"sot-formfield-wrapper\"\n    [ngClass]=\"{\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\n        'sot-formfield--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"sot-label\"\n      [ngClass]=\"field().labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field().description) {\n        <span class=\"sot-label-description\">{{ field().description }}</span>\n      }\n    </label>\n    <div class=\"sot-input-wrapper\">\n      @for (prefix of field().prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\">\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"sot-textarea\"\n        [ngClass]=\"{\n          'sot-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'sot-input--valid': control && !control.untouched && control.valid ,\n          'sot-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field().name\"\n        [required]=\"!!required\"\n        [readonly]=\"field().readonly\"\n        [rows]=\"field().rows\"\n        [maxlength]=\"field().maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field().suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"sot-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field().validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"sot-message sot-message--error\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-classic-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"sot-formfield-wrapper\"\n    [ngClass]=\"{\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\n        'sot-formfield--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"sot-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"sot-label-description\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"sot-input-wrapper\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\">\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"sot-textarea\"\n        [ngClass]=\"{\n          'sot-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'sot-input--valid': control && !control.untouched && control.valid ,\n          'sot-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"sot-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"sot-message sot-message--error\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
+            args: [{ selector: 'sot-classic-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field().className\">\n  <div\n    [formGroup]=\"group()\"\n    class=\"sot-formfield-wrapper\"\n    [ngClass]=\"{\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\n        'sot-formfield--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"sot-label\"\n      [ngClass]=\"field().labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      <span class=\"sot-label-text\" [innerHTML]=\"field().label\"></span>\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field().description) {\n        <span class=\"sot-label-description\">{{ field().description }}</span>\n      }\n    </label>\n    <div class=\"sot-input-wrapper\">\n      @for (prefix of field().prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\">\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"sot-textarea\"\n        [ngClass]=\"{\n          'sot-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'sot-input--valid': control && !control.untouched && control.valid ,\n          'sot-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field().name\"\n        [required]=\"!!required\"\n        [readonly]=\"field().readonly\"\n        [rows]=\"field().rows\"\n        [maxlength]=\"field().maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field().suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"sot-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field().validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"sot-message sot-message--error\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 const components = {
@@ -2394,8 +2403,8 @@ class ClassiDynamicFieldDirective {
                     environmentInjector: this.injector
                 });
             }
-            this.component.instance.field = this.field();
-            this.component.instance.group = this.group();
+            this.component.instance.field = this.field;
+            this.component.instance.group = this.group;
             this.component.instance.instancePath = this.instancePath();
             this.component.instance.path = this.path();
         }
@@ -2499,5 +2508,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractControlFieldComponent, AbstractFieldComponent, AcCustomComponentField, AcDynamicFormStepperComponent, AutocompleteAttribute, ClassicDynamicFormComponent, ConditionsService, DsfrDynamicFormComponent, DynamicFormService, MaterialDynamicFormComponent, MaterialDynamicFormModalComponent };
+export { AbstractControlFieldComponent, AbstractFieldComponent, AcCustomComponentField, AcFieldCheckboxComponent, AutocompleteAttribute, ClassicDynamicFormComponent, ConditionsService, DsfrDynamicFormComponent, DynamicFormService, MatFieldChipsComponent, MatFieldCustomComponent, MatFieldDateComponent, MatFieldFileComponent, MatFieldInputComponent, MatFieldPasswordComponent, MatFieldRadioButtonComponent, MatFieldSelectComponent, MatFieldTextareaComponent, MatFieldToggleComponent, MaterialDynamicFormComponent, MaterialDynamicFormModalComponent, MaterialDynamicFormStepperComponent };
 //# sourceMappingURL=sotoa-ui-dynamic-form.mjs.map