@sotoa-ui/dynamic-form 0.0.3 → 0.0.4

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, computed, output, effect } from '@angular/core';
+import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, ViewChild, computed, output, effect } from '@angular/core';
 import { distinctUntilChanged, isObservable, take } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as _ from 'lodash-es';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { debounceTime } from 'rxjs/operators';
@@ -15,9 +15,9 @@ 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 * as i1$1 from '@angular/material/button';
 import { MatButtonModule, MatButton, MatIconButton, MatFabButton, MatMiniFabButton } from '@angular/material/button';
-import * as i1$1 from '@angular/material/expansion';
+import * as i1$2 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';
@@ -526,25 +526,25 @@ var AutocompleteAttribute;
     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: [{
+class MatDivTextComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatDivTextComponent, isStandalone: true, selector: "sot-mat-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatDivTextComponent, 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" }]
+            args: [{ selector: 'sot-mat-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n" }]
         }] });
 
-let AcFieldCheckboxComponent$2 = class AcFieldCheckboxComponent extends AbstractControlFieldComponent {
+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: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldCheckboxComponent, isStandalone: true, selector: "sot-mat-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-checkbox [formControlName]=\"field.name\"\r\n                  [id]=\"uuid\"\r\n                  [aria-describedby]=\"'error-' + uuid\"\r\n    >\r\n      <div [ngClass]=\"field.labelClassName\">\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </div>\r\n    </mat-checkbox>\r\n\r\n    <div [attr.id]=\"'error-' + uuid\" class=\"error-wrapper\" matError>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-checkbox [formControlName]=\"field.name\"\r\n                  [id]=\"uuid\"\r\n                  [aria-describedby]=\"'error-' + uuid\"\r\n    >\r\n      <div [ngClass]=\"field.labelClassName\">\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </div>\r\n    </mat-checkbox>\r\n\r\n    <div [attr.id]=\"'error-' + uuid\" class=\"error-wrapper\" matError>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"] }]
+            args: [{ selector: 'sot-mat-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatError], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-checkbox [formControlName]=\"field.name\"\r\n                  [id]=\"uuid\"\r\n                  [aria-describedby]=\"'error-' + uuid\"\r\n    >\r\n      <div [ngClass]=\"field.labelClassName\">\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </div>\r\n    </mat-checkbox>\r\n\r\n    <div [attr.id]=\"'error-' + uuid\" class=\"error-wrapper\" matError>\r\n      @if (control && !control.untouched && control.invalid) {\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"] }]
         }] });
 
-let AcFieldInputComponent$2 = class AcFieldInputComponent extends AbstractControlFieldComponent {
+class MatFieldInputComponent extends AbstractControlFieldComponent {
     inputType = 'text';
     buttonAction(b) {
         if (b.action && this.field && this.group) {
@@ -563,35 +563,35 @@ let AcFieldInputComponent$2 = class AcFieldInputComponent extends AbstractContro
             });
         }
     }
-    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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldInputComponent, isStandalone: true, selector: "sot-mat-field-input", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field>\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\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, 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"] }]
+            args: [{ selector: 'sot-mat-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div\r\n  class=\"sot-formfield sot-formfield-input\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field>\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\" matButton\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{suffix.label}}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n    }\r\n\r\n    @if (field.description) {\r\n      <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n    }\r\n\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <mat-error>\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
-let AcGroupComponent$2 = class AcGroupComponent extends AbstractControlFieldComponent {
+class MatGroupComponent 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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatGroupComponent, isStandalone: true, selector: "sot-mat-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-group-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container matDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-group', standalone: true, imports: [
-                        forwardRef(() => AcDynamicFieldDirective$2),
+            args: [{ selector: 'sot-mat-group', standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective),
                         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"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-group-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container matDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
         }] });
 
-let AcArrayComponent$2 = class AcArrayComponent extends AbstractControlFieldComponent {
+class MatArrayComponent extends AbstractControlFieldComponent {
     dynamicService = inject(DynamicFormService);
     ref = inject(ChangeDetectorRef);
     get array() {
@@ -626,13 +626,13 @@ let AcArrayComponent$2 = class AcArrayComponent extends AbstractControlFieldComp
         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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n    } @else {\n      <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n      @if (field.description) {\n        <p [innerHTML]=\"field.description\"></p>\n      }\n      <div class=\"sot-formfield-array-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container matDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n                @if (field.deleteButton && field.deleteButton.matIcon) {\n                  <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n                    {{ field.deleteButton!.matIcon }}\n                  </mat-icon>\n                }\n                {{ field.deleteButton ? field.deleteButton.label : 'Supprimer' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button mat-raised-button\n                  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), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => i1$2.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i1$2.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i1$2.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatButton), selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sot-array", standalone: true, imports: [
-                        forwardRef(() => AcDynamicFieldDirective$2),
+            args: [{ selector: "sot-mat-array", standalone: true, imports: [
+                        forwardRef(() => AcDynamicFieldDirective),
                         MatExpansionModule,
                         NgClass,
                         MatIcon,
@@ -641,21 +641,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ReactiveFormsModule,
                         MatError,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n    } @else {\n      <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n      @if (field.description) {\n        <p [innerHTML]=\"field.description\"></p>\n      }\n      <div class=\"sot-formfield-array-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container 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"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n    @if (field.accordion) {\n      <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n        <mat-expansion-panel [expanded]=\"field.opened\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          @if (field.description) {\n            <p [innerHTML]=\"field.description\"></p>\n          }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n        </mat-expansion-panel>\n      </mat-accordion>\n    } @else {\n      <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n      @if (field.description) {\n        <p [innerHTML]=\"field.description\"></p>\n      }\n      <div class=\"sot-formfield-array-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container matDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n                @if (field.deleteButton && field.deleteButton.matIcon) {\n                  <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n                    {{ field.deleteButton!.matIcon }}\n                  </mat-icon>\n                }\n                {{ field.deleteButton ? field.deleteButton.label : 'Supprimer' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button mat-raised-button\n                  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: [{
+class MatRowComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatRowComponent, isStandalone: true, selector: "sot-mat-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        matDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-row', standalone: true, imports: [
+            args: [{ selector: 'sot-mat-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" }]
+                        forwardRef(() => AcDynamicFieldDirective),
+                        AcDynamicFieldDirective
+                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        matDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
         }] });
 
 let PasswordValidators$2 = class PasswordValidators {
@@ -670,7 +670,7 @@ let PasswordValidators$2 = class PasswordValidators {
     }
 };
 
-let AcFieldPasswordComponent$2 = class AcFieldPasswordComponent extends AbstractControlFieldComponent {
+class MatFieldPasswordComponent extends AbstractControlFieldComponent {
     inputType = 'password';
     showPasswordLabel;
     hidePasswordLabel;
@@ -747,24 +747,24 @@ let AcFieldPasswordComponent$2 = class AcFieldPasswordComponent extends Abstract
             }));
         }
     }
-    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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldPasswordComponent, isStandalone: true, selector: "sot-mat-field-password", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"sot-formfield sot-formfield-password\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <mat-form-field>\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-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-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"] }]
+            args: [{ selector: 'sot-mat-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-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"] }]
         }] });
 
-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: [{
+class MatFieldRadioButtonComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldRadioButtonComponent, isStandalone: true, selector: "sot-mat-field-radio-button", usesInheritance: true, ngImport: i0, template: "<fieldset\r\n  class=\"sot-formfield sot-formfield-radiobutton\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <legend [attr.id]=\"'radiobutton-'+uuid\" class=\"sot-formfield-radiobutton-label\">\r\n    {{ field.label }} {{ !!required ? '*' : '' }}\r\n    @if (field.description) {\r\n      <span class=\"radiobutton-description\">{{ field.description }}</span>\r\n    }\r\n  </legend>\r\n  <mat-radio-group class=\"sot-formfield-radiobutton-content\"\r\n                   [id]=\"uuid\"\r\n                   [attr.aria-labelledby]=\"'radiobutton-'+uuid\"\r\n                   [formControlName]=\"field.name\"\r\n                   [ngClass]=\"{'verticalAlign': field.verticalAlign, 'horizontalAlign': !field.verticalAlign}\"\r\n  >\r\n    @if (field.options) {\r\n      @for (item of field.options; track item) {\r\n        <mat-radio-button\r\n          class=\"sot-formfield-radiobutton-item\"\r\n          [ngClass]=\"field.radioButtonClassName\"\r\n          [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n          [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n          <span class=\"item-label\">{{ field.labelKey ? item[field.labelKey!] : item }}</span>\r\n          @if (field.descriptionKey) {\r\n            <span class=\"item-description\">{{ item[field.descriptionKey] }}</span>\r\n          }\r\n        </mat-radio-button>\r\n      }\r\n    }\r\n  </mat-radio-group>\r\n  <mat-error>\r\n    @for (validation of field.validations; track validation) {\r\n      @if (control && !control.untouched && control.hasError(validation.name)) {\r\n        {{ validation.message }}\r\n      }\r\n    }\r\n  </mat-error>\r\n</fieldset>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatIconModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldRadioButtonComponent, 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"] }]
+            args: [{ selector: 'sot-mat-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass, MatRadioModule, MatError, MatTooltipModule, MatIconModule], template: "<fieldset\r\n  class=\"sot-formfield sot-formfield-radiobutton\"\r\n  [ngClass]=\"field.className\"\r\n  [formGroup]=\"group\"\r\n>\r\n  <legend [attr.id]=\"'radiobutton-'+uuid\" class=\"sot-formfield-radiobutton-label\">\r\n    {{ field.label }} {{ !!required ? '*' : '' }}\r\n    @if (field.description) {\r\n      <span class=\"radiobutton-description\">{{ field.description }}</span>\r\n    }\r\n  </legend>\r\n  <mat-radio-group class=\"sot-formfield-radiobutton-content\"\r\n                   [id]=\"uuid\"\r\n                   [attr.aria-labelledby]=\"'radiobutton-'+uuid\"\r\n                   [formControlName]=\"field.name\"\r\n                   [ngClass]=\"{'verticalAlign': field.verticalAlign, 'horizontalAlign': !field.verticalAlign}\"\r\n  >\r\n    @if (field.options) {\r\n      @for (item of field.options; track item) {\r\n        <mat-radio-button\r\n          class=\"sot-formfield-radiobutton-item\"\r\n          [ngClass]=\"field.radioButtonClassName\"\r\n          [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n          [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n          <span class=\"item-label\">{{ field.labelKey ? item[field.labelKey!] : item }}</span>\r\n          @if (field.descriptionKey) {\r\n            <span class=\"item-description\">{{ item[field.descriptionKey] }}</span>\r\n          }\r\n        </mat-radio-button>\r\n      }\r\n    }\r\n  </mat-radio-group>\r\n  <mat-error>\r\n    @for (validation of field.validations; track validation) {\r\n      @if (control && !control.untouched && control.hasError(validation.name)) {\r\n        {{ validation.message }}\r\n      }\r\n    }\r\n  </mat-error>\r\n</fieldset>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
         }] });
 
