ngx-dynamic-entity 1.8.1 → 1.9.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -112,13 +112,18 @@ const HOOK_REGISTRY = new InjectionToken('HOOK_REGISTRY');
  * The library ships no built-in implementations. Consumers provide their own list
  * so the builder's module-picker and the renderer's tab switcher know what's available.
  *
+ * `component` must be the component **class**: it is mounted through `ngComponentOutlet`,
+ * which takes a type, not a selector. An entry naming a selector string renders nothing and
+ * warns — `COMMON_MODULES` in core is a catalogue of names for the builder's picker, and
+ * offering a module the renderer cannot mount is the one way to get this wrong.
+ *
  * @example
  * providers: [
  *   {
  *     provide: COMMON_MODULES_REGISTRY,
  *     useValue: [
- *       { id: 'documents', label: { en: 'Documents' }, component: 'app-documents-view' },
- *       { id: 'audit',     label: { en: 'Audit Log'  }, component: 'app-audit' },
+ *       { id: 'documents', label: { en: 'Documents' }, component: DocumentsViewComponent },
+ *       { id: 'audit',     label: { en: 'Audit Log'  }, component: AuditLogComponent },
  *     ] satisfies CommonModuleEntry[]
  *   }
  * ]
@@ -141,7 +146,10 @@ const UPLOAD_HANDLER = new InjectionToken('UPLOAD_HANDLER');
  * @example
  * { provide: ENTITY_REF_CACHE_STORE, useClass: SessionStorageRefCache }
  */
-const ENTITY_REF_CACHE_STORE = new InjectionToken('ENTITY_REF_CACHE_STORE', { providedIn: 'root', factory: () => new InMemoryEntityRefCacheStore() });
+const ENTITY_REF_CACHE_STORE = new InjectionToken('ENTITY_REF_CACHE_STORE', {
+    providedIn: 'root',
+    factory: () => new InMemoryEntityRefCacheStore(),
+});
 /**
  * Consumer-provided predicate function to check whether user roles can edit system default tabs or fields.
  * Defaults to allowing edits if not provided.
@@ -171,6 +179,54 @@ const CONFIG_SOURCE = new InjectionToken('CONFIG_SOURCE');
  * { provide: MARKDOWN_RENDERER, useValue: (src: string) => marked.parse(src) as string }
  */
 const MARKDOWN_RENDERER = new InjectionToken('MARKDOWN_RENDERER');
+/**
+ * The text a masked field shows in place of its value. Defaults to `XXXXXXXXX`.
+ *
+ * Masking is presentational — see SECURITY.md — and what it prints is a product decision:
+ * `••••••••` reads as a redaction, "Hidden" reads as a permission, and a localized string
+ * reads as neither in English. It was a literal repeated across every field component, so
+ * there was no way to choose.
+ *
+ * @example
+ * { provide: MASKED_PLACEHOLDER, useValue: '••••••••' }
+ */
+const MASKED_PLACEHOLDER = new InjectionToken('MASKED_PLACEHOLDER');
+/**
+ * Overrides for the library's own chrome — Save, Reset, "No rows yet.", and the rest.
+ *
+ * Field labels and options come from the config as `LocalizedText` and already follow the
+ * form's `language`. This is the text *around* them, which was English literals in the
+ * templates: an application in German rendered German labels around English buttons.
+ *
+ * The library does no translating — it publishes the keys it renders and resolves whatever
+ * a host hands back. `DEFAULT_UI_TEXT` is the full list of keys with their English source
+ * strings, so a translation file can be generated from it rather than transcribed. Anything
+ * left out keeps its English default.
+ *
+ * @example The config's own shape — `LocalizedText` per key, resolved against `language`
+ * {
+ *   provide: UI_TEXT,
+ *   useValue: {
+ *     save: { en: 'Save', de: 'Speichern' },
+ *     reset: { en: 'Reset', de: 'Zurücksetzen' },
+ *   },
+ * }
+ *
+ * @example One language, or a host that re-provides on switch
+ * { provide: UI_TEXT, useValue: { save: 'Speichern', reset: 'Zurücksetzen' } }
+ *
+ * @example An existing i18n layer (ngx-translate, Transloco, $localize)
+ * {
+ *   provide: UI_TEXT,
+ *   useFactory: () => {
+ *     const translate = inject(TranslateService);
+ *     return (key, defaultText) => translate.instant(`dynamicEntity.${key}`) || defaultText;
+ *   },
+ * }
+ *
+ * A resolver is read during change detection, so it must be synchronous and cheap.
+ */
+const UI_TEXT = new InjectionToken('UI_TEXT');
 
 /**
  * Provider function for ngx-dynamic-entity.
@@ -195,6 +251,7 @@ const provideNgxDynamicEntity = (config = {}) => makeEnvironmentProviders([
     { provide: HOOK_REGISTRY, useValue: new Map(Object.entries(config.hooks ?? {})) },
     { provide: RECORD_MIGRATIONS, useValue: config.migrations ?? [] },
     { provide: VALIDATION_MESSAGES, useValue: config.validationMessages ?? {} },
+    { provide: UI_TEXT, useValue: config.uiText ?? {} },
 ]);
 
 /** The built-in English messages. Every key here can be overridden individually. */
@@ -250,7 +307,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * DOM ids that survive being rendered more than once.
+ *
+ * A field component used to derive its control's id straight from `field.id`. That is unique
+ * in a config and *not* unique in a document: an `array` field renders the same child fields
+ * once per row, so a two-row Contacts array put two `#name` inputs on the page. `<label for>`
+ * resolves to the first match in document order, so clicking the second row's label focused
+ * the first row's input, and a screen reader read the same association twice. Duplicate ids on
+ * focusable elements are also a WCAG failure in their own right.
+ *
+ * The fix is a counter, which is what Angular Material does for the same reason: the id stays
+ * readable — `email-de7` — and is unique for the lifetime of the page. It is deliberately not
+ * derived from the row index, because a field component is given exactly five inputs and none
+ * of them says where it is; adding a sixth would change the contract every custom field type
+ * implements.
+ *
+ * Ids are not a public contract. Address a control in a test through its `data-testid`, which
+ * is stable, or through its label, which is what a user sees.
+ */
+let sequence = 0;
+/** A token unique to one component instance, for the lifetime of the page. */
+function nextFieldInstanceId() {
+    sequence += 1;
+    return `de${sequence}`;
+}
+/**
+ * `{fieldId}-{instance}{suffix}` — the field first, so the id still reads as the field it
+ * belongs to when someone is looking at the DOM.
+ *
+ * `field` is undefined until the renderer assigns it, and a template can be checked once
+ * before that happens.
+ */
+function fieldDomId(field, instance, suffix = '') {
+    return `${field?.id ?? 'field'}-${instance}${suffix}`;
+}
+
 class TextFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
     messages = inject(ValidationMessagesService);
     displaySub;
     field;
@@ -281,35 +384,56 @@ class TextFieldComponent {
     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.resolve(this.control.errors, this.language, [
+            'required',
+            'email',
+            'minlength',
+            'maxlength',
+            'pattern',
+        ]);
     }
     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: `
     <div
       class="ngx-field ngx-field--text"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}@if (field.validators?.required) { <span class="ngx-field__req">*</span> }</label>
+      <label class="ngx-field__label" [attr.for]="domId()"
+        >{{ label }}
+        @if (field.validators?.required) {
+          <span class="ngx-field__req">*</span>
+        }
+      </label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ displayValue() ?? '—' }}</span>
       } @else {
         <input
-          [id]="field.id"
+          [id]="domId()"
           type="text"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="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>
@@ -325,29 +449,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     template: `
     <div
       class="ngx-field ngx-field--text"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}@if (field.validators?.required) { <span class="ngx-field__req">*</span> }</label>
+      <label class="ngx-field__label" [attr.for]="domId()"
+        >{{ label }}
+        @if (field.validators?.required) {
+          <span class="ngx-field__req">*</span>
+        }
+      </label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ displayValue() ?? '—' }}</span>
       } @else {
         <input
-          [id]="field.id"
+          [id]="domId()"
           type="text"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="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>
@@ -366,6 +505,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 class TextareaFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -377,26 +527,53 @@ class TextareaFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--textarea"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--textarea"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
       } @else {
         <textarea
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           rows="3"
         ></textarea>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -410,24 +587,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--textarea"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--textarea"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
       } @else {
         <textarea
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           rows="3"
         ></textarea>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -445,6 +630,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }] } });
 
