npm - ngx-dynamic-entity - Versions diffs - 1.10.0 → 1.11.0 - Mend

ngx-dynamic-entity 1.10.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/fesm2022/ngx-dynamic-entity.mjs +1364 -303
package/fesm2022/ngx-dynamic-entity.mjs.map +1 -1
package/package.json +2 -2
package/styles.css +723 -195
package/types/ngx-dynamic-entity.d.ts +262 -15

package/fesm2022/ngx-dynamic-entity.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 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, computed, HostListener, ViewChildren, Output, ElementRef, afterNextRender } 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 } 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 } from '@dynamic-entity/core';
@@ -268,6 +268,30 @@ const DEFAULT_VALIDATION_MESSAGES = {
     invalidNumber: 'Invalid number.',
     invalidSelection: 'Invalid selection.',
 };
+/**
+ * The keys a plain input can raise, most specific first.
+ *
+ * A type that cannot raise one of these is unaffected by its presence — `resolve` returns the
+ * first error actually on the control — so the shared list costs nothing and spares every
+ * field component a near-identical copy of it.
+ */
+const COMMON_ORDER = ['required', 'email', 'min', 'max', 'minlength', 'maxlength', 'pattern'];
+/**
+ * Where a field type disagrees with the common list.
+ *
+ * Only three do, and each for a reason about how the control reads rather than what it can
+ * raise: a select says "Please select an option" where an input says "This field is
+ * required"; a number that is neither required nor out of range is not "invalid", it is not a
+ * number; and a control with no text in it cannot fail a length or format rule.
+ */
+const ORDER_BY_FIELD_TYPE = {
+    dropdown: { order: [['required', 'requiredSelection']], fallback: 'invalidSelection' },
+    number: { order: ['required', 'min', 'max'], fallback: 'invalidNumber' },
+    boolean: { order: ['required', 'pattern'], fallback: 'invalid' },
+    checkbox: { order: ['required', 'pattern'], fallback: 'invalid' },
+    file: { order: ['required', 'pattern'], fallback: 'invalid' },
+    image: { order: ['required', 'pattern'], fallback: 'invalid' },
+};
 class ValidationMessagesService {
     overrides = inject(VALIDATION_MESSAGES, { optional: true }) ?? {};
     /**
@@ -292,6 +316,27 @@ class ValidationMessagesService {
         }
         return this.messageFor(fallbackKey, language, null);
     }
+    /**
+     * The message for a field, chosen by its **type** rather than by a list the caller supplies.
+     *
+     * Every field component used to pass its own copy of the key order, and the copies were
+     * near-identical — which was tolerable while the field itself was the only thing that
+     * rendered a message. It stopped being tolerable when the error summary above the form
+     * started naming what is wrong with each field: the summary has no field component to ask
+     * (the offending field is usually on a tab that is not rendered), so it would have needed a
+     * second copy of the same table, and a dropdown would have said "This field is required" in
+     * the summary and "Please select an option" under the control.
+     *
+     * One table, read from both places, is what keeps those two sentences the same sentence.
+     */
+    resolveForField(errors, language, fieldType) {
+        const { order, fallback } = this.orderFor(fieldType);
+        return this.resolve(errors, language, order, fallback);
+    }
+    /** A field type's key order. An unrecognised type — a consumer's own — gets the common list. */
+    orderFor(fieldType) {
+        return ORDER_BY_FIELD_TYPE[fieldType] ?? { order: COMMON_ORDER, fallback: 'invalid' };
+    }
     /** One message by key, honouring an override before the default. */
     messageFor(key, language, error) {
         const message = this.overrides[key] ?? DEFAULT_VALIDATION_MESSAGES[key];
@@ -342,6 +387,29 @@ function nextFieldInstanceId() {
 function fieldDomId(field, instance, suffix = '') {
     return `${field?.id ?? 'field'}-${instance}${suffix}`;
 }
+/**
+ * The `aria-describedby` a control needs, given what is rendered beside it right now.
+ *
+ * A field can show two things under its control — the author's help text and, once touched, a
+ * validation message — and a screen reader announces only what this attribute names. Three
+ * field components named the error; the other sixteen named nothing at all, so their error
+ * messages were on screen and silent. Help text would have inherited the same gap.
+ *
+ * Order matters: the hint describes the field and the error describes the attempt, so the hint
+ * 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
+ * the same everywhere and getting it wrong is invisible until somebody uses a screen reader.
+ */
+function fieldDescribedBy(domId, parts) {
+    const ids = [];
+    if (parts.hint)
+        ids.push(domId('-hint'));
+    if (parts.error)
+        ids.push(domId('-error'));
+    return ids.length ? ids.join(' ') : null;
+}
 class TextFieldComponent {
     /**
@@ -381,16 +449,18 @@ class TextFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control || !this.control.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -402,12 +472,26 @@ class TextFieldComponent {
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="domId()"
-        >{{ label }}
-        @if (field.validators?.required) {
-          <span class="ngx-field__req">*</span>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()"
+          >{{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
         }
-      </label>
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -424,7 +508,7 @@ class TextFieldComponent {
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
+          [attr.aria-describedby]="describedBy()"
         />
         @if (errorMessage) {
           <span
@@ -455,12 +539,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="domId()"
-        >{{ label }}
-        @if (field.validators?.required) {
-          <span class="ngx-field__req">*</span>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()"
+          >{{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
         }
-      </label>
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -477,7 +575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
+          [attr.aria-describedby]="describedBy()"
         />
         @if (errorMessage) {
           <span
@@ -533,18 +631,18 @@ class TextareaFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -555,7 +653,21 @@ class TextareaFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -568,12 +680,15 @@ class TextareaFieldComponent {
           class="ngx-field__input"
           [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           rows="3"
         ></textarea>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -594,7 +709,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -607,12 +736,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           class="ngx-field__input"
           [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           rows="3"
         ></textarea>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -654,6 +786,9 @@ const DEFAULT_UI_TEXT = {
     reset: 'Reset',
     saveShortcutHint: 'Shortcut: Ctrl+S',
     loading: 'Loading…',
+    // Why a save was refused — the summary above the form, and the count on each tab
+    errorSummaryTitle: '{count} field(s) need attention before this can be saved.',
+    tabErrorCount: '{count} field(s) need attention on this tab',
     // Record view — the per-tab edit flow
     editSection: 'Edit section',
     saveSection: 'Save section',
@@ -896,18 +1031,18 @@ class MarkdownFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MarkdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MarkdownFieldComponent, isStandalone: true, selector: "ngx-markdown-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, usesOnChanges: true, ngImport: i0, template: `
@@ -918,7 +1053,21 @@ class MarkdownFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
@@ -979,6 +1128,7 @@ class MarkdownFieldComponent {
               class="ngx-field__input ngx-field__input--markdown"
               [attr.data-testid]="'field-' + field.id + '-input'"
               [formControl]="$any(control)"
+              [attr.aria-describedby]="describedBy()"
               [placeholder]="placeholder"
               [attr.disabled]="field.disabled ? true : null"
               rows="6"
@@ -987,7 +1137,9 @@ class MarkdownFieldComponent {
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1008,7 +1160,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
@@ -1069,6 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               class="ngx-field__input ngx-field__input--markdown"
               [attr.data-testid]="'field-' + field.id + '-input'"
               [formControl]="$any(control)"
+              [attr.aria-describedby]="describedBy()"
               [placeholder]="placeholder"
               [attr.disabled]="field.disabled ? true : null"
               rows="6"
@@ -1077,7 +1244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1118,10 +1287,18 @@ class NumberFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control || !this.control.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, ['required', 'min', 'max'], 'invalidNumber');
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -1133,12 +1310,26 @@ class NumberFieldComponent {
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">
-        {{ label }}
-        @if (field.validators?.required) {
-          <span class="ngx-field__req">*</span>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
         }
-      </label>
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1155,7 +1346,7 @@ class NumberFieldComponent {
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
+          [attr.aria-describedby]="describedBy()"
         />
         @if (errorMessage) {
           <span
@@ -1186,12 +1377,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">
-        {{ label }}
-        @if (field.validators?.required) {
-          <span class="ngx-field__req">*</span>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
         }
-      </label>
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1208,7 +1413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
+          [attr.aria-describedby]="describedBy()"
         />
         @if (errorMessage) {
           <span
@@ -1277,18 +1482,18 @@ class CurrencyFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CurrencyFieldComponent, isStandalone: true, selector: "ngx-currency-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -1299,7 +1504,21 @@ class CurrencyFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1318,12 +1537,15 @@ class CurrencyFieldComponent {
             type="number"
             step="0.01"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [placeholder]="placeholder || '0.00'"
             [attr.disabled]="field.disabled ? true : null"
           />
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1344,7 +1566,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1363,12 +1599,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             type="number"
             step="0.01"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [placeholder]="placeholder || '0.00'"
             [attr.disabled]="field.disabled ? true : null"
           />
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1416,18 +1655,18 @@ class EmailFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EmailFieldComponent, isStandalone: true, selector: "ngx-email-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -1438,7 +1677,21 @@ class EmailFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1455,6 +1708,7 @@ class EmailFieldComponent {
           type="email"
           autocomplete="email"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [placeholder]="placeholder || 'you@example.com'"
           [attr.disabled]="field.disabled ? true : null"
         />
@@ -1463,7 +1717,9 @@ class EmailFieldComponent {
                required" and "Enter a valid email address" itself, so a host configuring
                validationMessages was overridden by markup it could not reach. The service
                defaults say the same thing. -->
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1484,7 +1740,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1501,6 +1771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           type="email"
           autocomplete="email"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [placeholder]="placeholder || 'you@example.com'"
           [attr.disabled]="field.disabled ? true : null"
         />
@@ -1509,7 +1780,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                required" and "Enter a valid email address" itself, so a host configuring
                validationMessages was overridden by markup it could not reach. The service
                defaults say the same thing. -->
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1563,18 +1836,18 @@ class PasswordFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PasswordFieldComponent, isStandalone: true, selector: "ngx-password-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -1585,7 +1858,21 @@ class PasswordFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1601,6 +1888,7 @@ class PasswordFieldComponent {
             [type]="visible() ? 'text' : 'password'"
             autocomplete="current-password"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [placeholder]="placeholder || '••••••••'"
             [attr.disabled]="field.disabled ? true : null"
           />
@@ -1614,7 +1902,9 @@ class PasswordFieldComponent {
           </button>
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1635,7 +1925,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -1651,6 +1955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             [type]="visible() ? 'text' : 'password'"
             autocomplete="current-password"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [placeholder]="placeholder || '••••••••'"
             [attr.disabled]="field.disabled ? true : null"
           />
@@ -1664,7 +1969,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           </button>
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -1710,10 +2017,18 @@ class CheckboxFieldComponent {
      * It rendered no error element at all, so a required checkbox left unticked told the user
      * nothing — and `validationMessages` could not reach a field that never displayed one.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -1742,14 +2057,31 @@ class CheckboxFieldComponent {
             [attr.data-testid]="'field-' + field.id + '-input'"
             type="checkbox"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [attr.disabled]="field.disabled ? true : null"
           />
           {{ label }}
+          @if (hint) {
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
         </label>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
         }
       }
     </div>
@@ -1788,14 +2120,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             [attr.data-testid]="'field-' + field.id + '-input'"
             type="checkbox"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [attr.disabled]="field.disabled ? true : null"
           />
           {{ label }}
+          @if (hint) {
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
         </label>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
         }
       }
     </div>
@@ -1819,6 +2168,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * toggle switch with Yes/No labels for clearer binary state communication.
  */
 class BooleanFieldComponent {
+    /**
+     * Unique to this component instance: an `array` renders the same field once per row, and a
+     * DOM id may not repeat. See `field-dom-id.ts`.
+     */
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
+    }
     /** Library chrome, overridable via UI_TEXT. */
     ui = inject(UiTextService);
     /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
@@ -1838,10 +2195,18 @@ class BooleanFieldComponent {
      * It rendered no error element at all, so a required checkbox left unticked told the user
      * nothing — and `validationMessages` could not reach a field that never displayed one.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BooleanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: BooleanFieldComponent, isStandalone: true, selector: "ngx-boolean-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -1865,12 +2230,25 @@ class BooleanFieldComponent {
       } @else {
         <div class="ngx-field__toggle-wrap">
           <label class="ngx-field__toggle-label">{{ label }}</label>
+          @if (hint) {
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
           <label class="ngx-field__toggle-switch" [class.ngx-field__toggle-switch--checked]="control.value">
             <input
               class="ngx-field__toggle-input"
               type="checkbox"
               role="switch"
               [formControl]="$any(control)"
+              [attr.aria-describedby]="describedBy()"
               [attr.disabled]="field.disabled ? true : null"
               [attr.aria-checked]="control.value"
             />
@@ -1883,9 +2261,13 @@ class BooleanFieldComponent {
           </label>
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
         }
       }
     </div>
@@ -1919,12 +2301,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       } @else {
         <div class="ngx-field__toggle-wrap">
           <label class="ngx-field__toggle-label">{{ label }}</label>
+          @if (hint) {
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
           <label class="ngx-field__toggle-switch" [class.ngx-field__toggle-switch--checked]="control.value">
             <input
               class="ngx-field__toggle-input"
               type="checkbox"
               role="switch"
               [formControl]="$any(control)"
+              [attr.aria-describedby]="describedBy()"
               [attr.disabled]="field.disabled ? true : null"
               [attr.aria-checked]="control.value"
             />
@@ -1937,9 +2332,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           </label>
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
         }
       }
     </div>
@@ -2008,18 +2407,18 @@ class DateFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -2030,7 +2429,21 @@ class DateFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2046,10 +2459,13 @@ class DateFieldComponent {
           [attr.data-testid]="'field-' + field.id + '-input'"
           type="date"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2070,7 +2486,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2086,10 +2516,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [attr.data-testid]="'field-' + field.id + '-input'"
           type="date"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2200,18 +2633,18 @@ class DateTimeFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateTimeFieldComponent, isStandalone: true, selector: "ngx-date-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -2222,7 +2655,21 @@ class DateTimeFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2240,9 +2687,12 @@ class DateTimeFieldComponent {
           [value]="inputValue"
           (change)="onInput($any($event.target).value)"
           [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-describedby]="describedBy()"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2263,7 +2713,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2281,9 +2745,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [value]="inputValue"
           (change)="onInput($any($event.target).value)"
           [attr.disabled]="field.disabled ? true : null"
+          [attr.aria-describedby]="describedBy()"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2343,18 +2810,18 @@ class TimeFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TimeFieldComponent, isStandalone: true, selector: "ngx-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -2365,7 +2832,21 @@ class TimeFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2381,10 +2862,13 @@ class TimeFieldComponent {
           [attr.data-testid]="'field-' + field.id + '-input'"
           type="time"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2405,7 +2889,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2421,10 +2919,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [attr.data-testid]="'field-' + field.id + '-input'"
           type="time"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2518,18 +3019,18 @@ class MonthYearFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MonthYearFieldComponent, isStandalone: true, selector: "ngx-month-year-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -2546,7 +3047,21 @@ class MonthYearFieldComponent {
         clicked. Each select then carries its own name below, because "Billing Cycle" alone
         does not say which half of the pair the screen reader has landed on.
       -->
-      <label class="ngx-field__label" [attr.for]="domId('-month')">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId('-month')">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2565,6 +3080,7 @@ class MonthYearFieldComponent {
             [value]="selectedMonth"
             (change)="onMonthChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
+            [attr.aria-describedby]="describedBy()"
           >
             <option value="">{{ ui.text('month', language) }}</option>
             @for (m of months; track m.value) {
@@ -2579,6 +3095,7 @@ class MonthYearFieldComponent {
             [value]="selectedYear"
             (change)="onYearChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
+            [attr.aria-describedby]="describedBy()"
           >
             <option value="">{{ ui.text('year', language) }}</option>
             @for (y of years; track y) {
@@ -2587,7 +3104,9 @@ class MonthYearFieldComponent {
           </select>
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2614,7 +3133,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
         clicked. Each select then carries its own name below, because "Billing Cycle" alone
         does not say which half of the pair the screen reader has landed on.
       -->
-      <label class="ngx-field__label" [attr.for]="domId('-month')">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId('-month')">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -2633,6 +3166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             [value]="selectedMonth"
             (change)="onMonthChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
+            [attr.aria-describedby]="describedBy()"
           >
             <option value="">{{ ui.text('month', language) }}</option>
             @for (m of months; track m.value) {
@@ -2647,6 +3181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             [value]="selectedYear"
             (change)="onYearChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
+            [attr.aria-describedby]="describedBy()"
           >
             <option value="">{{ ui.text('year', language) }}</option>
             @for (y of years; track y) {
@@ -2655,7 +3190,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           </select>
         </div>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -2985,12 +3522,20 @@ class DropdownFieldComponent {
             return cached;
         return typeof value === 'object' ? resolveLabel(value, this.language) : String(value ?? '—');
     }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control || !this.control.errors || !this.control.touched)
             return '';
         // `requiredSelection` rather than `required`: "Please select an option" reads better on a
         // dropdown than "This field is required", and both stay independently overridable.
-        return this.messages.resolve(this.control.errors, this.language, [['required', 'requiredSelection']], 'invalidSelection');
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DropdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -3002,12 +3547,26 @@ class DropdownFieldComponent {
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">
-        {{ label }}
-        @if (field.validators?.required) {
-          <span class="ngx-field__req">*</span>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
         }
-      </label>
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -3025,7 +3584,7 @@ class DropdownFieldComponent {
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
+          [attr.aria-describedby]="describedBy()"
         >
           <option [value]="''">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
           @for (option of options(); track getOptLabel(option)) {
@@ -3065,12 +3624,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">
-        {{ label }}
-        @if (field.validators?.required) {
-          <span class="ngx-field__req">*</span>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
         }
-      </label>
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -3088,7 +3661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
+          [attr.aria-describedby]="describedBy()"
         >
           <option [value]="''">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
           @for (option of options(); track getOptLabel(option)) {
@@ -3213,18 +3786,18 @@ class RadioFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RadioFieldComponent, isStandalone: true, selector: "ngx-radio-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -3236,7 +3809,25 @@ class RadioFieldComponent {
       [class.ngx-field--masked]="masked"
     >
       <fieldset class="ngx-field__fieldset">
-        <legend class="ngx-field__label">{{ label }}</legend>
+        <legend class="ngx-field__label">
+          {{ label }}
+          @if (hint) {
+            <!--
+              Inside the legend rather than beside it: a fieldset allows exactly one legend
+              and it must be the first child, so a sibling row would be invalid here.
+            -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
+        </legend>
         @if (masked) {
           <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
             maskedText
@@ -3253,6 +3844,7 @@ class RadioFieldComponent {
                   type="radio"
                   class="ngx-field__radio-input"
                   [formControl]="$any(control)"
+                  [attr.aria-describedby]="describedBy()"
                   [value]="getOptStoredVal(option)"
                   [attr.disabled]="field.disabled ? true : null"
                 />
@@ -3261,7 +3853,9 @@ class RadioFieldComponent {
             }
           </div>
           @if (errorMessage) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+              errorMessage
+            }}</span>
           }
         }
       </fieldset>
@@ -3284,7 +3878,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--masked]="masked"
     >
       <fieldset class="ngx-field__fieldset">
-        <legend class="ngx-field__label">{{ label }}</legend>
+        <legend class="ngx-field__label">
+          {{ label }}
+          @if (hint) {
+            <!--
+              Inside the legend rather than beside it: a fieldset allows exactly one legend
+              and it must be the first child, so a sibling row would be invalid here.
+            -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
+        </legend>
         @if (masked) {
           <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
             maskedText
@@ -3301,6 +3913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                   type="radio"
                   class="ngx-field__radio-input"
                   [formControl]="$any(control)"
+                  [attr.aria-describedby]="describedBy()"
                   [value]="getOptStoredVal(option)"
                   [attr.disabled]="field.disabled ? true : null"
                 />
@@ -3309,7 +3922,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }
           </div>
           @if (errorMessage) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+              errorMessage
+            }}</span>
           }
         }
       </fieldset>
@@ -3399,18 +4014,18 @@ class MultiSelectFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -3421,7 +4036,21 @@ class MultiSelectFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -3436,6 +4065,7 @@ class MultiSelectFieldComponent {
           class="ngx-field__input"
           [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
           multiple
@@ -3450,7 +4080,9 @@ class MultiSelectFieldComponent {
           }
         </select>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -3471,7 +4103,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -3486,6 +4132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           class="ngx-field__input"
           [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
+          [attr.aria-describedby]="describedBy()"
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
           multiple
@@ -3500,7 +4147,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           }
         </select>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -3973,18 +4622,18 @@ class EntityRefFieldComponent {
      * "This field has an error", which made a documented, configurable feature work on three
      * of fifteen field types.
      */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, [
-            'required',
-            'email',
-            'min',
-            'max',
-            'minlength',
-            'maxlength',
-            'pattern',
-        ]);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -3995,7 +4644,21 @@ class EntityRefFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -4015,6 +4678,7 @@ class EntityRefFieldComponent {
             [attr.data-testid]="'field-' + field.id + '-input'"
             [id]="domId()"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [attr.disabled]="field.disabled ? true : null"
           >
             <option value="">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
@@ -4029,7 +4693,9 @@ class EntityRefFieldComponent {
           }
         }
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -4050,7 +4716,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -4070,6 +4750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             [attr.data-testid]="'field-' + field.id + '-input'"
             [id]="domId()"
             [formControl]="$any(control)"
+            [attr.aria-describedby]="describedBy()"
             [attr.disabled]="field.disabled ? true : null"
           >
             <option value="">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
@@ -4084,7 +4765,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           }
         }
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
+            errorMessage
+          }}</span>
         }
       }
     </div>
@@ -4354,6 +5037,10 @@ class GroupFieldComponent {
     readonly = false;
     masked = false;
     userRoles = [];
+    /** Author help text for the section as a whole. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
@@ -4363,11 +5050,27 @@ class GroupFieldComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GroupFieldComponent, isStandalone: true, selector: "ngx-group-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
-    <fieldset class="ngx-field ngx-field--group"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <legend class="ngx-field__legend">{{ label }}</legend>
+    <fieldset
+      class="ngx-field ngx-field--group"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <legend class="ngx-field__legend">
+        {{ label }}
+        @if (hint) {
+          <!-- A group's hint describes the whole section, so it hangs off the section's name. -->
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span class="ngx-field__hint" role="tooltip" [attr.data-testid]="'field-' + field.id + '-hint'">{{ hint }}</span>
+          </span>
+        }
+      </legend>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{ maskedText }}</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else {
         <div class="ngx-field__group-children">
           @for (child of field.children ?? []; track child.id) {
@@ -4390,11 +5093,27 @@ class GroupFieldComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-group-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
-    <fieldset class="ngx-field ngx-field--group"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <legend class="ngx-field__legend">{{ label }}</legend>
+    <fieldset
+      class="ngx-field ngx-field--group"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <legend class="ngx-field__legend">
+        {{ label }}
+        @if (hint) {
+          <!-- A group's hint describes the whole section, so it hangs off the section's name. -->
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span class="ngx-field__hint" role="tooltip" [attr.data-testid]="'field-' + field.id + '-hint'">{{ hint }}</span>
+          </span>
+        }
+      </legend>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{ maskedText }}</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else {
         <div class="ngx-field__group-children">
           @for (child of field.children ?? []; track child.id) {
@@ -4545,6 +5264,10 @@ class ArrayFieldComponent {
     userRoles = [];
     fb = inject(FormBuilder);
     validatorRegistry = inject(ValidatorRegistryService);
+    /** Author help text for the section as a whole. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
@@ -4578,7 +5301,18 @@ class ArrayFieldComponent {
       [class.ngx-field--masked]="masked"
     >
       <div class="ngx-field__array-header">
-        <label class="ngx-field__label">{{ label }}</label>
+        <label class="ngx-field__label">
+          {{ label }}
+          @if (hint) {
+            <!-- Explains the set of rows, so it hangs off their name rather than any one row. -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span class="ngx-field__hint" role="tooltip" [attr.data-testid]="'field-' + field.id + '-hint'">{{
+                hint
+              }}</span>
+            </span>
+          }
+        </label>
         @if (!readonly && !masked) {
           <button
             type="button"
@@ -4590,7 +5324,6 @@ class ArrayFieldComponent {
           </button>
         }
       </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -4649,7 +5382,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--masked]="masked"
     >
       <div class="ngx-field__array-header">
-        <label class="ngx-field__label">{{ label }}</label>
+        <label class="ngx-field__label">
+          {{ label }}
+          @if (hint) {
+            <!-- Explains the set of rows, so it hangs off their name rather than any one row. -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span class="ngx-field__hint" role="tooltip" [attr.data-testid]="'field-' + field.id + '-hint'">{{
+                hint
+              }}</span>
+            </span>
+          }
+        </label>
         @if (!readonly && !masked) {
           <button
             type="button"
@@ -4661,7 +5405,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           </button>
         }
       </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -4877,10 +5620,18 @@ class ImageFieldComponent {
         this.uploads.revokePreviewUrl(this.previewCache);
     }
     /** Validation, as distinct from the upload failures this field already reported. */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImageFieldComponent, isStandalone: true, selector: "ngx-image-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -4891,7 +5642,21 @@ class ImageFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -4920,6 +5685,7 @@ class ImageFieldComponent {
                     accept="image/*"
                     [disabled]="field.disabled || uploading()"
                     (change)="onFileSelect($any($event.target).files[0])"
+                    [attr.aria-describedby]="describedBy()"
                   />
                 }
               </label>
@@ -4935,9 +5701,13 @@ class ImageFieldComponent {
              ever showed the first. A required file left unchosen said nothing, and a
              configured required message had no element to appear in. -->
         @if (uploadError() || errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            uploadError() || errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ uploadError() || errorMessage }}</span
+          >
         }
       }
     </div>
@@ -4958,7 +5728,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -4987,6 +5771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     accept="image/*"
                     [disabled]="field.disabled || uploading()"
                     (change)="onFileSelect($any($event.target).files[0])"
+                    [attr.aria-describedby]="describedBy()"
                   />
                 }
               </label>
@@ -5002,9 +5787,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
              ever showed the first. A required file left unchosen said nothing, and a
              configured required message had no element to appear in. -->
         @if (uploadError() || errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            uploadError() || errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ uploadError() || errorMessage }}</span
+          >
         }
       }
     </div>
