@genesislcap/foundation-forms 14.396.4 → 14.397.1-alpha-87a7828.0

package/dist/esm/jsonforms/renderers/ArrayListWrapperRenderer.js

@@ -3,6 +3,13 @@ import { Generate, composePaths, createDefaultValue } from '@jsonforms/core';
 import { designUnit } from '@microsoft/fast-components';
 import { html, css, observable, customElement, FASTElement, repeat, } from '@microsoft/fast-element';
 import { logger } from '../../utils';
+const resolveRowUiSchema = (childUiSchema, index, rowData, formData, fallback) => {
+    if (typeof childUiSchema === 'function') {
+        const result = childUiSchema(index, rowData, formData);
+        return result !== null && result !== void 0 ? result : fallback;
+    }
+    return fallback;
+};
 const isDeleteButtonHidden = (ctx) => {
     var _a, _b, _c;
     const canDeleteFn = (_a = ctx.parent.control.uischema.options) === null || _a === void 0 ? void 0 : _a.canDelete;
@@ -13,25 +20,71 @@ const isDeleteButtonHidden = (ctx) => {
     const controlData = formData[ctx.parent.control.path] && formData[ctx.parent.control.path][ctx.index];
     return !canDeleteFn(controlData);
 };
+const getRowStatus = (ctx) => {
+    var _a;
+    const statuses = (_a = ctx.parent.form.jsonforms) === null || _a === void 0 ? void 0 : _a.rowSubmitStatuses;
+    return statuses === null || statuses === void 0 ? void 0 : statuses.get(ctx.index);
+};
+const isRowInStatus = (ctx, targetStatus) => {
+    const rowStatus = getRowStatus(ctx);
+    return (rowStatus === null || rowStatus === void 0 ? void 0 : rowStatus.status) === targetStatus;
+};
+const isRowDisabled = (ctx) => isRowInStatus(ctx, 'success');
+const isRowSubmitting = (ctx) => isRowInStatus(ctx, 'submitting');
 export const ArrayListWrapperRendererTemplate = (prefix = 'zero') => html `
   <template>
     ${repeat((x) => Array(x.control.data), html `
-        <div class="array-list">
+        <div class="array-list ${(x, ctx) => {
+    const rowStatus = getRowStatus(ctx);
+    return rowStatus ? `row-status-${rowStatus.status}` : '';
+}}"
+        data-row-index="${(x, ctx) => ctx.index}"
+        >
+          <div class="row-status-indicator">
+            <${prefix}-progress-ring class="status-spinner"></${prefix}-progress-ring>
+            <${prefix}-icon name="check-circle" class="status-icon status-success"></${prefix}-icon>
+            <${prefix}-icon
+              name="times-circle"
+              class="status-icon status-failed"
+              title="${(x, ctx) => {
+    var _a;
+    const rowStatus = getRowStatus(ctx);
+    return ((_a = rowStatus === null || rowStatus === void 0 ? void 0 : rowStatus.errors) === null || _a === void 0 ? void 0 : _a.map((e) => e.TEXT).join(', ')) || 'Failed';
+}}"
+            ></${prefix}-icon>
+          </div>
           <dispatch-renderer
             ?submitted=${(x, ctx) => ctx.parent.form.submitted}
             :dispatch=${(x, ctx) => ctx.parent.form.dispatch}
             :jsonforms=${(x, ctx) => ctx.parent.form.jsonforms}
             :prefix=${(x, ctx) => ctx.parent.form.prefix}
-            :props=${(x, ctx) => ({
-    uischema: ctx.parent.uiSchema,
-    schema: ctx.parent.schema,
-    renderers: ctx.parent.control.renderers,
-    path: composePaths(ctx.parent.control.path, `${ctx.index}`),
-    enabled: ctx.parent.control.enabled,
-})}
+            :props=${(x, ctx) => {
+    var _a, _b, _c, _d;
+    const childSchema = (_a = ctx.parent.control.uischema.options) === null || _a === void 0 ? void 0 : _a.childUiSchema;
+    const formData = (_c = (_b = ctx.parent.form.jsonforms) === null || _b === void 0 ? void 0 : _b.core) === null || _c === void 0 ? void 0 : _c.data;
+    const rowData = (_d = ctx.parent.control.data) === null || _d === void 0 ? void 0 : _d[ctx.index];
+    const uischema = resolveRowUiSchema(childSchema, ctx.index, rowData, formData, ctx.parent.uiSchema);
+    return {
+        uischema,
+        schema: ctx.parent.schema,
+        renderers: ctx.parent.control.renderers,
+        path: composePaths(ctx.parent.control.path, `${ctx.index}`),
+        enabled: ctx.parent.control.enabled && !isRowDisabled(ctx),
+    };
+}}
           ></dispatch-renderer>
           <${prefix}-button
-            ?hidden=${(x, ctx) => isDeleteButtonHidden(ctx)}
+            ?hidden=${(x, ctx) => { var _a; return !((_a = ctx.parent.form.jsonforms) === null || _a === void 0 ? void 0 : _a.bulkInsert) || isRowDisabled(ctx); }}
+            ?disabled=${(x, ctx) => isRowSubmitting(ctx)}
+            appearance="accent"
+            class="item-control-btn row-submit-btn"
+            data-test-id=${(x, ctx) => `${ctx.parent.control.path}-${ctx.index}-submit-item`}
+            @click=${(x, ctx) => ctx.parent.submitRow(ctx.index)}
+          >
+            <${prefix}-icon name="paper-plane"></${prefix}-icon>
+          </${prefix}-button>
+          <${prefix}-button
+            ?hidden=${(x, ctx) => isDeleteButtonHidden(ctx) || isRowDisabled(ctx)}
             appearance="lightweight"
             class="item-control-btn"
             data-test-id=${(x, ctx) => `${ctx.parent.control.path}-${ctx.index}-delete-item`}