-let AcFieldSelectComponent$2 = class AcFieldSelectComponent extends AbstractControlFieldComponent {
+class MatFieldSelectComponent extends AbstractControlFieldComponent {
     options = [];
     ngOnInit() {
         super.ngOnInit();
@@ -782,35 +782,35 @@ let AcFieldSelectComponent$2 = class AcFieldSelectComponent extends AbstractCont
             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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldSelectComponent, isStandalone: true, selector: "sot-mat-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\"\r\n     [ngClass]=\"field.className\"\r\n     [formGroup]=\"group\">\r\n  <mat-form-field>\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: MatFieldSelectComponent, 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"] }]
+            args: [{ selector: 'sot-mat-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\"\r\n     [ngClass]=\"field.className\"\r\n     [formGroup]=\"group\">\r\n  <mat-form-field>\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 {
+class MatFieldTextareaComponent 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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldTextareaComponent, isStandalone: true, selector: "sot-mat-field-textarea", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"sot-formfield sot-formfield-textarea\"\n  [ngClass]=\"field.className\"\n  [formGroup]=\"group\"\n>\n  <mat-form-field>\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: MatFieldTextareaComponent, 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"] }]
+            args: [{ selector: 'sot-mat-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div\n  class=\"sot-formfield sot-formfield-textarea\"\n  [ngClass]=\"field.className\"\n  [formGroup]=\"group\"\n>\n  <mat-form-field>\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: [{
+class MatFieldToggleComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldToggleComponent, isStandalone: true, selector: "sot-mat-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toggle\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-slide-toggle\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'toggle-' + field.name\"\r\n      [labelPosition]=\"field.labelPosition ?? 'after'\"\r\n    >\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"red\">*</span>\r\n      }\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"messages-group\" [attr.id]=\"'toggle-' + field.name + '-error'\" aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p>{{ validation.message }}</p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldToggleComponent, 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" }]
+            args: [{ selector: 'sot-mat-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatSlideToggleModule], template: "<div class=\"sot-formfield sot-formfield-toggle\" [ngClass]=\"field.className\">\r\n  <div [formGroup]=\"group\">\r\n    <mat-slide-toggle\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'toggle-' + field.name\"\r\n      [labelPosition]=\"field.labelPosition ?? 'after'\"\r\n    >\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"red\">*</span>\r\n      }\r\n    </mat-slide-toggle>\r\n\r\n    <div class=\"messages-group\" [attr.id]=\"'toggle-' + field.name + '-error'\" aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p>{{ validation.message }}</p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class AcFieldCustomDirective extends NgControl {
@@ -896,36 +896,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['ngModelChange']
             }] } });
 
-class AcFieldCustomComponent extends AbstractControlFieldComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AcFieldCustomComponent, isStandalone: true, selector: "ac-field-custom", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field.className\"\n     [formGroup]=\"group\" >\n    <ng-container fieldCustom [field]=\"field\" [group]=\"group\" > </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AcFieldCustomDirective, selector: "[fieldCustom]", inputs: ["field", "group"], outputs: ["ngModelChange"] }] });
+class MatFieldCustomComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldCustomComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MatFieldCustomComponent, isStandalone: true, selector: "ac-mat-field-custom", usesInheritance: true, ngImport: i0, template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field.className\"\n     [formGroup]=\"group\" >\n    <ng-container fieldCustom [field]=\"field\" [group]=\"group\" > </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AcFieldCustomDirective, selector: "[fieldCustom]", inputs: ["field", "group"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldCustomComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "ac-mat-field-custom", standalone: true, imports: [ReactiveFormsModule, NgClass, AcFieldCustomDirective], template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field.className\"\n     [formGroup]=\"group\" >\n    <ng-container fieldCustom [field]=\"field\" [group]=\"group\" > </ng-container>\n</div>\n" }]
+        }] });
+
+class MatInputFileComponent {
+    destroyRef = inject(DestroyRef);
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    fileInput;
+    fileList = [];
+    fichier = null;
+    disabled = false;
+    value = null;
+    onChange = (value) => {
+    };
+    onTouched = () => {
+    };
+    constructor() {
+    }
+    ngOnInit() {
+        if (this.group().get(this.field().name)?.value) {
+            this.fileList = this.group().get(this.field().name)?.value;
+        }
+        // @ts-ignore
+        this.group()
+            .get(this.field().name)
+            .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value1) => {
+            if (JSON.stringify(value1) !== JSON.stringify(this.fileList)) {
+                this.fileList = value1;
+            }
+        });
+    }
+    writeValue(value) {
+        this.value = value && (!this.field().multiple || value.length > 0) ? value : null;
+        this.onChange(this.value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onSelectFile(event) {
+        if (event && event.target && event.target.files && event.target.files.length > 0) {
+            this.fichier = event.target.files[0];
+        }
+        else if (this.fileInput && this.fileInput.nativeElement) {
+            this.fichier = null;
+            this.fileInput.nativeElement.value = null;
+        }
+        if (!this.field().multiple) {
+            this.writeValue(this.fichier);
+        }
+    }
+    addFile() {
+        if (this.fichier) {
+            if (!this.fileList) {
+                this.fileList = [];
+            }
+            this.fileList.push(this.fichier);
+            if (this.field().onAddFile) {
+                this.field().onAddFile(this.fichier);
+            }
+            this.fichier = null;
+            if (this.fileInput && this.fileInput.nativeElement) {
+                this.fileInput.nativeElement.value = null;
+            }
+        }
+        this.writeValue(this.fileList);
+    }
+    deleteFile(pj) {
+        this.fileList.splice(this.fileList.indexOf(pj), 1);
+        this.writeValue(this.fileList);
+        if (this.field().onDeleteFile) {
+            this.field().onDeleteFile(pj);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatInputFileComponent, isStandalone: true, selector: "sot-mat-input-file", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => MatInputFileComponent),
+            },
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div>\n  @if (field().multiple) {\n    <div class=\"file-title\">{{ field().label }} ({{ fileList ? fileList.length : 0 }})</div>\n\n    <ul>\n      @for (pj of fileList; track pj) {\n        <li class=\"file-list-item\">\n          <div>{{ pj.name }}</div>\n          <div>\n            @if (!field().disabled) {\n              <button mat-icon-button\n                      (click)=\"deleteFile(pj)\"\n                      title=\"Supprimer\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            }\n          </div>\n        </li>\n      }\n    </ul>\n    <div>\n      <input\n        #fileInput\n        class=\"fr-upload\"\n        type=\"file\"\n        id=\"file-upload\"\n        name=\"file-upload\"\n        (change)=\"onSelectFile($event)\"\n        [accept]=\"field().accept ? field().accept : '*/*'\"\n      />\n      <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFile()\">Joindre</button>\n    </div>\n  } @else {\n    <div class=\"file-title\">{{ field().label }}</div>\n    <input\n      class=\"fr-upload\"\n      type=\"file\"\n      [attr.id]=\"'file-upload' + field().name\"\n      name=\"file-upload\"\n      (change)=\"onSelectFile($event)\"\n      [accept]=\"field().accept ? field().accept : '*/*'\"\n    />\n  }\n</div>\n", styles: ["table{width:100%;border-collapse:collapse}table th{text-align:left}table td{border-bottom:1px solid grey;padding:2rem 0}table .ligne-ajout td{border:none}.file-title{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sot-mat-input-file', standalone: true, imports: [ReactiveFormsModule, MatButtonModule, MatIconModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => MatInputFileComponent),
+                        },
+                    ], template: "<div>\n  @if (field().multiple) {\n    <div class=\"file-title\">{{ field().label }} ({{ fileList ? fileList.length : 0 }})</div>\n\n    <ul>\n      @for (pj of fileList; track pj) {\n        <li class=\"file-list-item\">\n          <div>{{ pj.name }}</div>\n          <div>\n            @if (!field().disabled) {\n              <button mat-icon-button\n                      (click)=\"deleteFile(pj)\"\n                      title=\"Supprimer\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            }\n          </div>\n        </li>\n      }\n    </ul>\n    <div>\n      <input\n        #fileInput\n        class=\"fr-upload\"\n        type=\"file\"\n        id=\"file-upload\"\n        name=\"file-upload\"\n        (change)=\"onSelectFile($event)\"\n        [accept]=\"field().accept ? field().accept : '*/*'\"\n      />\n      <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFile()\">Joindre</button>\n    </div>\n  } @else {\n    <div class=\"file-title\">{{ field().label }}</div>\n    <input\n      class=\"fr-upload\"\n      type=\"file\"\n      [attr.id]=\"'file-upload' + field().name\"\n      name=\"file-upload\"\n      (change)=\"onSelectFile($event)\"\n      [accept]=\"field().accept ? field().accept : '*/*'\"\n    />\n  }\n</div>\n", styles: ["table{width:100%;border-collapse:collapse}table th{text-align:left}table td{border-bottom:1px solid grey;padding:2rem 0}table .ligne-ajout td{border:none}.file-title{font-weight:700}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+class MatFieldFileComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldFileComponent, isStandalone: true, selector: "sot-mat-field-file", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-file\" [ngClass]=\"field.className\" [formGroup]=\"group\">\n  <sot-mat-input-file [formControlName]=\"field.name\" [field]=\"field\"\n                      [group]=\"group\"></sot-mat-input-file>\n  @for (validation of field.validations; track validation) {\n    @if (control && !control.untouched && control.hasError(validation.name)) {\n      <mat-error>{{ validation.message }}</mat-error>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatInputFileComponent, selector: "sot-mat-input-file", inputs: ["field", "group"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCustomComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ac-field-custom", standalone: true, imports: [ReactiveFormsModule, NgClass, AcFieldCustomDirective], template: "<div class=\"ac-form-field ac-form-field-custom\"\n     [ngClass]=\"field.className\"\n     [formGroup]=\"group\" >\n    <ng-container fieldCustom [field]=\"field\" [group]=\"group\" > </ng-container>\n</div>\n" }]
+            args: [{ selector: 'sot-mat-field-file', standalone: true, imports: [ReactiveFormsModule, NgClass, MatError, MatInputFileComponent], template: "<div class=\"sot-formfield sot-formfield-file\" [ngClass]=\"field.className\" [formGroup]=\"group\">\n  <sot-mat-input-file [formControlName]=\"field.name\" [field]=\"field\"\n                      [group]=\"group\"></sot-mat-input-file>\n  @for (validation of field.validations; track validation) {\n    @if (control && !control.untouched && control.hasError(validation.name)) {\n      <mat-error>{{ validation.message }}</mat-error>\n    }\n  }\n</div>\n" }]
         }] });
 
 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,