@@ -5081,10 +5870,18 @@ class FileFieldComponent {
         this.control.markAsTouched();
     }
     /** Validation, as distinct from the upload failures this field already reported. */
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
     get errorMessage() {
         if (!this.control?.errors || !this.control.touched)
             return '';
-        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FileFieldComponent, isStandalone: true, selector: "ngx-file-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
@@ -5095,7 +5892,21 @@ class FileFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -5134,6 +5945,7 @@ class FileFieldComponent {
                 [id]="domId()"
                 [disabled]="field.disabled || uploading()"
                 (change)="onFileSelect($any($event.target).files[0])"
+                [attr.aria-describedby]="describedBy()"
               />
             }
           </label>
@@ -5142,9 +5954,13 @@ class FileFieldComponent {
              ever showed the first. A required file left unchosen said nothing, and a
              configured required message had no element to appear in. -->
         @if (uploadError() || errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            uploadError() || errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ uploadError() || errorMessage }}</span
+          >
         }
       }
     </div>
@@ -5165,7 +5981,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
       @if (masked) {
         <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
           maskedText
@@ -5204,6 +6034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 [id]="domId()"
                 [disabled]="field.disabled || uploading()"
                 (change)="onFileSelect($any($event.target).files[0])"
+                [attr.aria-describedby]="describedBy()"
               />
             }
           </label>