@@ -56,27 +109,161 @@ export const ArrayListWrapperRendererTemplate = (prefix = 'zero') => html `
 const styles = css `
   :host {
     padding-left: calc(${designUnit} * 1px);
+    display: flex;
+    flex-direction: column;
+    gap: calc(${designUnit} * 3px);
+
+    /* Row status color tokens - can be overridden via CSS custom properties */
+    --row-status-success-color: var(--success-color, #28a745);
+    --row-status-failed-color: var(--error-color, #dc3545);
+    --row-status-submitting-color: var(--accent-fill-rest, #0078d4);
+
+    /* Array item card styling - industrial/utilitarian aesthetic */
+    --array-item-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06);
+    --array-item-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 6px 12px rgba(0, 0, 0, 0.08);
+    --array-item-border: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.12));
+    --array-item-radius: calc(${designUnit} * 2px);
   }
 
   .array-list {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    padding: calc(${designUnit} * 2px) calc(${designUnit} * 3px);
+    padding-left: calc(${designUnit} * 2px + 3px); /* Extra space for left accent bar */
+    margin: 0;
+    background-color: var(--neutral-layer-1, #fff);
+    border: var(--array-item-border);
+    border-radius: var(--array-item-radius);
+    box-shadow: var(--array-item-shadow);
+    transition:
+      background-color 0.15s ease-in-out,
+      box-shadow 0.2s ease,
+      border-color 0.15s ease;
+  }
+
+  .array-list:hover {
+    box-shadow: var(--array-item-shadow-hover);
+  }
+
+  /* Content area grows to fill space; min-width prevents flex overflow */
+  .array-list > dispatch-renderer {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* Left accent bar for visual hierarchy - industrial form-slot feel */
+  .array-list::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    border-radius: var(--array-item-radius) 0 0 var(--array-item-radius);
+    background: var(--neutral-stroke-subtle, rgba(0, 0, 0, 0.06));
+    pointer-events: none;
+  }
+
+  .array-list.row-status-success::before {
+    background: var(--row-status-success-color);
+  }
+
+  .array-list.row-status-failed::before {
+    background: var(--row-status-failed-color);
+  }
+
+  .array-list.row-status-submitting::before {
+    background: var(--row-status-submitting-color);
+  }
+
+  .array-list.row-status-success {
+    background-color: color-mix(in srgb, var(--row-status-success-color), transparent 90%);
+  }
+
+  .array-list.row-status-failed {
+    background-color: color-mix(in srgb, var(--row-status-failed-color), transparent 90%);
+  }
+
+  .array-list.row-status-submitting {
+    background-color: color-mix(in srgb, var(--row-status-submitting-color), transparent 95%);
+  }
+
+  .row-status-indicator {
     display: flex;
     align-items: center;
+    justify-content: center;
+    min-width: calc(${designUnit} * 6px);
+    margin-right: calc(${designUnit} * 2px);
+  }
+
+  /* Hide all status indicators by default */
+  .row-status-indicator .status-spinner,
+  .row-status-indicator .status-success,
+  .row-status-indicator .status-failed {
+    display: none;
+  }
+
+  /* Show spinner when submitting */
+  .array-list.row-status-submitting .row-status-indicator .status-spinner {
+    display: flex;
+  }
+
+  /* Show success icon when successful */
+  .array-list.row-status-success .row-status-indicator .status-success {
+    display: flex;
+  }
+
+  /* Show failed icon when failed */
+  .array-list.row-status-failed .row-status-indicator .status-failed {
+    display: flex;
+  }
+
+  .status-icon {
+    width: calc(${designUnit} * 4px);
+    height: calc(${designUnit} * 4px);
+  }
+
+  .status-success {
+    color: var(--row-status-success-color);
+  }
+
+  .status-failed {
+    color: var(--row-status-failed-color);
+    cursor: help;
+  }
+
+  .status-spinner {
+    width: calc(${designUnit} * 4px);
+    height: calc(${designUnit} * 4px);
   }
 
   .item-control-btn {
-    color: rgb(135, 155, 166);
-    margin-left: 10px;
+    color: var(--neutral-foreground-hint, rgb(135, 155, 166));
+    margin-left: calc(${designUnit} * 2px);
   }
 
   .item-control-btn:hover {
     color: var(--accent-foreground-hover);
   }
+
+  .row-submit-btn {
+    min-width: calc(${designUnit} * 8px);
+  }
+
+  .row-submit-btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
 let ArrayListWrapper = class ArrayListWrapper extends FASTElement {
     controlChanged() {
+        var _a;
         this.schema = this.control.schema;
-        if (this.control.uischema.options) {
-            this.uiSchema = this.control.uischema.options.childUiSchema;
+        const childUiSchema = (_a = this.control.uischema.options) === null || _a === void 0 ? void 0 : _a.childUiSchema;
+        // Only use static childUiSchema; when it's a function, resolve per-row in template
+        if (childUiSchema && typeof childUiSchema !== 'function') {
+            this.uiSchema = childUiSchema;
             return;
         }
         const arrayUiSchema = Generate.uiSchema(this.schema);
@@ -89,6 +276,13 @@ let ArrayListWrapper = class ArrayListWrapper extends FASTElement {
     deleteItem(index) {
         this.control.removeItems(this.control.path, [index])();
     }
+    /**
+     * Submits a single row by emitting an event that bubbles up to the foundation-form.
+     * @param index - The row index to submit
+     */
+    submitRow(index) {
+        this.$emit('submit-single-row', { index }, { bubbles: true, composed: true });
+    }
 };
 __decorate([
     observable