@genesislcap/foundation-forms 14.397.2 → 14.398.0

package/dist/esm/form.js

@@ -20,13 +20,15 @@ import { LayoutGroupRendererEntry } from './jsonforms/renderers/LayoutGroupRende
 import { LayoutHorizontalEntry } from './jsonforms/renderers/LayoutHorizontalRenderer';
 import { LayoutRendererEntry } from './jsonforms/renderers/LayoutRenderer';
 import { LayoutStepperRendererEntry } from './jsonforms/renderers/LayoutStepperRenderer';
+import { LayoutFormGridEntry } from './jsonforms/renderers/LayoutFormGridRenderer';
 import { LayoutVertical2ColumnsEntry } from './jsonforms/renderers/LayoutVertical2ColumnsRenderer';
 import { NumberControlRendererEntry } from './jsonforms/renderers/NumberControlRenderer';
 import { StringArrayEntry } from './jsonforms/renderers/StringArrayControlRenderer';
 import { StringControlRendererTemplate } from './jsonforms/renderers/StringControlRenderer';
-import { logger } from './utils';
+import { downloadCsvTemplate as downloadCsvFile, extractFieldsFromUiSchema, generateCsvTemplate, logger, mapCsvToSchema, parseCsv, } from './utils';
 import { findModalParent, showConfirmationDialog } from './utils/confirmation-dialog-utils';
 import { removeDataPropertiesNotInSchema } from './utils/form-utils';
+import { generateBulkUiSchema, isBulkUiSchema } from './utils/schema-utils';
 const stringEntry = {
     renderer: StringControlRendererTemplate,
     tester: rankWith(2, isStringControl),
@@ -50,6 +52,7 @@ export const renderers = [
     LayoutCategorizationRendererEntry,
     LayoutGroupRendererEntry,
     LayoutHorizontalEntry,
+    LayoutFormGridEntry,
     LayoutVertical2ColumnsEntry,
     LayoutRendererEntry,
     LayoutStepperRendererEntry,
@@ -113,11 +116,23 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
          * @public
          */
         this.data = {};
+        /**
+         * Minimum number of items required in bulk insert mode.
+         * @public
+         */
+        this.bulkInsertMinItems = 1;
+        /**
+         * Tracks the submission status for each row in bulk insert mode.
+         * Key is the row index, value is the status object.
+         * @public
+         */
+        this.rowSubmitStatuses = new Map();
     }
     resourceNameChanged() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
             this.jsonSchema = undefined;
+            this.originalDetailsSchema = undefined;
             if (this.resourceName) {
                 const jsonSchemaResponse = yield this.connect.getJSONSchema(this.resourceName);
                 if (!jsonSchemaResponse) {
@@ -126,6 +141,8 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
                 const refResolver = new JsonSchemaDereferencer(jsonSchemaResponse.INBOUND);
                 const detailsSchema = (_a = (yield refResolver.resolve()).properties) === null || _a === void 0 ? void 0 : _a.DETAILS;
                 const approvalMessageSchema = (_b = (yield refResolver.resolve()).properties) === null || _b === void 0 ? void 0 : _b.APPROVAL_MESSAGE;
+                // Store the original details schema for bulk insert transformations
+                this.originalDetailsSchema = detailsSchema;
                 // If setApprovalMessage is enabled, wrap the DETAILS schema with APPROVAL_MESSAGE field
                 if (this.setApprovalMessage && detailsSchema) {
                     this.jsonSchema = Object.assign(Object.assign({}, detailsSchema), { properties: Object.assign(Object.assign({}, detailsSchema.properties), { APPROVAL_MESSAGE: approvalMessageSchema }) });
@@ -133,9 +150,65 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
                 else {
                     this.jsonSchema = detailsSchema;
                 }
+                // Transform schema for bulk insert mode
+                if (this.bulkInsert && this.jsonSchema) {
+                    this.transformSchemaForBulkInsert();
+                    // Initialize data after a DOM update to ensure schema is applied first
+                    yield DOM.nextUpdate();
+                    this.initializeBulkInsertData();
+                }
             }
         });
     }