@@ -5212,9 +6043,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
              ever showed the first. A required file left unchosen said nothing, and a
              configured required message had no element to appear in. -->
         @if (uploadError() || errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
-            uploadError() || errorMessage
-          }}</span>
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ uploadError() || errorMessage }}</span
+          >
         }
       }
     </div>
@@ -5396,6 +6231,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     args: [CONFIG_SOURCE]
                 }] }] });
+/**
+ * Grid width per field type, used only under `layout="auto"` and only where the field itself
+ * names no `colSpan`.
+ *
+ * The rule behind the numbers is how much *content* the control holds, not how much room it
+ * would happily fill: a date is eight characters and a currency amount is rarely more, so
+ * giving either a full row buys nothing but scrolling. Anything that holds a paragraph, a
+ * picture, or a form of its own keeps all twelve.
+ *
+ * A type missing from this table falls back to twelve, which is what an unrecognised custom
+ * field type should get: the layout is conservative about controls it knows nothing about.
+ */
+const AUTO_COL_SPAN = {
+    text: 6,
+    email: 6,
+    password: 6,
+    number: 4,
+    currency: 4,
+    date: 4,
+    datetime: 4,
+    time: 4,
+    monthYear: 4,
+    dropdown: 6,
+    radio: 6,
+    multiSelect: 6,
+    boolean: 4,
+    checkbox: 4,
+    'entity-ref': 6,
+    // Left at the full width deliberately — textarea, markdown, image, file, group and array
+    // each hold something a half-row would crop.
+};
 /**
  * DynamicFormComponent — the main form component.
  * Renders a reactive form from EntityFormConfig with tab support, responsive 12-col grid,
@@ -5453,6 +6319,19 @@ class DynamicFormComponent {
      * disable the form. Used by the builder's live preview.
      */
     preview = false;
