ngx-dynamic-entity 2.0.2 → 2.1.1

package/fesm2022/ngx-dynamic-entity.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, ChangeDetectorRef, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, Optional, Inject, EventEmitter, ElementRef, computed, afterNextRender, HostListener, ViewChildren, Output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, Validators, FormBuilder, FormGroup, FormArray, FormsModule } from '@angular/forms';
-import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, getTabPath, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, toRefToken, fieldRefFor, collectFieldScopes, refOf, applyAutoPatch, applyPatchOnTrue, fieldsUnderTab, valuesEqual, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } from '@dynamic-entity/core';
+import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, getTabPath, fieldRefFor, toRefToken, refOf, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, collectFieldScopes, applyAutoPatch, isUnsafePath, fieldsUnderTab, valuesEqual, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } 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';
@@ -196,7 +196,7 @@ const ENTITY_REF_CACHE_STORE = new InjectionToken('ENTITY_REF_CACHE_STORE', {
  */
 const SYSTEM_DEFAULT_CAN_EDIT = new InjectionToken('SYSTEM_DEFAULT_CAN_EDIT');
 /**
- * Registry/Resolver for resolving an EntityFormConfig by entity key across entities (Phase 8).
+ * Registry/Resolver for resolving an EntityFormConfig by entity key across entities.
  * Enables cross-entity field referencing (`isReferenced`, `referencedEntityKey`, `referencedFieldId`, `hasDrift`).
  */
 const CONFIG_SOURCE = new InjectionToken('CONFIG_SOURCE');
@@ -224,8 +224,7 @@ const MARKDOWN_RENDERER = new InjectionToken('MARKDOWN_RENDERER');
  *
  * Masking is presentational — see SECURITY.md — and what it prints is a product decision:
  * `••••••••` reads as a redaction, "Hidden" reads as a permission, and a localized string
- * reads as neither in English. It was a literal repeated across every field component, so
- * there was no way to choose.
+ * reads as neither in English, so it is the host's to choose.
  *
  * @example
  * { provide: MASKED_PLACEHOLDER, useValue: '••••••••' }
@@ -363,12 +362,10 @@ class ValidationMessagesService {
     /**
      * The message for a field, chosen by its **type** rather than by a list the caller supplies.
      *
-     * Every field component used to pass its own copy of the key order, and the copies were
-     * near-identical — which was tolerable while the field itself was the only thing that
-     * rendered a message. It stopped being tolerable when the error summary above the form
-     * started naming what is wrong with each field: the summary has no field component to ask
-     * (the offending field is usually on a tab that is not rendered), so it would have needed a
-     * second copy of the same table, and a dropdown would have said "This field is required" in
+     * Both the field itself and the error summary above the form render this message, and the
+     * summary has no field component to ask (the offending field is usually on a tab that is
+     * not rendered). Per-component key orders would drift, and a dropdown would say "This
+     * field is required" in
      * the summary and "Please select an option" under the control.
      *
      * One table, read from both places, is what keeps those two sentences the same sentence.
@@ -388,10 +385,10 @@ class ValidationMessagesService {
             return '';
         return typeof message === 'function' ? message(language, error) : message;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidationMessagesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidationMessagesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidationMessagesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidationMessagesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -399,14 +396,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /**
  * DOM ids that survive being rendered more than once.
  *
- * A field component used to derive its control's id straight from `field.id`. That is unique
- * in a config and *not* unique in a document: an `array` field renders the same child fields
- * once per row, so a two-row Contacts array put two `#name` inputs on the page. `<label for>`
- * resolves to the first match in document order, so clicking the second row's label focused
- * the first row's input, and a screen reader read the same association twice. Duplicate ids on
- * focusable elements are also a WCAG failure in their own right.
+ * `field.id` is unique in a config and *not* unique in a document: an `array` field renders
+ * the same child fields once per row. `<label for>` resolves to the first match, so a second
+ * row's label would focus the first row's input — and duplicate ids on focusable elements are
+ * a WCAG failure in their own right.
  *
- * The fix is a counter, which is what Angular Material does for the same reason: the id stays
+ * The answer is a counter, which is what Angular Material does for the same reason: the id stays
  * readable — `email-de7` — and is unique for the lifetime of the page. It is deliberately not
  * derived from the row index, because a field component is given exactly five inputs and none
  * of them says where it is; adding a sixth would change the contract every custom field type
@@ -506,8 +501,8 @@ class TextFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--text"
       [attr.data-testid]="'field-' + field.id"
@@ -567,7 +562,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -669,12 +664,6 @@ class TextareaFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -688,8 +677,8 @@ class TextareaFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--textarea"
       [attr.data-testid]="'field-' + field.id"
@@ -738,7 +727,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1007,10 +996,10 @@ class UiTextService {
     text(key, language = 'en', params) {
         return resolveUiText(this.overrides, DEFAULT_UI_TEXT, key, language, params);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UiTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UiTextService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UiTextService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1124,12 +1113,6 @@ class MarkdownFieldComponent {
         this.cached = { source, html };
         return html;
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1143,8 +1126,8 @@ class MarkdownFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MarkdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MarkdownFieldComponent, isStandalone: true, selector: "ngx-markdown-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MarkdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MarkdownFieldComponent, isStandalone: true, selector: "ngx-markdown-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, usesOnChanges: true, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--markdown"
       [attr.data-testid]="'field-' + field.id"
@@ -1244,7 +1227,7 @@ class MarkdownFieldComponent {
     </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: "21.2.22", ngImport: i0, type: MarkdownFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MarkdownFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1399,8 +1382,8 @@ class NumberFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--number"
       [attr.data-testid]="'field-' + field.id"
@@ -1460,7 +1443,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NumberFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1575,12 +1558,6 @@ class CurrencyFieldComponent {
             return '$';
         }
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1594,8 +1571,8 @@ class CurrencyFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CurrencyFieldComponent, isStandalone: true, selector: "ngx-currency-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: CurrencyFieldComponent, isStandalone: true, selector: "ngx-currency-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--currency"
       [attr.data-testid]="'field-' + field.id"
@@ -1650,7 +1627,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1748,12 +1725,6 @@ class EmailFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1767,8 +1738,8 @@ class EmailFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EmailFieldComponent, isStandalone: true, selector: "ngx-email-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EmailFieldComponent, isStandalone: true, selector: "ngx-email-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--email"
       [attr.data-testid]="'field-' + field.id"
@@ -1816,10 +1787,7 @@ class EmailFieldComponent {
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <!-- One branch, resolved by the service. The template used to spell out "Email is
-               required" and "Enter a valid email address" itself, so a host configuring
-               validationMessages was overridden by markup it could not reach. The service
-               defaults say the same thing. -->
+          <!-- One branch, resolved by the service, so a host's validationMessages apply. -->
           <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
             errorMessage
           }}</span>
@@ -1828,7 +1796,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EmailFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EmailFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1883,10 +1851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <!-- One branch, resolved by the service. The template used to spell out "Email is
-               required" and "Enter a valid email address" itself, so a host configuring
-               validationMessages was overridden by markup it could not reach. The service
-               defaults say the same thing. -->
+          <!-- One branch, resolved by the service, so a host's validationMessages apply. -->
           <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
             errorMessage
           }}</span>
@@ -1937,12 +1902,6 @@ class PasswordFieldComponent {
     toggleVisibility() {
         this.visible.update(v => !v);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1956,8 +1915,8 @@ class PasswordFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PasswordFieldComponent, isStandalone: true, selector: "ngx-password-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: PasswordFieldComponent, isStandalone: true, selector: "ngx-password-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--password"
       [attr.data-testid]="'field-' + field.id"
@@ -2017,7 +1976,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PasswordFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PasswordFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2118,12 +2077,6 @@ class CheckboxFieldComponent {
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
-    /**
-     * Configured messages reach this field too.
-     *
-     * It rendered no error element at all, so a required checkbox left unticked told the user
-     * nothing — and `validationMessages` could not reach a field that never displayed one.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2137,8 +2090,8 @@ class CheckboxFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--checkbox"
       [attr.data-testid]="'field-' + field.id"
@@ -2194,7 +2147,7 @@ class CheckboxFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2296,12 +2249,6 @@ class BooleanFieldComponent {
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
-    /**
-     * Configured messages reach this field too.
-     *
-     * It rendered no error element at all, so a required checkbox left unticked told the user
-     * nothing — and `validationMessages` could not reach a field that never displayed one.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2315,8 +2262,8 @@ class BooleanFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BooleanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: BooleanFieldComponent, isStandalone: true, selector: "ngx-boolean-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BooleanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: BooleanFieldComponent, isStandalone: true, selector: "ngx-boolean-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--boolean"
       [attr.data-testid]="'field-' + field.id"
@@ -2380,7 +2327,7 @@ class BooleanFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BooleanFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BooleanFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2486,14 +2433,10 @@ class DateFieldComponent {
     /**
      * ISO 8601 date → display string, through the formatter the host configured.
      *
-     * This used to call `toLocaleDateString()` directly, which meant `setDateFormatters` — the
-     * one seam for choosing how a date is rendered — reached the record summary and the `time`
-     * field but not this one. A host that configured formatters got them almost everywhere,
-     * and silently did not get them on the field type most likely to be the reason they
-     * configured formatters at all.
+     * Never call `toLocaleDateString()` directly here: `setDateFormatters` is the one seam for
+     * choosing how a date renders, and every date display has to go through it.
      *
-     * The default formatter is `toLocaleDateString()` with no locale, so an application that
-     * has not called `setDateFormatters` renders exactly what it rendered before.
+     * The default formatter is `toLocaleDateString()` with no locale.
      */
     formatDate(value) {
         if (!value)
@@ -2508,12 +2451,6 @@ class DateFieldComponent {
             return value;
         return formatDisplayValue('date', undefined, value, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2527,8 +2464,8 @@ class DateFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--date"
       [attr.data-testid]="'field-' + field.id"
@@ -2578,7 +2515,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2652,8 +2589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * 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.
+ * Greenwich — and legacy `datetime` values written by a `type="date"` input have exactly
+ * that shape.
  */
 function parseStored(value) {
     if (value === null || value === undefined || value === '')
@@ -2734,12 +2671,6 @@ class DateTimeFieldComponent {
             return '—';
         return formatDisplayValue('datetime', undefined, d.toISOString(), this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2753,8 +2684,8 @@ class DateTimeFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateTimeFieldComponent, isStandalone: true, selector: "ngx-date-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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"
@@ -2805,7 +2736,7 @@ class DateTimeFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateTimeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2911,12 +2842,6 @@ class TimeFieldComponent {
     formatTime(value) {
         return formatDisplayValue('time', undefined, value, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2930,8 +2855,8 @@ class TimeFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TimeFieldComponent, isStandalone: true, selector: "ngx-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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"
@@ -2981,7 +2906,7 @@ class TimeFieldComponent {
     </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: "21.2.22", ngImport: i0, type: TimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3120,12 +3045,6 @@ class MonthYearFieldComponent {
         const monthName = MONTH_NAMES[parseInt(monthNum, 10) - 1];
         return monthName && year ? `${monthName} ${year}` : String(value);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -3139,8 +3058,8 @@ class MonthYearFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MonthYearFieldComponent, isStandalone: true, selector: "ngx-month-year-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MonthYearFieldComponent, isStandalone: true, selector: "ngx-month-year-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--month-year"
       [attr.data-testid]="'field-' + field.id"
@@ -3219,7 +3138,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MonthYearFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MonthYearFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3520,10 +3439,10 @@ class LookupRegistryService {
             value !== null &&
             typeof value.subscribe === 'function');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LookupRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LookupRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LookupRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LookupRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LookupRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LookupRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3610,10 +3529,7 @@ class DropdownFieldComponent {
      * The value this option stores — the option object itself.
      *
      * Kept as a method rather than binding `option` straight into the template, because it is
-     * the one place that says *why* the two are the same thing. It used to delegate to
-     * `getOptionStoredValue`, an exported identity function whose two branches returned their
-     * argument unchanged; naming a transformation that does not happen is worse than naming
-     * nothing, because a reader has to go and check.
+     * the one place that says *why* the two are the same thing.
      */
     getOptStoredVal(option) {
         return option;
@@ -3652,8 +3568,8 @@ class DropdownFieldComponent {
         // dropdown than "This field is required", and both stay independently overridable.
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DropdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DropdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--dropdown"
       [attr.data-testid]="'field-' + field.id"
@@ -3723,7 +3639,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DropdownFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DropdownFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3875,10 +3791,7 @@ class RadioFieldComponent {
      * The value this option stores — the option object itself.
      *
      * Kept as a method rather than binding `option` straight into the template, because it is
-     * the one place that says *why* the two are the same thing. It used to delegate to
-     * `getOptionStoredValue`, an exported identity function whose two branches returned their
-     * argument unchanged; naming a transformation that does not happen is worse than naming
-     * nothing, because a reader has to go and check.
+     * the one place that says *why* the two are the same thing.
      */
     getOptStoredVal(option) {
         return option;
@@ -3928,12 +3841,6 @@ class RadioFieldComponent {
             return cached;
         return typeof value === 'object' ? resolveLabel(value, this.language) : String(value ?? '—');
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -3947,8 +3854,8 @@ class RadioFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RadioFieldComponent, isStandalone: true, selector: "ngx-radio-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: RadioFieldComponent, isStandalone: true, selector: "ngx-radio-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--radio"
       [attr.data-testid]="'field-' + field.id"
@@ -4012,7 +3919,7 @@ class RadioFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RadioFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RadioFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4141,10 +4048,7 @@ class MultiSelectFieldComponent {
      * The value this option stores — the option object itself.
      *
      * Kept as a method rather than binding `option` straight into the template, because it is
-     * the one place that says *why* the two are the same thing. It used to delegate to
-     * `getOptionStoredValue`, an exported identity function whose two branches returned their
-     * argument unchanged; naming a transformation that does not happen is worse than naming
-     * nothing, because a reader has to go and check.
+     * the one place that says *why* the two are the same thing.
      */
     getOptStoredVal(option) {
         return option;
@@ -4168,12 +4072,6 @@ class MultiSelectFieldComponent {
         })
             .join(', ');
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -4187,8 +4085,8 @@ class MultiSelectFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MultiSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--multiSelect"
       [attr.data-testid]="'field-' + field.id"
@@ -4248,7 +4146,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MultiSelectFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4347,10 +4245,10 @@ class EntityRefRegistryService {
     has(entityKey) {
         return this.registry.has(entityKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4510,10 +4408,10 @@ class EntityReferenceService {
     matches(a, b, lang = 'en') {
         return valuesMatch(a, b, lang);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4634,10 +4532,10 @@ class CascadeDataService {
         walkTabs(config?.tabs);
         return found;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CascadeDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CascadeDataService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CascadeDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CascadeDataService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CascadeDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CascadeDataService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4658,10 +4556,10 @@ class EntityRefSelectionService {
     emit(fieldId, option) {
         this.subject.next({ fieldId, option });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefSelectionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefSelectionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefSelectionService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4776,12 +4674,6 @@ class EntityRefFieldComponent {
             void this.reload();
         });
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -4795,8 +4687,8 @@ class EntityRefFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--entity-ref"
       [attr.data-testid]="'field-' + field.id"
@@ -4861,7 +4753,7 @@ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4989,10 +4881,10 @@ class FieldRegistryService {
     registeredTypes() {
         return [...new Set([...this.dynamicRegistry.keys(), ...this.consumerRegistry.keys()])].sort();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5031,10 +4923,10 @@ class RbacService {
             canDelete: this.hasPermission(userRoles, config.permissions?.delete),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RbacService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RbacService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RbacService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RbacService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RbacService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RbacService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5127,7 +5019,7 @@ class DynamicFieldComponent {
      *
      * `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.
+     * flag would never be flushed. Running CD on the hosted component immediately is what shows the copied value.
      *
      * 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.
@@ -5156,10 +5048,10 @@ class DynamicFieldComponent {
         ref.setInput('readonly', this.readonly || !!this.field.readonly);
         ref.setInput('masked', masked);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", 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, styles: [":host{display:block;width:100%;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", 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, styles: [":host{display:block;width:100%;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-field', standalone: true, template: `<ng-container #fieldHost></ng-container>`, styles: [":host{display:block;width:100%;min-width:0}\n"] }]
         }], propDecorators: { field: [{
@@ -5203,8 +5095,8 @@ class GroupFieldComponent {
         const group = this.control;
         return group?.get(childId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GroupFieldComponent, isStandalone: true, selector: "ngx-group-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: GroupFieldComponent, isStandalone: true, selector: "ngx-group-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
     <fieldset
       class="ngx-field ngx-field--group"
       [attr.data-testid]="'field-' + field.id"
@@ -5245,7 +5137,7 @@ class GroupFieldComponent {
     </fieldset>
   `, isInline: true, styles: [".ngx-field--group{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#fafafa}.ngx-field__legend{font-weight:600;font-size:14px;padding:0 8px;color:#334155}.ngx-field__group-children{display:flex;flex-direction:column;gap:12px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => DynamicFieldComponent), selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-group-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
     <fieldset
@@ -5370,10 +5262,8 @@ class ValidatorRegistryService {
         }
         if (config.email)
             fnList.push(Validators.email);
-        // Named validators from the consumer registry. This branch previously hardcoded the
-        // built-ins and consulted the registry only for the `string[]` form of this config, so
-        // a validator the consumer had registered could not be named from a typed schema
-        // without casting it to `any`.
+        // Named validators from the consumer registry, so a registered validator can be named
+        // from a typed schema.
         for (const key of config.custom ?? []) {
             const fn = this.resolve(key);
             if (fn)
@@ -5409,10 +5299,9 @@ class ValidatorRegistryService {
     /**
      * Say when a named validator resolved to nothing.
      *
-     * It used to be dropped in silence, which is the worst failure mode this library has: the
-     * schema says the field is checked, the field is not checked, the form saves, and nothing
-     * anywhere said so. For `customAsync` that is typically a uniqueness check, so the duplicate
-     * lands in the database.
+     * Silence would be the worst failure mode this library has: the schema says the field is
+     * checked, the field is not checked, the form saves, and nothing says so. For
+     * `customAsync` that is typically a uniqueness check, so the duplicate lands in the database.
      *
      * Dev only, once per name — this runs while controls are built, which happens on every
      * config change. `validateConfig` with `knownValidators` is the build-time version of the
@@ -5430,10 +5319,10 @@ class ValidatorRegistryService {
         this.warned.add(id);
         console.warn(`[ngx-dynamic-entity] ${message}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidatorRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidatorRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidatorRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidatorRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5486,8 +5375,8 @@ class ArrayFieldComponent {
         this.formArray.removeAt(index);
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ArrayFieldComponent, isStandalone: true, selector: "ngx-array-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--array"
       [attr.data-testid]="'field-' + field.id"
@@ -5566,7 +5455,7 @@ class ArrayFieldComponent {
     </div>
   `, isInline: true, styles: [".ngx-field--array{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#f8fafc}.ngx-field__array-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ngx-field__array-add-btn{background:#2563eb;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-weight:500;cursor:pointer}.ngx-field__array-add-btn:hover{background:#1d4ed8}.ngx-field__array-list{display:flex;flex-direction:column;gap:12px}.ngx-field__array-item{background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:12px}.ngx-field__array-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid #f1f5f9;padding-bottom:6px}.ngx-field__array-item-title{font-weight:600;font-size:13px;color:#475569}.ngx-field__array-remove-btn{background:#ef4444;color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:12px;cursor:pointer}.ngx-field__array-empty{color:#94a3b8;font-style:italic;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => DynamicFieldComponent), selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-array-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
     <div
@@ -5740,10 +5629,10 @@ class FileUploadService {
             value !== null &&
             typeof value.subscribe === 'function');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileUploadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileUploadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileUploadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5828,8 +5717,8 @@ class ImageFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImageFieldComponent, isStandalone: true, selector: "ngx-image-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImageFieldComponent, isStandalone: true, selector: "ngx-image-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--image"
       [attr.data-testid]="'field-' + field.id"
@@ -5908,7 +5797,7 @@ class ImageFieldComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImageFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6078,8 +5967,8 @@ class FileFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FileFieldComponent, isStandalone: true, selector: "ngx-file-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FileFieldComponent, isStandalone: true, selector: "ngx-file-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--file"
       [attr.data-testid]="'field-' + field.id"
@@ -6161,7 +6050,7 @@ class FileFieldComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6331,10 +6220,10 @@ class HookRegistryService {
             return data;
         return hook(data, context);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HookRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HookRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HookRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HookRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HookRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HookRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6342,13 +6231,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /**
  * RulesEvaluationService — evaluates rules, and owns what a result *means*.
  *
- * It used to be two passthrough methods, with the interpretation spread across the component:
- * the render filter decided one way what a rule result did to a field, and the validity sync
- * decided again forty lines further down. They disagreed about what "every field" meant, and
- * the consequence was a required field inside a `group` that a rule had hidden holding
- * `form.invalid` true forever with nothing on screen to explain it.
- *
- * Precedence lives here now, in one method that both callers go through. Still stateless —
+ * Precedence lives in one method that both the render filter and the validity sync go
+ * through, so what is on screen and what counts toward validity cannot disagree. Stateless —
  * every method takes the result it is interpreting, so there is nothing to go stale against a
  * rebuilt form and nothing to reset between configs.
  */
@@ -6448,10 +6332,10 @@ class RulesEvaluationService {
         return sets;
     }
     nameSetCache = new WeakMap();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RulesEvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RulesEvaluationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RulesEvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RulesEvaluationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RulesEvaluationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RulesEvaluationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -6506,10 +6390,10 @@ class ConfigSourceService {
             this.cache.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ConfigSourceService, deps: [{ token: CONFIG_SOURCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ConfigSourceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ConfigSourceService, deps: [{ token: CONFIG_SOURCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ConfigSourceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ConfigSourceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ConfigSourceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -6524,9 +6408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * The one question this answers is *where a value lives*: which control a field owns, how
  * the tab tree nests into groups, how a record is read out of the tree and patched back in.
- * It was half of `DynamicFormComponent`, mixed in with tab state, focus management, rule
- * evaluation and RBAC — and the cost of that was not length but ownership: the bug Phase 2
- * fixed was two methods forty lines apart disagreeing about what "every field" meant.
+ * Anything that has to find a field's control goes through here, so there is one answer.
  *
  * Deliberately stateless. Every method takes the form and the config it is operating on, so
  * there is no cached `this.form` to go stale against a rebuilt one, and every method is
@@ -6618,6 +6500,44 @@ class FormStructureService {
         }
         return curr instanceof FormGroup ? curr : null;
     }
+    /**
+     * The control a scope entry addresses, found by its path rather than its bare id.
+     *
+     * The control tree mirrors the scope path exactly — a tab nests by its id and a `group`
+     * under its own — so `form.get(path)` names exactly one control. A bare-id lookup falls
+     * back to a first-match search and, with `address` on two tabs, finds the wrong one.
+     *
+     * A field inside an `array` has no static path: its controls live in `FormArray` rows
+     * built per row. `form.get()` returns null for those, and callers leave them alone.
+     */
+    controlAt(form, entry) {
+        return form?.get(fieldRefFor(entry.scope, entry.field.id)) ?? null;
+    }
+    /**
+     * The value map rules and `showWhen` are evaluated against.
+     *
+     * Every field appears under two keys: its bare id, and its ref wrapped in brackets. The
+     * bare id is what most configs use, but ids are unique only per scope, so when two scopes
+     * define one the last field walked wins. `[personal.address]` names one field and cannot
+     * be ambiguous, which is why a rule that has to tell them apart uses the ref.
+     *
+     * Both live in one flat map on purpose: `evaluateFormRules` takes a `Record<string,
+     * unknown>` and needs no knowledge of refs at all — the extra keys simply resolve.
+     */
+    flattenValues(form, entries) {
+        const out = {};
+        for (const entry of entries) {
+            const field = entry.field;
+            if (!field?.id)
+                continue;
+            const ctrl = this.controlAt(form, entry);
+            if (!ctrl)
+                continue;
+            out[field.id] = ctrl.value;
+            out[toRefToken(refOf(field, entry.scope))] = ctrl.value;
+        }
+        return out;
+    }
     /**
      * Find a control by reference: a bracketed path, or a bare field id.
      *
@@ -6761,10 +6681,10 @@ class FormStructureService {
             fieldsById.has(key) &&
             !patchedFieldIds.has(key));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormStructureService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormStructureService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStructureService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStructureService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormStructureService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStructureService, decorators: [{
             type: Injectable
         }] });
 
@@ -6937,9 +6857,8 @@ class DynamicFormComponent {
     // ─── Computed ─────────────────────────────────────────────────────────────
     ruleResult = computed(() => this.rulesEvaluation.evaluate(this.rules, this.formValues(), this.baseline(), {
         // The engine reports rather than logs, because it also runs on a server. This is the
-        // client's answer: say it once per distinct problem, in dev only. A rule the author
-        // half-finished used to throw out of change detection; now it is skipped, and a
-        // silently skipped rule is exactly as hard to diagnose as a thrown one.
+        // client's answer: say it once per distinct problem, in dev only — a silently skipped
+        // rule is as hard to diagnose as a thrown one.
         onProblem: message => this.warnOnce(message),
     }), ...(ngDevMode ? [{ debugName: "ruleResult" }] : /* istanbul ignore next */ []));
     /** Warned-about rule problems, per component instance — see `warnedAmbiguousIds`. */
@@ -7056,8 +6975,7 @@ class DynamicFormComponent {
     /**
      * Whether the current roles may see this record at all.
      *
-     * `permissions.view` used to be computed and thrown away — a user whose roles failed it
-     * still received the complete form with every value in the DOM. It is honoured now.
+     * A user whose roles fail `permissions.view` gets no form, so no value reaches the DOM.
      *
      * As with masking, this is presentational: it stops the browser rendering data, it does
      * not stop the data reaching the browser. Authorize on the server.
@@ -7115,13 +7033,11 @@ class DynamicFormComponent {
     /**
      * Whether the Save button is unavailable.
      *
-     * This used to be `submitBlocked`, so an invalid form greyed Save out — and a greyed button
-     * is the worst possible answer to "why can't I save?". It cannot be clicked, so there is no
-     * moment at which the form gets to say which field is at fault or which tab it is on; the
-     * user is left comparing a disabled button against a form that looks, to them, filled in.
-     * On a tabbed form the offending field is usually not even on screen.
+     * Deliberately not `submitBlocked`: a greyed button is the worst answer to "why can't I
+     * save?". It cannot be clicked, so the form never gets to say which field is at fault or
+     * which tab it is on — and on a tabbed form that field is usually not on screen.
      *
-     * Save now stays available while the form is merely invalid. Clicking it still saves
+     * Save stays available while the form is merely invalid. Clicking it still saves
      * nothing — `submit()` checks `submitBlocked` and refuses — but the refusal is where the
      * error summary, the tab badges and the jump to the first bad field come from, so pressing
      * Save produces an explanation instead of silence.
@@ -7156,10 +7072,9 @@ class DynamicFormComponent {
             this.buildForm();
             // Clear *before* the guard below, not after it.
             //
-            // The reset used to sit behind `if (visibleTabs.length === 0) return`, so a swap that
-            // arrived while no tab was visible — a config still being applied, or every tab hidden
-            // by a rule at that instant — skipped it entirely and the previous record's tab
-            // survived into the next one. Clearing is unconditional and cheap, and safe on its own
+            // A swap can arrive while no tab is visible — a config still being applied, or every
+            // tab hidden by a rule at that instant — and the previous record's tab must not survive
+            // into the next one. Clearing is unconditional and cheap, and safe on its own
             // because `activeTabConfig` already falls back to the first visible tab when nothing
             // is selected. Selecting the tab is what needs tabs to exist; forgetting the old one
             // does not.
@@ -7169,14 +7084,9 @@ class DynamicFormComponent {
             }
             if (this.visibleTabs.length === 0)
                 return;
-            // The first tab used to be chosen only when no tab was active yet, and nothing ever
-            // cleared `activeTab` — so a form that stays mounted while `initialData` is swapped
-            // opened the next record on the tab the previous one was left on. The demo escaped it
-            // by destroying the form between records; a host that keeps it mounted did not.
-            //
-            // Resetting here is consistent with what already happens: `buildForm` assigns a brand
-            // new FormGroup, so a changed `initialData` has already discarded every control and
-            // all validation state. The tab was the one thing pretending nothing had changed.
+            // A form that stays mounted while `initialData` is swapped must open the next record
+            // on its first tab, not the tab the previous one was left on. `buildForm` has already
+            // discarded every control and all validation state; the active tab resets with them.
             if (!this.activeTab()) {
                 // No focus steal: the panel gains focus when a *user* picks a tab, not when a host
                 // swaps the record underneath them.
@@ -7610,25 +7520,10 @@ class DynamicFormComponent {
     /**
      * Ids already warned about, per component instance.
      *
-     * This was `private static`, so it was module-global mutable state that nothing ever
-     * cleared: under SSR every render of every form in the process accumulated into one set
-     * that lived as long as the server did, and the first request to render a config
-     * suppressed the warning for every request after it. Per instance, the warning is once per
-     * form — which is what "warn once" was meant to mean.
+     * Per instance, never `static`: under SSR a module-global set would outlive every request,
+     * and the first render of a config would suppress the warning for every render after it.
      */
     warnedAmbiguousIds = new Set();
-    /**
-     * The value map rules and `showWhen` are evaluated against.
-     *
-     * Every field appears under two keys: its bare id, and its `refererField` path wrapped in brackets.
-     * The bare id is what every config written so far uses and is kept exactly as it was — but
-     * ids are unique per scope, so when two scopes define one the last field walked wins and
-     * the rule reads whichever that is. `[personal.address]` names one field and cannot be
-     * ambiguous, which is why a rule that has to distinguish them uses the ref.
-     *
-     * Both live in one flat map on purpose: `evaluateFormRules` takes a `Record<string,
-     * unknown>` and needs no knowledge of refs at all — the extra keys simply resolve.
-     */
     /**
      * Every name a rule may address this field by.
      *
@@ -7662,9 +7557,8 @@ class DynamicFormComponent {
     /**
      * Every field in the config with the scope its value is stored under, cached per config.
      *
-     * `collectFieldScopes` walks the whole tree. It was called once per field from `pathFor`,
-     * which `namesField` calls, which the render filter calls for every field on the active
-     * tab — a quadratic walk on every change-detection pass. Keyed by config identity, so a
+     * `collectFieldScopes` walks the whole tree, and `pathFor` runs once per rendered field on
+     * every change-detection pass — uncached, that is quadratic. Keyed by config identity, so a
      * new config invalidates it without an explicit lifecycle hook to forget.
      */
     fieldScopes() {
@@ -7683,35 +7577,13 @@ class DynamicFormComponent {
         return this.scopeCache?.byField.get(field);
     }
     scopeCache;
-    /**
-     * The control a scope entry addresses, named by path rather than by bare id.
-     *
-     * `getControl(field.id)` with no tab falls through to a first-match recursive search of the
-     * whole form, so with `address` on two tabs, hiding one disabled the other. The control
-     * tree mirrors the scope path exactly — `buildTabControls` nests by tab id and
-     * `buildFieldControl` nests a `group` under its own id — so a `[path]` ref resolves through
-     * `form.get()` on `getControl`'s first branch and names exactly one control.
-     *
-     * A field inside an `array` has no static path: its controls live in `FormArray` rows built
-     * per row. `form.get()` returns null for those and they are left alone, which is correct —
-     * a row's controls are created and destroyed with the row.
-     */
+    /** The control a scope entry addresses — see `FormStructureService.controlAt`. */
     controlForEntry(entry) {
-        return this.getControl(toRefToken(fieldRefFor(entry.scope, entry.field.id)));
+        return this.structure.controlAt(this.form, entry);
     }
+    /** The value map rules and `showWhen` are evaluated against — see `FormStructureService.flattenValues`. */
     flattenFormValues() {
-        const out = {};
-        for (const entry of collectFieldScopes(this.config)) {
-            const field = entry.field;
-            if (!field?.id)
-                continue;
-            const ctrl = this.getControl(field.id, entry.scope.split('.').pop());
-            if (!ctrl)
-                continue;
-            out[field.id] = ctrl.value;
-            out[toRefToken(refOf(field, entry.scope))] = ctrl.value;
-        }
-        return out;
+        return this.structure.flattenValues(this.form, this.fieldScopes());
     }
     // ─── autoPatch / patchOnTrue ──────────────────────────────────────────────
     /**
@@ -7738,22 +7610,46 @@ class DynamicFormComponent {
     /**
      * `patchOnTrue` — when a boolean/checkbox field transitions to `true`,
      * copy `from` → `to` within the current record.
+     *
+     * The trigger is read by its ref, and a bare `from`/`to` resolves to a sibling in the
+     * trigger's own scope before falling back to a form-wide lookup — so two groups that each
+     * carry `home`, `billing` and a "same as" flag patch within themselves, not across.
      */
     runPatchOnTrue(values) {
-        for (const field of this.allFields()) {
-            const mappings = field.patchOnTrue;
-            if (!mappings?.length)
+        for (const entry of this.fieldScopes()) {
+            const field = entry.field;
+            const mappings = field?.patchOnTrue;
+            if (!field?.id || !mappings?.length)
                 continue;
-            const wasTrue = this.previousValues[field.id] === true;
-            const isTrue = values[field.id] === true;
-            if (!isTrue || wasTrue)
+            const trigger = toRefToken(refOf(field, entry.scope));
+            if (values[trigger] !== true || this.previousValues[trigger] === true)
                 continue;
-            const patch = applyPatchOnTrue(mappings, values);
-            for (const [targetId, value] of Object.entries(patch)) {
-                this.getControl(targetId)?.patchValue(value, { emitEvent: false });
+            for (const mapping of mappings) {
+                if (!mapping || isUnsafePath(mapping.to))
+                    continue;
+                const from = this.resolveInScope(mapping.from, entry.scope);
+                if (!from || !(from.key in values))
+                    continue;
+                this.resolveInScope(mapping.to, entry.scope)?.control?.patchValue(values[from.key], { emitEvent: false });
             }
         }
     }
+    /**
+     * A field named by a mapping, preferring a sibling in `scope` when the name is a bare id.
+     *
+     * `key` is the field's entry in the flattened value map; `control` is the control it owns.
+     */
+    resolveInScope(name, scope) {
+        if (typeof name !== 'string' || !name)
+            return null;
+        const parsed = parseFieldRef(name);
+        if (parsed.kind !== 'ref') {
+            const sibling = this.fieldScopes().find(e => e.scope === scope && e.field?.id === parsed.value);
+            if (sibling)
+                return { key: toRefToken(refOf(sibling.field, sibling.scope)), control: this.controlForEntry(sibling) };
+        }
+        return { key: name, control: this.getControl(name) };
+    }
     /**
      * Prefer a control declared on the configured target tab; fall back to a top-level control.
      *
@@ -7889,11 +7785,9 @@ class DynamicFormComponent {
     async submit() {
         if (!this.canSubmit || this.submitBlocked) {
             /*
-             * A refused save used to mark every control touched and stop there.
-             *
-             * On a tabbed form that is indistinguishable from a broken button: the errors appear on
-             * whichever tabs hold them, the user is looking at a different one, and nothing on
-             * screen changes. Three things fix it, and all three are needed — the summary says how
+             * Marking every control touched is not enough on its own: on a tabbed form the errors
+             * appear on whichever tabs hold them, the user is looking at a different one, and
+             * nothing on screen changes. Three things are needed — the summary says how
              * many and which, the tab badges say where, and this jump takes the user to the first.
              */
             this.markAllTouched();
@@ -7946,10 +7840,10 @@ class DynamicFormComponent {
         this.submitAttempted.set(false);
         this.formReset.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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", layout: "layout" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange", saveRejected: "saveRejected" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService, FormStructureService], 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\" [class.ngx-form--readonly]=\"readonly\" novalidate>\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    <!--\n      Why the last Save did nothing.\n      Only after a refused submit \u2014 see `submitAttempted`. Each entry jumps to its field,\n      switching tabs on the way, because the field is usually not the one on screen.\n    -->\n    @if (submitAttempted() && invalidFields().length > 0) {\n      <div class=\"ngx-form__error-summary\" role=\"alert\" data-testid=\"error-summary\" tabindex=\"-1\">\n        <!--\n          `error-summary-heading`, not `-title`: the links below are `error-summary-<fieldId>`,\n          and a field whose id happens to be `title` would then share a test id with this line.\n          The `extensions` entity has exactly such a field.\n        -->\n        <p class=\"ngx-form__error-summary-title\" data-testid=\"error-summary-heading\">\n          {{ ui.text('errorSummaryTitle', language, { count: invalidFields().length }) }}\n        </p>\n        <ul class=\"ngx-form__error-summary-list\">\n          @for (entry of invalidFields(); track entry.field.id) {\n            <li>\n              <!--\n                The field, and what is wrong with it \u2014 the same sentence the field renders\n                under itself, so the summary is not a second opinion. Naming only the field\n                left the user to visit each one to find out what it wanted.\n              -->\n              <button\n                type=\"button\"\n                class=\"ngx-form__error-summary-link\"\n                [attr.data-testid]=\"'error-summary-' + entry.field.id\"\n                (click)=\"jumpToField(entry.field.id)\"\n              >\n                <span class=\"ngx-form__error-summary-field\">{{ resolveFieldLabel(entry.field) }}</span>\n                @if (entry.message) {\n                  <span class=\"ngx-form__error-summary-reason\">{{ entry.message }}</span>\n                }\n              </button>\n            </li>\n          }\n        </ul>\n      </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        {{ ui.text('criticalFieldChanged', language, { fields: changedCriticalFieldLabels() }) }}\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            <!--\n              How many fields on this tab are stopping the save.\n              The count is in the accessible name rather than the badge, because \"3\" read out\n              after a tab name says nothing about what it counts.\n            -->\n            @if (tabErrorCount(tab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'tab-errors-' + tab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\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\n        class=\"ngx-form__tabs ngx-form__tabs--sub\"\n        role=\"tablist\"\n        data-testid=\"subtab-strip\"\n        style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px\"\n      >\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            @if (subTabErrorCount(subTab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'subtab-errors-' + subTab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\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 role=\"tabpanel\" tabindex=\"-1\" #formPanel class=\"ngx-form__tabpanel\" [attr.aria-label]=\"activeTabLabel\">\n      @if (activeTabModuleComponent) {\n        <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n          <ng-container\n            *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"\n          ></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              }\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                    ui.text(isFieldLocked(field) ? 'unlockField' : 'lockField', language, {\n                      field: resolveFieldLabel(field),\n                    })\n                  \"\n                  [title]=\"ui.text(isFieldLocked(field) ? 'criticalFieldUnlockHint' : 'criticalFieldLockHint', language)\"\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 type=\"button\" class=\"ngx-form__reset\" data-testid=\"form-reset\" (click)=\"reset()\" [disabled]=\"isSaving()\">\n          {{ ui.text('reset', language) }}\n        </button>\n        <!--\n          Two different \"unavailable\" states, and they are not the same thing.\n\n          `disabled` is for what a retry cannot fix \u2014 a save in flight, an async check still\n          outstanding. `data-blocked` is for validation: the button stays fully operable,\n          because pressing it is how the user gets the error summary, but it should not look\n          ready either. The stylesheet mutes it without taking the click away.\n\n          Deliberately not `aria-disabled`. That announces a control as present-but-inoperable,\n          and this one is operable and useful \u2014 pressing it raises a `role=\"alert\"` naming\n          every field at fault, which is more than a disabled button could ever say. Tooling\n          agrees: Playwright refuses to click through `aria-disabled`, and it would be right\n          to, because the attribute would be claiming something untrue.\n        -->\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitDisabled\"\n          [attr.data-blocked]=\"submitBlocked ? '' : null\"\n          [title]=\"ui.text('saveShortcutHint', language)\"\n        >\n          @if (isSaving() || loading) {\n            {{ ui.text('saving', language) }}\n          } @else {\n            {{ ui.text('save', language) }}\n          }\n        </button>\n      </div>\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    {{ ui.text('accessDenied', language) }}\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngx-gap, 18px);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:var(--ngx-radius-sm, 6px);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:var(--ngx-color-border, #d1d5db);background:var(--ngx-color-surface-alt, #f9fafb)}@media(max-width:640px){.ngx-form__panel{grid-template-columns:minmax(0,1fr)}.ngx-form__field-slot{grid-column:1 / -1!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],[formArray],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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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", layout: "layout" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange", saveRejected: "saveRejected" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService, FormStructureService], 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\" [class.ngx-form--readonly]=\"readonly\" novalidate>\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    <!--\n      Why the last Save did nothing.\n      Only after a refused submit \u2014 see `submitAttempted`. Each entry jumps to its field,\n      switching tabs on the way, because the field is usually not the one on screen.\n    -->\n    @if (submitAttempted() && invalidFields().length > 0) {\n      <div class=\"ngx-form__error-summary\" role=\"alert\" data-testid=\"error-summary\" tabindex=\"-1\">\n        <!--\n          `error-summary-heading`, not `-title`: the links below are `error-summary-<fieldId>`,\n          and a field whose id happens to be `title` would then share a test id with this line.\n          The `extensions` entity has exactly such a field.\n        -->\n        <p class=\"ngx-form__error-summary-title\" data-testid=\"error-summary-heading\">\n          {{ ui.text('errorSummaryTitle', language, { count: invalidFields().length }) }}\n        </p>\n        <ul class=\"ngx-form__error-summary-list\">\n          @for (entry of invalidFields(); track entry.field.id) {\n            <li>\n              <!--\n                The field, and what is wrong with it \u2014 the same sentence the field renders\n                under itself, so the summary is not a second opinion. Naming only the field\n                left the user to visit each one to find out what it wanted.\n              -->\n              <button\n                type=\"button\"\n                class=\"ngx-form__error-summary-link\"\n                [attr.data-testid]=\"'error-summary-' + entry.field.id\"\n                (click)=\"jumpToField(entry.field.id)\"\n              >\n                <span class=\"ngx-form__error-summary-field\">{{ resolveFieldLabel(entry.field) }}</span>\n                @if (entry.message) {\n                  <span class=\"ngx-form__error-summary-reason\">{{ entry.message }}</span>\n                }\n              </button>\n            </li>\n          }\n        </ul>\n      </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        {{ ui.text('criticalFieldChanged', language, { fields: changedCriticalFieldLabels() }) }}\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            <!--\n              How many fields on this tab are stopping the save.\n              The count is in the accessible name rather than the badge, because \"3\" read out\n              after a tab name says nothing about what it counts.\n            -->\n            @if (tabErrorCount(tab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'tab-errors-' + tab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\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\n        class=\"ngx-form__tabs ngx-form__tabs--sub\"\n        role=\"tablist\"\n        data-testid=\"subtab-strip\"\n        style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px\"\n      >\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            @if (subTabErrorCount(subTab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'subtab-errors-' + subTab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\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 role=\"tabpanel\" tabindex=\"-1\" #formPanel class=\"ngx-form__tabpanel\" [attr.aria-label]=\"activeTabLabel\">\n      @if (activeTabModuleComponent) {\n        <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n          <ng-container\n            *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"\n          ></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              }\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                    ui.text(isFieldLocked(field) ? 'unlockField' : 'lockField', language, {\n                      field: resolveFieldLabel(field),\n                    })\n                  \"\n                  [title]=\"ui.text(isFieldLocked(field) ? 'criticalFieldUnlockHint' : 'criticalFieldLockHint', language)\"\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 type=\"button\" class=\"ngx-form__reset\" data-testid=\"form-reset\" (click)=\"reset()\" [disabled]=\"isSaving()\">\n          {{ ui.text('reset', language) }}\n        </button>\n        <!--\n          Two different \"unavailable\" states, and they are not the same thing.\n\n          `disabled` is for what a retry cannot fix \u2014 a save in flight, an async check still\n          outstanding. `data-blocked` is for validation: the button stays fully operable,\n          because pressing it is how the user gets the error summary, but it should not look\n          ready either. The stylesheet mutes it without taking the click away.\n\n          Deliberately not `aria-disabled`. That announces a control as present-but-inoperable,\n          and this one is operable and useful \u2014 pressing it raises a `role=\"alert\"` naming\n          every field at fault, which is more than a disabled button could ever say. Tooling\n          agrees: Playwright refuses to click through `aria-disabled`, and it would be right\n          to, because the attribute would be claiming something untrue.\n        -->\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitDisabled\"\n          [attr.data-blocked]=\"submitBlocked ? '' : null\"\n          [title]=\"ui.text('saveShortcutHint', language)\"\n        >\n          @if (isSaving() || loading) {\n            {{ ui.text('saving', language) }}\n          } @else {\n            {{ ui.text('save', language) }}\n          }\n        </button>\n      </div>\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    {{ ui.text('accessDenied', language) }}\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngx-gap, 18px);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:var(--ngx-radius-sm, 6px);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:var(--ngx-color-border, #d1d5db);background:var(--ngx-color-surface-alt, #f9fafb)}@media(max-width:640px){.ngx-form__panel{grid-template-columns:minmax(0,1fr)}.ngx-form__field-slot{grid-column:1 / -1!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],[formArray],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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-form', standalone: true, imports: [ReactiveFormsModule, DynamicFieldComponent, NgComponentOutlet], providers: [EntityRefSelectionService, FormStructureService], template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" [class.ngx-form--readonly]=\"readonly\" novalidate>\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    <!--\n      Why the last Save did nothing.\n      Only after a refused submit \u2014 see `submitAttempted`. Each entry jumps to its field,\n      switching tabs on the way, because the field is usually not the one on screen.\n    -->\n    @if (submitAttempted() && invalidFields().length > 0) {\n      <div class=\"ngx-form__error-summary\" role=\"alert\" data-testid=\"error-summary\" tabindex=\"-1\">\n        <!--\n          `error-summary-heading`, not `-title`: the links below are `error-summary-<fieldId>`,\n          and a field whose id happens to be `title` would then share a test id with this line.\n          The `extensions` entity has exactly such a field.\n        -->\n        <p class=\"ngx-form__error-summary-title\" data-testid=\"error-summary-heading\">\n          {{ ui.text('errorSummaryTitle', language, { count: invalidFields().length }) }}\n        </p>\n        <ul class=\"ngx-form__error-summary-list\">\n          @for (entry of invalidFields(); track entry.field.id) {\n            <li>\n              <!--\n                The field, and what is wrong with it \u2014 the same sentence the field renders\n                under itself, so the summary is not a second opinion. Naming only the field\n                left the user to visit each one to find out what it wanted.\n              -->\n              <button\n                type=\"button\"\n                class=\"ngx-form__error-summary-link\"\n                [attr.data-testid]=\"'error-summary-' + entry.field.id\"\n                (click)=\"jumpToField(entry.field.id)\"\n              >\n                <span class=\"ngx-form__error-summary-field\">{{ resolveFieldLabel(entry.field) }}</span>\n                @if (entry.message) {\n                  <span class=\"ngx-form__error-summary-reason\">{{ entry.message }}</span>\n                }\n              </button>\n            </li>\n          }\n        </ul>\n      </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        {{ ui.text('criticalFieldChanged', language, { fields: changedCriticalFieldLabels() }) }}\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            <!--\n              How many fields on this tab are stopping the save.\n              The count is in the accessible name rather than the badge, because \"3\" read out\n              after a tab name says nothing about what it counts.\n            -->\n            @if (tabErrorCount(tab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'tab-errors-' + tab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\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\n        class=\"ngx-form__tabs ngx-form__tabs--sub\"\n        role=\"tablist\"\n        data-testid=\"subtab-strip\"\n        style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px\"\n      >\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            @if (subTabErrorCount(subTab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'subtab-errors-' + subTab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\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 role=\"tabpanel\" tabindex=\"-1\" #formPanel class=\"ngx-form__tabpanel\" [attr.aria-label]=\"activeTabLabel\">\n      @if (activeTabModuleComponent) {\n        <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n          <ng-container\n            *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"\n          ></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              }\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                    ui.text(isFieldLocked(field) ? 'unlockField' : 'lockField', language, {\n                      field: resolveFieldLabel(field),\n                    })\n                  \"\n                  [title]=\"ui.text(isFieldLocked(field) ? 'criticalFieldUnlockHint' : 'criticalFieldLockHint', language)\"\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 type=\"button\" class=\"ngx-form__reset\" data-testid=\"form-reset\" (click)=\"reset()\" [disabled]=\"isSaving()\">\n          {{ ui.text('reset', language) }}\n        </button>\n        <!--\n          Two different \"unavailable\" states, and they are not the same thing.\n\n          `disabled` is for what a retry cannot fix \u2014 a save in flight, an async check still\n          outstanding. `data-blocked` is for validation: the button stays fully operable,\n          because pressing it is how the user gets the error summary, but it should not look\n          ready either. The stylesheet mutes it without taking the click away.\n\n          Deliberately not `aria-disabled`. That announces a control as present-but-inoperable,\n          and this one is operable and useful \u2014 pressing it raises a `role=\"alert\"` naming\n          every field at fault, which is more than a disabled button could ever say. Tooling\n          agrees: Playwright refuses to click through `aria-disabled`, and it would be right\n          to, because the attribute would be claiming something untrue.\n        -->\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitDisabled\"\n          [attr.data-blocked]=\"submitBlocked ? '' : null\"\n          [title]=\"ui.text('saveShortcutHint', language)\"\n        >\n          @if (isSaving() || loading) {\n            {{ ui.text('saving', language) }}\n          } @else {\n            {{ ui.text('save', language) }}\n          }\n        </button>\n      </div>\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    {{ ui.text('accessDenied', language) }}\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngx-gap, 18px);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:var(--ngx-radius-sm, 6px);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:var(--ngx-color-border, #d1d5db);background:var(--ngx-color-surface-alt, #f9fafb)}@media(max-width:640px){.ngx-form__panel{grid-template-columns:minmax(0,1fr)}.ngx-form__field-slot{grid-column:1 / -1!important}}\n"] }]
         }], propDecorators: { config: [{
@@ -8367,10 +8261,8 @@ class DynamicRecordFormComponent {
     /**
      * What this record is called, as opposed to what kind of thing it is.
      *
-     * The header used to show the entity's name twice — "clients", with "Entity: clients"
-     * underneath — so the one question a record header exists to answer, *which* record am I
-     * looking at, was the one thing it did not say. The entity keeps the subtitle; this takes
-     * the heading.
+     * A record header exists to answer *which* record am I looking at, so this takes the
+     * heading and the entity name keeps the subtitle.
      *
      * The order is deliberate. `showOnMinimize` is the author saying "this is what identifies a
      * record" — it is what the summary panel and the collapsed view already show — so it is
@@ -8552,11 +8444,6 @@ class DynamicRecordFormComponent {
     formatFieldValue(field) {
         return formatDisplayValue(field.type, field.options, this.fieldValue(field.id), this.language);
     }
-    /**
-     * 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.
-     */
     /**
      * Switches to the tab holding `fieldId`, then scrolls it into view and moves focus to it.
      *
@@ -8569,10 +8456,10 @@ class DynamicRecordFormComponent {
     jumpToField(fieldId) {
         this.dynamicFormComp?.jumpToField(fieldId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicRecordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", 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", layout: "layout", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave", saveRejected: "saveRejected" }, 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]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</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\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</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]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </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      {{ ui.text('recordModified', language) }}\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]=\"ui.text('jumpToField', language, { field: 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\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\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          >\n            {{ ui.text('addRow', language) }}\n          </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\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</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>{{ rowDrawerTitle(rowField) }}</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()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </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    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.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__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 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:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview", "layout"], 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicRecordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", 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", layout: "layout", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave", saveRejected: "saveRejected" }, 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]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</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\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</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]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </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      {{ ui.text('recordModified', language) }}\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]=\"ui.text('jumpToField', language, { field: 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\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\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          >\n            {{ ui.text('addRow', language) }}\n          </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\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</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>{{ rowDrawerTitle(rowField) }}</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()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </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    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.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__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 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:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview", "layout"], 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: "21.2.22", ngImport: i0, type: DynamicRecordFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicRecordFormComponent, decorators: [{
             type: Component,
             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]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</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\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</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]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </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      {{ ui.text('recordModified', language) }}\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]=\"ui.text('jumpToField', language, { field: 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\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\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          >\n            {{ ui.text('addRow', language) }}\n          </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\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</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>{{ rowDrawerTitle(rowField) }}</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()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </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    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.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__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 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:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"] }]
         }], propDecorators: { config: [{
@@ -8738,10 +8625,10 @@ class LocalImportTransport {
         const csv = toCsv(spec.columns.map(column => column.header));
         return new Blob([csv], { type: 'text/csv;charset=utf-8' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LocalImportTransport, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LocalImportTransport, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LocalImportTransport, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LocalImportTransport, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LocalImportTransport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LocalImportTransport, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -8965,8 +8852,8 @@ class ImportErrorsComponent {
             .sort((a, b) => a[0] - b[0])
             .map(([row, problems]) => ({ row, problems }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportErrorsComponent, isStandalone: true, selector: "ngx-import-errors", inputs: { errors: "errors", language: "language" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportErrorsComponent, isStandalone: true, selector: "ngx-import-errors", inputs: { errors: "errors", language: "language" }, ngImport: i0, template: `
     @if (errors.length) {
       <section class="ngx-import-errors" data-testid="import-errors">
         <h4 class="ngx-import-errors__heading">{{ ui.text('importErrorsHeading', language) }}</h4>
@@ -8998,7 +8885,7 @@ class ImportErrorsComponent {
     }
   `, isInline: true, styles: [".ngx-import-errors__heading{margin:0 0 8px;font-size:var(--ngx-font-size, 14px);color:var(--ngx-color-error, #b91c1c)}.ngx-import-errors__table{width:100%;border-collapse:collapse}.ngx-import-errors__table th,.ngx-import-errors__table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--ngx-color-border, #e5e7eb);vertical-align:top}.ngx-import-errors__table thead th{color:var(--ngx-color-muted, #6b7280)}.ngx-import-errors__table tbody th{white-space:nowrap;color:var(--ngx-color-error, #b91c1c)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportErrorsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-errors', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `
     @if (errors.length) {
@@ -9109,8 +8996,8 @@ class ImportMapperComponent {
             entries,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportMapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportMapperComponent, isStandalone: true, selector: "ngx-import-mapper", inputs: { config: "config", headers: "headers", plan: "plan", language: "language" }, outputs: { planChange: "planChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportMapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportMapperComponent, isStandalone: true, selector: "ngx-import-mapper", inputs: { config: "config", headers: "headers", plan: "plan", language: "language" }, outputs: { planChange: "planChange" }, usesOnChanges: true, ngImport: i0, template: `
     <section class="ngx-import-mapper" data-testid="import-mapper">
       <p class="ngx-import-mapper__summary" data-testid="import-mapped-count">
         {{ ui.text('importMappedCount', language, { mapped: mappedCount(), total: rows().length }) }}
@@ -9168,7 +9055,7 @@ class ImportMapperComponent {
     </section>
   `, isInline: true, styles: [".ngx-import-mapper__summary,.ngx-import-mapper__warning,.ngx-import-mapper__note{margin:0 0 10px}.ngx-import-mapper__warning{color:var(--ngx-color-warning, #b45309);background:var(--ngx-color-warning-soft, #fffbeb);border:1px solid var(--ngx-color-border, #fef3c7);border-radius:var(--ngx-radius-sm, 6px);padding:8px 12px}.ngx-import-mapper__note{color:var(--ngx-color-muted, #6b7280)}.ngx-import-mapper__table{width:100%;border-collapse:collapse}.ngx-import-mapper__table th,.ngx-import-mapper__table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--ngx-color-border, #e5e7eb);vertical-align:middle}.ngx-import-mapper__table thead th{color:var(--ngx-color-muted, #6b7280);font-size:var(--ngx-font-size, 13px);text-transform:uppercase;letter-spacing:.04em}.ngx-import-mapper__required{color:var(--ngx-color-error, #b91c1c);margin-left:2px}.ngx-import-mapper__select{min-width:220px;max-width:100%;padding:6px 8px;border:1px solid var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff);color:inherit;font:inherit}.ngx-import-mapper__guess{margin-left:8px;padding:2px 8px;border-radius:999px;font-size:12px;color:var(--ngx-color-info, #1d4ed8);background:var(--ngx-color-info-soft, #eff6ff)}@media(max-width:640px){.ngx-import-mapper__select{min-width:0;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportMapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportMapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-mapper', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: `
     <section class="ngx-import-mapper" data-testid="import-mapper">
@@ -9310,8 +9197,8 @@ class ImportPreviewComponent {
             }),
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportPreviewComponent, isStandalone: true, selector: "ngx-import-preview", inputs: { config: "config", plan: "plan", rows: "rows", lookups: "lookups", rules: "rules", language: "language" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportPreviewComponent, isStandalone: true, selector: "ngx-import-preview", inputs: { config: "config", plan: "plan", rows: "rows", lookups: "lookups", rules: "rules", language: "language" }, usesOnChanges: true, ngImport: i0, template: `
     <section class="ngx-import-preview" data-testid="import-preview">
       <h4 class="ngx-import-preview__heading">
         {{ ui.text('importPreviewHeading', language, { count: rows.length }) }}
@@ -9349,7 +9236,7 @@ class ImportPreviewComponent {
     </section>
   `, isInline: true, styles: [".ngx-import-preview__heading{margin:0 0 8px;font-size:var(--ngx-font-size, 14px)}.ngx-import-preview__scroll{overflow-x:auto;border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px)}.ngx-import-preview__table{width:100%;border-collapse:collapse;white-space:nowrap}.ngx-import-preview__table th,.ngx-import-preview__table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-import-preview__table thead th{background:var(--ngx-color-surface-alt, #f9fafb);color:var(--ngx-color-muted, #6b7280)}.ngx-import-preview__cell--error{color:var(--ngx-color-error, #b91c1c);background:var(--ngx-color-error-soft, #fef2f2)}.ngx-import-preview__row--rejected td{opacity:.65}.ngx-import-preview__reason td{white-space:normal;color:var(--ngx-color-error, #b91c1c);background:var(--ngx-color-error-soft, #fef2f2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `
     <section class="ngx-import-preview" data-testid="import-preview">
@@ -9458,8 +9345,8 @@ class ImportTemplateComponent {
     selectAll(selected) {
         this.choices.update(choices => choices.map(choice => ({ ...choice, selected })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportTemplateComponent, isStandalone: true, selector: "ngx-import-template", inputs: { config: "config", language: "language" }, outputs: { download: "download" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportTemplateComponent, isStandalone: true, selector: "ngx-import-template", inputs: { config: "config", language: "language" }, outputs: { download: "download" }, usesOnChanges: true, ngImport: i0, template: `
     <section class="ngx-import-template" data-testid="import-template">
       <h4 class="ngx-import-template__heading">{{ ui.text('importTemplateHeading', language) }}</h4>
       <p class="ngx-import-template__explain">{{ ui.text('importTemplateExplain', language) }}</p>
@@ -9510,7 +9397,7 @@ class ImportTemplateComponent {
     </section>
   `, isInline: true, styles: [".ngx-import-template{padding:14px;border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-import-template__heading{margin:0 0 4px;font-size:var(--ngx-font-size, 14px)}.ngx-import-template__explain{margin:0 0 10px;color:var(--ngx-color-muted, #6b7280)}.ngx-import-template__bulk{display:flex;gap:8px;margin-bottom:10px}.ngx-import-template__list{list-style:none;margin:0 0 10px;padding:0;max-height:240px;overflow-y:auto;display:grid;gap:4px}.ngx-import-template__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}.ngx-import-template__item label{display:flex;align-items:center;gap:6px;cursor:pointer}.ngx-import-template__note{color:var(--ngx-color-muted, #6b7280);font-size:12px}.ngx-import-template__unsupported{margin:0 0 10px;color:var(--ngx-color-muted, #6b7280)}.ngx-import-template button{padding:6px 12px;border:1px solid var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff);color:inherit;font:inherit;cursor:pointer}.ngx-import-template button:disabled{opacity:.55;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-template', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `
     <section class="ngx-import-template" data-testid="import-template">
@@ -9796,8 +9683,8 @@ class EntityImportComponent {
         this.problem.set(null);
         this.step.set('upload');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityImportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityImportComponent, isStandalone: true, selector: "ngx-entity-import", inputs: { config: "config", rules: "rules", lookups: "lookups", language: "language", templateFormat: "templateFormat" }, outputs: { importComplete: "importComplete", templateReady: "templateReady" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityImportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityImportComponent, isStandalone: true, selector: "ngx-entity-import", inputs: { config: "config", rules: "rules", lookups: "lookups", language: "language", templateFormat: "templateFormat" }, outputs: { importComplete: "importComplete", templateReady: "templateReady" }, ngImport: i0, template: `
     <div class="ngx-import" data-testid="entity-import">
       <ol class="ngx-import__steps" data-testid="import-steps">
         @for (name of steps; track name) {
@@ -9915,7 +9802,7 @@ class EntityImportComponent {
     </div>
   `, isInline: true, styles: [".ngx-import{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);color:var(--ngx-color-text, #1f2937);font-size:var(--ngx-font-size, 14px)}.ngx-import__steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}.ngx-import__step{padding:4px 12px;border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);color:var(--ngx-color-muted, #6b7280);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-import__step--current{color:var(--ngx-color-accent, #4f46e5);border-color:var(--ngx-color-accent, #4f46e5);background:var(--ngx-color-accent-soft, #e0e7ff);font-weight:600}.ngx-import__problem{margin:0;padding:10px 12px;border:1px solid var(--ngx-color-border, #fecaca);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-error-soft, #fef2f2);color:var(--ngx-color-error, #b91c1c);overflow-wrap:anywhere}.ngx-import__file{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px dashed var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff)}.ngx-import button{align-self:flex-start;padding:8px 16px;border:1px solid var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff);color:inherit;font:inherit;cursor:pointer}.ngx-import button:hover:not(:disabled){border-color:var(--ngx-color-accent, #4f46e5);background:var(--ngx-color-accent-soft, #e0e7ff)}.ngx-import button:disabled{opacity:.55;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ImportTemplateComponent, selector: "ngx-import-template", inputs: ["config", "language"], outputs: ["download"] }, { kind: "component", type: ImportMapperComponent, selector: "ngx-import-mapper", inputs: ["config", "headers", "plan", "language"], outputs: ["planChange"] }, { kind: "component", type: ImportPreviewComponent, selector: "ngx-import-preview", inputs: ["config", "plan", "rows", "lookups", "rules", "language"] }, { kind: "component", type: ImportErrorsComponent, selector: "ngx-import-errors", inputs: ["errors", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityImportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityImportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-entity-import', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ImportTemplateComponent,