ngx-dynamic-entity 1.0.0 → 1.1.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, Input, Component, signal, inject, Injectable, DestroyRef, isDevMode, ViewContainerRef, ViewChild, forwardRef, Optional, Inject, EventEmitter, computed, HostListener, Output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, Validators, FormBuilder, FormArray, FormGroup } from '@angular/forms';
-import { resolveLabel, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, getTabPath, applyAutoPatch, applyPatchOnTrue, formatDisplayValue } from '@dynamic-entity/core';
+import { resolveLabel, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, getTabPath, applyAutoPatch, applyPatchOnTrue, formatDisplayValue } from '@dynamic-entity/core';
 export { formatDisplayValue, normalizeConfig, normalizeOption, resolveLabel, resolveOptionLabel, resolveOptionValue, valuesMatch } from '@dynamic-entity/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, isObservable, firstValueFrom } from 'rxjs';
@@ -70,6 +70,22 @@ const ENTITY_REF_REGISTRY = new InjectionToken('ENTITY_REF_REGISTRY');
  * })
  */
 const LOOKUP_REGISTRY = new InjectionToken('LOOKUP_REGISTRY');
+/**
+ * Ordered steps that move a saved record forward when a config's `version` increases.
+ *
+ * Without these, `EntityFormConfig.version` and `VersionedRecord._configVersion` are
+ * declarations nothing acts on: a schema can be edited freely while records keep their old
+ * shape, and nothing reconciles the two. Registering migrations makes the version numbers
+ * mean something.
+ *
+ * @example
+ * provideNgxDynamicEntity({
+ *   migrations: [
+ *     { from: 1, to: 2, description: 'split name', migrate: r => ({ ...r, firstName: r['name'] }) },
+ *   ],
+ * })
+ */
+const RECORD_MIGRATIONS = new InjectionToken('RECORD_MIGRATIONS');
 /** Registry: validator key → ValidatorFn */
 const VALIDATOR_REGISTRY = new InjectionToken('VALIDATOR_REGISTRY');
 /** Registry: hook key → async (data, context) => data */
