@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260424091320 → 0.8.1-dev.20260425055034

package/dist/index.js

@@ -6063,1793 +6063,554 @@ var DataListRenderer = ({
 var DataListRenderer_default = DataListRenderer;
 
 // src/components/dataForm/DataForm.tsx
-var import_react55 = require("react");
+var import_react56 = __toESM(require("react"));
 init_Button();
 init_StyleTypes();
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var controlTypes = [
-  "lineTextInput",
-  "multilineTextInput",
-  "numberInput",
-  "checkboxInput",
-  "select",
-  "moneyInput",
-  "assetUpload",
-  "percentageInput",
-  "phoneInput",
-  "richTextInput",
-  "otpInput",
-  "image",
-  "datetimeInput"
-];
-var actionCode = [
-  { label: "Fetch", value: "Fetch" },
-  { label: "Create", value: "Create" },
-  { label: "Update", value: "Update" },
-  { label: "Delete", value: "Delete" }
-];
-var httpMethods = [
-  { value: "post", label: "POST" },
-  { value: "get", label: "GET" },
-  { value: "put", label: "PUT" },
-  { value: "delete", label: "DELETE" }
-];
-function DataForm({
-  formId,
-  sections = [],
-  setSections,
-  actions = [],
-  setActions,
-  formTitle = "",
-  setFormTitle,
-  entityIdParamName = "siteFormId",
-  setEntityIdParamName,
-  selectedAppId = 0,
-  setSelectedAppId,
-  apps = [],
-  loadingApps = false,
-  isEditMode = false,
-  nextTempId = -1,
-  setNextTempId,
-  onSave,
-  onDelete,
-  siteFormTypeId = 2
-}) {
-  const [selectedItem, setSelectedItem] = (0, import_react55.useState)(null);
-  const [activeTab, setActiveTab] = (0, import_react55.useState)("config");
-  const addSection = () => {
-    const tempId = nextTempId;
-    setNextTempId(nextTempId - 1);
-    const newSectionIndex = sections.length;
-    setSections([
-      ...sections,
-      {
-        siteFormDataFormSectionId: tempId,
-        sectionTitle: "New Section",
-        sectionName: `section_${Math.abs(tempId)}`,
-        isChildSection: false,
-        parentSectionName: null,
-        rows: [],
-        isDeleted: false
-      }
-    ]);
-    setTimeout(() => {
-      setSelectedItem({
-        type: "section",
-        sectionIndex: newSectionIndex
-      });
-    }, 0);
-  };
-  const deleteSection = (sectionIndex) => {
-    setSections(
-      sections.map(
-        (section, i) => i === sectionIndex ? { ...section, isDeleted: true } : section
-      )
-    );
-    if (selectedItem?.type === "section" && selectedItem.sectionIndex === sectionIndex) {
-      setSelectedItem(null);
-    }
-  };
-  const updateSectionTitle = (sectionIndex, value) => {
-    updateSectionField(sectionIndex, "sectionTitle", value);
-  };
-  const normalizeSectionHierarchy = (sectionList) => {
-    const firstActiveIndex = sectionList.findIndex((s) => !s.isDeleted);
-    if (firstActiveIndex < 0) return sectionList;
-    return sectionList.map((section, i) => {
-      if (section.isDeleted) return section;
-      const isFirstSection = i === firstActiveIndex;
-      const normalizedParentName = String(
-        section.parentSectionName ?? ""
-      ).trim();
-      const parentSectionName = normalizedParentName || null;
-      if (isFirstSection) {
-        if (section.isChildSection || parentSectionName) {
-          return {
-            ...section,
-            isChildSection: false,
-            parentSectionName: null
-          };
-        }
-        return section;
-      }
-      if (!section.isChildSection) {
-        if (parentSectionName) {
-          return {
-            ...section,
-            parentSectionName: null
-          };
-        }
-        return section;
-      }
-      if (!parentSectionName) {
-        if (section.parentSectionName) {
-          return {
-            ...section,
-            parentSectionName: null
-          };
-        }
-        return section;
-      }
-      const validParentIndex = sectionList.findIndex(
-        (candidate, candidateIndex) => !candidate.isDeleted && candidateIndex < i && String(candidate.sectionName ?? "").trim() === parentSectionName
-      );
-      if (validParentIndex < 0) {
-        return {
-          ...section,
-          parentSectionName: null
-        };
-      }
-      if (section.parentSectionName !== parentSectionName) {
-        return {
-          ...section,
-          parentSectionName
-        };
-      }
-      return section;
-    });
-  };
-  const updateSectionField = (sectionIndex, field, value) => {
-    const updated = sections.map((section, i) => {
-      if (i !== sectionIndex) return section;
-      if (field === "parentSectionName") {
-        const parentSectionName = String(value ?? "").trim();
-        return {
-          ...section,
-          parentSectionName: parentSectionName || null
-        };
-      }
-      if (field === "isChildSection") {
-        const isChild = Boolean(value);
-        return {
-          ...section,
-          isChildSection: isChild,
-          parentSectionName: isChild ? section.parentSectionName ?? null : null
-        };
-      }
-      return { ...section, [field]: value };
-    });
-    setSections(normalizeSectionHierarchy(updated));
-  };
-  const addRow = (sectionIndex) => {
-    const tempId = nextTempId;
-    setNextTempId(nextTempId - 1);
-    setSections(
-      sections.map(
-        (section, i) => i === sectionIndex ? {
-          ...section,
-          rows: [
-            ...section.rows ?? [],
-            {
-              siteFormDataFormSectionRowId: tempId,
-              grow: false,
-              elements: [],
-              isDeleted: false
-            }
-          ]
-        } : section
-      )
-    );
-    setTimeout(() => {
-      const newRowIndex = sections[sectionIndex]?.rows?.length || 0;
-      setSelectedItem({
-        type: "row",
-        sectionIndex,
-        rowIndex: newRowIndex
-      });
-    }, 0);
-  };
-  const deleteRow = (sectionIndex, rowIndex) => {
-    setSections(
-      sections.map((section, i) => {
-        if (i !== sectionIndex) return section;
-        const updatedRows = section.rows?.map(
-          (row, rIndex) => rIndex === rowIndex ? { ...row, isDeleted: true } : row
-        ) ?? [];
-        return { ...section, rows: updatedRows };
-      })
-    );
-    if (selectedItem?.type === "row" && selectedItem.sectionIndex === sectionIndex && selectedItem.rowIndex === rowIndex) {
-      setSelectedItem(null);
-    }
-  };
-  const updateRowGrow = (sectionIndex, rowIndex, grow) => {
-    setSections(
-      sections.map((section, i) => {
-        if (i !== sectionIndex) return section;
-        const updatedRows = section.rows?.map(
-          (row, rIndex) => rIndex === rowIndex ? { ...row, grow } : row
-        ) ?? [];
-        return { ...section, rows: updatedRows };
-      })
-    );
-  };
-  const addElement = (sectionIndex, rowIndex) => {
-    const tempId = nextTempId;
-    setNextTempId(nextTempId - 1);
-    setSections(
-      sections.map((section, i) => {
-        if (i !== sectionIndex) return section;
-        const updatedRows = section.rows?.map(
-          (row, rIndex) => rIndex === rowIndex ? {
-            ...row,
-            elements: [
-              ...row.elements ?? [],
-              {
-                siteFormDataFormSectionRowElementId: tempId,
-                name: "",
-                label: "",
-                controlTypeCode: "",
-                dataSource: "",
-                dataKeyFieldName: "",
-                dataTextFieldName: "",
-                maxLength: void 0,
-                minLength: void 0,
-                maxValue: void 0,
-                minValue: void 0,
-                readOnly: false,
-                hintText: "",
-                placeholder: "",
-                required: false,
-                errorMessage: "",
-                helpText: "",
-                autoFocus: false,
-                isDeleted: false
-              }
-            ]
-          } : row
-        ) ?? [];
-        return { ...section, rows: updatedRows };
-      })
-    );
-    setTimeout(() => {
-      const newElementIndex = sections[sectionIndex]?.rows?.[rowIndex]?.elements?.length || 0;
-      setSelectedItem({
-        type: "element",
-        sectionIndex,
-        rowIndex,
-        elementIndex: newElementIndex
-      });
-    }, 0);
-  };
-  const deleteElement = (sectionIndex, rowIndex, elementIndex) => {
-    setSections(
-      sections.map((section, i) => {
-        if (i !== sectionIndex) return section;
-        const updatedRows = section.rows?.map((row, rIndex) => {
-          if (rIndex !== rowIndex) return row;
-          const updatedElements = row.elements?.map(
-            (el, eIndex) => eIndex === elementIndex ? { ...el, isDeleted: true } : el
-          ) ?? [];
-          return { ...row, elements: updatedElements };
-        }) ?? [];
-        return { ...section, rows: updatedRows };
-      })
-    );
-    if (selectedItem?.type === "element" && selectedItem.sectionIndex === sectionIndex && selectedItem.rowIndex === rowIndex && selectedItem.elementIndex === elementIndex) {
-      setSelectedItem(null);
-    }
-  };
-  const updateElementField = (sectionIndex, rowIndex, elementIndex, field, value) => {
-    setSections(
-      sections.map((section, i) => {
-        if (i !== sectionIndex) return section;
-        const updatedRows = section.rows?.map((row, rIndex) => {
-          if (rIndex !== rowIndex) return row;
-          const updatedElements = row.elements?.map(
-            (el, eIndex) => eIndex === elementIndex ? { ...el, [field]: value } : el
-          ) ?? [];
-          return { ...row, elements: updatedElements };
-        }) ?? [];
-        return { ...section, rows: updatedRows };
-      })
-    );
-  };
-  const addAction = () => {
-    const tempId = nextTempId;
-    setNextTempId(nextTempId - 1);
-    setActions([
-      ...actions,
-      {
-        siteFormDataFormActionId: tempId,
-        actionCode: "",
-        actionTitle: "",
-        serviceRoute: "",
-        httpMethod: "post",
-        returnRoute: null,
-        isDeleted: false
-      }
-    ]);
-  };
-  const deleteAction = (actionIndex) => {
-    setActions(
-      actions.map(
-        (action, i) => i === actionIndex ? { ...action, isDeleted: true } : action
-      )
-    );
-  };
-  const updateActionField = (actionIndex, field, value) => {
-    setActions(
-      actions.map(
-        (action, i) => i === actionIndex ? { ...action, [field]: value } : action
-      )
-    );
-  };
-  const handleNumberChange = (sectionIndex, rowIndex, elIndex, field, value) => {
-    const numValue = value === "" || value === null || value === void 0 ? void 0 : parseInt(value, 10);
-    updateElementField(sectionIndex, rowIndex, elIndex, field, numValue);
-  };
-  const getControlTypeColor = (type) => {
-    const colors = {
-      lineTextInput: "bg-blue-100 text-blue-800",
-      multilineTextInput: "bg-purple-100 text-purple-800",
-      numberInput: "bg-green-100 text-green-800",
-      checkboxInput: "bg-yellow-100 text-yellow-800",
-      select: "bg-orange-100 text-orange-800"
-    };
-    return colors[type] || "bg-gray-100 text-gray-800";
-  };
-  const renderSidebarContent = () => {
-    if (!selectedItem) {
-      return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "p-6 text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-          "svg",
-          {
-            className: "mx-auto h-12 w-12 text-gray-400 mb-4",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "No Item Selected" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-sm text-gray-500", children: "Please select a section, row, or element from the form builder to edit its properties." })
-      ] });
-    }
-    const { type, sectionIndex, rowIndex, elementIndex } = selectedItem;
-    if (type === "section") {
-      const section = sections[sectionIndex];
-      if (!section) return null;
-      const firstActiveSectionIndex = sections.findIndex((s) => !s.isDeleted);
-      const isFirstSection = sectionIndex === firstActiveSectionIndex;
-      const parentSectionOptions = sections.filter(
-        (s, i) => !s.isDeleted && i < sectionIndex && !!s.sectionName?.trim()
-      ).map((s) => ({
-        value: s.sectionName,
-        label: s.sectionTitle?.trim() || s.sectionName
-      }));
-      return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "p-6 space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "text-lg font-medium text-gray-900 border-b pb-2", children: "Edit Section" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "sectionTitle",
-              value: section.sectionTitle ?? "",
-              callback: ({ value }) => {
-                updateSectionTitle(sectionIndex, String(value ?? ""));
-              },
-              attributes: {
-                label: "Section Title",
-                placeholder: "Enter section title"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "sectionName",
-              value: section.sectionName ?? "",
-              callback: ({ value }) => {
-                updateSectionField(
-                  sectionIndex,
-                  "sectionName",
-                  String(value ?? "")
-                );
-              },
-              attributes: {
-                label: "Section Name",
-                placeholder: "Enter section name"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.checkboxInput,
-              name: "isChildSection",
-              value: isFirstSection ? false : section.isChildSection || false,
-              callback: ({ value }) => {
-                if (isFirstSection) {
-                  updateSectionField(sectionIndex, "isChildSection", false);
-                  updateSectionField(sectionIndex, "parentSectionName", null);
-                  return;
-                }
-                const isChild = Boolean(value ?? false);
-                updateSectionField(sectionIndex, "isChildSection", isChild);
-                if (!isChild) {
-                  updateSectionField(sectionIndex, "parentSectionName", null);
-                }
-              },
-              attributes: {
-                label: "Is Child Section",
-                readOnly: isFirstSection
-              }
-            }
-          ),
-          isFirstSection && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-xs text-gray-500", children: "First section cannot be child section." }),
-          !isFirstSection && section.isChildSection && (parentSectionOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              name: "parentSectionName",
-              controlType: InputControlType_default.select,
-              value: section.parentSectionName ?? "",
-              dataset: parentSectionOptions,
-              dataKeyFieldName: "value",
-              dataTextFieldName: "label",
-              callback: ({ value }) => {
-                const parentSectionName = String(value ?? "").trim();
-                updateSectionField(
-                  sectionIndex,
-                  "parentSectionName",
-                  parentSectionName || null
-                );
-              },
-              attributes: {
-                label: "Parent Section Name"
-              }
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-3 py-2", children: "No valid parent sections above this section." }))
-        ] })
-      ] });
-    }
-    if (type === "row") {
-      const row = sections[sectionIndex]?.rows?.[rowIndex];
-      if (!row) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "p-6 space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "text-lg font-medium text-gray-900 border-b pb-2", children: "Edit Row" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-          InputControl_default,
-          {
-            controlType: InputControlType_default.checkboxInput,
-            name: "row.grow",
-            value: row.grow || false,
-            callback: ({ value }) => {
-              updateRowGrow(sectionIndex, rowIndex, Boolean(value ?? ""));
-            },
-            attributes: {
-              label: "Grow Row"
-            }
-          }
-        ) })
-      ] });
-    }
-    if (type === "element") {
-      const element = sections[sectionIndex]?.rows?.[rowIndex]?.elements?.[elementIndex];
-      if (!element) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "px-6 py-2 space-y-4 overflow-y-auto", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "text-lg font-medium text-gray-900 border-b pb-2", children: "Edit Element" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "name",
-              value: element.name,
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "name",
-                  String(value ?? "")
-                );
-              },
-              attributes: {
-                label: "Name",
-                placeholder: "Enter element name"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "label",
-              value: element.label,
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "label",
-                  String(value ?? "")
-                );
-              },
-              attributes: {
-                label: "Label",
-                placeholder: "Enter label"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("label", { className: "block text-sm font-medium text-gray-700", children: "Control Type" }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-              "select",
-              {
-                className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
-                value: element.controlTypeCode,
-                onChange: (e) => updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "controlTypeCode",
-                  e.target.value
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("option", { value: "", children: "Select Control" }),
-                  controlTypes.map((type2) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("option", { value: type2, children: type2 }, type2))
-                ]
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-2 pt-4 border-t", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h4", { className: "text-sm font-medium text-gray-700", children: "Properties" }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.checkboxInput,
-                name: "el.required",
-                value: element.required || false,
-                callback: ({ value }) => {
-                  updateElementField(
-                    sectionIndex,
-                    rowIndex,
-                    elementIndex,
-                    "required",
-                    Boolean(value ?? "")
-                  );
-                },
-                attributes: {
-                  label: "Required"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.checkboxInput,
-                name: "el.readonly",
-                value: element.readOnly || false,
-                callback: ({ value }) => {
-                  updateElementField(
-                    sectionIndex,
-                    rowIndex,
-                    elementIndex,
-                    "readOnly",
-                    Boolean(value ?? "")
-                  );
-                },
-                attributes: {
-                  label: "Read Only"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.checkboxInput,
-                name: "el.autoFocus",
-                value: element.autoFocus || false,
-                callback: ({ value }) => {
-                  updateElementField(
-                    sectionIndex,
-                    rowIndex,
-                    elementIndex,
-                    "autoFocus",
-                    Boolean(value ?? "")
-                  );
-                },
-                attributes: {
-                  label: "Auto Focus"
-                }
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-4 pt-4 border-t", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h4", { className: "text-sm font-medium text-gray-700", children: "Text Properties" }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "el.placeholder",
-              value: element.placeholder,
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "placeholder",
-                  String(value ?? "")
-                );
-              },
-              attributes: {
-                label: "Placeholder",
-                placeholder: "Enter placeholder"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "el.hintText",
-              value: element.hintText || "",
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "hintText",
-                  String(value ?? "")
-                );
-              },
-              attributes: {
-                label: "Hint Text",
-                placeholder: "Enter hint text"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "el.helpText",
-              value: element.helpText || "",
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "helpText",
-                  String(value ?? "")
-                );
-              },
-              attributes: {
-                label: "Help Text",
-                placeholder: "Enter help text"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "el.errorMessage",
-              value: element.errorMessage || "",
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "errorMessage",
-                  String(value ?? "")
-                );
-              },
-              attributes: {
-                label: "Error Message",
-                placeholder: "Enter error message"
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-4 pt-4 border-t", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h4", { className: "text-sm font-medium text-gray-700", children: "Validation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.numberInput,
-                name: "el.minLength",
-                value: element.minLength || "",
-                callback: ({ value }) => {
-                  handleNumberChange(
-                    sectionIndex,
-                    rowIndex,
-                    elementIndex,
-                    "minLength",
-                    value
-                  );
-                },
-                attributes: {
-                  label: "Min Length",
-                  placeholder: "Min"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.numberInput,
-                name: "el.maxLength",
-                value: element.maxLength || "",
-                callback: ({ value }) => {
-                  handleNumberChange(
-                    sectionIndex,
-                    rowIndex,
-                    elementIndex,
-                    "maxLength",
-                    value
-                  );
-                },
-                attributes: {
-                  label: "Max Length",
-                  placeholder: "Max"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.numberInput,
-                name: "el.minValue",
-                value: element.minValue || "",
-                callback: ({ value }) => {
-                  handleNumberChange(
-                    sectionIndex,
-                    rowIndex,
-                    elementIndex,
-                    "minValue",
-                    value
-                  );
-                },
-                attributes: {
-                  label: "Min Value",
-                  placeholder: "Min"
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.numberInput,
-                name: "el.maxValue",
-                value: element.maxValue || "",
-                callback: ({ value }) => {
-                  handleNumberChange(
-                    sectionIndex,
-                    rowIndex,
-                    elementIndex,
-                    "maxValue",
-                    value
-                  );
-                },
-                attributes: {
-                  label: "Max Value",
-                  placeholder: "Max"
-                }
-              }
-            )
-          ] })
-        ] }),
-        element.controlTypeCode === "select" && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-4 pt-4 border-t", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h4", { className: "text-sm font-medium text-gray-700", children: "Select Options" }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "el.dataSource",
-              value: element.dataSource || "",
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "dataSource",
-                  value
-                );
-              },
-              attributes: {
-                label: "Data Source",
-                placeholder: "/api/endpoint"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "el.dataKeyFieldName",
-              value: element.dataKeyFieldName || "",
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "dataKeyFieldName",
-                  value
-                );
-              },
-              attributes: {
-                label: "Data Key Field",
-                placeholder: "id"
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-            InputControl_default,
-            {
-              controlType: InputControlType_default.lineTextInput,
-              name: "el.dataTextFieldName",
-              value: element.dataTextFieldName || "",
-              callback: ({ value }) => {
-                updateElementField(
-                  sectionIndex,
-                  rowIndex,
-                  elementIndex,
-                  "dataTextFieldName",
-                  value
-                );
-              },
-              attributes: {
-                label: "Data Text Field",
-                placeholder: "name"
-              }
-            }
-          )
-        ] })
-      ] });
-    }
-    return null;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex h-[calc(100vh-73px)]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex-1 overflow-y-auto pe-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex items-center gap-2 px-6 py-3 border border-neutral-200 bg-white shadow-sm rounded-t-md", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-        "div",
-        {
-          className: "inline-flex items-center gap-2 cursor-pointer",
-          onClick: () => window.history.back(),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                strokeWidth: "1.5",
-                stroke: "currentColor",
-                className: "w-4 h-4 text-primary-800",
-                children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    d: "M15.75 19.5L8.25 12l7.5-7.5"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("h2", { className: "text-lg font-semibold text-primary-800", children: [
-              formId && formId > 0 ? "Edit" : "Add",
-              " Data Form"
-            ] })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "border-b border-gray-200 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-        "nav",
-        {
-          className: "flex -mb-px px-6 bg-white rounded-t-md",
-          "aria-label": "Tabs",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              "button",
-              {
-                onClick: () => setActiveTab("config"),
-                className: `mr-8 py-4 px-1 border-b-2 font-medium text-sm ${activeTab === "config" ? "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}`,
-                children: "Form Configuration"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              "button",
-              {
-                onClick: () => setActiveTab("sections"),
-                className: `mr-8 py-4 px-1 border-b-2 font-medium text-sm ${activeTab === "sections" ? "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}`,
-                children: "Form Sections & Actions"
-              }
-            )
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "mx-auto py-1", children: [
-        activeTab === "config" && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "bg-white  shadow-sm border border-gray-200 mb-8 overflow-hidden", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("h2", { className: "text-lg font-semibold text-gray-800 flex items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-              "svg",
-              {
-                className: "w-5 h-5 mr-2 text-gray-600",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    }
-                  )
-                ]
-              }
-            ),
-            "Form Configuration"
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "p-6", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                InputControl_default,
-                {
-                  name: "appId",
-                  controlType: InputControlType_default.select,
-                  value: selectedAppId,
-                  dataset: apps,
-                  dataKeyFieldName: "appId",
-                  dataTextFieldName: "title",
-                  callback: ({ value }) => {
-                    const parsedAppId = Number(value);
-                    if (!Number.isNaN(parsedAppId)) {
-                      setSelectedAppId(parsedAppId);
-                    }
-                  },
-                  attributes: {
-                    label: "AppId",
-                    readOnly: isEditMode
-                  }
-                }
-              ),
-              !loadingApps && apps.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-red-500 text-xs mt-1", children: "No applications found" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.numberInput,
-                name: "siteFormTypeId",
-                value: siteFormTypeId,
-                attributes: {
-                  readOnly: true,
-                  label: "Form Type ID"
-                }
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1 md:col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.lineTextInput,
-                name: "formTitle",
-                value: formTitle,
-                callback: ({ value }) => {
-                  setFormTitle(String(value ?? ""));
-                },
-                attributes: {
-                  label: "Form Title",
-                  placeholder: "Enter Form Title"
-                }
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.lineTextInput,
-                name: "entityIdParamName",
-                value: entityIdParamName,
-                callback: ({ value }) => {
-                  setEntityIdParamName(String(value ?? ""));
-                },
-                attributes: {
-                  label: "Entity ID Parameter Name",
-                  placeholder: "Enter Entity Parameter Name"
-                }
-              }
-            ) }),
-            formId && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              InputControl_default,
-              {
-                controlType: InputControlType_default.numberInput,
-                name: "formId",
-                value: formId,
-                attributes: {
-                  readOnly: true,
-                  label: "Form ID"
-                }
-              }
-            ) })
-          ] }) })
-        ] }),
-        activeTab === "sections" && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "mt-0.3 bg-white  shadow-sm border border-gray-200 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("h2", { className: "text-lg font-semibold text-gray-800 flex items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                  "svg",
-                  {
-                    className: "w-5 h-5 mr-2 text-gray-600",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M4 6h16M4 10h16M4 14h16M4 18h16"
-                      }
-                    )
-                  }
-                ),
-                "Form Sections"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                Button_default,
-                {
-                  ButtonType: "Primary" /* Solid */,
-                  showToast: true,
-                  onClick: async () => {
-                    addSection();
-                    return {
-                      isSuccessful: true,
-                      message: "Section added successfully"
-                    };
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "svg",
-                      {
-                        className: "w-4 h-4 mr-2",
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: 2,
-                            d: "M12 4v16m8-8H4"
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Add Section" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: sections.length === 0 ? "block" : "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "bg-white p-12 text-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                  "svg",
-                  {
-                    className: "mx-auto h-12 w-12 text-gray-400",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M4 6h16M4 10h16M4 14h16M4 18h16"
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "mt-2 text-sm font-medium text-gray-900", children: "No sections" }),
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by adding a new section." }),
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                  Button_default,
-                  {
-                    ButtonType: "Primary" /* Solid */,
-                    showToast: true,
-                    onClick: async () => {
-                      addSection();
-                      return {
-                        isSuccessful: true,
-                        message: "Section added successfully"
-                      };
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                        "svg",
-                        {
-                          className: "w-4 h-4 mr-2",
-                          fill: "none",
-                          stroke: "currentColor",
-                          viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                            "path",
-                            {
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              strokeWidth: 2,
-                              d: "M12 4v16m8-8H4"
-                            }
-                          )
-                        }
-                      ),
-                      "Add Section"
-                    ]
-                  }
-                ) })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                "div",
+
+// src/components/dataForm/DataFormChildSection.tsx
+var import_react55 = __toESM(require("react"));
+
+// src/components/dataForm/StyleTypes.tsx
+var StyleTypes2 = /* @__PURE__ */ ((StyleTypes3) => {
+  StyleTypes3["Primary"] = "Primary";
+  StyleTypes3["PrimaryHollow"] = "PrimaryHollow";
+  StyleTypes3["Secondary"] = "Secondary";
+  StyleTypes3["SecondaryHollow"] = "SecondaryHollow";
+  StyleTypes3["Neutral"] = "Neutral";
+  StyleTypes3["NeutralHollow"] = "NeutralHollow";
+  StyleTypes3["Link"] = "Link";
+  StyleTypes3["Ripple"] = "Ripple";
+  StyleTypes3["Danger"] = "Danger";
+  StyleTypes3["Light"] = "Light";
+  return StyleTypes3;
+})(StyleTypes2 || {});
+
+// src/components/dataForm/DataFormChildSection.tsx
+init_ClientButton();
+
+// src/components/dataForm/FormReducer.tsx
+var FORM_CHILD_INPUT_UPDATE = "FORM_CHILD_INPUT_UPDATE";
+var FORM_CHILD_ONE_TO_ONE_UPDATE = "FORM_CHILD_ONE_TO_ONE_UPDATE";
+var FORM_CHILD_ROW_ADD = "FORM_CHILD_ROW_ADD";
+
+// src/components/dataForm/DataFormChildSection.tsx
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var DataFormChildSection = (props) => {
+  const { section } = props;
+  const isOneToOne = section.relationshipType === "one-to-one";
+  const childItems = props.childItems || [];
+  const getChildItemsForRendering = () => {
+    if (isOneToOne) {
+      return [{ item: props.childItems ?? {}, originalIndex: 0 }];
+    }
+    return childItems.map((item, originalIndex) => ({ item, originalIndex })).filter((x) => !x.item.isDeleted) || [];
+  };
+  const childItemsToRender = getChildItemsForRendering();
+  const handleChildInputChange = (0, import_react55.useCallback)(
+    (updatedValues) => {
+      if (isOneToOne) {
+        props.callback({
+          sectionName: props.section.name,
+          actionType: FORM_CHILD_ONE_TO_ONE_UPDATE,
+          name: updatedValues.name,
+          value: updatedValues.value,
+          rowIndex: -1
+        });
+      } else {
+        const filteredIndex = updatedValues.index;
+        const visibleItem = childItemsToRender[filteredIndex];
+        if (visibleItem) {
+          props.callback({
+            sectionName: props.section.name,
+            actionType: FORM_CHILD_INPUT_UPDATE,
+            name: updatedValues.name,
+            value: updatedValues.value,
+            rowIndex: visibleItem.originalIndex
+            // Use ORIGINAL index!
+          });
+        }
+      }
+    },
+    [props, isOneToOne, childItemsToRender]
+  );
+  const onAddRow = (0, import_react55.useCallback)(() => {
+    props.callback({
+      sectionName: props.section.name,
+      actionType: FORM_CHILD_ROW_ADD,
+      name: "all",
+      value: null,
+      rowIndex: -1
+    });
+  }, [props]);
+  const onDeleteRow = (0, import_react55.useCallback)(
+    (filteredIndex) => {
+      const visibleItem = childItemsToRender[filteredIndex];
+      if (visibleItem) {
+        props.callback({
+          sectionName: props.section.name,
+          actionType: FORM_CHILD_INPUT_UPDATE,
+          name: "isDeleted",
+          value: true,
+          rowIndex: visibleItem.originalIndex
+          // Use ORIGINAL index!
+        });
+      }
+    },
+    [props, childItemsToRender]
+  );
+  console.log("Rendering Child Section:", {
+    childItemsToRender,
+    allChildItems: childItems
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react55.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "rounded border-neutral-200 border px-6 py-4 mb-2", children: [
+    section.sectionTitle && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "mb-4 text-lg font-medium text-body-950", children: section.sectionTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex-grow flex flex-col justify-between overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex flex-col justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("table", { className: "w-full border-separate divide-y divide-gray-200", children: [
+        (!isOneToOne || childItemsToRender.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("thead", { className: "", children: section.sectionRows.map((sectionRow, sectionRowIndex) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("tr", { className: "", children: [
+            sectionRow.elements.map((field, index) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                "th",
                 {
-                  className: sections.length > 0 ? "block px-4" : "hidden",
-                  children: sections.map(
-                    (section, sectionIndex) => !section.isDeleted && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                      "div",
-                      {
-                        className: `bg-white rounded-xl shadow-sm border overflow-hidden mb-4 cursor-pointer transition-all hover:shadow-md ${selectedItem?.type === "section" && selectedItem.sectionIndex === sectionIndex ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200"}`,
-                        onClick: () => setSelectedItem({
-                          type: "section",
-                          sectionIndex
-                        }),
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "px-6 py-4 bg-gray-50 border-b border-gray-200 flex items-center justify-between", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex items-center space-x-4 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "font-medium text-gray-700", children: section.sectionTitle || "Untitled Section" }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                              "div",
-                              {
-                                className: "flex items-center space-x-2",
-                                onClick: (e) => e.stopPropagation(),
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                                    Button_default,
-                                    {
-                                      ButtonType: "Primary" /* Solid */,
-                                      showToast: true,
-                                      onClick: async () => {
-                                        addRow(sectionIndex);
-                                        return {
-                                          isSuccessful: true,
-                                          message: "Row added successfully"
-                                        };
-                                      },
-                                      children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                          "svg",
-                                          {
-                                            className: "w-4 h-4 mr-1",
-                                            fill: "none",
-                                            stroke: "currentColor",
-                                            viewBox: "0 0 24 24",
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                              "path",
-                                              {
-                                                strokeLinecap: "round",
-                                                strokeLinejoin: "round",
-                                                strokeWidth: 2,
-                                                d: "M12 4v16m8-8H4"
-                                              }
-                                            )
-                                          }
-                                        ),
-                                        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Add Row" })
-                                      ]
-                                    }
-                                  ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                    Button_default,
-                                    {
-                                      ButtonType: "PrimaryHollow" /* Hollow */,
-                                      onClick: async () => {
-                                        deleteSection(sectionIndex);
-                                        return {
-                                          isSuccessful: true,
-                                          message: "Section deleted successfully"
-                                        };
-                                      },
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                        "svg",
-                                        {
-                                          className: "w-5 h-5",
-                                          fill: "none",
-                                          stroke: "currentColor",
-                                          viewBox: "0 0 24 24",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                            "path",
-                                            {
-                                              strokeLinecap: "round",
-                                              strokeLinejoin: "round",
-                                              strokeWidth: 2,
-                                              d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                            }
-                                          )
-                                        }
-                                      )
-                                    }
-                                  )
-                                ]
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "p-6", children: section.rows?.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-sm text-gray-500", children: "No rows in this section" }) }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-4", children: section.rows?.map(
-                            (row, rowIndex) => !row.isDeleted && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                              "div",
-                              {
-                                className: `border rounded-lg overflow-hidden cursor-pointer transition-all ${selectedItem?.type === "row" && selectedItem.sectionIndex === sectionIndex && selectedItem.rowIndex === rowIndex ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200 hover:border-gray-300"}`,
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  setSelectedItem({
-                                    type: "row",
-                                    sectionIndex,
-                                    rowIndex
-                                  });
-                                },
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "px-4 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between", children: [
-                                    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center space-x-4", children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "text-sm font-medium text-gray-700", children: [
-                                        "Row ",
-                                        rowIndex + 1
-                                      ] }),
-                                      row.grow && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "px-2 py-0.5 bg-green-100 text-green-800 rounded-full text-xs", children: "Grow" })
-                                    ] }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                                      "div",
-                                      {
-                                        className: "flex items-center space-x-2",
-                                        onClick: (e) => e.stopPropagation(),
-                                        children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                                            Button_default,
-                                            {
-                                              ButtonType: "Primary" /* Solid */,
-                                              onClick: async () => {
-                                                addElement(
-                                                  sectionIndex,
-                                                  rowIndex
-                                                );
-                                                return {
-                                                  isSuccessful: true,
-                                                  message: "Element added successfully"
-                                                };
-                                              },
-                                              children: [
-                                                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                                  "svg",
-                                                  {
-                                                    className: "w-3 h-3 mr-1",
-                                                    fill: "none",
-                                                    stroke: "currentColor",
-                                                    viewBox: "0 0 24 24",
-                                                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                                      "path",
-                                                      {
-                                                        strokeLinecap: "round",
-                                                        strokeLinejoin: "round",
-                                                        strokeWidth: 2,
-                                                        d: "M12 4v16m8-8H4"
-                                                      }
-                                                    )
-                                                  }
-                                                ),
-                                                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Add Element" })
-                                              ]
-                                            }
-                                          ),
-                                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                            Button_default,
-                                            {
-                                              ButtonType: "PrimaryHollow" /* Hollow */,
-                                              onClick: async () => {
-                                                deleteRow(
-                                                  sectionIndex,
-                                                  rowIndex
-                                                );
-                                                return {
-                                                  isSuccessful: true,
-                                                  message: "Row deleted successfully"
-                                                };
-                                              },
-                                              children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                                "svg",
-                                                {
-                                                  className: "w-4 h-4",
-                                                  fill: "none",
-                                                  stroke: "currentColor",
-                                                  viewBox: "0 0 24 24",
-                                                  children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                                    "path",
-                                                    {
-                                                      strokeLinecap: "round",
-                                                      strokeLinejoin: "round",
-                                                      strokeWidth: 2,
-                                                      d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                                    }
-                                                  )
-                                                }
-                                              )
-                                            }
-                                          )
-                                        ]
-                                      }
-                                    )
-                                  ] }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "p-4", children: row.elements?.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "text-center py-4 bg-gray-50 rounded border-2 border-dashed border-gray-300", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "text-sm text-gray-500", children: "No elements in this row" }) }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-2", children: row.elements?.map(
-                                    (el, elIndex) => !el.isDeleted && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                                      "div",
-                                      {
-                                        className: `flex items-center justify-between p-3 bg-gray-50 rounded-lg border cursor-pointer transition-all ${selectedItem?.type === "element" && selectedItem.sectionIndex === sectionIndex && selectedItem.rowIndex === rowIndex && selectedItem.elementIndex === elIndex ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200 hover:border-gray-300"}`,
-                                        onClick: (e) => {
-                                          e.stopPropagation();
-                                          setSelectedItem({
-                                            type: "element",
-                                            sectionIndex,
-                                            rowIndex,
-                                            elementIndex: elIndex
-                                          });
-                                        },
-                                        children: [
-                                          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center space-x-3", children: [
-                                            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-sm font-medium text-gray-700", children: el.label || "New Element" }),
-                                            el.controlTypeCode && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                              "span",
-                                              {
-                                                className: `px-2 py-0.5 rounded-full text-xs font-medium ${getControlTypeColor(el.controlTypeCode)}`,
-                                                children: el.controlTypeCode
-                                              }
-                                            )
-                                          ] }),
-                                          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                            Button_default,
-                                            {
-                                              ButtonType: "PrimaryHollow" /* Hollow */,
-                                              onClick: async () => {
-                                                deleteElement(
-                                                  sectionIndex,
-                                                  rowIndex,
-                                                  elIndex
-                                                );
-                                                return {
-                                                  isSuccessful: true,
-                                                  message: "Element deleted successfully"
-                                                };
-                                              },
-                                              children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                                "svg",
-                                                {
-                                                  className: "w-4 h-4",
-                                                  fill: "none",
-                                                  stroke: "currentColor",
-                                                  viewBox: "0 0 24 24",
-                                                  children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                                    "path",
-                                                    {
-                                                      strokeLinecap: "round",
-                                                      strokeLinejoin: "round",
-                                                      strokeWidth: 2,
-                                                      d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                                    }
-                                                  )
-                                                }
-                                              )
-                                            }
-                                          )
-                                        ]
-                                      },
-                                      el.siteFormDataFormSectionRowElementId || `${sectionIndex}-${rowIndex}-${elIndex}`
-                                    )
-                                  ) }) })
-                                ]
-                              },
-                              row.siteFormDataFormSectionRowId || `${sectionIndex}-${rowIndex}`
-                            )
-                          ) }) })
-                        ]
-                      },
-                      section.siteFormDataFormSectionId || sectionIndex
-                    )
-                  )
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "mt-8 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("h2", { className: "text-lg font-semibold text-gray-800 flex items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                  "svg",
-                  {
-                    className: "w-5 h-5 mr-2 text-gray-600",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M13 10V3L4 14h7v7l9-11h-7z"
-                      }
-                    )
-                  }
-                ),
-                "Form Actions"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                Button_default,
+                  className: "py-3 font-normal text-left",
+                  children: field.attributes?.label
+                },
+                field.name
+              );
+            }),
+            !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("th", { className: "py-3 font-normal text-left", children: "Actions" })
+          ] }, sectionRowIndex);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("tbody", { className: "divide-y divide-gray-200", children: childItemsToRender.map((visibleItem, filteredIndex) => {
+          const { item, originalIndex } = visibleItem;
+          const rowKey = originalIndex;
+          return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react55.default.Fragment, { children: section.sectionRows.map(
+            (sectionRow, sectionRowIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+                "tr",
                 {
-                  ButtonType: "Primary" /* Solid */,
-                  onClick: async () => {
-                    addAction();
-                    return {
-                      isSuccessful: true,
-                      message: "Action added successfully"
-                    };
-                  },
+                  className: "",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "svg",
+                    sectionRow.elements.map((field, index) => {
+                      return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-11/12", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                        InputControl_default,
+                        {
+                          index: filteredIndex,
+                          name: field.name,
+                          controlType: field.controlType,
+                          value: item[field.name],
+                          dataset: field.dataset,
+                          dataKeyFieldName: field.dataKeyFieldName,
+                          dataTextFieldName: field.dataTextFieldName,
+                          callback: handleChildInputChange,
+                          attributes: {
+                            ...field.attributes,
+                            label: ""
+                          },
+                          serviceClient: props.serviceClient,
+                          entityType: field.entityType
+                        }
+                      ) }) }) }, field.name);
+                    }),
+                    !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                      ClientButton_default,
                       {
-                        className: "w-4 h-4 mr-2",
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24",
+                        ButtonType: StyleTypes2.Hollow,
+                        onClick: () => {
+                          onDeleteRow(filteredIndex);
+                        },
+                        dataRole: "delete",
+                        tabIndex: -1,
                         children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                          "path",
+                          Icon_default,
                           {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: 2,
-                            d: "M12 4v16m8-8H4"
+                            className: "w-4 h-4",
+                            name: "delete"
                           }
                         )
                       }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Add Action" })