-    customField: AcFieldCustomComponent,
+    text: MatDivTextComponent,
+    group: MatGroupComponent,
+    array: MatArrayComponent,
+    row: MatRowComponent,
+    checkbox: AcFieldCheckboxComponent,
+    input: MatFieldInputComponent,
+    password: MatFieldPasswordComponent,
+    radio: MatFieldRadioButtonComponent,
+    select: MatFieldSelectComponent,
+    textarea: MatFieldTextareaComponent,
+    toggle: MatFieldToggleComponent,
+    customField: MatFieldCustomComponent,
+    file: MatFieldFileComponent,
     /*
     date: AcFieldDateComponent,
     autocomplete: AcFieldAutocompleteComponent,
     tabs: AcTabsComponent,
-    file: AcFieldFileComponent,
      */
 };
-let AcDynamicFieldDirective$2 = class AcDynamicFieldDirective {
+class AcDynamicFieldDirective {
     container = inject(ViewContainerRef);
     injector = inject(EnvironmentInjector);
     type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
@@ -954,12 +1063,12 @@ let AcDynamicFieldDirective$2 = class AcDynamicFieldDirective {
         }
     }
     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: [{
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: AcDynamicFieldDirective, isStandalone: true, selector: "[matDynamicField]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, instancePath: { classPropertyName: "instancePath", publicName: "instancePath", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFieldDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[sotDynamicField]",
+                    selector: "[matDynamicField]",
                     standalone: true
                 }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], instancePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "instancePath", required: false }] }] } });