@@ -141,6 +157,7 @@ const provideNgxDynamicEntity = (config = {}) => makeEnvironmentProviders([
     { provide: LOOKUP_REGISTRY, useValue: new Map(Object.entries(config.lookups ?? {})) },
     { provide: VALIDATOR_REGISTRY, useValue: new Map(Object.entries(config.validators ?? {})) },
     { provide: HOOK_REGISTRY, useValue: new Map(Object.entries(config.hooks ?? {})) },
+    { provide: RECORD_MIGRATIONS, useValue: config.migrations ?? [] },
 ]);
 
 class TextFieldComponent {
@@ -172,35 +189,35 @@ class TextFieldComponent {
         return 'Invalid value.';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div
-      class="ngx-field ngx-field--text"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
-      [class.ngx-field--readonly]="readonly"
-      [class.ngx-field--masked]="masked"
-      [class.ngx-field--invalid]="control && control.invalid && control.touched"
-    >
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}@if (field.validators?.required) { <span class="ngx-field__req">*</span> }</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
-      } @else {
-        <input
-          [id]="field.id"
-          type="text"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder"
-          [attr.disabled]="field.disabled ? true : null"
-          [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
-        />
-        @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--text"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}@if (field.validators?.required) { <span class="ngx-field__req">*</span> }</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          type="text"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+        />
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, decorators: [{
@@ -209,35 +226,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-text-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div
-      class="ngx-field ngx-field--text"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
-      [class.ngx-field--readonly]="readonly"
-      [class.ngx-field--masked]="masked"
-      [class.ngx-field--invalid]="control && control.invalid && control.touched"
-    >
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}@if (field.validators?.required) { <span class="ngx-field__req">*</span> }</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
-      } @else {
-        <input
-          [id]="field.id"
-          type="text"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder"
-          [attr.disabled]="field.disabled ? true : null"
-          [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
-        />
-        @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
-        }
-      }
-    </div>
+                    template: `
+    <div
+      class="ngx-field ngx-field--text"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}@if (field.validators?.required) { <span class="ngx-field__req">*</span> }</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          type="text"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+        />
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -265,28 +282,28 @@ class TextareaFieldComponent {
         return resolveLabel(this.field?.placeholder, this.language);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--textarea"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
-      } @else {
-        <textarea
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder"
-          [attr.disabled]="field.disabled ? true : null"
-          rows="3"
-        ></textarea>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--textarea"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
+      } @else {
+        <textarea
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+          rows="3"
+        ></textarea>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, decorators: [{
@@ -295,28 +312,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-textarea-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--textarea"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
-      } @else {
-        <textarea
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder"
-          [attr.disabled]="field.disabled ? true : null"
-          rows="3"
-        ></textarea>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--textarea"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
+      } @else {
+        <textarea
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+          rows="3"
+        ></textarea>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -356,38 +373,38 @@ class NumberFieldComponent {
         return 'Invalid number.';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div
-      class="ngx-field ngx-field--number"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
-      [class.ngx-field--readonly]="readonly"
-      [class.ngx-field--masked]="masked"
-      [class.ngx-field--invalid]="control && control.invalid && control.touched"
-    >
-      <label class="ngx-field__label" [attr.for]="field.id">
-        {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
-      </label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
-      } @else {
-        <input
-          [id]="field.id"
-          type="number"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder"
-          [attr.disabled]="field.disabled ? true : null"
-          [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
-        />
-        @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--number"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">
+        {{ label }}
+        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+      </label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          type="number"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+        />
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, decorators: [{
@@ -396,38 +413,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-number-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div
-      class="ngx-field ngx-field--number"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
-      [class.ngx-field--readonly]="readonly"
-      [class.ngx-field--masked]="masked"
-      [class.ngx-field--invalid]="control && control.invalid && control.touched"
-    >
-      <label class="ngx-field__label" [attr.for]="field.id">
-        {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
-      </label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
-      } @else {
-        <input
-          [id]="field.id"
-          type="number"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder"
-          [attr.disabled]="field.disabled ? true : null"
-          [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
-        />
-        @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
-        }
-      }
-    </div>
+                    template: `
+    <div
+      class="ngx-field ngx-field--number"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">
+        {{ label }}
+        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+      </label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          type="number"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+        />
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -466,31 +483,31 @@ class CurrencyFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CurrencyFieldComponent, isStandalone: true, selector: "ngx-currency-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--currency"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ symbol }}{{ control.value }}</span>
-      } @else {
-        <div class="ngx-field__currency-wrap">
-          <span class="ngx-field__currency-symbol">{{ symbol }}</span>
-          <input
-            class="ngx-field__input ngx-field__input--currency" [attr.data-testid]="'field-' + field.id + '-input'"
-            type="number"
-            step="0.01"
-            [formControl]="$any(control)"
-            [placeholder]="placeholder || '0.00'"
-            [attr.disabled]="field.disabled ? true : null"
-          />
-        </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CurrencyFieldComponent, isStandalone: true, selector: "ngx-currency-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--currency"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ symbol }}{{ control.value }}</span>
+      } @else {
+        <div class="ngx-field__currency-wrap">
+          <span class="ngx-field__currency-symbol">{{ symbol }}</span>
+          <input
+            class="ngx-field__input ngx-field__input--currency" [attr.data-testid]="'field-' + field.id + '-input'"
+            type="number"
+            step="0.01"
+            [formControl]="$any(control)"
+            [placeholder]="placeholder || '0.00'"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+        </div>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
@@ -499,31 +516,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-currency-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--currency"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ symbol }}{{ control.value }}</span>
-      } @else {
-        <div class="ngx-field__currency-wrap">
-          <span class="ngx-field__currency-symbol">{{ symbol }}</span>
-          <input
-            class="ngx-field__input ngx-field__input--currency" [attr.data-testid]="'field-' + field.id + '-input'"
-            type="number"
-            step="0.01"
-            [formControl]="$any(control)"
-            [placeholder]="placeholder || '0.00'"
-            [attr.disabled]="field.disabled ? true : null"
-          />
-        </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--currency"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ symbol }}{{ control.value }}</span>
+      } @else {
+        <div class="ngx-field__currency-wrap">
+          <span class="ngx-field__currency-symbol">{{ symbol }}</span>
+          <input
+            class="ngx-field__input ngx-field__input--currency" [attr.data-testid]="'field-' + field.id + '-input'"
+            type="number"
+            step="0.01"
+            [formControl]="$any(control)"
+            [placeholder]="placeholder || '0.00'"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+        </div>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -552,36 +569,36 @@ class EmailFieldComponent {
         return resolveLabel(this.field?.placeholder, this.language);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EmailFieldComponent, isStandalone: true, selector: "ngx-email-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--email"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
-          <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
-        </span>
-      } @else {
-        <input
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          type="email"
-          autocomplete="email"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder || 'you@example.com'"
-          [attr.disabled]="field.disabled ? true : null"
-        />
-        @if (control.invalid && control.touched) {
-          @if (control.errors?.['required']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Email is required</span>
-          } @else if (control.errors?.['email']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Enter a valid email address</span>
-          } @else {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-          }
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EmailFieldComponent, isStandalone: true, selector: "ngx-email-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--email"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
+        </span>
+      } @else {
+        <input
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="email"
+          autocomplete="email"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder || 'you@example.com'"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          @if (control.errors?.['required']) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Email is required</span>
+          } @else if (control.errors?.['email']) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Enter a valid email address</span>
+          } @else {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+          }
+        }
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailFieldComponent, decorators: [{
@@ -590,36 +607,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-email-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--email"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
-          <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
-        </span>
-      } @else {
-        <input
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          type="email"
-          autocomplete="email"
-          [formControl]="$any(control)"
-          [placeholder]="placeholder || 'you@example.com'"
-          [attr.disabled]="field.disabled ? true : null"
-        />
-        @if (control.invalid && control.touched) {
-          @if (control.errors?.['required']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Email is required</span>
-          } @else if (control.errors?.['email']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Enter a valid email address</span>
-          } @else {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-          }
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--email"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+          <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
+        </span>
+      } @else {
+        <input
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="email"
+          autocomplete="email"
+          [formControl]="$any(control)"
+          [placeholder]="placeholder || 'you@example.com'"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          @if (control.errors?.['required']) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Email is required</span>
+          } @else if (control.errors?.['email']) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Enter a valid email address</span>
+          } @else {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+          }
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -652,38 +669,38 @@ class PasswordFieldComponent {
         this.visible.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PasswordFieldComponent, isStandalone: true, selector: "ngx-password-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--password"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">••••••••</span>
-      } @else {
-        <div class="ngx-field__password-wrap">
-          <input
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            [type]="visible() ? 'text' : 'password'"
-            autocomplete="current-password"
-            [formControl]="$any(control)"
-            [placeholder]="placeholder || '••••••••'"
-            [attr.disabled]="field.disabled ? true : null"
-          />
-          <button
-            type="button"
-            class="ngx-field__eye-btn"
-            (click)="toggleVisibility()"
-            [attr.aria-label]="visible() ? 'Hide password' : 'Show password'"
-          >
-            {{ visible() ? '🙈' : '👁' }}
-          </button>
-        </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PasswordFieldComponent, isStandalone: true, selector: "ngx-password-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--password"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">••••••••</span>
+      } @else {
+        <div class="ngx-field__password-wrap">
+          <input
+            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [type]="visible() ? 'text' : 'password'"
+            autocomplete="current-password"
+            [formControl]="$any(control)"
+            [placeholder]="placeholder || '••••••••'"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <button
+            type="button"
+            class="ngx-field__eye-btn"
+            (click)="toggleVisibility()"
+            [attr.aria-label]="visible() ? 'Hide password' : 'Show password'"
+          >
+            {{ visible() ? '🙈' : '👁' }}
+          </button>
+        </div>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordFieldComponent, decorators: [{
@@ -692,38 +709,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-password-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--password"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">••••••••</span>
-      } @else {
-        <div class="ngx-field__password-wrap">
-          <input
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            [type]="visible() ? 'text' : 'password'"
-            autocomplete="current-password"
-            [formControl]="$any(control)"
-            [placeholder]="placeholder || '••••••••'"
-            [attr.disabled]="field.disabled ? true : null"
-          />
-          <button
-            type="button"
-            class="ngx-field__eye-btn"
-            (click)="toggleVisibility()"
-            [attr.aria-label]="visible() ? 'Hide password' : 'Show password'"
-          >
-            {{ visible() ? '🙈' : '👁' }}
-          </button>
-        </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--password"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">••••••••</span>
+      } @else {
+        <div class="ngx-field__password-wrap">
+          <input
+            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [type]="visible() ? 'text' : 'password'"
+            autocomplete="current-password"
+            [formControl]="$any(control)"
+            [placeholder]="placeholder || '••••••••'"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <button
+            type="button"
+            class="ngx-field__eye-btn"
+            (click)="toggleVisibility()"
+            [attr.aria-label]="visible() ? 'Hide password' : 'Show password'"
+          >
+            {{ visible() ? '🙈' : '👁' }}
+          </button>
+        </div>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -748,28 +765,28 @@ class CheckboxFieldComponent {
         return resolveLabel(this.field?.label, this.language);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--checkbox"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      @if (masked) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
-      } @else {
-        <label class="ngx-field__label" [attr.for]="field.id">
-          <input
-            [id]="field.id"
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            type="checkbox"
-            [formControl]="$any(control)"
-            [attr.disabled]="field.disabled ? true : null"
-          />
-          {{ label }}
-        </label>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--checkbox"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      @if (masked) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+      } @else {
+        <label class="ngx-field__label" [attr.for]="field.id">
+          <input
+            [id]="field.id"
+            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            type="checkbox"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          {{ label }}
+        </label>
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
@@ -778,28 +795,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-checkbox-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--checkbox"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      @if (masked) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
-      } @else {
-        <label class="ngx-field__label" [attr.for]="field.id">
-          <input
-            [id]="field.id"
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            type="checkbox"
-            [formControl]="$any(control)"
-            [attr.disabled]="field.disabled ? true : null"
-          />
-          {{ label }}
-        </label>
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--checkbox"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      @if (masked) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+      } @else {
+        <label class="ngx-field__label" [attr.for]="field.id">
+          <input
+            [id]="field.id"
+            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            type="checkbox"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          {{ label }}
+        </label>
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -829,35 +846,35 @@ class BooleanFieldComponent {
         return resolveLabel(this.field?.label, this.language);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BooleanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BooleanFieldComponent, isStandalone: true, selector: "ngx-boolean-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--boolean"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      @if (masked) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
-      } @else {
-        <div class="ngx-field__toggle-wrap">
-          <label class="ngx-field__toggle-label">{{ label }}</label>
-          <label class="ngx-field__toggle-switch" [class.ngx-field__toggle-switch--checked]="control.value">
-            <input
-              class="ngx-field__toggle-input"
-              type="checkbox"
-              role="switch"
-              [formControl]="$any(control)"
-              [attr.disabled]="field.disabled ? true : null"
-              [attr.aria-checked]="control.value"
-            />
-            <span class="ngx-field__toggle-track">
-              <span class="ngx-field__toggle-thumb"></span>
-            </span>
-            <span class="ngx-field__toggle-text">{{ control.value ? 'Yes' : 'No' }}</span>
-          </label>
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: BooleanFieldComponent, isStandalone: true, selector: "ngx-boolean-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--boolean"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      @if (masked) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+      } @else {
+        <div class="ngx-field__toggle-wrap">
+          <label class="ngx-field__toggle-label">{{ label }}</label>
+          <label class="ngx-field__toggle-switch" [class.ngx-field__toggle-switch--checked]="control.value">
+            <input
+              class="ngx-field__toggle-input"
+              type="checkbox"
+              role="switch"
+              [formControl]="$any(control)"
+              [attr.disabled]="field.disabled ? true : null"
+              [attr.aria-checked]="control.value"
+            />
+            <span class="ngx-field__toggle-track">
+              <span class="ngx-field__toggle-thumb"></span>
+            </span>
+            <span class="ngx-field__toggle-text">{{ control.value ? 'Yes' : 'No' }}</span>
+          </label>
+        </div>
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BooleanFieldComponent, decorators: [{
@@ -866,35 +883,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-boolean-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--boolean"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      @if (masked) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
-      } @else {
-        <div class="ngx-field__toggle-wrap">
-          <label class="ngx-field__toggle-label">{{ label }}</label>
-          <label class="ngx-field__toggle-switch" [class.ngx-field__toggle-switch--checked]="control.value">
-            <input
-              class="ngx-field__toggle-input"
-              type="checkbox"
-              role="switch"
-              [formControl]="$any(control)"
-              [attr.disabled]="field.disabled ? true : null"
-              [attr.aria-checked]="control.value"
-            />
-            <span class="ngx-field__toggle-track">
-              <span class="ngx-field__toggle-thumb"></span>
-            </span>
-            <span class="ngx-field__toggle-text">{{ control.value ? 'Yes' : 'No' }}</span>
-          </label>
-        </div>
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--boolean"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      @if (masked) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <label class="ngx-field__label">{{ label }}</label>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+      } @else {
+        <div class="ngx-field__toggle-wrap">
+          <label class="ngx-field__toggle-label">{{ label }}</label>
+          <label class="ngx-field__toggle-switch" [class.ngx-field__toggle-switch--checked]="control.value">
+            <input
+              class="ngx-field__toggle-input"
+              type="checkbox"
+              role="switch"
+              [formControl]="$any(control)"
+              [attr.disabled]="field.disabled ? true : null"
+              [attr.aria-checked]="control.value"
+            />
+            <span class="ngx-field__toggle-track">
+              <span class="ngx-field__toggle-thumb"></span>
+            </span>
+            <span class="ngx-field__toggle-text">{{ control.value ? 'Yes' : 'No' }}</span>
+          </label>
+        </div>
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -930,27 +947,27 @@ class DateFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--date"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDate(control.value) }}</span>
-      } @else {
-        <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          type="date"
-          [formControl]="$any(control)"
-          [attr.disabled]="field.disabled ? true : null"
-        />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--date"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDate(control.value) }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="date"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateFieldComponent, decorators: [{
@@ -959,27 +976,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-date-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--date"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDate(control.value) }}</span>
-      } @else {
-        <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          type="date"
-          [formControl]="$any(control)"
-          [attr.disabled]="field.disabled ? true : null"
-        />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--date"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDate(control.value) }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="date"
+          [formControl]="$any(control)"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -1042,44 +1059,44 @@ class MonthYearFieldComponent {
         return monthName && year ? `${monthName} ${year}` : String(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MonthYearFieldComponent, isStandalone: true, selector: "ngx-month-year-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--month-year"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatValue(control.value) }}</span>
-      } @else {
-        <div class="ngx-field__month-year-wrap">
-          <select
-            class="ngx-field__input ngx-field__input--month" [attr.data-testid]="'field-' + field.id + '-month'"
-            [value]="selectedMonth"
-            (change)="onMonthChange($any($event.target).value)"
-            [attr.disabled]="field.disabled ? true : null"
-          >
-            <option value="">Month</option>
-            @for (m of months; track m.value) {
-              <option [value]="m.value">{{ m.label }}</option>
-            }
-          </select>
-          <select
-            class="ngx-field__input ngx-field__input--year" [attr.data-testid]="'field-' + field.id + '-year'"
-            [value]="selectedYear"
-            (change)="onYearChange($any($event.target).value)"
-            [attr.disabled]="field.disabled ? true : null"
-          >
-            <option value="">Year</option>
-            @for (y of years; track y) {
-              <option [value]="y">{{ y }}</option>
-            }
-          </select>
-        </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MonthYearFieldComponent, isStandalone: true, selector: "ngx-month-year-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--month-year"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatValue(control.value) }}</span>
+      } @else {
+        <div class="ngx-field__month-year-wrap">
+          <select
+            class="ngx-field__input ngx-field__input--month" [attr.data-testid]="'field-' + field.id + '-month'"
+            [value]="selectedMonth"
+            (change)="onMonthChange($any($event.target).value)"
+            [attr.disabled]="field.disabled ? true : null"
+          >
+            <option value="">Month</option>
+            @for (m of months; track m.value) {
+              <option [value]="m.value">{{ m.label }}</option>
+            }
+          </select>
+          <select
+            class="ngx-field__input ngx-field__input--year" [attr.data-testid]="'field-' + field.id + '-year'"
+            [value]="selectedYear"
+            (change)="onYearChange($any($event.target).value)"
+            [attr.disabled]="field.disabled ? true : null"
+          >
+            <option value="">Year</option>
+            @for (y of years; track y) {
+              <option [value]="y">{{ y }}</option>
+            }
+          </select>
+        </div>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `, isInline: true, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MonthYearFieldComponent, decorators: [{
@@ -1088,44 +1105,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-month-year-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--month-year"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatValue(control.value) }}</span>
-      } @else {
-        <div class="ngx-field__month-year-wrap">
-          <select
-            class="ngx-field__input ngx-field__input--month" [attr.data-testid]="'field-' + field.id + '-month'"
-            [value]="selectedMonth"
-            (change)="onMonthChange($any($event.target).value)"
-            [attr.disabled]="field.disabled ? true : null"
-          >
-            <option value="">Month</option>
-            @for (m of months; track m.value) {
-              <option [value]="m.value">{{ m.label }}</option>
-            }
-          </select>
-          <select
-            class="ngx-field__input ngx-field__input--year" [attr.data-testid]="'field-' + field.id + '-year'"
-            [value]="selectedYear"
-            (change)="onYearChange($any($event.target).value)"
-            [attr.disabled]="field.disabled ? true : null"
-          >
-            <option value="">Year</option>
-            @for (y of years; track y) {
-              <option [value]="y">{{ y }}</option>
-            }
-          </select>
-        </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--month-year"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatValue(control.value) }}</span>
+      } @else {
+        <div class="ngx-field__month-year-wrap">
+          <select
+            class="ngx-field__input ngx-field__input--month" [attr.data-testid]="'field-' + field.id + '-month'"
+            [value]="selectedMonth"
+            (change)="onMonthChange($any($event.target).value)"
+            [attr.disabled]="field.disabled ? true : null"
+          >
+            <option value="">Month</option>
+            @for (m of months; track m.value) {
+              <option [value]="m.value">{{ m.label }}</option>
+            }
+          </select>
+          <select
+            class="ngx-field__input ngx-field__input--year" [attr.data-testid]="'field-' + field.id + '-year'"
+            [value]="selectedYear"
+            (change)="onYearChange($any($event.target).value)"
+            [attr.disabled]="field.disabled ? true : null"
+          >
+            <option value="">Year</option>
+            @for (y of years; track y) {
+              <option [value]="y">{{ y }}</option>
+            }
+          </select>
+        </div>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -1448,46 +1465,46 @@ class DropdownFieldComponent {
         return 'Invalid selection.';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div
-      class="ngx-field ngx-field--dropdown"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
-      [class.ngx-field--readonly]="readonly"
-      [class.ngx-field--masked]="masked"
-      [class.ngx-field--invalid]="control && control.invalid && control.touched"
-    >
-      <label class="ngx-field__label" [attr.for]="field.id">
-        {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
-      </label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
-      } @else {
-        <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [compareWith]="compareFn"
-          [attr.disabled]="field.disabled ? true : null"
-          [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
-        >
-          <option [value]="''">{{ placeholder || 'Select...' }}</option>
-          @for (option of options(); track getOptLabel(option)) {
-            @if (isObjectVal(option)) {
-              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            } @else {
-              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            }
-          }
-        </select>
-        @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--dropdown"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">
+        {{ label }}
+        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+      </label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+      } @else {
+        <select
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [compareWith]="compareFn"
+          [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+        >
+          <option [value]="''">{{ placeholder || 'Select...' }}</option>
+          @for (option of options(); track getOptLabel(option)) {
+            @if (isObjectVal(option)) {
+              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            } @else {
+              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            }
+          }
+        </select>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownFieldComponent, decorators: [{
@@ -1496,46 +1513,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-dropdown-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div
-      class="ngx-field ngx-field--dropdown"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
-      [class.ngx-field--readonly]="readonly"
-      [class.ngx-field--masked]="masked"
-      [class.ngx-field--invalid]="control && control.invalid && control.touched"
-    >
-      <label class="ngx-field__label" [attr.for]="field.id">
-        {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
-      </label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
-      } @else {
-        <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [compareWith]="compareFn"
-          [attr.disabled]="field.disabled ? true : null"
-          [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
-        >
-          <option [value]="''">{{ placeholder || 'Select...' }}</option>
-          @for (option of options(); track getOptLabel(option)) {
-            @if (isObjectVal(option)) {
-              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            } @else {
-              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            }
-          }
-        </select>
-        @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
-        }
-      }
-    </div>
+                    template: `
+    <div
+      class="ngx-field ngx-field--dropdown"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+      [class.ngx-field--invalid]="control && control.invalid && control.touched"
+    >
+      <label class="ngx-field__label" [attr.for]="field.id">
+        {{ label }}
+        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+      </label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+      } @else {
+        <select
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [compareWith]="compareFn"
+          [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+        >
+          <option [value]="''">{{ placeholder || 'Select...' }}</option>
+          @for (option of options(); track getOptLabel(option)) {
+            @if (isObjectVal(option)) {
+              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            } @else {
+              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            }
+          }
+        </select>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="field.id + '-error'" role="alert">{{ errorMessage }}</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -1612,37 +1629,37 @@ class RadioFieldComponent {
         return typeof value === 'object' ? resolveLabel(value, this.language) : (value ?? '—');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RadioFieldComponent, isStandalone: true, selector: "ngx-radio-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--radio"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <fieldset class="ngx-field__fieldset">
-        <legend class="ngx-field__label">{{ label }}</legend>
-        @if (masked) {
-          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-        } @else if (readonly) {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getSelectedLabel() }}</span>
-        } @else {
-          <div class="ngx-field__radio-group">
-            @for (option of options(); track getOptLabel(option)) {
-              <label class="ngx-field__radio-option" [attr.for]="getRadioId(option)">
-                <input
-                  [id]="getRadioId(option)"
-                  type="radio"
-                  class="ngx-field__radio-input"
-                  [formControl]="$any(control)"
-                  [value]="getOptStoredVal(option)"
-                  [attr.disabled]="field.disabled ? true : null"
-                />
-                <span class="ngx-field__radio-label">{{ getOptLabel(option) }}</span>
-              </label>
-            }
-          </div>
-          @if (control.invalid && control.touched) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-          }
-        }
-      </fieldset>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RadioFieldComponent, isStandalone: true, selector: "ngx-radio-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--radio"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <fieldset class="ngx-field__fieldset">
+        <legend class="ngx-field__label">{{ label }}</legend>
+        @if (masked) {
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        } @else if (readonly) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getSelectedLabel() }}</span>
+        } @else {
+          <div class="ngx-field__radio-group">
+            @for (option of options(); track getOptLabel(option)) {
+              <label class="ngx-field__radio-option" [attr.for]="getRadioId(option)">
+                <input
+                  [id]="getRadioId(option)"
+                  type="radio"
+                  class="ngx-field__radio-input"
+                  [formControl]="$any(control)"
+                  [value]="getOptStoredVal(option)"
+                  [attr.disabled]="field.disabled ? true : null"
+                />
+                <span class="ngx-field__radio-label">{{ getOptLabel(option) }}</span>
+              </label>
+            }
+          </div>
+          @if (control.invalid && control.touched) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+          }
+        }
+      </fieldset>
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioFieldComponent, decorators: [{
@@ -1651,37 +1668,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-radio-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--radio"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <fieldset class="ngx-field__fieldset">
-        <legend class="ngx-field__label">{{ label }}</legend>
-        @if (masked) {
-          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-        } @else if (readonly) {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getSelectedLabel() }}</span>
-        } @else {
-          <div class="ngx-field__radio-group">
-            @for (option of options(); track getOptLabel(option)) {
-              <label class="ngx-field__radio-option" [attr.for]="getRadioId(option)">
-                <input
-                  [id]="getRadioId(option)"
-                  type="radio"
-                  class="ngx-field__radio-input"
-                  [formControl]="$any(control)"
-                  [value]="getOptStoredVal(option)"
-                  [attr.disabled]="field.disabled ? true : null"
-                />
-                <span class="ngx-field__radio-label">{{ getOptLabel(option) }}</span>
-              </label>
-            }
-          </div>
-          @if (control.invalid && control.touched) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-          }
-        }
-      </fieldset>
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--radio"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <fieldset class="ngx-field__fieldset">
+        <legend class="ngx-field__label">{{ label }}</legend>
+        @if (masked) {
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        } @else if (readonly) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getSelectedLabel() }}</span>
+        } @else {
+          <div class="ngx-field__radio-group">
+            @for (option of options(); track getOptLabel(option)) {
+              <label class="ngx-field__radio-option" [attr.for]="getRadioId(option)">
+                <input
+                  [id]="getRadioId(option)"
+                  type="radio"
+                  class="ngx-field__radio-input"
+                  [formControl]="$any(control)"
+                  [value]="getOptStoredVal(option)"
+                  [attr.disabled]="field.disabled ? true : null"
+                />
+                <span class="ngx-field__radio-label">{{ getOptLabel(option) }}</span>
+              </label>
+            }
+          </div>
+          @if (control.invalid && control.touched) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+          }
+        }
+      </fieldset>
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -1751,37 +1768,37 @@ class MultiSelectFieldComponent {
             .join(', ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--multiSelect"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabels(control.value) }}</span>
-      } @else {
-        <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [compareWith]="compareFn"
-          [attr.disabled]="field.disabled ? true : null"
-          multiple
-          size="4"
-        >
-          @for (option of options(); track getOptLabel(option)) {
-            @if (isObjectVal(option)) {
-              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            } @else {
-              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            }
-          }
-        </select>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--multiSelect"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabels(control.value) }}</span>
+      } @else {
+        <select
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [compareWith]="compareFn"
+          [attr.disabled]="field.disabled ? true : null"
+          multiple
+          size="4"
+        >
+          @for (option of options(); track getOptLabel(option)) {
+            @if (isObjectVal(option)) {
+              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            } @else {
+              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            }
+          }
+        </select>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectFieldComponent, decorators: [{
@@ -1790,37 +1807,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-multi-select-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--multiSelect"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabels(control.value) }}</span>
-      } @else {
-        <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-          [formControl]="$any(control)"
-          [compareWith]="compareFn"
-          [attr.disabled]="field.disabled ? true : null"
-          multiple
-          size="4"
-        >
-          @for (option of options(); track getOptLabel(option)) {
-            @if (isObjectVal(option)) {
-              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            } @else {
-              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
-            }
-          }
-        </select>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--multiSelect"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabels(control.value) }}</span>
+      } @else {
+        <select
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [formControl]="$any(control)"
+          [compareWith]="compareFn"
+          [attr.disabled]="field.disabled ? true : null"
+          multiple
+          size="4"
+        >
+          @for (option of options(); track getOptLabel(option)) {
+            @if (isObjectVal(option)) {
+              <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            } @else {
+              <option [value]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
+            }
+          }
+        </select>
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -2259,39 +2276,39 @@ class EntityRefFieldComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--entity-ref"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
-      } @else {
-        @if (loading()) {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">Loading…</span>
-        } @else {
-          <select
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            [id]="'field-' + field.id"
-            [formControl]="$any(control)"
-            [attr.disabled]="field.disabled ? true : null"
-            (change)="onSelectionChange()"
-          >
-            <option value="">{{ placeholder || 'Select...' }}</option>
-            @for (option of options(); track option.value) {
-              <option [value]="option.value">{{ option.label }}</option>
-            }
-          </select>
-          @if (awaitingParent()) {
-            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">Select {{ parentFieldId }} first.</span>
-          }
-        }
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--entity-ref"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+      } @else {
+        @if (loading()) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">Loading…</span>
+        } @else {
+          <select
+            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="'field-' + field.id"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+            (change)="onSelectionChange()"
+          >
+            <option value="">{{ placeholder || 'Select...' }}</option>
+            @for (option of options(); track option.value) {
+              <option [value]="option.value">{{ option.label }}</option>
+            }
+          </select>
+          @if (awaitingParent()) {
+            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">Select {{ parentFieldId }} first.</span>
+          }
+        }
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `, isInline: true, 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefFieldComponent, decorators: [{
@@ -2300,39 +2317,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-entity-ref-field',
                     standalone: true,
                     imports: [ReactiveFormsModule],
-                    template: `
-    <div class="ngx-field ngx-field--entity-ref"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
-      } @else {
-        @if (loading()) {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">Loading…</span>
-        } @else {
-          <select
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            [id]="'field-' + field.id"
-            [formControl]="$any(control)"
-            [attr.disabled]="field.disabled ? true : null"
-            (change)="onSelectionChange()"
-          >
-            <option value="">{{ placeholder || 'Select...' }}</option>
-            @for (option of options(); track option.value) {
-              <option [value]="option.value">{{ option.label }}</option>
-            }
-          </select>
-          @if (awaitingParent()) {
-            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">Select {{ parentFieldId }} first.</span>
-          }
-        }
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--entity-ref"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+      } @else {
+        @if (loading()) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">Loading…</span>
+        } @else {
+          <select
+            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="'field-' + field.id"
+            [formControl]="$any(control)"
+            [attr.disabled]="field.disabled ? true : null"
+            (change)="onSelectionChange()"
+          >
+            <option value="">{{ placeholder || 'Select...' }}</option>
+            @for (option of options(); track option.value) {
+              <option [value]="option.value">{{ option.label }}</option>
+            }
+          </select>
+          @if (awaitingParent()) {
+            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">Select {{ parentFieldId }} first.</span>
+          }
+        }
+        @if (control.invalid && control.touched) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -2557,56 +2574,56 @@ class GroupFieldComponent {
         return group?.get(childId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: GroupFieldComponent, isStandalone: true, selector: "ngx-group-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
-    <fieldset class="ngx-field ngx-field--group"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <legend class="ngx-field__legend">{{ label }}</legend>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else {
-        <div class="ngx-field__group-children">
-          @for (child of field.children ?? []; track child.id) {
-            @if (child.visibility !== false) {
-              <ngx-dynamic-field
-                [field]="child"
-                [control]="getChildControl(child.id)"
-                [config]="config"
-                [language]="language"
-                [readonly]="readonly || !!child.readonly"
-                [userRoles]="userRoles"
-              />
-            }
-          }
-        </div>
-      }
-    </fieldset>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: GroupFieldComponent, isStandalone: true, selector: "ngx-group-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
+    <fieldset class="ngx-field ngx-field--group"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <legend class="ngx-field__legend">{{ label }}</legend>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else {
+        <div class="ngx-field__group-children">
+          @for (child of field.children ?? []; track child.id) {
+            @if (child.visibility !== false) {
+              <ngx-dynamic-field
+                [field]="child"
+                [control]="getChildControl(child.id)"
+                [config]="config"
+                [language]="language"
+                [readonly]="readonly || !!child.readonly"
+                [userRoles]="userRoles"
+              />
+            }
+          }
+        </div>
+      }
+    </fieldset>
   `, isInline: true, styles: [".ngx-field--group{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#fafafa}.ngx-field__legend{font-weight:600;font-size:14px;padding:0 8px;color:#334155}.ngx-field__group-children{display:flex;flex-direction:column;gap:12px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => DynamicFieldComponent), selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-group-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
-    <fieldset class="ngx-field ngx-field--group"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <legend class="ngx-field__legend">{{ label }}</legend>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else {
-        <div class="ngx-field__group-children">
-          @for (child of field.children ?? []; track child.id) {
-            @if (child.visibility !== false) {
-              <ngx-dynamic-field
-                [field]="child"
-                [control]="getChildControl(child.id)"
-                [config]="config"
-                [language]="language"
-                [readonly]="readonly || !!child.readonly"
-                [userRoles]="userRoles"
-              />
-            }
-          }
-        </div>
-      }
-    </fieldset>
+            args: [{ selector: 'ngx-group-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
+    <fieldset class="ngx-field ngx-field--group"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <legend class="ngx-field__legend">{{ label }}</legend>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else {
+        <div class="ngx-field__group-children">
+          @for (child of field.children ?? []; track child.id) {
+            @if (child.visibility !== false) {
+              <ngx-dynamic-field
+                [field]="child"
+                [control]="getChildControl(child.id)"
+                [config]="config"
+                [language]="language"
+                [readonly]="readonly || !!child.readonly"
+                [userRoles]="userRoles"
+              />
+            }
+          }
+        </div>
+      }
+    </fieldset>
   `, styles: [".ngx-field--group{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#fafafa}.ngx-field__legend{font-weight:600;font-size:14px;padding:0 8px;color:#334155}.ngx-field__group-children{display:flex;flex-direction:column;gap:12px}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
@@ -2676,6 +2693,17 @@ class ValidatorRegistryService {
             fnList.push(Validators.maxLength(config.maxLength));
         if (config.pattern)
             fnList.push(Validators.pattern(config.pattern));
+        if (config.email)
+            fnList.push(Validators.email);
+        // Named validators from the consumer registry. This branch previously hardcoded the
+        // built-ins and consulted the registry only for the `string[]` form of this config, so
+        // a validator the consumer had registered could not be named from a typed schema
+        // without casting it to `any`.
+        for (const key of config.custom ?? []) {
+            const fn = this.resolve(key);
+            if (fn)
+                fnList.push(fn);
+        }
         return fnList;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2719,110 +2747,110 @@ class ArrayFieldComponent {
         this.formArray.removeAt(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ArrayFieldComponent, isStandalone: true, selector: "ngx-array-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--array"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <div class="ngx-field__array-header">
-        <label class="ngx-field__label">{{ label }}</label>
-        @if (!readonly && !masked) {
-          <button type="button" class="ngx-field__array-add-btn"
-            [attr.data-testid]="'field-' + field.id + '-add'" (click)="addItem()">
-            + Add Item
-          </button>
-        }
-      </div>
-
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else {
-        <div class="ngx-field__array-list">
-          @for (itemGroup of formArray.controls; track idx; let idx = $index) {
-            <div class="ngx-field__array-item" [attr.data-testid]="'field-' + field.id + '-row'">
-              <div class="ngx-field__array-item-header">
-                <span class="ngx-field__array-item-title">Item #{{ idx + 1 }}</span>
-                @if (!readonly) {
-                  <button type="button" class="ngx-field__array-remove-btn"
-                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx" (click)="removeItem(idx)">
-                    Remove
-                  </button>
-                }
-              </div>
-              <div class="ngx-field__array-item-fields">
-                @for (child of field.children ?? []; track child.id) {
-                  @if (child.visibility !== false) {
-                    <ngx-dynamic-field
-                      [field]="child"
-                      [control]="getItemChildControl(itemGroup, child.id)"
-                      [config]="config"
-                      [language]="language"
-                      [readonly]="readonly || !!child.readonly"
-                      [userRoles]="userRoles"
-                    />
-                  }
-                }
-              </div>
-            </div>
-          }
-          @if (formArray.controls.length === 0) {
-            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">No items added yet.</div>
-          }
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ArrayFieldComponent, isStandalone: true, selector: "ngx-array-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--array"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <div class="ngx-field__array-header">
+        <label class="ngx-field__label">{{ label }}</label>
+        @if (!readonly && !masked) {
+          <button type="button" class="ngx-field__array-add-btn"
+            [attr.data-testid]="'field-' + field.id + '-add'" (click)="addItem()">
+            + Add Item
+          </button>
+        }
+      </div>
+
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else {
+        <div class="ngx-field__array-list">
+          @for (itemGroup of formArray.controls; track idx; let idx = $index) {
+            <div class="ngx-field__array-item" [attr.data-testid]="'field-' + field.id + '-row'">
+              <div class="ngx-field__array-item-header">
+                <span class="ngx-field__array-item-title">Item #{{ idx + 1 }}</span>
+                @if (!readonly) {
+                  <button type="button" class="ngx-field__array-remove-btn"
+                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx" (click)="removeItem(idx)">
+                    Remove
+                  </button>
+                }
+              </div>
+              <div class="ngx-field__array-item-fields">
+                @for (child of field.children ?? []; track child.id) {
+                  @if (child.visibility !== false) {
+                    <ngx-dynamic-field
+                      [field]="child"
+                      [control]="getItemChildControl(itemGroup, child.id)"
+                      [config]="config"
+                      [language]="language"
+                      [readonly]="readonly || !!child.readonly"
+                      [userRoles]="userRoles"
+                    />
+                  }
+                }
+              </div>
+            </div>
+          }
+          @if (formArray.controls.length === 0) {
+            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">No items added yet.</div>
+          }
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".ngx-field--array{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#f8fafc}.ngx-field__array-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ngx-field__array-add-btn{background:#2563eb;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-weight:500;cursor:pointer}.ngx-field__array-add-btn:hover{background:#1d4ed8}.ngx-field__array-list{display:flex;flex-direction:column;gap:12px}.ngx-field__array-item{background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:12px}.ngx-field__array-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid #f1f5f9;padding-bottom:6px}.ngx-field__array-item-title{font-weight:600;font-size:13px;color:#475569}.ngx-field__array-remove-btn{background:#ef4444;color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:12px;cursor:pointer}.ngx-field__array-empty{color:#94a3b8;font-style:italic;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => DynamicFieldComponent), selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-array-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
-    <div class="ngx-field ngx-field--array"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <div class="ngx-field__array-header">
-        <label class="ngx-field__label">{{ label }}</label>
-        @if (!readonly && !masked) {
-          <button type="button" class="ngx-field__array-add-btn"
-            [attr.data-testid]="'field-' + field.id + '-add'" (click)="addItem()">
-            + Add Item
-          </button>
-        }
-      </div>
-
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else {
-        <div class="ngx-field__array-list">
-          @for (itemGroup of formArray.controls; track idx; let idx = $index) {
-            <div class="ngx-field__array-item" [attr.data-testid]="'field-' + field.id + '-row'">
-              <div class="ngx-field__array-item-header">
-                <span class="ngx-field__array-item-title">Item #{{ idx + 1 }}</span>
-                @if (!readonly) {
-                  <button type="button" class="ngx-field__array-remove-btn"
-                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx" (click)="removeItem(idx)">
-                    Remove
-                  </button>
-                }
-              </div>
-              <div class="ngx-field__array-item-fields">
-                @for (child of field.children ?? []; track child.id) {
-                  @if (child.visibility !== false) {
-                    <ngx-dynamic-field
-                      [field]="child"
-                      [control]="getItemChildControl(itemGroup, child.id)"
-                      [config]="config"
-                      [language]="language"
-                      [readonly]="readonly || !!child.readonly"
-                      [userRoles]="userRoles"
-                    />
-                  }
-                }
-              </div>
-            </div>
-          }
-          @if (formArray.controls.length === 0) {
-            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">No items added yet.</div>
-          }
-        </div>
-      }
-    </div>
+            args: [{ selector: 'ngx-array-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
+    <div class="ngx-field ngx-field--array"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <div class="ngx-field__array-header">
+        <label class="ngx-field__label">{{ label }}</label>
+        @if (!readonly && !masked) {
+          <button type="button" class="ngx-field__array-add-btn"
+            [attr.data-testid]="'field-' + field.id + '-add'" (click)="addItem()">
+            + Add Item
+          </button>
+        }
+      </div>
+
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else {
+        <div class="ngx-field__array-list">
+          @for (itemGroup of formArray.controls; track idx; let idx = $index) {
+            <div class="ngx-field__array-item" [attr.data-testid]="'field-' + field.id + '-row'">
+              <div class="ngx-field__array-item-header">
+                <span class="ngx-field__array-item-title">Item #{{ idx + 1 }}</span>
+                @if (!readonly) {
+                  <button type="button" class="ngx-field__array-remove-btn"
+                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx" (click)="removeItem(idx)">
+                    Remove
+                  </button>
+                }
+              </div>
+              <div class="ngx-field__array-item-fields">
+                @for (child of field.children ?? []; track child.id) {
+                  @if (child.visibility !== false) {
+                    <ngx-dynamic-field
+                      [field]="child"
+                      [control]="getItemChildControl(itemGroup, child.id)"
+                      [config]="config"
+                      [language]="language"
+                      [readonly]="readonly || !!child.readonly"
+                      [userRoles]="userRoles"
+                    />
+                  }
+                }
+              </div>
+            </div>
+          }
+          @if (formArray.controls.length === 0) {
+            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">No items added yet.</div>
+          }
+        </div>
+      }
+    </div>
   `, styles: [".ngx-field--array{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#f8fafc}.ngx-field__array-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ngx-field__array-add-btn{background:#2563eb;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-weight:500;cursor:pointer}.ngx-field__array-add-btn:hover{background:#1d4ed8}.ngx-field__array-list{display:flex;flex-direction:column;gap:12px}.ngx-field__array-item{background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:12px}.ngx-field__array-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid #f1f5f9;padding-bottom:6px}.ngx-field__array-item-title{font-weight:600;font-size:13px;color:#475569}.ngx-field__array-remove-btn{background:#ef4444;color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:12px;cursor:pointer}.ngx-field__array-empty{color:#94a3b8;font-style:italic;font-size:13px}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
@@ -2980,50 +3008,50 @@ class ImageFieldComponent {
         this.uploads.revokePreviewUrl(this.previewCache);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ImageFieldComponent, isStandalone: true, selector: "ngx-image-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--image"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else {
-        <div class="ngx-field__image-wrap">
-          @if (previewUrl()) {
-            <img class="ngx-field__image-preview" [src]="previewUrl()" [alt]="label" />
-          } @else {
-            <div class="ngx-field__image-placeholder">
-              <span>📷</span>
-              <span>No image</span>
-            </div>
-          }
-          @if (!readonly) {
-            <div class="ngx-field__image-actions">
-              <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
-                @if (uploading()) {
-                  <span>Uploading…</span>
-                } @else {
-                  <span>{{ previewUrl() ? 'Change' : 'Upload' }}</span>
-                  <input
-                    type="file"
-                    class="ngx-field__file-input"
-                    [id]="'field-' + field.id"
-                    accept="image/*"
-                    [disabled]="field.disabled || uploading()"
-                    (change)="onFileSelect($any($event.target).files[0])"
-                  />
-                }
-              </label>
-              @if (previewUrl()) {
-                <button type="button" class="ngx-field__remove-btn" (click)="remove()">Remove</button>
-              }
-            </div>
-          }
-        </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ImageFieldComponent, isStandalone: true, selector: "ngx-image-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--image"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else {
+        <div class="ngx-field__image-wrap">
+          @if (previewUrl()) {
+            <img class="ngx-field__image-preview" [src]="previewUrl()" [alt]="label" />
+          } @else {
+            <div class="ngx-field__image-placeholder">
+              <span>📷</span>
+              <span>No image</span>
+            </div>
+          }
+          @if (!readonly) {
+            <div class="ngx-field__image-actions">
+              <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
+                @if (uploading()) {
+                  <span>Uploading…</span>
+                } @else {
+                  <span>{{ previewUrl() ? 'Change' : 'Upload' }}</span>
+                  <input
+                    type="file"
+                    class="ngx-field__file-input"
+                    [id]="'field-' + field.id"
+                    accept="image/*"
+                    [disabled]="field.disabled || uploading()"
+                    (change)="onFileSelect($any($event.target).files[0])"
+                  />
+                }
+              </label>
+              @if (previewUrl()) {
+                <button type="button" class="ngx-field__remove-btn" (click)="remove()">Remove</button>
+              }
+            </div>
+          }
+        </div>
+        @if (uploadError()) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        }
+      }
+    </div>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageFieldComponent, decorators: [{
@@ -3032,50 +3060,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-image-field',
                     standalone: true,
                     imports: [],
-                    template: `
-    <div class="ngx-field ngx-field--image"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else {
-        <div class="ngx-field__image-wrap">
-          @if (previewUrl()) {
-            <img class="ngx-field__image-preview" [src]="previewUrl()" [alt]="label" />
-          } @else {
-            <div class="ngx-field__image-placeholder">
-              <span>📷</span>
-              <span>No image</span>
-            </div>
-          }
-          @if (!readonly) {
-            <div class="ngx-field__image-actions">
-              <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
-                @if (uploading()) {
-                  <span>Uploading…</span>
-                } @else {
-                  <span>{{ previewUrl() ? 'Change' : 'Upload' }}</span>
-                  <input
-                    type="file"
-                    class="ngx-field__file-input"
-                    [id]="'field-' + field.id"
-                    accept="image/*"
-                    [disabled]="field.disabled || uploading()"
-                    (change)="onFileSelect($any($event.target).files[0])"
-                  />
-                }
-              </label>
-              @if (previewUrl()) {
-                <button type="button" class="ngx-field__remove-btn" (click)="remove()">Remove</button>
-              }
-            </div>
-          }
-        </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--image"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else {
+        <div class="ngx-field__image-wrap">
+          @if (previewUrl()) {
+            <img class="ngx-field__image-preview" [src]="previewUrl()" [alt]="label" />
+          } @else {
+            <div class="ngx-field__image-placeholder">
+              <span>📷</span>
+              <span>No image</span>
+            </div>
+          }
+          @if (!readonly) {
+            <div class="ngx-field__image-actions">
+              <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
+                @if (uploading()) {
+                  <span>Uploading…</span>
+                } @else {
+                  <span>{{ previewUrl() ? 'Change' : 'Upload' }}</span>
+                  <input
+                    type="file"
+                    class="ngx-field__file-input"
+                    [id]="'field-' + field.id"
+                    accept="image/*"
+                    [disabled]="field.disabled || uploading()"
+                    (change)="onFileSelect($any($event.target).files[0])"
+                  />
+                }
+              </label>
+              @if (previewUrl()) {
+                <button type="button" class="ngx-field__remove-btn" (click)="remove()">Remove</button>
+              }
+            </div>
+          }
+        </div>
+        @if (uploadError()) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -3136,48 +3164,48 @@ class FileFieldComponent {
         this.control.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FileFieldComponent, isStandalone: true, selector: "ngx-file-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--file"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        @if (fileUrl()) {
-          <a class="ngx-field__file-link" [href]="fileUrl()!" target="_blank" rel="noopener">
-            📎 {{ fileName() || 'Download file' }}
-          </a>
-        } @else {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">—</span>
-        }
-      } @else {
-        <div class="ngx-field__file-wrap">
-          @if (fileName()) {
-            <div class="ngx-field__file-selected">
-              <span class="ngx-field__file-name">📎 {{ fileName() }}</span>
-              <button type="button" class="ngx-field__remove-btn" (click)="remove()" aria-label="Remove file">✕</button>
-            </div>
-          }
-          <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
-            @if (uploading()) {
-              <span>Uploading…</span>
-            } @else {
-              <span>{{ fileName() ? 'Replace file' : 'Choose file' }}</span>
-              <input
-                type="file"
-                class="ngx-field__file-input"
-                [id]="'field-' + field.id"
-                [disabled]="field.disabled || uploading()"
-                (change)="onFileSelect($any($event.target).files[0])"
-              />
-            }
-          </label>
-        </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
-        }
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FileFieldComponent, isStandalone: true, selector: "ngx-file-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--file"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        @if (fileUrl()) {
+          <a class="ngx-field__file-link" [href]="fileUrl()!" target="_blank" rel="noopener">
+            📎 {{ fileName() || 'Download file' }}
+          </a>
+        } @else {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">—</span>
+        }
+      } @else {
+        <div class="ngx-field__file-wrap">
+          @if (fileName()) {
+            <div class="ngx-field__file-selected">
+              <span class="ngx-field__file-name">📎 {{ fileName() }}</span>
+              <button type="button" class="ngx-field__remove-btn" (click)="remove()" aria-label="Remove file">✕</button>
+            </div>
+          }
+          <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
+            @if (uploading()) {
+              <span>Uploading…</span>
+            } @else {
+              <span>{{ fileName() ? 'Replace file' : 'Choose file' }}</span>
+              <input
+                type="file"
+                class="ngx-field__file-input"
+                [id]="'field-' + field.id"
+                [disabled]="field.disabled || uploading()"
+                (change)="onFileSelect($any($event.target).files[0])"
+              />
+            }
+          </label>
+        </div>
+        @if (uploadError()) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        }
+      }
+    </div>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileFieldComponent, decorators: [{
@@ -3186,48 +3214,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'ngx-file-field',
                     standalone: true,
                     imports: [],
-                    template: `
-    <div class="ngx-field ngx-field--file"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
-      @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
-      } @else if (readonly) {
-        @if (fileUrl()) {
-          <a class="ngx-field__file-link" [href]="fileUrl()!" target="_blank" rel="noopener">
-            📎 {{ fileName() || 'Download file' }}
-          </a>
-        } @else {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">—</span>
-        }
-      } @else {
-        <div class="ngx-field__file-wrap">
-          @if (fileName()) {
-            <div class="ngx-field__file-selected">
-              <span class="ngx-field__file-name">📎 {{ fileName() }}</span>
-              <button type="button" class="ngx-field__remove-btn" (click)="remove()" aria-label="Remove file">✕</button>
-            </div>
-          }
-          <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
-            @if (uploading()) {
-              <span>Uploading…</span>
-            } @else {
-              <span>{{ fileName() ? 'Replace file' : 'Choose file' }}</span>
-              <input
-                type="file"
-                class="ngx-field__file-input"
-                [id]="'field-' + field.id"
-                [disabled]="field.disabled || uploading()"
-                (change)="onFileSelect($any($event.target).files[0])"
-              />
-            }
-          </label>
-        </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
-        }
-      }
-    </div>
+                    template: `
+    <div class="ngx-field ngx-field--file"
+      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+      @if (masked) {
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+      } @else if (readonly) {
+        @if (fileUrl()) {
+          <a class="ngx-field__file-link" [href]="fileUrl()!" target="_blank" rel="noopener">
+            📎 {{ fileName() || 'Download file' }}
+          </a>
+        } @else {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">—</span>
+        }
+      } @else {
+        <div class="ngx-field__file-wrap">
+          @if (fileName()) {
+            <div class="ngx-field__file-selected">
+              <span class="ngx-field__file-name">📎 {{ fileName() }}</span>
+              <button type="button" class="ngx-field__remove-btn" (click)="remove()" aria-label="Remove file">✕</button>
+            </div>
+          }
+          <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
+            @if (uploading()) {
+              <span>Uploading…</span>
+            } @else {
+              <span>{{ fileName() ? 'Replace file' : 'Choose file' }}</span>
+              <input
+                type="file"
+                class="ngx-field__file-input"
+                [id]="'field-' + field.id"
+                [disabled]="field.disabled || uploading()"
+                (change)="onFileSelect($any($event.target).files[0])"
+              />
+            }
+          </label>
+        </div>
+        @if (uploadError()) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { field: [{
@@ -3454,6 +3482,7 @@ class DynamicFormComponent {
     rulesEvaluation = inject(RulesEvaluationService);
     entityRefSelection = inject(EntityRefSelectionService);
     commonModulesRegistry = inject(COMMON_MODULES_REGISTRY, { optional: true });
+    migrations = inject(RECORD_MIGRATIONS, { optional: true }) ?? [];
     Object = Object;
     // ─── Signals (local reactive state) ───────────────────────────────────────
     activeTab = signal('');
@@ -3536,11 +3565,62 @@ class DynamicFormComponent {
         const hiddenFields = this.ruleResult().hiddenFields;
         return rawFields.filter(field => evaluateFieldVisibility(field, currentValues) && !hiddenFields.includes(field.id));
     }
+    /**
+     * Entity-level permissions for the current roles.
+     *
+     * Cached rather than recomputed: this is read from the template several times per change
+     * detection pass, and a fresh object each time is both wasted allocation and a new
+     * identity for anything comparing by reference. Invalidated in `ngOnChanges` when
+     * `config` or `userRoles` change, which are its only inputs.
+     */
     get permissions() {
-        return this.rbacService.getPermissions(this.config, this.userRoles);
+        return (this.permissionsCache ??= this.rbacService.getPermissions(this.config, this.userRoles));
+    }
+    permissionsCache = null;
+    /**
+     * Whether the current roles may see this record at all.
+     *
+     * `permissions.view` used to be computed and thrown away — a user whose roles failed it
+     * still received the complete form with every value in the DOM. It is honoured now.
+     *
+     * As with masking, this is presentational: it stops the browser rendering data, it does
+     * not stop the data reaching the browser. Authorize on the server.
+     */
+    get canView() {
+        return this.permissions.canView;
+    }
+    /**
+     * Whether the current roles may delete this record.
+     *
+     * The library ships no delete affordance, so this is surfaced for the consumer to gate
+     * their own — exposed rather than dropped, because a permission the schema declares
+     * should be answerable.
+     */
+    get canDelete() {
+        return this.permissions.canDelete;
     }
     get canSubmit() {
-        return this.permissions.canEdit && !this.readonly;
+        return this.canView && this.permissions.canEdit && !this.readonly;
+    }
+    /**
+     * Errors raised by `validation` rules, keyed by the target they point at.
+     *
+     * A rule can declare the record invalid independently of Angular's validators, so form
+     * validity alone is not the whole picture. `DynamicRecordFormComponent.saveSection()`
+     * has always honoured these; `submit()` did not, which meant the same rule blocked one
+     * save path and merely painted a banner on the other — and anything wiring
+     * `(formSubmit)` to persistence wrote records the rules engine had already rejected.
+     */
+    get ruleValidationErrors() {
+        return this.ruleResult().validationErrors;
+    }
+    /** True when a `validation` rule is currently blocking submission. */
+    get hasRuleErrors() {
+        return Object.keys(this.ruleValidationErrors).length > 0;
+    }
+    /** Single source of truth for both the submit guard and the button's disabled state. */
+    get submitBlocked() {
+        return this.form.invalid || this.hasRuleErrors;
     }
     ngOnInit() {
         this.selectionSub = this.entityRefSelection.selection$.subscribe(({ fieldId, option }) => {
@@ -3548,6 +3628,9 @@ class DynamicFormComponent {
         });
     }
     ngOnChanges(changes) {
+        if (changes['config'] || changes['userRoles']) {
+            this.permissionsCache = null;
+        }
         if (changes['config'] && this.config) {
             // Configs arrive as plain JSON from storage or an API, where TypeScript cannot enforce
             // the option shape. Normalise here, at the library boundary, so everything downstream
@@ -3641,13 +3724,14 @@ class DynamicFormComponent {
         buildTabControls(this.config.tabs || [], group);
         this.form = this.fb.group(group);
         if (this.initialData) {
-            this.patchForm(this.initialData);
+            this.patchForm(this.upgradeRecord(this.initialData));
         }
         const initialFlattened = this.flattenFormValues();
         this.formValues.set(initialFlattened);
         this.previousValues = { ...initialFlattened };
         this.sessionBaseline.set({ ...initialFlattened });
         this.unlockedFields.set(new Set());
+        this.syncHiddenFieldState(initialFlattened);
         if (this.preview) {
             // Show what an array field looks like rather than an empty slot, then freeze.
             for (const field of this.allFields()) {
@@ -3668,6 +3752,7 @@ class DynamicFormComponent {
             const flattened = this.flattenFormValues();
             this.formValues.set(flattened);
             this.runPatchOnTrue(flattened);
+            this.syncHiddenFieldState(flattened);
             this.previousValues = { ...flattened };
             this.formChange.emit(this.extractRecord());
         });
@@ -3716,10 +3801,31 @@ class DynamicFormComponent {
             group.patchValue(item);
         return group;
     }
+    /**
+     * Bring a record up to the config's `version` before it reaches the form.
+     *
+     * Done here because this is the one place a record enters the renderer, so a consumer
+     * cannot forget it. Migration is a no-op unless the consumer registered steps *and* the
+     * record is behind — an unstamped record is deliberately left alone (see `migrateRecord`).
+     *
+     * A missing or broken step throws from core. That is not swallowed: rendering a
+     * half-understood record would write it back in a shape matching neither schema.
+     */
+    upgradeRecord(data) {
+        if (!this.migrations.length || !this.config)
+            return data;
+        const result = migrateRecord(data, this.config, this.migrations);
+        if (result.applied.length && isDevMode()) {
+            console.info(`[ngx-dynamic-entity] Migrated a "${this.config.entity}" record from config version ` +
+                `${result.from} to ${result.to} (steps: ${result.applied.join(', ')}).`);
+        }
+        return result.record;
+    }
     patchForm(data) {
         if (!data || !this.form)
             return;
         const fieldsById = new Map(this.allFields().map(f => [f.id, f]));
+        const patchedFieldIds = new Set();
         const walkTabs = (tabs) => {
             for (const tab of tabs) {
                 const tabData = getTabData(tab.id, data, this.config);
@@ -3744,13 +3850,57 @@ class DynamicFormComponent {
                     else {
                         ctrl.patchValue(val, { emitEvent: false });
                     }
+                    patchedFieldIds.add(field.id);
                 }
                 if (tab.children)
                     walkTabs(tab.children);
             }
         };
         walkTabs(this.config.tabs || []);
+        this.warnUnconsumedInitialData(data, fieldsById, patchedFieldIds);
     }
+    /**
+     * A record is nested by tab id (`{ tabId: { fieldId: value } }`) unless the tab sets
+     * `flatData: true`. Handing a flat record to a nested tab finds nothing, so the fields
+     * stay empty — with no error and no clue. That silent miss is the most expensive way to
+     * lose an hour with this library, so name it in dev builds.
+     *
+     * Only top-level keys that match a known field id are reported: anything else is assumed
+     * to be the consumer's own record metadata (ids, timestamps, `_configVersion`) and is not
+     * our business.
+     */
+    warnUnconsumedInitialData(data, fieldsById, patchedFieldIds) {
+        if (!isDevMode() || !this.config)
+            return;
+        const tabIds = new Set();
+        const collectTabIds = (tabs) => {
+            for (const tab of tabs) {
+                tabIds.add(tab.id);
+                if (tab.children)
+                    collectTabIds(tab.children);
+            }
+        };
+        collectTabIds(this.config.tabs || []);
+        const unconsumed = Object.keys(data).filter(key => !tabIds.has(key) && // a tab id at the root is the nested container, not a stray field
+            data[key] !== undefined &&
+            fieldsById.has(key) &&
+            !patchedFieldIds.has(key) &&
+            !this.warnedUnconsumedKeys.has(key));
+        if (!unconsumed.length)
+            return;
+        for (const key of unconsumed)
+            this.warnedUnconsumedKeys.add(key);
+        const shown = unconsumed.slice(0, 5).join(', ');
+        const more = unconsumed.length > 5 ? ` (+${unconsumed.length - 5} more)` : '';
+        const plural = unconsumed.length === 1;
+        console.warn(`[ngx-dynamic-entity] initialData has top-level ${plural ? 'key' : 'keys'} matching ` +
+            `${plural ? 'a field that was' : 'fields that were'} not populated: ${shown}${more}. ` +
+            `A record is nested by tab id ({ tabId: { fieldId: value } }) unless the tab sets ` +
+            `flatData: true. Either nest the value under its tab id, or set flatData: true on ` +
+            `the tab holding ${plural ? 'that field' : 'those fields'}.`);
+    }
+    /** Warn once per key per form instance — patchForm re-runs on every initialData change. */
+    warnedUnconsumedKeys = new Set();
     /** Assemble full nested record from per-tab FormGroups, respecting flatData, refererField & arrays. */
     extractRecord() {
         if (!this.form || !this.config)
@@ -3849,6 +3999,57 @@ class DynamicFormComponent {
         return this.getControl(targetId, autoPatch.targetTab);
     }
     // ─── Helpers ──────────────────────────────────────────────────────────────
+    /**
+     * The fields the render filter operates on — a tab's own fields, at every tab depth.
+     * Deliberately not `allFields()`: `group` and `array` children are shown or hidden with
+     * their parent, and toggling a child's state independently would fight the parent's.
+     */
+    tabFields() {
+        const out = [];
+        const walk = (tabs) => {
+            for (const tab of tabs ?? []) {
+                out.push(...(tab.fields ?? []));
+                walk(tab.children);
+            }
+        };
+        walk(this.config?.tabs);
+        return out;
+    }
+    /**
+     * Keep a hidden field's control out of form validity.
+     *
+     * A field hidden by a rule or a `showWhen` condition is filtered out of the render, but
+     * its validators stay attached — so a hidden *required* field holds `form.invalid` true
+     * forever, permanently disabling Save with nothing on screen to explain why.
+     *
+     * Disabling is the fix rather than stripping validators: Angular excludes disabled
+     * controls from validity, and the field's own validators survive intact for when it
+     * comes back. Values are untouched — `flattenFormValues` and `extractRecord` both read
+     * `control.value`, which a disabled control still carries, so rule evaluation and the
+     * emitted record see exactly what they saw before. That also keeps this from feeding
+     * back on itself: hiding a field cannot change the values the rules are evaluated over.
+     *
+     * The visibility predicate is the same one `fieldsForActiveTab` filters with, so what is
+     * rendered and what counts toward validity cannot drift apart.
+     */
+    syncHiddenFieldState(values) {
+        if (this.preview)
+            return; // preview freezes the whole form on purpose
+        const hiddenByRule = new Set(this.ruleResult().hiddenFields);
+        for (const field of this.tabFields()) {
+            const ctrl = this.getControl(field.id);
+            if (!ctrl)
+                continue;
+            const hidden = hiddenByRule.has(field.id) || !evaluateFieldVisibility(field, values);
+            if (hidden) {
+                if (ctrl.enabled)
+                    ctrl.disable({ emitEvent: false });
+            }
+            else if (ctrl.disabled && !field.disabled) {
+                ctrl.enable({ emitEvent: false });
+            }
+        }
+    }
     /** Every field in the config, including `group`/`array` children. */
     allFields() {
         const out = [];
@@ -3918,7 +4119,7 @@ class DynamicFormComponent {
         return resolveLabel(tab.label, this.language);
     }
     async submit() {
-        if (!this.canSubmit || this.form.invalid) {
+        if (!this.canSubmit || this.submitBlocked) {
             this.form.markAllAsTouched();
             return;
         }
@@ -3947,11 +4148,11 @@ class DynamicFormComponent {
         this.formReset.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", rules: "rules", initialData: "initialData", originalData: "originalData", userRoles: "userRoles", language: "language", readonly: "readonly", readOnlyFields: "readOnlyFields", showInfoBanners: "showInfoBanners", loading: "loading", error: "error", changeDebounceMs: "changeDebounceMs", preview: "preview" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\r\n\r\n  <!-- Error message banner -->\r\n  @if (error) {\r\n    <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\r\n  }\r\n\r\n  <!-- Rules Info Banners -->\r\n  @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\r\n    <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\r\n      \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Rules Validation Errors & Warnings -->\r\n  @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\r\n    <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\r\n      \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\r\n    </div>\r\n  }\r\n  @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\r\n    <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\r\n      \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\r\n  @if (changedCriticalFields().length > 0) {\r\n    <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\r\n      \uD83D\uDD12 Critical field changed:\r\n      @for (field of changedCriticalFields(); track field.id) {\r\n        <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\r\n      }\r\n      \u2014 this differs from the value at the start of this session.\r\n    </div>\r\n  }\r\n\r\n  <!-- Primary Tab bar \u2014 only if visible tabs defined -->\r\n  @if (visibleTabs.length > 0) {\r\n    <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\r\n      @for (tab of visibleTabs; track tab.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ngx-form__tab\"\r\n          [attr.data-testid]=\"'tab-' + tab.id\"\r\n          [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\r\n          (click)=\"setActiveTab(tab.id)\"\r\n          role=\"tab\"\r\n          [attr.aria-selected]=\"activeTab() === tab.id\"\r\n        >\r\n          {{ resolveTabLabel(tab) }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\r\n  @if (visibleSubTabs.length > 0) {\r\n    <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\r\n      @for (subTab of visibleSubTabs; track subTab.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ngx-form__tab ngx-form__tab--sub\"\r\n          [attr.data-testid]=\"'subtab-' + subTab.id\"\r\n          [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\r\n          (click)=\"setActiveSubTab(subTab.id)\"\r\n          role=\"tab\"\r\n          [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\r\n        >\r\n          {{ resolveTabLabel(subTab) }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Module tab component OR Fields for active tab -->\r\n  @if (activeTabModuleComponent) {\r\n    <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\r\n      <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\r\n    </div>\r\n  } @else {\r\n    <!-- Fields for active tab (Responsive 12-column grid) -->\r\n    <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\r\n      @for (field of fieldsForActiveTab; track field.id) {\r\n        <div\r\n          class=\"ngx-form__field-slot\"\r\n          [style.gridColumn]=\"getFieldSpan(field)\"\r\n          [attr.id]=\"'field-container-' + field.id\"\r\n        >\r\n          <ngx-dynamic-field\r\n            [field]=\"field\"\r\n            [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\r\n            [config]=\"config\"\r\n            [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\r\n            [language]=\"language\"\r\n            [readonly]=\"isFieldReadonly(field)\"\r\n            [userRoles]=\"userRoles\"\r\n          />\r\n          @if (field.criticalField && !readonly) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-form__lock\"\r\n              [attr.data-testid]=\"'lock-' + field.id\"\r\n              [attr.aria-pressed]=\"!isFieldLocked(field)\"\r\n              [attr.aria-label]=\"\r\n                (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\r\n              \"\r\n              [title]=\"\r\n                isFieldLocked(field)\r\n                  ? 'Critical field \u2014 click to unlock for editing'\r\n                  : 'Critical field \u2014 click to lock'\r\n              \"\r\n              (click)=\"toggleFieldLock(field)\"\r\n            >\r\n              {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\r\n  @if (!readonly && permissions.canEdit) {\r\n    <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"ngx-form__reset\"\r\n        data-testid=\"form-reset\"\r\n        (click)=\"reset()\"\r\n        [disabled]=\"isSaving()\"\r\n      >\r\n        Reset\r\n      </button>\r\n      <button\r\n        type=\"submit\"\r\n        class=\"ngx-form__submit\"\r\n        data-testid=\"form-submit\"\r\n        [disabled]=\"form.invalid\"\r\n        title=\"Shortcut: Ctrl+S\"\r\n      >\r\n        @if (isSaving() || loading) {\r\n          Saving\u2026\r\n        } @else {\r\n          Save\r\n        }\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n</form>\r\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media (max-width: 768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"], dependencies: [{ 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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", rules: "rules", initialData: "initialData", originalData: "originalData", userRoles: "userRoles", language: "language", readonly: "readonly", readOnlyFields: "readOnlyFields", showInfoBanners: "showInfoBanners", loading: "loading", error: "error", changeDebounceMs: "changeDebounceMs", preview: "preview" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService], usesOnChanges: true, ngImport: i0, template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        \uD83D\uDD12 Critical field changed:\n        @for (field of changedCriticalFields(); track field.id) {\n          <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\n        }\n        \u2014 this differs from the value at the start of this session.\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Module tab component OR Fields for active tab -->\n    @if (activeTabModuleComponent) {\n      <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n        <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\n      </div>\n    } @else {\n      <!-- Fields for active tab (Responsive 12-column grid) -->\n      <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n        @for (field of fieldsForActiveTab; track field.id) {\n          <div\n            class=\"ngx-form__field-slot\"\n            [style.gridColumn]=\"getFieldSpan(field)\"\n            [attr.id]=\"'field-container-' + field.id\"\n          >\n            <ngx-dynamic-field\n              [field]=\"field\"\n              [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n              [config]=\"config\"\n              [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n              [language]=\"language\"\n              [readonly]=\"isFieldReadonly(field)\"\n              [userRoles]=\"userRoles\"\n            />\n            @if (field.criticalField && !readonly) {\n              <button\n                type=\"button\"\n                class=\"ngx-form__lock\"\n                [attr.data-testid]=\"'lock-' + field.id\"\n                [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                [attr.aria-label]=\"\n                  (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\n                \"\n                [title]=\"\n                  isFieldLocked(field)\n                    ? 'Critical field \u2014 click to unlock for editing'\n                    : 'Critical field \u2014 click to lock'\n                \"\n                (click)=\"toggleFieldLock(field)\"\n              >\n                {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button\n          type=\"button\"\n          class=\"ngx-form__reset\"\n          data-testid=\"form-reset\"\n          (click)=\"reset()\"\n          [disabled]=\"isSaving()\"\n        >\n          Reset\n        </button>\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\n          title=\"Shortcut: Ctrl+S\"\n        >\n          @if (isSaving() || loading) {\n            Saving\u2026\n          } @else {\n            Save\n          }\n        </button>\n      </div>\n    }\n\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    You do not have permission to view this record.\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media (max-width: 768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"], dependencies: [{ 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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dynamic-form', standalone: true, imports: [ReactiveFormsModule, DynamicFieldComponent, NgComponentOutlet], providers: [EntityRefSelectionService], template: "<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\r\n\r\n  <!-- Error message banner -->\r\n  @if (error) {\r\n    <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\r\n  }\r\n\r\n  <!-- Rules Info Banners -->\r\n  @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\r\n    <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\r\n      \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Rules Validation Errors & Warnings -->\r\n  @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\r\n    <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\r\n      \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\r\n    </div>\r\n  }\r\n  @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\r\n    <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\r\n      \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\r\n    </div>\r\n  }\r\n\r\n  <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\r\n  @if (changedCriticalFields().length > 0) {\r\n    <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\r\n      \uD83D\uDD12 Critical field changed:\r\n      @for (field of changedCriticalFields(); track field.id) {\r\n        <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\r\n      }\r\n      \u2014 this differs from the value at the start of this session.\r\n    </div>\r\n  }\r\n\r\n  <!-- Primary Tab bar \u2014 only if visible tabs defined -->\r\n  @if (visibleTabs.length > 0) {\r\n    <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\r\n      @for (tab of visibleTabs; track tab.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ngx-form__tab\"\r\n          [attr.data-testid]=\"'tab-' + tab.id\"\r\n          [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\r\n          (click)=\"setActiveTab(tab.id)\"\r\n          role=\"tab\"\r\n          [attr.aria-selected]=\"activeTab() === tab.id\"\r\n        >\r\n          {{ resolveTabLabel(tab) }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\r\n  @if (visibleSubTabs.length > 0) {\r\n    <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\r\n      @for (subTab of visibleSubTabs; track subTab.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"ngx-form__tab ngx-form__tab--sub\"\r\n          [attr.data-testid]=\"'subtab-' + subTab.id\"\r\n          [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\r\n          (click)=\"setActiveSubTab(subTab.id)\"\r\n          role=\"tab\"\r\n          [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\r\n        >\r\n          {{ resolveTabLabel(subTab) }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Module tab component OR Fields for active tab -->\r\n  @if (activeTabModuleComponent) {\r\n    <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\r\n      <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\r\n    </div>\r\n  } @else {\r\n    <!-- Fields for active tab (Responsive 12-column grid) -->\r\n    <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\r\n      @for (field of fieldsForActiveTab; track field.id) {\r\n        <div\r\n          class=\"ngx-form__field-slot\"\r\n          [style.gridColumn]=\"getFieldSpan(field)\"\r\n          [attr.id]=\"'field-container-' + field.id\"\r\n        >\r\n          <ngx-dynamic-field\r\n            [field]=\"field\"\r\n            [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\r\n            [config]=\"config\"\r\n            [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\r\n            [language]=\"language\"\r\n            [readonly]=\"isFieldReadonly(field)\"\r\n            [userRoles]=\"userRoles\"\r\n          />\r\n          @if (field.criticalField && !readonly) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ngx-form__lock\"\r\n              [attr.data-testid]=\"'lock-' + field.id\"\r\n              [attr.aria-pressed]=\"!isFieldLocked(field)\"\r\n              [attr.aria-label]=\"\r\n                (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\r\n              \"\r\n              [title]=\"\r\n                isFieldLocked(field)\r\n                  ? 'Critical field \u2014 click to unlock for editing'\r\n                  : 'Critical field \u2014 click to lock'\r\n              \"\r\n              (click)=\"toggleFieldLock(field)\"\r\n            >\r\n              {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\r\n  @if (!readonly && permissions.canEdit) {\r\n    <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"ngx-form__reset\"\r\n        data-testid=\"form-reset\"\r\n        (click)=\"reset()\"\r\n        [disabled]=\"isSaving()\"\r\n      >\r\n        Reset\r\n      </button>\r\n      <button\r\n        type=\"submit\"\r\n        class=\"ngx-form__submit\"\r\n        data-testid=\"form-submit\"\r\n        [disabled]=\"form.invalid\"\r\n        title=\"Shortcut: Ctrl+S\"\r\n      >\r\n        @if (isSaving() || loading) {\r\n          Saving\u2026\r\n        } @else {\r\n          Save\r\n        }\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n</form>\r\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media (max-width: 768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"] }]
+            args: [{ selector: 'ngx-dynamic-form', standalone: true, imports: [ReactiveFormsModule, DynamicFieldComponent, NgComponentOutlet], providers: [EntityRefSelectionService], template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        \uD83D\uDD12 Critical field changed:\n        @for (field of changedCriticalFields(); track field.id) {\n          <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\n        }\n        \u2014 this differs from the value at the start of this session.\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Module tab component OR Fields for active tab -->\n    @if (activeTabModuleComponent) {\n      <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n        <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\n      </div>\n    } @else {\n      <!-- Fields for active tab (Responsive 12-column grid) -->\n      <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n        @for (field of fieldsForActiveTab; track field.id) {\n          <div\n            class=\"ngx-form__field-slot\"\n            [style.gridColumn]=\"getFieldSpan(field)\"\n            [attr.id]=\"'field-container-' + field.id\"\n          >\n            <ngx-dynamic-field\n              [field]=\"field\"\n              [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n              [config]=\"config\"\n              [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n              [language]=\"language\"\n              [readonly]=\"isFieldReadonly(field)\"\n              [userRoles]=\"userRoles\"\n            />\n            @if (field.criticalField && !readonly) {\n              <button\n                type=\"button\"\n                class=\"ngx-form__lock\"\n                [attr.data-testid]=\"'lock-' + field.id\"\n                [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                [attr.aria-label]=\"\n                  (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\n                \"\n                [title]=\"\n                  isFieldLocked(field)\n                    ? 'Critical field \u2014 click to unlock for editing'\n                    : 'Critical field \u2014 click to lock'\n                \"\n                (click)=\"toggleFieldLock(field)\"\n              >\n                {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button\n          type=\"button\"\n          class=\"ngx-form__reset\"\n          data-testid=\"form-reset\"\n          (click)=\"reset()\"\n          [disabled]=\"isSaving()\"\n        >\n          Reset\n        </button>\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\n          title=\"Shortcut: Ctrl+S\"\n        >\n          @if (isSaving() || loading) {\n            Saving\u2026\n          } @else {\n            Save\n          }\n        </button>\n      </div>\n    }\n\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    You do not have permission to view this record.\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media (max-width: 768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rules: [{
@@ -3991,6 +4192,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['window:keydown', ['$event']]
             }] } });
 
+/**
+ * Distinguishes "no tab holds this field" from "the field holds undefined", so the tab walk
+ * can keep searching in the first case and stop in the second.
+ */
+const FIELD_NOT_FOUND = Symbol('field-not-found');
 /**
  * DynamicRecordFormComponent — comprehensive tabbed record view & edit component.
  * Supports cross-tab rule evaluation, profile header, summary drawer (showOnMinimize),
@@ -4340,14 +4546,34 @@ class DynamicRecordFormComponent {
     controlFor(fieldId) {
         return this.dynamicFormComp?.getControl(fieldId) ?? null;
     }
-    /** A field's current value, read from the record so it is stable during render. */
+    /**
+     * A field's current value, read from the record so it is stable during render.
+     *
+     * Resolved through `getTabData` so it honours exactly the nesting contract the form
+     * patches with — `{ tabId: { fieldId } }`, or the record root when the tab sets
+     * `flatData`. Reading the record flat instead is not a shortcut: it makes the summary
+     * display values the form never loaded, which reads as "the data is there" while every
+     * control behind it is empty.
+     *
+     * Walks sub-tabs as well: a summary, header, or profile field may sit on any tab at any
+     * depth.
+     */
     fieldValue(fieldId) {
-        for (const tab of this.config?.tabs ?? []) {
-            const data = getTabData(tab.id, this.currentData(), this.config);
-            if (data && fieldId in data)
-                return data[fieldId];
-        }
-        return undefined;
+        const visit = (tabs = []) => {
+            for (const tab of tabs) {
+                const data = getTabData(tab.id, this.currentData(), this.config);
+                if (data && fieldId in data)
+                    return data[fieldId];
+                if (tab.children) {
+                    const found = visit(tab.children);
+                    if (found !== FIELD_NOT_FOUND)
+                        return found;
+                }
+            }
+            return FIELD_NOT_FOUND;
+        };
+        const result = visit(this.config?.tabs);
+        return result === FIELD_NOT_FOUND ? undefined : result;
     }
     isModified = computed(() => {
         const orig = this.originalBaseline();
@@ -4391,7 +4617,7 @@ class DynamicRecordFormComponent {
     }
     /** Summary values render through the shared core formatter, not a local stringifier. */
     formatFieldValue(field) {
-        return formatDisplayValue(field.type, field.options, this.currentData()[field.id], this.language);
+        return formatDisplayValue(field.type, field.options, this.fieldValue(field.id), this.language);
     }
     jumpToField(fieldId) {
         // Find parent tab for field
@@ -4411,11 +4637,11 @@ class DynamicRecordFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicRecordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DynamicRecordFormComponent, isStandalone: true, selector: "ngx-dynamic-record-form", inputs: { config: "config", rules: "rules", initialData: "initialData", userRoles: "userRoles", language: "language", readonly: "readonly", loading: "loading", error: "error", isReadOnly: "isReadOnly", readOnlyFields: "readOnlyFields", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\r\n  <!-- Record Header -->\r\n  <div class=\"ngx-record-editor__header\">\r\n    <div class=\"ngx-record-editor__title-group\">\r\n      @if (profileImageUrl) {\r\n        <img\r\n          class=\"ngx-record-editor__avatar\"\r\n          data-testid=\"header-profile-image\"\r\n          [src]=\"profileImageUrl\"\r\n          [alt]=\"recordTitle\"\r\n        />\r\n      } @else {\r\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\r\n          {{ avatarLetter }}\r\n        </div>\r\n      }\r\n      <div>\r\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\r\n          {{ recordTitle }}\r\n        </h2>\r\n        <span class=\"ngx-record-editor__subtitle\">Entity: {{ config.entity }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Record-level status switch, outside section editing -->\r\n    @if (headerToggleField; as toggleField) {\r\n      <label class=\"ngx-record-editor__header-toggle\">\r\n        <span>{{ formatFieldLabel(toggleField) }}</span>\r\n        <input\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          data-testid=\"header-toggle\"\r\n          [checked]=\"headerToggleValue\"\r\n          [disabled]=\"recordReadOnly\"\r\n          [attr.aria-checked]=\"headerToggleValue\"\r\n          (change)=\"toggleHeaderStatus()\"\r\n        />\r\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ headerToggleValue ? 'Yes' : 'No' }}</span>\r\n      </label>\r\n    }\r\n  </div>\r\n\r\n  <!-- Dismissible info banners (rules `info` action) -->\r\n  @for (banner of infoBanners; track banner.fieldId) {\r\n    <div\r\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\r\n      role=\"status\"\r\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\r\n    >\r\n      <span>\u2139\uFE0F {{ banner.message }}</span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"ngx-record-editor__banner-dismiss\"\r\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\r\n        [attr.aria-label]=\"'Dismiss: ' + banner.message\"\r\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\r\n      >\u2715</button>\r\n    </div>\r\n  }\r\n\r\n  <!-- Modification baseline banner -->\r\n  @if (isModified()) {\r\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\r\n      \uD83D\uDD12 Record modified from session baseline \u2014 unsaved changes pending.\r\n    </div>\r\n  }\r\n\r\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\r\n  @if (summaryFields().length > 0) {\r\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\r\n      @for (sf of summaryFields(); track sf.id) {\r\n        <div\r\n          class=\"ngx-record-editor__summary-item\"\r\n          [attr.data-testid]=\"'summary-' + sf.id\"\r\n          (click)=\"jumpToField(sf.id)\"\r\n          [title]=\"'Click to jump to ' + formatFieldLabel(sf)\"\r\n        >\r\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\r\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\r\n  @if (viewMode && !recordReadOnly) {\r\n    <div class=\"ngx-record-editor__section-bar\">\r\n      @if (isEditingActiveTab) {\r\n        <span class=\"ngx-record-editor__section-hint\">Editing this section</span>\r\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\r\n          Cancel\r\n        </button>\r\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\r\n          Save section\r\n        </button>\r\n      } @else {\r\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\r\n          Edit section\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (Object.keys(sectionErrors()).length > 0) {\r\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\r\n      @for (key of Object.keys(sectionErrors()); track key) {\r\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Array rows: listed here, edited in the drawer below -->\r\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\r\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\r\n      <div class=\"ngx-record-editor__rows-head\">\r\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\r\n        @if (!sectionReadOnly) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"ngx-form__reset\"\r\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\r\n            (click)=\"openAddRow(arrayField)\"\r\n          >+ Row</button>\r\n        }\r\n      </div>\r\n\r\n      @for (row of rowsOf(arrayField); track $index) {\r\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\r\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\r\n          @if (!sectionReadOnly) {\r\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\r\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\r\n              (click)=\"openEditRow(arrayField, $index)\">Edit</button>\r\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\r\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\r\n              (click)=\"deleteRow(arrayField, $index)\">Delete</button>\r\n          }\r\n        </div>\r\n      } @empty {\r\n        <p class=\"ngx-record-editor__row-empty\">No rows yet.</p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\r\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\r\n  -->\r\n  @if (inlineRowField(); as rowField) {\r\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\r\n      <div class=\"ngx-record-editor__rows-head\">\r\n        <strong>{{ inlineRowIndex() === null ? 'Add' : 'Edit' }} {{ formatFieldLabel(rowField) }} row</strong>\r\n      </div>\r\n\r\n      <div class=\"ngx-form__panel\">\r\n        @for (child of rowField.children ?? []; track child.id) {\r\n          <ngx-dynamic-field\r\n            [field]=\"child\"\r\n            [control]=\"inlineRowForm!.get(child.id)!\"\r\n            [config]=\"config\"\r\n            [language]=\"language\"\r\n            [readonly]=\"false\"\r\n            [userRoles]=\"userRoles\"\r\n            [style.gridColumn]=\"'span 12'\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <div class=\"ngx-record-editor__section-bar\">\r\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">Cancel</button>\r\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">Save row</button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Main Dynamic Form -->\r\n  <ngx-dynamic-form\r\n    [config]=\"config\"\r\n    [rules]=\"rules\"\r\n    [initialData]=\"initialData\"\r\n    [originalData]=\"originalBaseline()\"\r\n    [userRoles]=\"userRoles\"\r\n    [language]=\"language\"\r\n    [readonly]=\"sectionReadOnly\"\r\n    [readOnlyFields]=\"readOnlyFields\"\r\n    [showInfoBanners]=\"false\"\r\n    [loading]=\"loading\"\r\n    [error]=\"error\"\r\n    (formChange)=\"onFormChange($event)\"\r\n    (formSubmit)=\"onFormSubmit($event)\"\r\n    (formReset)=\"onFormReset()\"\r\n    (activeTabChange)=\"onActiveTabChange($event)\"\r\n  />\r\n</div>\r\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview"], outputs: ["formSubmit", "formChange", "formReset", "activeTabChange"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DynamicRecordFormComponent, isStandalone: true, selector: "ngx-dynamic-record-form", inputs: { config: "config", rules: "rules", initialData: "initialData", userRoles: "userRoles", language: "language", readonly: "readonly", loading: "loading", error: "error", isReadOnly: "isReadOnly", readOnlyFields: "readOnlyFields", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">Entity: {{ config.entity }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ headerToggleValue ? 'Yes' : 'No' }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"'Dismiss: ' + banner.message\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\u2715</button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      \uD83D\uDD12 Record modified from session baseline \u2014 unsaved changes pending.\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"'Click to jump to ' + formatFieldLabel(sf)\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">Editing this section</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          Cancel\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          Save section\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          Edit section\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >+ Row</button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\">Edit</button>\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\">Delete</button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">No rows yet.</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ inlineRowIndex() === null ? 'Add' : 'Edit' }} {{ formatFieldLabel(rowField) }} row</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">Cancel</button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">Save row</button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview"], outputs: ["formSubmit", "formChange", "formReset", "activeTabChange"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicRecordFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-dynamic-record-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormComponent, DynamicFieldComponent], template: "<div class=\"ngx-record-editor\">\r\n  <!-- Record Header -->\r\n  <div class=\"ngx-record-editor__header\">\r\n    <div class=\"ngx-record-editor__title-group\">\r\n      @if (profileImageUrl) {\r\n        <img\r\n          class=\"ngx-record-editor__avatar\"\r\n          data-testid=\"header-profile-image\"\r\n          [src]=\"profileImageUrl\"\r\n          [alt]=\"recordTitle\"\r\n        />\r\n      } @else {\r\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\r\n          {{ avatarLetter }}\r\n        </div>\r\n      }\r\n      <div>\r\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\r\n          {{ recordTitle }}\r\n        </h2>\r\n        <span class=\"ngx-record-editor__subtitle\">Entity: {{ config.entity }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Record-level status switch, outside section editing -->\r\n    @if (headerToggleField; as toggleField) {\r\n      <label class=\"ngx-record-editor__header-toggle\">\r\n        <span>{{ formatFieldLabel(toggleField) }}</span>\r\n        <input\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          data-testid=\"header-toggle\"\r\n          [checked]=\"headerToggleValue\"\r\n          [disabled]=\"recordReadOnly\"\r\n          [attr.aria-checked]=\"headerToggleValue\"\r\n          (change)=\"toggleHeaderStatus()\"\r\n        />\r\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ headerToggleValue ? 'Yes' : 'No' }}</span>\r\n      </label>\r\n    }\r\n  </div>\r\n\r\n  <!-- Dismissible info banners (rules `info` action) -->\r\n  @for (banner of infoBanners; track banner.fieldId) {\r\n    <div\r\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\r\n      role=\"status\"\r\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\r\n    >\r\n      <span>\u2139\uFE0F {{ banner.message }}</span>\r\n      <button\r\n        type=\"button\"\r\n        class=\"ngx-record-editor__banner-dismiss\"\r\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\r\n        [attr.aria-label]=\"'Dismiss: ' + banner.message\"\r\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\r\n      >\u2715</button>\r\n    </div>\r\n  }\r\n\r\n  <!-- Modification baseline banner -->\r\n  @if (isModified()) {\r\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\r\n      \uD83D\uDD12 Record modified from session baseline \u2014 unsaved changes pending.\r\n    </div>\r\n  }\r\n\r\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\r\n  @if (summaryFields().length > 0) {\r\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\r\n      @for (sf of summaryFields(); track sf.id) {\r\n        <div\r\n          class=\"ngx-record-editor__summary-item\"\r\n          [attr.data-testid]=\"'summary-' + sf.id\"\r\n          (click)=\"jumpToField(sf.id)\"\r\n          [title]=\"'Click to jump to ' + formatFieldLabel(sf)\"\r\n        >\r\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\r\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\r\n  @if (viewMode && !recordReadOnly) {\r\n    <div class=\"ngx-record-editor__section-bar\">\r\n      @if (isEditingActiveTab) {\r\n        <span class=\"ngx-record-editor__section-hint\">Editing this section</span>\r\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\r\n          Cancel\r\n        </button>\r\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\r\n          Save section\r\n        </button>\r\n      } @else {\r\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\r\n          Edit section\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (Object.keys(sectionErrors()).length > 0) {\r\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\r\n      @for (key of Object.keys(sectionErrors()); track key) {\r\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Array rows: listed here, edited in the drawer below -->\r\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\r\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\r\n      <div class=\"ngx-record-editor__rows-head\">\r\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\r\n        @if (!sectionReadOnly) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"ngx-form__reset\"\r\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\r\n            (click)=\"openAddRow(arrayField)\"\r\n          >+ Row</button>\r\n        }\r\n      </div>\r\n\r\n      @for (row of rowsOf(arrayField); track $index) {\r\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\r\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\r\n          @if (!sectionReadOnly) {\r\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\r\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\r\n              (click)=\"openEditRow(arrayField, $index)\">Edit</button>\r\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\r\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\r\n              (click)=\"deleteRow(arrayField, $index)\">Delete</button>\r\n          }\r\n        </div>\r\n      } @empty {\r\n        <p class=\"ngx-record-editor__row-empty\">No rows yet.</p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!--\r\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\r\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\r\n  -->\r\n  @if (inlineRowField(); as rowField) {\r\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\r\n      <div class=\"ngx-record-editor__rows-head\">\r\n        <strong>{{ inlineRowIndex() === null ? 'Add' : 'Edit' }} {{ formatFieldLabel(rowField) }} row</strong>\r\n      </div>\r\n\r\n      <div class=\"ngx-form__panel\">\r\n        @for (child of rowField.children ?? []; track child.id) {\r\n          <ngx-dynamic-field\r\n            [field]=\"child\"\r\n            [control]=\"inlineRowForm!.get(child.id)!\"\r\n            [config]=\"config\"\r\n            [language]=\"language\"\r\n            [readonly]=\"false\"\r\n            [userRoles]=\"userRoles\"\r\n            [style.gridColumn]=\"'span 12'\"\r\n          />\r\n        }\r\n      </div>\r\n\r\n      <div class=\"ngx-record-editor__section-bar\">\r\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">Cancel</button>\r\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">Save row</button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- Main Dynamic Form -->\r\n  <ngx-dynamic-form\r\n    [config]=\"config\"\r\n    [rules]=\"rules\"\r\n    [initialData]=\"initialData\"\r\n    [originalData]=\"originalBaseline()\"\r\n    [userRoles]=\"userRoles\"\r\n    [language]=\"language\"\r\n    [readonly]=\"sectionReadOnly\"\r\n    [readOnlyFields]=\"readOnlyFields\"\r\n    [showInfoBanners]=\"false\"\r\n    [loading]=\"loading\"\r\n    [error]=\"error\"\r\n    (formChange)=\"onFormChange($event)\"\r\n    (formSubmit)=\"onFormSubmit($event)\"\r\n    (formReset)=\"onFormReset()\"\r\n    (activeTabChange)=\"onActiveTabChange($event)\"\r\n  />\r\n</div>\r\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"] }]
+            args: [{ selector: 'ngx-dynamic-record-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormComponent, DynamicFieldComponent], template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">Entity: {{ config.entity }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ headerToggleValue ? 'Yes' : 'No' }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"'Dismiss: ' + banner.message\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\u2715</button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      \uD83D\uDD12 Record modified from session baseline \u2014 unsaved changes pending.\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"'Click to jump to ' + formatFieldLabel(sf)\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">Editing this section</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          Cancel\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          Save section\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          Edit section\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >+ Row</button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\">Edit</button>\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\">Delete</button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">No rows yet.</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ inlineRowIndex() === null ? 'Add' : 'Edit' }} {{ formatFieldLabel(rowField) }} row</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">Cancel</button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">Save row</button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rules: [{
@@ -4457,5 +4683,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, DateFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, HOOK_REGISTRY, HookRegistryService, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LookupRegistryService, MASKED_ROLES, MultiSelectFieldComponent, NumberFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, UPLOAD_HANDLER, VALIDATOR_REGISTRY, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
+export { ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DateFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, ImageFieldComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LookupRegistryService, MASKED_ROLES, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, UPLOAD_HANDLER, VALIDATOR_REGISTRY, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map