ngx-dynamic-entity 2.1.1 → 2.3.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, 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';
+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, fieldsUnderTab, getTabPath, fieldRefFor, flattenFieldValues, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, toRefToken, collectFieldScopes, applyAutoPatch, refOf, isUnsafePath, valuesEqual, parseCsv, arrayBoundFor, deriveImportColumns, suggestMapping, cellText, applyMapping, decimalMarkFor, toCsv, stripIndices, CORE_VERSION, DEFAULT_ARRAY_ROWS, upgradeLegacyRefs, 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';
@@ -302,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.`,
@@ -318,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' },
@@ -854,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',
@@ -894,8 +920,16 @@ const DEFAULT_UI_TEXT = {
     importGuessed: 'Guessed',
     importMappedCount: '{mapped} of {total} field(s) matched.',
     importRequiredUnmapped: '{count} required field(s) still need a column.',
+    importConstant: 'Fixed value: {value}',
+    importAddSlot: 'Add a {label} row',
+    importStaleHeading: 'Mapped to fields this form no longer has',
+    importStaleExplain: 'The import will refuse this mapping until these are removed.',
+    importRemoveEntry: 'Remove',
     // Import wizard — review and result
     importPreviewHeading: 'First {count} row(s), as they will be saved',
+    importDelimiterComma: 'Columns are separated by commas.',
+    importDelimiterSemicolon: 'Columns are separated by semicolons, and numbers use a decimal comma.',
+    importDelimiterTab: 'Columns are separated by tabs.',
     importRowRejected: 'This row will not be imported: {reason}',
     importRunImport: 'Import {count} row(s)',
     importImporting: 'Importing…',
@@ -5195,6 +5229,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", 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.
  */
@@ -5213,6 +5265,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))
@@ -5262,6 +5318,10 @@ class ValidatorRegistryService {
         }
         if (config.email)
             fnList.push(Validators.email);
+        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 ?? []) {
@@ -6152,239 +6212,1756 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", 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.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*.
+ * URL field: a `type="url"` input, and a link when read-only.
  *
- * 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.
+ * 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 {
-    /**
-     * Evaluate rules against form values and optional original baseline values.
-     */
-    evaluate(rules, values, originalValues, options) {
-        return evaluateFormRules(rules, values, originalValues, options);
-    }
+class UrlFieldComponent {
     /**
-     * Filter rules pertinent to a single tab.
+     * 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`.
      */