@@ -983,11 +1092,11 @@ class MaterialButton {
         this.buttonClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialButton, isStandalone: true, selector: "sot-material-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matType: { classPropertyName: "matType", publicName: "matType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeOptions: { classPropertyName: "badgeOptions", publicName: "badgeOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@switch (buttonMatType()) {\r\n  @case ('button-basic') {\r\n    <button matButton\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-basic') {\r\n    <a type=\"link\" matButton\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-outlined') {\r\n    <button matButton=\"outlined\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-outlined') {\r\n    <a type=\"link\" matButton=\"outlined\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-elevated') {\r\n    <button matButton=\"elevated\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-elevated') {\r\n    <a type=\"link\" matButton=\"elevated\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-filled') {\r\n    <button matButton=\"filled\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-filled') {\r\n    <a type=\"link\" matButton=\"filled\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-tonal') {\r\n    <button matButton=\"tonal\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-tonal') {\r\n    <a type=\"link\" matButton=\"tonal\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-icon') {\r\n    <button matIconButton\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-icon') {\r\n    <a type=\"link\" matIconButton\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-fab') {\r\n    <button matFab\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-fab') {\r\n    <a type=\"link\" matFab\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-mini-fab') {\r\n    <button matMiniFab\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-mini-fab') {\r\n    <a type=\"link\" matMiniFab\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-menu') {\r\n    <button mat-menu-item\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-menu') {\r\n    <a type=\"link\" mat-menu-item\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n  @if (matIcon()) {\r\n    <mat-icon\r\n      aria-hidden=\"true\"\r\n      [fontIcon]=\"matIcon()!\"\r\n    ></mat-icon>\r\n  }\r\n  <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialButton, isStandalone: true, selector: "sot-mat-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matType: { classPropertyName: "matType", publicName: "matType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeOptions: { classPropertyName: "badgeOptions", publicName: "badgeOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@switch (buttonMatType()) {\r\n  @case ('button-basic') {\r\n    <button matButton\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-basic') {\r\n    <a type=\"link\" matButton\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-outlined') {\r\n    <button matButton=\"outlined\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-outlined') {\r\n    <a type=\"link\" matButton=\"outlined\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-elevated') {\r\n    <button matButton=\"elevated\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-elevated') {\r\n    <a type=\"link\" matButton=\"elevated\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-filled') {\r\n    <button matButton=\"filled\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-filled') {\r\n    <a type=\"link\" matButton=\"filled\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-tonal') {\r\n    <button matButton=\"tonal\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-tonal') {\r\n    <a type=\"link\" matButton=\"tonal\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-icon') {\r\n    <button matIconButton\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-icon') {\r\n    <a type=\"link\" matIconButton\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-fab') {\r\n    <button matFab\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-fab') {\r\n    <a type=\"link\" matFab\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-mini-fab') {\r\n    <button matMiniFab\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-mini-fab') {\r\n    <a type=\"link\" matMiniFab\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-menu') {\r\n    <button mat-menu-item\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-menu') {\r\n    <a type=\"link\" mat-menu-item\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n  @if (matIcon()) {\r\n    <mat-icon\r\n      aria-hidden=\"true\"\r\n      [fontIcon]=\"matIcon()!\"\r\n    ></mat-icon>\r\n  }\r\n  <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-material-button', imports: [
+            args: [{ selector: 'sot-mat-button', imports: [
                         NgClass,
                         MatBadge,
                         MatButton,
@@ -995,11 +1104,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatFabButton,
                         MatMiniFabButton,
                         MatMenuItem,
-                        MatIcon
+                        MatIcon,
+                        NgTemplateOutlet
                     ], template: "@switch (buttonMatType()) {\r\n  @case ('button-basic') {\r\n    <button matButton\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-basic') {\r\n    <a type=\"link\" matButton\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-outlined') {\r\n    <button matButton=\"outlined\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-outlined') {\r\n    <a type=\"link\" matButton=\"outlined\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-elevated') {\r\n    <button matButton=\"elevated\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-elevated') {\r\n    <a type=\"link\" matButton=\"elevated\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-filled') {\r\n    <button matButton=\"filled\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-filled') {\r\n    <a type=\"link\" matButton=\"filled\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-tonal') {\r\n    <button matButton=\"tonal\"\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-tonal') {\r\n    <a type=\"link\" matButton=\"tonal\"\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-icon') {\r\n    <button matIconButton\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-icon') {\r\n    <a type=\"link\" matIconButton\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-fab') {\r\n    <button matFab\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-fab') {\r\n    <a type=\"link\" matFab\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-mini-fab') {\r\n    <button matMiniFab\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-mini-fab') {\r\n    <a type=\"link\" matMiniFab\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n  @case ('button-menu') {\r\n    <button mat-menu-item\r\n            [type]=\"type()\"\r\n            [ngClass]=\"className()\"\r\n            [title]=\"title() ?? ''\"\r\n            [attr.aria-label]=\"ariaLabel()\"\r\n            [disabled]=\"disabled()\"\r\n            [disableRipple]=\"disableRipple()\"\r\n            [matBadge]=\"badge()\"\r\n            [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n            [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n            [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n            [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n            [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n            [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n            (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </button>\r\n  }\r\n  @case ('link-menu') {\r\n    <a type=\"link\" mat-menu-item\r\n       [ngClass]=\"className()\"\r\n       [title]=\"title() ?? ''\"\r\n       [attr.aria-label]=\"ariaLabel()\"\r\n       [disabled]=\"disabled()\"\r\n       [disableRipple]=\"disableRipple()\"\r\n       [matBadge]=\"badge()\"\r\n       [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n       [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n       [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n       [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n       [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n       [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n       (click)=\"clickButton($event)\">\r\n      <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n    </a>\r\n  }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n  @if (matIcon()) {\r\n    <mat-icon\r\n      aria-hidden=\"true\"\r\n      [fontIcon]=\"matIcon()!\"\r\n    ></mat-icon>\r\n  }\r\n  <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n" }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], matType: [{ type: i0.Input, args: [{ isSignal: true, alias: "matType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disableRipple: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRipple", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeOptions", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
 
-class AcMaterialDynamicFormComponent {
+class MaterialDynamicFormComponent {
     dynamicFormService = inject(DynamicFormService);
     destroyRef = inject(DestroyRef);
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -1075,15 +1185,15 @@ class AcMaterialDynamicFormComponent {
     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          <sot-material-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-material-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective$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 }, { kind: "component", type: MaterialButton, selector: "sot-material-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormComponent, isStandalone: true, selector: "sot-material-dynamic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange" }, providers: [DynamicFormService], exportAs: ["dynamicForm"], ngImport: i0, template: "@if (form && config()) {\r\n  <form class=\"dynamic-form\"\r\n        [formGroup]=\"form\"\r\n        (submit)=\"handleSubmit($event)\"\r\n        [ngClass]=\"config()!.className?.form\">\r\n    @if (this.config()!.fields) {\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"config()!.className?.formContent\">\r\n        @for (field of config()!.fields; track field.type + field.name) {\r\n          <div [hidden]=\"!!field.hidden\"\r\n               [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- TODO Revoir l'affichage des erreurs -->\r\n    @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n      <mat-error class=\"dynamic-form-error\">\r\n        @for (validation of config()!.validations!; track validation) {\r\n          @if (form.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n    @if (config()!.buttons) {\r\n      <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n        @for (button of config()!.buttons; track $index) {\r\n          <sot-mat-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-mat-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective$2, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule, MaterialButton], providers: [DynamicFormService], template: "@if (form && config()) {\r\n  <form class=\"dynamic-form\"\r\n        [formGroup]=\"form\"\r\n        (submit)=\"handleSubmit($event)\"\r\n        [ngClass]=\"config()!.className?.form\">\r\n    @if (this.config()!.fields) {\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"config()!.className?.formContent\">\r\n        @for (field of config()!.fields; track field.type + field.name) {\r\n          <div [hidden]=\"!!field.hidden\"\r\n               [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              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          <sot-material-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-material-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"] }]
+            args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule, MaterialButton], providers: [DynamicFormService], template: "@if (form && config()) {\r\n  <form class=\"dynamic-form\"\r\n        [formGroup]=\"form\"\r\n        (submit)=\"handleSubmit($event)\"\r\n        [ngClass]=\"config()!.className?.form\">\r\n    @if (this.config()!.fields) {\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"config()!.className?.formContent\">\r\n        @for (field of config()!.fields; track field.type + field.name) {\r\n          <div [hidden]=\"!!field.hidden\"\r\n               [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <!-- TODO Revoir l'affichage des erreurs -->\r\n    @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n      <mat-error class=\"dynamic-form-error\">\r\n        @for (validation of config()!.validations!; track validation) {\r\n          @if (form.hasError(validation.name)) {\r\n            {{ validation.message }}\r\n          }\r\n        }\r\n      </mat-error>\r\n    }\r\n    @if (config()!.buttons) {\r\n      <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n        @for (button of config()!.buttons; track $index) {\r\n          <sot-mat-button\r\n            [type]=\"button.type\"\r\n            [className]=\"button.className\"\r\n            [matType]=\"button.matButtonType\"\r\n            [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n            [matIcon]=\"button.matIcon\"\r\n            [label]=\"button.label\"\r\n            [title]=\"button.title\"\r\n            [ariaLabel]=\"button.ariaLabel\"\r\n            (buttonClick)=\"onClickButton(button)\"\r\n          ></sot-mat-button>\r\n        }\r\n      </div>\r\n    }\r\n  </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], formCancel: [{ type: i0.Output, args: ["formCancel"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }] } });
 
-class AcMaterialDynamicFormModalComponent {
+class MaterialDynamicFormModalComponent {
     dialogRef = inject((MatDialogRef));
     dynamicFormService = inject(DynamicFormService);
     data = inject(MAT_DIALOG_DATA);
@@ -1113,33 +1223,33 @@ class AcMaterialDynamicFormModalComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormModalComponent, isStandalone: true, selector: "ac-dynamic-form-modal", providers: [DynamicFormService], ngImport: i0, template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              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    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-material-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-material-button>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: AcDynamicFieldDirective$2, selector: "[sotDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "component", type: MaterialButton, selector: "sot-material-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialDynamicFormModalComponent, isStandalone: true, selector: "ac-dynamic-form-modal", providers: [DynamicFormService], ngImport: i0, template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-mat-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-mat-button>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialDynamicFormModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ac-dynamic-form-modal", standalone: true, imports: [NgClass, ReactiveFormsModule, MatIconModule, MatButtonModule, MatDialogModule, AcDynamicFieldDirective$2, MaterialButton], providers: [DynamicFormService], template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              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    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-material-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-material-button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: "ac-dynamic-form-modal", standalone: true, imports: [NgClass, ReactiveFormsModule, MatIconModule, MatButtonModule, MatDialogModule, AcDynamicFieldDirective, MaterialButton], providers: [DynamicFormService], template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n  @if (data.description) {\r\n    <p [innerHTML]=\"data.description\"></p>\r\n  }\r\n  @if (form) {\r\n    <form class=\"dynamic-form\"\r\n          [formGroup]=\"form\"\r\n          [ngClass]=\"data.className?.form\">\r\n      <div class=\"dynamic-form-content\"\r\n           [ngClass]=\"data.className?.formContent\">\r\n        @for (field of data.fields; track field) {\r\n          <div\r\n            [hidden]=\"!!field.hidden\"\r\n            [ngClass]=\"field.hostClassName\">\r\n            <ng-container\r\n              matDynamicField\r\n              [path]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [field]=\"field\"\r\n              [group]=\"form\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </form>\r\n  }\r\n  @if (message) {\r\n    <div [innerHTML]=\"message\"\r\n         [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n    ></div>\r\n  }\r\n</div>\r\n\r\n<div matDialogActions>\r\n  <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n    @for (button of data.buttons; track $index) {\r\n      <sot-mat-button\r\n                 [className]=\"button.className\"\r\n                 [matType]=\"button.matButtonType\"\r\n                 [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n                 [matIcon]=\"button.matIcon\"\r\n                 [label]=\"button.label\"\r\n                 [title]=\"button.title\"\r\n                 [ariaLabel]=\"button.ariaLabel\"\r\n                 (buttonClick)=\"onClickButton(button)\"\r\n      ></sot-mat-button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [] });
 
-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: [{
+class DsfrDivTextComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrDivTextComponent, isStandalone: true, selector: "sot-dsfr-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDivTextComponent, 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" }]
+            args: [{ selector: 'sot-dsfr-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n" }]
         }] });
 
-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: [{
+class DsfrFieldCheckboxComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldCheckboxComponent, isStandalone: true, selector: "sot-dsfr-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-checkbox-group\"\r\n    [ngClass]=\"{\r\n        'fr-checkbox-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-checkbox-group--valid': control && !control.untouched && control.valid,\r\n        'fr-checkbox-group--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid\"\r\n      [ngClass]=\"{\r\n          'fr-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-checkbox--valid': control && !control.untouched && control.valid,\r\n          'fr-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldCheckboxComponent, 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"] }]
+            args: [{ selector: 'sot-dsfr-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-checkbox-group\"\r\n    [ngClass]=\"{\r\n        'fr-checkbox-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-checkbox-group--valid': control && !control.untouched && control.valid,\r\n        'fr-checkbox-group--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n      type=\"checkbox\"\r\n      [formControlName]=\"field.name\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid\"\r\n      [ngClass]=\"{\r\n          'fr-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'fr-checkbox--valid': control && !control.untouched && control.valid,\r\n          'fr-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error-wrapper{padding:0 16px;font-size:var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));color:var(--mat-form-field-error-text-color, var(--mat-sys-error));line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-app-body-small-line-height))}\n"] }]
         }] });
 
-let AcFieldInputComponent$1 = class AcFieldInputComponent extends AbstractControlFieldComponent {
+class DsfrFieldInputComponent extends AbstractControlFieldComponent {
     inputType = 'text';
     buttonAction(b) {
         if (b.action && this.field && this.group) {
@@ -1158,35 +1268,35 @@ let AcFieldInputComponent$1 = class AcFieldInputComponent extends AbstractContro
             });
         }
     }
-    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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldInputComponent, isStandalone: true, selector: "sot-dsfr-field-input", usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-input\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled) || field.readonly,\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldInputComponent, 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"] }]
+            args: [{ selector: 'sot-dsfr-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div class=\"form-field-input\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled) || field.readonly,\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
-let AcGroupComponent$1 = class AcGroupComponent extends AbstractControlFieldComponent {
+class DsfrGroupComponent 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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrGroupComponent, isStandalone: true, selector: "sot-dsfr-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'fr-accordion': field.accordion,\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + field.name\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + field.name\">\n        @if (field.description) {\n          <p class=\"fr-hint-text\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div *ngTemplateOutlet=\"groupFields\"></div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"\">\n    @for (f of field.fields; track f.type + f.name) {\n      <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n        <ng-container dsfrDynamicField\n                      [type]=\"f.type\"\n                      [path]=\"path + '.' + f.name\"\n                      [field]=\"f\"\n                      [group]=\"subGroup\"\n                      [instancePath]=\"instancePath\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-group', standalone: true, imports: [
-                        forwardRef(() => AcDynamicFieldDirective$1),
+            args: [{ selector: 'sot-dsfr-group', standalone: true, imports: [
+                        forwardRef(() => DsfrDynamicFieldDirective),
                         NgClass,
                         MatAccordion,
                         MatExpansionPanel,
                         MatExpansionPanelHeader,
                         MatExpansionPanelTitle,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'fr-accordion': field.accordion,\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + field.name\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + field.name\">\n        @if (field.description) {\n          <p class=\"fr-hint-text\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div *ngTemplateOutlet=\"groupFields\"></div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"\">\n    @for (f of field.fields; track f.type + f.name) {\n      <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n        <ng-container 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"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'fr-accordion': field.accordion,\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + field.name\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + field.name\">\n        @if (field.description) {\n          <p class=\"fr-hint-text\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div *ngTemplateOutlet=\"groupFields\"></div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"\">\n    @for (f of field.fields; track f.type + f.name) {\n      <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n        <ng-container dsfrDynamicField\n                      [type]=\"f.type\"\n                      [path]=\"path + '.' + f.name\"\n                      [field]=\"f\"\n                      [group]=\"subGroup\"\n                      [instancePath]=\"instancePath\"\n        ></ng-container>\n      </div>\n    }\n  </div>\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
         }] });
 
-let AcArrayComponent$1 = class AcArrayComponent extends AbstractControlFieldComponent {
+class DsfrArrayComponent extends AbstractControlFieldComponent {
     dynamicService = inject(DynamicFormService);
     ref = inject(ChangeDetectorRef);
     get array() {
@@ -1221,36 +1331,33 @@ let AcArrayComponent$1 = class AcArrayComponent extends AbstractControlFieldComp
         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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrArrayComponent, isStandalone: true, selector: "sot-dsfr-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{'fr-accordion': field.accordion}\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container dsfrDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"fr-btn\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"fr-btn\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"fr-messages-group\"\n        [attr.id]=\"'fr-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"fr-message fr-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrArrayComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sot-array", standalone: true, imports: [
-                        forwardRef(() => AcDynamicFieldDirective$1),
+            args: [{ selector: "sot-dsfr-array", standalone: true, imports: [
+                        forwardRef(() => DsfrDynamicFieldDirective),
                         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"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{'fr-accordion': field.accordion}\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"fr-accordion__title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"fr-accordion__btn\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n        </button>\n      </legend>\n      <div\n        class=\"fr-collapse\"\n        [ngClass]=\"{ 'fr-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend [ngClass]=\"field.labelClassName\">\n        {{ field.label }}\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"fr-hint-text\">{{ field.description }}</span>\n        }\n      </legend>\n      <div [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container dsfrDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"fr-btn\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"fr-btn\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"fr-messages-group\"\n        [attr.id]=\"'fr-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"fr-message fr-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
         }], ctorParameters: () => [] });
 
-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: [{
+class DsfrRowComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrRowComponent, isStandalone: true, selector: "sot-dsfr-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        dsfrDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => DsfrDynamicFieldDirective), selector: "[dsfrDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-row', standalone: true, imports: [
+            args: [{ selector: 'sot-dsfr-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" }]
+                        forwardRef(() => DsfrDynamicFieldDirective),
+                        DsfrDynamicFieldDirective
+                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        dsfrDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
         }] });
 
 let PasswordValidators$1 = class PasswordValidators {
@@ -1265,7 +1372,7 @@ let PasswordValidators$1 = class PasswordValidators {
     }
 };
 
-let AcFieldPasswordComponent$1 = class AcFieldPasswordComponent extends AbstractControlFieldComponent {
+class DsfrFieldPasswordComponent extends AbstractControlFieldComponent {
     inputType = 'password';
     showPasswordLabel;
     hidePasswordLabel;
@@ -1342,24 +1449,24 @@ let AcFieldPasswordComponent$1 = class AcFieldPasswordComponent extends Abstract
             }));
         }
     }
-    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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldPasswordComponent, isStandalone: true, selector: "sot-dsfr-field-password", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"fr-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldPasswordComponent, 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"] }]
+            args: [{ selector: 'sot-dsfr-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid,\r\n        'fr-input-group--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"fr-input\"\r\n        [ngClass]=\"{\r\n            'fr-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'fr-input--valid': control && !control.untouched && control.valid,\r\n            'fr-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"fr-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"fr-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n                  [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"] }]
         }] });
 