+/** `{name}` — the slot a `UiTextParams` entry fills. */
+const PLACEHOLDER = new RegExp('[{]([a-zA-Z0-9_]+)[}]', 'g');
+/**
+ * Every word this library puts on screen that does not come from a config.
+ *
+ * Field labels, placeholders and options are `LocalizedText` and already follow the form's
+ * `language`. The library's *own* chrome — Save, Reset, "No rows yet." — was English
+ * literals in twenty-odd templates, so an application in German rendered German labels
+ * around English buttons. There was no way to change them short of forking a component.
+ *
+ * This map is the whole surface: the keys are what a host translates, and the values are
+ * the English source strings to translate *from*. It is exported so a translation file can
+ * be generated from it rather than transcribed by hand.
+ *
+ * Keys are grouped by where they appear rather than alphabetically, because a translator
+ * works screen by screen and a list sorted by name hides which strings sit together.
+ */
+const DEFAULT_UI_TEXT = {
+    // Form actions
+    save: 'Save',
+    saving: 'Saving…',
+    reset: 'Reset',
+    saveShortcutHint: 'Shortcut: Ctrl+S',
+    loading: 'Loading…',
+    // Record view — the per-tab edit flow
+    editSection: 'Edit section',
+    saveSection: 'Save section',
+    editingSection: 'Editing this section',
+    cancel: 'Cancel',
+    edit: 'Edit',
+    delete: 'Delete',
+    // Array rows
+    addRow: '+ Row',
+    addItem: '+ Add Item',
+    itemNumber: 'Item #{number}',
+    addRowTitle: 'Add {field} row',
+    editRowTitle: 'Edit {field} row',
+    saveRow: 'Save row',
+    remove: 'Remove',
+    noRows: 'No rows yet.',
+    noItems: 'No items added yet.',
+    // Choice fields
+    selectPlaceholder: 'Select...',
+    selectParentFirst: 'Select {field} first.',
+    // Boolean and checkbox display
+    yes: 'Yes',
+    no: 'No',
+    // Files and images
+    uploading: 'Uploading…',
+    chooseFile: 'Choose file',
+    replaceFile: 'Replace file',
+    removeFile: 'Remove file',
+    downloadFile: 'Download file',
+    noImage: 'No image',
+    uploadImage: 'Upload',
+    changeImage: 'Change',
+    // Month / year pickers
+    month: 'Month',
+    year: 'Year',
+    // Markdown editor
+    write: 'Write',
+    preview: 'Preview',
+    markdownEditorMode: '{label} editor mode',
+    // Accessible names for icon-only controls
+    showPassword: 'Show password',
+    hidePassword: 'Hide password',
+    lockField: 'Lock {field}',
+    unlockField: 'Unlock {field}',
+    criticalFieldLockHint: 'Critical field — click to lock',
+    criticalFieldUnlockHint: 'Critical field — click to unlock for editing',
+    dismissBanner: 'Dismiss: {message}',
+    jumpToField: 'Click to jump to {field}',
+    // Banners and whole-record states
+    entityLabel: 'Entity: {entity}',
+    criticalFieldChanged: '🔒 Critical field changed: {fields} — this differs from the value at the start of this session.',
+    recordModified: '🔒 Record modified from session baseline — unsaved changes pending.',
+    accessDenied: 'You do not have permission to view this record.',
+};
+/**
+ * The resolution rule itself, over any key vocabulary.
+ *
+ * Exported because the builder package renders a second, disjoint set of words and needs
+ * the same rule — overrides first, then the English default, per key, with `{placeholder}`
+ * substitution. Sharing the function rather than the vocabulary is what keeps a renderer
+ * consumer from seeing a hundred and fifty builder keys in completion.
+ */
+function resolveUiText(overrides, defaults, key, language, params) {
+    const fallback = ownString(defaults, key);
+    const resolved = !overrides
+        ? fallback
+        : typeof overrides === 'function'
+            ? askResolver(overrides, key, fallback, language)
+            : // `resolveLabel` handles a bare string at runtime but does not say so in its
+                // signature, so the branch is taken here rather than leaning on an undeclared one.
+                resolveOne(own(overrides, key), language) || fallback;
+    return interpolate(resolved, params);
+}
+/**
+ * An **own** entry, or `undefined`.
+ *
+ * `map[key]` walks the prototype chain, so `toString` answers with `Function` and
+ * `__proto__` with `Object.prototype` — neither of which is a string, and both of which
+ * reach `interpolate` and then a template. The key type rules that out in TypeScript; a key
+ * arriving from a translation catalogue at runtime, or from a host written in JavaScript,
+ * does not.
+ */
+function own(map, key) {
+    return Object.prototype.hasOwnProperty.call(map, key) ? map[key] : undefined;
+}
+function ownString(defaults, key) {
+    const value = own(defaults, key);
+    return typeof value === 'string' ? value : '';
+}
+/**
+ * A resolver runs inside change detection, once per label per pass, in someone else's code.
+ *
+ * If it throws, the exception surfaces from a template expression and the form does not
+ * render at all — every form in the application, over one bad catalogue entry. Falling back
+ * to English is the same answer this function already gives for a resolver that returns
+ * nothing, and it keeps a translation fault a translation fault rather than an outage.
+ */
+function askResolver(resolver, key, fallback, language) {
+    try {
+        const answer = resolver(key, fallback, language);
+        return typeof answer === 'string' && answer ? answer : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function resolveOne(value, language) {
+    if (typeof value === 'string')
+        return value;
+    const resolved = resolveLabel(value, language);
+    // `resolveLabel` is typed to return a string and does, for every shape it is documented
+    // to take. A host handing it a number reaches `Object.values(42)`, which is empty.
+    return typeof resolved === 'string' ? resolved : '';
+}
+/**
+ * Resolves the library's own UI text, honouring `UI_TEXT` before the defaults.
+ *
+ * Resolution is per key, not all-or-nothing, so a host replacing three buttons does not
+ * have to supply the other thirty — and an override that yields nothing for a key still
+ * renders English rather than a gap, which is what a translation catalogue asked for a
+ * missing entry typically hands back.
+ */
+class UiTextService {
+    overrides = inject(UI_TEXT, { optional: true });
+    /**
+     * One label by key, in `language`; English if nothing overrides it. `params` fill the
+     * `{placeholder}` slots, in whatever position the translation puts them.
+     */
+    text(key, language = 'en', params) {
+        return resolveUiText(this.overrides, DEFAULT_UI_TEXT, key, language, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** A placeholder with no matching param is left as written, which is visible in review. */
+function interpolate(text, params) {
+    if (!params)
+        return text;
+    // `name in params` would answer for `toString` and `constructor` too, substituting a
+    // function body into a sentence. Only what the caller actually passed counts.
+    return text.replace(PLACEHOLDER, (match, name) => {
+        const value = own(params, name);
+        return value === undefined || value === null ? match : String(value);
+    });
+}
+
 /**
  * Markdown field: a long-form input that stores **markdown source**, never HTML.
  *
@@ -462,6 +821,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * the token's own note on why that is a backstop rather than a licence.
  */
 class MarkdownFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    /** Library chrome, overridable via UI_TEXT. */
+    ui = inject(UiTextService);
     field;
     control;
     language = 'en';
@@ -518,6 +890,25 @@ class MarkdownFieldComponent {
             return null;
         }
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
     <div
@@ -527,22 +918,34 @@ class MarkdownFieldComponent {
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
     >
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
 
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         @if (rendered(); as html) {
-          <div class="ngx-field__value ngx-field__markdown" [attr.data-testid]="'field-' + field.id + '-value'" [innerHTML]="html"></div>
+          <div
+            class="ngx-field__value ngx-field__markdown"
+            [attr.data-testid]="'field-' + field.id + '-value'"
+            [innerHTML]="html"
+          ></div>
         } @else {
           <!-- No renderer: the source is the display. The stylesheet keeps its line
                breaks with white-space: pre-wrap, and interpolation escapes it. -->
-          <span class="ngx-field__value ngx-field__markdown--source" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
+          <span class="ngx-field__value ngx-field__markdown--source" [attr.data-testid]="'field-' + field.id + '-value'">{{
+            control.value
+          }}</span>
         }
       } @else {
         <div class="ngx-field__markdown-editor">
           @if (canPreview) {
-            <div class="ngx-field__markdown-tabs" role="group" [attr.aria-label]="label + ' editor mode'">
+            <div
+              class="ngx-field__markdown-tabs"
+              role="group"
+              [attr.aria-label]="ui.text('markdownEditorMode', language, { label })"
+            >
               <button
                 type="button"
                 class="ngx-field__markdown-tab"
@@ -550,7 +953,7 @@ class MarkdownFieldComponent {
                 [attr.aria-pressed]="!previewing()"
                 (click)="previewing.set(false)"
               >
-                Write
+                {{ ui.text('write', language) }}
               </button>
               <button
                 type="button"
@@ -559,16 +962,20 @@ class MarkdownFieldComponent {
                 [attr.aria-pressed]="previewing()"
                 (click)="previewing.set(true)"
               >
-                Preview
+                {{ ui.text('preview', language) }}
               </button>
             </div>
           }
 
           @if (previewing()) {
-            <div class="ngx-field__markdown ngx-field__markdown--preview" [attr.data-testid]="'field-' + field.id + '-preview-body'" [innerHTML]="rendered()"></div>
+            <div
+              class="ngx-field__markdown ngx-field__markdown--preview"
+              [attr.data-testid]="'field-' + field.id + '-preview-body'"
+              [innerHTML]="rendered()"
+            ></div>
           } @else {
             <textarea
-              [id]="field.id"
+              [id]="domId()"
               class="ngx-field__input ngx-field__input--markdown"
               [attr.data-testid]="'field-' + field.id + '-input'"
               [formControl]="$any(control)"
@@ -579,8 +986,8 @@ class MarkdownFieldComponent {
           }
         </div>
 
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -601,22 +1008,34 @@ 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]="field.id">{{ label }}</label>
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
 
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         @if (rendered(); as html) {
-          <div class="ngx-field__value ngx-field__markdown" [attr.data-testid]="'field-' + field.id + '-value'" [innerHTML]="html"></div>
+          <div
+            class="ngx-field__value ngx-field__markdown"
+            [attr.data-testid]="'field-' + field.id + '-value'"
+            [innerHTML]="html"
+          ></div>
         } @else {
           <!-- No renderer: the source is the display. The stylesheet keeps its line
                breaks with white-space: pre-wrap, and interpolation escapes it. -->
-          <span class="ngx-field__value ngx-field__markdown--source" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value }}</span>
+          <span class="ngx-field__value ngx-field__markdown--source" [attr.data-testid]="'field-' + field.id + '-value'">{{
+            control.value
+          }}</span>
         }
       } @else {
         <div class="ngx-field__markdown-editor">
           @if (canPreview) {
-            <div class="ngx-field__markdown-tabs" role="group" [attr.aria-label]="label + ' editor mode'">
+            <div
+              class="ngx-field__markdown-tabs"
+              role="group"
+              [attr.aria-label]="ui.text('markdownEditorMode', language, { label })"
+            >
               <button
                 type="button"
                 class="ngx-field__markdown-tab"
@@ -624,7 +1043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 [attr.aria-pressed]="!previewing()"
                 (click)="previewing.set(false)"
               >
-                Write
+                {{ ui.text('write', language) }}
               </button>
               <button
                 type="button"
@@ -633,16 +1052,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 [attr.aria-pressed]="previewing()"
                 (click)="previewing.set(true)"
               >
-                Preview
+                {{ ui.text('preview', language) }}
               </button>
             </div>
           }
 
           @if (previewing()) {
-            <div class="ngx-field__markdown ngx-field__markdown--preview" [attr.data-testid]="'field-' + field.id + '-preview-body'" [innerHTML]="rendered()"></div>
+            <div
+              class="ngx-field__markdown ngx-field__markdown--preview"
+              [attr.data-testid]="'field-' + field.id + '-preview-body'"
+              [innerHTML]="rendered()"
+            ></div>
           } @else {
             <textarea
-              [id]="field.id"
+              [id]="domId()"
               class="ngx-field__input ngx-field__input--markdown"
               [attr.data-testid]="'field-' + field.id + '-input'"
               [formControl]="$any(control)"
@@ -653,8 +1076,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           }
         </div>
 
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -673,6 +1096,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 class NumberFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
     messages = inject(ValidationMessagesService);
     field;
     control;
@@ -694,32 +1127,44 @@ class NumberFieldComponent {
     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: `
     <div
       class="ngx-field ngx-field--number"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="field.id">
+      <label class="ngx-field__label" [attr.for]="domId()">
         {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+        @if (field.validators?.required) {
+          <span class="ngx-field__req">*</span>
+        }
       </label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
       } @else {
         <input
-          [id]="field.id"
+          [id]="domId()"
           type="number"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="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>
@@ -735,32 +1180,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     template: `
     <div
       class="ngx-field ngx-field--number"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="field.id">
+      <label class="ngx-field__label" [attr.for]="domId()">
         {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+        @if (field.validators?.required) {
+          <span class="ngx-field__req">*</span>
+        }
       </label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ?? '—' }}</span>
       } @else {
         <input
-          [id]="field.id"
+          [id]="domId()"
           type="number"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [placeholder]="placeholder"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
         />
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="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>
@@ -780,6 +1237,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 /** Currency field: number input with locale-aware currency symbol prefix. */
 class CurrencyFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -794,27 +1262,59 @@ class CurrencyFieldComponent {
     /** Picks the currency symbol from the locale — defaults to '$'. */
     get symbol() {
         try {
-            return (0).toLocaleString(this.language, { style: 'currency', currency: 'USD', minimumFractionDigits: 0 })
-                .replace(/[\d,.\s]/g, '').trim() || '$';
+            return ((0)
+                .toLocaleString(this.language, { style: 'currency', currency: 'USD', minimumFractionDigits: 0 })
+                .replace(/[\d,.\s]/g, '')
+                .trim() || '$');
         }
         catch {
             return '$';
         }
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--currency"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--currency"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ symbol }}{{ control.value }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'"
+          >{{ symbol }}{{ control.value }}</span
+        >
       } @else {
         <div class="ngx-field__currency-wrap">
           <span class="ngx-field__currency-symbol">{{ symbol }}</span>
           <input
-            class="ngx-field__input ngx-field__input--currency" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
+            class="ngx-field__input ngx-field__input--currency"
+            [attr.data-testid]="'field-' + field.id + '-input'"
             type="number"
             step="0.01"
             [formControl]="$any(control)"
@@ -822,8 +1322,8 @@ class CurrencyFieldComponent {
             [attr.disabled]="field.disabled ? true : null"
           />
         </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -837,18 +1337,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--currency"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--currency"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ symbol }}{{ control.value }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'"
+          >{{ symbol }}{{ control.value }}</span
+        >
       } @else {
         <div class="ngx-field__currency-wrap">
           <span class="ngx-field__currency-symbol">{{ symbol }}</span>
           <input
-            class="ngx-field__input ngx-field__input--currency" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
+            class="ngx-field__input ngx-field__input--currency"
+            [attr.data-testid]="'field-' + field.id + '-input'"
             type="number"
             step="0.01"
             [formControl]="$any(control)"
@@ -856,8 +1367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             [attr.disabled]="field.disabled ? true : null"
           />
         </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -877,6 +1388,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 /** Email field: type="email" input with inline validation hint. */
 class EmailFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -888,34 +1410,60 @@ class EmailFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--email"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--email"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
           <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
         </span>
       } @else {
         <input
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="email"
           autocomplete="email"
           [formControl]="$any(control)"
           [placeholder]="placeholder || 'you@example.com'"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          @if (control.errors?.['required']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Email is required</span>
-          } @else if (control.errors?.['email']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Enter a valid email address</span>
-          } @else {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-          }
+        @if (errorMessage) {
+          <!-- One branch, resolved by the service. The template used to spell out "Email is
+               required" and "Enter a valid email address" itself, so a host configuring
+               validationMessages was overridden by markup it could not reach. The service
+               defaults say the same thing. -->
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -929,32 +1477,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--email"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--email"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
           <a [href]="'mailto:' + control.value" class="ngx-field__email-link">{{ control.value || '—' }}</a>
         </span>
       } @else {
         <input
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="email"
           autocomplete="email"
           [formControl]="$any(control)"
           [placeholder]="placeholder || 'you@example.com'"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          @if (control.errors?.['required']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Email is required</span>
-          } @else if (control.errors?.['email']) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">Enter a valid email address</span>
-          } @else {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
-          }
+        @if (errorMessage) {
+          <!-- One branch, resolved by the service. The template used to spell out "Email is
+               required" and "Enter a valid email address" itself, so a host configuring
+               validationMessages was overridden by markup it could not reach. The service
+               defaults say the same thing. -->
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -974,6 +1529,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 /** Password field: masked input with show/hide eye toggle. */
 class PasswordFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    /** Library chrome, overridable via UI_TEXT. */
+    ui = inject(UiTextService);
     field;
     control;
     language = 'en';
@@ -989,19 +1557,47 @@ class PasswordFieldComponent {
     toggleVisibility() {
         this.visible.update(v => !v);
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--password"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--password"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">••••••••</span>
       } @else {
         <div class="ngx-field__password-wrap">
           <input
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
+            class="ngx-field__input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
             [type]="visible() ? 'text' : 'password'"
             autocomplete="current-password"
             [formControl]="$any(control)"
@@ -1012,13 +1608,13 @@ class PasswordFieldComponent {
             type="button"
             class="ngx-field__eye-btn"
             (click)="toggleVisibility()"
-            [attr.aria-label]="visible() ? 'Hide password' : 'Show password'"
+            [attr.aria-label]="ui.text(visible() ? 'hidePassword' : 'showPassword', language)"
           >
             {{ visible() ? '🙈' : '👁' }}
           </button>
         </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1032,17 +1628,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--password"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--password"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">••••••••</span>
       } @else {
         <div class="ngx-field__password-wrap">
           <input
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
+            class="ngx-field__input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
             [type]="visible() ? 'text' : 'password'"
             autocomplete="current-password"
             [formControl]="$any(control)"
@@ -1053,13 +1658,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             type="button"
             class="ngx-field__eye-btn"
             (click)="toggleVisibility()"
-            [attr.aria-label]="visible() ? 'Hide password' : 'Show password'"
+            [attr.aria-label]="ui.text(visible() ? 'hidePassword' : 'showPassword', language)"
           >
             {{ visible() ? '🙈' : '👁' }}
           </button>
         </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1078,6 +1683,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 class CheckboxFieldComponent {
+    /**
+     * 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. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -1086,27 +1704,53 @@ class CheckboxFieldComponent {
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
+    /**
+     * Configured messages reach this field too.
+     *
+     * It rendered no error element at all, so a required checkbox left unticked told the user
+     * nothing — and `validationMessages` could not reach a field that never displayed one.
+     */
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+    }
     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: `
-    <div class="ngx-field ngx-field--checkbox"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--checkbox"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       @if (masked) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          control.value ? ui.text('yes', language) : ui.text('no', language)
+        }}</span>
       } @else {
-        <label class="ngx-field__label" [attr.for]="field.id">
+        <label class="ngx-field__label" [attr.for]="domId()">
           <input
-            [id]="field.id"
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
+            class="ngx-field__input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
             type="checkbox"
             [formControl]="$any(control)"
             [attr.disabled]="field.disabled ? true : null"
           />
           {{ label }}
         </label>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
+            errorMessage
+          }}</span>
+        }
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1119,25 +1763,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--checkbox"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--checkbox"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       @if (masked) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          control.value ? ui.text('yes', language) : ui.text('no', language)
+        }}</span>
       } @else {
-        <label class="ngx-field__label" [attr.for]="field.id">
+        <label class="ngx-field__label" [attr.for]="domId()">
           <input
-            [id]="field.id"
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
+            class="ngx-field__input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
             type="checkbox"
             [formControl]="$any(control)"
             [attr.disabled]="field.disabled ? true : null"
           />
           {{ label }}
         </label>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
+            errorMessage
+          }}</span>
+        }
       }
     </div>
   `,
@@ -1160,6 +1819,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * toggle switch with Yes/No labels for clearer binary state communication.
  */
 class BooleanFieldComponent {
+    /** Library chrome, overridable via UI_TEXT. */
+    ui = inject(UiTextService);
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -1168,16 +1832,36 @@ class BooleanFieldComponent {
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
+    /**
+     * Configured messages reach this field too.
+     *
+     * It rendered no error element at all, so a required checkbox left unticked told the user
+     * nothing — and `validationMessages` could not reach a field that never displayed one.
+     */
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+    }
     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: `
-    <div class="ngx-field ngx-field--boolean"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--boolean"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       @if (masked) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          control.value ? ui.text('yes', language) : ui.text('no', language)
+        }}</span>
       } @else {
         <div class="ngx-field__toggle-wrap">
           <label class="ngx-field__toggle-label">{{ label }}</label>
@@ -1193,9 +1877,16 @@ class BooleanFieldComponent {
             <span class="ngx-field__toggle-track">
               <span class="ngx-field__toggle-thumb"></span>
             </span>
-            <span class="ngx-field__toggle-text">{{ control.value ? 'Yes' : 'No' }}</span>
+            <span class="ngx-field__toggle-text">{{
+              control.value ? ui.text('yes', language) : ui.text('no', language)
+            }}</span>
           </label>
         </div>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
+            errorMessage
+          }}</span>
+        }
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1208,14 +1899,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--boolean"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--boolean"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       @if (masked) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         <label class="ngx-field__label">{{ label }}</label>
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ control.value ? 'Yes' : 'No' }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          control.value ? ui.text('yes', language) : ui.text('no', language)
+        }}</span>
       } @else {
         <div class="ngx-field__toggle-wrap">
           <label class="ngx-field__toggle-label">{{ label }}</label>
@@ -1231,9 +1931,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             <span class="ngx-field__toggle-track">
               <span class="ngx-field__toggle-thumb"></span>
             </span>
-            <span class="ngx-field__toggle-text">{{ control.value ? 'Yes' : 'No' }}</span>
+            <span class="ngx-field__toggle-text">{{
+              control.value ? ui.text('yes', language) : ui.text('no', language)
+            }}</span>
           </label>
         </div>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" role="alert">{{
+            errorMessage
+          }}</span>
+        }
       }
     </div>
   `,
@@ -1251,6 +1958,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 class DateFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -1270,25 +1988,54 @@ class DateFieldComponent {
         const parsed = new Date(value);
         return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString();
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--date"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--date"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDate(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatDate(control.value)
+        }}</span>
       } @else {
         <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="date"
           [formControl]="$any(control)"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1302,23 +2049,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--date"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--date"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDate(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatDate(control.value)
+        }}</span>
       } @else {
         <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="date"
           [formControl]="$any(control)"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1365,6 +2122,17 @@ const pad = (n) => String(n).padStart(2, '0');
  * conversions here are what keep a value stable across a round trip.
  */
 class DateTimeFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -1402,26 +2170,55 @@ class DateTimeFieldComponent {
         const d = parseStored(value);
         return d ? d.toLocaleString() : '—';
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--datetime"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--datetime"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDateTime(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatDateTime(control.value)
+        }}</span>
       } @else {
         <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="datetime-local"
           [value]="inputValue"
           (change)="onInput($any($event.target).value)"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1435,24 +2232,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--datetime"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--datetime"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatDateTime(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatDateTime(control.value)
+        }}</span>
       } @else {
         <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="datetime-local"
           [value]="inputValue"
           (change)="onInput($any($event.target).value)"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1479,6 +2286,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * and converting it to UTC would move it whenever the offset changed.
  */
 class TimeFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -1495,25 +2313,54 @@ class TimeFieldComponent {
     formatTime(value) {
         return formatDisplayValue('time', undefined, value, this.language);
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--time"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--time"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatTime(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatTime(control.value)
+        }}</span>
       } @else {
         <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="time"
           [formControl]="$any(control)"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1527,23 +2374,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--time"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--time"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatTime(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatTime(control.value)
+        }}</span>
       } @else {
         <input
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           type="time"
           [formControl]="$any(control)"
           [attr.disabled]="field.disabled ? true : null"
         />
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1562,8 +2419,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 const MONTH_NAMES = [
-    'January', 'February', 'March', 'April', 'May', 'June',
-    'July', 'August', 'September', 'October', 'November', 'December',
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
 ];
 const CURRENT_YEAR = new Date().getFullYear();
 const YEARS = Array.from({ length: 80 }, (_, i) => CURRENT_YEAR - i);
@@ -1572,6 +2439,19 @@ const YEARS = Array.from({ length: 80 }, (_, i) => CURRENT_YEAR - i);
  * Value stored as ISO partial date string "YYYY-MM" for unambiguous storage.
  */
 class MonthYearFieldComponent {
+    /**
+     * 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. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -1608,42 +2488,82 @@ class MonthYearFieldComponent {
         const monthName = MONTH_NAMES[parseInt(monthNum, 10) - 1];
         return monthName && year ? `${monthName} ${year}` : String(value);
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--month-year"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--month-year"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <!--
+        Points at the month select: one visible label stands in front of two controls, and a
+        label pointing at neither of them announces as nothing and focuses nothing when
+        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>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatValue(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatValue(control.value)
+        }}</span>
       } @else {
         <div class="ngx-field__month-year-wrap">
           <select
-            class="ngx-field__input ngx-field__input--month" [attr.data-testid]="'field-' + field.id + '-month'"
+            [id]="domId('-month')"
+            class="ngx-field__input ngx-field__input--month"
+            [attr.aria-label]="label + ' ' + ui.text('month', language)"
+            [attr.data-testid]="'field-' + field.id + '-month'"
             [value]="selectedMonth"
             (change)="onMonthChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
           >
-            <option value="">Month</option>
+            <option value="">{{ ui.text('month', language) }}</option>
             @for (m of months; track m.value) {
               <option [value]="m.value">{{ m.label }}</option>
             }
           </select>
           <select
-            class="ngx-field__input ngx-field__input--year" [attr.data-testid]="'field-' + field.id + '-year'"
+            [id]="domId('-year')"
+            class="ngx-field__input ngx-field__input--year"
+            [attr.aria-label]="label + ' ' + ui.text('year', language)"
+            [attr.data-testid]="'field-' + field.id + '-year'"
             [value]="selectedYear"
             (change)="onYearChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
           >
-            <option value="">Year</option>
+            <option value="">{{ ui.text('year', language) }}</option>
             @for (y of years; track y) {
               <option [value]="y">{{ y }}</option>
             }
           </select>
         </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1657,40 +2577,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--month-year"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--month-year"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <!--
+        Points at the month select: one visible label stands in front of two controls, and a
+        label pointing at neither of them announces as nothing and focuses nothing when
+        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>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ formatValue(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          formatValue(control.value)
+        }}</span>
       } @else {
         <div class="ngx-field__month-year-wrap">
           <select
-            class="ngx-field__input ngx-field__input--month" [attr.data-testid]="'field-' + field.id + '-month'"
+            [id]="domId('-month')"
+            class="ngx-field__input ngx-field__input--month"
+            [attr.aria-label]="label + ' ' + ui.text('month', language)"
+            [attr.data-testid]="'field-' + field.id + '-month'"
             [value]="selectedMonth"
             (change)="onMonthChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
           >
-            <option value="">Month</option>
+            <option value="">{{ ui.text('month', language) }}</option>
             @for (m of months; track m.value) {
               <option [value]="m.value">{{ m.label }}</option>
             }
           </select>
           <select
-            class="ngx-field__input ngx-field__input--year" [attr.data-testid]="'field-' + field.id + '-year'"
+            [id]="domId('-year')"
+            class="ngx-field__input ngx-field__input--year"
+            [attr.aria-label]="label + ' ' + ui.text('year', language)"
+            [attr.data-testid]="'field-' + field.id + '-year'"
             [value]="selectedYear"
             (change)="onYearChange($any($event.target).value)"
             [attr.disabled]="field.disabled ? true : null"
           >
-            <option value="">Year</option>
+            <option value="">{{ ui.text('year', language) }}</option>
             @for (y of years; track y) {
               <option [value]="y">{{ y }}</option>
             }
           </select>
         </div>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -1951,6 +2892,18 @@ function refreshChoiceOptions(host, lookups) {
 }
 
 class DropdownFieldComponent {
+    /**
+     * 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. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
     lookups = inject(LookupRegistryService);
     messages = inject(ValidationMessagesService);
     _field;
@@ -2019,30 +2972,38 @@ class DropdownFieldComponent {
     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: `
     <div
       class="ngx-field ngx-field--dropdown"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="field.id">
+      <label class="ngx-field__label" [attr.for]="domId()">
         {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+        @if (field.validators?.required) {
+          <span class="ngx-field__req">*</span>
+        }
       </label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          getLabel(control.value)
+        }}</span>
       } @else {
         <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
         >
-          <option [value]="''">{{ placeholder || 'Select...' }}</option>
+          <option [value]="''">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
           @for (option of options(); track getOptLabel(option)) {
             @if (isObjectVal(option)) {
               <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
@@ -2052,7 +3013,13 @@ class DropdownFieldComponent {
           }
         </select>
         @if (errorMessage) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="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>
@@ -2068,30 +3035,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     template: `
     <div
       class="ngx-field ngx-field--dropdown"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
       [class.ngx-field--readonly]="readonly"
       [class.ngx-field--masked]="masked"
       [class.ngx-field--invalid]="control && control.invalid && control.touched"
     >
-      <label class="ngx-field__label" [attr.for]="field.id">
+      <label class="ngx-field__label" [attr.for]="domId()">
         {{ label }}
-        @if (field.validators?.required) { <span class="ngx-field__req">*</span> }
+        @if (field.validators?.required) {
+          <span class="ngx-field__req">*</span>
+        }
       </label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          getLabel(control.value)
+        }}</span>
       } @else {
         <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
           [attr.aria-invalid]="control.invalid && control.touched"
-          [attr.aria-describedby]="errorMessage ? field.id + '-error' : null"
+          [attr.aria-describedby]="errorMessage ? domId('-error') : null"
         >
-          <option [value]="''">{{ placeholder || 'Select...' }}</option>
+          <option [value]="''">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
           @for (option of options(); track getOptLabel(option)) {
             @if (isObjectVal(option)) {
               <option [ngValue]="getOptStoredVal(option)">{{ getOptLabel(option) }}</option>
@@ -2101,7 +3076,13 @@ 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'" [id]="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>
@@ -2121,6 +3102,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 /** Radio field: a group of radio buttons built from field.options. */
 class RadioFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     lookups = inject(LookupRegistryService);
     _field;
     _language = 'en';
@@ -2156,12 +3148,19 @@ class RadioFieldComponent {
      * into an id attribute.
      */
     getRadioId(option) {
-        // `??` cannot fire here: `resolveOptionValue` returns '' for an empty option, not null,
-        // so every valueless option produced the same id — and duplicate ids break the `for`
-        // that ties each label to its input.
+        return this.domId(`-${this.optionSlug(option)}`);
+    }
+    /**
+     * The option's part of an id or a test hook.
+     *
+     * `??` cannot fire here: `resolveOptionValue` returns '' for an empty option, not null, so
+     * every valueless option produced the same slug — and two radios sharing an id break the
+     * `for` that ties each label to its input.
+     */
+    optionSlug(option) {
         const raw = String(this.getOptVal(option) ?? '').trim();
         const text = raw || 'opt';
-        return `${this.field.id}-${text.trim().replace(/\s+/g, '_').toLowerCase()}`;
+        return text.trim().replace(/\s+/g, '_').toLowerCase();
     }
     getOptVal(option) {
         return resolveOptionValue(option, this.language);
@@ -2184,14 +3183,40 @@ class RadioFieldComponent {
             return cached;
         return typeof value === 'object' ? resolveLabel(value, this.language) : String(value ?? '—');
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--radio"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--radio"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       <fieldset class="ngx-field__fieldset">
         <legend class="ngx-field__label">{{ label }}</legend>
         @if (masked) {
-          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+            maskedText
+          }}</span>
         } @else if (readonly) {
           <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getSelectedLabel() }}</span>
         } @else {
@@ -2200,6 +3225,7 @@ class RadioFieldComponent {
               <label class="ngx-field__radio-option" [attr.for]="getRadioId(option)">
                 <input
                   [id]="getRadioId(option)"
+                  [attr.data-testid]="'field-' + field.id + '-option-' + optionSlug(option)"
                   type="radio"
                   class="ngx-field__radio-input"
                   [formControl]="$any(control)"
@@ -2210,8 +3236,8 @@ class RadioFieldComponent {
               </label>
             }
           </div>
-          @if (control.invalid && control.touched) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+          @if (errorMessage) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
           }
         }
       </fieldset>
@@ -2226,12 +3252,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--radio"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--radio"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       <fieldset class="ngx-field__fieldset">
         <legend class="ngx-field__label">{{ label }}</legend>
         @if (masked) {
-          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+            maskedText
+          }}</span>
         } @else if (readonly) {
           <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getSelectedLabel() }}</span>
         } @else {
@@ -2240,6 +3273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               <label class="ngx-field__radio-option" [attr.for]="getRadioId(option)">
                 <input
                   [id]="getRadioId(option)"
+                  [attr.data-testid]="'field-' + field.id + '-option-' + optionSlug(option)"
                   type="radio"
                   class="ngx-field__radio-input"
                   [formControl]="$any(control)"
@@ -2250,8 +3284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
               </label>
             }
           </div>
-          @if (control.invalid && control.touched) {
-            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+          @if (errorMessage) {
+            <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
           }
         }
       </fieldset>
@@ -2271,6 +3305,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 class MultiSelectFieldComponent {
+    /**
+     * 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);
+    }
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     lookups = inject(LookupRegistryService);
     _field;
     _language = 'en';
@@ -2324,19 +3369,48 @@ class MultiSelectFieldComponent {
         })
             .join(', ');
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--multiSelect"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--multiSelect"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabels(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          getLabels(control.value)
+        }}</span>
       } @else {
         <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
@@ -2351,8 +3425,8 @@ class MultiSelectFieldComponent {
             }
           }
         </select>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -2366,17 +3440,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--multiSelect"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--multiSelect"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabels(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          getLabels(control.value)
+        }}</span>
       } @else {
         <select
-          [id]="field.id"
-          class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
           [formControl]="$any(control)"
           [compareWith]="compareFn"
           [attr.disabled]="field.disabled ? true : null"
@@ -2391,8 +3475,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }
           }
         </select>
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -2758,6 +3842,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * `EntityRefSelectionService` so the owning form can run `autoPatch`.
  */
 class EntityRefFieldComponent {
+    /**
+     * 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. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -2822,7 +3919,7 @@ class EntityRefFieldComponent {
     }
     getLabel(value) {
         const option = this.options().find(o => String(o.value) === String(value));
-        return option?.label ?? (value ?? '—');
+        return option?.label ?? value ?? '—';
     }
     parentValue() {
         const parentId = this.parentFieldId;
@@ -2838,9 +3935,7 @@ class EntityRefFieldComponent {
         const parentControl = this.control?.parent?.get(parentId);
         if (!parentControl)
             return;
-        parentControl.valueChanges
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
+        parentControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             if (this.control.value) {
                 this.control.setValue('', { emitEvent: false });
                 this.selectionBus.emit(this.field.id, null);
@@ -2848,36 +3943,69 @@ class EntityRefFieldComponent {
             void this.reload();
         });
     }
+    /**
+     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
+     * validationMessages })` reaches this field. It used to render a fixed
+     * "This field has an error", which made a documented, configurable feature work on three
+     * of fifteen field types.
+     */
+    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',
+        ]);
+    }
     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: `
-    <div class="ngx-field ngx-field--entity-ref"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--entity-ref"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          getLabel(control.value)
+        }}</span>
       } @else {
         @if (loading()) {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">Loading…</span>
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">{{
+            ui.text('loading', language)
+          }}</span>
         } @else {
           <select
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            [id]="'field-' + field.id"
+            class="ngx-field__input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
             [formControl]="$any(control)"
             [attr.disabled]="field.disabled ? true : null"
           >
-            <option value="">{{ placeholder || 'Select...' }}</option>
+            <option value="">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
             @for (option of options(); track option.value) {
               <option [value]="option.value">{{ option.label }}</option>
             }
           </select>
           @if (awaitingParent()) {
-            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">Select {{ parentFieldId }} first.</span>
+            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">{{
+              ui.text('selectParentFirst', language, { field: parentFieldId ?? '' })
+            }}</span>
           }
         }
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -2891,34 +4019,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [ReactiveFormsModule],
                     template: `
-    <div class="ngx-field ngx-field--entity-ref"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--entity-ref"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
-        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{ getLabel(control.value) }}</span>
+        <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">{{
+          getLabel(control.value)
+        }}</span>
       } @else {
         @if (loading()) {
-          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">Loading…</span>
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-loading'" role="status">{{
+            ui.text('loading', language)
+          }}</span>
         } @else {
           <select
-            class="ngx-field__input" [attr.data-testid]="'field-' + field.id + '-input'"
-            [id]="'field-' + field.id"
+            class="ngx-field__input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [id]="domId()"
             [formControl]="$any(control)"
             [attr.disabled]="field.disabled ? true : null"
           >
-            <option value="">{{ placeholder || 'Select...' }}</option>
+            <option value="">{{ placeholder || ui.text('selectPlaceholder', language) }}</option>
             @for (option of options(); track option.value) {
               <option [value]="option.value">{{ option.label }}</option>
             }
           </select>
           @if (awaitingParent()) {
-            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">Select {{ parentFieldId }} first.</span>
+            <span class="ngx-field__hint" [attr.data-testid]="'field-' + field.id + '-hint'">{{
+              ui.text('selectParentFirst', language, { field: parentFieldId ?? '' })
+            }}</span>
           }
         }
