ngx-dynamic-entity 1.14.0 → 2.0.1

package/fesm2022/ngx-dynamic-entity.mjs

@@ -1,8 +1,8 @@
 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, FormArray, FormGroup, FormsModule } from '@angular/forms';
-import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, getOptionStoredValue, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, normalizeConfigOptions, migrateRecord, getTabData, getValueByPath, setTabData, setValueByPath, normalizeArrayStructures, ambiguousFieldIds, parseFieldRef, toRefToken, collectFieldScopes, fieldRefFor, refOf, getTabPath, applyAutoPatch, applyPatchOnTrue, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } from '@dynamic-entity/core';
+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';
 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';
@@ -443,7 +443,7 @@ function fieldDomId(field, instance, suffix = '') {
  * is read first. `null` rather than an empty string when there is nothing to describe — an
  * empty `aria-describedby` is a dangling reference, not an absent one.
  *
- * Shared rather than written into each of the nineteen field components, because the rule is
+ * Shared rather than written into each of the twenty-one field components, because the rule is
  * the same everywhere and getting it wrong is invisible until somebody uses a screen reader.
  */
 function fieldDescribedBy(domId, parts) {
@@ -1100,17 +1100,29 @@ class MarkdownFieldComponent {
      * A renderer is consumer code and may throw on input it does not like. Letting that
      * escape would take down the whole form over one malformed field, so it falls back to the
      * source text — which is what the field would have shown with no renderer at all.
+     *
+     * Memoised on the source, because this is called from the template: without it the
+     * consumer's markdown parser ran on every change-detection pass, for every markdown field
+     * on screen, over the whole document — which on a form holding a few long ones is a parse
+     * per keystroke *elsewhere* in the form. The cache is keyed by the exact source string,
+     * so a value that comes back to something already rendered is free too.
      */
+    cached;
     rendered() {
         const source = this.control?.value;
         if (!this.render || typeof source !== 'string' || source === '')
             return null;
+        if (this.cached?.source === source)
+            return this.cached.html;
+        let html;
         try {
-            return this.render(source);
+            html = this.render(source);
         }
         catch {
-            return null;
+            html = null;
         }
+        this.cached = { source, html };
+        return html;
     }
     /**
      * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
@@ -1785,7 +1797,11 @@ class EmailFieldComponent {
         }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
-          <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
+          @if (control.value) {
+            <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value }}</a>
+          } @else {
+            —
+          }
         </span>
       } @else {
         <input
@@ -1848,7 +1864,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
-          <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
+          @if (control.value) {
+            <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value }}</a>
+          } @else {
+            —
+          }
         </span>
       } @else {
         <input
@@ -3171,7 +3191,7 @@ class MonthYearFieldComponent {
           >
             <option value="">{{ ui.text('month', language) }}</option>
             @for (m of months; track m.value) {
-              <option [value]="m.value">{{ m.label }}</option>
+              <option [value]="m.value" [selected]="m.value === selectedMonth">{{ m.label }}</option>
             }
           </select>
           <select
@@ -3186,7 +3206,7 @@ class MonthYearFieldComponent {
           >
             <option value="">{{ ui.text('year', language) }}</option>
             @for (y of years; track y) {
-              <option [value]="y">{{ y }}</option>
+              <option [value]="y" [selected]="y.toString() === selectedYear">{{ y }}</option>
             }
           </select>
         </div>
@@ -3257,7 +3277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           >
             <option value="">{{ ui.text('month', language) }}</option>
             @for (m of months; track m.value) {
-              <option [value]="m.value">{{ m.label }}</option>
+              <option [value]="m.value" [selected]="m.value === selectedMonth">{{ m.label }}</option>
             }
           </select>
           <select
@@ -3272,7 +3292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           >
             <option value="">{{ ui.text('year', language) }}</option>
             @for (y of years; track y) {
-              <option [value]="y">{{ y }}</option>
+              <option [value]="y" [selected]="y.toString() === selectedYear">{{ y }}</option>
             }
           </select>
         </div>
@@ -3578,8 +3598,7 @@ class DropdownFieldComponent {
     options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     compareFn = (o1, o2) => valuesMatch(o1, o2, this.language);
     isObjectVal(option) {
-        const val = getOptionStoredValue(option);
-        return typeof val === 'object' && val !== null;
+        return typeof option === 'object' && option !== null;
     }
     get label() {
         return resolveLabel(this.field?.label, this.language);
@@ -3587,8 +3606,17 @@ class DropdownFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
+    /**
+     * 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.
+     */
     getOptStoredVal(option) {
-        return getOptionStoredValue(option);
+        return option;
     }
     getOptLabel(option) {
         return resolveOptionLabel(option, this.language);
@@ -3601,7 +3629,7 @@ class DropdownFieldComponent {
     getLabel(value) {
         if (value == null || value === '')
             return '—';
-        const option = this.options().find(o => valuesMatch(getOptionStoredValue(o), value, this.language));
+        const option = this.options().find(o => valuesMatch(o, value, this.language));
         if (option)
             return this.getOptLabel(option);
         const cached = this.lookups.labelFor(this.field?.listName, value, this.language);
@@ -3798,8 +3826,14 @@ class RadioFieldComponent {
     maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
     messages = inject(ValidationMessagesService);
     lookups = inject(LookupRegistryService);
+    cdr = inject(ChangeDetectorRef);
     _field;
     _language = 'en';
+    _control;
+    _controlSub;
+    ngOnDestroy() {
+        this._controlSub?.unsubscribe();
+    }
     /** Setter-based so options resolve however the input is set — see `refreshChoiceOptions`. */
     set field(value) {
         this._field = value;
@@ -3815,16 +3849,39 @@ class RadioFieldComponent {
     get language() {
         return this._language;
     }
-    control;
+    set control(value) {
+        this._control = value;
+        this._controlSub?.unsubscribe();
+        this._controlSub = this._control?.valueChanges?.subscribe(() => {
+            this.cdr.markForCheck();
+        });
+    }
+    get control() {
+        return this._control;
+    }
     readonly = false;
     masked = false;
     /** Inline `options`, or the field's named list resolved through the registry (§6.3). */
     options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    onSelect(option) {
+        this.control?.setValue(option);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
+    /**
+     * 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.
+     */
     getOptStoredVal(option) {
-        return getOptionStoredValue(option);
+        return option;
     }
     /**
      * Stable DOM id for one radio, so the <label for> association works.
@@ -3852,6 +3909,10 @@ class RadioFieldComponent {
     getOptLabel(option) {
         return resolveOptionLabel(option, this.language);
     }
+    /** Whether the given option matches the control's current value. */
+    isChecked(option) {
+        return valuesMatch(this.control?.value, option, this.language);
+    }
     /** Read-only display — synchronous, per §6.2. See `DropdownFieldComponent.getLabel`. */
     getSelectedLabel() {
         const value = this.control?.value;
@@ -3859,7 +3920,7 @@ class RadioFieldComponent {
         // `resolveLabel(null)` and rendered as blank — dropdown and multiSelect both show an em dash.
         if (value === null || value === undefined || value === '')
             return '—';
-        const selected = this.options().find(o => valuesMatch(getOptionStoredValue(o), value, this.language));
+        const selected = this.options().find(o => valuesMatch(o, value, this.language));
         if (selected)
             return this.getOptLabel(selected);
         const cached = this.lookups.labelFor(this.field?.listName, value, this.language);
@@ -3930,10 +3991,12 @@ class RadioFieldComponent {
                   [attr.data-testid]="'field-' + field.id + '-option-' + optionSlug(option)"
                   type="radio"
                   class="ngx-field__radio-input"
-                  [formControl]="$any(control)"
+                  [name]="domId()"
                   [attr.aria-describedby]="describedBy()"
                   [value]="getOptStoredVal(option)"
+                  [checked]="isChecked(option)"
                   [attr.disabled]="field.disabled ? true : null"
+                  (change)="onSelect(option)"
                 />
                 <span class="ngx-field__radio-label">{{ getOptLabel(option) }}</span>
               </label>
@@ -3947,7 +4010,7 @@ class RadioFieldComponent {
         }
       </fieldset>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: [{
             type: Component,
@@ -3999,10 +4062,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                   [attr.data-testid]="'field-' + field.id + '-option-' + optionSlug(option)"
                   type="radio"
                   class="ngx-field__radio-input"
-                  [formControl]="$any(control)"
+                  [name]="domId()"
                   [attr.aria-describedby]="describedBy()"
                   [value]="getOptStoredVal(option)"
+                  [checked]="isChecked(option)"
                   [attr.disabled]="field.disabled ? true : null"
+                  (change)="onSelect(option)"
                 />
                 <span class="ngx-field__radio-label">{{ getOptLabel(option) }}</span>
               </label>
@@ -4067,14 +4132,22 @@ class MultiSelectFieldComponent {
     options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     compareFn = (o1, o2) => valuesMatch(o1, o2, this.language);
     isObjectVal(option) {
-        const val = getOptionStoredValue(option);
-        return typeof val === 'object' && val !== null;
+        return typeof option === 'object' && option !== null;
     }
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
+    /**
+     * 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.
+     */
     getOptStoredVal(option) {
-        return getOptionStoredValue(option);
+        return option;
     }
     getOptLabel(option) {
         return resolveOptionLabel(option, this.language);
@@ -4085,7 +4158,7 @@ class MultiSelectFieldComponent {
             return '—';
         return values
             .map(v => {
-            const opt = this.options().find(o => valuesMatch(getOptionStoredValue(o), v, this.language));
+            const opt = this.options().find(o => valuesMatch(o, v, this.language));
             if (opt)
                 return this.getOptLabel(opt);
             const cached = this.lookups.labelFor(this.field?.listName, v, this.language);
@@ -4877,7 +4950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * **Tree-shaking contract:** this service holds *no* static imports of field components.
  * Nothing is bundled until something registers it, which is what makes the built-ins
- * opt-in. Register them with `provideBuiltInFieldTypes()` (all 19 keys) or a narrower
+ * opt-in. Register them with `provideBuiltInFieldTypes()` (all 21 keys) or a narrower
  * subset via `provideFieldTypes({ ... })` — see `providers/provide-field-types.ts`.
  *
  * Resolution order: consumer token registry → runtime registrations → nothing.
@@ -5084,16 +5157,11 @@ class DynamicFieldComponent {
         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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldComponent, decorators: [{
             type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    selector: 'ngx-dynamic-field',
-                    standalone: true,
-                    template: `<ng-container #fieldHost></ng-container>`,
-                }]
+            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: [{
                 type: Input
             }], control: [{
@@ -5286,8 +5354,20 @@ class ValidatorRegistryService {
             fnList.push(Validators.minLength(config.minLength));
         if (config.maxLength !== undefined)
             fnList.push(Validators.maxLength(config.maxLength));
-        if (config.pattern)
-            fnList.push(Validators.pattern(config.pattern));
+        if (config.pattern) {
+            // `Validators.pattern` compiles the string, so an unparseable one threw here — during
+            // control construction, which takes the whole form down rather than one field's format
+            // check. `validateConfig` reports it as an error; at runtime the field degrades to no
+            // pattern validation, which is exactly what the server-side import path already does.
+            try {
+                fnList.push(Validators.pattern(config.pattern));
+            }
+            catch (err) {
+                this.warnOnce(`pattern:${config.pattern}`, `The pattern "${config.pattern}" is not a valid regular expression ` +
+                    `(${err instanceof Error ? err.message : String(err)}), so no format check is ` +
+                    `applied to this field. Run "dynamic-entity validate" over the config to find it.`);
+            }
+        }
         if (config.email)
             fnList.push(Validators.email);
         // Named validators from the consumer registry. This branch previously hardcoded the
@@ -5298,6 +5378,8 @@ class ValidatorRegistryService {
             const fn = this.resolve(key);
             if (fn)
                 fnList.push(fn);
+            else
+                this.warnUnresolved('custom', key);
         }
         return fnList;
     }
@@ -5319,9 +5401,35 @@ class ValidatorRegistryService {
             const fn = this.asyncRegistry.get(key);
             if (fn)
                 out.push(fn);
+            else
+                this.warnUnresolved('customAsync', key);
         }
         return out;
     }
+    /**
+     * 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.
+     *
+     * 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
+     * same check, and it fails CI rather than a console.
+     */
+    warnUnresolved(kind, key) {
+        this.warnOnce(`${kind}:${key}`, `No validator named "${key}" is registered, so validators.${kind} drops it and it never ` +
+            `runs. Register it with provideNgxDynamicEntity({ ${kind === 'customAsync' ? 'asyncValidators' : 'validators'}: { '${key}': ... } }).`);
+    }
+    /** Per service instance, which is per injector — so a test gets a clean slate. */
+    warned = new Set();
+    warnOnce(id, message) {
+        if (!isDevMode() || this.warned.has(id))
+            return;
+        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' });
 }
@@ -6159,7 +6267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * `FieldRegistryService` imports no components. Whatever you register here is what gets
  * bundled, so an app that only uses text/number/dropdown pays for three components and
- * their imports, not nineteen.
+ * their imports, not twenty-one.
  *
  * ```ts
  * // Everything (convenient; bundles all built-ins):
@@ -6203,7 +6311,7 @@ function provideFieldTypes(types) {
         { provide: FIELD_TYPE_SETS, useValue: types, multi: true },
     ]);
 }
-/** Register all 19 built-in field type keys. Convenience for apps that use most of them. */
+/** Register all 21 built-in field type keys. Convenience for apps that use most of them. */
 function provideBuiltInFieldTypes() {
     return provideFieldTypes(builtInFieldTypes());
 }
@@ -6232,14 +6340,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         }] });
 
 /**
- * RulesEvaluationService — evaluates dynamic form rules against active reactive form state.
+ * 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 —
+ * 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.
  */
 class RulesEvaluationService {
     /**
      * Evaluate rules against form values and optional original baseline values.
      */
-    evaluate(rules, values, originalValues) {
-        return evaluateFormRules(rules, values, originalValues);
+    evaluate(rules, values, originalValues, options) {
+        return evaluateFormRules(rules, values, originalValues, options);
     }
     /**
      * Filter rules pertinent to a single tab.
@@ -6247,6 +6365,89 @@ class RulesEvaluationService {
     filterForTab(rules, tabId, config) {
         return filterRulesForTab(rules, tabId, config);
     }
+    /**
+     * Whether a field renders, under the precedence documented on `RuleEvaluationResult`.
+     *
+     * An explicit hide beats everything. A show beats static hiding — `visibility: false`, or a
+     * `showWhen` that does not currently hold — because a rule that could only hide what the
+     * config already hides would have nothing to say, and `{ visibility: true }` was a
+     * documented no-op until it did. Otherwise the config's own visibility decides.
+     */
+    isFieldVisible(result, field, names, values) {
+        const sets = this.nameSets(result);
+        if (names.some(name => sets.hidden.has(name)))
+            return false;
+        if (names.some(name => sets.shown.has(name)))
+            return true;
+        return evaluateFieldVisibility(field, values);
+    }
+    /** The same precedence for a tab. */
+    isTabVisible(result, tab) {
+        if (result.hiddenTabs.includes(tab.id))
+            return false;
+        return tab.visibility !== false || result.shownTabs.includes(tab.id);
+    }
+    /**
+     * Keep a hidden field's control out of form validity.
+     *
+     * A field hidden by a rule or a `showWhen` is filtered out of the render, but its
+     * validators stay attached — so a hidden *required* field holds `form.invalid` true
+     * forever, permanently disabling Save with nothing on screen to explain why.
+     *
+     * Disabling is the fix rather than stripping validators: Angular excludes disabled controls
+     * from validity, and the field's own validators survive intact for when it comes back.
+     * Values are untouched — a disabled control still carries its value, so rule evaluation and
+     * the emitted record see exactly what they saw before. That also keeps this from feeding
+     * back on itself: hiding a field cannot change the values the rules are evaluated over.
+     *
+     * The predicate is `isFieldVisible`, the same one the render filter uses, so what is on
+     * screen and what counts toward validity cannot drift apart.
+     *
+     * Entries must arrive parent-first, which is what `collectFieldScopes` yields: a container's
+     * children are skipped once the container itself is hidden, because Angular's `disable()`
+     * cascades to descendants and a child's `enable()` walks back up recalculating ancestors.
+     * Toggling a child inside a hidden group would fight its parent.
+     */
+    syncHiddenFieldState(entries, ctx) {
+        const hiddenContainers = [];
+        for (const entry of entries) {
+            const field = entry.field;
+            if (!field?.id)
+                continue;
+            const address = ctx.addressOf(field);
+            if (hiddenContainers.some(prefix => address.startsWith(`${prefix}.`)))
+                continue;
+            const hidden = !this.isFieldVisible(ctx.result, field, ctx.namesOf(field), ctx.values);
+            if (hidden && (field.type === 'group' || field.type === 'array'))
+                hiddenContainers.push(address);
+            const ctrl = ctx.controlFor(entry);
+            if (!ctrl)
+                continue;
+            if (hidden) {
+                if (ctrl.enabled)
+                    ctrl.disable({ emitEvent: false });
+            }
+            else if (ctrl.disabled && !field.disabled) {
+                ctrl.enable({ emitEvent: false });
+            }
+        }
+    }
+    /**
+     * The hidden and shown names as sets, memoised against the result they came from.
+     *
+     * `isFieldVisible` runs once per field per change-detection pass; building two sets from
+     * two arrays each time turns a rule result into allocation proportional to the form. A
+     * `WeakMap` keyed by the result means it is built once per evaluation and collected with it.
+     */
+    nameSets(result) {
+        let sets = this.nameSetCache.get(result);
+        if (!sets) {
+            sets = { hidden: new Set(result.hiddenFields), shown: new Set(result.shownFields) };
+            this.nameSetCache.set(result, sets);
+        }
+        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' });
 }
@@ -6318,6 +6519,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     args: [CONFIG_SOURCE]
                 }] }] });
 
+/**
+ * FormStructureService — config ⇄ `FormGroup`, and nothing else.
+ *
+ * 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.
+ *
+ * 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
+ * testable without a component or a TestBed.
+ *
+ * Provided at the component, not the root: `FormBuilder` and the validator registry are the
+ * only things injected, but keeping the service per form leaves room for that to change
+ * without turning into shared mutable state.
+ */
+class FormStructureService {
+    fb = inject(FormBuilder);
+    validatorRegistry = inject(ValidatorRegistryService);
+    /**
+     * Build the control tree for a config.
+     *
+     * The tree mirrors the record's shape exactly: a tab opens a `FormGroup` under its id, a
+     * `flatData` tab merges into its parent's, and a `group` field opens one for its children.
+     * That correspondence is what lets a `[path]` ref resolve through `form.get()` and name
+     * exactly one control — see `getControl`.
+     */
+    buildForm(config) {
+        const group = {};
+        const buildTabControls = (tabs, parentGroup) => {
+            for (const tab of tabs) {
+                if (tab.flatData) {
+                    for (const field of tab.fields || []) {
+                        this.buildFieldControl(field, parentGroup);
+                    }
+                    if (tab.children)
+                        buildTabControls(tab.children, parentGroup);
+                }
+                else {
+                    const tabGroup = {};
+                    for (const field of tab.fields || []) {
+                        this.buildFieldControl(field, tabGroup);
+                    }
+                    if (tab.children)
+                        buildTabControls(tab.children, tabGroup);
+                    parentGroup[tab.id] = this.fb.group(tabGroup);
+                }
+            }
+        };
+        buildTabControls(config.tabs || [], group);
+        return this.fb.group(group);
+    }
+    /** One field's control: a nested group, an empty array, or a leaf carrying its validators. */
+    buildFieldControl(field, group) {
+        if (field.type === 'group') {
+            const subGroup = {};
+            for (const child of field.children || []) {
+                this.buildFieldControl(child, subGroup);
+            }
+            group[field.id] = this.fb.group(subGroup);
+        }
+        else if (field.type === 'array') {
+            group[field.id] = this.fb.array([]);
+        }
+        else {
+            const validators = this.validatorRegistry.resolveFromConfig(field.validators);
+            const asyncValidators = this.validatorRegistry.resolveAsyncFromConfig(field.validators);
+            group[field.id] = this.fb.control({ value: field.defaultValue ?? null, disabled: field.disabled ?? false }, validators, asyncValidators);
+        }
+    }
+    /** One row of an `array` field: a FormGroup when the field declares columns, else a bare control. */
+    buildArrayRow(field, item) {
+        if (!field?.children?.length)
+            return this.fb.control(item);
+        const rowGroup = {};
+        for (const child of field.children) {
+            this.buildFieldControl(child, rowGroup);
+        }
+        const group = this.fb.group(rowGroup);
+        if (item && typeof item === 'object')
+            group.patchValue(item);
+        return group;
+    }
+    /** The `FormGroup` a tab's fields live in, honouring `flatData`. */
+    getTabGroup(form, config, tabId) {
+        if (!form)
+            return null;
+        const path = getTabPath(config?.tabs, tabId);
+        if (!path || path.length === 0)
+            return form;
+        let curr = form;
+        for (const p of path) {
+            if (!curr || !(curr instanceof FormGroup))
+                return null;
+            curr = curr.get(p);
+        }
+        return curr instanceof FormGroup ? curr : null;
+    }
+    /**
+     * Find a control by reference: a bracketed path, or a bare field id.
+     *
+     * A bracketed path names exactly one control, because the tree nests exactly as the path
+     * does — so `form.get('work.address.city')` walks straight to it. A bare id is what every
+     * config written before paths existed uses: it is looked for on `currentTabId` first, then
+     * at the root, then by a recursive search whose result is whichever the walk reaches first.
+     * That last branch is the ambiguity refs exist to remove, and callers that can name a path
+     * should.
+     */
+    getControl(form, config, fieldId, currentTabId) {
+        if (!form)
+            return null;
+        const parsed = parseFieldRef(fieldId);
+        if (parsed.kind === 'ref')
+            return form.get(parsed.value);
+        if (currentTabId) {
+            const tabGrp = this.getTabGroup(form, config, currentTabId);
+            const ctrl = tabGrp?.get(fieldId);
+            if (ctrl)
+                return ctrl;
+        }
+        const rootCtrl = form.get(fieldId);
+        if (rootCtrl)
+            return rootCtrl;
+        const findInGroup = (group) => {
+            for (const key of Object.keys(group.controls)) {
+                const c = group.controls[key];
+                if (key === fieldId)
+                    return c;
+                if (c instanceof FormGroup) {
+                    const found = findInGroup(c);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        return findInGroup(form);
+    }
+    /** Assemble the full nested record from per-tab groups, respecting flatData, refererField & arrays. */
+    extractRecord(form, config) {
+        if (!form || !config)
+            return {};
+        let record = {};
+        const walkTabs = (tabs) => {
+            for (const tab of tabs) {
+                const fieldValBag = {};
+                for (const field of tab.fields || []) {
+                    const ctrl = this.getControl(form, config, field.id, tab.id);
+                    if (ctrl)
+                        fieldValBag[field.id] = ctrl.value;
+                }
+                setTabData(record, tab.id, fieldValBag, config);
+                for (const field of tab.fields || []) {
+                    if (field.refererField) {
+                        const ctrl = this.getControl(form, config, field.id, tab.id);
+                        if (ctrl)
+                            setValueByPath(record, field.refererField, ctrl.value);
+                    }
+                }
+                if (tab.children)
+                    walkTabs(tab.children);
+            }
+        };
+        walkTabs(config.tabs || []);
+        record = normalizeArrayStructures(record, config);
+        return record;
+    }
+    /**
+     * Write a record into the control tree.
+     *
+     * Returns the top-level keys that named a known field and were *not* consumed, so the
+     * caller can say so — see `DynamicFormComponent.warnUnconsumedInitialData`. Reporting
+     * rather than logging keeps the "warn once per form" bookkeeping with the form, and keeps
+     * this service free of console output.
+     */
+    patchForm(form, config, data, fieldsById) {
+        if (!data || !form || !config)
+            return [];
+        const patchedFieldIds = new Set();
+        const walkTabs = (tabs) => {
+            for (const tab of tabs) {
+                const tabData = getTabData(tab.id, data, config);
+                for (const field of tab.fields || []) {
+                    let val = tabData && typeof tabData === 'object' ? tabData[field.id] : undefined;
+                    if (field.refererField) {
+                        const refVal = getValueByPath(data, field.refererField);
+                        if (refVal !== undefined)
+                            val = refVal;
+                    }
+                    if (val === undefined)
+                        continue;
+                    const ctrl = this.getControl(form, config, field.id, tab.id);
+                    if (!ctrl)
+                        continue;
+                    if (ctrl instanceof FormArray && Array.isArray(val)) {
+                        ctrl.clear();
+                        for (const item of val) {
+                            ctrl.push(this.buildArrayRow(fieldsById.get(field.id), item));
+                        }
+                    }
+                    else {
+                        ctrl.patchValue(val, { emitEvent: false });
+                    }
+                    patchedFieldIds.add(field.id);
+                }
+                if (tab.children)
+                    walkTabs(tab.children);
+            }
+        };
+        walkTabs(config.tabs || []);
+        return this.unconsumedKeys(config, data, fieldsById, patchedFieldIds);
+    }
+    /**
+     * Top-level keys that name a field but reached no control.
+     *
+     * A record is nested by tab id (`{ tabId: { fieldId: value } }`) unless the tab sets
+     * `flatData: true`. Handing a flat record to a nested tab finds nothing, so the fields stay
+     * empty — with no error and no clue.
+     *
+     * Only keys matching a known field id count: anything else is the consumer's own record
+     * metadata (ids, timestamps, `_configVersion`) and is not our business.
+     */
+    unconsumedKeys(config, data, fieldsById, patchedFieldIds) {
+        if (!isDevMode())
+            return [];
+        const tabIds = new Set();
+        const collectTabIds = (tabs) => {
+            for (const tab of tabs) {
+                tabIds.add(tab.id);
+                if (tab.children)
+                    collectTabIds(tab.children);
+            }
+        };
+        collectTabIds(config.tabs || []);
+        return Object.keys(data).filter(key => 
+        // A tab id at the root is the nested container, not a stray field.
+        !tabIds.has(key) &&
+            data[key] !== undefined &&
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormStructureService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Grid width per field type, used only under `layout="auto"` and only where the field itself
  * names no `colSpan`.
@@ -6437,6 +6887,8 @@ class DynamicFormComponent {
     hookRegistry = inject(HookRegistryService);
     rbacService = inject(RbacService);
     rulesEvaluation = inject(RulesEvaluationService);
+    /** config ⇄ FormGroup: where a value lives. See `FormStructureService`. */
+    structure = inject(FormStructureService);
     /** Resolves what is wrong with a field, for the error summary — see `resolveForField`. */
     messages = inject(ValidationMessagesService);
     entityRefSelection = inject(EntityRefSelectionService);
@@ -6475,12 +6927,29 @@ class DynamicFormComponent {
             // invalid form is what produces the error summary. Guarding here instead meant Ctrl+S
             // on an incomplete form did nothing at all — and unlike the button, a shortcut cannot
             // even look disabled.
+            // `void`, not an `await`: a `@HostListener` cannot be async without changing what
+            // Angular does with its return value, and `submit()` reports its own failures through
+            // `saveRejected`. Nothing here would have anywhere to put a rejection.
             if (!this.readonly && this.canSubmit)
-                this.submit();
+                void this.submit();
         }
     }
     // ─── Computed ─────────────────────────────────────────────────────────────
-    ruleResult = computed(() => this.rulesEvaluation.evaluate(this.rules, this.formValues(), this.baseline()), ...(ngDevMode ? [{ debugName: "ruleResult" }] : /* istanbul ignore next */ []));
+    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.
+        onProblem: message => this.warnOnce(message),
+    }), ...(ngDevMode ? [{ debugName: "ruleResult" }] : /* istanbul ignore next */ []));
+    /** Warned-about rule problems, per component instance — see `warnedAmbiguousIds`. */
+    warnedProblems = new Set();
+    warnOnce(message) {
+        if (!isDevMode() || this.warnedProblems.has(message))
+            return;
+        this.warnedProblems.add(message);
+        console.warn(`[ngx-dynamic-entity] ${message}`);
+    }
     /**
      * Critical fields whose value differs from the session baseline.
      * These drive the deferred `VALUE_CHANGED` banner — a critical edit is announced once,
@@ -6497,8 +6966,10 @@ class DynamicFormComponent {
         return this.config?.tabs || [];
     }
     get visibleTabs() {
-        const hidden = this.ruleResult().hiddenTabs;
-        return this.tabs.filter(tab => tab.visibility !== false && !hidden.includes(tab.id));
+        return this.tabs.filter(tab => this.isTabVisible(tab));
+    }
+    isTabVisible(tab) {
+        return this.rulesEvaluation.isTabVisible(this.ruleResult(), tab);
     }
     get activeTabConfig() {
         const tabId = this.activeTab();
@@ -6510,8 +6981,7 @@ class DynamicFormComponent {
         const active = this.activeTabConfig;
         if (!active?.children || active.children.length === 0)
             return [];
-        const hidden = this.ruleResult().hiddenTabs;
-        return active.children.filter(tab => tab.visibility !== false && !hidden.includes(tab.id));
+        return active.children.filter(tab => this.isTabVisible(tab));
     }
     get activeSubTabConfig() {
         const subTabs = this.visibleSubTabs;
@@ -6561,8 +7031,15 @@ class DynamicFormComponent {
             return [];
         const rawFields = active ? active.fields || [] : (this.config?.tabs || []).flatMap(t => t.fields || []);
         const currentValues = this.formValues();
-        const hiddenFields = new Set(this.ruleResult().hiddenFields);
-        return rawFields.filter(field => evaluateFieldVisibility(field, currentValues) && !this.namesField(hiddenFields, field));
+        return rawFields.filter(field => this.isFieldVisible(field, currentValues));
+    }
+    /**
+     * Whether a field renders. Precedence lives in `RulesEvaluationService`, which is also
+     * what `syncHiddenFieldState` asks — so what is on screen and what counts toward validity
+     * cannot drift apart.
+     */
+    isFieldVisible(field, values) {
+        return this.rulesEvaluation.isFieldVisible(this.ruleResult(), field, this.namesOf(field), values);
     }
     /**
      * Entity-level permissions for the current roles.
@@ -6788,19 +7265,36 @@ class DynamicFormComponent {
         if (this.invalidFieldsCache)
             return this.invalidFieldsCache;
         const out = [];
-        const collect = (tab, parentId) => {
-            for (const field of tab.fields ?? []) {
-                const control = this.getControl(field.id, tab.id);
-                if (!control || control.disabled || control.valid || control.pending)
-                    continue;
-                // The same message the field renders under itself — see `resolveForField`. Saying
-                // only *which* field is wrong leaves the user to go and look at each one; saying what
-                // is wrong with it is usually enough to fix it without leaving the summary.
-                const message = this.messages.resolveForField(control.errors, this.language, field.type);
-                out.push(parentId
-                    ? { field, message, tabId: parentId, subTabId: tab.id }
-                    : { field, message, tabId: tab.id });
+        /*
+         * Descends into `group` children rather than stopping at the container.
+         *
+         * A `FormGroup` is invalid whenever any descendant is, so reporting the container said
+         * "Contacts is invalid" and left the user to open it and hunt. The offending leaf is
+         * both the useful answer and the one `jumpToField` can actually move focus to.
+         *
+         * An `array` is reported as itself: its rows are built and destroyed at runtime, so
+         * there is no configured child to name and nothing stable to jump to.
+         */
+        const collectField = (field, tab, parentId) => {
+            const control = this.getControl(field.id, tab.id);
+            if (!control || control.disabled || control.valid || control.pending)
+                return;
+            if (field.type === 'group' && field.children?.length) {
+                for (const child of field.children)
+                    collectField(child, tab, parentId);
+                return;
             }
+            // The same message the field renders under itself — see `resolveForField`. Saying
+            // only *which* field is wrong leaves the user to go and look at each one; saying what
+            // is wrong with it is usually enough to fix it without leaving the summary.
+            const message = this.messages.resolveForField(control.errors, this.language, field.type);
+            out.push(parentId
+                ? { field, message, tabId: parentId, subTabId: tab.id }
+                : { field, message, tabId: tab.id });
+        };
+        const collect = (tab, parentId) => {
+            for (const field of tab.fields ?? [])
+                collectField(field, tab, parentId);
             for (const child of tab.children ?? [])
                 collect(child, parentId ?? tab.id);
         };
@@ -6852,16 +7346,31 @@ class DynamicFormComponent {
             el.focus();
         }, { injector: this.injector });
     }
+    /**
+     * Which tab (and sub-tab) holds a field.
+     *
+     * Descends into `group`/`array` children: this compared top-level fields only, so "jump to
+     * the first invalid field" found nothing for a nested one and silently did nothing. Only
+     * sub-tabs one level deep are named, because that is what the tab strip can select —
+     * anything deeper resolves to the ancestor it renders under.
+     */
     locateField(fieldId) {
-        for (const tab of this.tabs) {
-            if ((tab.fields ?? []).some(f => f.id === fieldId))
-                return { tabId: tab.id };
-            for (const child of tab.children ?? []) {
-                if ((child.fields ?? []).some(f => f.id === fieldId))
-                    return { tabId: tab.id, subTabId: child.id };
+        const holds = (fields) => (fields ?? []).some(f => f?.id === fieldId || holds(f?.children));
+        const search = (tabs, tabId, subTabId) => {
+            for (const tab of tabs ?? []) {
+                if (!tab?.id)
+                    continue;
+                const at = tabId ?? tab.id;
+                const sub = tabId ? (subTabId ?? tab.id) : undefined;
+                if (holds(tab.fields))
+                    return sub ? { tabId: at, subTabId: sub } : { tabId: at };
+                const found = search(tab.children, at, sub);
+                if (found)
+                    return found;
             }
-        }
-        return null;
+            return null;
+        };
+        return search(this.tabs);
     }
     // ─── criticalField locking ────────────────────────────────────────────────
     /** A critical field stays read-only until the user deliberately unlocks it. */
@@ -6921,29 +7430,9 @@ class DynamicFormComponent {
     buildForm() {
         if (!this.config)
             return;
-        const group = {};
-        const buildTabControls = (tabs, parentGroup) => {
-            for (const tab of tabs) {
-                if (tab.flatData) {
-                    for (const field of tab.fields || []) {
-                        this.buildFieldControl(field, parentGroup);
-                    }
-                    if (tab.children)
-                        buildTabControls(tab.children, parentGroup);
-                }
-                else {
-                    const tabGroup = {};
-                    for (const field of tab.fields || []) {
-                        this.buildFieldControl(field, tabGroup);
-                    }
-                    if (tab.children)
-                        buildTabControls(tab.children, tabGroup);
-                    parentGroup[tab.id] = this.fb.group(tabGroup);
-                }
-            }
-        };
-        buildTabControls(this.config.tabs || [], group);
-        this.form = this.fb.group(group);
+        this.form = this.structure.buildForm(this.config);
+        // A rebuild replaces every control, and the scope index is keyed by config identity.
+        this.scopeCache = undefined;
         this.warnAmbiguousRuleReferences();
         if (this.initialData) {
             this.patchForm(this.upgradeRecord(this.initialData));
@@ -6989,24 +7478,6 @@ class DynamicFormComponent {
             this.formChange.emit(this.extractRecord());
         });
     }
-    buildFieldControl(field, group) {
-        if (field.type === 'group') {
-            const subGroup = {};
-            for (const child of field.children || []) {
-                this.buildFieldControl(child, subGroup);
-            }
-            group[field.id] = this.fb.group(subGroup);
-        }
-        else if (field.type === 'array') {
-            group[field.id] = this.fb.array([]);
-        }
-        else {
-            const validators = this.validatorRegistry.resolveFromConfig(field.validators);
-            const asyncValidators = this.validatorRegistry.resolveAsyncFromConfig(field.validators);
-            group[field.id] = this.fb.control({ value: field.defaultValue ?? null, disabled: field.disabled ?? false }, validators, asyncValidators);
-        }
-    }
-    /** One row of an `array` field: a FormGroup when the field declares columns, else a bare control. */
     /**
      * The `FormArray` behind an `array` field, for callers that manage rows themselves —
      * the record editor's inline row drawer.
@@ -7023,16 +7494,7 @@ class DynamicFormComponent {
         return this.buildArrayRow(field, value);
     }
     buildArrayRow(field, item) {
-        if (!field?.children?.length)
-            return this.fb.control(item);
-        const rowGroup = {};
-        for (const child of field.children) {
-            this.buildFieldControl(child, rowGroup);
-        }
-        const group = this.fb.group(rowGroup);
-        if (item && typeof item === 'object')
-            group.patchValue(item);
-        return group;
+        return this.structure.buildArrayRow(field, item);
     }
     /**
      * Mark every control touched, then re-check the field components.
@@ -7065,42 +7527,11 @@ class DynamicFormComponent {
         return result.record;
     }
     patchForm(data) {
-        if (!data || !this.form)
+        if (!data || !this.form || !this.config)
             return;
         const fieldsById = new Map(this.allFields().map(f => [f.id, f]));
-        const patchedFieldIds = new Set();
-        const walkTabs = (tabs) => {
-            for (const tab of tabs) {
-                const tabData = getTabData(tab.id, data, this.config);
-                for (const field of tab.fields || []) {
-                    let val = tabData && typeof tabData === 'object' ? tabData[field.id] : undefined;
-                    if (field.refererField) {
-                        const refVal = getValueByPath(data, field.refererField);
-                        if (refVal !== undefined)
-                            val = refVal;
-                    }
-                    if (val === undefined)
-                        continue;
-                    const ctrl = this.getControl(field.id, tab.id);
-                    if (!ctrl)
-                        continue;
-                    if (ctrl instanceof FormArray && Array.isArray(val)) {
-                        ctrl.clear();
-                        for (const item of val) {
-                            ctrl.push(this.buildArrayRow(fieldsById.get(field.id), item));
-                        }
-                    }
-                    else {
-                        ctrl.patchValue(val, { emitEvent: false });
-                    }
-                    patchedFieldIds.add(field.id);
-                }
-                if (tab.children)
-                    walkTabs(tab.children);
-            }
-        };
-        walkTabs(this.config.tabs || []);
-        this.warnUnconsumedInitialData(data, fieldsById, patchedFieldIds);
+        const unconsumed = this.structure.patchForm(this.form, this.config, data, fieldsById);
+        this.warnUnconsumedInitialData(unconsumed);
     }
     /**
      * A record is nested by tab id (`{ tabId: { fieldId: value } }`) unless the tab sets
@@ -7108,34 +7539,18 @@ class DynamicFormComponent {
      * stay empty — with no error and no clue. That silent miss is the most expensive way to
      * lose an hour with this library, so name it in dev builds.
      *
-     * Only top-level keys that match a known field id are reported: anything else is assumed
-     * to be the consumer's own record metadata (ids, timestamps, `_configVersion`) and is not
-     * our business.
+     * Which keys were missed is `FormStructureService`'s answer; warning once per key per form
+     * is this component's, because it is the thing that lives as long as the form does.
      */
-    warnUnconsumedInitialData(data, fieldsById, patchedFieldIds) {
-        if (!isDevMode() || !this.config)
+    warnUnconsumedInitialData(keys) {
+        const fresh = keys.filter(key => !this.warnedUnconsumedKeys.has(key));
+        if (!fresh.length)
             return;
-        const tabIds = new Set();
-        const collectTabIds = (tabs) => {
-            for (const tab of tabs) {
-                tabIds.add(tab.id);
-                if (tab.children)
-                    collectTabIds(tab.children);
-            }
-        };
-        collectTabIds(this.config.tabs || []);
-        const unconsumed = Object.keys(data).filter(key => !tabIds.has(key) && // a tab id at the root is the nested container, not a stray field
-            data[key] !== undefined &&
-            fieldsById.has(key) &&
-            !patchedFieldIds.has(key) &&
-            !this.warnedUnconsumedKeys.has(key));
-        if (!unconsumed.length)
-            return;
-        for (const key of unconsumed)
+        for (const key of fresh)
             this.warnedUnconsumedKeys.add(key);
-        const shown = unconsumed.slice(0, 5).join(', ');
-        const more = unconsumed.length > 5 ? ` (+${unconsumed.length - 5} more)` : '';
-        const plural = unconsumed.length === 1;
+        const shown = fresh.slice(0, 5).join(', ');
+        const more = fresh.length > 5 ? ` (+${fresh.length - 5} more)` : '';
+        const plural = fresh.length === 1;
         console.warn(`[ngx-dynamic-entity] initialData has top-level ${plural ? 'key' : 'keys'} matching ` +
             `${plural ? 'a field that was' : 'fields that were'} not populated: ${shown}${more}. ` +
             `A record is nested by tab id ({ tabId: { fieldId: value } }) unless the tab sets ` +
@@ -7146,34 +7561,7 @@ class DynamicFormComponent {
     warnedUnconsumedKeys = new Set();
     /** Assemble full nested record from per-tab FormGroups, respecting flatData, refererField & arrays. */
     extractRecord() {
-        if (!this.form || !this.config)
-            return {};
-        let record = {};
-        const walkTabs = (tabs) => {
-            for (const tab of tabs) {
-                const fieldValBag = {};
-                for (const field of tab.fields || []) {
-                    const ctrl = this.getControl(field.id, tab.id);
-                    if (ctrl) {
-                        fieldValBag[field.id] = ctrl.value;
-                    }
-                }
-                setTabData(record, tab.id, fieldValBag, this.config);
-                for (const field of tab.fields || []) {
-                    if (field.refererField) {
-                        const ctrl = this.getControl(field.id, tab.id);
-                        if (ctrl) {
-                            setValueByPath(record, field.refererField, ctrl.value);
-                        }
-                    }
-                }
-                if (tab.children)
-                    walkTabs(tab.children);
-            }
-        };
-        walkTabs(this.config.tabs || []);
-        record = normalizeArrayStructures(record, this.config);
-        return record;
+        return this.structure.extractRecord(this.form, this.config);
     }
     /**
      * Warns when a rule names a field id that two scopes define.
@@ -7211,15 +7599,24 @@ class DynamicFormComponent {
                 continue;
             const id = parsed.value;
             const scopes = ambiguous.get(id);
-            if (!scopes || DynamicFormComponent.warnedAmbiguousIds.has(id))
+            if (!scopes || this.warnedAmbiguousIds.has(id))
                 continue;
-            DynamicFormComponent.warnedAmbiguousIds.add(id);
+            this.warnedAmbiguousIds.add(id);
             console.warn(`[ngx-dynamic-entity] A rule references field "${id}", which is defined in ${scopes.join(' and ')}. ` +
                 `A bare id cannot say which one is meant, so the rule will read whichever the form finds first. ` +
                 `Name it by path instead, as [${scopes[0]}.${id}].`);
         }
     }
-    static warnedAmbiguousIds = new Set();
+    /**
+     * 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.
+     */
+    warnedAmbiguousIds = new Set();
     /**
      * The value map rules and `showWhen` are evaluated against.
      *
@@ -7233,23 +7630,75 @@ class DynamicFormComponent {
      * unknown>` and needs no knowledge of refs at all — the extra keys simply resolve.
      */
     /**
-     * Whether a rule result names this field.
+     * Every name a rule may address this field by.
      *
      * A rule target is either a bare field id — how every config so far addresses a field — or
-     * a bracketed path, which is the only way to name one of two fields that share an id.
-     * Both have to match, or a rule written either way would fail to hide what it targeted.
+     * a bracketed path, which is the only way to name one of two fields that share an id. Both
+     * have to match, or a rule written either way would fail to hide what it targeted.
+     *
+     * The path comes last, and `syncHiddenFieldState` relies on that: it uses the last entry
+     * as the field's address when deciding whether a hidden container already covers it.
      */
-    namesField(names, field) {
-        if (names.has(field.id))
-            return true;
-        const ref = field.refererField ?? this.pathFor(field);
-        return ref ? names.has(toRefToken(ref)) : false;
+    namesOf(field) {
+        const path = field.refererField ?? this.pathFor(field);
+        return path ? [field.id, toRefToken(path)] : [field.id];
+    }
+    /**
+     * The field's dotted address, unbracketed.
+     *
+     * The positional path rather than an authored `refererField`: this is compared as a prefix
+     * to decide whether a hidden container already covers a field, and containment is a fact
+     * about where the field *is*. A `refererField` is a binding override — it says where the
+     * value goes, not which group renders it.
+     */
+    addressOf(field) {
+        return this.pathFor(field) ?? field.id;
     }
     /** The field's declared path, or the one its position implies when it carries none. */
     pathFor(field) {
-        const entry = collectFieldScopes(this.config).find(e => e.field === field);
+        const entry = this.scopeEntryFor(field);
         return entry ? fieldRefFor(entry.scope, field.id) : null;
     }
+    /**
+     * 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
+     * new config invalidates it without an explicit lifecycle hook to forget.
+     */
+    fieldScopes() {
+        if (this.scopeCache?.config !== this.config) {
+            const entries = collectFieldScopes(this.config);
+            this.scopeCache = {
+                config: this.config,
+                entries,
+                byField: new Map(entries.map(entry => [entry.field, entry])),
+            };
+        }
+        return this.scopeCache.entries;
+    }
+    scopeEntryFor(field) {
+        this.fieldScopes();
+        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.
+     */
+    controlForEntry(entry) {
+        return this.getControl(toRefToken(fieldRefFor(entry.scope, entry.field.id)));
+    }
     flattenFormValues() {
         const out = {};
         for (const entry of collectFieldScopes(this.config)) {
@@ -7264,18 +7713,6 @@ class DynamicFormComponent {
         }
         return out;
     }
-    getTabGroup(tabId) {
-        const path = getTabPath(this.config?.tabs, tabId);
-        if (!path || path.length === 0)
-            return this.form;
-        let curr = this.form;
-        for (const p of path) {
-            if (!curr || !(curr instanceof FormGroup))
-                return null;
-            curr = curr.get(p);
-        }
-        return curr instanceof FormGroup ? curr : null;
-    }
     // ─── autoPatch / patchOnTrue ──────────────────────────────────────────────
     /**
      * `autoPatch` — copy mapped fields out of the record the user just selected in an
@@ -7317,65 +7754,48 @@ class DynamicFormComponent {
             }
         }
     }
-    /** Prefer a control declared on the configured target tab; fall back to a top-level control. */
+    /**
+     * Prefer a control declared on the configured target tab; fall back to a top-level control.
+     *
+     * "Declared on the tab" now means anywhere under it, sub-tabs and `group` children
+     * included. It meant the tab's own top-level fields only, so an `autoPatch` mapping onto a
+     * field inside a group resolved to `null` and copied nothing, silently.
+     */
     resolveTargetControl(autoPatch, targetId) {
         const tab = findTab(this.tabs, autoPatch.targetTab);
-        const inTargetTab = (tab?.fields ?? []).some(f => f.id === targetId);
-        if (tab && !inTargetTab)
+        if (!tab)
+            return this.getControl(targetId, autoPatch.targetTab);
+        const entry = fieldsUnderTab(this.config, autoPatch.targetTab).find(e => {
+            if (!e.field?.id)
+                return false;
+            const parsed = parseFieldRef(targetId);
+            return parsed.kind === 'ref'
+                ? fieldRefFor(e.scope, e.field.id) === parsed.value
+                : e.field.id === parsed.value;
+        });
+        if (!entry)
             return null;
-        return this.getControl(targetId, autoPatch.targetTab);
+        return this.controlForEntry(entry);
     }
     // ─── Helpers ──────────────────────────────────────────────────────────────
     /**
-     * The fields the render filter operates on — a tab's own fields, at every tab depth.
-     * Deliberately not `allFields()`: `group` and `array` children are shown or hidden with
-     * their parent, and toggling a child's state independently would fight the parent's.
-     */
-    tabFields() {
-        const out = [];
-        const walk = (tabs) => {
-            for (const tab of tabs ?? []) {
-                out.push(...(tab.fields ?? []));
-                walk(tab.children);
-            }
-        };
-        walk(this.config?.tabs);
-        return out;
-    }
-    /**
-     * Keep a hidden field's control out of form validity.
+     * Keep a hidden field's control out of form validity — see
+     * `RulesEvaluationService.syncHiddenFieldState`, which owns the rule and the reasoning.
      *
-     * A field hidden by a rule or a `showWhen` condition is filtered out of the render, but
-     * its validators stay attached — so a hidden *required* field holds `form.invalid` true
-     * forever, permanently disabling Save with nothing on screen to explain why.
-     *
-     * Disabling is the fix rather than stripping validators: Angular excludes disabled
-     * controls from validity, and the field's own validators survive intact for when it
-     * comes back. Values are untouched — `flattenFormValues` and `extractRecord` both read
-     * `control.value`, which a disabled control still carries, so rule evaluation and the
-     * emitted record see exactly what they saw before. That also keeps this from feeding
-     * back on itself: hiding a field cannot change the values the rules are evaluated over.
-     *
-     * The visibility predicate is the same one `fieldsForActiveTab` filters with, so what is
-     * rendered and what counts toward validity cannot drift apart.
+     * This supplies the three things it cannot know: which fields exist and in what order
+     * (`collectFieldScopes`, parent-first), what each one is called, and which control each
+     * one addresses.
      */
     syncHiddenFieldState(values) {
         if (this.preview)
             return; // preview freezes the whole form on purpose
-        const hiddenByRule = new Set(this.ruleResult().hiddenFields);
-        for (const field of this.tabFields()) {
-            const ctrl = this.getControl(field.id);
-            if (!ctrl)
-                continue;
-            const hidden = this.namesField(hiddenByRule, field) || !evaluateFieldVisibility(field, values);
-            if (hidden) {
-                if (ctrl.enabled)
-                    ctrl.disable({ emitEvent: false });
-            }
-            else if (ctrl.disabled && !field.disabled) {
-                ctrl.enable({ emitEvent: false });
-            }
-        }
+        this.rulesEvaluation.syncHiddenFieldState(this.fieldScopes(), {
+            result: this.ruleResult(),
+            values,
+            namesOf: field => this.namesOf(field),
+            addressOf: field => this.addressOf(field),
+            controlFor: entry => this.controlForEntry(entry),
+        });
     }
     /** Every field in the config, including `group`/`array` children. */
     allFields() {
@@ -7403,51 +7823,31 @@ class DynamicFormComponent {
             return supplied;
         return this.sessionBaseline();
     }
+    /**
+     * Whether a critical field still holds what it held when the session started.
+     *
+     * The same question `VALUE_CHANGED` asks, so it is answered by the same comparator rather
+     * than by a third one. The local version compared objects through `JSON.stringify`, which
+     * is key-order sensitive — two serialisers writing the same option in a different key
+     * order made the field read as edited — and had its own idea of which values count as
+     * empty. `valuesEqual` is order-independent and treats `null` and `undefined` as the same
+     * absence; the empty-string case is kept here, because a cleared text input is not an edit.
+     */
     sameValue(a, b) {
-        if (a === b)
-            return true;
         const aEmpty = a === null || a === undefined || a === '';
         const bEmpty = b === null || b === undefined || b === '';
         if (aEmpty && bEmpty)
             return true;
-        if (typeof a === 'object' || typeof b === 'object') {
-            return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
-        }
-        return false;
+        return valuesEqual(a, b);
     }
+    /**
+     * Find a control by a bracketed path or a bare field id.
+     *
+     * Public API, so it stays on the component and delegates — see `FormStructureService`,
+     * which owns the resolution rule and is where the behaviour is documented.
+     */
     getControl(fieldId, currentTabId) {
-        if (!this.form)
-            return null;
-        // A bracketed path names exactly one control, and the form nests by tab exactly as the
-        // path does — so `form.get('work.address')` walks straight to it. Anything that names a
-        // field can therefore use a path: `showWhen` keys, `patchOnTrue` mappings and `autoPatch`
-        // targets, not only rules.
-        const parsed = parseFieldRef(fieldId);
-        if (parsed.kind === 'ref')
-            return this.form.get(parsed.value);
-        if (currentTabId) {
-            const tabGrp = this.getTabGroup(currentTabId);
-            const ctrl = tabGrp?.get(fieldId);
-            if (ctrl)
-                return ctrl;
-        }
-        const rootCtrl = this.form.get(fieldId);
-        if (rootCtrl)
-            return rootCtrl;
-        const findInGroup = (group) => {
-            for (const key of Object.keys(group.controls)) {
-                const c = group.controls[key];
-                if (key === fieldId)
-                    return c;
-                if (c instanceof FormGroup) {
-                    const found = findInGroup(c);
-                    if (found)
-                        return found;
-                }
-            }
-            return null;
-        };
-        return findInGroup(this.form);
+        return this.structure.getControl(this.form, this.config, fieldId, currentTabId);
     }
     /**
      * Move focus into the newly shown panel.
@@ -7547,11 +7947,11 @@ class DynamicFormComponent {
         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], 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--readonly .ngx-form__panel{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px var(--ngx-gap, 18px)}.ngx-form--readonly .ngx-form__field-slot{grid-column:auto}.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,.ngx-form--readonly .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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-form', standalone: true, imports: [ReactiveFormsModule, DynamicFieldComponent, NgComponentOutlet], providers: [EntityRefSelectionService], template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" [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--readonly .ngx-form__panel{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px var(--ngx-gap, 18px)}.ngx-form--readonly .ngx-form__field-slot{grid-column:auto}.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,.ngx-form--readonly .ngx-form__panel{grid-template-columns:minmax(0,1fr)}.ngx-form__field-slot{grid-column:1 / -1!important}}\n"] }]
+            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: [{
                 type: Input
             }], rules: [{