-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: [{
+class DsfrFieldRadioButtonComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldRadioButtonComponent, isStandalone: true, selector: "sot-dsfr-field-radio-button", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"form-field-radio\"\r\n  [hidden]=\"field.hidden\"\r\n  [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"fr-fieldset\"\r\n    [ngClass]=\"{\r\n      'fr-fieldset--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'fr-fieldset--valid': control && !control.untouched && control.valid,\r\n      'fr-fieldset--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"fr-fieldset__legend--regular fr-fieldset__legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if(field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"fr-fieldset__element\"\r\n          [ngClass]=\"{ 'fr-fieldset__element--inline': !field.verticalAlign }\">\r\n          <div class=\"fr-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"/>\r\n            <label\r\n              class=\"fr-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              @if (field.descriptionKey) {\r\n                <span class=\"fr-hint-text\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <div\r\n        class=\"fr-messages-group\"\r\n        [attr.id]=\"'text-radio-' + uuid + '-error'\"\r\n        aria-live=\"polite\">\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            <p class=\"fr-error-text\">\r\n              {{ validation.message }}\r\n            </p>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatIconModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldRadioButtonComponent, 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"] }]
+            args: [{ selector: 'sot-dsfr-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass, MatRadioModule, MatTooltipModule, MatIconModule], template: "<div\r\n  class=\"form-field-radio\"\r\n  [hidden]=\"field.hidden\"\r\n  [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"fr-fieldset\"\r\n    [ngClass]=\"{\r\n      'fr-fieldset--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'fr-fieldset--valid': control && !control.untouched && control.valid,\r\n      'fr-fieldset--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"fr-fieldset__legend--regular fr-fieldset__legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if(field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"fr-fieldset__element\"\r\n          [ngClass]=\"{ 'fr-fieldset__element--inline': !field.verticalAlign }\">\r\n          <div class=\"fr-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"/>\r\n            <label\r\n              class=\"fr-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              {{ field.labelKey ? item[field.labelKey!] : item }}\r\n              @if (field.descriptionKey) {\r\n                <span class=\"fr-hint-text\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    @if (control && !control.untouched && control.invalid) {\r\n      <div\r\n        class=\"fr-messages-group\"\r\n        [attr.id]=\"'text-radio-' + uuid + '-error'\"\r\n        aria-live=\"polite\">\r\n        @for (validation of field.validations; track validation) {\r\n          @if (control.hasError(validation.name)) {\r\n            <p class=\"fr-error-text\">\r\n              {{ validation.message }}\r\n            </p>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
         }] });
 
-let AcFieldSelectComponent$1 = class AcFieldSelectComponent extends AbstractControlFieldComponent {
+class AcFieldSelectComponent extends AbstractControlFieldComponent {
     options = [];
     ngOnInit() {
         super.ngOnInit();
@@ -1378,48 +1485,48 @@ let AcFieldSelectComponent$1 = class AcFieldSelectComponent extends AbstractCont
         }
     }
     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: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcFieldSelectComponent, isStandalone: true, selector: "sot-dsfr-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-select-group\"\r\n    [ngClass]=\"{\r\n        'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-select-group--valid': control && !control.untouched && control.valid,\r\n        'fr-select-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"fr-select\"\r\n        [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, 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"] }]
+            args: [{ selector: 'sot-dsfr-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-select-group\"\r\n    [ngClass]=\"{\r\n        'fr-select-group--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'fr-select-group--valid': control && !control.untouched && control.valid,\r\n        'fr-select-group--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"fr-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      {{ field.label }}\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\" matPrefix>\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"fr-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"fr-select\"\r\n        [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 {
+class DsfrFieldTextareaComponent 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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldTextareaComponent, isStandalone: true, selector: "sot-dsfr-field-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"fr-input-group\"\n    [ngClass]=\"{\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\n        'fr-input-group--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"fr-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      {{ field.label }}\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\" matPrefix>\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"fr-input\"\n        [ngClass]=\"{\n          'fr-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'fr-input--valid': control && !control.untouched && control.valid ,\n          'fr-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"fr-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"fr-error-text\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatButtonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldTextareaComponent, 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"] }]
+            args: [{ selector: 'sot-dsfr-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"fr-input-group\"\n    [ngClass]=\"{\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\n        'fr-input-group--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"fr-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      {{ field.label }}\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"fr-hint-text\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"fr-input-wrap fr-input-wrap--addon\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\" matPrefix>\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"fr-input\"\n        [ngClass]=\"{\n          'fr-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'fr-input--valid': control && !control.untouched && control.valid ,\n          'fr-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"fr-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"fr-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"fr-error-text\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"] }]
         }] });
 