+    /**
+     * How a field with no `colSpan` of its own is sized in the 12-column grid.
+     *
+     * `stack` — the historic behaviour — gives every such field the full twelve, so a form of
+     * eight short text fields renders as an eight-row ladder with two thirds of its width
+     * empty. `auto` sizes them by field type instead: a date or a number is half a row, a
+     * textarea or a nested group still takes all twelve.
+     *
+     * An explicit `colSpan` always wins in both modes, so turning `auto` on cannot override a
+     * layout somebody authored. The default stays `stack` because changing how existing configs
+     * render is not this input's business — opting in is.
+     */
+    layout = 'stack';
     // ─── Outputs ──────────────────────────────────────────────────────────────
     formSubmit = new EventEmitter();
     formChange = new EventEmitter();
@@ -5471,9 +6350,15 @@ class DynamicFormComponent {
     hookRegistry = inject(HookRegistryService);
     rbacService = inject(RbacService);
     rulesEvaluation = inject(RulesEvaluationService);
+    /** Resolves what is wrong with a field, for the error summary — see `resolveForField`. */
+    messages = inject(ValidationMessagesService);
     entityRefSelection = inject(EntityRefSelectionService);
     commonModulesRegistry = inject(COMMON_MODULES_REGISTRY, { optional: true });
     migrations = inject(RECORD_MIGRATIONS, { optional: true }) ?? [];
+    /** Scopes the field-slot lookup a jump does, so the library never touches global `document`. */
+    host = inject(ElementRef);
+    /** Ties `afterNextRender` to this component, so destroying it cancels a pending jump. */
+    injector = inject(Injector);
     Object = Object;
     // ─── Signals (local reactive state) ───────────────────────────────────────
     activeTab = signal('', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
@@ -5499,9 +6384,12 @@ class DynamicFormComponent {
     handleKeyboardEvent(event) {
         if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
             event.preventDefault();
-            if (!this.readonly && this.canSubmit && this.form?.valid) {
+            // No `form.valid` check: the shortcut is the Save button, and pressing Save on an
+            // 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.
+            if (!this.readonly && this.canSubmit)
                 this.submit();
-            }
         }
     }
     // ─── Computed ─────────────────────────────────────────────────────────────
@@ -5652,10 +6540,35 @@ class DynamicFormComponent {
     get isValidating() {
         return this.form.pending;
     }
-    /** Single source of truth for both the submit guard and the button's disabled state. */
+    /**
+     * Whether a submit would be refused. The guard `submit()` checks — not the button's state.
+     *
+     * See `submitDisabled` for why those are no longer the same question.
+     */
     get submitBlocked() {
         return this.form.invalid || this.form.pending || this.hasRuleErrors;
     }
+    /**
+     * Whether the Save button is unavailable.
+     *
+     * This used to be `submitBlocked`, so an invalid form greyed Save out — and a greyed button
+     * is the worst possible answer to "why can't I save?". It cannot be clicked, so there is no
+     * moment at which the form gets to say which field is at fault or which tab it is on; the
+     * user is left comparing a disabled button against a form that looks, to them, filled in.
+     * On a tabbed form the offending field is usually not even on screen.
+     *
+     * Save now stays available while the form is merely invalid. Clicking it still saves
+     * nothing — `submit()` checks `submitBlocked` and refuses — but the refusal is where the
+     * error summary, the tab badges and the jump to the first bad field come from, so pressing
+     * Save produces an explanation instead of silence.
+     *
+     * What is still disabled is what a *retry cannot fix*: a save already in flight, and an
+     * async validator whose answer has not come back. Those are moments where the right answer
+     * is genuinely "wait", and a button that accepts a click would be lying.
+     */
+    get submitDisabled() {
+        return this.isSaving() || this.loading || this.form.pending;
+    }
     ngOnInit() {
         this.selectionSub = this.entityRefSelection.selection$.subscribe(({ fieldId, option }) => {
             this.runAutoPatch(fieldId, option?.record);
@@ -5756,9 +6669,113 @@ class DynamicFormComponent {
             this.focusActivePanel();
     }
     getFieldSpan(field) {
-        const span = field.colSpan ?? 12;
+        const span = field.colSpan ?? (this.layout === 'auto' ? (AUTO_COL_SPAN[field.type] ?? 12) : 12);
         return `span ${Math.min(12, Math.max(1, span))}`;
     }
+    // ─── Validation recovery ──────────────────────────────────────────────────
+    /**
+     * Set by a submit that validation refused, cleared by one that went through.
+     *
+     * Gates the error summary rather than `form.invalid` doing it: a form opened on an empty
+     * required field is invalid from the first render, and leading with a block of red before
+     * the user has typed anything is an accusation, not help. The summary is the answer to
+     * "why did Save do nothing", so it appears when Save does nothing.
+     */
+    submitAttempted = signal(false, ...(ngDevMode ? [{ debugName: "submitAttempted" }] : /* istanbul ignore next */ []));
+    /**
+     * Every rendered field whose control is currently invalid, with the tab it lives on.
+     *
+     * Read by the tab badges, the error summary and the jump, so all three agree on what
+     * counts. Hidden fields are excluded because `syncHiddenFieldState` disables them and a
+     * disabled control is not part of validity — pointing the user at one would send them to a
+     * field that is not on screen, or worse, switch tabs to show them nothing.
+     *
+     * Cached per change-detection pass. The walk calls `getControl` once per field and that
+     * falls back to a recursive search of the whole form; the template reads this three times
+     * for the summary and once per tab for the badges, so recomputing it each time turns one
+     * traversal into a dozen on every keystroke. `form.statusChanges` is the only thing that
+     * can alter the answer, and it already runs `markForCheck` — dropping the cache there keeps
+     * it honest without a second subscription.
+     */
+    invalidFields() {
+        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 });
+            }
+            for (const child of tab.children ?? [])
+                collect(child, parentId ?? tab.id);
+        };
+        for (const tab of this.visibleTabs)
+            collect(tab);
+        return (this.invalidFieldsCache = out);
+    }
+    invalidFieldsCache;
+    /** How many invalid fields sit on a tab — its own and its sub-tabs'. */
+    tabErrorCount(tab) {
+        if (!this.submitAttempted())
+            return 0;
+        return this.invalidFields().filter(entry => entry.tabId === tab.id).length;
+    }
+    /** The same count for a sub-tab, which is addressed by its own id rather than its parent's. */
+    subTabErrorCount(subTab) {
+        if (!this.submitAttempted())
+            return 0;
+        return this.invalidFields().filter(entry => entry.subTabId === subTab.id).length;
+    }
+    /**
+     * Switch to the tab holding `fieldId`, scroll it into view, and move focus onto it.
+     *
+     * `afterNextRender` rather than a timer: the panel the field lives in is rendered by the
+     * change detection this call is part of, so the element does not exist yet — and a timeout
+     * is both a guess at how long that takes and something that keeps running after the
+     * component is destroyed. The query is scoped to this component's own element, so the
+     * library never reaches for the global `document`.
+     */
+    jumpToField(fieldId) {
+        const location = this.invalidFields().find(entry => entry.field.id === fieldId) ?? this.locateField(fieldId);
+        if (!location)
+            return;
+        // The panel must not take focus back — this jump is going to focus the field itself.
+        this.setActiveTab(location.tabId, { focusPanel: false });
+        // `setActiveTab` resets to a tab's first child, so the sub-tab is selected after it.
+        if (location.subTabId)
+            this.setActiveSubTab(location.subTabId, { focusPanel: false });
+        afterNextRender(() => {
+            // The id comes from config, so it never goes into a selector string: no escaping to
+            // get wrong, and no need for `CSS.escape`, which jsdom does not provide.
+            const wanted = `field-container-${fieldId}`;
+            const el = Array.from(this.host.nativeElement.querySelectorAll('[id^="field-container-"]')).find(slot => slot.id === wanted);
+            if (!el)
+                return;
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            // The slot carries tabindex="-1", so this actually moves focus rather than only
+            // scrolling and leaving focus behind on the link that was clicked.
+            el.focus();
+        }, { injector: this.injector });
+    }
+    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 };
+            }
+        }
+        return null;
+    }
     // ─── criticalField locking ────────────────────────────────────────────────
     /** A critical field stays read-only until the user deliberately unlocks it. */
     isFieldLocked(field) {
@@ -5791,8 +6808,15 @@ class DynamicFormComponent {
             next.add(field.id);
         this.unlockedFields.set(next);
     }
+    /**
+     * A field's label in the form's language, falling back to its id.
+     *
+     * The fallback matters wherever the label stands alone rather than beside its control: an
+     * error-summary chip or a critical-change banner naming a field with no label for this
+     * language would otherwise be blank, and a blank chip is worse than a raw id.
+     */
     resolveFieldLabel(field) {
-        return resolveLabel(field.label, this.language);
+        return resolveLabel(field.label, this.language) || field.id;
     }
     /**
      * The changed critical fields as one comma-separated string.
@@ -5862,7 +6886,13 @@ class DynamicFormComponent {
         // never re-enable. submitBlocked reads form.pending and form.invalid, so this is what
         // keeps it honest.
         this.statusSub?.unsubscribe();
-        this.statusSub = this.form.statusChanges.subscribe(() => this.cdr.markForCheck());
+        // A rebuild replaces every control, so anything cached against the old ones is stale.
+        this.invalidFieldsCache = undefined;
+        this.statusSub = this.form.statusChanges.subscribe(() => {
+            // The only thing that can change which fields are invalid — see `invalidFields`.
+            this.invalidFieldsCache = undefined;
+            this.cdr.markForCheck();
+        });
         this.valueSub = changes$.subscribe(() => {
             const flattened = this.flattenFormValues();
             this.formValues.set(flattened);
@@ -6371,9 +7401,23 @@ class DynamicFormComponent {
     }
     async submit() {
         if (!this.canSubmit || this.submitBlocked) {
+            /*
+             * A refused save used to mark every control touched and stop there.
+             *
+             * On a tabbed form that is indistinguishable from a broken button: the errors appear on
+             * whichever tabs hold them, the user is looking at a different one, and nothing on
+             * screen changes. Three things fix it, and all three are needed — the summary says how
+             * many and which, the tab badges say where, and this jump takes the user to the first.
+             */
             this.markAllTouched();
+            this.submitAttempted.set(true);
+            const first = this.invalidFields()[0];
+            if (first)
+                this.jumpToField(first.field.id);
             return;
         }
