ngx-dynamic-entity 1.1.0 → 1.3.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, ElementRef, afterNextRender } 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, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, getTabPath, applyAutoPatch, applyPatchOnTrue, formatDisplayValue } from '@dynamic-entity/core';
+import { resolveLabel, formatDisplayValue, 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 } 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.
@@ -86,8 +86,25 @@ const LOOKUP_REGISTRY = new InjectionToken('LOOKUP_REGISTRY');
  * })
  */
 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');
 /**
@@ -125,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.
@@ -156,16 +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);
     }
@@ -175,18 +262,7 @@ 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: `
@@ -201,7 +277,7 @@ class TextFieldComponent {
       @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>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ displayValue() ?? '—' }}</span>
       } @else {
         <input
           [id]="field.id"
@@ -218,11 +294,12 @@ class TextFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -238,7 +315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       @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>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ displayValue() ?? '—' }}</span>
       } @else {
         <input
           [id]="field.id"
@@ -304,11 +381,12 @@ class TextareaFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -349,6 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class NumberFieldComponent {
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -363,14 +442,7 @@ 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: `
@@ -405,11 +477,12 @@ class NumberFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -508,11 +581,12 @@ class CurrencyFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -599,11 +673,12 @@ class EmailFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -701,11 +776,12 @@ class PasswordFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -787,11 +863,12 @@ class CheckboxFieldComponent {
         </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"] }] });
+  `, 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],
@@ -875,11 +952,12 @@ class BooleanFieldComponent {
         </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"] }] });
+  `, 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],
@@ -968,11 +1046,12 @@ class DateFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -1011,6 +1090,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Reads a stored value into a `Date`.
+ *
+ * A bare calendar date is pinned to *local* midnight. `new Date('2020-01-01')` reads a
+ * date-only string as UTC midnight, which renders as the previous day anywhere west of
+ * Greenwich — and every legacy `datetime` value has exactly that shape, because the type
+ * used to render through `DateFieldComponent` and its `type="date"` input.
+ */
+function parseStored(value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    if (value instanceof Date)
+        return Number.isNaN(value.getTime()) ? null : value;
+    const raw = String(value);
+    const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
+    if (dateOnly)
+        return new Date(+dateOnly[1], +dateOnly[2] - 1, +dateOnly[3]);
+    const parsed = new Date(raw);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+const pad = (n) => String(n).padStart(2, '0');
+/**
+ * Date & Time field: a single `datetime-local` input.
+ *
+ * The type is stored as ISO 8601 UTC, per the same convention `date` follows, while the
+ * input works in the viewer's local zone — `datetime-local` has no offset, so the two
+ * conversions here are what keep a value stable across a round trip.
+ */
+class DateTimeFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /** Stored ISO 8601 → the `YYYY-MM-DDTHH:mm` local form the input requires. */
+    get inputValue() {
+        const d = parseStored(this.control?.value);
+        if (!d)
+            return '';
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    }
+    /** The input's local `YYYY-MM-DDTHH:mm` → stored ISO 8601 UTC. */
+    onInput(value) {
+        if (!value) {
+            this.control.setValue(null);
+            this.control.markAsTouched();
+            return;
+        }
+        const d = new Date(value);
+        // An unparseable value is stored verbatim rather than silently discarded, so a validator
+        // sees what the user actually entered.
+        this.control.setValue(Number.isNaN(d.getTime()) ? value : d.toISOString());
+        this.control.markAsTouched();
+    }
+    /**
+     * Displays date *and* time. `DateFieldComponent` used `toLocaleDateString()` here, so a
+     * datetime read back through the field showed no time while the same value in the record
+     * summary — which goes through core's `formatDisplayValue` — showed it.
+     */
+    formatDateTime(value) {
+        const d = parseStored(value);
+        return d ? d.toLocaleString() : '—';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DateTimeFieldComponent, isStandalone: true, selector: "ngx-date-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--datetime"
+      [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'">{{ formatDateTime(control.value) }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="datetime-local"
+          [value]="inputValue"
+          (change)="onInput($any($event.target).value)"
+          [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 }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateTimeFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-date-time-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--datetime"
+      [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'">{{ formatDateTime(control.value) }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="datetime-local"
+          [value]="inputValue"
+          (change)="onInput($any($event.target).value)"
+          [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: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * Time field: a bare time of day, with no date and no zone attached.
+ *
+ * Stored as `HH:mm` — exactly the value `<input type="time">` reads and writes, so the
+ * control binds straight through with no conversion. That is the whole reason this is a
+ * separate type from `datetime`: a recurring 09:00 opening time is not a moment in time,
+ * and converting it to UTC would move it whenever the offset changed.
+ */
+class TimeFieldComponent {
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /**
+     * Defers to core rather than parsing `HH:mm` locally. The other date-ish components each
+     * grew their own formatter, and `datetime` ended up showing one thing in the field and
+     * another in the record summary because the two drifted apart.
+     */
+    formatTime(value) {
+        return formatDisplayValue('time', undefined, value, this.language);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TimeFieldComponent, isStandalone: true, selector: "ngx-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div class="ngx-field ngx-field--time"
+      [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'">{{ formatTime(control.value) }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="time"
+          [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: TimeFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-time-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div class="ngx-field ngx-field--time"
+      [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'">{{ formatTime(control.value) }}</span>
+      } @else {
+        <input
+          [id]="field.id"
+          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          type="time"
+          [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: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
 const MONTH_NAMES = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December',
@@ -1097,11 +1401,12 @@ class MonthYearFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -1372,7 +1677,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
@@ -1401,6 +1706,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`. */
@@ -1459,10 +1765,9 @@ 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: `
@@ -1505,11 +1810,12 @@ class DropdownFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -1660,11 +1966,12 @@ class RadioFieldComponent {
         }
       </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"] }] });
+  `, 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],
@@ -1799,11 +2106,12 @@ class MultiSelectFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -1854,7 +2162,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: () => [...] } }).
@@ -2046,7 +2354,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.
  */
@@ -2226,6 +2534,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() {
@@ -2243,8 +2554,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) {
@@ -2293,7 +2616,6 @@ class EntityRefFieldComponent {
             [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) {
@@ -2309,11 +2631,12 @@ class EntityRefFieldComponent {
         }
       }
     </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"] }] });
+  `, 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],
@@ -2334,7 +2657,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             [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) {
@@ -2460,7 +2782,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
@@ -2477,6 +2800,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();
@@ -2498,9 +2827,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
@@ -2516,7 +2848,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.
@@ -2529,11 +2898,12 @@ class DynamicFieldComponent {
         ref.setInput('masked', masked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicFieldComponent, isStandalone: true, selector: "ngx-dynamic-field", inputs: { field: "field", control: "control", config: "config", currentTabId: "currentTabId", language: "language", readonly: "readonly", userRoles: "userRoles" }, viewQueries: [{ propertyName: "fieldHost", first: true, predicate: ["fieldHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #fieldHost></ng-container>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DynamicFieldComponent, isStandalone: true, selector: "ngx-dynamic-field", inputs: { field: "field", control: "control", config: "config", currentTabId: "currentTabId", language: "language", readonly: "readonly", userRoles: "userRoles" }, viewQueries: [{ propertyName: "fieldHost", first: true, predicate: ["fieldHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #fieldHost></ng-container>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DynamicFieldComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'ngx-dynamic-field',
                     standalone: true,
                     template: `<ng-container #fieldHost></ng-container>`,
@@ -2557,7 +2927,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;
@@ -2597,11 +2967,11 @@ class GroupFieldComponent {
         </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"] }] });
+  `, 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: `
+            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>
@@ -2646,6 +3016,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'.
@@ -2706,6 +3077,27 @@ class ValidatorRegistryService {
         }
         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' });
 }
@@ -2714,8 +3106,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;
@@ -2742,9 +3140,11 @@ 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: `
@@ -2797,11 +3197,11 @@ class ArrayFieldComponent {
         </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"] }] });
+  `, 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: `
+            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">
@@ -3052,11 +3452,12 @@ class ImageFieldComponent {
         }
       }
     </div>
-  `, isInline: true });
+  `, 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: [],
@@ -3206,11 +3607,12 @@ class FileFieldComponent {
         }
       }
     </div>
-  `, isInline: true });
+  `, 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: [],
@@ -3299,7 +3701,8 @@ function builtInFieldTypes() {
         checkbox: CheckboxFieldComponent,
         boolean: BooleanFieldComponent,
         date: DateFieldComponent,
-        datetime: DateFieldComponent,
+        datetime: DateTimeFieldComponent,
+        time: TimeFieldComponent,
         monthYear: MonthYearFieldComponent,
         dropdown: DropdownFieldComponent,
         radio: RadioFieldComponent,
@@ -3440,7 +3843,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. */
@@ -3474,7 +3896,13 @@ 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 ─────────────────────────────────────────────────────────────
+    cdr = inject(ChangeDetectorRef);
     fb = inject(FormBuilder);
     validatorRegistry = inject(ValidatorRegistryService);
     hookRegistry = inject(HookRegistryService);
@@ -3493,9 +3921,14 @@ 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;
+    statusSub;
     selectionSub;
     /** Previous values, for detecting `patchOnTrue` false→true transitions. */
     previousValues = {};
@@ -3618,9 +4051,19 @@ class DynamicFormComponent {
     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.hasRuleErrors;
+        return this.form.invalid || this.form.pending || this.hasRuleErrors;
     }
     ngOnInit() {
         this.selectionSub = this.entityRefSelection.selection$.subscribe(({ fieldId, option }) => {
@@ -3631,12 +4074,15 @@ class DynamicFormComponent {
         if (changes['config'] || changes['userRoles']) {
             this.permissionsCache = null;
         }
-        if (changes['config'] && this.config) {
+        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();
@@ -3647,12 +4093,16 @@ class DynamicFormComponent {
     }
     ngOnDestroy() {
         this.valueSub?.unsubscribe();
+        this.statusSub?.unsubscribe();
         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);
@@ -3662,7 +4112,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;
@@ -3748,6 +4201,12 @@ class DynamicFormComponent {
         const changes$ = this.changeDebounceMs > 0
             ? this.form.valueChanges.pipe(debounceTime(this.changeDebounceMs))
             : this.form.valueChanges;
+        // Validity is not value: an async validator settling flips `pending` and then `invalid`
+        // with no value change and no template event, so under OnPush the Save button would
+        // never re-enable. submitBlocked reads form.pending and form.invalid, so this is what
+        // keeps it honest.
+        this.statusSub?.unsubscribe();
+        this.statusSub = this.form.statusChanges.subscribe(() => this.cdr.markForCheck());
         this.valueSub = changes$.subscribe(() => {
             const flattened = this.flattenFormValues();
             this.formValues.set(flattened);
@@ -3770,7 +4229,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. */
@@ -3801,6 +4261,16 @@ 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.
      *
@@ -3970,6 +4440,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`,
@@ -4115,24 +4589,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.submitBlocked) {
-            this.form.markAllAsTouched();
+            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);
         }
@@ -4148,11 +4668,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: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        \uD83D\uDD12 Critical field changed:\n        @for (field of changedCriticalFields(); track field.id) {\n          <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\n        }\n        \u2014 this differs from the value at the start of this session.\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Module tab component OR Fields for active tab -->\n    @if (activeTabModuleComponent) {\n      <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n        <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\n      </div>\n    } @else {\n      <!-- Fields for active tab (Responsive 12-column grid) -->\n      <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n        @for (field of fieldsForActiveTab; track field.id) {\n          <div\n            class=\"ngx-form__field-slot\"\n            [style.gridColumn]=\"getFieldSpan(field)\"\n            [attr.id]=\"'field-container-' + field.id\"\n          >\n            <ngx-dynamic-field\n              [field]=\"field\"\n              [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n              [config]=\"config\"\n              [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n              [language]=\"language\"\n              [readonly]=\"isFieldReadonly(field)\"\n              [userRoles]=\"userRoles\"\n            />\n            @if (field.criticalField && !readonly) {\n              <button\n                type=\"button\"\n                class=\"ngx-form__lock\"\n                [attr.data-testid]=\"'lock-' + field.id\"\n                [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                [attr.aria-label]=\"\n                  (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\n                \"\n                [title]=\"\n                  isFieldLocked(field)\n                    ? 'Critical field \u2014 click to unlock for editing'\n                    : 'Critical field \u2014 click to lock'\n                \"\n                (click)=\"toggleFieldLock(field)\"\n              >\n                {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button\n          type=\"button\"\n          class=\"ngx-form__reset\"\n          data-testid=\"form-reset\"\n          (click)=\"reset()\"\n          [disabled]=\"isSaving()\"\n        >\n          Reset\n        </button>\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\n          title=\"Shortcut: Ctrl+S\"\n        >\n          @if (isSaving() || loading) {\n            Saving\u2026\n          } @else {\n            Save\n          }\n        </button>\n      </div>\n    }\n\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    You do not have permission to view this record.\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media (max-width: 768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
+    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            tabindex=\"-1\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        \uD83D\uDD12 Critical field changed:\n        @for (field of changedCriticalFields(); track field.id) {\n          <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\n        }\n        \u2014 this differs from the value at the start of this session.\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Module tab component OR Fields for active tab -->\n    @if (activeTabModuleComponent) {\n      <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n        <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\n      </div>\n    } @else {\n      <!-- Fields for active tab (Responsive 12-column grid) -->\n      <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n        @for (field of fieldsForActiveTab; track field.id) {\n          <div\n            class=\"ngx-form__field-slot\"\n            [style.gridColumn]=\"getFieldSpan(field)\"\n            [attr.id]=\"'field-container-' + field.id\"\n          >\n            <ngx-dynamic-field\n              [field]=\"field\"\n              [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n              [config]=\"config\"\n              [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n              [language]=\"language\"\n              [readonly]=\"isFieldReadonly(field)\"\n              [userRoles]=\"userRoles\"\n            />\n            @if (field.criticalField && !readonly) {\n              <button\n                type=\"button\"\n                class=\"ngx-form__lock\"\n                [attr.data-testid]=\"'lock-' + field.id\"\n                [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                [attr.aria-label]=\"\n                  (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\n                \"\n                [title]=\"\n                  isFieldLocked(field)\n                    ? 'Critical field \u2014 click to unlock for editing'\n                    : 'Critical field \u2014 click to lock'\n                \"\n                (click)=\"toggleFieldLock(field)\"\n              >\n                {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button\n          type=\"button\"\n          class=\"ngx-form__reset\"\n          data-testid=\"form-reset\"\n          (click)=\"reset()\"\n          [disabled]=\"isSaving()\"\n        >\n          Reset\n        </button>\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\n          title=\"Shortcut: Ctrl+S\"\n        >\n          @if (isSaving() || loading) {\n            Saving\u2026\n          } @else {\n            Save\n          }\n        </button>\n      </div>\n    }\n\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    You do not have permission to view this record.\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media (max-width: 768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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            tabindex=\"-1\"\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: [{
@@ -4187,6 +4707,14 @@ 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']]
@@ -4230,6 +4758,8 @@ class DynamicRecordFormComponent {
     sectionSave = new EventEmitter();
     dynamicFormComp;
     rulesEvaluation = inject(RulesEvaluationService);
+    host = inject(ElementRef);
+    injector = inject(Injector);
     currentData = signal({});
     originalBaseline = signal({});
     /**
@@ -4619,29 +5149,64 @@ class DynamicRecordFormComponent {
     formatFieldValue(field) {
         return formatDisplayValue(field.type, field.options, this.fieldValue(field.id), this.language);
     }
-    jumpToField(fieldId) {
-        // Find parent tab for field
+    /**
+     * Finds which tab — and, where the field lives one level down, which sub-tab — owns a
+     * field. The walk used to check top-level `fields` only, so every field in a sub-tab was
+     * simply not found and the jump did nothing at all.
+     */
+    locateField(fieldId) {
         for (const tab of this.config?.tabs || []) {
-            const hasField = (tab.fields || []).some(f => f.id === fieldId);
-            if (hasField) {
-                this.dynamicFormComp?.setActiveTab(tab.id);
-                setTimeout(() => {
-                    const el = document.getElementById(`field-container-${fieldId}`);
-                    if (el) {
-                        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        el.focus();
-                    }
-                }, 50);
-                break;
+            if ((tab.fields || []).some(f => f.id === fieldId))
+                return { tabId: tab.id };
+            for (const child of tab.children || []) {
+                if ((child.fields || []).some(f => f.id === fieldId)) {
+                    return { tabId: tab.id, subTabId: child.id };
+                }
             }
         }
+        return null;
+    }
+    /**
+     * Switches to the tab holding `fieldId`, then scrolls it into view and moves focus to it.
+     *
+     * The wait for the new tab to render used to be a 50 ms `setTimeout`, which was wrong three
+     * ways: `document` is undefined on a server render, 50 ms is a guess that a large tab can
+     * outrun, and nothing cancelled the timer if the component went away first.
+     * `afterNextRender` fixes all three — it never runs on the server, it runs when the panel
+     * has actually rendered rather than when a guess expires, and it is tied to the injector so
+     * destroying the component cancels it. The query is scoped to this component's own element,
+     * so the library no longer reaches for the global `document` at all.
+     */
+    jumpToField(fieldId) {
+        const location = this.locateField(fieldId);
+        if (!location)
+            return;
+        this.dynamicFormComp?.setActiveTab(location.tabId);
+        // `setActiveTab` resets to a tab's first child, so the sub-tab has to be selected after
+        // it, not before. Without this the walk found sub-tab fields and then rendered the wrong
+        // panel, so the element the callback below looks for never existed.
+        if (location.subTabId)
+            this.dynamicFormComp?.setActiveSubTab(location.subTabId);
+        afterNextRender(() => {
+            // The field id comes from config, so it never goes into a selector string: no
+            // escaping to get wrong, and no need for `CSS.escape`, which jsdom and older
+            // browsers do not provide and whose absence throws silently inside a render hook.
+            const wanted = `field-container-${fieldId}`;
+            const el = Array.from(this.host.nativeElement.querySelectorAll('[id^="field-container-"]')).find(slot => slot.id === wanted);
+            if (!el)
+                return;
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            // The slot carries tabindex="-1" so this actually moves focus. Without it the jump
+            // scrolled the field into view and left focus behind on the link.
+            el.focus();
+        }, { injector: this.injector });
     }
     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\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">Entity: {{ config.entity }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ headerToggleValue ? 'Yes' : 'No' }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"'Dismiss: ' + banner.message\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\u2715</button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      \uD83D\uDD12 Record modified from session baseline \u2014 unsaved changes pending.\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"'Click to jump to ' + formatFieldLabel(sf)\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">Editing this section</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          Cancel\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          Save section\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          Edit section\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >+ Row</button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\">Edit</button>\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\">Delete</button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">No rows yet.</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ inlineRowIndex() === null ? 'Add' : 'Edit' }} {{ formatFieldLabel(rowField) }} row</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">Cancel</button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">Save row</button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview"], outputs: ["formSubmit", "formChange", "formReset", "activeTabChange"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }] });
+    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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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\">\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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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: [{
@@ -4683,5 +5248,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DateFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, ImageFieldComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LookupRegistryService, MASKED_ROLES, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, UPLOAD_HANDLER, VALIDATOR_REGISTRY, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
+export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, 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, TimeFieldComponent, UPLOAD_HANDLER, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map