-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: [{
+class DsfrFieldToggleComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrFieldToggleComponent, isStandalone: true, selector: "sot-dsfr-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"fr-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"fr-toggle__input\"\r\n        [attr.id]=\"'toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"/>\r\n      <label\r\n        class=\"fr-toggle__label\"\r\n        [attr.for]=\"'toggle-' + uuid\"\r\n        [attr.data-fr-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-fr-unchecked-label]=\"field.uncheckedLabel\"\r\n      >{{ field.label }}\r\n        @if (required) {\r\n          <span class=\"red\">*</span>\r\n        }\r\n      </label>\r\n      <p\r\n        class=\"fr-hint-text\">\r\n        {{ field.description }}\r\n      </p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrFieldToggleComponent, 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" }]
+            args: [{ selector: 'sot-dsfr-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass, MatCheckboxModule, MatSlideToggleModule], template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"fr-input-group\"\r\n    [ngClass]=\"{\r\n        'fr-input-group--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'fr-input-group--valid': control && !control.untouched && control.valid ,\r\n        'fr-input-group--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"fr-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"fr-toggle__input\"\r\n        [attr.id]=\"'toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"/>\r\n      <label\r\n        class=\"fr-toggle__label\"\r\n        [attr.for]=\"'toggle-' + uuid\"\r\n        [attr.data-fr-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-fr-unchecked-label]=\"field.uncheckedLabel\"\r\n      >{{ field.label }}\r\n        @if (required) {\r\n          <span class=\"red\">*</span>\r\n        }\r\n      </label>\r\n      <p\r\n        class=\"fr-hint-text\">\r\n        {{ field.description }}\r\n      </p>\r\n    </div>\r\n\r\n    <div\r\n      class=\"fr-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"fr-message fr-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 const components$1 = {
-    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,
+    group: DsfrGroupComponent,
+    array: DsfrArrayComponent,
+    row: DsfrRowComponent,
+    text: DsfrDivTextComponent,
+    checkbox: DsfrFieldCheckboxComponent,
+    input: DsfrFieldInputComponent,
+    password: DsfrFieldPasswordComponent,
+    radio: DsfrFieldRadioButtonComponent,
+    select: AcFieldSelectComponent,
+    textarea: DsfrFieldTextareaComponent,
+    toggle: DsfrFieldToggleComponent,
     /*
     date: AcFieldDateComponent,
     autocomplete: AcFieldAutocompleteComponent,
@@ -1428,7 +1535,7 @@ const components$1 = {
     file: AcFieldFileComponent,
      */
 };
-let AcDynamicFieldDirective$1 = class AcDynamicFieldDirective {
+class DsfrDynamicFieldDirective {
     container = inject(ViewContainerRef);
     injector = inject(EnvironmentInjector);
     type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
@@ -1456,18 +1563,18 @@ let AcDynamicFieldDirective$1 = class AcDynamicFieldDirective {
             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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDynamicFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: DsfrDynamicFieldDirective, isStandalone: true, selector: "[dsfrDynamicField]", 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: DsfrDynamicFieldDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[sotDynamicField]",
+                    selector: "[dsfrDynamicField]",
                     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 {
+class DsfrDynamicFormComponent {
     dynamicFormService = inject(DynamicFormService);
     destroyRef = inject(DestroyRef);
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -1543,33 +1650,33 @@ class AcDsfrDynamicFormComponent {
     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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrDynamicFormComponent, 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              dsfrDynamicField\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: DsfrDynamicFieldDirective, selector: "[dsfrDynamicField]", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDynamicFormComponent, 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"] }]
+            args: [{ exportAs: 'dynamicForm', selector: 'sot-dsfr-dynamic-form', standalone: true, imports: [DsfrDynamicFieldDirective, 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              dsfrDynamicField\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"] }] });
+class ClassicDivTextComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicDivTextComponent, isStandalone: true, selector: "sot-classic-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDivTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicDivTextComponent, 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" }]
+            args: [{ selector: 'sot-classic-div-text', standalone: true, imports: [NgClass], template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n  <div [innerHTML]=\"field.label\"></div>\n  @if(field.description) {\n    <p [innerHTML]=\"field.description\"></p>\n  }\n</div>\n" }]
         }] });
 
-class 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"] }] });
+class ClassicFieldCheckboxComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldCheckboxComponent, isStandalone: true, selector: "sot-classic-field-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n      [formGroup]=\"group\"\r\n      class=\"sot-formfield-wrapper\"\r\n      [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n        type=\"checkbox\"\r\n        [formControlName]=\"field.name\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid\"\r\n        [ngClass]=\"{\r\n          'sot-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-checkbox--valid': control && !control.untouched && control.valid,\r\n          'sot-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n        class=\"sot-label\"\r\n        [ngClass]=\"field.labelClassName\"\r\n        [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n        class=\"sot-messages-group\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n        aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldCheckboxComponent, 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" }]
+            args: [{ selector: 'sot-classic-field-checkbox', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-checkbox\" [ngClass]=\"field.className\">\r\n  <div\r\n      [formGroup]=\"group\"\r\n      class=\"sot-formfield-wrapper\"\r\n      [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <input\r\n        type=\"checkbox\"\r\n        [formControlName]=\"field.name\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid\"\r\n        [ngClass]=\"{\r\n          'sot-checkbox--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-checkbox--valid': control && !control.untouched && control.valid,\r\n          'sot-checkbox--disabled': control && control.disabled,\r\n        }\" />\r\n    <label\r\n        class=\"sot-label\"\r\n        [ngClass]=\"field.labelClassName\"\r\n        [attr.for]=\"'sot-checkbox-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div\r\n        class=\"sot-messages-group\"\r\n        [attr.id]=\"'sot-checkbox-' + uuid + '-error'\"\r\n        aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-class AcFieldInputComponent extends AbstractControlFieldComponent {
+class ClassicFieldInputComponent extends AbstractControlFieldComponent {
     inputType = 'text';
     buttonAction(b) {
         if (b.action && this.field && this.group) {
@@ -1588,31 +1695,31 @@ class AcFieldInputComponent extends AbstractControlFieldComponent {
             });
         }
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldInputComponent, isStandalone: true, selector: "sot-classic-field-input", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-input\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n          @if (prefix.action) {\r\n            <button type=\"button\"\r\n                    class=\"sot-button\"\r\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                    (click)=\"buttonAction(prefix)\"\r\n            >{{ prefix.label }}</button>\r\n          } @else {\r\n            <span [innerHTML]=\"prefix.label\"></span>\r\n          }\r\n        </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldInputComponent, 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"] }]
+            args: [{ selector: 'sot-classic-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-input\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n          @if (prefix.action) {\r\n            <button type=\"button\"\r\n                    class=\"sot-button\"\r\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                    (click)=\"buttonAction(prefix)\"\r\n            >{{ prefix.label }}</button>\r\n          } @else {\r\n            <span [innerHTML]=\"prefix.label\"></span>\r\n          }\r\n        </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"field.inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [readonly]=\"field.readonly\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
-class AcGroupComponent extends AbstractControlFieldComponent {
+class ClassicGroupComponent 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicGroupComponent, isStandalone: true, selector: "sot-classic-group", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n  @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n\n  } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n  }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container classicDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-group', standalone: true, imports: [
-                        forwardRef(() => AcDynamicFieldDirective),
+            args: [{ selector: 'sot-classic-group', standalone: true, imports: [
+                        forwardRef(() => ClassiDynamicFieldDirective),
                         NgClass,
                         NgTemplateOutlet
-                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n  @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n\n  } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n  }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container 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"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-group\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n  @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'group-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'group-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n          <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n\n\n  } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n  }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  @for (f of field.fields; track f.type + f.name) {\n    <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n      <ng-container classicDynamicField\n                    [type]=\"f.type\"\n                    [path]=\"path + '.' + f.name\"\n                    [field]=\"f\"\n                    [group]=\"subGroup\"\n                    [instancePath]=\"instancePath\"\n      ></ng-container>\n    </div>\n  }\n  <div\n    class=\"sot-messages-group\"\n    [attr.id]=\"'sot-group-' + uuid + '-error'\"\n    aria-live=\"assertive\">\n    @for (validation of field.validations; track validation) {\n      @if (control && !control.untouched && control.hasError(validation.name)) {\n        <p class=\"sot-message sot-message--error\">\n          {{ validation.message }}\n        </p>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["fieldset{border:none;padding:0;margin:0}\n"] }]
         }] });
 
-class AcArrayComponent extends AbstractControlFieldComponent {
+class ClassicArrayComponent extends AbstractControlFieldComponent {
     dynamicService = inject(DynamicFormService);
     ref = inject(ChangeDetectorRef);
     get array() {
@@ -1647,30 +1754,30 @@ class AcArrayComponent extends AbstractControlFieldComponent {
         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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicArrayComponent, isStandalone: true, selector: "sot-classic-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\"\n           [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container classicDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"sot-button\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"sot-button\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"sot-messages-group\"\n        [attr.id]=\"'sot-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"sot-message sot-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicArrayComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sot-array", standalone: true, imports: [
-                        forwardRef(() => AcDynamicFieldDirective),
+            args: [{ selector: "sot-classic-array", standalone: true, imports: [
+                        forwardRef(() => ClassiDynamicFieldDirective),
                         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"] }]
+                    ], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n  <fieldset\n    class=\"sot-formfield-wrapper sot-fieldset\"\n    [ngClass]=\"{\n        'sot-accordion': field.accordion,\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid,\n        'sot-formfield--disabled': (control && control.disabled),\n      }\"\n  >\n    @if (field.accordion) {\n      <legend\n        class=\"sot-accordion-title\"\n        [ngClass]=\"field.labelClassName\">\n        <button\n          type=\"button\"\n          class=\"sot-accordion-button\"\n          [attr.aria-expanded]=\"!!field.opened\"\n          [attr.aria-controls]=\"'array-content-' + uuid\">\n          {{ field.label }}\n          @if (required) {\n            <span class=\"sot-label-required\">*</span>\n          }\n        </button>\n      </legend>\n      <div\n        class=\"sot-collapse sot-accordion-content sot-fieldset-content\"\n        [ngClass]=\"{ 'sot-collapse--expanded': !!field.opened }\"\n        [attr.id]=\"'array-content-' + uuid\">\n        @if (field.description) {\n          <p class=\"sot-label-description\">{{ field.description }}</p>\n        }\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    } @else {\n      <legend\n        class=\"sot-fieldset-legend\"\n        [ngClass]=\"field.labelClassName\">\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n        @if (required) {\n          <span class=\"sot-label-required\">*</span>\n        }\n        @if (field.description) {\n          <span class=\"sot-label-description\">{{ field.description }}</span>\n        }\n      </legend>\n      <div class=\"sot-fieldset-content\"\n           [attr.id]=\"'array-content-' + uuid\">\n        <div *ngTemplateOutlet=\"groupFields\"></div>\n      </div>\n    }\n  </fieldset>\n</div>\n\n<ng-template #groupFields>\n  <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n    <div [formArrayName]=\"field.name\">\n      @for (inst of field.instances; track inst; let i = $index) {\n        <fieldset class=\"sot-formfield-array-element\"\n                  [ngClass]=\"field.elementClassName\">\n          <legend class=\"sot-formfield-array-element-label\">\n            {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n          </legend>\n          <div class=\"sot-formfield-array-element-content\"\n               [ngClass]=\"field.elementContentClassName\">\n            @for (f of inst.fields; track f.name + f.type) {\n              <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n                <ng-container classicDynamicField\n                              [type]=\"f.type\"\n                              [path]=\"path + '.' + f.name\"\n                              [field]=\"f\"\n                              [group]=\"inst.group\"\n                              [instancePath]=\"path + '[' + inst.number + ']'\"\n                ></ng-container>\n              </div>\n            }\n          </div>\n          <div class=\"sot-formfield-array-element-action\">\n            @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n              <button type=\"button\"\n                      class=\"sot-button\"\n                      (click)=\"deleteItem(i, inst)\"\n              >\n                {{ field.deleteButton?.label ?? 'Delete' }}\n              </button>\n            }\n          </div>\n        </fieldset>\n      }\n      @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n        <div class=\"sot-formfield-array-add-button\">\n          <button type=\"button\"\n                  class=\"sot-button\"\n                  (click)=\"addItem()\"\n          >\n            {{ field.addButton?.label ?? 'Add' }}\n          </button>\n        </div>\n      }\n      <div\n        class=\"sot-messages-group\"\n        [attr.id]=\"'sot-array-' + uuid + '-error'\"\n        aria-live=\"assertive\">\n        @for (validation of field.validations; track validation) {\n          @if (control && !control.untouched && control.hasError(validation.name)) {\n            <p class=\"sot-message sot-message--error\">\n              {{ validation.message }}\n            </p>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
         }], ctorParameters: () => [] });
 
-class 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"] }] });
+class ClassicRowComponent extends AbstractFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicRowComponent, isStandalone: true, selector: "sot-classic-row", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        classicDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => ClassiDynamicFieldDirective), selector: "[classicDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sot-row', standalone: true, imports: [
+            args: [{ selector: 'sot-classic-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" }]
+                        forwardRef(() => ClassiDynamicFieldDirective)
+                    ], template: "<div class=\"sot-formfield sot-formfield-row\" [ngClass]=\"field.className\">\n  @for (f of field.fields; track f.type + f.name) {\n    <div\n      [hidden]=\"f.hidden\"\n      [ngClass]=\"f.hostClassName\">\n      <ng-container\n        classicDynamicField\n        [path]=\"path + '.' + f.name\"\n        [type]=\"f.type\"\n        [field]=\"f\"\n        [group]=\"group\"\n        [instancePath]=\"instancePath\"\n      >\n      </ng-container>\n    </div>\n  }\n</div>\n" }]
         }] });
 
 class PasswordValidators {
@@ -1685,7 +1792,7 @@ class PasswordValidators {
     }
 }
 
