@genesislcap/foundation-forms 14.496.2-alpha-da9ccbd.0 → 14.497.0

package/dist/esm/review.styles.js

@@ -0,0 +1,93 @@
+import { designUnit, strokeWidth } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+/** @internal */
+export const foundationFormReviewStyles = css `
+  foundation-form-review {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  foundation-form-review .review-header {
+    display: flex;
+    align-items: baseline;
+    gap: calc(${designUnit} * 2px);
+    padding: calc(${designUnit} * 2px) calc(${designUnit} * 2px) calc(${designUnit} * 1px);
+    border-bottom: calc(${strokeWidth} * 1px) solid var(--neutral-stroke-rest, rgb(0 0 0 / 12%));
+  }
+
+  foundation-form-review .review-title {
+    font-size: var(--type-ramp-plus-1-font-size, 1rem);
+    line-height: var(--type-ramp-plus-1-line-height, 1.5rem);
+    font-weight: 600;
+    color: var(--neutral-foreground-rest);
+  }
+
+  foundation-form-review .review-id {
+    font-family: var(--mono-font-family, 'Courier New', Courier, monospace);
+    font-size: var(--type-ramp-base-font-size, 0.875rem);
+    color: var(--neutral-foreground-hint, rgb(0 0 0 / 60%));
+  }
+
+  foundation-form-review .review-filter {
+    padding: calc(${designUnit} * 2px);
+  }
+
+  foundation-form-review .review-filter-input {
+    width: 100%;
+  }
+
+  foundation-form-review .review-body {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+    scrollbar-color: var(--neutral-stroke-rest) transparent;
+  }
+
+  foundation-form-review .review-section-header {
+    font-size: var(--type-ramp-minus-1-font-size, 0.75rem);
+    line-height: var(--type-ramp-minus-1-line-height, 1rem);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--neutral-foreground-hint, rgb(0 0 0 / 60%));
+    background-color: var(--neutral-layer-2, rgb(0 0 0 / 4%));
+    padding: calc(${designUnit} * 1px) calc(${designUnit} * 2px);
+    margin-top: calc(${designUnit} * 3px);
+  }
+
+  foundation-form-review .review-field {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: calc(${designUnit} * 2px);
+    padding: calc(${designUnit} * 1.5px) calc(${designUnit} * 2px);
+    border-bottom: calc(${strokeWidth} * 1px) solid var(--neutral-stroke-rest, rgb(0 0 0 / 12%));
+  }
+
+  foundation-form-review .review-field:last-child {
+    border-bottom: none;
+  }
+
+  foundation-form-review .review-field-label {
+    color: var(--neutral-foreground-hint, rgb(0 0 0 / 60%));
+    font-size: var(--type-ramp-base-font-size, 0.875rem);
+    flex-shrink: 0;
+  }
+
+  foundation-form-review .review-field-value {
+    color: var(--neutral-foreground-rest);
+    font-size: var(--type-ramp-base-font-size, 0.875rem);
+    text-align: right;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    foundation-form-review {
+      background: ${SystemColors.Canvas};
+    }
+  `));

package/dist/esm/review.template.js

@@ -0,0 +1,39 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat, when } from '@microsoft/fast-element';
+/** @internal */
+export const getPrefixedReview = (prefix) => html `
+  <template>
+    <div class="review-header">
+      <span class="review-title">${(x) => x.heading}</span>
+      ${when((x) => x.recordId, html `
+          <span class="review-id">${(x) => x.recordId}</span>
+        `)}
+    </div>
+    <div class="review-filter">
+      <${prefix}-text-field
+        value=${sync((x) => x.filterText, 'string', 'input')}
+        placeholder="Filter fields..."
+        aria-label="Filter fields"
+        class="review-filter-input"
+        data-test-id="review-filter-input"
+      ></${prefix}-text-field>
+    </div>
+    <div class="review-body">
+      ${repeat((x) => x.filteredSections, html `
+          ${when((section) => section.fields.length > 0, html `
+              <div class="review-section-header">${(section) => { var _a; return (_a = section.title) !== null && _a !== void 0 ? _a : '—'; }}</div>
+              ${repeat((section) => section.fields, html `
+                  <div class="review-field">
+                    <span class="review-field-label">${(field) => field.label}</span>
+                    <span class="review-field-value">${(field) => field.value}</span>
+                  </div>
+                `)}
+            `)}
+        `)}
+    </div>
+  </template>
+`;
+/** @internal */
+export const foundationFormReviewTemplate = html `
+  ${(x) => getPrefixedReview(x.prefix)}
+`;