+                    ) })
                   ]
+                },
+                `${rowKey}_${sectionRowIndex}`
+              );
+            }
+          ) }, rowKey);
+        }) })
+      ] }) }),
+      !section.readonly && !isOneToOne && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        ClientButton_default,
+        {
+          ButtonType: "Link" /* Link */,
+          onClick: onAddRow,
+          dataRole: "add",
+          children: "Add new"
+        }
+      ) })
+    ] }) })
+  ] }) });
+};
+var DataFormChildSection_default = DataFormChildSection;
+
+// src/components/dataForm/DataForm.tsx
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var DataForm = (props) => {
+  const formRef = (0, import_react56.useRef)(null);
+  console.log(props.dataItem, "dssads");
+  const initialState = {
+    inputValues: {},
+    lastPropertyChanged: ""
+  };
+  const childInitialState = {
+    inputValues: []
+  };
+  const [formState, dispatch] = (0, import_react56.useReducer)(FormReducer_default, initialState);
+  console.log(props.sections, "sections");
+  const clearHiddenChildSections = (0, import_react56.useCallback)(
+    (changedProperty, newValues) => {
+      if (!props.sections) return;
+      const allChildSections = [];
+      props.sections.forEach((section) => {
+        if (section.childSections) {
+          section.childSections.forEach((childSection) => {
+            if (childSection.name) {
+              allChildSections.push({
+                name: childSection.name,
+                section: childSection
+              });
+            }
+          });
+        }
+      });
+      allChildSections.forEach(({ name, section }) => {
+        const wasVisible = evalutateCondition(
+          formState.inputValues,
+          section.visible
+        );
+        const isNowVisible = evalutateCondition(newValues, section.visible);
+        if (wasVisible && !isNowVisible) {
+          const currentValue = newValues[name];
+          if (currentValue && (Array.isArray(currentValue) && currentValue.length > 0 || typeof currentValue === "object" && Object.keys(currentValue).length > 0)) {
+            dispatch({
+              // @ts-ignore
+              type: "FORM_CHILD_CLEAR",
+              childName: name,
+              name,
+              value: section.relationshipType === "one-to-one" ? {} : []
+            });
+          }
+        }
+      });
+    },
+    [props.sections, formState.inputValues]
+  );
+  const handleInputChange = (0, import_react56.useCallback)(
+    async (updatedValues) => {
+      dispatch({
+        type: FORM_INPUT_UPDATE,
+        name: updatedValues.name,
+        value: updatedValues.value
+      });
+      const newInputValues = {
+        ...formState.inputValues,
+        [updatedValues.name]: updatedValues.value
+      };
+      clearHiddenChildSections(updatedValues.name, newInputValues);
+    },
+    [dispatch, formState.inputValues, clearHiddenChildSections]
+  );
+  const fetchData = (0, import_react56.useCallback)(async () => {
+    if (!props.rules) return;
+    if (Object.keys(formState.inputValues).length === 0) {
+      return;
+    }
+    console.log("on change called");
+    const changeRule = props.rules.onChangeRules?.find(
+      (x) => x.name === formState.lastPropertyChanged
+    );
+    if (!changeRule) return;
+    if (changeRule.triggerCondition && !evalutateCondition(formState.inputValues, changeRule.triggerCondition)) {
+      console.log("Trigger condition not met, skipping API call.");
+      return;
+    }
+    const url = replacePlaceholders(
+      changeRule.getApiEndpoint,
+      formState.inputValues,
+      props.params
+    );
+    try {
+      const response = await props.serviceClient.get(url);
+      dispatch({
+        type: FORM_INPUT_UPDATE,
+        name: "dnsRecords",
+        // @ts-ignore
+        value: response?.result?.dnsRecords
+      });
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  }, [formState.lastPropertyChanged, formState.inputValues]);
+  (0, import_react56.useEffect)(() => {
+    fetchData();
+  }, [formState.inputValues, formState.lastPropertyChanged]);
+  function replacePlaceholders(template, context, params) {
+    console.log("from replace:");
+    console.log(params);
+    console.log(template);
+    return template.replace(
+      /\{(context|params)\.([\w]+)\}/g,
+      (_, type, key) => {
+        if (type === "context" && context && key in context && context[key]) {
+          return String(context[key]);
+        }
+        if (type === "params" && params && key in params && params[key]) {
+          return String(params[key]);
+        }
+        return "";
+      }
+    );
+  }
+  const handleChildSectionChangeCallback = (0, import_react56.useCallback)(
+    (params) => {
+      dispatch({
+        type: params.actionType,
+        name: params.name,
+        value: params.value,
+        // @ts-ignore
+        childName: params.sectionName,
+        rowIndex: params.rowIndex
+      });
+    },
+    [dispatch]
+  );
+  const onValidate = async () => {
+    if (formRef.current && !formRef.current.checkValidity()) {
+      formRef.current.classList.add("validated");
+      return false;
+    } else {
+      return true;
+    }
+  };
+  function normalizeChildSections(values, isEdit, sections) {
+    if (!sections) return values;
+    const cloned = structuredClone(values);
+    sections.forEach((section) => {
+      section.childSections?.forEach((child) => {
+        const childName = child.name;
+        const relation = child.relationshipType;
+        const childValue = cloned[childName];
+        if (!childValue) return;
+        if (relation === "one-to-many" && Array.isArray(childValue)) {
+          cloned[childName] = childValue.filter((row) => {
+            if (isEdit) return true;
+            return !row.isDeleted;
+          });
+        }
+        if (relation === "one-to-one" && typeof childValue === "object") {
+          if (!isEdit && childValue.isDeleted) {
+            delete cloned[childName];
+          }
+        }
+      });
+    });
+    return cloned;
+  }
+  const onClick = (0, import_react56.useCallback)(async () => {
+    if (props.onClick) {
+      const isEdit = props.dataItem && Object.keys(props.dataItem).length > 0;
+      const normalizedValues = normalizeChildSections(
+        formState.inputValues,
+        !!isEdit,
+        props.sections
+      );
+      return await props.onClick({
+        ...formState,
+        inputValues: normalizedValues
+      });
+    } else {
+      return { isSuccessful: true };
+    }
+  }, [formState, props]);
+  const handleAdditionalOnClick = (0, import_react56.useCallback)(async () => {
+    if (props.additionalActions?.onClick) {
+      return await props.additionalActions.onClick(formState);
+    } else {
+      return { isSuccessful: true, message: "Action completed successfully" };
+    }
+  }, [formState, props]);
+  const onDelete = (0, import_react56.useCallback)(async () => {
+    if (props.onDelete) {
+      return await props.onDelete(formState);
+    } else {
+      return { isSuccessful: true };
+    }
+  }, [formState, props]);
+  (0, import_react56.useEffect)(() => {
+    if (props.dataItem) {
+      dispatch({
+        type: FORM_INITIAL_UPDATE,
+        values: props.dataItem,
+        name: "all"
+      });
+    }
+  }, [props.dataItem]);
+  function getNestedProperty2(obj, path) {
+    if (path.includes(".")) {
+      return path.split(".").reduce((prev, curr) => prev ? prev[curr] : null, obj);
+    } else {
+      return obj[path];
+    }
+  }
+  function evalutateCondition(context, expression) {
+    if (expression === null || expression === void 0) {
+      return true;
+    }
+    try {
+      const evaluator = new Function("context", `return ${expression};`);
+      return evaluator(context);
+    } catch (error) {
+      console.error("Error evaluating expression:", error);
+      return false;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react56.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-grow flex flex-col", children: [
+    props.title && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "inline-flex items-center gap-2 px-6 py-3 border border-neutral-200 bg-white shadow-sm rounded-t-md", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+      "div",
+      {
+        className: "inline-flex items-center gap-2 cursor-pointer",
+        onClick: () => window.history.back(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon_default, { name: "chevronLeft", className: "w-4 h-4 text-primary-800" }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("h2", { className: "text-lg font-semibold text-primary-800", children: props.title })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      "form",
+      {
+        className: "group space-y-6 pb-6 overflow-y-auto",
+        noValidate: true,
+        ref: formRef,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            const activeElement = document.activeElement;
+            console.log(activeElement);
+            if (activeElement.tagName === "INPUT") {
+              e.preventDefault();
+            }
+            if (activeElement.tagName === "BUTTON" && activeElement.dataset.role === "add") {
+              return;
+            }
+            if (activeElement.tagName === "BUTTON" && activeElement.dataset.role === "delete") {
+              e.preventDefault();
+            }
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "flex flex-col gap-6", children: props.sections?.map((section, sectionIndex) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react56.default.Fragment, { children: !section.isChildSection && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: " rounded-b-lg bg-white shadow border-neutral-200 border px-8 py-6 ", children: [
+            section.sectionRows?.map(
+              (sectionRow, sectionRowIndex) => {
+                const elementsCount = sectionRow.elements.length;
+                let isVisible = true;
+                if (sectionRow.visible) {
+                  isVisible = evalutateCondition(
+                    formState.inputValues,
+                    sectionRow.visible
+                  );
                 }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "p-6 space-y-4", children: actions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "text-center py-8", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                "svg",
-                {
-                  className: "mx-auto h-12 w-12 text-gray-400",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    "path",
+                return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react56.default.Fragment, { children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "lg:flex gap-14 flex-1 mb-4 ", children: sectionRow.elements.map((field, index) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                    "div",
                     {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M13 10V3L4 14h7v7l9-11h-7z"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "mt-2 text-sm text-gray-900", children: "No actions" }),
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by adding actions." }),
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "mt-6", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                Button_default,
-                {
-                  ButtonType: "Primary" /* Solid */,
-                  onClick: async () => {
-                    addAction();
-                    return {
-                      isSuccessful: true,
-                      message: "Action added successfully"
-                    };
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "svg",
-                      {
-                        className: "w-4 h-4 mr-2",
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: 2,
-                            d: "M12 4v16m8-8H4"
-                          }
-                        )
-                      }
-                    ),
-                    "Add an action"
-                  ]
-                }
-              ) })
-            ] }) : actions.map(
-              (action, index) => !action.isDeleted && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-                "div",
-                {
-                  className: "border border-gray-200 rounded-lg overflow-hidden",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "p-4 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex items-center justify-between", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "text-sm font-medium text-gray-700", children: action.actionTitle || "New Action" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                        Button_default,
-                        {
-                          ButtonType: "Primary" /* Solid */,
-                          onClick: async () => {
-                            deleteAction(index);
-                            return {
-                              isSuccessful: true,
-                              message: "Action deleted successfully"
-                            };
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                            "svg",
-                            {
-                              className: "w-4 h-4",
-                              fill: "none",
-                              stroke: "currentColor",
-                              viewBox: "0 0 24 24",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                                "path",
-                                {
-                                  strokeLinecap: "round",
-                                  strokeLinejoin: "round",
-                                  strokeWidth: 2,
-                                  d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                }
-                              )
-                            }
-                          )
-                        }
-                      )
-                    ] }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                        InputControl_default,
-                        {
-                          name: "actionCode",
-                          controlType: InputControlType_default.select,
-                          value: action.actionCode || "",
-                          dataset: actionCode,
-                          dataKeyFieldName: "value",
-                          dataTextFieldName: "label",
-                          callback: ({ name, value }) => {
-                            updateActionField(
-                              index,
-                              "actionCode",
-                              value
-                            );
-                          },
-                          attributes: {
-                            required: true,
-                            label: "ActionCode"
-                          }
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                        InputControl_default,
-                        {
-                          controlType: InputControlType_default.lineTextInput,
-                          name: "action.actionTitle",
-                          value: action.actionTitle || "",
-                          callback: ({ value }) => {
-                            updateActionField(
-                              index,
-                              "actionTitle",
-                              value
-                            );
-                          },
-                          attributes: {
-                            label: "ActionTitle",
-                            placeholder: "actionTitle"
-                          }
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                      className: sectionRow.grow ? "grow" : "",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                         InputControl_default,
                         {
-                          controlType: InputControlType_default.lineTextInput,
-                          name: "action.serviceRoute",
-                          value: action.serviceRoute,
-                          callback: ({ value }) => {
-                            updateActionField(
-                              index,
-                              "serviceRoute",
-                              value
-                            );
-                          },
-                          attributes: {
-                            label: "ServiceRoute",
-                            placeholder: "/api/endpoint"
-                          }
-                        }
-                      ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                        InputControl_default,
-                        {
-                          name: "httpMethod",
-                          controlType: InputControlType_default.select,
-                          value: action.httpMethod || "post",
-                          dataset: httpMethods,
-                          dataKeyFieldName: "value",
-                          dataTextFieldName: "label",
-                          callback: ({ name, value }) => {
-                            updateActionField(
-                              index,
-                              "httpMethod",
-                              value
-                            );
-                          },
-                          attributes: {
-                            label: "HTTP Method",
-                            required: true
-                          }
+                          name: field.name,
+                          controlType: field.controlType,
+                          value: getNestedProperty2(
+                            formState.inputValues,
+                            field.name
+                          ),
+                          callback: handleInputChange,
+                          dataSourceDependsOn: field.dataSourceDependsOn,
+                          dependentValue: field.dataSourceDependsOn ? formState.inputValues[field.dataSourceDependsOn] : "",
+                          dataSource: field.dataSource,
+                          dataset: field.dataset,
+                          dataKeyFieldName: field.dataKeyFieldName,
+                          dataTextFieldName: field.dataTextFieldName,
+                          attributes: field.attributes,
+                          serviceClient: props.serviceClient,
+                          assetsUploadPath: props.dataItem ? props.dataItem["assetsUploadPath"] : null,
+                          entityType: field.entityType,
+                          uploadInSharedLocation: field.uploadInSharedLocation
                         }
-                      ) })
-                    ] }) })
-                  ]
-                },
-                action.siteFormDataFormActionId || index
-              )
-            ) })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "mt-8 flex justify-end space-x-4 border-t pt-6", children: [
-          isEditMode && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-            Button_default,
-            {
-              ButtonType: "PrimaryHollow" /* Hollow */,
-              showToast: true,
-              onClick: async () => {
-                const response = await onDelete();
-                return {
-                  isSuccessful: response.isSuccessful,
-                  message: response.isSuccessful ? "Form deleted successfully!" : "Failed to delete form"
-                };
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                  "svg",
-                  {
-                    className: "w-4 h-4 mr-2",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Delete Form" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-            Button_default,
-            {
-              ButtonType: "Primary" /* Solid */,
-              showToast: true,
-              onClick: async () => {
-                const response = await onSave();
-                return {
-                  isSuccessful: response.isSuccessful,
-                  message: response.isSuccessful ? isEditMode ? "Form updated successfully!" : "Form created successfully!" : "Failed to save form"
-                };
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                  "svg",
+                      )
+                    },
+                    field.name
+                  );
+                }) }) }, sectionRowIndex);
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { children: section.childSections?.map(
+              (childSection, childSectionIndex) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { children: childSection.name && evalutateCondition(
+                  formState.inputValues,
+                  childSection.visible
+                ) && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                  DataFormChildSection_default,
                   {
-                    className: "w-5 h-5 mr-2",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
-                      }
-                    )
+                    section: childSection,
+                    childItems: formState.inputValues[childSection.name],
+                    callback: handleChildSectionChangeCallback,
+                    serviceClient: props.serviceClient
                   }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: loadingApps ? "Loading..." : isEditMode ? "Update Layout" : "Create Layout" })
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "w-96 bg-white border-l border-gray-200 overflow-y-auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "sticky top-0 bg-white border-b border-gray-200 px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("h2", { className: "text-lg font-semibold text-gray-800 flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-          "svg",
-          {
-            className: "w-5 h-5 mr-2 text-gray-600",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+                ) }, childSectionIndex);
               }
