ngx-dynamic-entity 2.2.0 → 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, isValidUrl, isValidPhone, fileRefName, sliderBounds, ratingScale, normalizeHexColor, normalizeTags, evaluateFormRules, filterRulesForTab, evaluateFieldVisibility, getTabPath, fieldRefFor, toRefToken, refOf, parseFieldRef, setTabData, setValueByPath, normalizeArrayStructures, getTabData, getValueByPath, normalizeConfigOptions, migrateRecord, ambiguousFieldIds, collectFieldScopes, applyAutoPatch, isUnsafePath, fieldsUnderTab, valuesEqual, parseCsv, deriveImportColumns, suggestMapping, applyMapping, toCsv, stripIndices, CORE_VERSION, coerceCell, buildTemplateSpec, collectLeafTargets, formatConfigProblems } from '@dynamic-entity/core';
+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';
@@ -920,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…',
@@ -7825,6 +7833,12 @@ class RulesEvaluationService {
      * 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.
@@ -7832,6 +7846,7 @@ class RulesEvaluationService {
      */
     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)
@@ -7839,7 +7854,7 @@ class RulesEvaluationService {
             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);
+            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);
@@ -7854,6 +7869,30 @@ class RulesEvaluationService {
             }
         }
     }
+    /**
+     * 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.
      *
@@ -8063,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.
@@ -9235,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. */
@@ -10086,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' } : {});
 };
 
 /**
@@ -10134,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) {
@@ -10148,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) {
@@ -10309,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) {
@@ -10468,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.
  *
@@ -10497,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;
@@ -10516,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],
@@ -10582,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>
                   }
@@ -10596,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,
@@ -10642,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>
                   }
@@ -10656,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 }]
@@ -10702,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.
@@ -10716,6 +10966,7 @@ class ImportPreviewComponent {
             lang: this.language,
             lookups: this.lookups,
             rules: this.rules,
+            decimal: this.decimal,
             stamp: false,
             firstRowNumber: 0,
         });
@@ -10731,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 };
@@ -10742,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 }) }}
@@ -10833,6 +11085,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
                 type: Input
             }], language: [{
                 type: Input
+            }], decimal: [{
+                type: Input
             }] } });
 
 /**
@@ -11049,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 */ []));
@@ -11133,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');
         }
@@ -11216,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);
@@ -11284,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"
@@ -11292,6 +11570,7 @@ class EntityImportComponent {
               [lookups]="resolvedLookups()"
               [rules]="rules"
               [language]="language"
+              [decimal]="decimal()"
             />
           }
           <button
@@ -11344,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,
@@ -11409,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"
@@ -11417,6 +11699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImpo
               [lookups]="resolvedLookups()"
               [rules]="rules"
               [language]="language"
+              [decimal]="decimal()"
             />
           }
           <button