ngx-dynamic-entity 1.0.0 → 1.2.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -1,8 +1,8 @@
 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 { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, ChangeDetectorRef, Optional, Inject, EventEmitter, computed, HostListener, ViewChildren, 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';
@@ -29,7 +29,7 @@ class InMemoryEntityRefCacheStore {
     }
 }
 
-/** Roles that see XXXXXXXXX for masked fields (ADR-003) */
+/** Roles that see XXXXXXXXX for masked fields. Presentational only — enforce authz server-side. */
 const MASKED_ROLES = new InjectionToken('MASKED_ROLES');
 /**
  * Consumer **overrides**: fieldType string → Angular component class.
@@ -70,8 +70,41 @@ 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');
+/**
+ * Overrides for the messages shown under an invalid field, keyed by Angular error key
+ * (`required`, `minlength`, `pattern`, …) plus a few field-specific keys.
+ *
+ * The built-in messages are English literals. Registering here is what makes a non-English
+ * form possible without re-implementing every field component; unlisted keys keep their
+ * default, so overriding one does not mean supplying them all.
+ */
+const VALIDATION_MESSAGES = new InjectionToken('VALIDATION_MESSAGES');
 /** Registry: validator key → ValidatorFn */
 const VALIDATOR_REGISTRY = new InjectionToken('VALIDATOR_REGISTRY');
+/**
+ * Registry: validator key → AsyncValidatorFn.
+ *
+ * Kept separate from VALIDATOR_REGISTRY because Angular applies the two differently: an async
+ * validator runs only once the synchronous ones pass, and puts the control into `pending`
+ * while it does. Name them from a schema with `validators: { customAsync: ['uniqueEmail'] }`.
+ */
+const ASYNC_VALIDATOR_REGISTRY = new InjectionToken('ASYNC_VALIDATOR_REGISTRY');
 /** Registry: hook key → async (data, context) => data */
 const HOOK_REGISTRY = new InjectionToken('HOOK_REGISTRY');
 /**
@@ -109,10 +142,6 @@ const UPLOAD_HANDLER = new InjectionToken('UPLOAD_HANDLER');
  * { provide: ENTITY_REF_CACHE_STORE, useClass: SessionStorageRefCache }
  */
 const ENTITY_REF_CACHE_STORE = new InjectionToken('ENTITY_REF_CACHE_STORE', { providedIn: 'root', factory: () => new InMemoryEntityRefCacheStore() });