+    /**
+     * Initializes the data with default empty items for bulk insert mode.
+     * @internal
+     */
+    initializeBulkInsertData() {
+        var _a;
+        // Only initialize if data doesn't already have items
+        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.items) || this.data.items.length === 0) {
+            const initialItems = [];
+            // Add the minimum number of items (default is 1)
+            for (let i = 0; i < this.bulkInsertMinItems; i += 1) {
+                initialItems.push({});
+            }
+            // Set data with new reference to trigger reactivity
+            this.data = Object.assign(Object.assign({}, this.data), { items: initialItems });
+        }
+    }
+    /**
+     * Transforms the JSON schema to support bulk insert mode by wrapping it in an array.
+     * @internal
+     */
+    transformSchemaForBulkInsert() {
+        if (!this.originalDetailsSchema) {
+            return;
+        }
+        const arraySchema = {
+            type: 'array',
+            items: this.originalDetailsSchema,
+            minItems: this.bulkInsertMinItems,
+        };
+        if (this.bulkInsertMaxItems !== undefined) {
+            arraySchema.maxItems = this.bulkInsertMaxItems;
+        }
+        this.jsonSchema = {
+            type: 'object',
+            properties: {
+                items: arraySchema,
+            },
+            required: ['items'],
+        };
+        // Store user-provided UI schema and generate bulk UI schema if not provided
+        if (!this.userProvidedUiSchema) {
+            this.userProvidedUiSchema = this.uischema;
+        }
+        // Generate bulk UI schema if user hasn't provided one
+        if (!this.uischema || !isBulkUiSchema(this.uischema)) {
+            this.uischema = generateBulkUiSchema(this.userProvidedUiSchema);
+        }
+    }
     /**
      * @internal
      */
@@ -176,6 +249,11 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
                 yield DOM.nextUpdate();
             }
             this.submitted = true;
+            // Route to bulk submit if in bulk insert mode
+            if (this.bulkInsert) {
+                yield this._submitBulk();
+                return;
+            }
             const payload = Object.assign({}, this.data);
             const commitPayload = this.buildCommitPayload(payload);
             logger.debug({ payload, errors: this.errors });
@@ -202,16 +280,211 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
             }
         });
     }