-    filterForTab(rules, tabId, config) {
-        return filterRulesForTab(rules, tabId, config);
+    instanceId = nextFieldInstanceId();
+    domId(suffix = '') {
+        return fieldDomId(this.field, this.instanceId, suffix);
     }
-    /**
-     * 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);
+    /** 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);
     }
-    /** 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);
+    get placeholder() {
+        return resolveLabel(this.field?.placeholder, 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 });
-            }
-        }
+    /** Author help text, shown under the control and named by `aria-describedby`. */
+    get hint() {
+        return resolveLabel(this.field?.hint, this.language);
     }
-    /**
-     * 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;
+    /** 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);
     }
-    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;
+    /** The ids of whatever is describing this control right now. */
+    describedBy() {
+        return fieldDescribedBy(s => this.domId(s), { hint: !!this.hint, error: !!this.errorMessage });
     }
-    /** 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);
-                }
-                if (resolved) {
-                    this.cache.set(entityKey, resolved);
-                }
-                return resolved;
-            }
-            catch (err) {
-                console.warn(`ConfigSourceService failed to load config for entity "${entityKey}"`, err);
-                return undefined;
-            }
-            finally {
-                this.inFlight.delete(entityKey);
-            }
-        })();
-        this.inFlight.set(entityKey, promise);
-        return promise;
+    get errorMessage() {
+        if (!this.control?.errors || !this.control.touched)
+            return '';
+        return this.messages.resolveForField(this.control.errors, this.language, this.field.type);
     }
-    /** Clear cached configs (e.g. after a config edit in the builder). */
-    clearCache(entityKey) {
-        if (entityKey) {
-            this.cache.delete(entityKey);
+    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.
+     *
+     * A tab that is not rendered — hidden by a rule, or `visibility: false` with no rule showing
+     * it — hides everything it owns, sub-tabs and container children included. Only fields were
+     * checked here, so a rule hiding a tab with a required field on it left the form invalid
+     * with the field out of sight and out of the error summary: Save did nothing, silently.
+     * Import already relaxed a hidden tab's fields, so the form refused rows import accepted.
+     *
+     * 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 = [];
+        const onHiddenTab = this.fieldsOnHiddenTabs(ctx.result, ctx.config);
+        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 = onHiddenTab.has(field) || !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 });
+            }
+        }
+    }
+    /**
+     * Every field owned by a tab that does not render, under `isTabVisible`'s precedence.
+     *
+     * Stops descending at the first hidden tab: `fieldsUnderTab` already covers its sub-tabs,
+     * and a sub-tab of a hidden tab is not rendered whatever its own visibility says.
+     */
+    fieldsOnHiddenTabs(result, config) {
+        const out = new Set();
+        const visit = (tabs) => {
+            for (const tab of Array.isArray(tabs) ? tabs : []) {
+                if (!tab || typeof tab !== 'object' || !tab.id)
+                    continue;
+                if (this.isTabVisible(result, tab)) {
+                    visit(tab.children);
+                }
+                else {
+                    for (const entry of fieldsUnderTab(config, tab.id))
+                        out.add(entry.field);
+                }
+            }
+        };
+        visit(config?.tabs);
+        return out;
+    }
+    /**
+     * 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);
+                }
+                if (resolved) {
+                    this.cache.set(entityKey, resolved);
+                }
+                return resolved;
+            }
+            catch (err) {
+                console.warn(`ConfigSourceService failed to load config for entity "${entityKey}"`, err);
+                return undefined;
+            }
+            finally {
+                this.inFlight.delete(entityKey);
+            }
+        })();
+        this.inFlight.set(entityKey, promise);
+        return promise;
+    }
+    /** Clear cached configs (e.g. after a config edit in the builder). */
+    clearCache(entityKey) {
+        if (entityKey) {
+            this.cache.delete(entityKey);
         }
         else {
             this.cache.clear();
@@ -6525,18 +8102,11 @@ class FormStructureService {
      * 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;
+        // The naming rule is core's, shared with the importer; only where values come from is ours.
+        return flattenFieldValues(entries, entry => {
             const ctrl = this.controlAt(form, entry);
-            if (!ctrl)
-                continue;
-            out[field.id] = ctrl.value;
-            out[toRefToken(refOf(field, entry.scope))] = ctrl.value;
-        }
-        return out;
+            return ctrl ? { value: ctrl.value } : undefined;
+        });
     }
     /**
      * Find a control by reference: a bracketed path, or a bare field id.
@@ -6716,6 +8286,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.
 };
@@ -7691,6 +9267,7 @@ class DynamicFormComponent {
             namesOf: field => this.namesOf(field),
             addressOf: field => this.addressOf(field),
             controlFor: entry => this.controlForEntry(entry),
+            config: this.config,
         });
     }
     /** Every field in the config, including `group`/`array` children. */
@@ -8542,7 +10119,10 @@ const defaultSheetParser = async (file) => {
         throw new Error(`Cannot read "${file.name}". The built-in parser handles CSV only — register a ` +
             'sheetParser with provideNgxDynamicEntity({ sheetParser }) to accept other formats.');
     }
-    return parseCsv(await file.text());
+    // A `.tsv` says what it is. Anything else is read the way `parseCsv` reads text — the
+    // separator its header line uses most — which is also how the server reads an upload.
+    const tabs = /\.tsv$/i.test(file?.name ?? '');
+    return parseCsv(await file.text(), tabs ? { delimiter: '\t' } : {});
 };
 
 /**
@@ -8590,12 +10170,18 @@ class LocalImportTransport {
     }
     async preview(file, context) {
         const sheet = await this.read(file);
-        const { columns } = deriveImportColumns(context.config, { lang: context.lang });
+        // Sized from the headers exactly as the server sizes them, so both offer the same slots.
+        const arrayBound = arrayBoundFor(sheet.headers, context.config, null, context.lang);
+        const { columns } = deriveImportColumns(context.config, { lang: context.lang, maxArrayRows: arrayBound });
         return {
             headers: sheet.headers,
-            sample: sheet.rows.slice(0, SAMPLE_ROWS),
+            // Rendered the way the server renders it, so a typed date shows — and previews — as the
+            // calendar date the commit will store, not as a timestamp.
+            sample: sheet.rows.slice(0, SAMPLE_ROWS).map(row => row.map(cellText)),
             rowCount: sheet.rows.length,
             suggestion: suggestMapping(sheet.headers, columns, context.config?.entity ?? ''),
+            arrayBound,
+            ...(sheet.delimiter ? { delimiter: sheet.delimiter } : {}),
         };
     }
     async commit(file, plan, context) {
@@ -8604,6 +10190,8 @@ class LocalImportTransport {
             lang: context.lang,
             rules: context.rules,
             lookups: context.lookups,
+            // A `;` file means `1,5` is one and a half — the same call the server makes.
+            decimal: decimalMarkFor(sheet.delimiter),
         });
     }
     async template(spec, format) {
@@ -8765,6 +10353,9 @@ class HttpImportTransport {
             sample: preview.sample ?? [],
             suggestion: preview.suggestion,
             rowCount: preview.rowCount ?? 0,
+            // A server older than 2.3 does not say, and always sized for the default.
+            arrayBound: preview.arrayBound ?? DEFAULT_ARRAY_ROWS,
+            ...(preview.delimiter ? { delimiter: preview.delimiter } : {}),
         };
     }
     async commit(file, plan, context) {
@@ -8924,6 +10515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 type: Input
             }] } });
 
+/** The select's value for "keep the plan's fixed value", which is not a column. */
+const CONSTANT = -1;
 /**
  * Match the sheet's columns to the config's fields.
  *
@@ -8953,18 +10546,70 @@ class ImportMapperComponent {
      * attachment column was never going to arrive.
      */
     unsupported = signal(0, ...(ngDevMode ? [{ debugName: "unsupported" }] : /* istanbul ignore next */ []));