package/dist/esm/utils/index.js

@@ -1,4 +1,5 @@
 export * from './csv-parser';
+export * from './review-utils';
 export * from './filters';
 export * from './logger';
 export * from './translation';

package/dist/esm/utils/review-utils.js

@@ -0,0 +1,241 @@
+import { __awaiter } from "tslib";
+import { getDatasource } from '@genesislcap/foundation-comms';
+import { CriteriaBuilder, ExpressionBuilder } from '@genesislcap/foundation-criteria';
+import { capitalCase } from 'change-case';
+/**
+ * Builds the review panel's fields grouped into sections by their nearest `Group` layout.
+ * Sections are formed from consecutive runs of the same group title as fields are
+ * encountered in the UI schema — not a global title lookup — so two fields that happen to
+ * share a title (including `null`, for ungrouped fields) don't get merged into one section
+ * unless they're actually adjacent. Otherwise an ungrouped field appearing after a Group
+ * would jump back up next to earlier ungrouped fields instead of staying where it sits in
+ * the form, and two distinct Groups with the same label would collapse into one. Falls back
+ * to a flat, single ungrouped section when no UI schema is available.
+ *
+ * Async because connected-select fields backed by `options.allOptionsResourceName` (rather
+ * than a static `options.data`) resolve their display label with a criteria-filtered fetch
+ * — see `resolveResourceOptionLabel`. The UI schema is walked synchronously to collect one
+ * value-resolution promise per field (preserving encounter order), then all promises settle
+ * in parallel via `Promise.all` before fields are added to their sections — so a slow fetch
+ * for one field can't reorder fields that resolved faster.
+ *
+ * This is the single walker of the UI schema for review purposes — `Form` calls it directly
+ * to populate `Review.sections`. Don't reimplement this traversal elsewhere; the two
+ * previously did drift (a since-removed `collectReviewFields` resolved labels via
+ * `resolveOptionLabel` / `resolveEnumLabel` only, silently skipping `resolveResourceOptionLabel`
+ * and showing raw ids for connected-select fields).
+ * @internal
+ */
+export function buildReviewSections(data, uiSchema, schema) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const sections = [];
+        const addField = (title, field) => {
+            const last = sections[sections.length - 1];
+            if (last && last.title === title) {
+                last.fields.push(field);
+            }
+            else {
+                sections.push({ title, fields: [field] });
+            }
+        };
+        const resolveDisplayValue = (raw, fieldName, options) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const displayValue = (_c = (_b = (_a = resolveOptionLabel(raw, options)) !== null && _a !== void 0 ? _a : (yield resolveResourceOptionLabel(raw, options))) !== null && _b !== void 0 ? _b : resolveEnumLabel(raw, fieldName, schema)) !== null && _c !== void 0 ? _c : raw;
+            return formatValueForReview(displayValue);
+        });
+        const collect = (element, groupTitle) => {
+            var _a, _b, _c;
+            if (!element)
+                return [];
+            if (element.type === 'Control' && element.scope) {
+                if ((_a = element.options) === null || _a === void 0 ? void 0 : _a.hidden)
+                    return [];
+                const match = element.scope.match(/^#\/properties\/(.+)$/);
+                if (!match)
+                    return [];
+                const fieldName = match[1];
+                const raw = getDataValueAtPath(data, fieldName);
+                if (raw === undefined ||
+                    raw === null ||
+                    raw === '' ||
+                    (Array.isArray(raw) && raw.length === 0))
+                    return [];
+                const shortName = fieldName.split('/properties/').pop();
+                const fieldLabel = element.label || capitalCase(shortName);
+                return [
+                    {
+                        groupTitle,
+                        label: fieldLabel,
+                        valuePromise: resolveDisplayValue(raw, fieldName, element.options),
+                    },
+                ];
+            }
+            const nextGroup = element.type === 'Group' && element.label ? element.label : groupTitle;
+            const children = (_b = element.elements) !== null && _b !== void 0 ? _b : (_c = element.options) === null || _c === void 0 ? void 0 : _c.childElements;
+            return children ? children.flatMap((child) => collect(child, nextGroup)) : [];
+        };
+        if (uiSchema) {
+            const pending = collect(uiSchema, null);
+            const values = yield Promise.all(pending.map((field) => field.valuePromise));
+            pending.forEach((field, index) => {
+                addField(field.groupTitle, { label: field.label, value: values[index] });
+            });
+        }
+        else {
+            for (const [key, raw] of Object.entries(data !== null && data !== void 0 ? data : {})) {
+                if (raw === undefined || raw === null || raw === '')
+                    continue;
+                addField(null, { label: capitalCase(key), value: formatValueForReview(raw) });
+            }
+        }
+        return sections;
+    });
+}
+/**
+ * Filters review sections down to fields whose label or value contains `query`
+ * (case-insensitive). Sections left with no matching fields are dropped entirely.
+ * Returns `sections` unchanged when `query` is blank.
+ * @internal
+ */
+export function filterReviewSections(sections, query) {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized)
+        return sections;
+    return sections
+        .map((section) => ({
+        title: section.title,
+        fields: section.fields.filter((field) => field.label.toLowerCase().includes(normalized) ||
+            field.value.toLowerCase().includes(normalized)),
+    }))
+        .filter((section) => section.fields.length > 0);
+}
+/**
+ * Looks up the display label for a raw value from `options.data` (used by segmented,
+ * radio group, connected-select, and enum-with-explicit-data renderers). Honors
+ * `options.valueField`/`options.labelField` when set, defaulting to `value`/`label`.
+ * Returns `null` when no match found.
+ * @internal
+ */
+export function resolveOptionLabel(raw, options) {
+    var _a, _b, _c;
+    if (!Array.isArray(options === null || options === void 0 ? void 0 : options.data))
+        return null;
+    const valueKey = (_a = options.valueField) !== null && _a !== void 0 ? _a : 'value';
+    const labelKey = (_b = options.labelField) !== null && _b !== void 0 ? _b : 'label';
+    const entry = options.data.find((item) => item[valueKey] === raw);
+    return (_c = entry === null || entry === void 0 ? void 0 : entry[labelKey]) !== null && _c !== void 0 ? _c : null;
+}
+/**
+ * Resolves the display label for a connected-select field backed by
+ * `options.allOptionsResourceName` (a Data Server/Request Server resource) rather than a
+ * static `options.data` array — e.g. `ConnectedSelectControlRenderer` in async/remote mode.
+ * Fetches a single row via a criteria-filtered snapshot matching `valueField === raw`,
+ * then reads `labelField` off the returned row. Returns `null` when there's no resource
+ * to query, the resource can't be reached, or no row matches.
+ * @internal
+ */
+export function resolveResourceOptionLabel(raw, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b, _c, _d;
+        const resourceName = options === null || options === void 0 ? void 0 : options.allOptionsResourceName;
+        if (!resourceName || raw === undefined || raw === null || raw === '')
+            return null;
+        const valueField = (_a = options.valueField) !== null && _a !== void 0 ? _a : 'value';
+        const labelField = (_b = options.labelField) !== null && _b !== void 0 ? _b : 'label';
+        const datasource = getDatasource();
+        try {
+            const criteria = new CriteriaBuilder()
+                .withExpression(new ExpressionBuilder().withField(valueField).withValue(raw).build())
+                .build();
+            const initialized = yield datasource.init(Object.assign(Object.assign({}, options.datasourceConfig), { resourceName,
+                criteria, isSnapshot: true, maxRows: 1, fields: valueField === labelField ? valueField : `${valueField} ${labelField}` }));
+            if (!initialized)
+                return null;
+            const rows = yield datasource.snapshotFiltered();
+            return (_d = (_c = rows === null || rows === void 0 ? void 0 : rows[0]) === null || _c === void 0 ? void 0 : _c[labelField]) !== null && _d !== void 0 ? _d : null;
+        }
+        catch (_e) {
+            return null;
+        }
+        finally {
+            datasource.destroy();
+        }
+    });
+}
+/**
+ * For plain enum combobox fields (no options.data), applies the same `capitalCase`
+ * transform the renderer uses — e.g. `SEMI_ANNUAL` → `Semi Annual`.
+ * Navigates the JSON schema via the fieldName path to confirm the field is an enum
+ * before transforming. Returns `null` for non-enum fields.
+ * @internal
+ */
+export function resolveEnumLabel(raw, fieldName, schema) {
+    var _a, _b, _c, _d;
+    if (typeof raw !== 'string')
+        return null;
+    if (!(schema === null || schema === void 0 ? void 0 : schema.properties))
+        return null;
+    let fieldSchema = schema;
+    for (const part of fieldName.split('/properties/')) {
+        fieldSchema = (_a = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.properties) === null || _a === void 0 ? void 0 : _a[part];
+    }
+    if (!fieldSchema)
+        return null;
+    // Matches plain `enum: [...]` or nullable `oneOf: [{ enum: [...] }, { type: 'null' }]`
+    const enumValues = (_b = fieldSchema.enum) !== null && _b !== void 0 ? _b : (_d = (_c = fieldSchema.oneOf) === null || _c === void 0 ? void 0 : _c.find((x) => x.enum)) === null || _d === void 0 ? void 0 : _d.enum;
+    if (Array.isArray(enumValues) && enumValues.includes(raw)) {
+        return capitalCase(raw);
+    }
+    return null;
+}
+/**
+ * Navigates a `/properties/`-separated path in data to support nested object scopes
+ * such as `ADDRESS/properties/STREET` produced by Group layout UI schemas.
+ * @internal
+ */
+export function getDataValueAtPath(data, fieldName) {
+    return navigateSegments(data, fieldName.split('/properties/'));
+}
+/** Core traversal — walks `data` one property key at a time. */
+function navigateSegments(data, segments) {
+    let value = data;
+    for (const segment of segments) {
+        if (value == null)
+            return undefined;
+        value = value[segment];
+    }
+    return value;
+}
+/**
+ * Converts a raw field value to a display string for the review panel.
+ * Arrays of primitives are comma-joined; arrays of objects and plain objects
+ * are rendered as readable `key: value` lines.
+ * @internal
+ */
+export function formatValueForReview(value) {
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return '';
+        if (value.every((v) => v === null || typeof v !== 'object')) {
+            return value.join(', ');
+        }
+        return value
+            .map((item, i) => {
+            const pairs = Object.entries(item !== null && item !== void 0 ? item : {})
+                .filter(([, v]) => v !== null && v !== undefined && v !== '')
+                .map(([k, v]) => `${k}: ${v}`)
+                .join(', ');
+            return `[${i + 1}] ${pairs}`;
+        })
+            .join('\n');
+    }
+    if (value === null || value === undefined)
+        return '';
+    if (typeof value === 'object') {
+        return Object.entries(value)
+            .filter(([, v]) => v !== null && v !== undefined && v !== '')
+            .map(([k, v]) => `${k}: ${v}`)
+            .join(', ');
+    }
+    return String(value);
+}