+    /**
+     * Handles bulk insert submission by iterating through items and submitting each separately.
+     * Updates rowSubmitStatuses to provide row-level feedback.
+     * @internal
+     */
+    _submitBulk() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const items = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.items) || [];
+            // Validate minimum items
+            if (items.length < this.bulkInsertMinItems) {
+                const error = {
+                    CODE: 'BULK_INSERT_MIN_ITEMS',
+                    TEXT: `At least ${this.bulkInsertMinItems} item(s) required`,
+                };
+                this.$emit('submit-failure', { payload: this.data, errors: [error] });
+                return;
+            }
+            // Validate maximum items if set
+            if (this.bulkInsertMaxItems !== undefined && items.length > this.bulkInsertMaxItems) {
+                const error = {
+                    CODE: 'BULK_INSERT_MAX_ITEMS',
+                    TEXT: `Maximum ${this.bulkInsertMaxItems} item(s) allowed`,
+                };
+                this.$emit('submit-failure', { payload: this.data, errors: [error] });
+                return;
+            }
+            logger.debug({ bulkItems: items, errors: this.errors });
+            this.$emit('submit', { payload: this.data, errors: this.errors });
+            if (items.length === 0 || this.errors.length || !this.resourceName) {
+                return;
+            }
+            this.submitting = true;
+            // Initialize rows as pending, but preserve already successful rows
+            for (let i = 0; i < items.length; i += 1) {
+                const currentStatus = this.rowSubmitStatuses.get(i);
+                // Don't reset rows that were already successfully submitted
+                if ((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.status) !== 'success') {
+                    this.rowSubmitStatuses.set(i, { status: 'pending' });
+                }
+            }
+            // Trigger reactivity by reassigning and emit event
+            this.rowSubmitStatuses = new Map(this.rowSubmitStatuses);
+            this.$emit('row-status-changed', { statuses: this.rowSubmitStatuses });
+            const results = {
+                successful: [],
+                failed: [],
+            };
+            // Submit each item sequentially, skipping already successful rows
+            for (let i = 0; i < items.length; i += 1) {
+                // Skip rows that were already successfully submitted
+                const currentStatus = this.rowSubmitStatuses.get(i);
+                if ((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.status) === 'success') {
+                    continue;
+                }
+                const item = items[i];
+                // Filter data to only include fields from UI schema
+                const commitPayload = this.buildCommitPayload(item, true);
+                // Update status to submitting
+                this.updateRowStatus(i, { status: 'submitting' });
+                try {
+                    // eslint-disable-next-line no-await-in-loop
+                    const response = yield this.connect.commitEvent(this.resourceName, commitPayload);
+                    if (response.ERROR) {
+                        results.failed.push({ item, index: i, errors: response.ERROR });
+                        this.updateRowStatus(i, { status: 'failed', errors: response.ERROR });
+                    }
+                    else {
+                        results.successful.push({ item, index: i, response });
+                        this.updateRowStatus(i, { status: 'success', response });
+                    }
+                }
+                catch (error) {
+                    const errors = [{ CODE: 'SUBMIT_ERROR', TEXT: String(error) }];
+                    results.failed.push({ item, index: i, errors });
+                    this.updateRowStatus(i, { status: 'failed', errors });
+                }
+            }
+            this.submitting = false;
+            // Emit bulk-specific event with aggregated results
+            this.$emit('bulk-submit-complete', results);
+            // Also emit standard events based on overall result
+            if (results.failed.length === 0) {
+                this.$emit('submit-success', { payload: this.data, results });
+            }
+            else if (results.successful.length === 0) {
+                this.$emit('submit-failure', {
+                    payload: this.data,
+                    errors: results.failed.flatMap((f) => f.errors),
+                });
+            }
+            else {
+                // Partial success - emit both events
+                this.$emit('submit-partial-success', { payload: this.data, results });
+            }
+        });
+    }
+    /**
+     * Updates the submit status for a specific row and triggers reactivity.
+     * @param index - The row index
+     * @param status - The new status object
+     * @internal
+     */
+    updateRowStatus(index, status) {
+        this.rowSubmitStatuses.set(index, status);
+        // Create a new Map to trigger FAST Element reactivity
+        this.rowSubmitStatuses = new Map(this.rowSubmitStatuses);
+        // Emit event for child components to update
+        this.$emit('row-status-changed', { statuses: this.rowSubmitStatuses, index, status });
+    }
+    /**
+     * Clears all row submit statuses, typically called when resetting the form.
+     * @public
+     */
+    clearRowSubmitStatuses() {
+        this.rowSubmitStatuses = new Map();
+    }
+    /**
+     * Submits a single row in bulk insert mode.
+     * @param index - The index of the row to submit
+     * @returns Promise that resolves when submission is complete
+     * @public
+     */
+    submitSingleRow(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!this.bulkInsert) {
+                logger.warn('submitSingleRow called but bulkInsert is not enabled');
+                return;
+            }
+            const items = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.items) || [];
+            const item = items[index];
+            if (!item) {
+                logger.warn(`submitSingleRow: No item found at index ${index}`);
+                return;
+            }
+            // Check if already submitted successfully
+            const currentStatus = this.rowSubmitStatuses.get(index);
+            if ((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.status) === 'success') {
+                logger.debug(`Row ${index} already submitted successfully`);
+                return;
+            }
+            if (!this.resourceName) {
+                logger.warn('submitSingleRow: No resourceName configured');
+                return;
+            }
+            // Update status to submitting
+            this.updateRowStatus(index, { status: 'submitting' });
+            // Filter data to only include fields from UI schema
+            const commitPayload = this.buildCommitPayload(item, true);
+            try {
+                const response = yield this.connect.commitEvent(this.resourceName, commitPayload);
+                if (response.ERROR) {
+                    this.updateRowStatus(index, { status: 'failed', errors: response.ERROR });
+                    this.$emit('row-submit-failure', { index, item, errors: response.ERROR });
+                }
+                else {
+                    this.updateRowStatus(index, { status: 'success', response });
+                    this.$emit('row-submit-success', { index, item, response });
+                }
+            }
+            catch (error) {
+                const errors = [{ CODE: 'SUBMIT_ERROR', TEXT: String(error) }];
+                this.updateRowStatus(index, { status: 'failed', errors });
+                this.$emit('row-submit-failure', { index, item, errors });
+            }
+        });
+    }
+    /**
+     * Filters item data to only include fields defined in the UI schema.
+     * This ensures we don't submit default values for fields not shown in the UI.
+     * @param item - The item data to filter
+     * @returns Filtered item data containing only UI schema fields
+     * @internal
+     */
+    filterDataByUiSchema(item) {
+        if (!this.userProvidedUiSchema) {
+            return item;
+        }
+        const uiSchemaFields = extractFieldsFromUiSchema(this.userProvidedUiSchema);
+        // Get only visible (non-hidden) field names
+        const visibleFieldNames = uiSchemaFields.filter((f) => !f.isHidden).map((f) => f.fieldName);
+        if (visibleFieldNames.length === 0) {
+            return item;
+        }
+        // Filter the item to only include fields from the UI schema
+        const filteredItem = {};
+        for (const fieldName of visibleFieldNames) {
+            if (fieldName in item) {
+                filteredItem[fieldName] = item[fieldName];
+            }
+        }
+        return filteredItem;
+    }
     /**
      * Builds the commit payload for the form submission.
      * @internal
      */