+    /** A plan entry whose field this config no longer has. Kept, and emitted, until removed. */
+    stale = signal([], ...(ngDevMode ? [{ debugName: "stale" }] : /* istanbul ignore next */ []));
+    /** Repeating fields the user can add a row to. */
+    arrays = signal([], ...(ngDevMode ? [{ debugName: "arrays" }] : /* istanbul ignore next */ []));
+    constant = CONSTANT;
+    /** Rows added by hand per repeating field, on top of what the sheet and plan imply. */
+    extraSlots = new Map();
+    /** The incoming plan, read through the 2.2 alias. Every entry in it survives `toPlan`. */
+    incoming = null;
     ngOnChanges() {
-        const { columns, unsupported } = deriveImportColumns(this.config, { lang: this.language });
+        this.incoming = this.plan ? upgradeLegacyRefs(this.plan, this.config) : null;
+        this.extraSlots.clear();
+        this.rows.set([]);
+        this.rebuild();
+    }
+    /**
+     * Rows for every field, sized so nothing the plan or the sheet names is out of reach.
+     *
+     * Sizing from the default three meant a sheet with `Phone 4` could not be mapped at all,
+     * and a stored plan reaching further lost those entries on the next change — `toPlan` only
+     * ever emitted rows, and there were none for them.
+     */
+    rebuild() {
+        const entries = (this.incoming?.entries ?? []).filter(Boolean);
+        const base = arrayBoundFor(this.headers, this.config, this.incoming, this.language);
+        const extra = Math.max(0, ...this.extraSlots.values());
+        // Readonly and system fields are derived so a plan that maps one keeps it, but only
+        // offered as a row when the plan does — nobody maps a column onto a field the form fills.
+        const { columns, unsupported } = deriveImportColumns(this.config, {
+            lang: this.language,
+            maxArrayRows: base + extra,
+            includeReadonly: true,
+            includeSystemDefault: true,
+        });
         this.unsupported.set(unsupported.length);
-        const byRef = new Map((this.plan?.entries ?? []).map(entry => [entry.ref, entry]));
-        this.rows.set(columns.map(column => {
+        const byRef = new Map(entries.map(entry => [entry.ref, entry]));
+        const known = new Set(columns.map(column => column.ref));
+        const previous = new Map(this.rows().map(row => [row.column.ref, row]));
+        const offered = columns.filter(column => (byRef.has(column.ref) || (!column.field.readonly && !column.field.systemDefault)) &&
+            (column.arrayRef === undefined ||
+                byRef.has(column.ref) ||
+                column.arrayIndex < base + (this.extraSlots.get(column.arrayRef) ?? 0)));
+        this.rows.set(offered.map(column => {
+            // A choice already made survives a rebuild for an added slot.
+            const kept = previous.get(column.ref);
+            if (kept)
+                return { ...kept, column };
             const entry = byRef.get(column.ref);
             return {
                 column,
-                source: entry?.column ?? null,
+                source: entry?.column ?? (entry?.constant !== undefined ? CONSTANT : null),
                 guessed: entry?.confidence === 'guess',
+                entry,
+                dirty: false,
             };
         }));
+        this.stale.set(entries.filter(entry => !known.has(entry.ref)));
+        const arrays = new Map();
+        for (const column of offered) {
+            if (column.arrayRef !== undefined && !arrays.has(column.arrayRef)) {
+                arrays.set(column.arrayRef, column.arrayLabel ?? column.arrayRef);
+            }
+        }
+        this.arrays.set([...arrays].map(([arrayRef, label]) => ({ arrayRef, label })));
     }
     mappedCount() {
         return this.rows().filter(row => row.source !== null).length;
@@ -8972,24 +10617,75 @@ class ImportMapperComponent {
     missingRequired() {
         return this.rows().filter(row => row.column.required && row.source === null).length;
     }
+    hasConstant(row) {
+        return !!row.entry && row.entry.constant !== undefined && row.entry.column === undefined;
+    }
+    constantText(entry) {
+        const value = entry.constant;
+        return typeof value === 'string' ? value : JSON.stringify(value);
+    }
     choose(row, source) {
         this.rows.update(rows => rows.map(candidate => candidate.column.ref === row.column.ref
-            ? // A hand-made choice is not a guess any more, so the badge goes.
-                { ...candidate, source, guessed: false }
+            ? // A hand-made choice is not a guess any more, so the badge goes. Going back to
+                // the plan's fixed value is going back to its entry, untouched.
+                { ...candidate, source, guessed: false, dirty: source !== CONSTANT }
             : candidate));
         this.planChange.emit(this.toPlan());
     }
-    /** The current selections as the plan that will be applied. */
+    /** One more row for one repeating field, for this session. */
+    addSlot(arrayRef) {
+        this.extraSlots.set(arrayRef, (this.extraSlots.get(arrayRef) ?? 0) + 1);
+        this.rebuild();
+    }
+    removeStale(entry) {
+        this.stale.update(stale => stale.filter(candidate => candidate !== entry));
+        this.planChange.emit(this.toPlan());
+    }
+    /**
+     * The current selections as the plan that will be applied.
+     *
+     * Every entry of the incoming plan survives in its own position — a fixed value, a ref the
+     * config no longer has — unless the user changed or removed it, and an untouched entry is
+     * emitted exactly as it arrived. New selections follow, in field order.
+     */
     toPlan() {
-        const entries = this.rows()
-            .filter(row => row.source !== null)
-            .map(row => ({
-            ref: row.column.ref,
-            column: row.source,
-            header: this.headers[row.source],
-            confidence: row.guessed ? 'guess' : 'exact',
-        }));
+        const rowByRef = new Map(this.rows().map(row => [row.column.ref, row]));
+        const stale = new Set(this.stale());
+        const emitted = new Set();
+        const entries = [];
+        const entryOf = (row) => {
+            if (!row.dirty && row.entry)
+                return row.entry;
+            if (row.source === null || row.source === CONSTANT)
+                return null;
+            return {
+                ref: row.column.ref,
+                column: row.source,
+                header: this.headers[row.source],
+                confidence: row.guessed ? 'guess' : 'exact',
+            };
+        };
+        for (const original of this.incoming?.entries ?? []) {
+            const row = original ? rowByRef.get(original.ref) : undefined;
+            if (row) {
+                emitted.add(row.column.ref);
+                const entry = entryOf(row);
+                if (entry)
+                    entries.push(entry);
+            }
+            else if (stale.has(original)) {
+                entries.push(original);
+            }
+        }
+        for (const row of this.rows()) {
+            if (emitted.has(row.column.ref))
+                continue;
+            const entry = entryOf(row);
+            if (entry)
+                entries.push(entry);
+        }
         return {
+            ...this.incoming,
             entity: this.config?.entity ?? '',
             configVersion: this.config?.version,
             sourceHeaders: [...this.headers],
@@ -9038,6 +10734,11 @@ class ImportMapperComponent {
                   (ngModelChange)="choose(row, $event)"
                 >
                   <option [ngValue]="null">{{ ui.text('importUnmapped', language) }}</option>
+                  @if (hasConstant(row)) {
+                    <option [ngValue]="constant">
+                      {{ ui.text('importConstant', language, { value: constantText(row.entry!) }) }}
+                    </option>
+                  }
                   @for (header of headers; track $index) {
                     <option [ngValue]="$index">{{ header || '—' }}</option>
                   }
@@ -9052,8 +10753,47 @@ class ImportMapperComponent {
           }
         </tbody>
       </table>
+
+      @if (arrays().length) {
+        <p class="ngx-import-mapper__slots">
+          @for (array of arrays(); track array.arrayRef) {
+            <button
+              type="button"
+              class="ngx-import-mapper__add-slot"
+              [attr.data-testid]="'import-add-slot-' + array.arrayRef"
+              (click)="addSlot(array.arrayRef)"
+            >
+              {{ ui.text('importAddSlot', language, { label: array.label }) }}
+            </button>
+          }
+        </p>
+      }
+
+      @if (stale().length) {
+        <div class="ngx-import-mapper__stale" data-testid="import-stale" role="alert">
+          <p>
+            <strong>{{ ui.text('importStaleHeading', language) }}</strong>
+            {{ ui.text('importStaleExplain', language) }}
+          </p>
+          <ul>
+            @for (entry of stale(); track entry.ref) {
+              <li [attr.data-testid]="'import-stale-' + entry.ref">
+                <code>{{ entry.ref }}</code>
+                <button
+                  type="button"
+                  class="ngx-import-mapper__remove"
+                  [attr.data-testid]="'import-remove-' + entry.ref"
+                  (click)="removeStale(entry)"
+                >
+                  {{ ui.text('importRemoveEntry', language) }}
+                </button>
+              </li>
+            }
+          </ul>
+        </div>
+      }
     </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 });
+  `, 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__slots{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}.ngx-import-mapper__add-slot,.ngx-import-mapper__remove{padding:4px 10px;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-mapper__remove{margin-left:8px}.ngx-import-mapper__stale{margin-top:12px;padding:8px 12px;color:var(--ngx-color-error, #b91c1c);background:var(--ngx-color-error-soft, #fef2f2);border-radius:var(--ngx-radius-sm, 6px)}.ngx-import-mapper__stale p,.ngx-import-mapper__stale ul{margin:0 0 6px}.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.24", ngImport: i0, type: ImportMapperComponent, decorators: [{
             type: Component,
@@ -9098,6 +10838,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                   (ngModelChange)="choose(row, $event)"
                 >
                   <option [ngValue]="null">{{ ui.text('importUnmapped', language) }}</option>
+                  @if (hasConstant(row)) {
+                    <option [ngValue]="constant">
+                      {{ ui.text('importConstant', language, { value: constantText(row.entry!) }) }}
+                    </option>
+                  }
                   @for (header of headers; track $index) {
                     <option [ngValue]="$index">{{ header || '—' }}</option>
                   }
@@ -9112,8 +10857,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
           }
         </tbody>
       </table>
+
+      @if (arrays().length) {
+        <p class="ngx-import-mapper__slots">
+          @for (array of arrays(); track array.arrayRef) {
+            <button
+              type="button"
+              class="ngx-import-mapper__add-slot"
+              [attr.data-testid]="'import-add-slot-' + array.arrayRef"
+              (click)="addSlot(array.arrayRef)"
+            >
+              {{ ui.text('importAddSlot', language, { label: array.label }) }}
+            </button>
+          }
+        </p>
+      }
+
+      @if (stale().length) {
+        <div class="ngx-import-mapper__stale" data-testid="import-stale" role="alert">
+          <p>
+            <strong>{{ ui.text('importStaleHeading', language) }}</strong>
+            {{ ui.text('importStaleExplain', language) }}
+          </p>
+          <ul>
+            @for (entry of stale(); track entry.ref) {
+              <li [attr.data-testid]="'import-stale-' + entry.ref">
+                <code>{{ entry.ref }}</code>
+                <button
+                  type="button"
+                  class="ngx-import-mapper__remove"
+                  [attr.data-testid]="'import-remove-' + entry.ref"
+                  (click)="removeStale(entry)"
+                >
+                  {{ ui.text('importRemoveEntry', language) }}
+                </button>
+              </li>
+            }
+          </ul>
+        </div>
+      }
     </section>
-  `, 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"] }]
+  `, 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__slots{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}.ngx-import-mapper__add-slot,.ngx-import-mapper__remove{padding:4px 10px;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-mapper__remove{margin-left:8px}.ngx-import-mapper__stale{margin-top:12px;padding:8px 12px;color:var(--ngx-color-error, #b91c1c);background:var(--ngx-color-error-soft, #fef2f2);border-radius:var(--ngx-radius-sm, 6px)}.ngx-import-mapper__stale p,.ngx-import-mapper__stale ul{margin:0 0 6px}.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"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -9158,13 +10942,23 @@ class ImportPreviewComponent {
     /** The same rules the commit will apply; without them a rule-driven rejection is invisible. */
     rules;
     language = 'en';
+    /** The decimal mark number cells use — the one the commit will read them with. */
+    decimal = '.';
     ui = inject(UiTextService);
     /** The columns this plan fills, in the plan's own order. */
     columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     grid = signal([], ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
     ngOnChanges() {
-        const byRef = new Map(deriveImportColumns(this.config, { lang: this.language }).columns.map(c => [c.ref, c]));
-        const entries = (this.plan?.entries ?? []).filter(entry => byRef.has(entry.ref));
+        // Sized by the plan, so a mapped sixth phone is shown rather than silently left out, and
+        // read through the 2.2 alias, so an old ref shows the field it now means.
+        const plan = upgradeLegacyRefs(this.plan, this.config);
+        const byRef = new Map(deriveImportColumns(this.config, {
+            lang: this.language,
+            maxArrayRows: arrayBoundFor([], this.config, plan),
+            includeReadonly: true,
+            includeSystemDefault: true,
+        }).columns.map(c => [c.ref, c]));
+        const entries = (plan?.entries ?? []).filter(entry => byRef.has(entry.ref));
         this.columns.set(entries.map(entry => byRef.get(entry.ref)));
         // The same engine the commit runs, over the sample only. Row 0 of the sample is numbered
         // 0 here rather than 2, because these row numbers index the preview, not the file.
@@ -9172,6 +10966,7 @@ class ImportPreviewComponent {
             lang: this.language,
             lookups: this.lookups,
             rules: this.rules,
+            decimal: this.decimal,
             stamp: false,
             firstRowNumber: 0,
         });
@@ -9187,6 +10982,7 @@ class ImportPreviewComponent {
                 const outcome = coerceCell(field, raw, {
                     lang: this.language,
                     lookups: this.lookups,
+                    decimal: this.decimal,
                 });
                 if ('error' in outcome)
                     return { text: outcome.error, failed: true };
@@ -9198,7 +10994,7 @@ class ImportPreviewComponent {
         })));
     }
     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: `
+    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", decimal: "decimal" }, 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 }) }}
@@ -9289,6 +11085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 type: Input
             }], language: [{
                 type: Input
+            }], decimal: [{
+                type: Input
             }] } });
 
 /**
@@ -9505,6 +11303,8 @@ class EntityImportComponent {
     headers = signal([], ...(ngDevMode ? [{ debugName: "headers" }] : /* istanbul ignore next */ []));
     sample = signal([], ...(ngDevMode ? [{ debugName: "sample" }] : /* istanbul ignore next */ []));
     rowCount = signal(0, ...(ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []));