-class AcFieldPasswordComponent extends AbstractControlFieldComponent {
+class ClassicFieldPasswordComponent extends AbstractControlFieldComponent {
     inputType = 'password';
     showPasswordLabel;
     hidePasswordLabel;
@@ -1762,24 +1869,24 @@ class AcFieldPasswordComponent extends AbstractControlFieldComponent {
             }));
         }
     }
-    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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldPasswordComponent, isStandalone: true, selector: "sot-classic-field-password", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"sot-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <span [ngClass]=\"minLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <span [ngClass]=\"maxLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"maxLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <span [ngClass]=\"requiresDigitValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresDigitValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <span [ngClass]=\"requiresUppercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresUppercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <span [ngClass]=\"requiresLowercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresLowercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <span [ngClass]=\"requiresSpecialCharsValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresSpecialCharsValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldPasswordComponent, 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"] }]
+            args: [{ selector: 'sot-classic-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-password\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': (control && control.disabled),\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-input-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n\r\n      <input\r\n        class=\"sot-input\"\r\n        [ngClass]=\"{\r\n            'sot-input--error': control && !control.untouched && !control.valid && !control.disabled,\r\n            'sot-input--valid': control && !control.untouched && control.valid,\r\n            'sot-input--disabled': (control && control.disabled),\r\n          }\"\r\n        [type]=\"inputType\"\r\n        [attr.id]=\"'sot-input-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n        [maxlength]=\"field.maxlength ?? 10000000\"/>\r\n\r\n      <button type=\"button\" class=\"sot-button\"\r\n              (click)=\"tooglePassword()\"\r\n              [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n              [attr.aria-pressed]=\"inputType === 'password'\">\r\n        @if(inputType === 'password') {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-off-fill\"></span>\r\n        } @else {\r\n          <span aria-hidden=\"true\" class=\"sot-icon-eye-fill\"></span>\r\n        }\r\n      </button>\r\n\r\n      @for (suffix of field.suffixes; track suffix) {\r\n        <span class=\"sot-formfield-suffix\">\r\n        @if (suffix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(suffix)\"\r\n          >{{ suffix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"suffix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n    @if (field.minlength) {\r\n      <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n        <span [ngClass]=\"minLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.maxlength) {\r\n      <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n        <span [ngClass]=\"maxLengthValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"maxLengthValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresDigit) {\r\n      <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n        <span [ngClass]=\"requiresDigitValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresDigitValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresUppercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n        <span [ngClass]=\"requiresUppercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresUppercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresLowercase) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n        <span [ngClass]=\"requiresLowercaseValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresLowercaseValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n      </li>\r\n    }\r\n    @if (field.requiresSpecialChars) {\r\n      <li\r\n        [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n        <span [ngClass]=\"requiresSpecialCharsValid ? 'check' : 'error'\"\r\n              [attr.aria-label]=\"requiresSpecialCharsValid ? iconSuccessLabel : iconErrorLabel\"></span>\r\n        {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}\n"] }]
         }] });
 
-class 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"] }] });
+class ClassicFieldRadioButtonComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldRadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldRadioButtonComponent, isStandalone: true, selector: "sot-classic-field-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-radio\" [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"sot-formfield-wrapper sot-fieldset\"\r\n    [ngClass]=\"{\r\n      'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'sot-formfield--valid': control && !control.untouched && control.valid,\r\n      'sot-formfield--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"sot-fieldset-legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      <span class=\"sot-legend-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if (field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"sot-fieldset-element\"\r\n          [ngClass]=\"{ 'sot-fieldset--inline': !field.verticalAlign }\">\r\n          <div class=\"sot-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"\r\n              [ngClass]=\"{\r\n                'sot-radio--error': control && !control.untouched && !control.valid && !control.disabled,\r\n                'sot-radio--valid': control && !control.untouched && control.valid,\r\n                'sot-radio--disabled': control && control.disabled,\r\n              }\"/>\r\n            <label\r\n              class=\"sot-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              <span class=\"sot-label-text\"\r\n                    [innerHTML]=\"field.labelKey ? item[field.labelKey!] : item\"></span>\r\n              @if (field.descriptionKey) {\r\n                <span class=\"sot-label-description\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-radio-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldRadioButtonComponent, 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"] }]
+            args: [{ selector: 'sot-classic-field-radio-button', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-radio\" [ngClass]=\"field.className\">\r\n  <fieldset\r\n    class=\"sot-formfield-wrapper sot-fieldset\"\r\n    [ngClass]=\"{\r\n      'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n      'sot-formfield--valid': control && !control.untouched && control.valid,\r\n      'sot-formfield--disabled': control && control.disabled,\r\n    }\"\r\n    [id]=\"'radio-' + uuid\"\r\n    [attr.aria-labelledby]=\"'radio-legend-' + uuid\"\r\n    [formGroup]=\"group\">\r\n    <legend\r\n      class=\"sot-fieldset-legend\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [id]=\"'radio-legend-' + uuid\">\r\n      <span class=\"sot-legend-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </legend>\r\n    @if (field.options) {\r\n      @for (item of field.options; track item; let i = $index) {\r\n        <div\r\n          class=\"sot-fieldset-element\"\r\n          [ngClass]=\"{ 'sot-fieldset--inline': !field.verticalAlign }\">\r\n          <div class=\"sot-radio-group\">\r\n            <input\r\n              type=\"radio\"\r\n              [id]=\"'radio-' + uuid + '-' + i\"\r\n              [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n              [attr.name]=\"uuid\"\r\n              [formControlName]=\"field.name\"\r\n              [attr.disabled]=\"field.disabledKey && !!item[field.disabledKey] ? true : undefined\"\r\n              [ngClass]=\"{\r\n                'sot-radio--error': control && !control.untouched && !control.valid && !control.disabled,\r\n                'sot-radio--valid': control && !control.untouched && control.valid,\r\n                'sot-radio--disabled': control && control.disabled,\r\n              }\"/>\r\n            <label\r\n              class=\"sot-label\"\r\n              [for]=\"'radio-' + uuid + '-' + i\">\r\n              <span class=\"sot-label-text\"\r\n                    [innerHTML]=\"field.labelKey ? item[field.labelKey!] : item\"></span>\r\n              @if (field.descriptionKey) {\r\n                <span class=\"sot-label-description\">{{ item[field.descriptionKey] }}</span>\r\n              }\r\n            </label>\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-radio-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </fieldset>\r\n</div>\r\n", styles: [".verticalAlign{display:flex;flex-direction:column}.horizontalAlign{display:flex;flex-direction:row;gap:2rem}.sot-formfield-radiobutton-label{display:flex;flex-direction:column}.sot-formfield-radiobutton-item ::ng-deep label{display:flex;flex-direction:column}\n"] }]
         }] });
 