-    buildCommitPayload(data) {
+    buildCommitPayload(data, filterByUiSchema = false) {
+        const details = filterByUiSchema ? this.filterDataByUiSchema(data) : data;
         if (this.setApprovalMessage) {
-            const { APPROVAL_MESSAGE } = data, details = __rest(data, ["APPROVAL_MESSAGE"]);
-            return { DETAILS: details, APPROVAL_MESSAGE };
+            const { APPROVAL_MESSAGE } = details, rest = __rest(details, ["APPROVAL_MESSAGE"]);
+            return { DETAILS: rest, APPROVAL_MESSAGE };
         }
-        return { DETAILS: data };
+        return { DETAILS: details };
     }
     /**
      * Controls the visibility of the submit button.
@@ -256,6 +529,8 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
             if (event.detail.additionalErrors.length) {
                 this.errors = [...this.errors, ...event.detail.additionalErrors];
             }
+            // Re-emit so parent components can react to form data changes (e.g. for dynamic criteria)
+            this.$emit('data-change', event.detail);
         }
     }
     /**
@@ -271,6 +546,7 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
      */
     reset(clearData = true) {
         this.submitted = false;
+        this.clearRowSubmitStatuses();
         if (clearData) {
             this.data = {};
         }
@@ -328,6 +604,124 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
             }
         });
     }