-        @if (control.invalid && control.touched) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">This field has an error</span>
+        @if (errorMessage) {
+          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ errorMessage }}</span>
         }
       }
     </div>
@@ -3179,6 +4321,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 /** Renders a nested fieldset container for a group field's children. */
 class GroupFieldComponent {
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
     field;
     control;
     config;
@@ -3199,7 +4343,7 @@ class GroupFieldComponent {
       [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
       <legend class="ngx-field__legend">{{ label }}</legend>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <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) {
@@ -3226,7 +4370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
       [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
       <legend class="ngx-field__legend">{{ label }}</legend>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <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) {
@@ -3358,6 +4502,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 
 /** Renders repeating rows for a FormArray, with Add Item and Remove. */
 class ArrayFieldComponent {
+    /** Library chrome, overridable via UI_TEXT. */
+    ui = inject(UiTextService);
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
     /**
      * addItem/removeItem are public and may be called from outside this component's template,
      * which under OnPush would not re-render. The host also watches the control, but this
@@ -3398,30 +4546,45 @@ class ArrayFieldComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ArrayFieldComponent, isStandalone: true, selector: "ngx-array-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
-    <div class="ngx-field ngx-field--array"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--array"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       <div class="ngx-field__array-header">
         <label class="ngx-field__label">{{ label }}</label>
         @if (!readonly && !masked) {
-          <button type="button" class="ngx-field__array-add-btn"
-            [attr.data-testid]="'field-' + field.id + '-add'" (click)="addItem()">
-            + Add Item
+          <button
+            type="button"
+            class="ngx-field__array-add-btn"
+            [attr.data-testid]="'field-' + field.id + '-add'"
+            (click)="addItem()"
+          >
+            {{ ui.text('addItem', language) }}
           </button>
         }
       </div>
 
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else {
         <div class="ngx-field__array-list">
           @for (itemGroup of formArray.controls; track idx; let idx = $index) {
             <div class="ngx-field__array-item" [attr.data-testid]="'field-' + field.id + '-row'">
               <div class="ngx-field__array-item-header">
-                <span class="ngx-field__array-item-title">Item #{{ idx + 1 }}</span>
+                <span class="ngx-field__array-item-title">{{ ui.text('itemNumber', language, { number: idx + 1 }) }}</span>
                 @if (!readonly) {
-                  <button type="button" class="ngx-field__array-remove-btn"
-                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx" (click)="removeItem(idx)">
-                    Remove
+                  <button
+                    type="button"
+                    class="ngx-field__array-remove-btn"
+                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx"
+                    (click)="removeItem(idx)"
+                  >
+                    {{ ui.text('remove', language) }}
                   </button>
                 }
               </div>
@@ -3442,7 +4605,9 @@ class ArrayFieldComponent {
             </div>
           }
           @if (formArray.controls.length === 0) {
-            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">No items added yet.</div>
+            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">
+              {{ ui.text('noItems', language) }}
+            </div>
           }
         </div>
       }
@@ -3452,30 +4617,45 @@ class ArrayFieldComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-array-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
-    <div class="ngx-field ngx-field--array"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
+    <div
+      class="ngx-field ngx-field--array"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
       <div class="ngx-field__array-header">
         <label class="ngx-field__label">{{ label }}</label>
         @if (!readonly && !masked) {
-          <button type="button" class="ngx-field__array-add-btn"
-            [attr.data-testid]="'field-' + field.id + '-add'" (click)="addItem()">
-            + Add Item
+          <button
+            type="button"
+            class="ngx-field__array-add-btn"
+            [attr.data-testid]="'field-' + field.id + '-add'"
+            (click)="addItem()"
+          >
+            {{ ui.text('addItem', language) }}
           </button>
         }
       </div>
 
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else {
         <div class="ngx-field__array-list">
           @for (itemGroup of formArray.controls; track idx; let idx = $index) {
             <div class="ngx-field__array-item" [attr.data-testid]="'field-' + field.id + '-row'">
               <div class="ngx-field__array-item-header">
-                <span class="ngx-field__array-item-title">Item #{{ idx + 1 }}</span>
+                <span class="ngx-field__array-item-title">{{ ui.text('itemNumber', language, { number: idx + 1 }) }}</span>
                 @if (!readonly) {
-                  <button type="button" class="ngx-field__array-remove-btn"
-                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx" (click)="removeItem(idx)">
-                    Remove
+                  <button
+                    type="button"
+                    class="ngx-field__array-remove-btn"
+                    [attr.data-testid]="'field-' + field.id + '-remove-' + idx"
+                    (click)="removeItem(idx)"
+                  >
+                    {{ ui.text('remove', language) }}
                   </button>
                 }
               </div>
@@ -3496,7 +4676,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             </div>
           }
           @if (formArray.controls.length === 0) {
-            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">No items added yet.</div>
+            <div class="ngx-field__array-empty" [attr.data-testid]="'field-' + field.id + '-empty'">
+              {{ ui.text('noItems', language) }}
+            </div>
           }
         </div>
       }
@@ -3611,6 +4793,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * it is stored as `{ file }` and previewed from an object URL (revoked when replaced/destroyed).
  */
 class ImageFieldComponent {
+    /**
+     * 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. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -3657,13 +4852,26 @@ class ImageFieldComponent {
     ngOnDestroy() {
         this.uploads.revokePreviewUrl(this.previewCache);
     }
+    /** Validation, as distinct from the upload failures this field already reported. */
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+    }
     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: `
-    <div class="ngx-field ngx-field--image"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--image"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else {
         <div class="ngx-field__image-wrap">
           @if (previewUrl()) {
@@ -3671,20 +4879,20 @@ class ImageFieldComponent {
           } @else {
             <div class="ngx-field__image-placeholder">
               <span>📷</span>
-              <span>No image</span>
+              <span>{{ ui.text('noImage', language) }}</span>
             </div>
           }
           @if (!readonly) {
             <div class="ngx-field__image-actions">
               <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
                 @if (uploading()) {
-                  <span>Uploading…</span>
+                  <span>{{ ui.text('uploading', language) }}</span>
                 } @else {
-                  <span>{{ previewUrl() ? 'Change' : 'Upload' }}</span>
+                  <span>{{ ui.text(previewUrl() ? 'changeImage' : 'uploadImage', language) }}</span>
                   <input
                     type="file"
                     class="ngx-field__file-input"
-                    [id]="'field-' + field.id"
+                    [id]="domId()"
                     accept="image/*"
                     [disabled]="field.disabled || uploading()"
                     (change)="onFileSelect($any($event.target).files[0])"
@@ -3692,13 +4900,20 @@ class ImageFieldComponent {
                 }
               </label>
               @if (previewUrl()) {
-                <button type="button" class="ngx-field__remove-btn" (click)="remove()">Remove</button>
+                <button type="button" class="ngx-field__remove-btn" (click)="remove()">
+                  {{ ui.text('remove', language) }}
+                </button>
               }
             </div>
           }
         </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        <!-- An upload failure and an unmet validator are different problems, and this only
+             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>
         }
       }
     </div>
@@ -3712,11 +4927,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [],
                     template: `
-    <div class="ngx-field ngx-field--image"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--image"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else {
         <div class="ngx-field__image-wrap">
           @if (previewUrl()) {
@@ -3724,20 +4946,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           } @else {
             <div class="ngx-field__image-placeholder">
               <span>📷</span>
-              <span>No image</span>
+              <span>{{ ui.text('noImage', language) }}</span>
             </div>
           }
           @if (!readonly) {
             <div class="ngx-field__image-actions">
               <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
                 @if (uploading()) {
-                  <span>Uploading…</span>
+                  <span>{{ ui.text('uploading', language) }}</span>
                 } @else {
-                  <span>{{ previewUrl() ? 'Change' : 'Upload' }}</span>
+                  <span>{{ ui.text(previewUrl() ? 'changeImage' : 'uploadImage', language) }}</span>
                   <input
                     type="file"
                     class="ngx-field__file-input"
-                    [id]="'field-' + field.id"
+                    [id]="domId()"
                     accept="image/*"
                     [disabled]="field.disabled || uploading()"
                     (change)="onFileSelect($any($event.target).files[0])"
@@ -3745,13 +4967,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 }
               </label>
               @if (previewUrl()) {
-                <button type="button" class="ngx-field__remove-btn" (click)="remove()">Remove</button>
+                <button type="button" class="ngx-field__remove-btn" (click)="remove()">
+                  {{ ui.text('remove', language) }}
+                </button>
               }
             </div>
           }
         </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        <!-- An upload failure and an unmet validator are different problems, and this only
+             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>
         }
       }
     </div>
@@ -3774,6 +5003,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Shares the `FileRef` / `UPLOAD_HANDLER` contract with image-field via FileUploadService.
  */
 class FileFieldComponent {
+    /**
+     * 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. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
     field;
     control;
     language = 'en';
@@ -3814,17 +5056,30 @@ class FileFieldComponent {
         this.control.setValue(null);
         this.control.markAsTouched();
     }
+    /** Validation, as distinct from the upload failures this field already reported. */
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolve(this.control.errors, this.language, ['required', 'pattern']);
+    }
     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: `
-    <div class="ngx-field ngx-field--file"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--file"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         @if (fileUrl()) {
           <a class="ngx-field__file-link" [href]="fileUrl()!" target="_blank" rel="noopener">
-            📎 {{ fileName() || 'Download file' }}
+            📎 {{ fileName() || ui.text('downloadFile', language) }}
           </a>
         } @else {
           <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">—</span>
@@ -3834,26 +5089,38 @@ class FileFieldComponent {
           @if (fileName()) {
             <div class="ngx-field__file-selected">
               <span class="ngx-field__file-name">📎 {{ fileName() }}</span>
-              <button type="button" class="ngx-field__remove-btn" (click)="remove()" aria-label="Remove file">✕</button>
+              <button
+                type="button"
+                class="ngx-field__remove-btn"
+                (click)="remove()"
+                [attr.aria-label]="ui.text('removeFile', language)"
+              >
+                ✕
+              </button>
             </div>
           }
           <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
             @if (uploading()) {
-              <span>Uploading…</span>
+              <span>{{ ui.text('uploading', language) }}</span>
             } @else {
-              <span>{{ fileName() ? 'Replace file' : 'Choose file' }}</span>
+              <span>{{ fileName() ? ui.text('replaceFile', language) : ui.text('chooseFile', language) }}</span>
               <input
                 type="file"
                 class="ngx-field__file-input"
-                [id]="'field-' + field.id"
+                [id]="domId()"
                 [disabled]="field.disabled || uploading()"
                 (change)="onFileSelect($any($event.target).files[0])"
               />
             }
           </label>
         </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        <!-- An upload failure and an unmet validator are different problems, and this only
+             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>
         }
       }
     </div>
@@ -3867,15 +5134,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     standalone: true,
                     imports: [],
                     template: `
-    <div class="ngx-field ngx-field--file"
-      [attr.data-testid]="'field-' + field.id" [attr.data-field-type]="field.type" [class.ngx-field--readonly]="readonly" [class.ngx-field--masked]="masked">
-      <label class="ngx-field__label" [attr.for]="'field-' + field.id">{{ label }}</label>
+    <div
+      class="ngx-field ngx-field--file"
+      [attr.data-testid]="'field-' + field.id"
+      [attr.data-field-type]="field.type"
+      [class.ngx-field--readonly]="readonly"
+      [class.ngx-field--masked]="masked"
+    >
+      <label class="ngx-field__label" [attr.for]="domId()">{{ label }}</label>
       @if (masked) {
-        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">XXXXXXXXX</span>
+        <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+          maskedText
+        }}</span>
       } @else if (readonly) {
         @if (fileUrl()) {
           <a class="ngx-field__file-link" [href]="fileUrl()!" target="_blank" rel="noopener">
-            📎 {{ fileName() || 'Download file' }}
+            📎 {{ fileName() || ui.text('downloadFile', language) }}
           </a>
         } @else {
           <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">—</span>
@@ -3885,26 +5159,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           @if (fileName()) {
             <div class="ngx-field__file-selected">
               <span class="ngx-field__file-name">📎 {{ fileName() }}</span>
-              <button type="button" class="ngx-field__remove-btn" (click)="remove()" aria-label="Remove file">✕</button>
+              <button
+                type="button"
+                class="ngx-field__remove-btn"
+                (click)="remove()"
+                [attr.aria-label]="ui.text('removeFile', language)"
+              >
+                ✕
+              </button>
             </div>
           }
           <label class="ngx-field__upload-btn" [class.ngx-field__upload-btn--loading]="uploading()">
             @if (uploading()) {
-              <span>Uploading…</span>
+              <span>{{ ui.text('uploading', language) }}</span>
             } @else {
-              <span>{{ fileName() ? 'Replace file' : 'Choose file' }}</span>
+              <span>{{ fileName() ? ui.text('replaceFile', language) : ui.text('chooseFile', language) }}</span>
               <input
                 type="file"
                 class="ngx-field__file-input"
-                [id]="'field-' + field.id"
+                [id]="domId()"
                 [disabled]="field.disabled || uploading()"
                 (change)="onFileSelect($any($event.target).files[0])"
               />
             }
           </label>
         </div>
-        @if (uploadError()) {
-          <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'">{{ uploadError() }}</span>
+        <!-- An upload failure and an unmet validator are different problems, and this only
+             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>
         }
       }
     </div>
@@ -4093,6 +5379,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * keyboard shortcuts (Ctrl+S, Esc), and RBAC-gated submission.
  */
 class DynamicFormComponent {
+    /** Library chrome, overridable via UI_TEXT. */
+    ui = inject(UiTextService);
     // ─── Inputs ───────────────────────────────────────────────────────────────
     /**
      * The schema to render.
@@ -4233,18 +5521,46 @@ class DynamicFormComponent {
         const subId = this.activeSubTab();
         return subTabs.find(s => s.id === subId) ?? subTabs[0];
     }
+    /**
+     * The component to mount for the active tab, or `null` if there is nothing to mount.
+     *
+     * A registry entry may name its component with a **selector string** — `COMMON_MODULES`
+     * is a catalogue of names for the builder's picker, and the token's own example showed
+     * one. `ngComponentOutlet` mounts a component *type*, so a string reached it and Angular
+     * threw an assertion the moment somebody opened that tab. Following the documented shape
+     * broke the feature, which is worse than the feature not existing.
+     *
+     * A string now resolves to nothing renderable and says why, once per module.
+     */
     get activeTabModuleComponent() {
         const active = this.activeSubTabConfig ?? this.activeTabConfig;
         if (!active?.moduleName || !this.commonModulesRegistry)
             return null;
         const entry = this.commonModulesRegistry.find(m => m.id === active.moduleName || m.component === active.moduleName);
-        return entry ? entry.component : null;
+        if (!entry)
+            return null;
+        if (typeof entry.component === 'string') {
+            this.warnSelectorModule(entry.id, entry.component);
+            return null;
+        }
+        return entry.component;
+    }
+    /** Warned once per module id, because a getter runs on every change-detection pass. */
+    warnedSelectorModules = new Set();
+    warnSelectorModule(id, selector) {
+        if (this.warnedSelectorModules.has(id))
+            return;
+        this.warnedSelectorModules.add(id);
+        console.warn(`[ngx-dynamic-entity] The common module '${id}' is registered with the selector ` +
+            `'${selector}' rather than a component class, so there is nothing to mount for its ` +
+            `tab. Register the component itself: ` +
+            `{ id: '${id}', label: {...}, component: MyComponent }.`);
     }
     get fieldsForActiveTab() {
         const active = this.activeSubTabConfig ?? this.activeTabConfig;
         if (active?.moduleName)
             return [];
-        const rawFields = active ? (active.fields || []) : ((this.config?.tabs || []).flatMap(t => t.fields || []));
+        const rawFields = active ? active.fields || [] : (this.config?.tabs || []).flatMap(t => t.fields || []);
         const currentValues = this.formValues();
         const hiddenFields = new Set(this.ruleResult().hiddenFields);
         return rawFields.filter(field => evaluateFieldVisibility(field, currentValues) && !this.namesField(hiddenFields, field));
@@ -4454,6 +5770,18 @@ class DynamicFormComponent {
     resolveFieldLabel(field) {
         return resolveLabel(field.label, this.language);
     }
+    /**
+     * The changed critical fields as one comma-separated string.
+     *
+     * Joined here rather than looped in the template because the banner is a sentence with the
+     * list inside it, and a sentence has to reach `UI_TEXT` whole — a translation moves the
+     * list somewhere else in the clause.
+     */
+    changedCriticalFieldLabels() {
+        return this.changedCriticalFields()
+            .map(field => this.resolveFieldLabel(field))
+            .join(', ');
+    }
     // ─── Form construction ────────────────────────────────────────────────────
     buildForm() {
         if (!this.config)
@@ -4504,9 +5832,7 @@ class DynamicFormComponent {
         }
         // Rebuilding must not stack subscriptions on successive config/data changes.
         this.valueSub?.unsubscribe();
-        const changes$ = this.changeDebounceMs > 0
-            ? this.form.valueChanges.pipe(debounceTime(this.changeDebounceMs))
-            : this.form.valueChanges;
+        const changes$ = this.changeDebounceMs > 0 ? this.form.valueChanges.pipe(debounceTime(this.changeDebounceMs)) : this.form.valueChanges;
         // Validity is not value: an async validator settling flips `pending` and then `invalid`
         // with no value change and no template event, so under OnPush the Save button would
         // never re-enable. submitBlocked reads form.pending and form.invalid, so this is what
@@ -5013,9 +6339,7 @@ class DynamicFormComponent {
      * filling the form in.
      */
     driftHint(field) {
-        const source = field.referencedEntityKey
-            ? `"${field.referencedEntityKey}"`
-            : 'its source entity';
+        const source = field.referencedEntityKey ? `"${field.referencedEntityKey}"` : 'its source entity';
         return `This field is linked to ${source} and its definition there has changed since it was linked.`;
     }
     resolveTabLabel(tab) {
@@ -5066,11 +6390,11 @@ class DynamicFormComponent {
         this.formReset.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", rules: "rules", initialData: "initialData", originalData: "originalData", userRoles: "userRoles", language: "language", readonly: "readonly", readOnlyFields: "readOnlyFields", showInfoBanners: "showInfoBanners", loading: "loading", error: "error", changeDebounceMs: "changeDebounceMs", preview: "preview" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange", saveRejected: "saveRejected" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService], viewQueries: [{ propertyName: "formPanel", first: true, predicate: ["formPanel"], descendants: true }, { propertyName: "fieldHosts", predicate: DynamicFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" novalidate>\n\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        \uD83D\uDD12 Critical field changed:\n        @for (field of changedCriticalFields(); track field.id) {\n          <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\n        }\n        \u2014 this differs from the value at the start of this session.\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!--\n      One tabpanel per tab, wrapping both branches. Focus moves here on a tab switch, and a\n      module tab is still a tab \u2014 putting the panel semantics on only the fields branch left\n      a module tab with nowhere for focus to land.\n    -->\n    <div\n      role=\"tabpanel\"\n      tabindex=\"-1\"\n      #formPanel\n      class=\"ngx-form__tabpanel\"\n      [attr.aria-label]=\"activeTabLabel\"\n    >\n    @if (activeTabModuleComponent) {\n      <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n        <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\n      </div>\n    } @else {\n      <!-- Fields for active tab (Responsive 12-column grid) -->\n      <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n        @for (field of fieldsForActiveTab; track field.id) {\n          <div\n            class=\"ngx-form__field-slot\"\n            [style.gridColumn]=\"getFieldSpan(field)\"\n            [attr.id]=\"'field-container-' + field.id\"\n            tabindex=\"-1\"\n          >\n            <ngx-dynamic-field\n              [field]=\"field\"\n              [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n              [config]=\"config\"\n              [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n              [language]=\"language\"\n              [readonly]=\"isFieldReadonly(field)\"\n              [userRoles]=\"userRoles\"\n            />\n            @if (field.hasDrift) {\n              <!--\n                Drift was previously visible only in the builder, so a referenced field whose\n                source had changed looked completely normal to the person filling the form in.\n                role=\"status\" rather than \"alert\": it is information, not an error.\n              -->\n              <span\n                class=\"ngx-field__drift\"\n                role=\"status\"\n                [attr.data-testid]=\"'field-' + field.id + '-drift'\"\n                [title]=\"driftHint(field)\"\n              >\u26A0 {{ driftHint(field) }}</span>\n            }\n            @if (field.criticalField && !readonly) {\n              <button\n                type=\"button\"\n                class=\"ngx-form__lock\"\n                [attr.data-testid]=\"'lock-' + field.id\"\n                [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                [attr.aria-label]=\"\n                  (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\n                \"\n                [title]=\"\n                  isFieldLocked(field)\n                    ? 'Critical field \u2014 click to unlock for editing'\n                    : 'Critical field \u2014 click to lock'\n                \"\n                (click)=\"toggleFieldLock(field)\"\n              >\n                {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    </div>\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button\n          type=\"button\"\n          class=\"ngx-form__reset\"\n          data-testid=\"form-reset\"\n          (click)=\"reset()\"\n          [disabled]=\"isSaving()\"\n        >\n          Reset\n        </button>\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\n          title=\"Shortcut: Ctrl+S\"\n        >\n          @if (isSaving() || loading) {\n            Saving\u2026\n          } @else {\n            Save\n          }\n        </button>\n      </div>\n    }\n\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    You do not have permission to view this record.\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media(max-width:768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[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" }, 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 });
 }
 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\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        \uD83D\uDD12 Critical field changed:\n        @for (field of changedCriticalFields(); track field.id) {\n          <span>{{ resolveFieldLabel(field) }}{{ $last ? '' : ', ' }}</span>\n        }\n        \u2014 this differs from the value at the start of this session.\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div class=\"ngx-form__tabs ngx-form__tabs--sub\" role=\"tablist\" data-testid=\"subtab-strip\" style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px;\">\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"(activeSubTabConfig?.id) === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"(activeSubTabConfig?.id) === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n          </button>\n        }\n      </div>\n    }\n\n    <!--\n      One tabpanel per tab, wrapping both branches. Focus moves here on a tab switch, and a\n      module tab is still a tab \u2014 putting the panel semantics on only the fields branch left\n      a module tab with nowhere for focus to land.\n    -->\n    <div\n      role=\"tabpanel\"\n      tabindex=\"-1\"\n      #formPanel\n      class=\"ngx-form__tabpanel\"\n      [attr.aria-label]=\"activeTabLabel\"\n    >\n    @if (activeTabModuleComponent) {\n      <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n        <ng-container *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"></ng-container>\n      </div>\n    } @else {\n      <!-- Fields for active tab (Responsive 12-column grid) -->\n      <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n        @for (field of fieldsForActiveTab; track field.id) {\n          <div\n            class=\"ngx-form__field-slot\"\n            [style.gridColumn]=\"getFieldSpan(field)\"\n            [attr.id]=\"'field-container-' + field.id\"\n            tabindex=\"-1\"\n          >\n            <ngx-dynamic-field\n              [field]=\"field\"\n              [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n              [config]=\"config\"\n              [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n              [language]=\"language\"\n              [readonly]=\"isFieldReadonly(field)\"\n              [userRoles]=\"userRoles\"\n            />\n            @if (field.hasDrift) {\n              <!--\n                Drift was previously visible only in the builder, so a referenced field whose\n                source had changed looked completely normal to the person filling the form in.\n                role=\"status\" rather than \"alert\": it is information, not an error.\n              -->\n              <span\n                class=\"ngx-field__drift\"\n                role=\"status\"\n                [attr.data-testid]=\"'field-' + field.id + '-drift'\"\n                [title]=\"driftHint(field)\"\n              >\u26A0 {{ driftHint(field) }}</span>\n            }\n            @if (field.criticalField && !readonly) {\n              <button\n                type=\"button\"\n                class=\"ngx-form__lock\"\n                [attr.data-testid]=\"'lock-' + field.id\"\n                [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                [attr.aria-label]=\"\n                  (isFieldLocked(field) ? 'Unlock ' : 'Lock ') + resolveFieldLabel(field)\n                \"\n                [title]=\"\n                  isFieldLocked(field)\n                    ? 'Critical field \u2014 click to unlock for editing'\n                    : 'Critical field \u2014 click to lock'\n                \"\n                (click)=\"toggleFieldLock(field)\"\n              >\n                {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n    </div>\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button\n          type=\"button\"\n          class=\"ngx-form__reset\"\n          data-testid=\"form-reset\"\n          (click)=\"reset()\"\n          [disabled]=\"isSaving()\"\n        >\n          Reset\n        </button>\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitBlocked\"\n          title=\"Shortcut: Ctrl+S\"\n        >\n          @if (isSaving() || loading) {\n            Saving\u2026\n          } @else {\n            Save\n          }\n        </button>\n      </div>\n    }\n\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    You do not have permission to view this record.\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:#d1d5db;background:#f9fafb}@media(max-width:768px){.ngx-form__panel{grid-template-columns:1fr}.ngx-form__field-slot{grid-column:span 12!important}}\n"] }]
+            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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rules: [{
@@ -5129,6 +6453,8 @@ const FIELD_NOT_FOUND = Symbol('field-not-found');
  * interactive quick-jump links, and baseline modification tracking.
  */
 class DynamicRecordFormComponent {
+    /** Library chrome, overridable via UI_TEXT. */
+    ui = inject(UiTextService);
     config;
     rules;
     initialData;
@@ -5393,8 +6719,7 @@ class DynamicRecordFormComponent {
             }
         }
         const scoped = this.rulesEvaluation.filterForTab(this.rules, tabId, this.config);
-        const ruleErrors = this.rulesEvaluation.evaluate(scoped, form.formValues(), this.originalBaseline())
-            .validationErrors;
+        const ruleErrors = this.rulesEvaluation.evaluate(scoped, form.formValues(), this.originalBaseline()).validationErrors;
         Object.assign(errors, ruleErrors);
         if (Object.keys(errors).length > 0) {
             this.sectionErrors.set(errors);
@@ -5561,6 +6886,11 @@ class DynamicRecordFormComponent {
     formatFieldLabel(field) {
         return resolveLabel(field.label, this.language);
     }
+    /** "Add <field> row" / "Edit <field> row" — one key each, because word order moves. */
+    rowDrawerTitle(field) {
+        const key = this.inlineRowIndex() === null ? 'addRowTitle' : 'editRowTitle';
+        return this.ui.text(key, this.language, { field: this.formatFieldLabel(field) });
+    }
     /** Summary values render through the shared core formatter, not a local stringifier. */
     formatFieldValue(field) {
         return formatDisplayValue(field.type, field.options, this.fieldValue(field.id), this.language);
@@ -5620,11 +6950,11 @@ class DynamicRecordFormComponent {
         }, { injector: this.injector });
     }
     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" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">Entity: {{ config.entity }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ headerToggleValue ? 'Yes' : 'No' }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"'Dismiss: ' + banner.message\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\u2715</button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      \uD83D\uDD12 Record modified from session baseline \u2014 unsaved changes pending.\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"'Click to jump to ' + formatFieldLabel(sf)\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">Editing this section</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          Cancel\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          Save section\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          Edit section\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >+ Row</button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\">Edit</button>\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\">Delete</button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">No rows yet.</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ inlineRowIndex() === null ? 'Add' : 'Edit' }} {{ formatFieldLabel(rowField) }} row</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">Cancel</button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">Save row</button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[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", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ 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    (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 });
 }
 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\">Entity: {{ config.entity }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ headerToggleValue ? 'Yes' : 'No' }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"'Dismiss: ' + banner.message\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\u2715</button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      \uD83D\uDD12 Record modified from session baseline \u2014 unsaved changes pending.\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"'Click to jump to ' + formatFieldLabel(sf)\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">Editing this section</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          Cancel\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          Save section\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          Edit section\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >+ Row</button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\">Edit</button>\n            <button type=\"button\" class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\">Delete</button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">No rows yet.</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ inlineRowIndex() === null ? 'Add' : 'Edit' }} {{ formatFieldLabel(rowField) }} row</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">Cancel</button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">Save row</button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-record-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormComponent, DynamicFieldComponent], template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordTitle\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordTitle }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ 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    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #f3f4f6}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px}.ngx-record-editor__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}.ngx-record-editor__title{font-size:20px;font-weight:700;color:#111827;margin:0}.ngx-record-editor__subtitle{font-size:13px;color:#6b7280}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500}.ngx-record-editor__banner--info{background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__banner--error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:12px;color:#6b7280}.ngx-record-editor__banner--warning{background:#fffbeb;border:1px solid #fef3c7;color:#b45309}.ngx-record-editor__rows{border:1px solid #f3f4f6;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#f9fafb}.ngx-record-editor__row-text{flex:1;font-size:13px;overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:none;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:12px;padding:2px 8px}.ngx-record-editor__row-empty{font-size:12px;color:#6b7280;margin:0}.ngx-record-editor__drawer{border:1px solid #dbeafe;background:#f8fafc;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:#f9fafb;border:1px solid #f3f4f6;border-radius:8px;padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}.ngx-record-editor__summary-item:hover{background:#eff6ff}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;font-weight:600}.ngx-record-editor__summary-val{font-size:14px;font-weight:600;color:#1f2937}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rules: [{
@@ -5666,5 +6996,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_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_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UPLOAD_HANDLER, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, provideBuiltInFieldTypes, provideFieldTypes, provideNgxDynamicEntity, refreshChoiceOptions };
+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 };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map