form-builder-pro 1.4.2 → 1.4.3

package/dist/index.css

@@ -1033,6 +1033,9 @@ body {
 .max-h-32 {
   max-height: 8rem;
 }
+.max-h-40 {
+  max-height: 10rem;
+}
 .max-h-48 {
   max-height: 12rem;
 }
@@ -1197,6 +1200,15 @@ body {
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1597,6 +1609,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(202 138 4 / var(--tw-text-opacity, 1));
 }
+.accent-blue-600 {
+  accent-color: #2563eb;
+}
 .opacity-100 {
   opacity: 1;
 }
@@ -2050,6 +2065,11 @@ input[type="radio"]:checked::after {
   opacity: 0.7;
 }
 
+.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
+}
+
 .dark\:border-\[\#019FA2\]:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(1 159 162 / var(--tw-border-opacity, 1));

package/dist/index.d.mts

@@ -66,6 +66,23 @@ interface AsyncOptionSource {
 }
 /** Lookup (Entity Fields) — source category for optionSource LOOKUP */
 type LookupSourceType = 'MODULE' | 'MASTER_TYPE' | 'SETTINGS';
+/**
+ * Configuration for the auto-populate fields feature on LOOKUP dropdowns.
+ * When `enabled` is true and a user selects a lookup record, the fields listed
+ * in `fields` are automatically populated from the corresponding lookup record data.
+ *
+ * `fields` contains the field keys (e.g. column/property names) that are present
+ * in both the Lookup Value Field and the Lookup Label Field response objects.
+ */
+interface AutoPopulateFieldsConfig {
+    /** Whether auto-population is active for this dropdown */
+    enabled: boolean;
+    /**
+     * List of field keys from the lookup response that should be auto-populated
+     * into other form fields when the user selects a value.
+     */
+    fields: string[];
+}
 interface FormField {
     id: string;
     type: FieldType;
@@ -136,6 +153,7 @@ interface FormField {
     nameGeneratorSuffix?: string;
     nameGeneratorIdPadding?: number;
     formulaConfig?: FormulaConfig;
+    autoPopulateFields?: AutoPopulateFieldsConfig;
 }
 /**
  * Conditional date constraint — evaluated at runtime against the current date or another field's value.
@@ -596,4 +614,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };
+export { type AsyncOptionSource, type AutoPopulateFieldsConfig, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };

package/dist/index.d.ts

@@ -66,6 +66,23 @@ interface AsyncOptionSource {
 }
 /** Lookup (Entity Fields) — source category for optionSource LOOKUP */
 type LookupSourceType = 'MODULE' | 'MASTER_TYPE' | 'SETTINGS';
+/**
+ * Configuration for the auto-populate fields feature on LOOKUP dropdowns.
+ * When `enabled` is true and a user selects a lookup record, the fields listed
+ * in `fields` are automatically populated from the corresponding lookup record data.
+ *
+ * `fields` contains the field keys (e.g. column/property names) that are present
+ * in both the Lookup Value Field and the Lookup Label Field response objects.
+ */
+interface AutoPopulateFieldsConfig {
+    /** Whether auto-population is active for this dropdown */
+    enabled: boolean;
+    /**
+     * List of field keys from the lookup response that should be auto-populated
+     * into other form fields when the user selects a value.
+     */
+    fields: string[];
+}
 interface FormField {
     id: string;
     type: FieldType;
@@ -136,6 +153,7 @@ interface FormField {
     nameGeneratorSuffix?: string;
     nameGeneratorIdPadding?: number;
     formulaConfig?: FormulaConfig;
+    autoPopulateFields?: AutoPopulateFieldsConfig;
 }
 /**
  * Conditional date constraint — evaluated at runtime against the current date or another field's value.
@@ -596,4 +614,4 @@ declare const initFormBuilder: (options: FormBuilderOptions & {
     containerId: string;
 }) => FormBuilder;
 
-export { type AsyncOptionSource, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };
+export { type AsyncOptionSource, type AutoPopulateFieldsConfig, type DateConstraint, type FieldType, type FieldValidations, type FieldWidth, FormBuilder, type FormBuilderOptions, type FormField, FormRenderer, type FormSchema, FormSchemaValidation, type FormSection, type FormulaCondition, type FormulaConfig, type GroupPosition, type ISDConfig, LOOKUP_SOURCE_TYPE_OPTIONS, type LookupSourceType, type MasterType, type NameGeneratorFormat, type ValidationObject, type ValidationRule, builderToPlatform, cleanFormSchema, convertValidationObjectToArray, detectCircularDependency, detectFormulaFieldCircularDependency, evaluateFormula, evaluateFormulaConfig, evaluateFormulaExpression, extractBracketFields, formStore, generateName, getColSpanFromWidth, getFieldsForFormula, getNumericFieldsForFormula, getValidationConfigForAngular, initFormBuilder, parseFormulaDependencies, parseWidth, platformToBuilder, resetNameGeneratorCounter, validateFormula, validateFormulaExpression };

package/dist/index.js

@@ -4784,6 +4784,13 @@ function transformField(field) {
     transformed.nameGeneratorSuffix = field.nameGeneratorSuffix;
   if (field.nameGeneratorIdPadding !== void 0)
     transformed.nameGeneratorIdPadding = field.nameGeneratorIdPadding;
+  if (field.autoPopulateFields !== void 0 && field.autoPopulateFields !== null) {
+    const apf = field.autoPopulateFields;
+    transformed.autoPopulateFields = {
+      enabled: typeof apf.enabled === "boolean" ? apf.enabled : false,
+      fields: Array.isArray(apf.fields) ? apf.fields : []
+    };
+  }
   if (field.css !== void 0)
     transformed.css = field.css;
   if (field.optionsSource !== void 0)
@@ -5042,6 +5049,12 @@ function fieldToPayload(field, opts) {
       parentFieldName: field.lookupParentFieldName ?? null
     };
   }
+  if (field.optionSource === "LOOKUP" && field.autoPopulateFields !== void 0 && field.autoPopulateFields !== null) {
+    payload.autoPopulateFields = {
+      enabled: field.autoPopulateFields.enabled,
+      fields: Array.isArray(field.autoPopulateFields.fields) ? field.autoPopulateFields.fields : []
+    };
+  }
   if (field.isd !== void 0)
     payload.isd = field.isd;
   if (field.imageUrl !== void 0)
@@ -13563,6 +13576,84 @@ var FormBuilder = class {
         });
         parentFieldGroup.appendChild(parentFieldSelect);
         body.appendChild(parentFieldGroup);
+        const autoPopHeader = createElement("h3", {
+          className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 mt-6",
+          text: "Auto Populate Fields"
+        });
+        body.appendChild(autoPopHeader);
+        const autoPopEnabled = selectedField.autoPopulateFields?.enabled === true;
+        body.appendChild(this.createCheckboxField(
+          "Enable automation for selected records",
+          autoPopEnabled,
+          (checked) => {
+            const current = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
+            formStore.getState().updateField(selectedField.id, {
+              autoPopulateFields: {
+                enabled: checked,
+                fields: current?.autoPopulateFields?.fields ?? []
+              }
+            });
+            this.render();
+          },
+          `auto-populate-enabled-${selectedField.id}`
+        ));
+        {
+          const autoPopFieldsGroup = createElement("div", { className: "mb-4 mt-2" });
+          autoPopFieldsGroup.appendChild(createElement("label", {
+            className: "block text-sm font-normal text-gray-700 dark:text-gray-300 mb-1",
+            text: "Fields to auto-populate"
+          }));
+          const lookupFieldOptionsMapForAP = formStore.getState().lookupFieldOptionsMap;
+          const availableAutoPopFields = selectedField.lookupSource ? lookupFieldOptionsMapForAP[selectedField.lookupSource] || [] : [];
+          const selectedAutoPopFields = selectedField.autoPopulateFields?.fields ?? [];
+          const isAutoPopDisabled = !autoPopEnabled || !selectedField.lookupSource;
+          if (availableAutoPopFields.length === 0) {
+            const emptyNote = createElement("p", {
+              className: "text-xs text-gray-400 dark:text-gray-500 mt-1",
+              text: selectedField.lookupSource ? "No fields available for this lookup source." : "Select a Lookup Source first."
+            });
+            autoPopFieldsGroup.appendChild(emptyNote);
+          } else {
+            const fieldList = createElement("div", {
+              className: `border border-gray-200 dark:border-gray-700 rounded-md divide-y divide-gray-100 dark:divide-gray-700 overflow-y-auto max-h-40 ${isAutoPopDisabled ? "opacity-50 pointer-events-none" : ""}`
+            });
+            availableAutoPopFields.forEach((fieldKey) => {
+              const isChecked = selectedAutoPopFields.includes(fieldKey);
+              const row = createElement("label", {
+                className: "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 text-sm text-gray-700 dark:text-gray-300"
+              });
+              const cb = createElement("input", {
+                type: "checkbox",
+                className: "w-4 h-4 accent-blue-600",
+                checked: isChecked,
+                disabled: isAutoPopDisabled,
+                onchange: (e) => {
+                  const target = e.target;
+                  const latestField = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === selectedField.id);
+                  const latestSelected = latestField?.autoPopulateFields?.fields ?? [];
+                  const updatedFields = target.checked ? [.../* @__PURE__ */ new Set([...latestSelected, fieldKey])] : latestSelected.filter((k) => k !== fieldKey);
+                  formStore.getState().updateField(selectedField.id, {
+                    autoPopulateFields: {
+                      enabled: latestField?.autoPopulateFields?.enabled ?? true,
+                      fields: updatedFields
+                    }
+                  });
+                }
+              });
+              row.appendChild(cb);
+              row.appendChild(createElement("span", { text: fieldKey }));
+              fieldList.appendChild(row);
+            });
+            autoPopFieldsGroup.appendChild(fieldList);
+            if (selectedAutoPopFields.length > 0) {
+              autoPopFieldsGroup.appendChild(createElement("p", {
+                className: "text-xs text-gray-400 dark:text-gray-500 mt-1",
+                text: `${selectedAutoPopFields.length} field(s) selected`
+              }));
+            }
+          }
+          body.appendChild(autoPopFieldsGroup);
+        }
         body.appendChild(this.createCheckboxField(
           "Visibility",
           selectedField.visible !== false,