ngx-dynamic-entity 2.1.0 → 2.2.0

package/fesm2022/ngx-dynamic-entity.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, Input, ChangeDetectionStrategy, Component, ChangeDetectorRef, DestroyRef, Injector, isDevMode, ViewContainerRef, ViewChild, forwardRef, Optional, Inject, EventEmitter, ElementRef, computed, afterNextRender, HostListener, ViewChildren, Output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { ReactiveFormsModule, Validators, FormBuilder, FormGroup, FormArray, FormsModule } from '@angular/forms';
-import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, fileRefName, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, getTabPath, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, toRefToken, fieldRefFor, collectFieldScopes, refOf, applyAutoPatch, applyPatchOnTrue, fieldsUnderTab, valuesEqual, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } from '@dynamic-entity/core';
+import { resolveLabel, formatDisplayValue, normalizeLookupValues, lookupValuesToOptions, valuesMatch, resolveOptionLabel, resolveOptionValue, buildReferenceCacheKey, normalizeReferenceOptions, entityKeyFromCacheKey, applyCascadeFilter, resolveEffectiveMask, shouldMaskField, findTab, isValidUrl, isValidPhone, fileRefName, sliderBounds, ratingScale, normalizeHexColor, normalizeTags, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, getTabPath, fieldRefFor, toRefToken, refOf, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, collectFieldScopes, applyAutoPatch, isUnsafePath, fieldsUnderTab, valuesEqual, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } from '@dynamic-entity/core';
 export { formatDisplayValue, normalizeConfig, normalizeOption, resolveLabel, resolveOptionLabel, resolveOptionValue, valuesMatch } from '@dynamic-entity/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, isObservable, firstValueFrom } from 'rxjs';