+    /** The separator a delimited file turned out to use, so the user can see how it was read. */
+    delimiter = signal(undefined, ...(ngDevMode ? [{ debugName: "delimiter" }] : /* istanbul ignore next */ []));
     fileName = signal('', ...(ngDevMode ? [{ debugName: "fileName" }] : /* istanbul ignore next */ []));
     plan = signal(null, ...(ngDevMode ? [{ debugName: "plan" }] : /* istanbul ignore next */ []));
     result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
@@ -9589,6 +11389,7 @@ class EntityImportComponent {
             this.headers.set(preview.headers);
             this.sample.set(preview.sample);
             this.rowCount.set(preview.rowCount);
+            this.delimiter.set(preview.delimiter);
             this.plan.set(preview.suggestion);
             this.step.set('map');
         }
@@ -9672,12 +11473,30 @@ class EntityImportComponent {
     failedRowCount(result) {
         return result.failed ?? new Set(result.errors.map(error => error.row)).size;
     }
+    /** The decimal mark the commit will read numbers with, so the preview reads them the same. */
+    decimal() {
+        return decimalMarkFor(this.delimiter());
+    }
+    /** How the file's columns were split, in words — or nothing for a workbook. */
+    delimiterText() {
+        switch (this.delimiter()) {
+            case ',':
+                return this.ui.text('importDelimiterComma', this.language);
+            case ';':
+                return this.ui.text('importDelimiterSemicolon', this.language);
+            case '\t':
+                return this.ui.text('importDelimiterTab', this.language);
+            default:
+                return null;
+        }
+    }
     restart() {
         this.file = null;
         this.fileName.set('');
         this.headers.set([]);
         this.sample.set([]);
         this.rowCount.set(0);
+        this.delimiter.set(undefined);
         this.plan.set(null);
         this.result.set(null);
         this.problem.set(null);
@@ -9740,6 +11559,9 @@ class EntityImportComponent {
         }
 
         @case ('review') {
+          @if (delimiterText(); as separator) {
+            <p class="ngx-entity-import__delimiter" data-testid="import-delimiter">{{ separator }}</p>
+          }
           @if (plan(); as current) {
             <ngx-import-preview
               [config]="config"
@@ -9748,6 +11570,7 @@ class EntityImportComponent {
               [lookups]="resolvedLookups()"
               [rules]="rules"
               [language]="language"
+              [decimal]="decimal()"
             />
           }
           <button
@@ -9800,7 +11623,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 });
+  `, 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", "decimal"] }, { kind: "component", type: ImportErrorsComponent, selector: "ngx-import-errors", inputs: ["errors", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: EntityImportComponent, decorators: [{
             type: Component,
@@ -9865,6 +11688,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
         }
 
         @case ('review') {
+          @if (delimiterText(); as separator) {
+            <p class="ngx-entity-import__delimiter" data-testid="import-delimiter">{{ separator }}</p>
+          }
           @if (plan(); as current) {
             <ngx-import-preview
               [config]="config"
@@ -9873,6 +11699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
               [lookups]="resolvedLookups()"
               [rules]="rules"
               [language]="language"
+              [decimal]="decimal()"
             />
           }
           <button
@@ -9972,5 +11799,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