-/**
- * Consumer-provided predicate function to check whether user roles can edit system default tabs or fields.
- * Defaults to allowing edits if not provided.
- */
 /**
  * Consumer-provided predicate function to check whether user roles can edit system default tabs or fields.
  * Defaults to allowing edits if not provided.
@@ -140,15 +169,90 @@ const provideNgxDynamicEntity = (config = {}) => makeEnvironmentProviders([
     { provide: ENTITY_REF_REGISTRY, useValue: new Map(Object.entries(config.entityRefs ?? {})) },
     { provide: LOOKUP_REGISTRY, useValue: new Map(Object.entries(config.lookups ?? {})) },
     { provide: VALIDATOR_REGISTRY, useValue: new Map(Object.entries(config.validators ?? {})) },
+    {
+        provide: ASYNC_VALIDATOR_REGISTRY,
+        useValue: new Map(Object.entries(config.asyncValidators ?? {})),
+    },
     { provide: HOOK_REGISTRY, useValue: new Map(Object.entries(config.hooks ?? {})) },
+    { provide: RECORD_MIGRATIONS, useValue: config.migrations ?? [] },
+    { provide: VALIDATION_MESSAGES, useValue: config.validationMessages ?? {} },
 ]);
 
+/** The built-in English messages. Every key here can be overridden individually. */
+const DEFAULT_VALIDATION_MESSAGES = {
+    required: 'This field is required.',
+    requiredSelection: 'Please select an option.',
+    email: 'Please enter a valid email address.',
+    pattern: 'Invalid format.',
+    minlength: (_lang, err) => `Minimum ${err?.requiredLength} characters required.`,
+    maxlength: (_lang, err) => `Maximum ${err?.requiredLength} characters allowed.`,
+    min: (_lang, err) => `Value must be at least ${err?.min}.`,
+    max: (_lang, err) => `Value must not exceed ${err?.max}.`,
+    invalid: 'Invalid value.',
+    invalidNumber: 'Invalid number.',
+    invalidSelection: 'Invalid selection.',
+};
+class ValidationMessagesService {
+    overrides = inject(VALIDATION_MESSAGES, { optional: true }) ?? {};
+    /**
+     * The message for the first error present, in the order the caller lists.
+     *
+     * Order is the caller's because it is field-specific: a dropdown wants
+     * `requiredSelection` where a text input wants `required`, and the first match wins so the
+     * most specific message is the one shown.
+     */
+    resolve(errors, language, order, fallbackKey = 'invalid') {
+        if (!errors)
+            return '';
+        for (const entry of order) {
+            // A tuple maps an Angular error key to a different message key: a dropdown raises the
+            // standard `required` error but reads better as "Please select an option", and both
+            // messages stay independently overridable.
+            const [errorKey, messageKey] = typeof entry === 'string' ? [entry, entry] : entry;
+            // `errors[errorKey]` is usually an object of detail, but `required` is simply `true`.
+            if (errors[errorKey] === undefined)
+                continue;
+            return this.messageFor(messageKey, language, errors[errorKey]);
+        }
+        return this.messageFor(fallbackKey, language, null);
+    }
+    /** One message by key, honouring an override before the default. */
+    messageFor(key, language, error) {
+        const message = this.overrides[key] ?? DEFAULT_VALIDATION_MESSAGES[key];
+        if (message === undefined)
+            return '';
+        return typeof message === 'function' ? message(language, error) : message;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidationMessagesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidationMessagesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class TextFieldComponent {
+    messages = inject(ValidationMessagesService);
+    displaySub;
     field;
-    control;
+    set control(value) {
+        this._control = value;
+        this.displaySub?.unsubscribe();
+        this.displayValue.set(value?.value ?? null);
+        this.displaySub = value?.valueChanges.subscribe(v => this.displayValue.set(v));
+    }
+    get control() {
+        return this._control;
+    }
+    _control;
     language = 'en';
     readonly = false;
     masked = false;
+    /** Readonly markup reads this signal so an external patch (autoPatch) is visible under OnPush. */
+    displayValue = signal(null);
+    ngOnDestroy() {
+        this.displaySub?.unsubscribe();
+    }
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
@@ -158,86 +262,76 @@ class TextFieldComponent {
     get errorMessage() {
         if (!this.control || !this.control.errors || !this.control.touched)
             return '';
-        const errs = this.control.errors;
-        if (errs['required'])
-            return 'This field is required.';
-        if (errs['email'])
-            return 'Please enter a valid email address.';
-        if (errs['minlength'])
-            return `Minimum ${errs['minlength'].requiredLength} characters required.`;
-        if (errs['maxlength'])
-            return `Maximum ${errs['maxlength'].requiredLength} characters allowed.`;
-        if (errs['pattern'])
-            return 'Invalid format.';
-        return 'Invalid value.';
+        return this.messages.resolve(this.control.errors, this.language, ['required', 'email', 'minlength', 'maxlength', 'pattern']);
     }
     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>
-  `, 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"] }] });
+    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'">{{ displayValue() ?? '—' }}</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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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'">{{ displayValue() ?? '—' }}</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,58 +359,59 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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: [{
@@ -332,6 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class NumberFieldComponent {
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -346,88 +442,82 @@ class NumberFieldComponent {
     get errorMessage() {
         if (!this.control || !this.control.errors || !this.control.touched)
             return '';
-        const errs = this.control.errors;
-        if (errs['required'])
-            return 'This field is required.';
-        if (errs['min'])
-            return `Value must be at least ${errs['min'].min}.`;
-        if (errs['max'])
-            return `Value must not exceed ${errs['max'].max}.`;
-        return 'Invalid number.';
+        return this.messages.resolve(this.control.errors, this.language, ['required', 'min', 'max'], 'invalidNumber');
     }
     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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,64 +556,65 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,74 +643,75 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EmailFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,78 +744,79 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PasswordFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,58 +841,59 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,72 +923,73 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BooleanFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,56 +1025,57 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,90 +1138,91 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MonthYearFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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: [{
@@ -1355,7 +1452,7 @@ const hostLastConfig = new WeakMap();
  * Point a choice component's `options` signal at the right source (parity plan §6.3).
  *
  * Called from the `field` / `language` input setters of `dropdown`, `radio` and `multiSelect` —
- * the wiring is theirs, the decision is the service's, which is what keeps the ADR-008
+ * the wiring is theirs, the decision is the service's, which is what keeps the field
  * five-input contract intact: options are never pushed in as a sixth input.
  *
  * Setters rather than `ngOnChanges` on purpose. `ngOnChanges` only fires for inputs Angular
@@ -1384,6 +1481,7 @@ function refreshChoiceOptions(host, lookups) {
 
 class DropdownFieldComponent {
     lookups = inject(LookupRegistryService);
+    messages = inject(ValidationMessagesService);
     _field;
     _language = 'en';
     /** Setter-based so options resolve however the input is set — see `refreshChoiceOptions`. */
@@ -1442,100 +1540,100 @@ class DropdownFieldComponent {
     get errorMessage() {
         if (!this.control || !this.control.errors || !this.control.touched)
             return '';
-        const errs = this.control.errors;
-        if (errs['required'])
-            return 'Please select an option.';
-        return 'Invalid selection.';
+        // `requiredSelection` rather than `required`: "Please select an option" reads better on a
+        // dropdown than "This field is required", and both stay independently overridable.
+        return this.messages.resolve(this.control.errors, this.language, [['required', 'requiredSelection']], 'invalidSelection');
     }
     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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DropdownFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,76 +1710,77 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,76 +1850,77 @@ 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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiSelectFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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: [{
@@ -1837,7 +1937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 /**
  * EntityRefRegistryService — resolves entity-ref option loader functions.
- * ADR-006: Entity-ref options come ONLY from this registry.
+ * Entity-ref options come ONLY from this registry.
  * Never pass loaders via @Input() on field components.
  *
  * Consumers register loaders via provideNgxDynamicEntity({ entityRefs: { clients: () => [...] } }).
@@ -2029,7 +2129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 /**
  * CascadeDataService — loads entity-reference options and applies parent→child cascades.
  *
- * Loaders come from the registry only (ADR-006). This service owns the three things a
+ * Loaders come from the registry only. This service owns the three things a
  * field component should not: resolving the loader, coercing whatever it returned
  * (array | Promise | Observable) into a Promise, and filtering by the parent's value.
  */
@@ -2209,6 +2309,9 @@ class EntityRefFieldComponent {
             return;
         void this.reload();
         this.watchParent();
+        this.control?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(value => this.publishSelection(String(value ?? '')));
     }
     /** Reload options against the parent's current value. */
     async reload() {
@@ -2226,8 +2329,20 @@ class EntityRefFieldComponent {
             this.loading.set(false);
         }
     }
-    onSelectionChange() {
-        const selected = this.options().find(o => String(o.value) === String(this.control.value));
+    /**
+     * Publish the selected option so autoPatch can copy from its record.
+     *
+     * Driven from `valueChanges` rather than the select's `change` event: that event is the
+     * same one the `formControl` directive listens to, so reading the control inside a
+     * template `(change)` handler can see the previous value. `valueChanges` fires after the
+     * model has updated — including Playwright `selectOption`, which updates the control
+     * through the value accessor.
+     */
+    onSelectionChange(value) {
+        this.publishSelection(value ?? String(this.control?.value ?? ''));
+    }
+    publishSelection(current) {
+        const selected = this.options().find(o => String(o.value) === current);
         this.selectionBus.emit(this.field.id, selected ?? null);
     }
     getLabel(value) {
@@ -2259,80 +2374,79 @@ 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>
-  `, 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"] }] });
+    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"
+          >
+            <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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EntityRefFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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"
+          >
+            <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: [{
@@ -2443,7 +2557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 /**
  * DynamicFieldComponent — mounts the correct field component for a given NestedFieldConfig.
- * Uses ViewContainerRef.createComponent() and passes inputs via setInput() (ADR-008).
+ * Uses ViewContainerRef.createComponent() and passes inputs via setInput(); see
+ * DynamicFieldComponentContract for the five inputs every field component receives.
  * Never add field-type-specific logic here — this component must remain generic.
  *
  * The 5 inputs (field, control, language, readonly, masked) are passed to every mounted
@@ -2460,6 +2575,12 @@ class DynamicFieldComponent {
     fieldHost;
     fieldRegistry = inject(FieldRegistryService);
     rbacService = inject(RbacService);
+    /**
+     * Passed into `createComponent` so a hosted field sees this host's injector — including
+     * `DynamicFormComponent`'s scoped `EntityRefSelectionService`. Without it, a standalone
+     * field resolves the root bus and `autoPatch` never runs.
+     */
+    injector = inject(Injector);
     componentRef = null;
     ngOnChanges(_changes) {
         this.mountField();
@@ -2481,9 +2602,12 @@ class DynamicFieldComponent {
             return;
         }
         this.fieldHost.clear();
-        this.componentRef = this.fieldHost.createComponent(ComponentClass);
+        this.componentRef = this.fieldHost.createComponent(ComponentClass, {
+            injector: this.injector,
+        });
         this.setInputs(this.componentRef, masked);
-        this.componentRef.changeDetectorRef.markForCheck();
+        this.watchControl();
+        this.componentRef.changeDetectorRef.detectChanges();
     }
     /**
      * Field types are opt-in (see `provideFieldTypes` / `provideBuiltInFieldTypes`), so an
@@ -2499,7 +2623,44 @@ class DynamicFieldComponent {
     }
     static warnedTypes = new Set();
     /**
-     * Pass all 5 contract inputs via ComponentRef.setInput() — uniform for all types (ADR-008).
+     * Re-check the hosted field component.
+     *
+     * The field components are OnPush, so they re-render on an input change, an event from
+     * their own template, or a signal they read. `form.markAllAsTouched()` is none of those —
+     * it flips `touched` from outside, and every field's error message depends on it. Without
+     * this, a blocked submit would mark the form touched and no error would appear.
+     */
+    refresh() {
+        this.componentRef?.changeDetectorRef.detectChanges();
+    }
+    /**
+     * Re-check the hosted component whenever its control changes from outside.
+     *
+     * The field components are OnPush, so they re-render on an input change or an event from
+     * their own template. A control mutated externally is neither — and that is not an edge
+     * case: patchForm, reset, autoPatch and patchOnTrue all do exactly that. Without this, a
+     * field patched from a record would keep rendering its previous value.
+     *
+     * `detectChanges()` rather than `markForCheck()`: a selection that arrives from a native
+     * `change` event (or Playwright) may not be followed by another Angular tick, so a dirty
+     * flag would never be flushed. Running CD on the hosted component now is the copy showing up.
+     *
+     * Done here rather than in each of the eighteen field components: the host owns the
+     * component reference, so one subscription covers every type including custom ones.
+     */
+    watchControl() {
+        this.controlSub?.unsubscribe();
+        if (!this.control)
+            return;
+        this.controlSub = this.control.valueChanges.subscribe(() => this.refresh());
+    }
+    controlSub;
+    ngOnDestroy() {
+        this.controlSub?.unsubscribe();
+    }
+    /**
+     * Pass all 5 contract inputs via ComponentRef.setInput() — uniform for all types.
+     * The public shape is DynamicFieldComponentContract.
      * Must use setInput(), not property assignment: the field components declare inputs with
      * definite assignment and no initializer, and the lib compiles with
      * useDefineForClassFields:false, so `'field' in instance` is false until first set.
@@ -2540,7 +2701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['fieldHost', { read: ViewContainerRef, static: true }]
             }] } });
 
-/** ADR-008: GroupFieldComponent — renders nested fieldset container for group.children */
+/** Renders a nested fieldset container for a group field's children. */
 class GroupFieldComponent {
     field;
     control;
@@ -2557,56 +2718,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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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
@@ -2629,6 +2790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 class ValidatorRegistryService {
     consumerRegistry = inject(VALIDATOR_REGISTRY, { optional: true }) ?? new Map();
+    asyncRegistry = inject(ASYNC_VALIDATOR_REGISTRY, { optional: true }) ?? new Map();
     /**
      * Resolve a validator key string to a ValidatorFn.
      * Supports parameterized built-ins like 'min:0', 'maxLength:255'.
@@ -2676,8 +2838,40 @@ 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;
     }
+    /**
+     * Resolve the async validators a field names, in `validators.customAsync`.
+     *
+     * Async validators are deliberately a separate registry and a separate config key: Angular
+     * attaches them through `setAsyncValidators`, runs them only once the synchronous ones
+     * pass, and holds the control in `pending` until they settle. Mixing them into the
+     * synchronous list would silently never run them.
+     *
+     * An unknown name is skipped rather than throwing, matching the synchronous behaviour.
+     */
+    resolveAsyncFromConfig(config) {
+        if (!config || Array.isArray(config))
+            return [];
+        const out = [];
+        for (const key of config.customAsync ?? []) {
+            const fn = this.asyncRegistry.get(key);
+            if (fn)
+                out.push(fn);
+        }
+        return out;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidatorRegistryService, providedIn: 'root' });
 }
@@ -2686,8 +2880,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-/** ADR-008: ArrayFieldComponent — renders repeating rows for FormArray with + Add Item and Remove */
+/** Renders repeating rows for a FormArray, with Add Item and Remove. */
 class ArrayFieldComponent {
+    /**
+     * addItem/removeItem are public and may be called from outside this component's template,
+     * which under OnPush would not re-render. The host also watches the control, but this
+     * keeps the component correct on its own.
+     */
+    cdr = inject(ChangeDetectorRef);
     field;
     control;
     config;
@@ -2714,115 +2914,117 @@ class ArrayFieldComponent {
         }
         const group = this.fb.group(controls);
         this.formArray.push(group);
+        this.cdr.markForCheck();
     }
     removeItem(index) {
         this.formArray.removeAt(index);
+        this.cdr.markForCheck();
     }
     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>
-  `, 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"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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,102 +3182,103 @@ 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>
-  `, isInline: true });
+    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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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,98 +3339,99 @@ 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>
-  `, isInline: true });
+    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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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: [{
@@ -3412,7 +3616,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  */
 class DynamicFormComponent {
     // ─── Inputs ───────────────────────────────────────────────────────────────
-    config;
+    /**
+     * The schema to render.
+     *
+     * An accessor pair rather than a plain field: `ngOnChanges` normalises the option shape,
+     * and that result is kept here instead of being written back over the input. Reassigning
+     * an `@Input` works, but it mutates what the parent handed us — and a parent using OnPush
+     * or signals would never observe the replacement anyway.
+     *
+     * Reads of `this.config` get the normalised copy once it exists, so every internal caller
+     * is unaffected.
+     */
+    set config(value) {
+        this.rawConfig = value;
+        this.normalizedConfig = undefined; // re-normalised in ngOnChanges
+    }
+    get config() {
+        return this.normalizedConfig ?? this.rawConfig;
+    }
+    rawConfig;
+    normalizedConfig;
     rules;
     initialData;
     /** Session-original values for `VALUE_CHANGED` rules. Captured from the first build when omitted. */
@@ -3446,6 +3669,11 @@ class DynamicFormComponent {
     formReset = new EventEmitter();
     /** The visible tab changed. Lets a host track it without reaching into this component. */
     activeTabChange = new EventEmitter();
+    /**
+     * Emitted when a `beforeSave` hook aborted the save — by returning false or throwing.
+     * `formSubmit` does not fire in that case.
+     */
+    saveRejected = new EventEmitter();
     // ─── Services ─────────────────────────────────────────────────────────────
     fb = inject(FormBuilder);
     validatorRegistry = inject(ValidatorRegistryService);
@@ -3454,6 +3682,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('');
@@ -3464,6 +3693,10 @@ class DynamicFormComponent {
     sessionBaseline = signal({});
     /** Critical fields the user has explicitly unlocked for editing. */
     unlockedFields = signal(new Set());
+    /** The active tab's field panel, focused after a tab switch. */
+    formPanel;
+    /** The hosted field components, so an external control-state change can reach them. */
+    fieldHosts;
     // ─── Form ─────────────────────────────────────────────────────────────────
     form;
     valueSub;
@@ -3536,11 +3769,72 @@ 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;
+    }
+    /**
+     * True while an async validator is still running.
+     *
+     * Angular reports a control with an outstanding async check as `pending`, and `invalid` is
+     * false until it settles — so without this a form could be submitted in the gap before a
+     * uniqueness check came back.
+     */
+    get isValidating() {
+        return this.form.pending;
+    }
+    /** Single source of truth for both the submit guard and the button's disabled state. */
+    get submitBlocked() {
+        return this.form.invalid || this.form.pending || this.hasRuleErrors;
     }
     ngOnInit() {
         this.selectionSub = this.entityRefSelection.selection$.subscribe(({ fieldId, option }) => {
@@ -3548,12 +3842,18 @@ class DynamicFormComponent {
         });
     }
     ngOnChanges(changes) {
-        if (changes['config'] && this.config) {
+        if (changes['config'] || changes['userRoles']) {
+            this.permissionsCache = null;
+        }
+        if (changes['config'] && this.rawConfig) {
             // 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
             // can rely on an option being a LocalizedText. Returns the same object when it already
             // is, so a well-formed config costs nothing.
-            this.config = normalizeConfigOptions(this.config);
+            // Kept in a field of our own rather than written back to the @Input. Reassigning an
+            // input works, but it surprises a parent that holds the same object — and a parent
+            // using OnPush or signals would not see the replacement anyway.
+            this.normalizedConfig = normalizeConfigOptions(this.config);
         }
         if (changes['config'] || changes['initialData']) {
             this.buildForm();
@@ -3567,9 +3867,12 @@ class DynamicFormComponent {
         this.selectionSub?.unsubscribe();
     }
     setActiveTab(tabId) {
-        if (this.activeTab() !== tabId)
+        const changed = this.activeTab() !== tabId;
+        if (changed)
             this.activeTabChange.emit(tabId);
         this.activeTab.set(tabId);
+        if (changed)
+            this.focusActivePanel();
         const parent = findTab(this.tabs, tabId);
         if (parent?.children?.length) {
             this.activeSubTab.set(parent.children[0].id);
@@ -3579,7 +3882,10 @@ class DynamicFormComponent {
         }
     }
     setActiveSubTab(subTabId) {
+        const changed = this.activeSubTab() !== subTabId;
         this.activeSubTab.set(subTabId);
+        if (changed)
+            this.focusActivePanel();
     }
     getFieldSpan(field) {
         const span = field.colSpan ?? 12;
@@ -3641,13 +3947,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 +3975,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());
         });
@@ -3685,7 +3993,8 @@ class DynamicFormComponent {
         }
         else {
             const validators = this.validatorRegistry.resolveFromConfig(field.validators);
-            group[field.id] = this.fb.control({ value: field.defaultValue ?? null, disabled: field.disabled ?? false }, validators);
+            const asyncValidators = this.validatorRegistry.resolveAsyncFromConfig(field.validators);
+            group[field.id] = this.fb.control({ value: field.defaultValue ?? null, disabled: field.disabled ?? false }, validators, asyncValidators);
         }
     }
     /** One row of an `array` field: a FormGroup when the field declares columns, else a bare control. */
@@ -3716,10 +4025,41 @@ class DynamicFormComponent {
             group.patchValue(item);
         return group;
     }
+    /**
+     * Mark every control touched, then re-check the field components.
+     *
+     * They are OnPush and `touched` is flipped from outside their own template, so the second
+     * half is what makes the error messages actually appear.
+     */
+    markAllTouched() {
+        this.form.markAllAsTouched();
+        this.fieldHosts?.forEach(host => host.refresh());
+    }
+    /**
+     * 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 +4084,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)
@@ -3820,6 +4204,10 @@ class DynamicFormComponent {
             const control = this.resolveTargetControl(autoPatch, targetId);
             control?.patchValue(value);
         }
+        // Readonly targets interpolate `control.value` under OnPush. `detectChanges` on the
+        // hosted component flushes that write immediately — `markForCheck` waits for a later
+        // tick that a Playwright selection never schedules.
+        this.fieldHosts?.forEach(host => host.refresh());
     }
     /**
      * `patchOnTrue` — when a boolean/checkbox field transitions to `true`,
@@ -3849,6 +4237,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 = [];
@@ -3914,24 +4353,70 @@ class DynamicFormComponent {
         };
         return findInGroup(this.form);
     }
+    /**
+     * Move focus into the newly shown panel.
+     *
+     * Activating a tab replaces everything below it while focus stays on the tab button, so a
+     * screen-reader or keyboard user is given no indication that the content changed and must
+     * tab back through the strip to reach it. Deferred a frame because the panel's contents
+     * are rendered by the change detection this call is part of.
+     */
+    focusActivePanel() {
+        if (typeof requestAnimationFrame !== 'function')
+            return;
+        requestAnimationFrame(() => this.formPanel?.nativeElement?.focus?.());
+    }
+    /** Accessible name for the field panel — it is the tabpanel for the active tab. */
+    get activeTabLabel() {
+        const tab = this.activeSubTabConfig ?? this.activeTabConfig;
+        return tab ? this.resolveTabLabel(tab) : '';
+    }
+    /**
+     * Why a referenced field is flagged.
+     *
+     * `hasDrift` was written by the builder and read by nothing at runtime, so a field whose
+     * source definition had changed since it was linked looked entirely normal to the person
+     * filling the form in.
+     */
+    driftHint(field) {
+        const source = field.referencedEntityKey
+            ? `"${field.referencedEntityKey}"`
+            : 'its source entity';
+        return `This field is linked to ${source} and its definition there has changed since it was linked.`;
+    }
     resolveTabLabel(tab) {
         return resolveLabel(tab.label, this.language);
     }
     async submit() {
-        if (!this.canSubmit || this.form.invalid) {
-            this.form.markAllAsTouched();
+        if (!this.canSubmit || this.submitBlocked) {
+            this.markAllTouched();
             return;
         }
         const rawData = this.extractRecord();
         let processedData = rawData;
-        const hookKey = `${this.config?.entity}:beforeSave`;
-        if (this.hookRegistry.has(hookKey)) {
-            processedData = await this.hookRegistry.run(hookKey, processedData);
-        }
         this.isSaving.set(true);
         try {
+            // beforeSave can now abort the save: returning false, or throwing, stops it. Previously
+            // its return value simply replaced the payload and the submit proceeded regardless, so
+            // a hook that wanted to veto — a server-side check, a confirmation — had no way to.
+            const hookKey = `${this.config?.entity}:beforeSave`;
+            if (this.hookRegistry.has(hookKey)) {
+                const result = await this.hookRegistry.run(hookKey, processedData);
+                if (result === false) {
+                    this.saveRejected.emit({ reason: 'beforeSave returned false' });
+                    return;
+                }
+                // Anything else is the payload to submit; `undefined` means "unchanged".
+                if (result !== undefined && result !== true)
+                    processedData = result;
+            }
             this.formSubmit.emit(processedData);
         }
+        catch (err) {
+            // A hook that throws aborts the save and reports why, rather than the error escaping
+            // into an unhandled rejection with the form left looking as though it saved.
+            this.saveRejected.emit({ reason: err instanceof Error ? err.message : String(err), error: err });
+        }
         finally {
             this.isSaving.set(false);
         }
@@ -3947,11 +4432,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", saveRejected: "saveRejected" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService], viewQueries: [{ propertyName: "formPanel", first: true, predicate: ["formPanel"], descendants: true }, { propertyName: "fieldHosts", predicate: DynamicFieldComponent, descendants: true }], 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    <!--\n      One tabpanel per tab, wrapping both branches. Focus moves here on a tab switch, and a\n      module tab is still a tab \u2014 putting the panel semantics on only the fields branch left\n      a module tab with nowhere for focus to land.\n    -->\n    <div\n      role=\"tabpanel\"\n      tabindex=\"-1\"\n      #formPanel\n      class=\"ngx-form__tabpanel\"\n      [attr.aria-label]=\"activeTabLabel\"\n    >\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.hasDrift) {\n              <!--\n                Drift was previously visible only in the builder, so a referenced field whose\n                source had changed looked completely normal to the person filling the form in.\n                role=\"status\" rather than \"alert\": it is information, not an error.\n              -->\n              <span\n                class=\"ngx-field__drift\"\n                role=\"status\"\n                [attr.data-testid]=\"'field-' + field.id + '-drift'\"\n                [title]=\"driftHint(field)\"\n              >\u26A0 {{ driftHint(field) }}</span>\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    </div>\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    <!--\n      One tabpanel per tab, wrapping both branches. Focus moves here on a tab switch, and a\n      module tab is still a tab \u2014 putting the panel semantics on only the fields branch left\n      a module tab with nowhere for focus to land.\n    -->\n    <div\n      role=\"tabpanel\"\n      tabindex=\"-1\"\n      #formPanel\n      class=\"ngx-form__tabpanel\"\n      [attr.aria-label]=\"activeTabLabel\"\n    >\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.hasDrift) {\n              <!--\n                Drift was previously visible only in the builder, so a referenced field whose\n                source had changed looked completely normal to the person filling the form in.\n                role=\"status\" rather than \"alert\": it is information, not an error.\n              -->\n              <span\n                class=\"ngx-field__drift\"\n                role=\"status\"\n                [attr.data-testid]=\"'field-' + field.id + '-drift'\"\n                [title]=\"driftHint(field)\"\n              >\u26A0 {{ driftHint(field) }}</span>\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    </div>\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: [{
@@ -3986,11 +4471,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], activeTabChange: [{
                 type: Output
+            }], saveRejected: [{
+                type: Output
+            }], formPanel: [{
+                type: ViewChild,
+                args: ['formPanel']
+            }], fieldHosts: [{
+                type: ViewChildren,
+                args: [DynamicFieldComponent]
             }], handleKeyboardEvent: [{
                 type: HostListener,
                 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 +4838,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 +4909,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 +4929,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", "saveRejected"] }, { 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 +4975,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 { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_VALIDATION_MESSAGES, 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, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map