-class AcFieldSelectComponent extends AbstractControlFieldComponent {
+class ClassicFieldSelectComponent extends AbstractControlFieldComponent {
     options = [];
     ngOnInit() {
         super.ngOnInit();
@@ -1797,49 +1904,49 @@ class AcFieldSelectComponent extends AbstractControlFieldComponent {
             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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldSelectComponent, isStandalone: true, selector: "sot-classic-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"sot-select\"\r\n        [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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldSelectComponent, 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"] }]
+            args: [{ selector: 'sot-classic-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-select\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <label\r\n      class=\"sot-label\"\r\n      [ngClass]=\"field.labelClassName\"\r\n      [attr.for]=\"'sot-select-' + uuid\">\r\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n      @if (required) {\r\n        <span class=\"sot-label-required\">*</span>\r\n      }\r\n      @if (field.description) {\r\n        <span class=\"sot-label-description\">{{ field.description }}</span>\r\n      }\r\n    </label>\r\n    <div class=\"sot-input-wrapper\">\r\n      @for (prefix of field.prefixes; track prefix) {\r\n        <span class=\"sot-formfield-prefix\">\r\n        @if (prefix.action) {\r\n          <button type=\"button\"\r\n                  class=\"sot-button\"\r\n                  [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n                  (click)=\"buttonAction(prefix)\"\r\n          >{{ prefix.label }}</button>\r\n        } @else {\r\n          <span [innerHTML]=\"prefix.label\"></span>\r\n        }\r\n      </span>\r\n      }\r\n      <select\r\n        class=\"sot-select\"\r\n        [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"] }] });
+class ClassicFieldToggleComponent extends AbstractControlFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldToggleComponent, isStandalone: true, selector: "sot-classic-field-toggle", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"sot-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"sot-toggle-input\"\r\n        [attr.id]=\"'sot-toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"\r\n        [ngClass]=\"{\r\n          'sot-toggle--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-toggle--valid': control && !control.untouched && control.valid,\r\n          'sot-toggle--disabled': control && control.disabled,\r\n        }\"/>\r\n      <label\r\n        class=\"sot-toggle-label\"\r\n        [attr.for]=\"'sot-toggle-' + uuid\"\r\n        [attr.data-sot-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-sot-unchecked-label]=\"field.uncheckedLabel\"\r\n      >\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </label>\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldToggleComponent, 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" }]
+            args: [{ selector: 'sot-classic-field-toggle', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-toogle\" [ngClass]=\"field.className\">\r\n  <div\r\n    [formGroup]=\"group\"\r\n    class=\"sot-formfield-wrapper\"\r\n    [ngClass]=\"{\r\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\r\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\r\n        'sot-formfield--disabled': control && control.disabled,\r\n      }\">\r\n    <div class=\"sot-toggle\">\r\n      <input\r\n        type=\"checkbox\"\r\n        class=\"sot-toggle-input\"\r\n        [attr.id]=\"'sot-toggle-' + uuid\"\r\n        [formControlName]=\"field.name\"\r\n        [required]=\"!!required\"\r\n        [attr.disabled]=\"field.disabled\"\r\n        [ngClass]=\"{\r\n          'sot-toggle--error': control && !control.untouched && !control.valid && !control.disabled,\r\n          'sot-toggle--valid': control && !control.untouched && control.valid,\r\n          'sot-toggle--disabled': control && control.disabled,\r\n        }\"/>\r\n      <label\r\n        class=\"sot-toggle-label\"\r\n        [attr.for]=\"'sot-toggle-' + uuid\"\r\n        [attr.data-sot-checked-label]=\"field.checkedLabel\"\r\n        [attr.data-sot-unchecked-label]=\"field.uncheckedLabel\"\r\n      >\r\n        <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\r\n        @if (required) {\r\n          <span class=\"sot-label-required\">*</span>\r\n        }\r\n        @if (field.description) {\r\n          <span class=\"sot-label-description\">{{ field.description }}</span>\r\n        }\r\n      </label>\r\n    </div>\r\n    <div\r\n      class=\"sot-messages-group\"\r\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\r\n      aria-live=\"assertive\">\r\n      @for (validation of field.validations; track validation) {\r\n        @if (control && !control.untouched && control.hasError(validation.name)) {\r\n          <p class=\"sot-message sot-message--error\">\r\n            {{ validation.message }}\r\n          </p>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
-class AcFieldTextareaComponent extends AbstractControlFieldComponent {
+class ClassicFieldTextareaComponent 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicFieldTextareaComponent, isStandalone: true, selector: "sot-classic-field-textarea", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"sot-formfield-wrapper\"\n    [ngClass]=\"{\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\n        'sot-formfield--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"sot-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"sot-label-description\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"sot-input-wrapper\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\">\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"sot-textarea\"\n        [ngClass]=\"{\n          'sot-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'sot-input--valid': control && !control.untouched && control.valid ,\n          'sot-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"sot-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"sot-message sot-message--error\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcFieldTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicFieldTextareaComponent, 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"] }]
+            args: [{ selector: 'sot-classic-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass], template: "<div class=\"sot-formfield sot-formfield-textarea\" [ngClass]=\" field.className\">\n  <div\n    [formGroup]=\"group\"\n    class=\"sot-formfield-wrapper\"\n    [ngClass]=\"{\n        'sot-formfield--error': control && !control.untouched && !control.valid  && !control.disabled,\n        'sot-formfield--valid': control && !control.untouched && control.valid ,\n        'sot-formfield--disabled': control && control.disabled,\n      }\">\n    <label\n      class=\"sot-label\"\n      [ngClass]=\"field.labelClassName\"\n      [attr.for]=\"'sot-textarea-' + uuid\">\n      <span class=\"sot-label-text\" [innerHTML]=\"field.label\"></span>\n      @if (required) {\n        <span class=\"sot-label-required\">*</span>\n      }\n      @if (field.description) {\n        <span class=\"sot-label-description\">{{ field.description }}</span>\n      }\n    </label>\n    <div class=\"sot-input-wrapper\">\n      @for (prefix of field.prefixes; track prefix) {\n        <span class=\"sot-formfield-prefix\">\n          @if (prefix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"prefix.actionAriaLabel\"\n                    (click)=\"buttonAction(prefix)\"\n            >{{ prefix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"prefix.label\"></span>\n          }\n        </span>\n      }\n\n      <textarea\n        class=\"sot-textarea\"\n        [ngClass]=\"{\n          'sot-input--error': control && !control.untouched && !control.valid  && !control.disabled,\n          'sot-input--valid': control && !control.untouched && control.valid ,\n          'sot-input--disabled': control && control.disabled,\n        }\"\n        [attr.id]=\"'sot-textarea-' + uuid\"\n        [formControlName]=\"field.name\"\n        [required]=\"!!required\"\n        [readonly]=\"field.readonly\"\n        [rows]=\"field.rows\"\n        [maxlength]=\"field.maxlength ?? 10000000\">\n      </textarea>\n\n      @for (suffix of field.suffixes; track suffix) {\n        <span class=\"sot-formfield-suffix\">\n          @if (suffix.action) {\n            <button type=\"button\"\n                    class=\"sot-button\"\n                    [attr.aria-label]=\"suffix.actionAriaLabel\"\n                    (click)=\"buttonAction(suffix)\"\n            >{{ suffix.label }}</button>\n          } @else {\n            <span [innerHTML]=\"suffix.label\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div\n      class=\"sot-messages-group\"\n      [attr.id]=\"'sot-input-' + uuid + '-error'\"\n      aria-live=\"assertive\">\n      @for (validation of field.validations; track validation) {\n        @if (control && !control.untouched && control.hasError(validation.name)) {\n          <p class=\"sot-message sot-message--error\">\n            {{ validation.message }}\n          </p>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [".sot-formfield-textarea{width:100%}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
         }] });
 
 const components = {
-    group: AcGroupComponent,
-    array: AcArrayComponent,
-    row: AcRowComponent,
-    text: AcDivTextComponent,
-    checkbox: AcFieldCheckboxComponent,
-    input: AcFieldInputComponent,
-    password: AcFieldPasswordComponent,
-    radio: AcFieldRadioButtonComponent,
-    select: AcFieldSelectComponent,
-    textarea: AcFieldTextareaComponent,
-    toggle: AcFieldToggleComponent,
+    group: ClassicGroupComponent,
+    array: ClassicArrayComponent,
+    row: ClassicRowComponent,
+    text: ClassicDivTextComponent,
+    checkbox: ClassicFieldCheckboxComponent,
+    input: ClassicFieldInputComponent,
+    password: ClassicFieldPasswordComponent,
+    radio: ClassicFieldRadioButtonComponent,
+    select: ClassicFieldSelectComponent,
+    textarea: ClassicFieldTextareaComponent,
+    toggle: ClassicFieldToggleComponent,
     /*
     date: AcFieldDateComponent,
     autocomplete: AcFieldAutocompleteComponent,
@@ -1849,7 +1956,7 @@ const components = {
   
      */
 };
-class AcDynamicFieldDirective {
+class ClassiDynamicFieldDirective {
     container = inject(ViewContainerRef);
     injector = inject(EnvironmentInjector);
     type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
@@ -1877,18 +1984,18 @@ class AcDynamicFieldDirective {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassiDynamicFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ClassiDynamicFieldDirective, isStandalone: true, selector: "[classicDynamicField]", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassiDynamicFieldDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[sotDynamicField]",
+                    selector: "[classicDynamicField]",
                     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 {
+class ClassicDynamicFormComponent {
     dynamicFormService = inject(DynamicFormService);
     destroyRef = inject(DestroyRef);
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -1964,17 +2071,17 @@ class AcClassicDynamicFormComponent {
     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 }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ClassicDynamicFormComponent, 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              classicDynamicField\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: ClassiDynamicFieldDirective, selector: "[classicDynamicField]", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ClassicDynamicFormComponent, 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"] }]
+            args: [{ exportAs: 'dynamicForm', selector: 'sot-classic-dynamic-form', standalone: true, imports: [ClassiDynamicFieldDirective, NgClass, ReactiveFormsModule, 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              classicDynamicField\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, AcMaterialDynamicFormModalComponent, AutocompleteAttribute, ConditionsService, DynamicFormService };
+export { AbstractControlFieldComponent, AbstractFieldComponent, AutocompleteAttribute, ClassicDynamicFormComponent, ConditionsService, DsfrDynamicFormComponent, DynamicFormService, MaterialDynamicFormComponent, MaterialDynamicFormModalComponent };
 //# sourceMappingURL=sotoa-ui-dynamic-form.mjs.map