+        // Whatever the last attempt complained about is settled, so the summary goes away.
+        this.submitAttempted.set(false);
         const rawData = this.extractRecord();
         let processedData = rawData;
         this.isSaving.set(true);
@@ -6411,14 +7455,16 @@ class DynamicFormComponent {
         this.formValues.set(values);
         this.previousValues = { ...values };
         this.unlockedFields.set(new Set());
+        // Nothing has been attempted against the restored values, so the old complaint is stale.
+        this.submitAttempted.set(false);
         this.formReset.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", rules: "rules", initialData: "initialData", originalData: "originalData", userRoles: "userRoles", language: "language", readonly: "readonly", readOnlyFields: "readOnlyFields", showInfoBanners: "showInfoBanners", loading: "loading", error: "error", changeDebounceMs: "changeDebounceMs", preview: "preview" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange", saveRejected: "saveRejected" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService], viewQueries: [{ propertyName: "formPanel", first: true, predicate: ["formPanel"], descendants: true }, { propertyName: "fieldHosts", predicate: DynamicFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        {{ 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          </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          </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        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\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:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media(max-width:768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[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], 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 });
 }
 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\" 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    <!-- 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          </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          </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        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\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:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media(max-width:768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-form', standalone: true, imports: [ReactiveFormsModule, DynamicFieldComponent, NgComponentOutlet], providers: [EntityRefSelectionService], template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" [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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rules: [{
@@ -6445,6 +7491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], preview: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], formSubmit: [{
                 type: Output
             }], formChange: [{
@@ -6491,6 +7539,8 @@ class DynamicRecordFormComponent {
     isReadOnly = false;
     /** Specific field ids forced read-only while the rest of the record stays editable. */
     readOnlyFields = [];
+    /** Forwarded verbatim to the hosted form — see `DynamicFormComponent.layout`. */
+    layout = 'stack';
     /**
      * Open the record read-only, with a per-tab "Edit section" flow — one tab is edited and
      * validated at a time. This is the framework's `EntityRecordComponent` model and the
@@ -6517,8 +7567,6 @@ class DynamicRecordFormComponent {
     rulesEvaluation = inject(RulesEvaluationService);
     rbacService = inject(RbacService);
     hookRegistry = inject(HookRegistryService);
-    host = inject(ElementRef);
-    injector = inject(Injector);
     currentData = signal({}, ...(ngDevMode ? [{ debugName: "currentData" }] : /* istanbul ignore next */ []));
     originalBaseline = signal({}, ...(ngDevMode ? [{ debugName: "originalBaseline" }] : /* istanbul ignore next */ []));
     /**
@@ -6829,8 +7877,56 @@ class DynamicRecordFormComponent {
             return 'Record';
         return this.config.name ? resolveLabel(this.config.name, this.language) : this.config.entity;
     }
+    /**
+     * What this record is called, as opposed to what kind of thing it is.
+     *
+     * The header used to show the entity's name twice — "clients", with "Entity: clients"
+     * underneath — so the one question a record header exists to answer, *which* record am I
+     * looking at, was the one thing it did not say. The entity keeps the subtitle; this takes
+     * the heading.
+     *
+     * The order is deliberate. `showOnMinimize` is the author saying "this is what identifies a
+     * record" — it is what the summary panel and the collapsed view already show — so it is
+     * asked first. A text or email field is the fallback because those are what a name is
+     * stored in; a number or a date is a property of the record, not its identity, and would
+     * give a header reading "42". When neither exists there is nothing to name it with and the
+     * entity label stands in, which is the behaviour this replaced.
+     *
+     * A masked field is never a candidate. Masking is presentational (see SECURITY.md), but
+     * that is exactly why: the whole point is that this role does not get to read the value, and
+     * promoting it into the page heading would print in full what every field renders as
+     * `XXXXXXXXX`. A record whose only text field is masked keeps the entity label.
+     *
+     * One pass rather than two filtered ones: this is a getter the header reads on every change
+     * detection, and the preferred candidate is usually the first field it meets.
+     */
+    get recordHeading() {
+        const named = (field) => {
+            const value = this.fieldValue(field.id);
+            if (typeof value !== 'string' && typeof value !== 'number')
+                return null;
+            const text = String(value).trim();
+            return text.length ? text : null;
+        };
+        let fallback = null;
+        for (const field of this.allFields()) {
+            if (field.visibility === false)
+                continue;
+            if (this.rbacService.shouldMaskField(field, undefined, this.config, this.userRoles))
+                continue;
+            if (field.showOnMinimize) {
+                const preferred = named(field);
+                if (preferred)
+                    return preferred;
+            }
+            else if (!fallback && (field.type === 'text' || field.type === 'email')) {
+                fallback = named(field);
+            }
+        }
+        return fallback ?? this.recordTitle;
+    }
     get avatarLetter() {
-        return (this.recordTitle || 'R').charAt(0).toUpperCase();
+        return (this.recordHeading || 'R').charAt(0).toUpperCase();
     }
     // ─── Header fields (isProfileImage / isHeaderToggle) ────────────────────────
     /** Every field in the config, at any depth. */
@@ -6974,61 +8070,24 @@ class DynamicRecordFormComponent {
      * field. The walk used to check top-level `fields` only, so every field in a sub-tab was
      * simply not found and the jump did nothing at all.
      */
-    locateField(fieldId) {
-        for (const tab of this.config?.tabs || []) {
-            if ((tab.fields || []).some(f => f.id === fieldId))
-                return { tabId: tab.id };
-            for (const child of tab.children || []) {
-                if ((child.fields || []).some(f => f.id === fieldId)) {
-                    return { tabId: tab.id, subTabId: child.id };
-                }
-            }
-        }
-        return null;
-    }
     /**
      * Switches to the tab holding `fieldId`, then scrolls it into view and moves focus to it.
      *
-     * The wait for the new tab to render used to be a 50 ms `setTimeout`, which was wrong three
-     * ways: `document` is undefined on a server render, 50 ms is a guess that a large tab can
-     * outrun, and nothing cancelled the timer if the component went away first.
-     * `afterNextRender` fixes all three — it never runs on the server, it runs when the panel
-     * has actually rendered rather than when a guess expires, and it is tied to the injector so
-     * destroying the component cancels it. The query is scoped to this component's own element,
-     * so the library no longer reaches for the global `document` at all.
+     * Delegated rather than implemented twice. The hosted form grew the same jump when a
+     * refused save had to be able to take the user to the first invalid field, and the form is
+     * where it belongs: it owns the tab state, the panel that renders the field, and the
+     * element the jump is looking for. This is kept as the record editor's public entry point
+     * because the summary panel's quick-jump calls it and a host may too.
      */
     jumpToField(fieldId) {
-        const location = this.locateField(fieldId);
-        if (!location)
-            return;
-        // The panel must not take the focus back: this jump is going to focus the field itself.
-        this.dynamicFormComp?.setActiveTab(location.tabId, { focusPanel: false });
-        // `setActiveTab` resets to a tab's first child, so the sub-tab has to be selected after
-        // it, not before. Without this the walk found sub-tab fields and then rendered the wrong
-        // panel, so the element the callback below looks for never existed.
-        if (location.subTabId) {
-            this.dynamicFormComp?.setActiveSubTab(location.subTabId, { focusPanel: false });
-        }
-        afterNextRender(() => {
-            // The field id comes from config, so it never goes into a selector string: no
-            // escaping to get wrong, and no need for `CSS.escape`, which jsdom and older
-            // browsers do not provide and whose absence throws silently inside a render hook.
-            const wanted = `field-container-${fieldId}`;
-            const el = Array.from(this.host.nativeElement.querySelectorAll('[id^="field-container-"]')).find(slot => slot.id === wanted);
-            if (!el)
-                return;
-            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            // The slot carries tabindex="-1" so this actually moves focus. Without it the jump
-            // scrolled the field into view and left focus behind on the link.
-            el.focus();
-        }, { injector: this.injector });
+        this.dynamicFormComp?.jumpToField(fieldId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicRecordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DynamicRecordFormComponent, isStandalone: true, selector: "ngx-dynamic-record-form", inputs: { config: "config", rules: "rules", initialData: "initialData", userRoles: "userRoles", language: "language", readonly: "readonly", loading: "loading", error: "error", isReadOnly: "isReadOnly", readOnlyFields: "readOnlyFields", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave", saveRejected: "saveRejected" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: config.entity }) }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      {{ ui.text('recordModified', language) }}\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"ui.text('jumpToField', language, { field: formatFieldLabel(sf) })\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >\n            {{ ui.text('addRow', language) }}\n          </button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ rowDrawerTitle(rowField) }}</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview"], outputs: ["formSubmit", "formChange", "formReset", "activeTabChange", "saveRejected"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DynamicRecordFormComponent, isStandalone: true, selector: "ngx-dynamic-record-form", inputs: { config: "config", rules: "rules", initialData: "initialData", userRoles: "userRoles", language: "language", readonly: "readonly", loading: "loading", error: "error", isReadOnly: "isReadOnly", readOnlyFields: "readOnlyFields", layout: "layout", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave", saveRejected: "saveRejected" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      {{ ui.text('recordModified', language) }}\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"ui.text('jumpToField', language, { field: formatFieldLabel(sf) })\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >\n            {{ ui.text('addRow', language) }}\n          </button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ rowDrawerTitle(rowField) }}</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 8px);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview", "layout"], outputs: ["formSubmit", "formChange", "formReset", "activeTabChange", "saveRejected"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicRecordFormComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-record-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormComponent, DynamicFieldComponent], template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: config.entity }) }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      {{ ui.text('recordModified', language) }}\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"ui.text('jumpToField', language, { field: formatFieldLabel(sf) })\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >\n            {{ ui.text('addRow', language) }}\n          </button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ rowDrawerTitle(rowField) }}</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-record-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormComponent, DynamicFieldComponent], template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      {{ ui.text('recordModified', language) }}\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"ui.text('jumpToField', language, { field: formatFieldLabel(sf) })\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >\n            {{ ui.text('addRow', language) }}\n          </button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ rowDrawerTitle(rowField) }}</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 8px);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rules: [{
@@ -7049,6 +8108,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], readOnlyFields: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], viewMode: [{
                 type: Input
             }], formSubmit: [{
@@ -7072,5 +8133,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_UI_TEXT, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, ImageFieldComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LookupRegistryService, MARKDOWN_RENDERER, MASKED_PLACEHOLDER, MASKED_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UI_TEXT, UPLOAD_HANDLER, UiTextService, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, fieldDomId, nextFieldInstanceId, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions, resolveUiText };
+export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_UI_TEXT, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, ImageFieldComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LookupRegistryService, MARKDOWN_RENDERER, MASKED_PLACEHOLDER, MASKED_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UI_TEXT, UPLOAD_HANDLER, UiTextService, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, fieldDescribedBy, fieldDomId, nextFieldInstanceId, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions, resolveUiText };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map