package/dist/esm/utils/schema-utils.js

@@ -93,6 +93,54 @@ export function isBulkUiSchema(uischema) {
     var _a;
     return (_a = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _a === void 0 ? void 0 : _a.some((element) => element.scope === '#/properties/items' && element.type === 'Control');
 }
+/**
+ * Converts AJV validation errors to the JSON Schema scope strings they correspond to
+ * (e.g. `#/properties/ADDRESS/properties/STREET`). Used to match errors back to UI
+ * schema controls for features like categorization-tab error indicators.
+ */
+export function extractErrorScopes(errors) {
+    var _a;
+    const scopes = new Set();
+    for (const error of errors) {
+        if (error.keyword === 'required' && ((_a = error.params) === null || _a === void 0 ? void 0 : _a.missingProperty)) {
+            const basePath = error.instancePath || '';
+            const prop = error.params.missingProperty;
+            const fullPath = basePath === '' ? `#/properties/${prop}` : `#${basePath}/properties/${prop}`;
+            scopes.add(fullPath);
+        }
+        else if (error.instancePath) {
+            // Convert JSON Pointer /ADDRESS/STREET → #/properties/ADDRESS/properties/STREET
+            const instancePath = `#${error.instancePath.replace(/\//g, '/properties/')}`;
+            scopes.add(instancePath);
+        }
+    }
+    return Array.from(scopes);
+}
+/**
+ * Returns true when `uiSchema` (or any of its descendants) has a scope that appears
+ * in `errorScopes`. Walks both `elements` and `options.childElements`.
+ */
+export function uiSchemaHasAnyError(uiSchema, errorScopes) {
+    var _a;
+    if (typeof uiSchema.scope === 'string' &&
+        errorScopes.includes(uiSchema.scope)) {
+        return true;
+    }
+    const childElements = (_a = uiSchema.options) === null || _a === void 0 ? void 0 : _a.childElements;
+    if (Array.isArray(childElements)) {
+        for (const child of childElements) {
+            if (uiSchemaHasAnyError(child, errorScopes))
+                return true;
+        }
+    }
+    if (Array.isArray(uiSchema.elements)) {
+        for (const el of uiSchema.elements) {
+            if (uiSchemaHasAnyError(el, errorScopes))
+                return true;
+        }
+    }
+    return false;
+}
 /**
  * Generates a UI schema suitable for bulk insert mode with array control.
  * @param userProvidedUiSchema - Optional user-provided UI schema to use as childUiSchema