@sotoa-ui/dynamic-form 0.0.1

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

@@ -0,0 +1,1812 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, Directive, output, effect } from '@angular/core';
+import { distinctUntilChanged, isObservable } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as _ from 'lodash-es';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { debounceTime } from 'rxjs/operators';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$1 from '@angular/material/form-field';
+import { MatError, MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule, MatButton } from '@angular/material/button';
+import * as i1$1 from '@angular/material/expansion';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
+import { MatCardModule } from '@angular/material/card';
+import * as i2$2 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatTooltipModule } from '@angular/material/tooltip';
+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';
+
+class ConditionsService {
+    constructor() {
+    }
+    checkValidationConditions(validationConditions, dynamicFormDatas) {
+        for (const cond of validationConditions) {
+            const fieldPath = dynamicFormDatas.idPathMap.get(cond.fieldId);
+            console.log(fieldPath);
+            if (fieldPath) {
+                for (let instance of fieldPath) {
+                    const field = dynamicFormDatas.pathFieldConfigMap.get(instance);
+                    console.log(field);
+                    /*
+                    if (field) {
+                      const isConditionOk = this.checkCondition(cond.validation.condition!, pathFieldMap, idPathMap, instance.arrayCode, instance.arrayInstance);
+                      this.setValidation(field, cond.validation, isConditionOk);
+                    }
+          
+                     */
+                }
+            }
+            /*
+            else if (fieldPath) {
+              const field = pathFieldMap.get(fieldPath);
+              if (field && field.control) {
+                const isConditionOk = this.checkCondition(cond.validation.condition!, pathFieldMap, idPathMap, null, null);
+                this.setValidation(field, cond.validation, isConditionOk);
+              }
+            }
+      
+             */
+        }
+    }
+    /*
+    setValidation(field: FormField, validation: AcValidator, isConditionOk: boolean) {
+      if (isConditionOk) {
+        field.control!.addValidators(validation.validator!);
+      } else {
+        field.control!.removeValidators(validation.validator!);
+      }
+      field.control!.updateValueAndValidity({emitEvent: false});
+    }
+    */
+    checkDisplayConditions(displayConditions, dynamicFormDatas) {
+        for (const cond of displayConditions) {
+            const fieldPath = dynamicFormDatas.idPathMap.get(cond.fieldId);
+            console.log(fieldPath);
+            /*
+            if (isArray(fieldPath)) {
+              for (let instance of fieldPath) {
+                const field = pathFieldMap.get(instance.path);
+                if (field) {
+                  const isConditionKo = !this.checkCondition(cond.condition, pathFieldMap, idPathMap, instance.arrayCode, instance.arrayInstance);
+                  this.setHidden(field, isConditionKo);
+                }
+              }
+            } else if (fieldPath) {
+              const field = pathFieldMap.get(fieldPath);
+              if (field) {
+                const isConditionKo = !this.checkCondition(cond.condition, pathFieldMap, idPathMap, null, null);
+                this.setHidden(field, isConditionKo);
+              }
+            }
+      
+             */
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class DynamicFormService {
+    fb = inject(FormBuilder);
+    conditionsService = inject(ConditionsService);
+    destroyRef = inject(DestroyRef);
+    separator = ".";
+    data;
+    form;
+    displayConditions = [];
+    validationConditions = [];
+    createForm(fields, validations, updateOn, initialValues) {
+        this.data = {
+            fields,
+            updateOn,
+            idPathMap: new Map(),
+            pathFieldConfigMap: new Map(),
+            pathControlMap: new Map(),
+        };
+        this.form = this.createGroup(fields, null, initialValues);
+        if (validations) {
+            for (const valid of validations) {
+                if (valid.validator) {
+                    this.form.addValidators(valid.validator);
+                }
+            }
+        }
+        this.setCondition();
+    }
+    createFormStepper(steps, validations, updateOn, initialValues) {
+        this.data = {
+            fields: steps,
+            updateOn,
+            idPathMap: new Map(),
+            pathFieldConfigMap: new Map(),
+            pathControlMap: new Map(),
+        };
+        const config = updateOn ? { updateOn } : { updateOn: "change" };
+        this.form = this.fb.group({}, config);
+        steps.forEach((step) => {
+            this.form.addControl(step.name, this.createGroup(step.fields, null, initialValues));
+        });
+        if (validations) {
+            for (const valid of validations) {
+                if (valid.validator) {
+                    this.form.addValidators(valid.validator);
+                }
+            }
+        }
+        this.setCondition();
+    }
+    setCondition() {
+        if (this.displayConditions.length > 0 || this.validationConditions.length > 0) {
+            this.conditionsService.checkDisplayConditions(this.displayConditions, this.data);
+            this.conditionsService.checkValidationConditions(this.validationConditions, this.data);
+            this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                if (this.displayConditions.length > 0) {
+                    this.conditionsService.checkDisplayConditions(this.displayConditions, this.data);
+                }
+                if (this.validationConditions.length > 0) {
+                    this.conditionsService.checkValidationConditions(this.validationConditions, this.data);
+                }
+            });
+        }
+    }
+    createGroup(fields, parentPath, initialValues) {
+        const config = { updateOn: this.data?.updateOn ?? "change" };
+        const group = this.fb.group({}, config);
+        fields.forEach((config) => {
+            this.treatField(config, group, parentPath, initialValues);
+        });
+        return group;
+    }
+    treatField(config, group, parentPath, initialValues) {
+        const path = (parentPath ? parentPath + this.separator : "") + config.name;
+        if (!config.id) {
+            config.id = config.name;
+        }
+        if (config.displayCondition) {
+            this.displayConditions.push({
+                fieldId: config.id,
+                condition: config.displayCondition
+            });
+        }
+        if (config.type !== "text" && config.type !== "row" && config.type !== "tabs" && config.validations) {
+            config.validations.forEach(val => {
+                if (val.condition) {
+                    this.validationConditions.push({
+                        fieldId: config.id,
+                        validation: val
+                    });
+                }
+            });
+        }
+        if (config.type === "text") {
+            this.setFormFieldMapItem(path, config, null);
+        }
+        else if (config.type === "group") {
+            group.addControl(config.name, this.createGroupField(config, parentPath, initialValues));
+        }
+        else if (config.type === "array") {
+            group.addControl(config.name, this.createArray(config, parentPath, initialValues));
+        }
+        else if (config.type === "row") {
+            this.setFormFieldMapItem(path, config, null);
+            config.fields.forEach((child) => {
+                this.treatField(child, group, parentPath, initialValues);
+            });
+        }
+        else if (config.type === "tabs") {
+            const control = this.createGroup(config.tabs.map((x) => x.field), parentPath, initialValues ? initialValues[config.name] : null);
+            group.addControl(config.name, control);
+            this.setFormFieldMapItem(path, config, control);
+        }
+        else {
+            const control = this.createControl(config, initialValues);
+            this.setFormFieldMapItem(path, config, control);
+            group.addControl(config.name, control);
+        }
+    }
+    createGroupField(groupConfig, parentPath, initialValues) {
+        const path = (parentPath ? parentPath + this.separator : "") + groupConfig.name;
+        const g = this.createGroup(groupConfig.fields, path, initialValues ? initialValues[groupConfig.name] : null);
+        if (groupConfig.validations) {
+            const val = groupConfig.validations.filter((x) => x.validator).map((x) => x.validator);
+            if (val) {
+                // @ts-ignore
+                g.addValidators(val);
+            }
+            const asyncVal = groupConfig.validations.filter((x) => x.asyncValidator).map((x) => x.asyncValidator);
+            if (asyncVal) {
+                // @ts-ignore
+                g.addAsyncValidators(asyncVal);
+            }
+        }
+        this.setFormFieldMapItem(path, groupConfig, g);
+        return g;
+    }
+    createArrayInstance(arrayConfig, arrayPath, instanceNumber, initialValues) {
+        const fields = _.cloneDeep(arrayConfig.field.fields);
+        const grp = this.createGroup(fields, `${arrayPath}[${instanceNumber}]`, initialValues);
+        if (!arrayConfig.instances) {
+            arrayConfig.instances = [];
+        }
+        arrayConfig.instances.push({
+            number: instanceNumber,
+            group: grp,
+            fields,
+        });
+        return grp;
+    }
+    createArray(arrayConfig, parentPath, initialValues) {
+        const path = (parentPath ? parentPath + this.separator : "") + arrayConfig.name;
+        arrayConfig.instances = [];
+        const list = [];
+        let value = arrayConfig.value;
+        if (initialValues && Object.keys(initialValues).indexOf(arrayConfig.name) !== -1) {
+            value = initialValues[arrayConfig.name];
+        }
+        let i = 0;
+        if (value) {
+            for (const item of value) {
+                list.push(this.createArrayInstance(arrayConfig, path, i, item));
+                i++;
+            }
+        }
+        if (arrayConfig.minNbRow && arrayConfig.minNbRow > list.length) {
+            while (arrayConfig.minNbRow > list.length) {
+                list.push(this.createArrayInstance(arrayConfig, path, i, null));
+                i++;
+            }
+        }
+        const formArray = this.fb.array(list);
+        if (arrayConfig.validations) {
+            const val = arrayConfig.validations.filter((x) => x.validator).map((x) => x.validator);
+            if (val) {
+                // @ts-ignore
+                formArray.addValidators(val);
+            }
+            const asyncVal = arrayConfig.validations.filter((x) => x.asyncValidator).map((x) => x.asyncValidator);
+            if (asyncVal) {
+                // @ts-ignore
+                formArray.addAsyncValidators(asyncVal);
+            }
+        }
+        this.setFormFieldMapItem(path, arrayConfig, formArray);
+        return formArray;
+    }
+    setFormFieldMapItem(path, config, control) {
+        if (control) {
+            this.data.pathControlMap.set(path, control);
+        }
+        this.data.pathFieldConfigMap.set(path, config);
+        if (!this.data.idPathMap.get(config.id)) {
+            this.data.idPathMap.set(config.id, []);
+        }
+        this.data.idPathMap.get(config.id)?.push(path);
+    }
+    createControl(config, initialValues) {
+        let { disabled, validations, value } = config;
+        if (initialValues && Object.keys(initialValues).indexOf(config.name) !== -1) {
+            value = initialValues[config.name];
+        }
+        if (value === undefined) {
+            value = null;
+        }
+        const control = this.fb.control({ disabled, value });
+        if (validations) {
+            const val = validations.filter((x) => x.validator).map((x) => x.validator);
+            if (val) {
+                // @ts-ignore
+                control.addValidators(val);
+            }
+            const asyncVal = validations.filter((x) => x.asyncValidator).map((x) => x.asyncValidator);
+            if (asyncVal) {
+                // @ts-ignore
+                control.addAsyncValidators(asyncVal);
+            }
+        }
+        return control;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicFormService, providedIn: null });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: null
+                }]
+        }] });
+
+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: '' }]
+        }] });
+
+/**
+ * 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 = {}));
+
+let AcDivTextComponent$2 = class AcDivTextComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDivTextComponent, isStandalone: true, selector: "sot-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: AcDivTextComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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" }]
+        }] });
+
+let AcFieldCheckboxComponent$2 = 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-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$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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"] }]
+        }] });
+
+let AcFieldInputComponent$2 = class AcFieldInputComponent extends AbstractControlFieldComponent {
+    inputType = 'text';
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.data);
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        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) {
+                    control.setValue(null);
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldInputComponent, isStandalone: true, selector: "sot-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>\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\"\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\"\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 }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldInputComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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>\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\"\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\"\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"] }]
+        }] });
+
+let AcGroupComponent$2 = class AcGroupComponent extends AbstractControlFieldComponent {
+    get subGroup() {
+        return this.group.controls[this.field.name];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcGroupComponent, isStandalone: true, selector: "sot-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 sotDynamicField\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$2), selector: "[sotDynamicField]", 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"] }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcGroupComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-group', standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective$2),
+                        NgClass,
+                        MatAccordion,
+                        MatExpansionPanel,
+                        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 sotDynamicField\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"] }]
+        }] });
+
+let AcArrayComponent$2 = class AcArrayComponent extends AbstractControlFieldComponent {
+    dynamicService = inject(DynamicFormService);
+    ref = inject(ChangeDetectorRef);
+    get array() {
+        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 grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null);
+        this.field.instances.push({
+            number: i,
+            group: grp,
+            fields
+        });
+        this.array.push(grp);
+        this.ref.detectChanges();
+    }
+    deleteItem(index, inst) {
+        /*
+        TODO
+        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);
+          }
+        }
+    
+         */
+        this.array.removeAt(index);
+        this.ref.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcArrayComponent, isStandalone: true, selector: "sot-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 sotDynamicField\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                  color=\"primary\"\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$2), selector: "[sotDynamicField]", 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"] }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcArrayComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: "sot-array", standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective$2),
+                        MatExpansionModule,
+                        NgClass,
+                        MatIcon,
+                        MatButton,
+                        MatCardModule,
+                        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 sotDynamicField\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                  color=\"primary\"\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: () => [] });
+
+let AcRowComponent$2 = class AcRowComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcRowComponent, isStandalone: true, selector: "sot-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        sotDynamicField\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$2), selector: "[sotDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcRowComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-row', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        NgClass,
+                        forwardRef(() => AcDynamicFieldDirective$2),
+                        AcDynamicFieldDirective$2
+                    ], 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        sotDynamicField\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 {
+    static patternValidator(regex, error) {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            const valid = regex.test(control.value);
+            return valid ? null : error;
+        };
+    }
+};
+
+let AcFieldPasswordComponent$2 = class AcFieldPasswordComponent extends AbstractControlFieldComponent {
+    inputType = 'password';
+    showPasswordLabel;
+    hidePasswordLabel;
+    iconErrorLabel;
+    iconSuccessLabel;
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.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";
+        if (this.control) {
+            this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                if (value?.length == 0) {
+                    this.control.setValue(null);
+                }
+            });
+            this.setPasswordValidators();
+        }
+    }
+    tooglePassword() {
+        this.inputType = this.inputType === 'password' ? 'text' : 'password';
+    }
+    get minLengthValid() {
+        return this.control.value && !this.control.hasError("minlength");
+    }
+    get maxLengthValid() {
+        return this.control.value && !this.control.hasError("maxlength");
+    }
+    get requiresDigitValid() {
+        return this.control.value && !this.control.hasError("requiresDigit");
+    }
+    get requiresUppercaseValid() {
+        return this.control.value && !this.control.hasError("requiresUppercase");
+    }
+    get requiresLowercaseValid() {
+        return this.control.value && !this.control.hasError("requiresLowercase");
+    }
+    get requiresSpecialCharsValid() {
+        return this.control.value && !this.control.hasError("requiresSpecialChars");
+    }
+    setPasswordValidators() {
+        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.requiresDigit) {
+            this.control?.addValidators(PasswordValidators$2.patternValidator(/(?=.*[0-9])/, {
+                requiresDigit: true
+            }));
+        }
+        if (this.field.requiresUppercase) {
+            this.control?.addValidators(PasswordValidators$2.patternValidator(/(?=.*[A-Z])/, {
+                requiresUppercase: true
+            }));
+        }
+        if (this.field.requiresLowercase) {
+            this.control?.addValidators(PasswordValidators$2.patternValidator(/(?=.*[a-z])/, {
+                requiresLowercase: true
+            }));
+        }
+        if (this.field.requiresSpecialChars) {
+            const chars = this.field.specialChars?.join("") ?? "$@^!%*?&";
+            const regex = "(?=.*[" + chars + "])";
+            this.control?.addValidators(PasswordValidators$2.patternValidator(new RegExp(regex), {
+                requiresSpecialChars: true
+            }));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldPasswordComponent, isStandalone: true, selector: "sot-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>\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\" mat-icon-button 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\"\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\"\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-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.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: i5.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: AcFieldPasswordComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], 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>\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\" mat-icon-button 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\"\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\"\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-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"] }]
+        }] });
+
+let AcFieldRadioButtonComponent$2 = class AcFieldRadioButtonComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldRadioButtonComponent, isStandalone: true, selector: "sot-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: AcFieldRadioButtonComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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"] }]
+        }] });
+
+let AcFieldSelectComponent$2 = class AcFieldSelectComponent extends AbstractControlFieldComponent {
+    options = [];
+    ngOnInit() {
+        super.ngOnInit();
+        if (isObservable(this.field.options)) {
+            this.field.options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
+                this.options = options;
+            });
+        }
+        else {
+            this.options = this.field.options;
+        }
+    }
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.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-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>\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      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\"\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\"\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: AcFieldSelectComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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>\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      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\"\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\"\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"] }]
+        }] });
+
+let AcFieldTextareaComponent$2 = class AcFieldTextareaComponent extends AbstractControlFieldComponent {
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.data);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldTextareaComponent, isStandalone: true, selector: "sot-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>\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\"\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\"\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 }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldTextareaComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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>\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\"\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\"\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"] }]
+        }] });
+
+let AcFieldToggleComponent$2 = class AcFieldToggleComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldToggleComponent, isStandalone: true, selector: "sot-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: AcFieldToggleComponent$2, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError, 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" }]
+        }] });
+
+const components$2 = {
+    text: AcDivTextComponent$2,
+    group: AcGroupComponent$2,
+    array: AcArrayComponent$2,
+    row: AcRowComponent$2,
+    checkbox: AcFieldCheckboxComponent$2,
+    input: AcFieldInputComponent$2,
+    password: AcFieldPasswordComponent$2,
+    radio: AcFieldRadioButtonComponent$2,
+    select: AcFieldSelectComponent$2,
+    textarea: AcFieldTextareaComponent$2,
+    toggle: AcFieldToggleComponent$2,
+    /*
+    date: AcFieldDateComponent,
+    autocomplete: AcFieldAutocompleteComponent,
+    customField: AcFieldCustomComponent,
+    tabs: AcTabsComponent,
+    file: AcFieldFileComponent,
+  
+     */
+};
+let AcDynamicFieldDirective$2 = class AcDynamicFieldDirective {
+    container = inject(ViewContainerRef);
+    injector = inject(EnvironmentInjector);
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+    path = input.required(...(ngDevMode ? [{ debugName: "path" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    instancePath = input(...(ngDevMode ? [undefined, { debugName: "instancePath" }] : []));
+    component;
+    ngOnChanges(changes) {
+        if (!components$2[this.field().type]) {
+            const supportedTypes = Object.keys(components$2).join(", ");
+            throw new Error(`Trying to use an unsupported type (${this.field().type}).
+          Supported types: ${supportedTypes}`);
+        }
+        else {
+            if (!this.component || changes["type"]) {
+                this.container.clear();
+                this.component = this.container.createComponent(components$2[this.field().type], {
+                    environmentInjector: this.injector
+                });
+            }
+            this.component.instance.field = this.field();
+            this.component.instance.group = this.group();
+            this.component.instance.instancePath = this.instancePath();
+            this.component.instance.path = this.path();
+        }
+    }
+    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: "[sotDynamicField]", 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 });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFieldDirective$2, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[sotDynamicField]",
+                    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 }] }] } });
+
+class AcMaterialDynamicFormComponent {
+    dynamicFormService = inject(DynamicFormService);
+    destroyRef = inject(DestroyRef);
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    initialValues = input(...(ngDevMode ? [undefined, { debugName: "initialValues" }] : []));
+    formCancel = output();
+    formSubmit = output();
+    formChange = output();
+    get form() {
+        return this.dynamicFormService.form;
+    }
+    get controls() {
+        return this.form ? this.form.controls : null;
+    }
+    get changes() {
+        return this.form ? this.form.valueChanges : null;
+    }
+    get valid() {
+        return this.form ? this.form.valid : null;
+    }
+    get value() {
+        return this.form ? this.form.value : null;
+    }
+    constructor() {
+        effect(() => {
+            if (!this.form && this.config() != null) {
+                this.createForm();
+            }
+            if (this.initialValues() && this.form && this.form.pristine) {
+                this.setValue(this.initialValues());
+            }
+        });
+    }
+    createForm() {
+        this.dynamicFormService.createForm(this.config().fields, this.config().validations, this.config().updateOn, this.initialValues());
+        this.formChange.emit(this.form);
+        this.form.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(this.config().debounceTime ?? 0), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.formChange.emit(this.form);
+        });
+    }
+    setValue(values) {
+        this.form.setValue(values);
+        this.form.updateValueAndValidity();
+    }
+    onClickButton(button) {
+        if (button.type === 'reset') {
+            this.reset();
+        }
+        if (button.action) {
+            button.action(this.form);
+        }
+    }
+    reset() {
+        this.form.reset();
+        this.formCancel.emit();
+    }
+    handleSubmit(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.form.valid) {
+            this.formSubmit.emit(this.form);
+        }
+        else {
+            this.form.markAllAsTouched();
+            _.defer(() => {
+                this.focusFirstInvalidControl();
+            });
+        }
+    }
+    focusFirstInvalidControl() {
+        // TODO
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormComponent, 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" }, 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              sotDynamicField\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          <!-- TODO\r\n          <sot-button [type]=\"button.type\"\r\n                     [className]=\"button.className\"\r\n                     [matType]=\"button.matButtonType ?? 'raised'\"\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-button>\r\n          -->\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$2, selector: "[sotDynamicField]", 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective$2, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule], 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              sotDynamicField\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          <!-- TODO\r\n          <sot-button [type]=\"button.type\"\r\n                     [className]=\"button.className\"\r\n                     [matType]=\"button.matButtonType ?? 'raised'\"\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-button>\r\n          -->\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"] }] } });
+
+let AcDivTextComponent$1 = class AcDivTextComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDivTextComponent, isStandalone: true, selector: "sot-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: AcDivTextComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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" }]
+        }] });
+
+let AcFieldCheckboxComponent$1 = 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-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: AcFieldCheckboxComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError], 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"] }]
+        }] });
+
+let AcFieldInputComponent$1 = class AcFieldInputComponent extends AbstractControlFieldComponent {
+    inputType = 'text';
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.data);
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        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) {
+                    control.setValue(null);
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldInputComponent, isStandalone: true, selector: "sot-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: AcFieldInputComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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"] }]
+        }] });
+
+let AcGroupComponent$1 = class AcGroupComponent extends AbstractControlFieldComponent {
+    get subGroup() {
+        return this.group.controls[this.field.name];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcGroupComponent, isStandalone: true, selector: "sot-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 sotDynamicField\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(() => AcDynamicFieldDirective$1), selector: "[sotDynamicField]", 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: AcGroupComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-group', standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective$1),
+                        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 sotDynamicField\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"] }]
+        }] });
+
+let AcArrayComponent$1 = class AcArrayComponent extends AbstractControlFieldComponent {
+    dynamicService = inject(DynamicFormService);
+    ref = inject(ChangeDetectorRef);
+    get array() {
+        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 grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null);
+        this.field.instances.push({
+            number: i,
+            group: grp,
+            fields
+        });
+        this.array.push(grp);
+        this.ref.detectChanges();
+    }
+    deleteItem(index, inst) {
+        /*
+        TODO
+        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);
+          }
+        }
+    
+         */
+        this.array.removeAt(index);
+        this.ref.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcArrayComponent, isStandalone: true, selector: "sot-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 sotDynamicField\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(() => AcDynamicFieldDirective$1), selector: "[sotDynamicField]", 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: AcArrayComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: "sot-array", standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective$1),
+                        MatExpansionModule,
+                        NgClass,
+                        MatIcon,
+                        MatButton,
+                        MatCardModule,
+                        ReactiveFormsModule,
+                        MatError,
+                        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 sotDynamicField\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: () => [] });
+
+let AcRowComponent$1 = class AcRowComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcRowComponent, isStandalone: true, selector: "sot-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        sotDynamicField\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$1), selector: "[sotDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcRowComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-row', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        NgClass,
+                        forwardRef(() => AcDynamicFieldDirective$1),
+                        AcDynamicFieldDirective$1
+                    ], 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        sotDynamicField\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 {
+    static patternValidator(regex, error) {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            const valid = regex.test(control.value);
+            return valid ? null : error;
+        };
+    }
+};
+
+let AcFieldPasswordComponent$1 = class AcFieldPasswordComponent extends AbstractControlFieldComponent {
+    inputType = 'password';
+    showPasswordLabel;
+    hidePasswordLabel;
+    iconErrorLabel;
+    iconSuccessLabel;
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.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";
+        if (this.control) {
+            this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                if (value?.length == 0) {
+                    this.control.setValue(null);
+                }
+            });
+            this.setPasswordValidators();
+        }
+    }
+    tooglePassword() {
+        this.inputType = this.inputType === 'password' ? 'text' : 'password';
+    }
+    get minLengthValid() {
+        return this.control.value && !this.control.hasError("minlength");
+    }
+    get maxLengthValid() {
+        return this.control.value && !this.control.hasError("maxlength");
+    }
+    get requiresDigitValid() {
+        return this.control.value && !this.control.hasError("requiresDigit");
+    }
+    get requiresUppercaseValid() {
+        return this.control.value && !this.control.hasError("requiresUppercase");
+    }
+    get requiresLowercaseValid() {
+        return this.control.value && !this.control.hasError("requiresLowercase");
+    }
+    get requiresSpecialCharsValid() {
+        return this.control.value && !this.control.hasError("requiresSpecialChars");
+    }
+    setPasswordValidators() {
+        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.requiresDigit) {
+            this.control?.addValidators(PasswordValidators$1.patternValidator(/(?=.*[0-9])/, {
+                requiresDigit: true
+            }));
+        }
+        if (this.field.requiresUppercase) {
+            this.control?.addValidators(PasswordValidators$1.patternValidator(/(?=.*[A-Z])/, {
+                requiresUppercase: true
+            }));
+        }
+        if (this.field.requiresLowercase) {
+            this.control?.addValidators(PasswordValidators$1.patternValidator(/(?=.*[a-z])/, {
+                requiresLowercase: true
+            }));
+        }
+        if (this.field.requiresSpecialChars) {
+            const chars = this.field.specialChars?.join("") ?? "$@^!%*?&";
+            const regex = "(?=.*[" + chars + "])";
+            this.control?.addValidators(PasswordValidators$1.patternValidator(new RegExp(regex), {
+                requiresSpecialChars: true
+            }));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldPasswordComponent, isStandalone: true, selector: "sot-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: AcFieldPasswordComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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"] }]
+        }] });
+
+let AcFieldRadioButtonComponent$1 = class AcFieldRadioButtonComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldRadioButtonComponent, isStandalone: true, selector: "sot-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: AcFieldRadioButtonComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass, MatRadioModule, MatError, 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"] }]
+        }] });
+
+let AcFieldSelectComponent$1 = class AcFieldSelectComponent extends AbstractControlFieldComponent {
+    options = [];
+    ngOnInit() {
+        super.ngOnInit();
+        if (isObservable(this.field.options)) {
+            this.field.options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
+                this.options = options;
+            });
+        }
+        else {
+            this.options = this.field.options;
+        }
+    }
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.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-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        [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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([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$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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        [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"] }]
+        }] });
+
+let AcFieldTextareaComponent$1 = class AcFieldTextareaComponent extends AbstractControlFieldComponent {
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.data);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldTextareaComponent, isStandalone: true, selector: "sot-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: AcFieldTextareaComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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"] }]
+        }] });
+
+let AcFieldToggleComponent$1 = class AcFieldToggleComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldToggleComponent, isStandalone: true, selector: "sot-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: AcFieldToggleComponent$1, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError, 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 = {
+    group: AcGroupComponent$1,
+    array: AcArrayComponent$1,
+    row: AcRowComponent$1,
+    text: AcDivTextComponent$1,
+    checkbox: AcFieldCheckboxComponent$1,
+    input: AcFieldInputComponent$1,
+    password: AcFieldPasswordComponent$1,
+    radio: AcFieldRadioButtonComponent$1,
+    select: AcFieldSelectComponent$1,
+    textarea: AcFieldTextareaComponent$1,
+    toggle: AcFieldToggleComponent$1,
+    /*
+    date: AcFieldDateComponent,
+    autocomplete: AcFieldAutocompleteComponent,
+    customField: AcFieldCustomComponent,
+    tabs: AcTabsComponent,
+    file: AcFieldFileComponent,
+     */
+};
+let AcDynamicFieldDirective$1 = class AcDynamicFieldDirective {
+    container = inject(ViewContainerRef);
+    injector = inject(EnvironmentInjector);
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+    path = input.required(...(ngDevMode ? [{ debugName: "path" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    instancePath = input(...(ngDevMode ? [undefined, { debugName: "instancePath" }] : []));
+    component;
+    ngOnChanges(changes) {
+        if (!components$1[this.field().type]) {
+            const supportedTypes = Object.keys(components$1).join(", ");
+            throw new Error(`Trying to use an unsupported type (${this.field().type}).
+          Supported types: ${supportedTypes}`);
+        }
+        else {
+            if (!this.component || changes["type"]) {
+                this.container.clear();
+                this.component = this.container.createComponent(components$1[this.field().type], {
+                    environmentInjector: this.injector
+                });
+            }
+            this.component.instance.field = this.field();
+            this.component.instance.group = this.group();
+            this.component.instance.instancePath = this.instancePath();
+            this.component.instance.path = this.path();
+        }
+    }
+    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: "[sotDynamicField]", 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 });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFieldDirective$1, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[sotDynamicField]",
+                    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 }] }] } });
+
+class AcDsfrDynamicFormComponent {
+    dynamicFormService = inject(DynamicFormService);
+    destroyRef = inject(DestroyRef);
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    initialValues = input(...(ngDevMode ? [undefined, { debugName: "initialValues" }] : []));
+    formCancel = output();
+    formSubmit = output();
+    formChange = output();
+    get form() {
+        return this.dynamicFormService.form;
+    }
+    get controls() {
+        return this.form ? this.form.controls : null;
+    }
+    get changes() {
+        return this.form ? this.form.valueChanges : null;
+    }
+    get valid() {
+        return this.form ? this.form.valid : null;
+    }
+    get value() {
+        return this.form ? this.form.value : null;
+    }
+    constructor() {
+        effect(() => {
+            if (!this.form && this.config() != null) {
+                this.createForm();
+            }
+            if (this.initialValues() && this.form && this.form.pristine) {
+                this.setValue(this.initialValues());
+            }
+        });
+    }
+    createForm() {
+        this.dynamicFormService.createForm(this.config().fields, this.config().validations, this.config().updateOn, this.initialValues());
+        this.formChange.emit(this.form);
+        this.form.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(this.config().debounceTime ?? 0), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.formChange.emit(this.form);
+        });
+    }
+    setValue(values) {
+        this.form.setValue(values);
+        this.form.updateValueAndValidity();
+    }
+    onClickButton(button) {
+        if (button.type === 'reset') {
+            this.reset();
+        }
+        if (button.action) {
+            button.action(this.form);
+        }
+    }
+    reset() {
+        this.form.reset();
+        this.formCancel.emit();
+    }
+    handleSubmit(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.form.valid) {
+            this.formSubmit.emit(this.form);
+        }
+        else {
+            this.form.markAllAsTouched();
+            _.defer(() => {
+                this.focusFirstInvalidControl();
+            });
+        }
+    }
+    focusFirstInvalidControl() {
+        // TODO
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDsfrDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDsfrDynamicFormComponent, isStandalone: true, selector: "sot-dsfr-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" }, 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              sotDynamicField\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          <!-- TODO\r\n          <sot-button [type]=\"button.type\"\r\n                     [className]=\"button.className\"\r\n                     [matType]=\"button.matButtonType ?? 'raised'\"\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-button>\r\n          -->\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$1, selector: "[sotDynamicField]", 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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDsfrDynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'dynamicForm', selector: 'sot-dsfr-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective$1, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule], 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              sotDynamicField\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          <!-- TODO\r\n          <sot-button [type]=\"button.type\"\r\n                     [className]=\"button.className\"\r\n                     [matType]=\"button.matButtonType ?? 'raised'\"\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-button>\r\n          -->\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"] }] } });
+
+class AcDivTextComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDivTextComponent, isStandalone: true, selector: "sot-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: AcDivTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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-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: AcFieldCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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 AcFieldInputComponent extends AbstractControlFieldComponent {
+    inputType = 'text';
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.data);
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        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) {
+                    control.setValue(null);
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldInputComponent, isStandalone: true, selector: "sot-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: AcFieldInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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 AcGroupComponent extends AbstractControlFieldComponent {
+    get subGroup() {
+        return this.group.controls[this.field.name];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcGroupComponent, isStandalone: true, selector: "sot-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 sotDynamicField\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: "[sotDynamicField]", 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: AcGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-group', standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective),
+                        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 sotDynamicField\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 AcArrayComponent extends AbstractControlFieldComponent {
+    dynamicService = inject(DynamicFormService);
+    ref = inject(ChangeDetectorRef);
+    get array() {
+        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 grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null);
+        this.field.instances.push({
+            number: i,
+            group: grp,
+            fields
+        });
+        this.array.push(grp);
+        this.ref.detectChanges();
+    }
+    deleteItem(index, inst) {
+        /*
+        TODO
+        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);
+          }
+        }
+    
+         */
+        this.array.removeAt(index);
+        this.ref.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcArrayComponent, isStandalone: true, selector: "sot-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 sotDynamicField\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(() => AcDynamicFieldDirective), selector: "[sotDynamicField]", 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: AcArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "sot-array", standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective),
+                        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 sotDynamicField\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 AcRowComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcRowComponent, isStandalone: true, selector: "sot-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        sotDynamicField\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: "[sotDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-row', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        NgClass,
+                        forwardRef(() => 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        sotDynamicField\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 {
+    static patternValidator(regex, error) {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            const valid = regex.test(control.value);
+            return valid ? null : error;
+        };
+    }
+}
+
+class AcFieldPasswordComponent extends AbstractControlFieldComponent {
+    inputType = 'password';
+    showPasswordLabel;
+    hidePasswordLabel;
+    iconErrorLabel;
+    iconSuccessLabel;
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.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";
+        if (this.control) {
+            this.control.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+                if (value?.length == 0) {
+                    this.control.setValue(null);
+                }
+            });
+            this.setPasswordValidators();
+        }
+    }
+    tooglePassword() {
+        this.inputType = this.inputType === 'password' ? 'text' : 'password';
+    }
+    get minLengthValid() {
+        return this.control.value && !this.control.hasError("minlength");
+    }
+    get maxLengthValid() {
+        return this.control.value && !this.control.hasError("maxlength");
+    }
+    get requiresDigitValid() {
+        return this.control.value && !this.control.hasError("requiresDigit");
+    }
+    get requiresUppercaseValid() {
+        return this.control.value && !this.control.hasError("requiresUppercase");
+    }
+    get requiresLowercaseValid() {
+        return this.control.value && !this.control.hasError("requiresLowercase");
+    }
+    get requiresSpecialCharsValid() {
+        return this.control.value && !this.control.hasError("requiresSpecialChars");
+    }
+    setPasswordValidators() {
+        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.requiresDigit) {
+            this.control?.addValidators(PasswordValidators.patternValidator(/(?=.*[0-9])/, {
+                requiresDigit: true
+            }));
+        }
+        if (this.field.requiresUppercase) {
+            this.control?.addValidators(PasswordValidators.patternValidator(/(?=.*[A-Z])/, {
+                requiresUppercase: true
+            }));
+        }
+        if (this.field.requiresLowercase) {
+            this.control?.addValidators(PasswordValidators.patternValidator(/(?=.*[a-z])/, {
+                requiresLowercase: true
+            }));
+        }
+        if (this.field.requiresSpecialChars) {
+            const chars = this.field.specialChars?.join("") ?? "$@^!%*?&";
+            const regex = "(?=.*[" + chars + "])";
+            this.control?.addValidators(PasswordValidators.patternValidator(new RegExp(regex), {
+                requiresSpecialChars: true
+            }));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldPasswordComponent, isStandalone: true, selector: "sot-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: AcFieldPasswordComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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 AcFieldRadioButtonComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldRadioButtonComponent, isStandalone: true, selector: "sot-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: AcFieldRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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 AcFieldSelectComponent extends AbstractControlFieldComponent {
+    options = [];
+    ngOnInit() {
+        super.ngOnInit();
+        if (isObservable(this.field.options)) {
+            this.field.options.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((options) => {
+                this.options = options;
+            });
+        }
+        else {
+            this.options = this.field.options;
+        }
+    }
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.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-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        [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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([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: AcFieldSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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        [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 AcFieldToggleComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldToggleComponent, isStandalone: true, selector: "sot-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: AcFieldToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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 AcFieldTextareaComponent extends AbstractControlFieldComponent {
+    buttonAction(b) {
+        if (b.action && this.field && this.group) {
+            b.action(this.field, this.group, this.dynamicFormService.data);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldTextareaComponent, isStandalone: true, selector: "sot-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: AcFieldTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-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 = {
+    group: AcGroupComponent,
+    array: AcArrayComponent,
+    row: AcRowComponent,
+    text: AcDivTextComponent,
+    checkbox: AcFieldCheckboxComponent,
+    input: AcFieldInputComponent,
+    password: AcFieldPasswordComponent,
+    radio: AcFieldRadioButtonComponent,
+    select: AcFieldSelectComponent,
+    textarea: AcFieldTextareaComponent,
+    toggle: AcFieldToggleComponent,
+    /*
+    date: AcFieldDateComponent,
+    autocomplete: AcFieldAutocompleteComponent,
+    customField: AcFieldCustomComponent,
+    tabs: AcTabsComponent,
+    file: AcFieldFileComponent,
+  
+     */
+};
+class AcDynamicFieldDirective {
+    container = inject(ViewContainerRef);
+    injector = inject(EnvironmentInjector);
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
+    path = input.required(...(ngDevMode ? [{ debugName: "path" }] : []));
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    instancePath = input(...(ngDevMode ? [undefined, { debugName: "instancePath" }] : []));
+    component;
+    ngOnChanges(changes) {
+        if (!components[this.field().type]) {
+            const supportedTypes = Object.keys(components).join(", ");
+            throw new Error(`Trying to use an unsupported type (${this.field().type}).
+          Supported types: ${supportedTypes}`);
+        }
+        else {
+            if (!this.component || changes["type"]) {
+                this.container.clear();
+                this.component = this.container.createComponent(components[this.field().type], {
+                    environmentInjector: this.injector
+                });
+            }
+            this.component.instance.field = this.field();
+            this.component.instance.group = this.group();
+            this.component.instance.instancePath = this.instancePath();
+            this.component.instance.path = this.path();
+        }
+    }
+    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: "[sotDynamicField]", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[sotDynamicField]",
+                    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 }] }] } });
+
+class AcClassicDynamicFormComponent {
+    dynamicFormService = inject(DynamicFormService);
+    destroyRef = inject(DestroyRef);
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    initialValues = input(...(ngDevMode ? [undefined, { debugName: "initialValues" }] : []));
+    formCancel = output();
+    formSubmit = output();
+    formChange = output();
+    get form() {
+        return this.dynamicFormService.form;
+    }
+    get controls() {
+        return this.form ? this.form.controls : null;
+    }
+    get changes() {
+        return this.form ? this.form.valueChanges : null;
+    }
+    get valid() {
+        return this.form ? this.form.valid : null;
+    }
+    get value() {
+        return this.form ? this.form.value : null;
+    }
+    constructor() {
+        effect(() => {
+            if (!this.form && this.config() != null) {
+                this.createForm();
+            }
+            if (this.initialValues() && this.form && this.form.pristine) {
+                this.setValue(this.initialValues());
+            }
+        });
+    }
+    createForm() {
+        this.dynamicFormService.createForm(this.config().fields, this.config().validations, this.config().updateOn, this.initialValues());
+        this.formChange.emit(this.form);
+        this.form.valueChanges
+            .pipe(distinctUntilChanged(), debounceTime(this.config().debounceTime ?? 0), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.formChange.emit(this.form);
+        });
+    }
+    setValue(values) {
+        this.form.setValue(values);
+        this.form.updateValueAndValidity();
+    }
+    onClickButton(button) {
+        if (button.type === 'reset') {
+            this.reset();
+        }
+        if (button.action) {
+            button.action(this.form);
+        }
+    }
+    reset() {
+        this.form.reset();
+        this.formCancel.emit();
+    }
+    handleSubmit(event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.form.valid) {
+            this.formSubmit.emit(this.form);
+        }
+        else {
+            this.form.markAllAsTouched();
+            _.defer(() => {
+                this.focusFirstInvalidControl();
+            });
+        }
+    }
+    focusFirstInvalidControl() {
+        // TODO
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcClassicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcClassicDynamicFormComponent, isStandalone: true, selector: "sot-classic-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" }, 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              sotDynamicField\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    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-form-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of config()!.validations; track validation) {\r\n        @if (form && !form.untouched && form.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    @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          <!-- TODO\r\n          <sot-button [type]=\"button.type\"\r\n                     [className]=\"button.className\"\r\n                     [matType]=\"button.matButtonType ?? 'raised'\"\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-button>\r\n          -->\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: "[sotDynamicField]", 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: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcClassicDynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'dynamicForm', selector: 'sot-classic-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule], 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              sotDynamicField\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    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-form-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of config()!.validations; track validation) {\r\n        @if (form && !form.untouched && form.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    @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          <!-- TODO\r\n          <sot-button [type]=\"button.type\"\r\n                     [className]=\"button.className\"\r\n                     [matType]=\"button.matButtonType ?? 'raised'\"\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-button>\r\n          -->\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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractControlFieldComponent, AbstractFieldComponent, AcClassicDynamicFormComponent, AcDsfrDynamicFormComponent, AcMaterialDynamicFormComponent, AutocompleteAttribute, ConditionsService, DynamicFormService };
+//# sourceMappingURL=sotoa-ui-dynamic-form.mjs.map