-            )
-          }
-        ),
-        "Properties"
-      ] }) }),
-      renderSidebarContent()
+            ) })
+          ] }) }, sectionIndex);
+        }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex px-6 py-3 mt-2 mb-2 justify-end  items-center gap-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { children: props.additionalActions && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        Button_default,
+        {
+          ButtonType: "PrimaryHollow" /* Hollow */,
+          onClick: handleAdditionalOnClick,
+          children: props.additionalActions.title
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { children: props.onDelete && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        Button_default,
+        {
+          ButtonType: "PrimaryHollow" /* Hollow */,
+          onClick: onDelete,
+          showToast: true,
+          confirm: true,
+          confirmationMessage: "Are you sure you want to delete this record?",
+          children: "Delete"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { children: props.onClick && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        Button_default,
+        {
+          onValidate,
+          onClick,
+          showToast: true,
+          ButtonType: "Primary" /* Solid */,
+          className: "py-2 leading-6",
+          children: props.buttonText ? `${props.buttonText}` : "Save Changes"
+        }
+      ) })
     ] })
   ] }) });
-}
+};
 var DataForm_default = DataForm;
 
 // src/components/dataForm/DataFormRenderer.tsx
 init_ServiceClient();
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 function getAction(actions, code) {
   return actions?.find((a) => a.actionCode === code);
 }
@@ -7875,9 +6636,9 @@ var DataFormRenderer = ({
     "Delete"
   );
   const hasDataItem = dataItem && Object.keys(dataItem).length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex-grow flex flex-col", children: [
-    widgetProps && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(NavigationTabsV2_default, { tabs, params: widgetProps.params }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex-grow flex flex-col", children: [
+    widgetProps && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(NavigationTabsV2_default, { tabs, params: widgetProps.params }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       DataForm_default,
       {
         title: !isAddPage ? "Edit " + formDefinition.formTitle + "- v2" : "Add " + formDefinition.formTitle + "- v2",