+    /**
+     * Handles CSV file selection for bulk import.
+     * Parses the CSV content and appends it to existing form items.
+     * @param event - The file input change event
+     * @public
+     */
+    handleCsvFileSelected(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (!file) {
+                return;
+            }
+            try {
+                const content = yield file.text();
+                const parseResult = parseCsv(content);
+                if (parseResult.errors.length > 0) {
+                    this.$emit('csv-parse-error', { errors: parseResult.errors, fileName: file.name });
+                    logger.warn('CSV parse errors:', parseResult.errors);
+                    this.clearCsvFileInput();
+                    return;
+                }
+                if (parseResult.rows.length === 0) {
+                    this.$emit('csv-parse-error', {
+                        errors: ['CSV file contains no data rows'],
+                        fileName: file.name,
+                    });
+                    this.clearCsvFileInput();
+                    return;
+                }
+                // Map CSV data to schema fields (uiSchema enables label->field mapping for import)
+                const { mappedRows, unmappedColumns } = mapCsvToSchema(parseResult.rows, this.originalDetailsSchema, this.uischema);
+                if (mappedRows.length === 0) {
+                    this.$emit('csv-parse-error', {
+                        errors: ['No CSV columns could be matched to form fields'],
+                        fileName: file.name,
+                    });
+                    this.clearCsvFileInput();
+                    return;
+                }
+                // Check if importing would exceed maximum items
+                const existingItems = ((_b = this.data) === null || _b === void 0 ? void 0 : _b.items) || [];
+                let rowsToImport = mappedRows;
+                if (this.bulkInsertMaxItems !== undefined) {
+                    const availableSlots = this.bulkInsertMaxItems - existingItems.length;
+                    if (availableSlots <= 0) {
+                        this.$emit('csv-parse-error', {
+                            errors: [`Maximum of ${this.bulkInsertMaxItems} items already reached`],
+                            fileName: file.name,
+                        });
+                        this.clearCsvFileInput();
+                        return;
+                    }
+                    if (mappedRows.length > availableSlots) {
+                        rowsToImport = mappedRows.slice(0, availableSlots);
+                        logger.warn(`Truncated CSV import from ${mappedRows.length} to ${availableSlots} rows due to max items limit`);
+                    }
+                }
+                // Append to existing items
+                this.data = { items: [...existingItems, ...rowsToImport] };
+                this.$emit('csv-imported', {
+                    rowCount: rowsToImport.length,
+                    totalRowsInFile: mappedRows.length,
+                    unmappedColumns,
+                    fileName: file.name,
+                });
+                logger.debug('CSV imported successfully', {
+                    rowCount: rowsToImport.length,
+                    unmappedColumns,
+                });
+            }
+            catch (error) {
+                this.$emit('csv-parse-error', {
+                    errors: [`Failed to read CSV file: ${String(error)}`],
+                    fileName: file.name,
+                });
+                logger.error('CSV import error:', error);
+            }
+            this.clearCsvFileInput();
+        });
+    }
+    /**
+     * Clears the CSV file input to allow re-selection of the same file.
+     * @internal
+     */
+    clearCsvFileInput() {
+        if (this.csvFileInput) {
+            this.csvFileInput.value = '';
+        }
+    }
+    /**
+     * Downloads a CSV template file with headers and sample data based on the schema.
+     * If a UI schema is provided, it will be used to determine which fields to include
+     * and in what order. Hidden fields will be excluded from the template.
+     * @public
+     */
+    downloadCsvTemplate() {
+        if (!this.originalDetailsSchema) {
+            logger.warn('Cannot download CSV template: schema not available');
+            this.$emit('csv-template-error', { error: 'Schema not available' });
+            return;
+        }
+        // Use UI schema to determine which columns to include (only fields in uischema, not all schema fields)
+        const csvContent = generateCsvTemplate(this.originalDetailsSchema, this.uischema);
+        if (!csvContent) {
+            logger.warn('Cannot download CSV template: no fields in schema');
+            this.$emit('csv-template-error', { error: 'No fields found in schema' });
+            return;
+        }
+        // Generate filename based on resource name or use default
+        const baseName = this.resourceName
+            ? this.resourceName.replace(/^EVENT_/, '').toLowerCase()
+            : 'bulk_insert';
+        const fileName = `${baseName}_template.csv`;
+        downloadCsvFile(csvContent, fileName);
+        this.$emit('csv-template-downloaded', { fileName });
+        logger.debug('CSV template downloaded:', fileName);
+    }
 };
 __decorate([
     attr({ attribute: 'design-system-prefix' })
@@ -380,6 +774,30 @@ __decorate([
 __decorate([
     attr({ attribute: 'hide-submit-button', mode: 'boolean' })
 ], Form.prototype, "hideSubmit", void 0);
+__decorate([
+    attr({ attribute: 'bulk-insert', mode: 'boolean' })
+], Form.prototype, "bulkInsert", void 0);
+__decorate([
+    attr({
+        attribute: 'bulk-insert-min-items',
+        converter: {
+            fromView: (v) => parseInt(v, 10) || 1,
+            toView: (v) => String(v),
+        },
+    })
+], Form.prototype, "bulkInsertMinItems", void 0);
+__decorate([
+    attr({
+        attribute: 'bulk-insert-max-items',
+        converter: {
+            fromView: (v) => (v ? parseInt(v, 10) : undefined),
+            toView: (v) => (v !== undefined ? String(v) : ''),
+        },
+    })
+], Form.prototype, "bulkInsertMaxItems", void 0);
+__decorate([
+    observable
+], Form.prototype, "rowSubmitStatuses", void 0);
 __decorate([
     volatile
 ], Form.prototype, "isSubmitHidden", null);

package/dist/esm/form.styles.js

@@ -25,6 +25,10 @@ export const foundationFormStyles = css `
     box-sizing: border-box;
   }
 
+  .form-grid-compact {
+    font-size: 0.9em;
+  }
+
   .form-controls {
     display: grid;
     grid-gap: calc(${designUnit} * 1px);
@@ -67,9 +71,45 @@ export const foundationFormStyles = css `
   }
 
   .submit-button {
-    width: 70px;
     margin: 0;
   }
+
+  .csv-upload-section {
+    display: flex;
+    align-items: center;
+    gap: calc(${designUnit} * 3px);
+    padding: calc(${designUnit} * 1px) 0;
+    margin-bottom: calc(${designUnit} * 2px);
+  }
+
+  .csv-file-input {
+    display: none;
+  }
+
+  /* Card-like styling for CSV buttons - matches array item aesthetic */
+  .csv-template-button,
+  .csv-import-button {
+    display: flex;
+    align-items: center;
+    gap: calc(${designUnit} * 1px);
+    padding: calc(${designUnit} * 2px) calc(${designUnit} * 3px);
+    background-color: var(--neutral-layer-1, #fff);
+    border: 1px solid var(--neutral-stroke-rest, rgb(0 0 0 / 12%));
+    border-radius: calc(${designUnit} * 2px);
+    box-shadow:
+      0 1px 2px rgb(0 0 0 / 4%),
+      0 4px 8px rgb(0 0 0 / 6%);
+    transition:
+      box-shadow 0.2s ease,
+      border-color 0.15s ease;
+  }
+
+  .csv-template-button:hover,
+  .csv-import-button:hover {
+    box-shadow:
+      0 2px 4px rgb(0 0 0 / 6%),
+      0 6px 12px rgb(0 0 0 / 8%);
+  }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     :host {
       background: ${SystemColors.Canvas};

package/dist/esm/form.template.js

@@ -10,9 +10,39 @@ avoidTreeShaking(JSONForms, ArrayListWrapper, CategorizationWrapper, ControlWrap
 /** @internal */
 export const getPrefixedForm = (prefix) => html `
   <template>
+    ${when((x) => x.bulkInsert, html `
+        <div class="csv-upload-section" part="csv-upload">
+          <input
+            type="file"
+            accept=".csv,text/csv"
+            ${ref('csvFileInput')}
+            @change=${(x, c) => x.handleCsvFileSelected(c.event)}
+            class="csv-file-input"
+          />
+          <${prefix}-button
+            appearance="lightweight"
+            @click=${(x) => x.downloadCsvTemplate()}
+            class="csv-template-button"
+            data-test-id="csv-template-button"
+          >
+            <${prefix}-icon name="file-arrow-down"></${prefix}-icon>
+            Download Template
+          </${prefix}-button>
+          <${prefix}-button
+            appearance="lightweight"
+            @click=${(x) => { var _a; return (_a = x.csvFileInput) === null || _a === void 0 ? void 0 : _a.click(); }}
+            class="csv-import-button"
+            data-test-id="csv-import-button"
+          >
+            <${prefix}-icon name="file-arrow-up"></${prefix}-icon>
+            Import CSV
+          </${prefix}-button>
+        </div>
+      `)}
     <json-forms
       @submit-button-clicked=${(x) => x._submit()}
       @submit-part=${(x, c) => x.submitPart(c.event)}
+      @submit-single-row=${(x, c) => x.submitSingleRow(c.event.detail.index)}
       @reset-form=${(x) => x.reset(false)}
       ?readonly=${(x) => x.readonly}
       ?submitted=${(x) => x.submitted}
@@ -21,6 +51,8 @@ export const getPrefixedForm = (prefix) => html `
       :schema=${(x) => x.jsonSchema}
       :data=${(x) => x.data}
       :prefix=${(x) => x.prefix}
+      :rowSubmitStatuses=${(x) => x.rowSubmitStatuses}
+      :bulkInsert=${(x) => x.bulkInsert}
       @data-change=${(x, c) => x.onChange(c.event)}
     ></json-forms>
     ${when((x) => x.isSubmitHidden, html `
@@ -31,7 +63,7 @@ export const getPrefixedForm = (prefix) => html `
             class="submit-button"
             appearance="accent"
           >
-            Submit
+            ${(x) => (x.bulkInsert ? 'Submit All' : 'Submit')}
           </${prefix}-button>
         </slot>
       `)}