@@ -196,7 +196,7 @@ const ENTITY_REF_CACHE_STORE = new InjectionToken('ENTITY_REF_CACHE_STORE', {
  */
 const SYSTEM_DEFAULT_CAN_EDIT = new InjectionToken('SYSTEM_DEFAULT_CAN_EDIT');
 /**
- * Registry/Resolver for resolving an EntityFormConfig by entity key across entities (Phase 8).
+ * Registry/Resolver for resolving an EntityFormConfig by entity key across entities.
  * Enables cross-entity field referencing (`isReferenced`, `referencedEntityKey`, `referencedFieldId`, `hasDrift`).
  */
 const CONFIG_SOURCE = new InjectionToken('CONFIG_SOURCE');
@@ -224,8 +224,7 @@ const MARKDOWN_RENDERER = new InjectionToken('MARKDOWN_RENDERER');
  *
  * Masking is presentational — see SECURITY.md — and what it prints is a product decision:
  * `••••••••` reads as a redaction, "Hidden" reads as a permission, and a localized string
- * reads as neither in English. It was a literal repeated across every field component, so
- * there was no way to choose.
+ * reads as neither in English, so it is the host's to choose.
  *
  * @example
  * { provide: MASKED_PLACEHOLDER, useValue: '••••••••' }
@@ -303,6 +302,10 @@ const DEFAULT_VALIDATION_MESSAGES = {
     required: 'This field is required.',
     requiredSelection: 'Please select an option.',
     email: 'Please enter a valid email address.',
+    url: 'Please enter a full web address, starting with https://.',
+    phone: 'Please enter a valid phone number.',
+    minItems: (_lang, err) => `At least ${err?.requiredLength} required.`,
+    maxItems: (_lang, err) => `No more than ${err?.requiredLength} allowed.`,
     pattern: 'Invalid format.',
     minlength: (_lang, err) => `Minimum ${err?.requiredLength} characters required.`,
     maxlength: (_lang, err) => `Maximum ${err?.requiredLength} characters allowed.`,
@@ -319,18 +322,35 @@ const DEFAULT_VALIDATION_MESSAGES = {
  * first error actually on the control — so the shared list costs nothing and spares every
  * field component a near-identical copy of it.
  */
-const COMMON_ORDER = ['required', 'email', 'min', 'max', 'minlength', 'maxlength', 'pattern'];
+const COMMON_ORDER = [
+    'required',
+    'email',
+    'url',
+    'phone',
+    'min',
+    'max',
+    'minlength',
+    'maxlength',
+    'pattern',
+];
 /**
  * Where a field type disagrees with the common list.
  *
- * Only three do, and each for a reason about how the control reads rather than what it can
- * raise: a select says "Please select an option" where an input says "This field is
- * required"; a number that is neither required nor out of range is not "invalid", it is not a
- * number; and a control with no text in it cannot fail a length or format rule.
+ * Each for a reason about how the control reads rather than what it can raise: a select says
+ * "Please select an option" where an input says "This field is required"; a number that is
+ * neither required nor out of range is not "invalid", it is not a number; a control with no
+ * text in it cannot fail a length or format rule; and a `tags` list is counted in items, not
+ * characters, although Angular reports both as `minlength`.
  */
 const ORDER_BY_FIELD_TYPE = {
     dropdown: { order: [['required', 'requiredSelection']], fallback: 'invalidSelection' },
     number: { order: ['required', 'min', 'max'], fallback: 'invalidNumber' },
+    slider: { order: ['required', 'min', 'max'], fallback: 'invalid' },
+    rating: { order: ['required', 'min', 'max'], fallback: 'invalid' },
+    tags: {
+        order: ['required', ['minlength', 'minItems'], ['maxlength', 'maxItems'], 'pattern'],
+        fallback: 'invalid',
+    },
     boolean: { order: ['required', 'pattern'], fallback: 'invalid' },
     checkbox: { order: ['required', 'pattern'], fallback: 'invalid' },
     file: { order: ['required', 'pattern'], fallback: 'invalid' },
@@ -363,12 +383,10 @@ class ValidationMessagesService {
     /**
      * The message for a field, chosen by its **type** rather than by a list the caller supplies.
      *
-     * Every field component used to pass its own copy of the key order, and the copies were
-     * near-identical — which was tolerable while the field itself was the only thing that
-     * rendered a message. It stopped being tolerable when the error summary above the form
-     * started naming what is wrong with each field: the summary has no field component to ask
-     * (the offending field is usually on a tab that is not rendered), so it would have needed a
-     * second copy of the same table, and a dropdown would have said "This field is required" in
+     * Both the field itself and the error summary above the form render this message, and the
+     * summary has no field component to ask (the offending field is usually on a tab that is
+     * not rendered). Per-component key orders would drift, and a dropdown would say "This
+     * field is required" in
      * the summary and "Please select an option" under the control.
      *
      * One table, read from both places, is what keeps those two sentences the same sentence.
@@ -388,10 +406,10 @@ class ValidationMessagesService {
             return '';
         return typeof message === 'function' ? message(language, error) : message;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidationMessagesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidationMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidationMessagesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidationMessagesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidationMessagesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -399,14 +417,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
 /**
  * DOM ids that survive being rendered more than once.
  *
- * A field component used to derive its control's id straight from `field.id`. That is unique
- * in a config and *not* unique in a document: an `array` field renders the same child fields
- * once per row, so a two-row Contacts array put two `#name` inputs on the page. `<label for>`
- * resolves to the first match in document order, so clicking the second row's label focused
- * the first row's input, and a screen reader read the same association twice. Duplicate ids on
- * focusable elements are also a WCAG failure in their own right.
+ * `field.id` is unique in a config and *not* unique in a document: an `array` field renders
+ * the same child fields once per row. `<label for>` resolves to the first match, so a second
+ * row's label would focus the first row's input — and duplicate ids on focusable elements are
+ * a WCAG failure in their own right.
  *
- * The fix is a counter, which is what Angular Material does for the same reason: the id stays
+ * The answer is a counter, which is what Angular Material does for the same reason: the id stays
  * readable — `email-de7` — and is unique for the lifetime of the page. It is deliberately not
  * derived from the row index, because a field component is given exactly five inputs and none
  * of them says where it is; adding a sixth would change the contract every custom field type
@@ -506,8 +522,8 @@ class TextFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TextFieldComponent, isStandalone: true, selector: "ngx-text-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--text"
       [attr.data-testid]="'field-' + field.id"
@@ -567,7 +583,7 @@ class TextFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -669,12 +685,6 @@ class TextareaFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -688,8 +698,8 @@ class TextareaFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextareaFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TextareaFieldComponent, isStandalone: true, selector: "ngx-textarea-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--textarea"
       [attr.data-testid]="'field-' + field.id"
@@ -738,7 +748,7 @@ class TextareaFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -865,6 +875,11 @@ const DEFAULT_UI_TEXT = {
     noImage: 'No image',
     uploadImage: 'Upload',
     changeImage: 'Change',
+    // Rating, colour and tags
+    ratingValue: '{value} of {max}',
+    clearValue: 'Clear {field}',
+    addTagPlaceholder: 'Type and press Enter',
+    removeTag: 'Remove {tag}',
     // Month / year pickers
     month: 'Month',
     year: 'Year',
@@ -1007,10 +1022,10 @@ class UiTextService {
     text(key, language = 'en', params) {
         return resolveUiText(this.overrides, DEFAULT_UI_TEXT, key, language, params);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UiTextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UiTextService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: UiTextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UiTextService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1124,12 +1139,6 @@ class MarkdownFieldComponent {
         this.cached = { source, html };
         return html;
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1143,8 +1152,8 @@ class MarkdownFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MarkdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MarkdownFieldComponent, isStandalone: true, selector: "ngx-markdown-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MarkdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MarkdownFieldComponent, isStandalone: true, selector: "ngx-markdown-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, usesOnChanges: true, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--markdown"
       [attr.data-testid]="'field-' + field.id"
@@ -1244,7 +1253,7 @@ class MarkdownFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MarkdownFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MarkdownFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1399,8 +1408,8 @@ class NumberFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: NumberFieldComponent, isStandalone: true, selector: "ngx-number-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--number"
       [attr.data-testid]="'field-' + field.id"
@@ -1460,7 +1469,7 @@ class NumberFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NumberFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1575,12 +1584,6 @@ class CurrencyFieldComponent {
             return '$';
         }
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1594,8 +1597,8 @@ class CurrencyFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CurrencyFieldComponent, isStandalone: true, selector: "ngx-currency-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: CurrencyFieldComponent, isStandalone: true, selector: "ngx-currency-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--currency"
       [attr.data-testid]="'field-' + field.id"
@@ -1650,7 +1653,7 @@ class CurrencyFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1748,12 +1751,6 @@ class EmailFieldComponent {
     get placeholder() {
         return resolveLabel(this.field?.placeholder, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1767,8 +1764,8 @@ class EmailFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EmailFieldComponent, isStandalone: true, selector: "ngx-email-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EmailFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EmailFieldComponent, isStandalone: true, selector: "ngx-email-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--email"
       [attr.data-testid]="'field-' + field.id"
@@ -1816,10 +1813,7 @@ class EmailFieldComponent {
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <!-- One branch, resolved by the service. The template used to spell out "Email is
-               required" and "Enter a valid email address" itself, so a host configuring
-               validationMessages was overridden by markup it could not reach. The service
-               defaults say the same thing. -->
+          <!-- One branch, resolved by the service, so a host's validationMessages apply. -->
           <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
             errorMessage
           }}</span>
@@ -1828,7 +1822,7 @@ class EmailFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EmailFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EmailFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1883,10 +1877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
           [attr.disabled]="field.disabled ? true : null"
         />
         @if (errorMessage) {
-          <!-- One branch, resolved by the service. The template used to spell out "Email is
-               required" and "Enter a valid email address" itself, so a host configuring
-               validationMessages was overridden by markup it could not reach. The service
-               defaults say the same thing. -->
+          <!-- One branch, resolved by the service, so a host's validationMessages apply. -->
           <span class="ngx-field__error" [attr.data-testid]="'field-' + field.id + '-error'" [id]="domId('-error')">{{
             errorMessage
           }}</span>
@@ -1937,12 +1928,6 @@ class PasswordFieldComponent {
     toggleVisibility() {
         this.visible.update(v => !v);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -1956,8 +1941,8 @@ class PasswordFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PasswordFieldComponent, isStandalone: true, selector: "ngx-password-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: PasswordFieldComponent, isStandalone: true, selector: "ngx-password-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--password"
       [attr.data-testid]="'field-' + field.id"
@@ -2017,7 +2002,7 @@ class PasswordFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PasswordFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PasswordFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2118,12 +2103,6 @@ class CheckboxFieldComponent {
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
-    /**
-     * Configured messages reach this field too.
-     *
-     * It rendered no error element at all, so a required checkbox left unticked told the user
-     * nothing — and `validationMessages` could not reach a field that never displayed one.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2137,8 +2116,8 @@ class CheckboxFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: CheckboxFieldComponent, isStandalone: true, selector: "ngx-checkbox-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--checkbox"
       [attr.data-testid]="'field-' + field.id"
@@ -2194,7 +2173,7 @@ class CheckboxFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2296,12 +2275,6 @@ class BooleanFieldComponent {
     get label() {
         return resolveLabel(this.field?.label, this.language);
     }
-    /**
-     * Configured messages reach this field too.
-     *
-     * It rendered no error element at all, so a required checkbox left unticked told the user
-     * nothing — and `validationMessages` could not reach a field that never displayed one.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2315,8 +2288,8 @@ class BooleanFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BooleanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: BooleanFieldComponent, isStandalone: true, selector: "ngx-boolean-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BooleanFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: BooleanFieldComponent, isStandalone: true, selector: "ngx-boolean-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--boolean"
       [attr.data-testid]="'field-' + field.id"
@@ -2380,7 +2353,7 @@ class BooleanFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: BooleanFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: BooleanFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2486,14 +2459,10 @@ class DateFieldComponent {
     /**
      * ISO 8601 date → display string, through the formatter the host configured.
      *
-     * This used to call `toLocaleDateString()` directly, which meant `setDateFormatters` — the
-     * one seam for choosing how a date is rendered — reached the record summary and the `time`
-     * field but not this one. A host that configured formatters got them almost everywhere,
-     * and silently did not get them on the field type most likely to be the reason they
-     * configured formatters at all.
+     * Never call `toLocaleDateString()` directly here: `setDateFormatters` is the one seam for
+     * choosing how a date renders, and every date display has to go through it.
      *
-     * The default formatter is `toLocaleDateString()` with no locale, so an application that
-     * has not called `setDateFormatters` renders exactly what it rendered before.
+     * The default formatter is `toLocaleDateString()` with no locale.
      */
     formatDate(value) {
         if (!value)
@@ -2508,12 +2477,6 @@ class DateFieldComponent {
             return value;
         return formatDisplayValue('date', undefined, value, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2527,8 +2490,8 @@ class DateFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DateFieldComponent, isStandalone: true, selector: "ngx-date-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--date"
       [attr.data-testid]="'field-' + field.id"
@@ -2578,7 +2541,7 @@ class DateFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2652,8 +2615,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * A bare calendar date is pinned to *local* midnight. `new Date('2020-01-01')` reads a
  * date-only string as UTC midnight, which renders as the previous day anywhere west of
- * Greenwich — and every legacy `datetime` value has exactly that shape, because the type
- * used to render through `DateFieldComponent` and its `type="date"` input.
+ * Greenwich — and legacy `datetime` values written by a `type="date"` input have exactly
+ * that shape.
  */
 function parseStored(value) {
     if (value === null || value === undefined || value === '')
@@ -2734,12 +2697,6 @@ class DateTimeFieldComponent {
             return '—';
         return formatDisplayValue('datetime', undefined, d.toISOString(), this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2753,8 +2710,8 @@ class DateTimeFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DateTimeFieldComponent, isStandalone: true, selector: "ngx-date-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DateTimeFieldComponent, isStandalone: true, selector: "ngx-date-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--datetime"
       [attr.data-testid]="'field-' + field.id"
@@ -2805,7 +2762,7 @@ class DateTimeFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DateTimeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -2911,12 +2868,6 @@ class TimeFieldComponent {
     formatTime(value) {
         return formatDisplayValue('time', undefined, value, this.language);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -2930,8 +2881,8 @@ class TimeFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: TimeFieldComponent, isStandalone: true, selector: "ngx-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TimeFieldComponent, isStandalone: true, selector: "ngx-time-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--time"
       [attr.data-testid]="'field-' + field.id"
@@ -2981,7 +2932,7 @@ class TimeFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: TimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3120,12 +3071,6 @@ class MonthYearFieldComponent {
         const monthName = MONTH_NAMES[parseInt(monthNum, 10) - 1];
         return monthName && year ? `${monthName} ${year}` : String(value);
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -3139,8 +3084,8 @@ class MonthYearFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MonthYearFieldComponent, isStandalone: true, selector: "ngx-month-year-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MonthYearFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MonthYearFieldComponent, isStandalone: true, selector: "ngx-month-year-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--month-year"
       [attr.data-testid]="'field-' + field.id"
@@ -3219,7 +3164,7 @@ class MonthYearFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MonthYearFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MonthYearFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3520,10 +3465,10 @@ class LookupRegistryService {
             value !== null &&
             typeof value.subscribe === 'function');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LookupRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LookupRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LookupRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LookupRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LookupRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LookupRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3610,10 +3555,7 @@ class DropdownFieldComponent {
      * The value this option stores — the option object itself.
      *
      * Kept as a method rather than binding `option` straight into the template, because it is
-     * the one place that says *why* the two are the same thing. It used to delegate to
-     * `getOptionStoredValue`, an exported identity function whose two branches returned their
-     * argument unchanged; naming a transformation that does not happen is worse than naming
-     * nothing, because a reader has to go and check.
+     * the one place that says *why* the two are the same thing.
      */
     getOptStoredVal(option) {
         return option;
@@ -3652,8 +3594,8 @@ class DropdownFieldComponent {
         // dropdown than "This field is required", and both stay independently overridable.
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DropdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DropdownFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DropdownFieldComponent, isStandalone: true, selector: "ngx-dropdown-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--dropdown"
       [attr.data-testid]="'field-' + field.id"
@@ -3723,7 +3665,7 @@ class DropdownFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DropdownFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DropdownFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -3875,10 +3817,7 @@ class RadioFieldComponent {
      * The value this option stores — the option object itself.
      *
      * Kept as a method rather than binding `option` straight into the template, because it is
-     * the one place that says *why* the two are the same thing. It used to delegate to
-     * `getOptionStoredValue`, an exported identity function whose two branches returned their
-     * argument unchanged; naming a transformation that does not happen is worse than naming
-     * nothing, because a reader has to go and check.
+     * the one place that says *why* the two are the same thing.
      */
     getOptStoredVal(option) {
         return option;
@@ -3928,12 +3867,6 @@ class RadioFieldComponent {
             return cached;
         return typeof value === 'object' ? resolveLabel(value, this.language) : String(value ?? '—');
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -3947,8 +3880,8 @@ class RadioFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: RadioFieldComponent, isStandalone: true, selector: "ngx-radio-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RadioFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: RadioFieldComponent, isStandalone: true, selector: "ngx-radio-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--radio"
       [attr.data-testid]="'field-' + field.id"
@@ -4012,7 +3945,7 @@ class RadioFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RadioFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RadioFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4141,10 +4074,7 @@ class MultiSelectFieldComponent {
      * The value this option stores — the option object itself.
      *
      * Kept as a method rather than binding `option` straight into the template, because it is
-     * the one place that says *why* the two are the same thing. It used to delegate to
-     * `getOptionStoredValue`, an exported identity function whose two branches returned their
-     * argument unchanged; naming a transformation that does not happen is worse than naming
-     * nothing, because a reader has to go and check.
+     * the one place that says *why* the two are the same thing.
      */
     getOptStoredVal(option) {
         return option;
@@ -4168,12 +4098,6 @@ class MultiSelectFieldComponent {
         })
             .join(', ');
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -4187,8 +4111,8 @@ class MultiSelectFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MultiSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: MultiSelectFieldComponent, isStandalone: true, selector: "ngx-multi-select-field", inputs: { field: "field", language: "language", control: "control", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--multiSelect"
       [attr.data-testid]="'field-' + field.id"
@@ -4248,7 +4172,7 @@ class MultiSelectFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MultiSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: MultiSelectFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4347,10 +4271,10 @@ class EntityRefRegistryService {
     has(entityKey) {
         return this.registry.has(entityKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4510,10 +4434,10 @@ class EntityReferenceService {
     matches(a, b, lang = 'en') {
         return valuesMatch(a, b, lang);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityReferenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityReferenceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4634,10 +4558,10 @@ class CascadeDataService {
         walkTabs(config?.tabs);
         return found;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CascadeDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CascadeDataService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CascadeDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CascadeDataService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: CascadeDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: CascadeDataService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4658,10 +4582,10 @@ class EntityRefSelectionService {
     emit(fieldId, option) {
         this.subject.next({ fieldId, option });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefSelectionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefSelectionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefSelectionService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4776,12 +4700,6 @@ class EntityRefFieldComponent {
             void this.reload();
         });
     }
-    /**
-     * Resolved through `ValidationMessagesService`, so `provideNgxDynamicEntity({
-     * validationMessages })` reaches this field. It used to render a fixed
-     * "This field has an error", which made a documented, configurable feature work on three
-     * of fifteen field types.
-     */
     /** Author help text, shown under the control and named by `aria-describedby`. */
     get hint() {
         return resolveLabel(this.field?.hint, this.language);
@@ -4795,8 +4713,8 @@ class EntityRefFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityRefFieldComponent, isStandalone: true, selector: "ngx-entity-ref-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--entity-ref"
       [attr.data-testid]="'field-' + field.id"
@@ -4861,7 +4779,7 @@ class EntityRefFieldComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityRefFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityRefFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4989,10 +4907,10 @@ class FieldRegistryService {
     registeredTypes() {
         return [...new Set([...this.dynamicRegistry.keys(), ...this.consumerRegistry.keys()])].sort();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FieldRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FieldRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5031,10 +4949,10 @@ class RbacService {
             canDelete: this.hasPermission(userRoles, config.permissions?.delete),
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RbacService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RbacService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RbacService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RbacService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RbacService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RbacService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5127,7 +5045,7 @@ class DynamicFieldComponent {
      *
      * `detectChanges()` rather than `markForCheck()`: a selection that arrives from a native
      * `change` event (or Playwright) may not be followed by another Angular tick, so a dirty
-     * flag would never be flushed. Running CD on the hosted component now is the copy showing up.
+     * flag would never be flushed. Running CD on the hosted component immediately is what shows the copied value.
      *
      * Done here rather than in each of the eighteen field components: the host owns the
      * component reference, so one subscription covers every type including custom ones.
@@ -5156,10 +5074,10 @@ class DynamicFieldComponent {
         ref.setInput('readonly', this.readonly || !!this.field.readonly);
         ref.setInput('masked', masked);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: DynamicFieldComponent, isStandalone: true, selector: "ngx-dynamic-field", inputs: { field: "field", control: "control", config: "config", currentTabId: "currentTabId", language: "language", readonly: "readonly", userRoles: "userRoles" }, viewQueries: [{ propertyName: "fieldHost", first: true, predicate: ["fieldHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #fieldHost></ng-container>`, isInline: true, styles: [":host{display:block;width:100%;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.24", type: DynamicFieldComponent, isStandalone: true, selector: "ngx-dynamic-field", inputs: { field: "field", control: "control", config: "config", currentTabId: "currentTabId", language: "language", readonly: "readonly", userRoles: "userRoles" }, viewQueries: [{ propertyName: "fieldHost", first: true, predicate: ["fieldHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #fieldHost></ng-container>`, isInline: true, styles: [":host{display:block;width:100%;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-field', standalone: true, template: `<ng-container #fieldHost></ng-container>`, styles: [":host{display:block;width:100%;min-width:0}\n"] }]
         }], propDecorators: { field: [{
@@ -5203,8 +5121,8 @@ class GroupFieldComponent {
         const group = this.control;
         return group?.get(childId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: GroupFieldComponent, isStandalone: true, selector: "ngx-group-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: GroupFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: GroupFieldComponent, isStandalone: true, selector: "ngx-group-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
     <fieldset
       class="ngx-field ngx-field--group"
       [attr.data-testid]="'field-' + field.id"
@@ -5245,7 +5163,7 @@ class GroupFieldComponent {
     </fieldset>
   `, isInline: true, styles: [".ngx-field--group{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#fafafa}.ngx-field__legend{font-weight:600;font-size:14px;padding:0 8px;color:#334155}.ngx-field__group-children{display:flex;flex-direction:column;gap:12px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => DynamicFieldComponent), selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: GroupFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: GroupFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-group-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
     <fieldset
@@ -5303,6 +5221,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }] } });
 
+/**
+ * A format check that, like `Validators.email`, passes an empty value.
+ *
+ * Emptiness is `required`'s question. Answering it here too would give an optional field an
+ * error the moment it was cleared.
+ */
+function formatValidator(key, test) {
+    return (control) => {
+        const value = control.value;
+        if (value === null || value === undefined || value === '')
+            return null;
+        return test(String(value)) ? null : { [key]: true };
+    };
+}
+/** The built-in web address check. The rule itself is in core, so an import applies the same one. */
+const urlValidator = formatValidator('url', isValidUrl);
+/** The built-in phone number check. The rule itself is in core, so an import applies the same one. */
+const phoneValidator = formatValidator('phone', isValidPhone);
 /**
  * ValidatorRegistryService — resolves validator configs / key strings to Angular ValidatorFns.
  */
@@ -5321,6 +5257,10 @@ class ValidatorRegistryService {
             return Validators.required;
         if (validatorKey === 'email')
             return Validators.email;
+        if (validatorKey === 'url')
+            return urlValidator;
+        if (validatorKey === 'phone')
+            return phoneValidator;
         const [name, param] = validatorKey.split(':');
         const value = parseFloat(param);
         if (name === 'min' && !isNaN(value))
@@ -5370,10 +5310,12 @@ class ValidatorRegistryService {
         }
         if (config.email)
             fnList.push(Validators.email);
-        // Named validators from the consumer registry. This branch previously hardcoded the
-        // built-ins and consulted the registry only for the `string[]` form of this config, so
-        // a validator the consumer had registered could not be named from a typed schema
-        // without casting it to `any`.
+        if (config.url)
+            fnList.push(urlValidator);
+        if (config.phone)
+            fnList.push(phoneValidator);
+        // Named validators from the consumer registry, so a registered validator can be named
+        // from a typed schema.
         for (const key of config.custom ?? []) {
             const fn = this.resolve(key);
             if (fn)
@@ -5409,10 +5351,9 @@ class ValidatorRegistryService {
     /**
      * Say when a named validator resolved to nothing.
      *
-     * It used to be dropped in silence, which is the worst failure mode this library has: the
-     * schema says the field is checked, the field is not checked, the form saves, and nothing
-     * anywhere said so. For `customAsync` that is typically a uniqueness check, so the duplicate
-     * lands in the database.
+     * Silence would be the worst failure mode this library has: the schema says the field is
+     * checked, the field is not checked, the form saves, and nothing says so. For
+     * `customAsync` that is typically a uniqueness check, so the duplicate lands in the database.
      *
      * Dev only, once per name — this runs while controls are built, which happens on every
      * config change. `validateConfig` with `knownValidators` is the build-time version of the
@@ -5430,10 +5371,10 @@ class ValidatorRegistryService {
         this.warned.add(id);
         console.warn(`[ngx-dynamic-entity] ${message}`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidatorRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidatorRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidatorRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ValidatorRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ValidatorRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5486,8 +5427,8 @@ class ArrayFieldComponent {
         this.formArray.removeAt(index);
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ArrayFieldComponent, isStandalone: true, selector: "ngx-array-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ArrayFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ArrayFieldComponent, isStandalone: true, selector: "ngx-array-field", inputs: { field: "field", control: "control", config: "config", language: "language", readonly: "readonly", masked: "masked", userRoles: "userRoles" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--array"
       [attr.data-testid]="'field-' + field.id"
@@ -5566,7 +5507,7 @@ class ArrayFieldComponent {
     </div>
   `, isInline: true, styles: [".ngx-field--array{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px;background:#f8fafc}.ngx-field__array-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ngx-field__array-add-btn{background:#2563eb;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-weight:500;cursor:pointer}.ngx-field__array-add-btn:hover{background:#1d4ed8}.ngx-field__array-list{display:flex;flex-direction:column;gap:12px}.ngx-field__array-item{background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:12px}.ngx-field__array-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid #f1f5f9;padding-bottom:6px}.ngx-field__array-item-title{font-weight:600;font-size:13px;color:#475569}.ngx-field__array-remove-btn{background:#ef4444;color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:12px;cursor:pointer}.ngx-field__array-empty{color:#94a3b8;font-style:italic;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => DynamicFieldComponent), selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ArrayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ArrayFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-array-field', standalone: true, imports: [ReactiveFormsModule, forwardRef(() => DynamicFieldComponent)], template: `
     <div
@@ -5740,10 +5681,10 @@ class FileUploadService {
             value !== null &&
             typeof value.subscribe === 'function');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileUploadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileUploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileUploadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileUploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileUploadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -5828,8 +5769,8 @@ class ImageFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImageFieldComponent, isStandalone: true, selector: "ngx-image-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImageFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImageFieldComponent, isStandalone: true, selector: "ngx-image-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--image"
       [attr.data-testid]="'field-' + field.id"
@@ -5908,7 +5849,7 @@ class ImageFieldComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImageFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImageFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6078,8 +6019,8 @@ class FileFieldComponent {
             return '';
         return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: FileFieldComponent, isStandalone: true, selector: "ngx-file-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: FileFieldComponent, isStandalone: true, selector: "ngx-file-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
     <div
       class="ngx-field ngx-field--file"
       [attr.data-testid]="'field-' + field.id"
@@ -6161,7 +6102,7 @@ class FileFieldComponent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FileFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FileFieldComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6263,220 +6204,1701 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             }] } });
 
 /**
- * Field-type registration — the tree-shaking seam.
- *
- * `FieldRegistryService` imports no components. Whatever you register here is what gets
- * bundled, so an app that only uses text/number/dropdown pays for three components and
- * their imports, not twenty-one.
- *
- * ```ts
- * // Everything (convenient; bundles all built-ins):
- * provideNgxDynamicEntity(), provideBuiltInFieldTypes()
- *
- * // Only what this app renders:
- * provideFieldTypes({ text: TextFieldComponent, number: NumberFieldComponent })
- * ```
- *
- * Both merge into `FIELD_TYPE_REGISTRY`; later registrations win on key collision.
- */
-/** Map of every built-in field type key → component. Referencing this pulls in all of them. */
-function builtInFieldTypes() {
-    return {
-        text: TextFieldComponent,
-        textarea: TextareaFieldComponent,
-        markdown: MarkdownFieldComponent,
-        number: NumberFieldComponent,
-        currency: CurrencyFieldComponent,
-        email: EmailFieldComponent,
-        password: PasswordFieldComponent,
-        checkbox: CheckboxFieldComponent,
-        boolean: BooleanFieldComponent,
-        date: DateFieldComponent,
-        datetime: DateTimeFieldComponent,
-        time: TimeFieldComponent,
-        monthYear: MonthYearFieldComponent,
-        dropdown: DropdownFieldComponent,
-        radio: RadioFieldComponent,
-        multiSelect: MultiSelectFieldComponent,
-        'entity-ref': EntityRefFieldComponent,
-        group: GroupFieldComponent,
-        array: ArrayFieldComponent,
-        image: ImageFieldComponent,
-        file: FileFieldComponent,
-    };
-}
-/** Register a specific set of field types. Only the components you name are bundled. */
-function provideFieldTypes(types) {
-    return makeEnvironmentProviders([
-        { provide: FIELD_TYPE_SETS, useValue: types, multi: true },
-    ]);
-}
-/** Register all 21 built-in field type keys. Convenience for apps that use most of them. */
-function provideBuiltInFieldTypes() {
-    return provideFieldTypes(builtInFieldTypes());
-}
-
-/**
- * HookRegistryService — stores and runs Angular-side pre/post hooks.
- * Consumers register hooks via provideNgxDynamicEntity({ hooks: { 'clients:beforeSave': fn } }).
- */
-class HookRegistryService {
-    registry = inject(HOOK_REGISTRY, { optional: true }) ?? new Map();
-    has(key) {
-        return this.registry.has(key);
-    }
-    async run(key, data, context = {}) {
-        const hook = this.registry.get(key);
-        if (!hook)
-            return data;
-        return hook(data, context);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HookRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HookRegistryService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HookRegistryService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * RulesEvaluationService — evaluates rules, and owns what a result *means*.
+ * URL field: a `type="url"` input, and a link when read-only.
  *
- * It used to be two passthrough methods, with the interpretation spread across the component:
- * the render filter decided one way what a rule result did to a field, and the validity sync
- * decided again forty lines further down. They disagreed about what "every field" meant, and
- * the consequence was a required field inside a `group` that a rule had hidden holding
- * `form.invalid` true forever with nothing on screen to explain it.
- *
- * Precedence lives here now, in one method that both callers go through. Still stateless —
- * every method takes the result it is interpreting, so there is nothing to go stale against a
- * rebuilt form and nothing to reset between configs.
+ * The read-only link is rendered only for a value that passes `isValidUrl`, meaning an http or
+ * https address. A record can hold anything, including `javascript:`, and a field whose job is
+ * to show an address must not turn a stored script into something to click. Anything else is
+ * shown as plain text.
  */
-class RulesEvaluationService {
+class UrlFieldComponent {
     /**
-     * Evaluate rules against form values and optional original baseline values.
+     * 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`.
      */
-    evaluate(rules, values, originalValues, options) {
-        return evaluateFormRules(rules, values, originalValues, options);
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
     }
-    /**
-     * Filter rules pertinent to a single tab.
-     */
-    filterForTab(rules, tabId, config) {
-        return filterRulesForTab(rules, tabId, config);
+    /** Overridable via MASKED_PLACEHOLDER; the default is the historic literal. */
+    maskedText = inject(MASKED_PLACEHOLDER, { optional: true }) ?? 'XXXXXXXXX';
+    messages = inject(ValidationMessagesService);
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
     }
-    /**
-     * Whether a field renders, under the precedence documented on `RuleEvaluationResult`.
-     *
-     * An explicit hide beats everything. A show beats static hiding — `visibility: false`, or a
-     * `showWhen` that does not currently hold — because a rule that could only hide what the
-     * config already hides would have nothing to say, and `{ visibility: true }` was a
-     * documented no-op until it did. Otherwise the config's own visibility decides.
-     */
-    isFieldVisible(result, field, names, values) {
-        const sets = this.nameSets(result);
-        if (names.some(name => sets.hidden.has(name)))
-            return false;
-        if (names.some(name => sets.shown.has(name)))
-            return true;
-        return evaluateFieldVisibility(field, values);
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, this.language);
     }
-    /** The same precedence for a tab. */
-    isTabVisible(result, tab) {
-        if (result.hiddenTabs.includes(tab.id))
-            return false;
-        return tab.visibility !== false || result.shownTabs.includes(tab.id);
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
     }
-    /**
-     * Keep a hidden field's control out of form validity.
-     *
-     * A field hidden by a rule or a `showWhen` is filtered out of the render, but its
-     * validators stay attached — so a hidden *required* field holds `form.invalid` true
-     * forever, permanently disabling Save with nothing on screen to explain why.
-     *
-     * Disabling is the fix rather than stripping validators: Angular excludes disabled controls
-     * from validity, and the field's own validators survive intact for when it comes back.
-     * Values are untouched — a disabled control still carries its value, so rule evaluation and
-     * the emitted record see exactly what they saw before. That also keeps this from feeding
-     * back on itself: hiding a field cannot change the values the rules are evaluated over.
-     *
-     * The predicate is `isFieldVisible`, the same one the render filter uses, so what is on
-     * screen and what counts toward validity cannot drift apart.
-     *
-     * Entries must arrive parent-first, which is what `collectFieldScopes` yields: a container's
-     * children are skipped once the container itself is hidden, because Angular's `disable()`
-     * cascades to descendants and a child's `enable()` walks back up recalculating ancestors.
-     * Toggling a child inside a hidden group would fight its parent.
-     */
-    syncHiddenFieldState(entries, ctx) {
-        const hiddenContainers = [];
-        for (const entry of entries) {
-            const field = entry.field;
-            if (!field?.id)
-                continue;
-            const address = ctx.addressOf(field);
-            if (hiddenContainers.some(prefix => address.startsWith(`${prefix}.`)))
-                continue;
-            const hidden = !this.isFieldVisible(ctx.result, field, ctx.namesOf(field), ctx.values);
-            if (hidden && (field.type === 'group' || field.type === 'array'))
-                hiddenContainers.push(address);
-            const ctrl = ctx.controlFor(entry);
-            if (!ctrl)
-                continue;
-            if (hidden) {
-                if (ctrl.enabled)
-                    ctrl.disable({ emitEvent: false });
-            }
-            else if (ctrl.disabled && !field.disabled) {
-                ctrl.enable({ emitEvent: false });
-            }
-        }
+    /** Whether the stored value is an http(s) address, and so safe to render as a link. */
+    get linkable() {
+        const value = this.control?.value;
+        return typeof value === 'string' && isValidUrl(value);
     }
-    /**
-     * The hidden and shown names as sets, memoised against the result they came from.
-     *
-     * `isFieldVisible` runs once per field per change-detection pass; building two sets from
-     * two arrays each time turns a rule result into allocation proportional to the form. A
-     * `WeakMap` keyed by the result means it is built once per evaluation and collected with it.
-     */
-    nameSets(result) {
-        let sets = this.nameSetCache.get(result);
-        if (!sets) {
-            sets = { hidden: new Set(result.hiddenFields), shown: new Set(result.shownFields) };
-            this.nameSetCache.set(result, sets);
-        }
-        return sets;
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
     }
-    nameSetCache = new WeakMap();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RulesEvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RulesEvaluationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: RulesEvaluationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ConfigSourceService {
-    cache = new Map();
-    inFlight = new Map();
-    handler;
-    constructor(handler) {
-        this.handler = handler;
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    /** Retrieve an entity config by key, with caching and in-flight deduplication. */
-    async getConfig(entityKey) {
-        if (!entityKey || !this.handler)
-            return undefined;
-        if (this.cache.has(entityKey))
-            return this.cache.get(entityKey);
-        if (this.inFlight.has(entityKey))
-            return this.inFlight.get(entityKey);
-        const promise = (async () => {
-            try {
-                const raw = this.handler(entityKey);
-                let resolved;
-                if (isObservable(raw)) {
-                    resolved = await firstValueFrom(raw);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UrlFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: UrlFieldComponent, isStandalone: true, selector: "ngx-url-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--url"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">
+          @if (linkable) {
+            <a [href]="control.value" class="ngx-field__link" target="_blank" rel="noopener noreferrer">{{
+              control.value
+            }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="url"
+          inputmode="url"
+          autocomplete="url"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder || 'https://example.com'"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: UrlFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-url-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--url"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">
+          @if (linkable) {
+            <a [href]="control.value" class="ngx-field__link" target="_blank" rel="noopener noreferrer">{{
+              control.value
+            }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="url"
+          inputmode="url"
+          autocomplete="url"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder || 'https://example.com'"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * Phone field: a `type="tel"` input, and a `tel:` link when read-only.
+ *
+ * The value is stored exactly as typed, spaces and brackets included. The number is shown back
+ * to people far more often than it is dialled, and `+44 20 7946 0958` is easier to read than
+ * its digits run together. Only the link target is stripped down to what a dialler needs.
+ */
+class PhoneFieldComponent {
+    /**
+     * 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';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** `tel:` plus the digits and a leading `+`, or null for a value that is not a phone number. */
+    get dialHref() {
+        const value = this.control?.value;
+        if (typeof value !== 'string' || !isValidPhone(value))
+            return null;
+        return `tel:${value.trim().startsWith('+') ? '+' : ''}${value.replace(/\D/g, '')}`;
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: PhoneFieldComponent, isStandalone: true, selector: "ngx-phone-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--phone"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">
+          @if (dialHref) {
+            <a [href]="dialHref" class="ngx-field__link">{{ control.value }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="tel"
+          inputmode="tel"
+          autocomplete="tel"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: PhoneFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-phone-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--phone"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">
+          @if (dialHref) {
+            <a [href]="dialHref" class="ngx-field__link">{{ control.value }}</a>
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <input
+          [id]="domId()"
+          class="ngx-field__input"
+          [attr.data-testid]="'field-' + field.id + '-input'"
+          type="tel"
+          inputmode="tel"
+          autocomplete="tel"
+          [formControl]="$any(control)"
+          [attr.aria-invalid]="control.invalid && control.touched"
+          [attr.aria-describedby]="describedBy()"
+          [placeholder]="placeholder"
+          [attr.disabled]="field.disabled ? true : null"
+        />
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * Slider field: a range input over `validators.min`–`validators.max` in steps of `field.step`.
+ *
+ * A range input cannot show that it is empty. With no value it puts the thumb at the midpoint,
+ * which looks exactly like a chosen value. The readout beside it is therefore the value itself,
+ * and shows a dash until someone moves the thumb. Without it, a required slider nobody touched
+ * would look answered and still fail at save.
+ */
+class SliderFieldComponent {
+    /**
+     * 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';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    get bounds() {
+        return sliderBounds(this.field);
+    }
+    /** Whether the control holds a number. The thumb's position cannot say. */
+    get hasValue() {
+        const value = this.control?.value;
+        return value !== null && value !== undefined && value !== '' && Number.isFinite(Number(value));
+    }
+    get display() {
+        return this.hasValue ? String(this.control.value) : '—';
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SliderFieldComponent, isStandalone: true, selector: "ngx-slider-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--slider"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">{{ display }}</span>
+      } @else {
+        <div class="ngx-field__slider-wrap">
+          <input
+            [id]="domId()"
+            type="range"
+            class="ngx-field__slider"
+            [class.ngx-field__slider--unset]="!hasValue"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [min]="bounds.min"
+            [max]="bounds.max"
+            [step]="bounds.step"
+            [formControl]="$any(control)"
+            [attr.aria-valuetext]="hasValue ? null : display"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <output
+            class="ngx-field__slider-value"
+            [attr.for]="domId()"
+            [attr.data-testid]="'field-' + field.id + '-readout'"
+            aria-hidden="true"
+            >{{ display }}</output
+          >
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SliderFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-slider-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--slider"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">{{ display }}</span>
+      } @else {
+        <div class="ngx-field__slider-wrap">
+          <input
+            [id]="domId()"
+            type="range"
+            class="ngx-field__slider"
+            [class.ngx-field__slider--unset]="!hasValue"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [min]="bounds.min"
+            [max]="bounds.max"
+            [step]="bounds.step"
+            [formControl]="$any(control)"
+            [attr.aria-valuetext]="hasValue ? null : display"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <output
+            class="ngx-field__slider-value"
+            [attr.for]="domId()"
+            [attr.data-testid]="'field-' + field.id + '-readout'"
+            aria-hidden="true"
+            >{{ display }}</output
+          >
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/**
+ * Rating field: 1 to `validators.max` stars (default 5), stored as a number.
+ *
+ * Built from native radio inputs in a fieldset, not clickable spans. That gives it the
+ * behaviour a radio group already has: arrow keys move the choice, Tab enters and leaves the
+ * group once, and a screen reader announces "3 of 5, radio button, 3 of 5". Each star's
+ * label is text a host can translate (`ratingValue`), because a star glyph read aloud is
+ * "black star".
+ */
+class RatingFieldComponent {
+    /**
+     * 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);
+    cdr = inject(ChangeDetectorRef);
+    ui = inject(UiTextService);
+    field;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    _control;
+    _controlSub;
+    /**
+     * Subscribed because the radios are not bound through a form directive. A value patched in
+     * from outside (a reset, an autoPatch) would otherwise leave an OnPush view showing the old
+     * stars.
+     */
+    set control(value) {
+        this._control = value;
+        this._controlSub?.unsubscribe();
+        this._controlSub = this._control?.valueChanges?.subscribe(() => this.cdr.markForCheck());
+    }
+    get control() {
+        return this._control;
+    }
+    ngOnDestroy() {
+        this._controlSub?.unsubscribe();
+    }
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    get scale() {
+        return ratingScale(this.field);
+    }
+    get stars() {
+        return Array.from({ length: this.scale }, (_, i) => i + 1);
+    }
+    /** The stored rating, or null when there is none or it is not a star on this scale. */
+    get current() {
+        const value = Number(this.control?.value);
+        const raw = this.control?.value;
+        if (raw === null || raw === undefined || raw === '' || !Number.isInteger(value))
+            return null;
+        return value >= 1 && value <= this.scale ? value : null;
+    }
+    select(star) {
+        this.control?.setValue(star);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    clear() {
+        this.control?.setValue(null);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RatingFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: RatingFieldComponent, isStandalone: true, selector: "ngx-rating-field", inputs: { field: "field", language: "language", readonly: "readonly", masked: "masked", control: "control" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--rating"
+      [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"
+    >
+      <fieldset class="ngx-field__fieldset">
+        <legend class="ngx-field__label">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+          @if (hint) {
+            <!-- Inside the legend: a fieldset allows one legend, and it must come first. -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
+        </legend>
+        @if (masked) {
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+            maskedText
+          }}</span>
+        } @else if (readonly) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+            @if (current) {
+              <span class="ngx-field__stars" aria-hidden="true">
+                @for (star of stars; track star) {
+                  <span class="ngx-field__star-glyph" [class.ngx-field__star-glyph--on]="star <= current">{{
+                    star <= current ? '★' : '☆'
+                  }}</span>
+                }
+              </span>
+              {{ ui.text('ratingValue', language, { value: current, max: scale }) }}
+            } @else {
+              —
+            }
+          </span>
+        } @else {
+          <div class="ngx-field__rating">
+            @for (star of stars; track star) {
+              <label class="ngx-field__star" [class.ngx-field__star--on]="current !== null && star <= current">
+                <input
+                  type="radio"
+                  class="ngx-field__star-input"
+                  [id]="domId('-' + star)"
+                  [name]="domId()"
+                  [value]="star"
+                  [checked]="current === star"
+                  [attr.data-testid]="'field-' + field.id + '-star-' + star"
+                  [attr.aria-describedby]="describedBy()"
+                  [attr.disabled]="field.disabled ? true : null"
+                  (change)="select(star)"
+                />
+                <!-- Filled and hollow, so the rating is readable without telling colours apart. -->
+                <span class="ngx-field__star-glyph" aria-hidden="true">{{
+                  current !== null && star <= current ? '★' : '☆'
+                }}</span>
+                <span class="ngx-field__sr-only">{{ ui.text('ratingValue', language, { value: star, max: scale }) }}</span>
+              </label>
+            }
+            @if (current !== null && !field.disabled) {
+              <button
+                type="button"
+                class="ngx-field__remove-btn"
+                [attr.data-testid]="'field-' + field.id + '-clear'"
+                [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+                (click)="clear()"
+              >
+                ×
+              </button>
+            }
+          </div>
+          @if (errorMessage) {
+            <span
+              class="ngx-field__error"
+              [attr.data-testid]="'field-' + field.id + '-error'"
+              [id]="domId('-error')"
+              role="alert"
+              >{{ errorMessage }}</span
+            >
+          }
+        }
+      </fieldset>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RatingFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-rating-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--rating"
+      [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"
+    >
+      <fieldset class="ngx-field__fieldset">
+        <legend class="ngx-field__label">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+          @if (hint) {
+            <!-- Inside the legend: a fieldset allows one legend, and it must come first. -->
+            <span class="ngx-field__hint-wrap">
+              <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+              <span
+                class="ngx-field__hint"
+                role="tooltip"
+                [attr.data-testid]="'field-' + field.id + '-hint'"
+                [id]="domId('-hint')"
+                >{{ hint }}</span
+              >
+            </span>
+          }
+        </legend>
+        @if (masked) {
+          <span class="ngx-field__value ngx-field__value--masked" [attr.data-testid]="'field-' + field.id + '-masked'">{{
+            maskedText
+          }}</span>
+        } @else if (readonly) {
+          <span class="ngx-field__value" [attr.data-testid]="'field-' + field.id + '-value'">
+            @if (current) {
+              <span class="ngx-field__stars" aria-hidden="true">
+                @for (star of stars; track star) {
+                  <span class="ngx-field__star-glyph" [class.ngx-field__star-glyph--on]="star <= current">{{
+                    star <= current ? '★' : '☆'
+                  }}</span>
+                }
+              </span>
+              {{ ui.text('ratingValue', language, { value: current, max: scale }) }}
+            } @else {
+              —
+            }
+          </span>
+        } @else {
+          <div class="ngx-field__rating">
+            @for (star of stars; track star) {
+              <label class="ngx-field__star" [class.ngx-field__star--on]="current !== null && star <= current">
+                <input
+                  type="radio"
+                  class="ngx-field__star-input"
+                  [id]="domId('-' + star)"
+                  [name]="domId()"
+                  [value]="star"
+                  [checked]="current === star"
+                  [attr.data-testid]="'field-' + field.id + '-star-' + star"
+                  [attr.aria-describedby]="describedBy()"
+                  [attr.disabled]="field.disabled ? true : null"
+                  (change)="select(star)"
+                />
+                <!-- Filled and hollow, so the rating is readable without telling colours apart. -->
+                <span class="ngx-field__star-glyph" aria-hidden="true">{{
+                  current !== null && star <= current ? '★' : '☆'
+                }}</span>
+                <span class="ngx-field__sr-only">{{ ui.text('ratingValue', language, { value: star, max: scale }) }}</span>
+              </label>
+            }
+            @if (current !== null && !field.disabled) {
+              <button
+                type="button"
+                class="ngx-field__remove-btn"
+                [attr.data-testid]="'field-' + field.id + '-clear'"
+                [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+                (click)="clear()"
+              >
+                ×
+              </button>
+            }
+          </div>
+          @if (errorMessage) {
+            <span
+              class="ngx-field__error"
+              [attr.data-testid]="'field-' + field.id + '-error'"
+              [id]="domId('-error')"
+              role="alert"
+              >{{ errorMessage }}</span
+            >
+          }
+        }
+      </fieldset>
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+/**
+ * Colour field: a native colour picker, storing `#rrggbb`.
+ *
+ * Like a range input, a colour input has no empty state and shows black. The code beside it is
+ * therefore the real value, a dash until a colour is chosen, and a clear button sets the value
+ * back to nothing. Without them, "no colour" and "black" would look the same.
+ *
+ * Only a value that passes `normalizeHexColor` reaches a `style` binding. A record can hold
+ * any string, and a colour swatch is no place to interpret one.
+ */
+class ColorFieldComponent {
+    /**
+     * 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);
+    ui = inject(UiTextService);
+    field;
+    control;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The stored colour as `#rrggbb`, or null when there is none or it is not a colour. */
+    get hex() {
+        return normalizeHexColor(this.control?.value);
+    }
+    clear() {
+        this.control?.setValue(null);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ColorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ColorFieldComponent, isStandalone: true, selector: "ngx-color-field", inputs: { field: "field", control: "control", language: "language", readonly: "readonly", masked: "masked" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--color"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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 ngx-field__color-value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (hex) {
+            <span class="ngx-field__swatch" [style.background-color]="hex" aria-hidden="true"></span>
+            {{ hex }}
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__color-wrap">
+          <input
+            [id]="domId()"
+            type="color"
+            class="ngx-field__color"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [formControl]="$any(control)"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <span class="ngx-field__color-code" [attr.data-testid]="'field-' + field.id + '-code'">{{ hex || '—' }}</span>
+          @if (hex && !field.disabled) {
+            <button
+              type="button"
+              class="ngx-field__remove-btn"
+              [attr.data-testid]="'field-' + field.id + '-clear'"
+              [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+              (click)="clear()"
+            >
+              ×
+            </button>
+          }
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ColorFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-color-field',
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                    template: `
+    <div
+      class="ngx-field ngx-field--color"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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 ngx-field__color-value" [attr.data-testid]="'field-' + field.id + '-value'">
+          @if (hex) {
+            <span class="ngx-field__swatch" [style.background-color]="hex" aria-hidden="true"></span>
+            {{ hex }}
+          } @else {
+            {{ control.value || '—' }}
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__color-wrap">
+          <input
+            [id]="domId()"
+            type="color"
+            class="ngx-field__color"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [formControl]="$any(control)"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [attr.disabled]="field.disabled ? true : null"
+          />
+          <span class="ngx-field__color-code" [attr.data-testid]="'field-' + field.id + '-code'">{{ hex || '—' }}</span>
+          @if (hex && !field.disabled) {
+            <button
+              type="button"
+              class="ngx-field__remove-btn"
+              [attr.data-testid]="'field-' + field.id + '-clear'"
+              [attr.aria-label]="ui.text('clearValue', language, { field: label })"
+              (click)="clear()"
+            >
+              ×
+            </button>
+          }
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }] } });
+
+/** What ends a tag while typing, or separates several in pasted text. */
+const TAG_SEPARATOR = /[,;\n]/;
+/**
+ * Tags field: free text entered as a list of chips, stored as `string[]`.
+ *
+ * Unlike `multiSelect`, the values are whatever the user types, so there is no option list to
+ * keep in step. Enter or a comma ends a tag, Backspace in an empty box removes the last one,
+ * and pasted text is split on commas, semicolons and line breaks. Leaving the box commits
+ * what is in it, so a tag someone typed and then tabbed away from is not silently lost.
+ *
+ * The control holds the array. The text box is only a draft, which is why it is not bound
+ * with a form directive.
+ */
+class TagsFieldComponent {
+    /**
+     * 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);
+    cdr = inject(ChangeDetectorRef);
+    ui = inject(UiTextService);
+    field;
+    language = 'en';
+    readonly = false;
+    masked = false;
+    _control;
+    _controlSub;
+    /** Subscribed for the same reason as the rating field: nothing here is a form directive. */
+    set control(value) {
+        this._control = value;
+        this._controlSub?.unsubscribe();
+        this._controlSub = this._control?.valueChanges?.subscribe(() => this.cdr.markForCheck());
+    }
+    get control() {
+        return this._control;
+    }
+    ngOnDestroy() {
+        this._controlSub?.unsubscribe();
+    }
+    get label() {
+        return resolveLabel(this.field?.label, this.language);
+    }
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, this.language);
+    }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
+    }
+    /** The stored tags, read leniently. A record may hold a single string or anything else. */
+    get tags() {
+        return normalizeTags(this.control?.value);
+    }
+    onKeydown(event, entry) {
+        if (event.key === 'Enter' || event.key === ',' || event.key === ';') {
+            // Enter inside a form submits it. Adding a tag is what the user meant.
+            event.preventDefault();
+            this.commit(entry);
+        }
+        else if (event.key === 'Backspace' && entry.value === '' && this.tags.length) {
+            this.remove(this.tags[this.tags.length - 1]);
+        }
+    }
+    onPaste(event, entry) {
+        const text = event.clipboardData?.getData('text') ?? '';
+        if (!TAG_SEPARATOR.test(text))
+            return;
+        event.preventDefault();
+        // Split here, not by writing the text into the box first: a single-line input strips line
+        // breaks on assignment, which would join "z\nw" into one tag.
+        const draft = entry.value;
+        entry.value = '';
+        this.add([draft, ...text.split(TAG_SEPARATOR)]);
+    }
+    onBlur(entry) {
+        this.commit(entry);
+        this.control?.markAsTouched();
+    }
+    /** Add whatever is in the draft box, split on separators, and empty it. */
+    commit(entry) {
+        const added = entry.value.split(TAG_SEPARATOR);
+        entry.value = '';
+        this.add(added);
+    }
+    add(candidates) {
+        const next = normalizeTags([...this.tags, ...candidates]);
+        if (next.length !== this.tags.length)
+            this.write(next);
+    }
+    remove(tag) {
+        this.write(this.tags.filter(t => t !== tag));
+    }
+    /**
+     * An empty list is stored as `[]`, not `null`. `required` treats both as empty, and `[]`
+     * stays the same shape as every other value this field holds.
+     */
+    write(tags) {
+        this.control?.setValue(tags);
+        this.control?.markAsTouched();
+        this.control?.markAsDirty();
+    }
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
+    }
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TagsFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: TagsFieldComponent, isStandalone: true, selector: "ngx-tags-field", inputs: { field: "field", language: "language", readonly: "readonly", masked: "masked", control: "control" }, ngImport: i0, template: `
+    <div
+      class="ngx-field ngx-field--tags"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">
+          @if (tags.length) {
+            <span class="ngx-field__tags ngx-field__tags--readonly">
+              @for (tag of tags; track tag) {
+                <span class="ngx-field__tag">{{ tag }}</span>
+              }
+            </span>
+          } @else {
+            —
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__tags" [class.ngx-field__tags--disabled]="field.disabled">
+          @for (tag of tags; track tag) {
+            <span class="ngx-field__tag" [attr.data-testid]="'field-' + field.id + '-tag'">
+              {{ tag }}
+              @if (!field.disabled) {
+                <button
+                  type="button"
+                  class="ngx-field__tag-remove"
+                  [attr.aria-label]="ui.text('removeTag', language, { tag: tag })"
+                  (click)="remove(tag)"
+                >
+                  ×
+                </button>
+              }
+            </span>
+          }
+          <input
+            #entry
+            [id]="domId()"
+            type="text"
+            class="ngx-field__tags-input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [placeholder]="placeholder || ui.text('addTagPlaceholder', language)"
+            [attr.disabled]="field.disabled ? true : null"
+            (keydown)="onKeydown($event, entry)"
+            (paste)="onPaste($event, entry)"
+            (blur)="onBlur(entry)"
+          />
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: TagsFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ngx-tags-field',
+                    standalone: true,
+                    template: `
+    <div
+      class="ngx-field ngx-field--tags"
+      [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"
+    >
+      <div class="ngx-field__label-row">
+        <label class="ngx-field__label" [attr.for]="domId()">
+          {{ label }}
+          @if (field.validators?.required) {
+            <span class="ngx-field__req">*</span>
+          }
+        </label>
+        @if (hint) {
+          <span class="ngx-field__hint-wrap">
+            <span class="ngx-field__hint-icon" aria-hidden="true">i</span>
+            <span
+              class="ngx-field__hint"
+              role="tooltip"
+              [attr.data-testid]="'field-' + field.id + '-hint'"
+              [id]="domId('-hint')"
+              >{{ hint }}</span
+            >
+          </span>
+        }
+      </div>
+      @if (masked) {
+        <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'">
+          @if (tags.length) {
+            <span class="ngx-field__tags ngx-field__tags--readonly">
+              @for (tag of tags; track tag) {
+                <span class="ngx-field__tag">{{ tag }}</span>
+              }
+            </span>
+          } @else {
+            —
+          }
+        </span>
+      } @else {
+        <div class="ngx-field__tags" [class.ngx-field__tags--disabled]="field.disabled">
+          @for (tag of tags; track tag) {
+            <span class="ngx-field__tag" [attr.data-testid]="'field-' + field.id + '-tag'">
+              {{ tag }}
+              @if (!field.disabled) {
+                <button
+                  type="button"
+                  class="ngx-field__tag-remove"
+                  [attr.aria-label]="ui.text('removeTag', language, { tag: tag })"
+                  (click)="remove(tag)"
+                >
+                  ×
+                </button>
+              }
+            </span>
+          }
+          <input
+            #entry
+            [id]="domId()"
+            type="text"
+            class="ngx-field__tags-input"
+            [attr.data-testid]="'field-' + field.id + '-input'"
+            [attr.aria-invalid]="control.invalid && control.touched"
+            [attr.aria-describedby]="describedBy()"
+            [placeholder]="placeholder || ui.text('addTagPlaceholder', language)"
+            [attr.disabled]="field.disabled ? true : null"
+            (keydown)="onKeydown($event, entry)"
+            (paste)="onPaste($event, entry)"
+            (blur)="onBlur(entry)"
+          />
+        </div>
+        @if (errorMessage) {
+          <span
+            class="ngx-field__error"
+            [attr.data-testid]="'field-' + field.id + '-error'"
+            [id]="domId('-error')"
+            role="alert"
+            >{{ errorMessage }}</span
+          >
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], masked: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+/**
+ * Field-type registration — the tree-shaking seam.
+ *
+ * `FieldRegistryService` imports no components. Whatever you register here is what gets
+ * bundled, so an app that only uses text/number/dropdown pays for three components and
+ * their imports, not twenty-seven.
+ *
+ * ```ts
+ * // Everything (convenient; bundles all built-ins):
+ * provideNgxDynamicEntity(), provideBuiltInFieldTypes()
+ *
+ * // Only what this app renders:
+ * provideFieldTypes({ text: TextFieldComponent, number: NumberFieldComponent })
+ * ```
+ *
+ * Both merge into `FIELD_TYPE_REGISTRY`; later registrations win on key collision.
+ */
+/** Map of every built-in field type key → component. Referencing this pulls in all of them. */
+function builtInFieldTypes() {
+    return {
+        text: TextFieldComponent,
+        textarea: TextareaFieldComponent,
+        markdown: MarkdownFieldComponent,
+        number: NumberFieldComponent,
+        currency: CurrencyFieldComponent,
+        email: EmailFieldComponent,
+        password: PasswordFieldComponent,
+        checkbox: CheckboxFieldComponent,
+        boolean: BooleanFieldComponent,
+        date: DateFieldComponent,
+        datetime: DateTimeFieldComponent,
+        time: TimeFieldComponent,
+        monthYear: MonthYearFieldComponent,
+        dropdown: DropdownFieldComponent,
+        radio: RadioFieldComponent,
+        multiSelect: MultiSelectFieldComponent,
+        'entity-ref': EntityRefFieldComponent,
+        group: GroupFieldComponent,
+        array: ArrayFieldComponent,
+        image: ImageFieldComponent,
+        file: FileFieldComponent,
+        url: UrlFieldComponent,
+        phone: PhoneFieldComponent,
+        slider: SliderFieldComponent,
+        rating: RatingFieldComponent,
+        color: ColorFieldComponent,
+        tags: TagsFieldComponent,
+    };
+}
+/** Register a specific set of field types. Only the components you name are bundled. */
+function provideFieldTypes(types) {
+    return makeEnvironmentProviders([
+        { provide: FIELD_TYPE_SETS, useValue: types, multi: true },
+    ]);
+}
+/** Register all 27 built-in field type keys. Convenience for apps that use most of them. */
+function provideBuiltInFieldTypes() {
+    return provideFieldTypes(builtInFieldTypes());
+}
+
+/**
+ * HookRegistryService — stores and runs Angular-side pre/post hooks.
+ * Consumers register hooks via provideNgxDynamicEntity({ hooks: { 'clients:beforeSave': fn } }).
+ */
+class HookRegistryService {
+    registry = inject(HOOK_REGISTRY, { optional: true }) ?? new Map();
+    has(key) {
+        return this.registry.has(key);
+    }
+    async run(key, data, context = {}) {
+        const hook = this.registry.get(key);
+        if (!hook)
+            return data;
+        return hook(data, context);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HookRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HookRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: HookRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * RulesEvaluationService — evaluates rules, and owns what a result *means*.
+ *
+ * Precedence lives in one method that both the render filter and the validity sync go
+ * through, so what is on screen and what counts toward validity cannot disagree. Stateless —
+ * every method takes the result it is interpreting, so there is nothing to go stale against a
+ * rebuilt form and nothing to reset between configs.
+ */
+class RulesEvaluationService {
+    /**
+     * Evaluate rules against form values and optional original baseline values.
+     */
+    evaluate(rules, values, originalValues, options) {
+        return evaluateFormRules(rules, values, originalValues, options);
+    }
+    /**
+     * Filter rules pertinent to a single tab.
+     */
+    filterForTab(rules, tabId, config) {
+        return filterRulesForTab(rules, tabId, config);
+    }
+    /**
+     * Whether a field renders, under the precedence documented on `RuleEvaluationResult`.
+     *
+     * An explicit hide beats everything. A show beats static hiding — `visibility: false`, or a
+     * `showWhen` that does not currently hold — because a rule that could only hide what the
+     * config already hides would have nothing to say, and `{ visibility: true }` was a
+     * documented no-op until it did. Otherwise the config's own visibility decides.
+     */
+    isFieldVisible(result, field, names, values) {
+        const sets = this.nameSets(result);
+        if (names.some(name => sets.hidden.has(name)))
+            return false;
+        if (names.some(name => sets.shown.has(name)))
+            return true;
+        return evaluateFieldVisibility(field, values);
+    }
+    /** The same precedence for a tab. */
+    isTabVisible(result, tab) {
+        if (result.hiddenTabs.includes(tab.id))
+            return false;
+        return tab.visibility !== false || result.shownTabs.includes(tab.id);
+    }
+    /**
+     * Keep a hidden field's control out of form validity.
+     *
+     * A field hidden by a rule or a `showWhen` is filtered out of the render, but its
+     * validators stay attached — so a hidden *required* field holds `form.invalid` true
+     * forever, permanently disabling Save with nothing on screen to explain why.
+     *
+     * Disabling is the fix rather than stripping validators: Angular excludes disabled controls
+     * from validity, and the field's own validators survive intact for when it comes back.
+     * Values are untouched — a disabled control still carries its value, so rule evaluation and
+     * the emitted record see exactly what they saw before. That also keeps this from feeding
+     * back on itself: hiding a field cannot change the values the rules are evaluated over.
+     *
+     * The predicate is `isFieldVisible`, the same one the render filter uses, so what is on
+     * screen and what counts toward validity cannot drift apart.
+     *
+     * Entries must arrive parent-first, which is what `collectFieldScopes` yields: a container's
+     * children are skipped once the container itself is hidden, because Angular's `disable()`
+     * cascades to descendants and a child's `enable()` walks back up recalculating ancestors.
+     * Toggling a child inside a hidden group would fight its parent.
+     */
+    syncHiddenFieldState(entries, ctx) {
+        const hiddenContainers = [];
+        for (const entry of entries) {
+            const field = entry.field;
+            if (!field?.id)
+                continue;
+            const address = ctx.addressOf(field);
+            if (hiddenContainers.some(prefix => address.startsWith(`${prefix}.`)))
+                continue;
+            const hidden = !this.isFieldVisible(ctx.result, field, ctx.namesOf(field), ctx.values);
+            if (hidden && (field.type === 'group' || field.type === 'array'))
+                hiddenContainers.push(address);
+            const ctrl = ctx.controlFor(entry);
+            if (!ctrl)
+                continue;
+            if (hidden) {
+                if (ctrl.enabled)
+                    ctrl.disable({ emitEvent: false });
+            }
+            else if (ctrl.disabled && !field.disabled) {
+                ctrl.enable({ emitEvent: false });
+            }
+        }
+    }
+    /**
+     * The hidden and shown names as sets, memoised against the result they came from.
+     *
+     * `isFieldVisible` runs once per field per change-detection pass; building two sets from
+     * two arrays each time turns a rule result into allocation proportional to the form. A
+     * `WeakMap` keyed by the result means it is built once per evaluation and collected with it.
+     */
+    nameSets(result) {
+        let sets = this.nameSetCache.get(result);
+        if (!sets) {
+            sets = { hidden: new Set(result.hiddenFields), shown: new Set(result.shownFields) };
+            this.nameSetCache.set(result, sets);
+        }
+        return sets;
+    }
+    nameSetCache = new WeakMap();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RulesEvaluationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RulesEvaluationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: RulesEvaluationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ConfigSourceService {
+    cache = new Map();
+    inFlight = new Map();
+    handler;
+    constructor(handler) {
+        this.handler = handler;
+    }
+    /** Retrieve an entity config by key, with caching and in-flight deduplication. */
+    async getConfig(entityKey) {
+        if (!entityKey || !this.handler)
+            return undefined;
+        if (this.cache.has(entityKey))
+            return this.cache.get(entityKey);
+        if (this.inFlight.has(entityKey))
+            return this.inFlight.get(entityKey);
+        const promise = (async () => {
+            try {
+                const raw = this.handler(entityKey);
+                let resolved;
+                if (isObservable(raw)) {
+                    resolved = await firstValueFrom(raw);
                 }
                 else {
                     resolved = await Promise.resolve(raw);
@@ -6506,10 +7928,10 @@ class ConfigSourceService {
             this.cache.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ConfigSourceService, deps: [{ token: CONFIG_SOURCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ConfigSourceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ConfigSourceService, deps: [{ token: CONFIG_SOURCE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ConfigSourceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ConfigSourceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ConfigSourceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -6524,9 +7946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  *
  * The one question this answers is *where a value lives*: which control a field owns, how
  * the tab tree nests into groups, how a record is read out of the tree and patched back in.
- * It was half of `DynamicFormComponent`, mixed in with tab state, focus management, rule
- * evaluation and RBAC — and the cost of that was not length but ownership: the bug Phase 2
- * fixed was two methods forty lines apart disagreeing about what "every field" meant.
+ * Anything that has to find a field's control goes through here, so there is one answer.
  *
  * Deliberately stateless. Every method takes the form and the config it is operating on, so
  * there is no cached `this.form` to go stale against a rebuilt one, and every method is
@@ -6618,6 +8038,44 @@ class FormStructureService {
         }
         return curr instanceof FormGroup ? curr : null;
     }
+    /**
+     * The control a scope entry addresses, found by its path rather than its bare id.
+     *
+     * The control tree mirrors the scope path exactly — a tab nests by its id and a `group`
+     * under its own — so `form.get(path)` names exactly one control. A bare-id lookup falls
+     * back to a first-match search and, with `address` on two tabs, finds the wrong one.
+     *
+     * A field inside an `array` has no static path: its controls live in `FormArray` rows
+     * built per row. `form.get()` returns null for those, and callers leave them alone.
+     */
+    controlAt(form, entry) {
+        return form?.get(fieldRefFor(entry.scope, entry.field.id)) ?? null;
+    }
+    /**
+     * The value map rules and `showWhen` are evaluated against.
+     *
+     * Every field appears under two keys: its bare id, and its ref wrapped in brackets. The
+     * bare id is what most configs use, but ids are unique only per scope, so when two scopes
+     * define one the last field walked wins. `[personal.address]` names one field and cannot
+     * be ambiguous, which is why a rule that has to tell them apart uses the ref.
+     *
+     * Both live in one flat map on purpose: `evaluateFormRules` takes a `Record<string,
+     * unknown>` and needs no knowledge of refs at all — the extra keys simply resolve.
+     */
+    flattenValues(form, entries) {
+        const out = {};
+        for (const entry of entries) {
+            const field = entry.field;
+            if (!field?.id)
+                continue;
+            const ctrl = this.controlAt(form, entry);
+            if (!ctrl)
+                continue;
+            out[field.id] = ctrl.value;
+            out[toRefToken(refOf(field, entry.scope))] = ctrl.value;
+        }
+        return out;
+    }
     /**
      * Find a control by reference: a bracketed path, or a bare field id.
      *
@@ -6761,10 +8219,10 @@ class FormStructureService {
             fieldsById.has(key) &&
             !patchedFieldIds.has(key));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormStructureService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormStructureService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStructureService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStructureService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: FormStructureService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: FormStructureService, decorators: [{
             type: Injectable
         }] });
 
@@ -6796,6 +8254,12 @@ const AUTO_COL_SPAN = {
     boolean: 4,
     checkbox: 4,
     'entity-ref': 6,
+    url: 6,
+    phone: 6,
+    slider: 6,
+    rating: 4,
+    color: 4,
+    tags: 6,
     // Left at the full width deliberately — textarea, markdown, image, file, group and array
     // each hold something a half-row would crop.
 };
@@ -6937,9 +8401,8 @@ class DynamicFormComponent {
     // ─── Computed ─────────────────────────────────────────────────────────────
     ruleResult = computed(() => this.rulesEvaluation.evaluate(this.rules, this.formValues(), this.baseline(), {
         // The engine reports rather than logs, because it also runs on a server. This is the
-        // client's answer: say it once per distinct problem, in dev only. A rule the author
-        // half-finished used to throw out of change detection; now it is skipped, and a
-        // silently skipped rule is exactly as hard to diagnose as a thrown one.
+        // client's answer: say it once per distinct problem, in dev only — a silently skipped
+        // rule is as hard to diagnose as a thrown one.
         onProblem: message => this.warnOnce(message),
     }), ...(ngDevMode ? [{ debugName: "ruleResult" }] : /* istanbul ignore next */ []));
     /** Warned-about rule problems, per component instance — see `warnedAmbiguousIds`. */
@@ -7056,8 +8519,7 @@ class DynamicFormComponent {
     /**
      * Whether the current roles may see this record at all.
      *
-     * `permissions.view` used to be computed and thrown away — a user whose roles failed it
-     * still received the complete form with every value in the DOM. It is honoured now.
+     * A user whose roles fail `permissions.view` gets no form, so no value reaches the DOM.
      *
      * As with masking, this is presentational: it stops the browser rendering data, it does
      * not stop the data reaching the browser. Authorize on the server.
@@ -7115,13 +8577,11 @@ class DynamicFormComponent {
     /**
      * Whether the Save button is unavailable.
      *
-     * This used to be `submitBlocked`, so an invalid form greyed Save out — and a greyed button
-     * is the worst possible answer to "why can't I save?". It cannot be clicked, so there is no
-     * moment at which the form gets to say which field is at fault or which tab it is on; the
-     * user is left comparing a disabled button against a form that looks, to them, filled in.
-     * On a tabbed form the offending field is usually not even on screen.
+     * Deliberately not `submitBlocked`: a greyed button is the worst answer to "why can't I
+     * save?". It cannot be clicked, so the form never gets to say which field is at fault or
+     * which tab it is on — and on a tabbed form that field is usually not on screen.
      *
-     * Save now stays available while the form is merely invalid. Clicking it still saves
+     * Save stays available while the form is merely invalid. Clicking it still saves
      * nothing — `submit()` checks `submitBlocked` and refuses — but the refusal is where the
      * error summary, the tab badges and the jump to the first bad field come from, so pressing
      * Save produces an explanation instead of silence.
@@ -7156,10 +8616,9 @@ class DynamicFormComponent {
             this.buildForm();
             // Clear *before* the guard below, not after it.
             //
-            // The reset used to sit behind `if (visibleTabs.length === 0) return`, so a swap that
-            // arrived while no tab was visible — a config still being applied, or every tab hidden
-            // by a rule at that instant — skipped it entirely and the previous record's tab
-            // survived into the next one. Clearing is unconditional and cheap, and safe on its own
+            // A swap can arrive while no tab is visible — a config still being applied, or every
+            // tab hidden by a rule at that instant — and the previous record's tab must not survive
+            // into the next one. Clearing is unconditional and cheap, and safe on its own
             // because `activeTabConfig` already falls back to the first visible tab when nothing
             // is selected. Selecting the tab is what needs tabs to exist; forgetting the old one
             // does not.
@@ -7169,14 +8628,9 @@ class DynamicFormComponent {
             }
             if (this.visibleTabs.length === 0)
                 return;
-            // The first tab used to be chosen only when no tab was active yet, and nothing ever
-            // cleared `activeTab` — so a form that stays mounted while `initialData` is swapped
-            // opened the next record on the tab the previous one was left on. The demo escaped it
-            // by destroying the form between records; a host that keeps it mounted did not.
-            //
-            // Resetting here is consistent with what already happens: `buildForm` assigns a brand
-            // new FormGroup, so a changed `initialData` has already discarded every control and
-            // all validation state. The tab was the one thing pretending nothing had changed.
+            // A form that stays mounted while `initialData` is swapped must open the next record
+            // on its first tab, not the tab the previous one was left on. `buildForm` has already
+            // discarded every control and all validation state; the active tab resets with them.
             if (!this.activeTab()) {
                 // No focus steal: the panel gains focus when a *user* picks a tab, not when a host
                 // swaps the record underneath them.
@@ -7610,25 +9064,10 @@ class DynamicFormComponent {
     /**
      * Ids already warned about, per component instance.
      *
-     * This was `private static`, so it was module-global mutable state that nothing ever
-     * cleared: under SSR every render of every form in the process accumulated into one set
-     * that lived as long as the server did, and the first request to render a config
-     * suppressed the warning for every request after it. Per instance, the warning is once per
-     * form — which is what "warn once" was meant to mean.
+     * Per instance, never `static`: under SSR a module-global set would outlive every request,
+     * and the first render of a config would suppress the warning for every render after it.
      */
     warnedAmbiguousIds = new Set();
-    /**
-     * The value map rules and `showWhen` are evaluated against.
-     *
-     * Every field appears under two keys: its bare id, and its `refererField` path wrapped in brackets.
-     * The bare id is what every config written so far uses and is kept exactly as it was — but
-     * ids are unique per scope, so when two scopes define one the last field walked wins and
-     * the rule reads whichever that is. `[personal.address]` names one field and cannot be
-     * ambiguous, which is why a rule that has to distinguish them uses the ref.
-     *
-     * Both live in one flat map on purpose: `evaluateFormRules` takes a `Record<string,
-     * unknown>` and needs no knowledge of refs at all — the extra keys simply resolve.
-     */
     /**
      * Every name a rule may address this field by.
      *
@@ -7662,9 +9101,8 @@ class DynamicFormComponent {
     /**
      * Every field in the config with the scope its value is stored under, cached per config.
      *
-     * `collectFieldScopes` walks the whole tree. It was called once per field from `pathFor`,
-     * which `namesField` calls, which the render filter calls for every field on the active
-     * tab — a quadratic walk on every change-detection pass. Keyed by config identity, so a
+     * `collectFieldScopes` walks the whole tree, and `pathFor` runs once per rendered field on
+     * every change-detection pass — uncached, that is quadratic. Keyed by config identity, so a
      * new config invalidates it without an explicit lifecycle hook to forget.
      */
     fieldScopes() {
@@ -7683,35 +9121,13 @@ class DynamicFormComponent {
         return this.scopeCache?.byField.get(field);
     }
     scopeCache;
-    /**
-     * The control a scope entry addresses, named by path rather than by bare id.
-     *
-     * `getControl(field.id)` with no tab falls through to a first-match recursive search of the
-     * whole form, so with `address` on two tabs, hiding one disabled the other. The control
-     * tree mirrors the scope path exactly — `buildTabControls` nests by tab id and
-     * `buildFieldControl` nests a `group` under its own id — so a `[path]` ref resolves through
-     * `form.get()` on `getControl`'s first branch and names exactly one control.
-     *
-     * A field inside an `array` has no static path: its controls live in `FormArray` rows built
-     * per row. `form.get()` returns null for those and they are left alone, which is correct —
-     * a row's controls are created and destroyed with the row.
-     */
+    /** The control a scope entry addresses — see `FormStructureService.controlAt`. */
     controlForEntry(entry) {
-        return this.getControl(toRefToken(fieldRefFor(entry.scope, entry.field.id)));
+        return this.structure.controlAt(this.form, entry);
     }
+    /** The value map rules and `showWhen` are evaluated against — see `FormStructureService.flattenValues`. */
     flattenFormValues() {
-        const out = {};
-        for (const entry of collectFieldScopes(this.config)) {
-            const field = entry.field;
-            if (!field?.id)
-                continue;
-            const ctrl = this.getControl(field.id, entry.scope.split('.').pop());
-            if (!ctrl)
-                continue;
-            out[field.id] = ctrl.value;
-            out[toRefToken(refOf(field, entry.scope))] = ctrl.value;
-        }
-        return out;
+        return this.structure.flattenValues(this.form, this.fieldScopes());
     }
     // ─── autoPatch / patchOnTrue ──────────────────────────────────────────────
     /**
@@ -7738,22 +9154,46 @@ class DynamicFormComponent {
     /**
      * `patchOnTrue` — when a boolean/checkbox field transitions to `true`,
      * copy `from` → `to` within the current record.
+     *
+     * The trigger is read by its ref, and a bare `from`/`to` resolves to a sibling in the
+     * trigger's own scope before falling back to a form-wide lookup — so two groups that each
+     * carry `home`, `billing` and a "same as" flag patch within themselves, not across.
      */
     runPatchOnTrue(values) {
-        for (const field of this.allFields()) {
-            const mappings = field.patchOnTrue;
-            if (!mappings?.length)
+        for (const entry of this.fieldScopes()) {
+            const field = entry.field;
+            const mappings = field?.patchOnTrue;
+            if (!field?.id || !mappings?.length)
                 continue;
-            const wasTrue = this.previousValues[field.id] === true;
-            const isTrue = values[field.id] === true;
-            if (!isTrue || wasTrue)
+            const trigger = toRefToken(refOf(field, entry.scope));
+            if (values[trigger] !== true || this.previousValues[trigger] === true)
                 continue;
-            const patch = applyPatchOnTrue(mappings, values);
-            for (const [targetId, value] of Object.entries(patch)) {
-                this.getControl(targetId)?.patchValue(value, { emitEvent: false });
+            for (const mapping of mappings) {
+                if (!mapping || isUnsafePath(mapping.to))
+                    continue;
+                const from = this.resolveInScope(mapping.from, entry.scope);
+                if (!from || !(from.key in values))
+                    continue;
+                this.resolveInScope(mapping.to, entry.scope)?.control?.patchValue(values[from.key], { emitEvent: false });
             }
         }
     }
+    /**
+     * A field named by a mapping, preferring a sibling in `scope` when the name is a bare id.
+     *
+     * `key` is the field's entry in the flattened value map; `control` is the control it owns.
+     */
+    resolveInScope(name, scope) {
+        if (typeof name !== 'string' || !name)
+            return null;
+        const parsed = parseFieldRef(name);
+        if (parsed.kind !== 'ref') {
+            const sibling = this.fieldScopes().find(e => e.scope === scope && e.field?.id === parsed.value);
+            if (sibling)
+                return { key: toRefToken(refOf(sibling.field, sibling.scope)), control: this.controlForEntry(sibling) };
+        }
+        return { key: name, control: this.getControl(name) };
+    }
     /**
      * Prefer a control declared on the configured target tab; fall back to a top-level control.
      *
@@ -7889,11 +9329,9 @@ class DynamicFormComponent {
     async submit() {
         if (!this.canSubmit || this.submitBlocked) {
             /*
-             * A refused save used to mark every control touched and stop there.
-             *
-             * On a tabbed form that is indistinguishable from a broken button: the errors appear on
-             * whichever tabs hold them, the user is looking at a different one, and nothing on
-             * screen changes. Three things fix it, and all three are needed — the summary says how
+             * Marking every control touched is not enough on its own: on a tabbed form the errors
+             * appear on whichever tabs hold them, the user is looking at a different one, and
+             * nothing on screen changes. Three things are needed — the summary says how
              * many and which, the tab badges say where, and this jump takes the user to the first.
              */
             this.markAllTouched();
@@ -7946,10 +9384,10 @@ class DynamicFormComponent {
         this.submitAttempted.set(false);
         this.formReset.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", rules: "rules", initialData: "initialData", originalData: "originalData", userRoles: "userRoles", language: "language", readonly: "readonly", readOnlyFields: "readOnlyFields", showInfoBanners: "showInfoBanners", loading: "loading", error: "error", changeDebounceMs: "changeDebounceMs", preview: "preview", layout: "layout" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange", saveRejected: "saveRejected" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService, FormStructureService], viewQueries: [{ propertyName: "formPanel", first: true, predicate: ["formPanel"], descendants: true }, { propertyName: "fieldHosts", predicate: DynamicFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" [class.ngx-form--readonly]=\"readonly\" novalidate>\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!--\n      Why the last Save did nothing.\n      Only after a refused submit \u2014 see `submitAttempted`. Each entry jumps to its field,\n      switching tabs on the way, because the field is usually not the one on screen.\n    -->\n    @if (submitAttempted() && invalidFields().length > 0) {\n      <div class=\"ngx-form__error-summary\" role=\"alert\" data-testid=\"error-summary\" tabindex=\"-1\">\n        <!--\n          `error-summary-heading`, not `-title`: the links below are `error-summary-<fieldId>`,\n          and a field whose id happens to be `title` would then share a test id with this line.\n          The `extensions` entity has exactly such a field.\n        -->\n        <p class=\"ngx-form__error-summary-title\" data-testid=\"error-summary-heading\">\n          {{ ui.text('errorSummaryTitle', language, { count: invalidFields().length }) }}\n        </p>\n        <ul class=\"ngx-form__error-summary-list\">\n          @for (entry of invalidFields(); track entry.field.id) {\n            <li>\n              <!--\n                The field, and what is wrong with it \u2014 the same sentence the field renders\n                under itself, so the summary is not a second opinion. Naming only the field\n                left the user to visit each one to find out what it wanted.\n              -->\n              <button\n                type=\"button\"\n                class=\"ngx-form__error-summary-link\"\n                [attr.data-testid]=\"'error-summary-' + entry.field.id\"\n                (click)=\"jumpToField(entry.field.id)\"\n              >\n                <span class=\"ngx-form__error-summary-field\">{{ resolveFieldLabel(entry.field) }}</span>\n                @if (entry.message) {\n                  <span class=\"ngx-form__error-summary-reason\">{{ entry.message }}</span>\n                }\n              </button>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        {{ ui.text('criticalFieldChanged', language, { fields: changedCriticalFieldLabels() }) }}\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n            <!--\n              How many fields on this tab are stopping the save.\n              The count is in the accessible name rather than the badge, because \"3\" read out\n              after a tab name says nothing about what it counts.\n            -->\n            @if (tabErrorCount(tab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'tab-errors-' + tab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div\n        class=\"ngx-form__tabs ngx-form__tabs--sub\"\n        role=\"tablist\"\n        data-testid=\"subtab-strip\"\n        style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px\"\n      >\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"activeSubTabConfig?.id === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeSubTabConfig?.id === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n            @if (subTabErrorCount(subTab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'subtab-errors-' + subTab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <!--\n      One tabpanel per tab, wrapping both branches. Focus moves here on a tab switch, and a\n      module tab is still a tab \u2014 putting the panel semantics on only the fields branch left\n      a module tab with nowhere for focus to land.\n    -->\n    <div role=\"tabpanel\" tabindex=\"-1\" #formPanel class=\"ngx-form__tabpanel\" [attr.aria-label]=\"activeTabLabel\">\n      @if (activeTabModuleComponent) {\n        <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n          <ng-container\n            *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"\n          ></ng-container>\n        </div>\n      } @else {\n        <!-- Fields for active tab (Responsive 12-column grid) -->\n        <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n          @for (field of fieldsForActiveTab; track field.id) {\n            <div\n              class=\"ngx-form__field-slot\"\n              [style.gridColumn]=\"getFieldSpan(field)\"\n              [attr.id]=\"'field-container-' + field.id\"\n              tabindex=\"-1\"\n            >\n              <ngx-dynamic-field\n                [field]=\"field\"\n                [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n                [config]=\"config\"\n                [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n                [language]=\"language\"\n                [readonly]=\"isFieldReadonly(field)\"\n                [userRoles]=\"userRoles\"\n              />\n              @if (field.hasDrift) {\n                <!--\n                Drift was previously visible only in the builder, so a referenced field whose\n                source had changed looked completely normal to the person filling the form in.\n                role=\"status\" rather than \"alert\": it is information, not an error.\n              -->\n                <span\n                  class=\"ngx-field__drift\"\n                  role=\"status\"\n                  [attr.data-testid]=\"'field-' + field.id + '-drift'\"\n                  [title]=\"driftHint(field)\"\n                  >\u26A0 {{ driftHint(field) }}</span\n                >\n              }\n              @if (field.criticalField && !readonly) {\n                <button\n                  type=\"button\"\n                  class=\"ngx-form__lock\"\n                  [attr.data-testid]=\"'lock-' + field.id\"\n                  [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                  [attr.aria-label]=\"\n                    ui.text(isFieldLocked(field) ? 'unlockField' : 'lockField', language, {\n                      field: resolveFieldLabel(field),\n                    })\n                  \"\n                  [title]=\"ui.text(isFieldLocked(field) ? 'criticalFieldUnlockHint' : 'criticalFieldLockHint', language)\"\n                  (click)=\"toggleFieldLock(field)\"\n                >\n                  {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"form-reset\" (click)=\"reset()\" [disabled]=\"isSaving()\">\n          {{ ui.text('reset', language) }}\n        </button>\n        <!--\n          Two different \"unavailable\" states, and they are not the same thing.\n\n          `disabled` is for what a retry cannot fix \u2014 a save in flight, an async check still\n          outstanding. `data-blocked` is for validation: the button stays fully operable,\n          because pressing it is how the user gets the error summary, but it should not look\n          ready either. The stylesheet mutes it without taking the click away.\n\n          Deliberately not `aria-disabled`. That announces a control as present-but-inoperable,\n          and this one is operable and useful \u2014 pressing it raises a `role=\"alert\"` naming\n          every field at fault, which is more than a disabled button could ever say. Tooling\n          agrees: Playwright refuses to click through `aria-disabled`, and it would be right\n          to, because the attribute would be claiming something untrue.\n        -->\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitDisabled\"\n          [attr.data-blocked]=\"submitBlocked ? '' : null\"\n          [title]=\"ui.text('saveShortcutHint', language)\"\n        >\n          @if (isSaving() || loading) {\n            {{ ui.text('saving', language) }}\n          } @else {\n            {{ ui.text('save', language) }}\n          }\n        </button>\n      </div>\n    }\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    {{ ui.text('accessDenied', language) }}\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngx-gap, 18px);align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:var(--ngx-color-border, #d1d5db);background:var(--ngx-color-surface-alt, #f9fafb)}@media(max-width:640px){.ngx-form__panel{grid-template-columns:minmax(0,1fr)}.ngx-form__field-slot{grid-column:1 / -1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DynamicFormComponent, isStandalone: true, selector: "ngx-dynamic-form", inputs: { config: "config", rules: "rules", initialData: "initialData", originalData: "originalData", userRoles: "userRoles", language: "language", readonly: "readonly", readOnlyFields: "readOnlyFields", showInfoBanners: "showInfoBanners", loading: "loading", error: "error", changeDebounceMs: "changeDebounceMs", preview: "preview", layout: "layout" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", activeTabChange: "activeTabChange", saveRejected: "saveRejected" }, host: { listeners: { "window:keydown": "handleKeyboardEvent($event)" } }, providers: [EntityRefSelectionService, FormStructureService], viewQueries: [{ propertyName: "formPanel", first: true, predicate: ["formPanel"], descendants: true }, { propertyName: "fieldHosts", predicate: DynamicFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" [class.ngx-form--readonly]=\"readonly\" novalidate>\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!--\n      Why the last Save did nothing.\n      Only after a refused submit \u2014 see `submitAttempted`. Each entry jumps to its field,\n      switching tabs on the way, because the field is usually not the one on screen.\n    -->\n    @if (submitAttempted() && invalidFields().length > 0) {\n      <div class=\"ngx-form__error-summary\" role=\"alert\" data-testid=\"error-summary\" tabindex=\"-1\">\n        <!--\n          `error-summary-heading`, not `-title`: the links below are `error-summary-<fieldId>`,\n          and a field whose id happens to be `title` would then share a test id with this line.\n          The `extensions` entity has exactly such a field.\n        -->\n        <p class=\"ngx-form__error-summary-title\" data-testid=\"error-summary-heading\">\n          {{ ui.text('errorSummaryTitle', language, { count: invalidFields().length }) }}\n        </p>\n        <ul class=\"ngx-form__error-summary-list\">\n          @for (entry of invalidFields(); track entry.field.id) {\n            <li>\n              <!--\n                The field, and what is wrong with it \u2014 the same sentence the field renders\n                under itself, so the summary is not a second opinion. Naming only the field\n                left the user to visit each one to find out what it wanted.\n              -->\n              <button\n                type=\"button\"\n                class=\"ngx-form__error-summary-link\"\n                [attr.data-testid]=\"'error-summary-' + entry.field.id\"\n                (click)=\"jumpToField(entry.field.id)\"\n              >\n                <span class=\"ngx-form__error-summary-field\">{{ resolveFieldLabel(entry.field) }}</span>\n                @if (entry.message) {\n                  <span class=\"ngx-form__error-summary-reason\">{{ entry.message }}</span>\n                }\n              </button>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        {{ ui.text('criticalFieldChanged', language, { fields: changedCriticalFieldLabels() }) }}\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n            <!--\n              How many fields on this tab are stopping the save.\n              The count is in the accessible name rather than the badge, because \"3\" read out\n              after a tab name says nothing about what it counts.\n            -->\n            @if (tabErrorCount(tab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'tab-errors-' + tab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div\n        class=\"ngx-form__tabs ngx-form__tabs--sub\"\n        role=\"tablist\"\n        data-testid=\"subtab-strip\"\n        style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px\"\n      >\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"activeSubTabConfig?.id === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeSubTabConfig?.id === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n            @if (subTabErrorCount(subTab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'subtab-errors-' + subTab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <!--\n      One tabpanel per tab, wrapping both branches. Focus moves here on a tab switch, and a\n      module tab is still a tab \u2014 putting the panel semantics on only the fields branch left\n      a module tab with nowhere for focus to land.\n    -->\n    <div role=\"tabpanel\" tabindex=\"-1\" #formPanel class=\"ngx-form__tabpanel\" [attr.aria-label]=\"activeTabLabel\">\n      @if (activeTabModuleComponent) {\n        <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n          <ng-container\n            *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"\n          ></ng-container>\n        </div>\n      } @else {\n        <!-- Fields for active tab (Responsive 12-column grid) -->\n        <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n          @for (field of fieldsForActiveTab; track field.id) {\n            <div\n              class=\"ngx-form__field-slot\"\n              [style.gridColumn]=\"getFieldSpan(field)\"\n              [attr.id]=\"'field-container-' + field.id\"\n              tabindex=\"-1\"\n            >\n              <ngx-dynamic-field\n                [field]=\"field\"\n                [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n                [config]=\"config\"\n                [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n                [language]=\"language\"\n                [readonly]=\"isFieldReadonly(field)\"\n                [userRoles]=\"userRoles\"\n              />\n              @if (field.hasDrift) {\n                <!--\n                Drift was previously visible only in the builder, so a referenced field whose\n                source had changed looked completely normal to the person filling the form in.\n                role=\"status\" rather than \"alert\": it is information, not an error.\n              -->\n                <span\n                  class=\"ngx-field__drift\"\n                  role=\"status\"\n                  [attr.data-testid]=\"'field-' + field.id + '-drift'\"\n                  [title]=\"driftHint(field)\"\n                  >\u26A0 {{ driftHint(field) }}</span\n                >\n              }\n              @if (field.criticalField && !readonly) {\n                <button\n                  type=\"button\"\n                  class=\"ngx-form__lock\"\n                  [attr.data-testid]=\"'lock-' + field.id\"\n                  [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                  [attr.aria-label]=\"\n                    ui.text(isFieldLocked(field) ? 'unlockField' : 'lockField', language, {\n                      field: resolveFieldLabel(field),\n                    })\n                  \"\n                  [title]=\"ui.text(isFieldLocked(field) ? 'criticalFieldUnlockHint' : 'criticalFieldLockHint', language)\"\n                  (click)=\"toggleFieldLock(field)\"\n                >\n                  {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"form-reset\" (click)=\"reset()\" [disabled]=\"isSaving()\">\n          {{ ui.text('reset', language) }}\n        </button>\n        <!--\n          Two different \"unavailable\" states, and they are not the same thing.\n\n          `disabled` is for what a retry cannot fix \u2014 a save in flight, an async check still\n          outstanding. `data-blocked` is for validation: the button stays fully operable,\n          because pressing it is how the user gets the error summary, but it should not look\n          ready either. The stylesheet mutes it without taking the click away.\n\n          Deliberately not `aria-disabled`. That announces a control as present-but-inoperable,\n          and this one is operable and useful \u2014 pressing it raises a `role=\"alert\"` naming\n          every field at fault, which is more than a disabled button could ever say. Tooling\n          agrees: Playwright refuses to click through `aria-disabled`, and it would be right\n          to, because the attribute would be claiming something untrue.\n        -->\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitDisabled\"\n          [attr.data-blocked]=\"submitBlocked ? '' : null\"\n          [title]=\"ui.text('saveShortcutHint', language)\"\n        >\n          @if (isSaving() || loading) {\n            {{ ui.text('saving', language) }}\n          } @else {\n            {{ ui.text('save', language) }}\n          }\n        </button>\n      </div>\n    }\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    {{ ui.text('accessDenied', language) }}\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngx-gap, 18px);align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:var(--ngx-color-border, #d1d5db);background:var(--ngx-color-surface-alt, #f9fafb)}@media(max-width:640px){.ngx-form__panel{grid-template-columns:minmax(0,1fr)}.ngx-form__field-slot{grid-column:1 / -1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-form', standalone: true, imports: [ReactiveFormsModule, DynamicFieldComponent, NgComponentOutlet], providers: [EntityRefSelectionService, FormStructureService], template: "@if (canView) {\n  <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"ngx-form\" [class.ngx-form--readonly]=\"readonly\" novalidate>\n    <!-- Error message banner -->\n    @if (error) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" data-testid=\"form-error\">{{ error }}</div>\n    }\n\n    <!--\n      Why the last Save did nothing.\n      Only after a refused submit \u2014 see `submitAttempted`. Each entry jumps to its field,\n      switching tabs on the way, because the field is usually not the one on screen.\n    -->\n    @if (submitAttempted() && invalidFields().length > 0) {\n      <div class=\"ngx-form__error-summary\" role=\"alert\" data-testid=\"error-summary\" tabindex=\"-1\">\n        <!--\n          `error-summary-heading`, not `-title`: the links below are `error-summary-<fieldId>`,\n          and a field whose id happens to be `title` would then share a test id with this line.\n          The `extensions` entity has exactly such a field.\n        -->\n        <p class=\"ngx-form__error-summary-title\" data-testid=\"error-summary-heading\">\n          {{ ui.text('errorSummaryTitle', language, { count: invalidFields().length }) }}\n        </p>\n        <ul class=\"ngx-form__error-summary-list\">\n          @for (entry of invalidFields(); track entry.field.id) {\n            <li>\n              <!--\n                The field, and what is wrong with it \u2014 the same sentence the field renders\n                under itself, so the summary is not a second opinion. Naming only the field\n                left the user to visit each one to find out what it wanted.\n              -->\n              <button\n                type=\"button\"\n                class=\"ngx-form__error-summary-link\"\n                [attr.data-testid]=\"'error-summary-' + entry.field.id\"\n                (click)=\"jumpToField(entry.field.id)\"\n              >\n                <span class=\"ngx-form__error-summary-field\">{{ resolveFieldLabel(entry.field) }}</span>\n                @if (entry.message) {\n                  <span class=\"ngx-form__error-summary-reason\">{{ entry.message }}</span>\n                }\n              </button>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <!-- Rules Info Banners -->\n    @for (infoKey of showInfoBanners ? Object.keys(ruleResult().infoBanners) : []; track infoKey) {\n      <div class=\"ngx-form__info-banner\" role=\"status\" [attr.data-testid]=\"'info-banner-' + infoKey\">\n        \u2139\uFE0F {{ ruleResult().infoBanners[infoKey] }}\n      </div>\n    }\n\n    <!-- Rules Validation Errors & Warnings -->\n    @for (errKey of Object.keys(ruleResult().validationErrors); track errKey) {\n      <div class=\"ngx-form__error-banner\" role=\"alert\" [attr.data-testid]=\"'rule-error-' + errKey\">\n        \u26A0\uFE0F {{ ruleResult().validationErrors[errKey] }}\n      </div>\n    }\n    @for (warnKey of Object.keys(ruleResult().validationWarnings); track warnKey) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" [attr.data-testid]=\"'rule-warning-' + warnKey\">\n        \u26A1 {{ ruleResult().validationWarnings[warnKey] }}\n      </div>\n    }\n\n    <!-- Deferred VALUE_CHANGED notice for criticalField edits (vs session baseline) -->\n    @if (changedCriticalFields().length > 0) {\n      <div class=\"ngx-form__warning-banner\" role=\"status\" data-testid=\"critical-change-banner\">\n        {{ ui.text('criticalFieldChanged', language, { fields: changedCriticalFieldLabels() }) }}\n      </div>\n    }\n\n    <!-- Primary Tab bar \u2014 only if visible tabs defined -->\n    @if (visibleTabs.length > 0) {\n      <div class=\"ngx-form__tabs\" role=\"tablist\" data-testid=\"tab-strip\">\n        @for (tab of visibleTabs; track tab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab\"\n            [attr.data-testid]=\"'tab-' + tab.id\"\n            [class.ngx-form__tab--active]=\"activeTab() === tab.id\"\n            (click)=\"setActiveTab(tab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n          >\n            {{ resolveTabLabel(tab) }}\n            <!--\n              How many fields on this tab are stopping the save.\n              The count is in the accessible name rather than the badge, because \"3\" read out\n              after a tab name says nothing about what it counts.\n            -->\n            @if (tabErrorCount(tab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'tab-errors-' + tab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Sub-tab bar \u2014 only if active tab has sub-tabs -->\n    @if (visibleSubTabs.length > 0) {\n      <div\n        class=\"ngx-form__tabs ngx-form__tabs--sub\"\n        role=\"tablist\"\n        data-testid=\"subtab-strip\"\n        style=\"margin-top: -12px; margin-bottom: 12px; font-size: 13px\"\n      >\n        @for (subTab of visibleSubTabs; track subTab.id) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__tab ngx-form__tab--sub\"\n            [attr.data-testid]=\"'subtab-' + subTab.id\"\n            [class.ngx-form__tab--active]=\"activeSubTabConfig?.id === subTab.id\"\n            (click)=\"setActiveSubTab(subTab.id)\"\n            role=\"tab\"\n            [attr.aria-selected]=\"activeSubTabConfig?.id === subTab.id\"\n          >\n            {{ resolveTabLabel(subTab) }}\n            @if (subTabErrorCount(subTab); as errors) {\n              <span\n                class=\"ngx-form__tab-badge\"\n                [attr.data-testid]=\"'subtab-errors-' + subTab.id\"\n                [attr.aria-label]=\"ui.text('tabErrorCount', language, { count: errors })\"\n                >{{ errors }}</span\n              >\n            }\n          </button>\n        }\n      </div>\n    }\n\n    <!--\n      One tabpanel per tab, wrapping both branches. Focus moves here on a tab switch, and a\n      module tab is still a tab \u2014 putting the panel semantics on only the fields branch left\n      a module tab with nowhere for focus to land.\n    -->\n    <div role=\"tabpanel\" tabindex=\"-1\" #formPanel class=\"ngx-form__tabpanel\" [attr.aria-label]=\"activeTabLabel\">\n      @if (activeTabModuleComponent) {\n        <div class=\"ngx-form__module-panel\" data-testid=\"module-panel\">\n          <ng-container\n            *ngComponentOutlet=\"activeTabModuleComponent; inputs: (activeSubTabConfig || activeTabConfig)?.moduleInputs\"\n          ></ng-container>\n        </div>\n      } @else {\n        <!-- Fields for active tab (Responsive 12-column grid) -->\n        <div class=\"ngx-form__panel\" data-testid=\"form-panel\">\n          @for (field of fieldsForActiveTab; track field.id) {\n            <div\n              class=\"ngx-form__field-slot\"\n              [style.gridColumn]=\"getFieldSpan(field)\"\n              [attr.id]=\"'field-container-' + field.id\"\n              tabindex=\"-1\"\n            >\n              <ngx-dynamic-field\n                [field]=\"field\"\n                [control]=\"getControl(field.id, (activeSubTabConfig || activeTabConfig)?.id)!\"\n                [config]=\"config\"\n                [currentTabId]=\"(activeSubTabConfig || activeTabConfig)?.id\"\n                [language]=\"language\"\n                [readonly]=\"isFieldReadonly(field)\"\n                [userRoles]=\"userRoles\"\n              />\n              @if (field.hasDrift) {\n                <!--\n                Drift was previously visible only in the builder, so a referenced field whose\n                source had changed looked completely normal to the person filling the form in.\n                role=\"status\" rather than \"alert\": it is information, not an error.\n              -->\n                <span\n                  class=\"ngx-field__drift\"\n                  role=\"status\"\n                  [attr.data-testid]=\"'field-' + field.id + '-drift'\"\n                  [title]=\"driftHint(field)\"\n                  >\u26A0 {{ driftHint(field) }}</span\n                >\n              }\n              @if (field.criticalField && !readonly) {\n                <button\n                  type=\"button\"\n                  class=\"ngx-form__lock\"\n                  [attr.data-testid]=\"'lock-' + field.id\"\n                  [attr.aria-pressed]=\"!isFieldLocked(field)\"\n                  [attr.aria-label]=\"\n                    ui.text(isFieldLocked(field) ? 'unlockField' : 'lockField', language, {\n                      field: resolveFieldLabel(field),\n                    })\n                  \"\n                  [title]=\"ui.text(isFieldLocked(field) ? 'criticalFieldUnlockHint' : 'criticalFieldLockHint', language)\"\n                  (click)=\"toggleFieldLock(field)\"\n                >\n                  {{ isFieldLocked(field) ? '\uD83D\uDD12' : '\uD83D\uDD13' }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Submit button \u2014 gated by RBAC and isSaving lock -->\n    @if (!readonly && permissions.canEdit) {\n      <div class=\"ngx-form__actions\" data-testid=\"form-actions\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"form-reset\" (click)=\"reset()\" [disabled]=\"isSaving()\">\n          {{ ui.text('reset', language) }}\n        </button>\n        <!--\n          Two different \"unavailable\" states, and they are not the same thing.\n\n          `disabled` is for what a retry cannot fix \u2014 a save in flight, an async check still\n          outstanding. `data-blocked` is for validation: the button stays fully operable,\n          because pressing it is how the user gets the error summary, but it should not look\n          ready either. The stylesheet mutes it without taking the click away.\n\n          Deliberately not `aria-disabled`. That announces a control as present-but-inoperable,\n          and this one is operable and useful \u2014 pressing it raises a `role=\"alert\"` naming\n          every field at fault, which is more than a disabled button could ever say. Tooling\n          agrees: Playwright refuses to click through `aria-disabled`, and it would be right\n          to, because the attribute would be claiming something untrue.\n        -->\n        <button\n          type=\"submit\"\n          class=\"ngx-form__submit\"\n          data-testid=\"form-submit\"\n          [disabled]=\"submitDisabled\"\n          [attr.data-blocked]=\"submitBlocked ? '' : null\"\n          [title]=\"ui.text('saveShortcutHint', language)\"\n        >\n          @if (isSaving() || loading) {\n            {{ ui.text('saving', language) }}\n          } @else {\n            {{ ui.text('save', language) }}\n          }\n        </button>\n      </div>\n    }\n  </form>\n} @else {\n  <!-- permissions.view denied: render nothing of the record.\n       Presentational only \u2014 the server must not send data this user may not see. -->\n  <div class=\"ngx-form__denied\" role=\"status\" data-testid=\"form-access-denied\">\n    {{ ui.text('accessDenied', language) }}\n  </div>\n}\n", styles: [".ngx-form__panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ngx-gap, 18px);align-items:start}.ngx-form__field-slot{display:flex;align-items:flex-start;gap:6px;min-width:0}.ngx-form__field-slot ngx-dynamic-field{flex:1;min-width:0}.ngx-form__lock{flex:0 0 auto;margin-top:22px;background:none;border:1px solid transparent;border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font-size:14px;line-height:1;padding:4px 6px}.ngx-form__lock:hover{border-color:var(--ngx-color-border, #d1d5db);background:var(--ngx-color-surface-alt, #f9fafb)}@media(max-width:640px){.ngx-form__panel{grid-template-columns:minmax(0,1fr)}.ngx-form__field-slot{grid-column:1 / -1!important}}\n"] }]
         }], propDecorators: { config: [{
@@ -8367,10 +9805,8 @@ class DynamicRecordFormComponent {
     /**
      * What this record is called, as opposed to what kind of thing it is.
      *
-     * The header used to show the entity's name twice — "clients", with "Entity: clients"
-     * underneath — so the one question a record header exists to answer, *which* record am I
-     * looking at, was the one thing it did not say. The entity keeps the subtitle; this takes
-     * the heading.
+     * A record header exists to answer *which* record am I looking at, so this takes the
+     * heading and the entity name keeps the subtitle.
      *
      * The order is deliberate. `showOnMinimize` is the author saying "this is what identifies a
      * record" — it is what the summary panel and the collapsed view already show — so it is
@@ -8552,11 +9988,6 @@ class DynamicRecordFormComponent {
     formatFieldValue(field) {
         return formatDisplayValue(field.type, field.options, this.fieldValue(field.id), this.language);
     }
-    /**
-     * Finds which tab — and, where the field lives one level down, which sub-tab — owns a
-     * field. The walk used to check top-level `fields` only, so every field in a sub-tab was
-     * simply not found and the jump did nothing at all.
-     */
     /**
      * Switches to the tab holding `fieldId`, then scrolls it into view and moves focus to it.
      *
@@ -8569,10 +10000,10 @@ class DynamicRecordFormComponent {
     jumpToField(fieldId) {
         this.dynamicFormComp?.jumpToField(fieldId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicRecordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: DynamicRecordFormComponent, isStandalone: true, selector: "ngx-dynamic-record-form", inputs: { config: "config", rules: "rules", initialData: "initialData", userRoles: "userRoles", language: "language", readonly: "readonly", loading: "loading", error: "error", isReadOnly: "isReadOnly", readOnlyFields: "readOnlyFields", layout: "layout", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave", saveRejected: "saveRejected" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      {{ ui.text('recordModified', language) }}\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"ui.text('jumpToField', language, { field: formatFieldLabel(sf) })\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >\n            {{ ui.text('addRow', language) }}\n          </button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ rowDrawerTitle(rowField) }}</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 8px);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview", "layout"], outputs: ["formSubmit", "formChange", "formReset", "activeTabChange", "saveRejected"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicRecordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DynamicRecordFormComponent, isStandalone: true, selector: "ngx-dynamic-record-form", inputs: { config: "config", rules: "rules", initialData: "initialData", userRoles: "userRoles", language: "language", readonly: "readonly", loading: "loading", error: "error", isReadOnly: "isReadOnly", readOnlyFields: "readOnlyFields", layout: "layout", viewMode: "viewMode" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", formReset: "formReset", sectionSave: "sectionSave", saveRejected: "saveRejected" }, viewQueries: [{ propertyName: "dynamicFormComp", first: true, predicate: DynamicFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      {{ ui.text('recordModified', language) }}\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"ui.text('jumpToField', language, { field: formatFieldLabel(sf) })\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >\n            {{ ui.text('addRow', language) }}\n          </button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ rowDrawerTitle(rowField) }}</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 8px);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicFormComponent, selector: "ngx-dynamic-form", inputs: ["config", "rules", "initialData", "originalData", "userRoles", "language", "readonly", "readOnlyFields", "showInfoBanners", "loading", "error", "changeDebounceMs", "preview", "layout"], outputs: ["formSubmit", "formChange", "formReset", "activeTabChange", "saveRejected"] }, { kind: "component", type: DynamicFieldComponent, selector: "ngx-dynamic-field", inputs: ["field", "control", "config", "currentTabId", "language", "readonly", "userRoles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DynamicRecordFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DynamicRecordFormComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngx-dynamic-record-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, DynamicFormComponent, DynamicFieldComponent], template: "<div class=\"ngx-record-editor\">\n  <!-- Record Header -->\n  <div class=\"ngx-record-editor__header\">\n    <div class=\"ngx-record-editor__title-group\">\n      @if (profileImageUrl) {\n        <img\n          class=\"ngx-record-editor__avatar\"\n          data-testid=\"header-profile-image\"\n          [src]=\"profileImageUrl\"\n          [alt]=\"recordHeading\"\n        />\n      } @else {\n        <div class=\"ngx-record-editor__avatar\" data-testid=\"header-avatar-initial\">\n          {{ avatarLetter }}\n        </div>\n      }\n      <div>\n        <!--\n          The record's own name, with the entity underneath. These were the other way round \u2014\n          both showing the entity \u2014 so the header never said which record was open.\n        -->\n        <h2 class=\"ngx-record-editor__title\" data-testid=\"record-title\">\n          {{ recordHeading }}\n        </h2>\n        <span class=\"ngx-record-editor__subtitle\">{{ ui.text('entityLabel', language, { entity: recordTitle }) }}</span>\n      </div>\n    </div>\n\n    <!-- Record-level status switch, outside section editing -->\n    @if (headerToggleField; as toggleField) {\n      <label class=\"ngx-record-editor__header-toggle\">\n        <span>{{ formatFieldLabel(toggleField) }}</span>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          data-testid=\"header-toggle\"\n          [checked]=\"headerToggleValue\"\n          [disabled]=\"recordReadOnly\"\n          [attr.aria-checked]=\"headerToggleValue\"\n          (change)=\"toggleHeaderStatus()\"\n        />\n        <span class=\"ngx-record-editor__header-toggle-text\">{{ ui.text(headerToggleValue ? 'yes' : 'no', language) }}</span>\n      </label>\n    }\n  </div>\n\n  <!-- Dismissible info banners (rules `info` action) -->\n  @for (banner of infoBanners; track banner.fieldId) {\n    <div\n      class=\"ngx-record-editor__banner ngx-record-editor__banner--info\"\n      role=\"status\"\n      [attr.data-testid]=\"'info-banner-' + banner.fieldId\"\n    >\n      <span>\u2139\uFE0F {{ banner.message }}</span>\n      <button\n        type=\"button\"\n        class=\"ngx-record-editor__banner-dismiss\"\n        [attr.data-testid]=\"'dismiss-' + banner.fieldId\"\n        [attr.aria-label]=\"ui.text('dismissBanner', language, { message: banner.message })\"\n        (click)=\"dismissInfoBanner(banner.fieldId)\"\n      >\n        \u2715\n      </button>\n    </div>\n  }\n\n  <!-- Modification baseline banner -->\n  @if (isModified()) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--warning\">\n      {{ ui.text('recordModified', language) }}\n    </div>\n  }\n\n  <!-- Summary Panel (showOnMinimize fields with interactive jump) -->\n  @if (summaryFields().length > 0) {\n    <div class=\"ngx-record-editor__summary-panel\" data-testid=\"summary-panel\">\n      @for (sf of summaryFields(); track sf.id) {\n        <div\n          class=\"ngx-record-editor__summary-item\"\n          [attr.data-testid]=\"'summary-' + sf.id\"\n          (click)=\"jumpToField(sf.id)\"\n          [title]=\"ui.text('jumpToField', language, { field: formatFieldLabel(sf) })\"\n        >\n          <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(sf) }}</span>\n          <span class=\"ngx-record-editor__summary-val\">{{ formatFieldValue(sf) }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Section edit bar: one tab is edited at a time, and validated on its own -->\n  @if (viewMode && !recordReadOnly) {\n    <div class=\"ngx-record-editor__section-bar\">\n      @if (isEditingActiveTab) {\n        <span class=\"ngx-record-editor__section-hint\">{{ ui.text('editingSection', language) }}</span>\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-section\" (click)=\"cancelSection()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-section\" (click)=\"saveSection()\">\n          {{ ui.text('saveSection', language) }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"edit-section\" (click)=\"editSection()\">\n          {{ ui.text('editSection', language) }}\n        </button>\n      }\n    </div>\n  }\n\n  @if (Object.keys(sectionErrors()).length > 0) {\n    <div class=\"ngx-record-editor__banner ngx-record-editor__banner--error\" role=\"alert\" data-testid=\"section-errors\">\n      @for (key of Object.keys(sectionErrors()); track key) {\n        <div>\u26A0\uFE0F {{ sectionErrors()[key] }}</div>\n      }\n    </div>\n  }\n\n  <!-- Array rows: listed here, edited in the drawer below -->\n  @for (arrayField of arrayFieldsForActiveTab; track arrayField.id) {\n    <div class=\"ngx-record-editor__rows\" [attr.data-testid]=\"'rows-' + arrayField.id\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <span class=\"ngx-record-editor__summary-label\">{{ formatFieldLabel(arrayField) }}</span>\n        @if (!sectionReadOnly) {\n          <button\n            type=\"button\"\n            class=\"ngx-form__reset\"\n            [attr.data-testid]=\"'add-row-' + arrayField.id\"\n            (click)=\"openAddRow(arrayField)\"\n          >\n            {{ ui.text('addRow', language) }}\n          </button>\n        }\n      </div>\n\n      @for (row of rowsOf(arrayField); track $index) {\n        <div class=\"ngx-record-editor__row\" [attr.data-testid]=\"'row-' + arrayField.id + '-' + $index\">\n          <span class=\"ngx-record-editor__row-text\">{{ rowSummary(arrayField, row) }}</span>\n          @if (!sectionReadOnly) {\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'edit-row-' + arrayField.id + '-' + $index\"\n              (click)=\"openEditRow(arrayField, $index)\"\n            >\n              {{ ui.text('edit', language) }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"ngx-record-editor__row-btn\"\n              [attr.data-testid]=\"'delete-row-' + arrayField.id + '-' + $index\"\n              (click)=\"deleteRow(arrayField, $index)\"\n            >\n              {{ ui.text('delete', language) }}\n            </button>\n          }\n        </div>\n      } @empty {\n        <p class=\"ngx-record-editor__row-empty\">{{ ui.text('noRows', language) }}</p>\n      }\n    </div>\n  }\n\n  <!--\n    Row drawer. Deliberately outside the tab panel: building a row's FormGroup inside the\n    tab view races the tab's own initialisation (the reference hit this with FormArray).\n  -->\n  @if (inlineRowField(); as rowField) {\n    <div class=\"ngx-record-editor__drawer\" data-testid=\"row-drawer\" [formGroup]=\"inlineRowForm!\">\n      <div class=\"ngx-record-editor__rows-head\">\n        <strong>{{ rowDrawerTitle(rowField) }}</strong>\n      </div>\n\n      <div class=\"ngx-form__panel\">\n        @for (child of rowField.children ?? []; track child.id) {\n          <ngx-dynamic-field\n            [field]=\"child\"\n            [control]=\"inlineRowForm!.get(child.id)!\"\n            [config]=\"config\"\n            [language]=\"language\"\n            [readonly]=\"false\"\n            [userRoles]=\"userRoles\"\n            [style.gridColumn]=\"'span 12'\"\n          />\n        }\n      </div>\n\n      <div class=\"ngx-record-editor__section-bar\">\n        <button type=\"button\" class=\"ngx-form__reset\" data-testid=\"cancel-row\" (click)=\"cancelRow()\">\n          {{ ui.text('cancel', language) }}\n        </button>\n        <button type=\"button\" class=\"ngx-form__submit\" data-testid=\"save-row\" (click)=\"saveRow()\">\n          {{ ui.text('saveRow', language) }}\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Dynamic Form -->\n  <ngx-dynamic-form\n    [config]=\"config\"\n    [rules]=\"rules\"\n    [initialData]=\"initialData\"\n    [originalData]=\"originalBaseline()\"\n    [userRoles]=\"userRoles\"\n    [language]=\"language\"\n    [readonly]=\"sectionReadOnly\"\n    [readOnlyFields]=\"readOnlyFields\"\n    [layout]=\"layout\"\n    [showInfoBanners]=\"false\"\n    [loading]=\"loading\"\n    [error]=\"error\"\n    (formChange)=\"onFormChange($event)\"\n    (formSubmit)=\"onFormSubmit($event)\"\n    (saveRejected)=\"saveRejected.emit($event)\"\n    (formReset)=\"onFormReset()\"\n    (activeTabChange)=\"onActiveTabChange($event)\"\n  />\n</div>\n", styles: [".ngx-record-editor{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);background:var(--ngx-color-surface, #ffffff);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius, 12px);padding:20px}.ngx-record-editor__header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:var(--ngx-gap-sm, 16px);border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-record-editor__title-group{display:flex;align-items:center;gap:12px;min-width:0}.ngx-record-editor__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--ngx-color-accent-soft, #e0e7ff);color:var(--ngx-color-accent, #4f46e5);border:1px solid var(--ngx-color-border, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:none}.ngx-record-editor__title{font-size:19px;font-weight:700;color:var(--ngx-color-text, #111827);margin:0;letter-spacing:-.01em}.ngx-record-editor__subtitle{font-size:var(--ngx-hint-size, 13px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__header-toggle{display:flex;align-items:center;gap:8px;font-size:var(--ngx-label-size, 13px);font-weight:var(--ngx-label-weight, 600);color:var(--ngx-color-text, #374151)}.ngx-record-editor__header-toggle-text{font-weight:600}.ngx-record-editor__banner{padding:11px 14px;border-radius:var(--ngx-radius-sm, 8px);font-size:var(--ngx-font-size, 13px);border:1px solid transparent;border-left-width:3px}.ngx-record-editor__banner--info{background:var(--ngx-color-info-soft, #eff6ff);border-color:var(--ngx-color-border, #dbeafe);border-left-color:var(--ngx-color-info, #1d4ed8);color:var(--ngx-color-info, #1d4ed8);display:flex;align-items:center;justify-content:space-between;gap:12px}.ngx-record-editor__banner--error{background:var(--ngx-color-error-soft, #fef2f2);border-color:var(--ngx-color-border, #fecaca);border-left-color:var(--ngx-color-error, #b91c1c);color:var(--ngx-color-error, #b91c1c)}.ngx-record-editor__banner--warning{background:var(--ngx-color-warning-soft, #fffbeb);border-color:var(--ngx-color-border, #fef3c7);border-left-color:var(--ngx-color-warning, #b45309);color:var(--ngx-color-warning, #b45309)}.ngx-record-editor__banner-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}.ngx-record-editor__banner-dismiss:hover{background:#0000000f}.ngx-record-editor__section-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.ngx-record-editor__section-hint{margin-right:auto;font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280)}.ngx-record-editor__rows{border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius-sm, 8px);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.ngx-record-editor__rows-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ngx-record-editor__row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-record-editor__row-text{flex:1;font-size:var(--ngx-font-size, 13px);overflow-wrap:anywhere}.ngx-record-editor__row-btn{background:var(--ngx-color-surface, none);border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);cursor:pointer;font:inherit;font-size:var(--ngx-hint-size, 12px);font-weight:var(--ngx-label-weight, 600);color:inherit;padding:4px 10px}.ngx-record-editor__row-btn:hover{border-color:var(--ngx-color-accent, #e5e7eb);color:var(--ngx-color-accent, inherit)}.ngx-record-editor__row-empty{font-size:var(--ngx-hint-size, 12px);color:var(--ngx-color-muted, #6b7280);margin:0}.ngx-record-editor__drawer{border:1px solid var(--ngx-color-border, #dbeafe);background:var(--ngx-color-surface-alt, #f8fafc);border-radius:var(--ngx-radius, 8px);padding:16px;display:flex;flex-direction:column;gap:12px}.ngx-record-editor__summary-panel{background:var(--ngx-color-surface-alt, #f9fafb);border:1px solid var(--ngx-color-border, #f3f4f6);border-radius:var(--ngx-radius, 8px);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px var(--ngx-gap, 12px)}.ngx-record-editor__summary-item{display:flex;flex-direction:column;cursor:pointer;padding:6px 10px;border-radius:var(--ngx-radius-sm, 6px);min-width:0;transition:background .15s}.ngx-record-editor__summary-item:hover{background:var(--ngx-color-accent-soft, #eff6ff)}.ngx-record-editor__summary-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ngx-color-muted, #6b7280);font-weight:600}.ngx-record-editor__summary-val{font-size:var(--ngx-font-size, 14px);font-weight:600;color:var(--ngx-color-text, #1f2937);overflow-wrap:anywhere}@media(prefers-reduced-motion:reduce){.ngx-record-editor__summary-item{transition:none}}\n"] }]
         }], propDecorators: { config: [{
@@ -8738,10 +10169,10 @@ class LocalImportTransport {
         const csv = toCsv(spec.columns.map(column => column.header));
         return new Blob([csv], { type: 'text/csv;charset=utf-8' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LocalImportTransport, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LocalImportTransport, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LocalImportTransport, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LocalImportTransport, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: LocalImportTransport, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: LocalImportTransport, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -8965,8 +10396,8 @@ class ImportErrorsComponent {
             .sort((a, b) => a[0] - b[0])
             .map(([row, problems]) => ({ row, problems }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportErrorsComponent, isStandalone: true, selector: "ngx-import-errors", inputs: { errors: "errors", language: "language" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportErrorsComponent, isStandalone: true, selector: "ngx-import-errors", inputs: { errors: "errors", language: "language" }, ngImport: i0, template: `
     @if (errors.length) {
       <section class="ngx-import-errors" data-testid="import-errors">
         <h4 class="ngx-import-errors__heading">{{ ui.text('importErrorsHeading', language) }}</h4>
@@ -8998,7 +10429,7 @@ class ImportErrorsComponent {
     }
   `, isInline: true, styles: [".ngx-import-errors__heading{margin:0 0 8px;font-size:var(--ngx-font-size, 14px);color:var(--ngx-color-error, #b91c1c)}.ngx-import-errors__table{width:100%;border-collapse:collapse}.ngx-import-errors__table th,.ngx-import-errors__table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--ngx-color-border, #e5e7eb);vertical-align:top}.ngx-import-errors__table thead th{color:var(--ngx-color-muted, #6b7280)}.ngx-import-errors__table tbody th{white-space:nowrap;color:var(--ngx-color-error, #b91c1c)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportErrorsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-errors', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `
     @if (errors.length) {
@@ -9109,8 +10540,8 @@ class ImportMapperComponent {
             entries,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportMapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportMapperComponent, isStandalone: true, selector: "ngx-import-mapper", inputs: { config: "config", headers: "headers", plan: "plan", language: "language" }, outputs: { planChange: "planChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportMapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportMapperComponent, isStandalone: true, selector: "ngx-import-mapper", inputs: { config: "config", headers: "headers", plan: "plan", language: "language" }, outputs: { planChange: "planChange" }, usesOnChanges: true, ngImport: i0, template: `
     <section class="ngx-import-mapper" data-testid="import-mapper">
       <p class="ngx-import-mapper__summary" data-testid="import-mapped-count">
         {{ ui.text('importMappedCount', language, { mapped: mappedCount(), total: rows().length }) }}
@@ -9168,7 +10599,7 @@ class ImportMapperComponent {
     </section>
   `, isInline: true, styles: [".ngx-import-mapper__summary,.ngx-import-mapper__warning,.ngx-import-mapper__note{margin:0 0 10px}.ngx-import-mapper__warning{color:var(--ngx-color-warning, #b45309);background:var(--ngx-color-warning-soft, #fffbeb);border:1px solid var(--ngx-color-border, #fef3c7);border-radius:var(--ngx-radius-sm, 6px);padding:8px 12px}.ngx-import-mapper__note{color:var(--ngx-color-muted, #6b7280)}.ngx-import-mapper__table{width:100%;border-collapse:collapse}.ngx-import-mapper__table th,.ngx-import-mapper__table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--ngx-color-border, #e5e7eb);vertical-align:middle}.ngx-import-mapper__table thead th{color:var(--ngx-color-muted, #6b7280);font-size:var(--ngx-font-size, 13px);text-transform:uppercase;letter-spacing:.04em}.ngx-import-mapper__required{color:var(--ngx-color-error, #b91c1c);margin-left:2px}.ngx-import-mapper__select{min-width:220px;max-width:100%;padding:6px 8px;border:1px solid var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff);color:inherit;font:inherit}.ngx-import-mapper__guess{margin-left:8px;padding:2px 8px;border-radius:999px;font-size:12px;color:var(--ngx-color-info, #1d4ed8);background:var(--ngx-color-info-soft, #eff6ff)}@media(max-width:640px){.ngx-import-mapper__select{min-width:0;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportMapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportMapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-mapper', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: `
     <section class="ngx-import-mapper" data-testid="import-mapper">
@@ -9310,8 +10741,8 @@ class ImportPreviewComponent {
             }),
         })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportPreviewComponent, isStandalone: true, selector: "ngx-import-preview", inputs: { config: "config", plan: "plan", rows: "rows", lookups: "lookups", rules: "rules", language: "language" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportPreviewComponent, isStandalone: true, selector: "ngx-import-preview", inputs: { config: "config", plan: "plan", rows: "rows", lookups: "lookups", rules: "rules", language: "language" }, usesOnChanges: true, ngImport: i0, template: `
     <section class="ngx-import-preview" data-testid="import-preview">
       <h4 class="ngx-import-preview__heading">
         {{ ui.text('importPreviewHeading', language, { count: rows.length }) }}
@@ -9349,7 +10780,7 @@ class ImportPreviewComponent {
     </section>
   `, isInline: true, styles: [".ngx-import-preview__heading{margin:0 0 8px;font-size:var(--ngx-font-size, 14px)}.ngx-import-preview__scroll{overflow-x:auto;border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px)}.ngx-import-preview__table{width:100%;border-collapse:collapse;white-space:nowrap}.ngx-import-preview__table th,.ngx-import-preview__table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--ngx-color-border, #f3f4f6)}.ngx-import-preview__table thead th{background:var(--ngx-color-surface-alt, #f9fafb);color:var(--ngx-color-muted, #6b7280)}.ngx-import-preview__cell--error{color:var(--ngx-color-error, #b91c1c);background:var(--ngx-color-error-soft, #fef2f2)}.ngx-import-preview__row--rejected td{opacity:.65}.ngx-import-preview__reason td{white-space:normal;color:var(--ngx-color-error, #b91c1c);background:var(--ngx-color-error-soft, #fef2f2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `
     <section class="ngx-import-preview" data-testid="import-preview">
@@ -9458,8 +10889,8 @@ class ImportTemplateComponent {
     selectAll(selected) {
         this.choices.update(choices => choices.map(choice => ({ ...choice, selected })));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: ImportTemplateComponent, isStandalone: true, selector: "ngx-import-template", inputs: { config: "config", language: "language" }, outputs: { download: "download" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: ImportTemplateComponent, isStandalone: true, selector: "ngx-import-template", inputs: { config: "config", language: "language" }, outputs: { download: "download" }, usesOnChanges: true, ngImport: i0, template: `
     <section class="ngx-import-template" data-testid="import-template">
       <h4 class="ngx-import-template__heading">{{ ui.text('importTemplateHeading', language) }}</h4>
       <p class="ngx-import-template__explain">{{ ui.text('importTemplateExplain', language) }}</p>
@@ -9510,7 +10941,7 @@ class ImportTemplateComponent {
     </section>
   `, isInline: true, styles: [".ngx-import-template{padding:14px;border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-import-template__heading{margin:0 0 4px;font-size:var(--ngx-font-size, 14px)}.ngx-import-template__explain{margin:0 0 10px;color:var(--ngx-color-muted, #6b7280)}.ngx-import-template__bulk{display:flex;gap:8px;margin-bottom:10px}.ngx-import-template__list{list-style:none;margin:0 0 10px;padding:0;max-height:240px;overflow-y:auto;display:grid;gap:4px}.ngx-import-template__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}.ngx-import-template__item label{display:flex;align-items:center;gap:6px;cursor:pointer}.ngx-import-template__note{color:var(--ngx-color-muted, #6b7280);font-size:12px}.ngx-import-template__unsupported{margin:0 0 10px;color:var(--ngx-color-muted, #6b7280)}.ngx-import-template button{padding:6px 12px;border:1px solid var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff);color:inherit;font:inherit;cursor:pointer}.ngx-import-template button:disabled{opacity:.55;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ImportTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: ImportTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-import-template', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `
     <section class="ngx-import-template" data-testid="import-template">
@@ -9796,8 +11227,8 @@ class EntityImportComponent {
         this.problem.set(null);
         this.step.set('upload');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityImportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: EntityImportComponent, isStandalone: true, selector: "ngx-entity-import", inputs: { config: "config", rules: "rules", lookups: "lookups", language: "language", templateFormat: "templateFormat" }, outputs: { importComplete: "importComplete", templateReady: "templateReady" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityImportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: EntityImportComponent, isStandalone: true, selector: "ngx-entity-import", inputs: { config: "config", rules: "rules", lookups: "lookups", language: "language", templateFormat: "templateFormat" }, outputs: { importComplete: "importComplete", templateReady: "templateReady" }, ngImport: i0, template: `
     <div class="ngx-import" data-testid="entity-import">
       <ol class="ngx-import__steps" data-testid="import-steps">
         @for (name of steps; track name) {
@@ -9915,7 +11346,7 @@ class EntityImportComponent {
     </div>
   `, isInline: true, styles: [".ngx-import{display:flex;flex-direction:column;gap:var(--ngx-gap, 16px);color:var(--ngx-color-text, #1f2937);font-size:var(--ngx-font-size, 14px)}.ngx-import__steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}.ngx-import__step{padding:4px 12px;border:1px solid var(--ngx-color-border, #e5e7eb);border-radius:var(--ngx-radius-sm, 6px);color:var(--ngx-color-muted, #6b7280);background:var(--ngx-color-surface-alt, #f9fafb)}.ngx-import__step--current{color:var(--ngx-color-accent, #4f46e5);border-color:var(--ngx-color-accent, #4f46e5);background:var(--ngx-color-accent-soft, #e0e7ff);font-weight:600}.ngx-import__problem{margin:0;padding:10px 12px;border:1px solid var(--ngx-color-border, #fecaca);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-error-soft, #fef2f2);color:var(--ngx-color-error, #b91c1c);overflow-wrap:anywhere}.ngx-import__file{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px dashed var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff)}.ngx-import button{align-self:flex-start;padding:8px 16px;border:1px solid var(--ngx-color-border, #d1d5db);border-radius:var(--ngx-radius-sm, 6px);background:var(--ngx-color-surface, #ffffff);color:inherit;font:inherit;cursor:pointer}.ngx-import button:hover:not(:disabled){border-color:var(--ngx-color-accent, #4f46e5);background:var(--ngx-color-accent-soft, #e0e7ff)}.ngx-import button:disabled{opacity:.55;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: ImportTemplateComponent, selector: "ngx-import-template", inputs: ["config", "language"], outputs: ["download"] }, { kind: "component", type: ImportMapperComponent, selector: "ngx-import-mapper", inputs: ["config", "headers", "plan", "language"], outputs: ["planChange"] }, { kind: "component", type: ImportPreviewComponent, selector: "ngx-import-preview", inputs: ["config", "plan", "rows", "lookups", "rules", "language"] }, { kind: "component", type: ImportErrorsComponent, selector: "ngx-import-errors", inputs: ["errors", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: EntityImportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityImportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-entity-import', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ImportTemplateComponent,
@@ -10085,5 +11516,5 @@ function saveBlob(blob, filename) {
  * Generated bundle index. Do not edit.
  */
 
-export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_UI_TEXT, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityImportComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, HttpImportTransport, IMPORT_TRANSPORT, ImageFieldComponent, ImportErrorsComponent, ImportMapperComponent, ImportPreviewComponent, ImportTemplateComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LocalImportTransport, LookupRegistryService, MARKDOWN_RENDERER, MASKED_PLACEHOLDER, MASKED_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RbacService, RulesEvaluationService, SHEET_PARSER, SYSTEM_DEFAULT_CAN_EDIT, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UI_TEXT, UPLOAD_HANDLER, UiTextService, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, defaultSheetParser, fieldDescribedBy, fieldDomId, nextFieldInstanceId, provideBuiltInFieldTypes, provideFieldTypes, provideHttpImportTransport, provideNgxDynamicEntity, refreshChoiceOptions, resolveUiText };
+export { ASYNC_VALIDATOR_REGISTRY, ArrayFieldComponent, BooleanFieldComponent, COMMON_MODULES_REGISTRY, CONFIG_SOURCE, CascadeDataService, CheckboxFieldComponent, ColorFieldComponent, ConfigSourceService, CurrencyFieldComponent, DEFAULT_UI_TEXT, DEFAULT_VALIDATION_MESSAGES, DateFieldComponent, DateTimeFieldComponent, DropdownFieldComponent, DynamicFieldComponent, DynamicFormComponent, DynamicRecordFormComponent, ENTITY_REF_CACHE_STORE, ENTITY_REF_REGISTRY, EmailFieldComponent, EntityImportComponent, EntityRefFieldComponent, EntityRefRegistryService, EntityRefSelectionService, EntityReferenceService, FIELD_TYPE_REGISTRY, FIELD_TYPE_SETS, FieldRegistryService, FileFieldComponent, GroupFieldComponent, HOOK_REGISTRY, HookRegistryService, HttpImportTransport, IMPORT_TRANSPORT, ImageFieldComponent, ImportErrorsComponent, ImportMapperComponent, ImportPreviewComponent, ImportTemplateComponent, InMemoryEntityRefCacheStore, LOOKUP_REGISTRY, LocalImportTransport, LookupRegistryService, MARKDOWN_RENDERER, MASKED_PLACEHOLDER, MASKED_ROLES, MarkdownFieldComponent, MonthYearFieldComponent, MultiSelectFieldComponent, NumberFieldComponent, PasswordFieldComponent, PhoneFieldComponent, RECORD_MIGRATIONS, RadioFieldComponent, RatingFieldComponent, RbacService, RulesEvaluationService, SHEET_PARSER, SYSTEM_DEFAULT_CAN_EDIT, SliderFieldComponent, TagsFieldComponent, TextFieldComponent, TextareaFieldComponent, TimeFieldComponent, UI_TEXT, UPLOAD_HANDLER, UiTextService, UrlFieldComponent, VALIDATION_MESSAGES, VALIDATOR_REGISTRY, ValidationMessagesService, ValidatorRegistryService, builtInFieldTypes, defaultSheetParser, fieldDescribedBy, fieldDomId, nextFieldInstanceId, phoneValidator, provideBuiltInFieldTypes, provideFieldTypes, provideHttpImportTransport, provideNgxDynamicEntity, refreshChoiceOptions, resolveUiText, urlValidator };
 //# sourceMappingURL=ngx-dynamic-entity.mjs.map