impaktapps-ui-builder 0.0.412-mtreemap.9 → 0.0.591

package/dist/impaktapps-ui-builder.es.js

@@ -54,9 +54,9 @@ const PageMasterUiSchema = (theme) => {
         config: {
           main: {},
           wrapperStyle: {
+            marginLeft: theme.spacing(2),
             backgroundColor: theme.palette.background.default
-          },
-          defaultStyle: true
+          }
         },
         elements: [
           {
@@ -188,6 +188,9 @@ const PageMasterUiSchema = (theme) => {
                       color: "primary",
                       onClick: "Edit_Components",
                       tooltipMessage: "Edit This Record"
+                    },
+                    style: {
+                      color: theme.palette.primary.main
                     }
                   }
                 }
@@ -206,7 +209,7 @@ const PageMasterUiSchema = (theme) => {
                     main: {
                       icon: "RejectIcon",
                       color: "error",
-                      onClick: "Delete_Components",
+                      onClick: "deletePopUpComponent",
                       tooltipMessage: "Reject This Record"
                     }
                   }
@@ -279,7 +282,7 @@ const PageMasterUiSchema = (theme) => {
                       onClick: "editEvent"
                     },
                     style: {
-                      color: "#3949ab"
+                      color: theme.palette.primary.main
                     }
                   }
                 }
@@ -298,7 +301,7 @@ const PageMasterUiSchema = (theme) => {
                       icon: "RejectIcon",
                       color: "error",
                       tooltipMessage: "Reject This Record",
-                      onClick: "deleteEvent"
+                      onClick: "deletePopUpEvent"
                     }
                   }
                 }
@@ -314,7 +317,7 @@ const PageMasterUiSchema = (theme) => {
           widget: "EmptyBox"
         },
         config: {
-          layout: { xs: 0, sm: 0, md: 8, lg: 7 }
+          layout: { xs: 0, sm: 8, md: 8, lg: 8 }
         }
       },
       {
@@ -339,6 +342,188 @@ const PageMasterUiSchema = (theme) => {
           }
         }
       },
+      {
+        type: "Control",
+        scope: "#/properties/popUpPageMasterComponent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 6,
+            lg: 6
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "Delete_Components",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpComponent",
+                size: "small"
+              }
+            }
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/popUpPageMasterEvent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 6,
+            lg: 6
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deleteEvent",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "error",
+                type: "text",
+                onClick: "deletePopUpEvent",
+                size: "small"
+              }
+            }
+          }
+        ]
+      },
       {
         type: "Control",
         scope: "#/properties/notify",
@@ -5933,8 +6118,6 @@ const ComponentSchema = {
         { title: "Text Area", const: "TextArea" },
         { title: "Timer", const: "Timer" },
         { title: "Upload File", const: "UploadFile" },
-        { title: "Timer", const: "Timer" },
-        { title: "Upload File", const: "UploadFile" },
         { title: "TreeMap", const: "TreeMap" },
         { title: "ColumnGroup", const: "ColumnGroup" }
       ]
@@ -6204,6 +6387,25 @@ const componentBasicUiSchema = (theme) => {
     type: "HorizontalLayout",
     heading: "Component",
     elements: [
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+        options: {
+          widget: "Box"
+        },
+        config: {
+          layout: 12,
+          main: {
+            heading: " "
+          },
+          style: {
+            marginLeft: theme.spacing(3),
+            width: "auto",
+            fontSize: "12px",
+            color: "gray"
+          }
+        }
+      },
       {
         type: "TabLayout",
         config: {
@@ -6350,6 +6552,188 @@ const componentBasicUiSchema = (theme) => {
           }
         ]
       },
+      {
+        type: "Control",
+        scope: "#/properties/popUpComponentSection",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "error",
+                type: "text",
+                onClick: "deleteComponents",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteCompButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpComponent",
+                size: "small"
+              }
+            }
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/popUpEventSection",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deleteEvent",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpEvent",
+                size: "small"
+              }
+            }
+          }
+        ]
+      },
       {
         type: "Control",
         scope: "#/properties/EmptyBox",
@@ -6592,6 +6976,16 @@ const CoreSection = {
         widget: "EmptyBox"
       }
     },
+    {
+      type: "Control",
+      scope: "#/properties/proc",
+      config: {
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
     {
       type: "Control",
       scope: "#/properties/layout",
@@ -6646,113 +7040,117 @@ const CoreSection = {
     }
   ]
 };
-const EventSection = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "Control",
-      scope: "#/properties/events",
-      options: {
-        widget: "Table"
-      },
-      config: {
-        main: {
-          headerIcons: {
-            elements: [
-              {
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/New_Record",
-                  options: {
-                    widget: "IconButton"
-                  },
-                  config: {
-                    main: {
-                      color: "info",
-                      onClick: "eventAddHandler",
-                      size: "small",
-                      icon: "AddIcon",
-                      iconLabel: "Add New",
-                      styleDefault: true
+const EventSection = (theme) => {
+  const uiSchema = {
+    type: "HorizontalLayout",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/events",
+        options: {
+          widget: "Table"
+        },
+        config: {
+          main: {
+            headerIcons: {
+              elements: [
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/New_Record",
+                    options: {
+                      widget: "IconButton"
                     },
-                    style: {
-                      mt: "6px"
+                    config: {
+                      main: {
+                        color: "info",
+                        onClick: "eventAddHandler",
+                        size: "small",
+                        icon: "AddIcon",
+                        iconLabel: "Add New",
+                        styleDefault: true
+                      },
+                      style: {
+                        mt: "6px"
+                      }
                     }
                   }
                 }
-              }
-            ]
-          },
-          disableAction: true,
-          disableSelection: true,
-          enableDrag: true
-        }
-      },
-      elements: [
-        {
-          accessorKey: "eventType",
-          header: "Event Type"
-        },
-        {
-          accessorKey: "Handler",
-          header: "Handler"
-        },
-        {
-          accessorKey: "Edit_Approve_Records",
-          header: "Edit Widget",
-          widget: {
-            type: "Control",
-            scope: "#/properties/Edit_Records",
-            options: {
-              widget: "IconButton"
+              ]
             },
-            config: {
-              main: {
-                color: "info",
-                size: "small",
-                icon: "EditIcon",
-                tooltipMessage: "Edit This Record",
-                onClick: "eventEditHandler"
+            disableAction: true,
+            disableSelection: true,
+            enableDrag: true
+          }
+        },
+        elements: [
+          {
+            accessorKey: "eventType",
+            header: "Event Type"
+          },
+          {
+            accessorKey: "Handler",
+            header: "Handler"
+          },
+          {
+            accessorKey: "Edit_Approve_Records",
+            header: "Edit Widget",
+            widget: {
+              type: "Control",
+              scope: "#/properties/Edit_Records",
+              options: {
+                widget: "IconButton"
               },
-              style: {
-                color: "#3949ab"
+              config: {
+                main: {
+                  color: "info",
+                  size: "small",
+                  icon: "EditIcon",
+                  tooltipMessage: "Edit This Record",
+                  onClick: "eventEditHandler"
+                },
+                style: {
+                  color: theme.palette.primary.main
+                }
               }
             }
-          }
-        },
-        {
-          accessorKey: "Reject_Records",
-          header: "Delete",
-          widget: {
-            type: "Control",
-            scope: "#/properties/RejectButton",
-            accessorKeyName: "Reject_Records",
-            options: {
-              widget: "IconButton"
-            },
-            config: {
-              main: {
-                icon: "RejectIcon",
-                color: "error",
-                tooltipMessage: "Reject This Record",
-                onClick: "deleteEvent"
+          },
+          {
+            accessorKey: "Reject_Records",
+            header: "Delete",
+            widget: {
+              type: "Control",
+              scope: "#/properties/RejectButton",
+              accessorKeyName: "Reject_Records",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "RejectIcon",
+                  color: "error",
+                  tooltipMessage: "Reject This Record",
+                  onClick: "deletePopUpEvent"
+                }
               }
             }
           }
-        }
-      ]
-    }
-  ]
+        ]
+      }
+    ]
+  };
+  return uiSchema;
 };
-const EmptyBox = {
+var emptyBox = {
   type: "Control",
-  scope: `#/properties/empty`,
+  scope: "#/properties/emptyBox",
   options: {
     widget: "EmptyBox"
   },
   config: {
     layout: { xs: 0, sm: 4, md: 4, lg: 4 },
-    main: {}
+    main: {},
+    style: {}
   }
 };
 const cardLayout = {
@@ -6792,7 +7190,7 @@ const cardLayout = {
             }
           }
         },
-        EmptyBox
+        emptyBox
       ]
     }
   }
@@ -6801,7 +7199,7 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 11.5,
+    layout: 12,
     options: {
       "elementLabelProp": childScope,
       detail: {
@@ -6820,7 +7218,8 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
               }
             }
           },
-          EmptyBox
+          emptyBox,
+          emptyBox
         ]
       }
     }
@@ -6840,6 +7239,7 @@ sizeHolder.options.detail.elements[1] = {
     }
   }
 };
+sizeHolder.options.detail.elements[2] = emptyBox;
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -6871,6 +7271,26 @@ const getRadioInputField = (scope, label, options) => {
     }
   };
 };
+const buildWrapper = (label, elements) => {
+  return {
+    type: "WrapperLayout",
+    config: {
+      main: {
+        label: label || "Details",
+        isAccordion: true
+      },
+      wrapperStyle: {
+        marginTop: "-6px",
+        marginBottom: "-8px"
+      },
+      componentsBoxStyle: {
+        marginLeft: "24px"
+      },
+      defaultStyle: true
+    },
+    elements: elements || []
+  };
+};
 const getTextArea = (scope, heading, hideButton, layout) => {
   return {
     type: "Control",
@@ -6927,7 +7347,8 @@ const buildPropertiesSection = function(type) {
         getInputField("linkType", "linkType"),
         getInputField("graphHeight", "Graph Height"),
         getInputField("graphWidth", "Graph Width"),
-        getInputField("graphZoomHeight", "Zoom Height")
+        getInputField("graphZoomHeight", "Zoom Height"),
+        emptyBox
       ];
       break;
     case "InputSlider":
@@ -6935,7 +7356,9 @@ const buildPropertiesSection = function(type) {
         getInputField("max", "Max Limit"),
         getInputField("step", "Step"),
         getInputField("min", "Min Limit"),
-        getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"])
+        getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"]),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "DataGrid":
@@ -6944,8 +7367,8 @@ const buildPropertiesSection = function(type) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
-        EmptyBox,
-        EmptyBox,
+        emptyBox,
+        emptyBox,
         cardLayout
       ];
       break;
@@ -6956,6 +7379,7 @@ const buildPropertiesSection = function(type) {
         getInputField("resetText", "Reset Text"),
         getInputField("completeText", "Complete Text"),
         getSelectField("orientation", "Orientation Type"),
+        emptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -6969,14 +7393,16 @@ const buildPropertiesSection = function(type) {
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,
+        emptyBox,
+        emptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
     case "SpeedoMeter":
@@ -6985,7 +7411,8 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Container Heading"),
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
-        getInputField("width", "Speedometer Width")
+        getInputField("width", "Speedometer Width"),
+        emptyBox
       ];
       break;
     case "RankCard":
@@ -6993,7 +7420,9 @@ const buildPropertiesSection = function(type) {
         getInputField("rank", "Rank"),
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
-        getInputField("description", "Card Description")
+        getInputField("description", "Card Description"),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "LeaderBoard":
@@ -7002,6 +7431,8 @@ const buildPropertiesSection = function(type) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
+        emptyBox,
+        emptyBox,
         getTextArea("functionCode", "Write Compare Code", false)
       ];
       break;
@@ -7017,7 +7448,9 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Heading"),
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
-        getInputField("bottomLabel_3", "Third BottomLabel")
+        getInputField("bottomLabel_3", "Third BottomLabel"),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "card":
@@ -7025,7 +7458,7 @@ const buildPropertiesSection = function(type) {
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Button":
@@ -7035,7 +7468,7 @@ const buildPropertiesSection = function(type) {
         getSelectField("color", "Color"),
         getInputField("tooltipMessage", "Tooltip Message"),
         getSelectField("defaultStyle", "Default Style"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Graph":
@@ -7048,6 +7481,7 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
+        emptyBox,
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color")
       ];
@@ -7057,13 +7491,16 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("divider", "Divider", ["YES", "No"]),
         getRadioInputField("isAccordion", "Accordion", ["YES", "No"]),
         getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
-        getInputField("rowSpacing", "Row Spacing")
+        getInputField("rowSpacing", "Row Spacing"),
+        emptyBox,
+        emptyBox
       ];
       break;
     case "TabSection":
       uiSchema.elements = [
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
+        emptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -7071,11 +7508,20 @@ const buildPropertiesSection = function(type) {
     case "LazyLoadingTable":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        getRadioInputField("SelectionAvailable", "Selection Available", ["YES", "NO"]),
-        getRadioInputField("ColumnResizingAvailable", "ColumnResizing Available", ["YES", "NO"]),
-        getRadioInputField("DragAvailable", "Drag Available", ["YES", "NO"]),
+        getRadioInputField("SelectionAvailable", "Row Selection", ["YES", "NO"]),
+        getRadioInputField("ColumnResizingAvailable", "ColumnResizing ", ["YES", "NO"]),
+        getRadioInputField("DragAvailable", "Row Dragging", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
         getInputField("selectKey", "Selection Key"),
+        emptyBox,
+        buildWrapper("Tree Table Properties", [
+          getRadioInputField("enableRowMovement", "Row Rearrangement", ["YES", "NO"]),
+          getRadioInputField("enableExpanding", "Row Expanding", ["YES", "NO"]),
+          getRadioInputField("paginateExpandedRows", "Multi Page Expansion", ["YES", "NO"]),
+          getRadioInputField("treeStructure", "Flat Tree Structure", ["YES", "NO"]),
+          emptyBox,
+          emptyBox
+        ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
         sizeHolder
       ];
@@ -7088,13 +7534,15 @@ const buildPropertiesSection = function(type) {
     case "Select":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"])
+        getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
+        emptyBox
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
   }
@@ -7135,100 +7583,106 @@ const StyleSection = {
     }
   ]
 };
-const TableSection = {
-  type: "HorizontalLayout",
-  elements: [
-    {
-      type: "Control",
-      scope: "#/properties/elements",
-      options: {
-        widget: "Table"
-      },
-      config: {
-        main: {
-          headerIcons: {
-            elements: [
-              {
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/New_Record",
-                  options: {
-                    widget: "IconButton"
-                  },
-                  config: {
-                    main: {
-                      color: "info",
-                      onClick: "widgetAddClickHandler",
-                      size: "small",
-                      icon: "AddIcon",
-                      iconLabel: "Add New",
-                      styleDefault: true
+const TableSection = (theme) => {
+  const uiSchema = {
+    type: "HorizontalLayout",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/elements",
+        options: {
+          widget: "Table"
+        },
+        config: {
+          main: {
+            headerIcons: {
+              elements: [
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/New_Record",
+                    options: {
+                      widget: "IconButton"
                     },
-                    style: {
-                      mt: "6px"
+                    config: {
+                      main: {
+                        color: "info",
+                        onClick: "widgetAddClickHandler",
+                        size: "small",
+                        icon: "AddIcon",
+                        iconLabel: "Add New",
+                        styleDefault: true
+                      },
+                      style: {
+                        mt: "6px"
+                      }
                     }
                   }
                 }
-              }
-            ]
-          },
-          disableAction: true,
-          disableSelection: true,
-          enableDrag: true
-        }
-      },
-      elements: [
-        {
-          accessorKey: "name",
-          header: "Name"
-        },
-        {
-          accessorKey: "type",
-          header: "Type"
-        },
-        {
-          header: "Edit Record",
-          field: "Reject_Records",
-          flex: 1,
-          widget: {
-            type: "Control",
-            scope: "#/properties/RejectButton",
-            options: {
-              widget: "IconButton"
+              ]
             },
-            config: {
-              main: {
-                icon: "EditIcon",
-                color: "primary",
-                onClick: "editComponents",
-                tooltipMessage: "Reject This Record"
-              }
-            }
+            disableAction: true,
+            disableSelection: true,
+            enableDrag: true
           }
         },
-        {
-          header: "Delete",
-          field: "Reject_Records",
-          flex: 1,
-          widget: {
-            type: "Control",
-            scope: "#/properties/RejectButton",
-            options: {
-              widget: "IconButton"
-            },
-            config: {
-              main: {
-                icon: "RejectIcon",
-                color: "error",
-                onClick: "deleteComponent",
-                tooltipMessage: "Reject This Record"
+        elements: [
+          {
+            accessorKey: "name",
+            header: "Name"
+          },
+          {
+            accessorKey: "type",
+            header: "Type"
+          },
+          {
+            header: "Edit Record",
+            field: "Reject_Records",
+            flex: 1,
+            widget: {
+              type: "Control",
+              scope: "#/properties/RejectButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "EditIcon",
+                  color: "primary",
+                  onClick: "editComponents",
+                  tooltipMessage: "Reject This Record"
+                },
+                style: {
+                  color: theme.palette.primary.main
+                }
+              }
+            }
+          },
+          {
+            header: "Delete",
+            field: "Reject_Records",
+            flex: 1,
+            widget: {
+              type: "Control",
+              scope: "#/properties/RejectButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                main: {
+                  icon: "RejectIcon",
+                  color: "error",
+                  onClick: "deletePopUpComponent",
+                  tooltipMessage: "Reject This Record"
+                }
               }
             }
           }
-        }
-      ]
-    }
-  ]
+        ]
+      }
+    ]
+  };
+  return uiSchema;
 };
 const ValueTab = {
   type: "HorizontalLayout",
@@ -7362,10 +7816,10 @@ var buildConfig = (FormData) => {
 const createLayoutFormat = (config) => {
   if (_.isEmpty(config)) {
     return {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
     };
   }
   let data = {};
@@ -7374,7 +7828,7 @@ const createLayoutFormat = (config) => {
   });
   return data;
 };
-const flatObjectValueInArray = (config) => {
+const flatObjectValueInArray = (config = []) => {
   if (config[0].length < 1) {
     return;
   }
@@ -7468,7 +7922,6 @@ const navigateHandler = (store2, isSubmitted, pageName) => {
 function okHandler(store2) {
   var _a;
   const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-  console.log(store2.ctx.core.errors);
   if (_.isEmpty(store2.ctx.core.errors)) {
     saveFormdataInLocalStorage(store2.ctx.core.data, path);
     store2.navigate(-1);
@@ -7523,14 +7976,14 @@ const refreshPage = (type, store2) => {
       Core: CoreSection,
       Value: ValueTab,
       Style: StyleSection,
-      Event: EventSection,
-      Components: TableSection,
+      Event: EventSection(store2.theme.myTheme),
+      Components: TableSection(store2.theme.myTheme),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     };
     const elements = (_a = sectionLabels[type]) == null ? void 0 : _a.map((e) => sectionUiSchema[e]);
-    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
-    UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
+    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection(store2.theme.myTheme), ValidationSection];
   }
   store2.setUiSchema(UiSchema);
 };
@@ -7576,22 +8029,30 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
         store2.navigate(`/Component?path=${`elements[${rowId}]`}&id=${id}`);
       }
     },
-    deleteComponents: function() {
+    deleteComponents: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.elements.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const data = path ? _.get(response, path) : response;
       store2.setFormdata(data);
+      if (shouldUpdateDialog) {
+        store2.updateDialog("popUpComponentSection");
+      }
+      localStorage.removeItem("rowId");
     },
-    deleteEvent: function() {
+    deleteEvent: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       store2.setFormdata(_.get(response, path));
+      if (shouldUpdateDialog) {
+        store2.updateDialog("popUpEventSection");
+      }
+      localStorage.removeItem("rowId");
     },
     widgetAddClickHandler: function() {
       var _a;
@@ -7627,6 +8088,16 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     backHandler: function() {
       store2.navigate(-1);
+    },
+    deletePopUpComponent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpComponentSection");
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpEventSection");
     }
   };
 };
@@ -7681,7 +8152,10 @@ var pageMaster = (funcParams) => {
     },
     saveHandler: async () => await saveHandler(store2, service2, submitHandler),
     Edit_Components: Component(store2, dynamicData2, submitHandler, service2).editComponents,
-    Delete_Components: Component(store2, dynamicData2, submitHandler, service2).deleteComponents,
+    Delete_Components: async function() {
+      await Component(store2, dynamicData2, submitHandler, service2).deleteComponents(false);
+      store2.updateDialog("popUpPageMasterComponent");
+    },
     eventAddHandler: function() {
       var _a;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
@@ -7701,10 +8175,22 @@ var pageMaster = (funcParams) => {
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
     deleteEvent: function() {
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
       const response = saveFormdataInLocalStorage(store2.ctx.core.data);
       store2.setFormdata(response);
+      store2.updateDialog("popUpPageMasterEvent");
+      localStorage.removeItem("rowId");
+    },
+    deletePopUpComponent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpPageMasterComponent");
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpPageMasterEvent");
     }
   };
 };
@@ -7758,6 +8244,7 @@ const EventSchema = {
         { title: "File Upload Event", const: "onUpload" },
         { title: "Back Event", const: "onBack" },
         { title: "Next Event", const: "onNext" },
+        { title: "onRowMovement", const: "onRowMovement" },
         { title: "File Download Event", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
@@ -7802,6 +8289,25 @@ const EventUiSchema = (theme) => {
     type: "HorizontalLayout",
     heading: "Component",
     elements: [
+      {
+        type: "Control",
+        scope: "#/properties/pageName",
+        options: {
+          widget: "Box"
+        },
+        config: {
+          layout: 12,
+          main: {
+            heading: " "
+          },
+          style: {
+            marginLeft: theme.spacing(3),
+            width: "auto",
+            fontSize: "12px",
+            color: "gray"
+          }
+        }
+      },
       {
         type: "TabLayout",
         config: {
@@ -7907,7 +8413,7 @@ const EventUiSchema = (theme) => {
                       onClick: "editEvent"
                     },
                     style: {
-                      color: "#3949ab"
+                      color: theme.palette.primary.main
                     }
                   }
                 }
@@ -7926,7 +8432,7 @@ const EventUiSchema = (theme) => {
                       icon: "RejectIcon",
                       color: "error",
                       tooltipMessage: "Reject This Record",
-                      onClick: "deleteEvent"
+                      onClick: "deletePopUpEvent"
                     }
                   }
                 }
@@ -7997,6 +8503,100 @@ const EventUiSchema = (theme) => {
           }
         }
       },
+      {
+        type: "Control",
+        scope: "#/properties/popUpEvent",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 6,
+            lg: 6
+          },
+          main: {},
+          style: {
+            "& .MuiPaper-root": {
+              width: "30%"
+            },
+            "& .MuiTypography-root": {
+              padding: 0
+            },
+            wrapperStyle: {
+              width: { xs: "100%", sm: "100%", md: "98%" }
+            }
+          }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/label",
+            options: {
+              widget: "Box"
+            },
+            config: {
+              layout: 12,
+              main: {
+                heading: "Are you sure you want to delete ?"
+              },
+              style: {
+                marginTop: "-40px"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              main: {},
+              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/ConfirmDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "Yes",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "error",
+                type: "text",
+                onClick: "deleteEvent",
+                size: "small"
+              }
+            }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/CancelDeleteEventButton",
+            options: {
+              widget: "Button"
+            },
+            config: {
+              layout: 3,
+              main: {
+                name: "No",
+                startIcon: "ApproveIcon",
+                variant: "contained",
+                color: "info",
+                type: "text",
+                onClick: "deletePopUpEvent",
+                size: "small"
+              }
+            }
+          }
+        ]
+      },
       {
         type: "Control",
         scope: "#/properties/notify",
@@ -8317,18 +8917,6 @@ const refreshSectionUiSchema = {
     }
   ]
 };
-var emptyBox = {
-  type: "Control",
-  scope: "#/properties/emptyBox",
-  options: {
-    widget: "EmptyBox"
-  },
-  config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
-    main: {},
-    style: {}
-  }
-};
 var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
   return {
     setPage: async function() {
@@ -8343,20 +8931,20 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       const schema2 = _.cloneDeep(EventSchema);
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[0].elements[0].elements[2] = getRadioInputField("isSync", "Run in Sync", ["Yes", "No"]);
-          uiSchema.elements[0].elements[0].elements[3] = getTextArea("eventCode", "Write Custom Code", false);
+          uiSchema.elements[1].elements[0].elements[2] = getRadioInputField("isSync", "Run in Sync", ["Yes", "No"]);
+          uiSchema.elements[1].elements[0].elements[3] = getTextArea("eventCode", "Write Custom Code", false);
           schema2.required = ["eventType", "Handler", "eventCode"];
         } else if (handlerType === "api") {
-          uiSchema.elements[0].elements[0].elements[2] = emptyBox;
-          uiSchema.elements[0].elements[0].elements[3] = APISection;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = APISection;
           schema2.required = ["eventType", "Handler", "method", "path"];
         } else if (handlerType === "inBuiltFunction") {
-          uiSchema.elements[0].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
-          uiSchema.elements[0].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
+          uiSchema.elements[1].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
+          uiSchema.elements[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
           schema2.required = ["eventType", "Handler", "inBuiltFunctionType"];
         } else if (handlerType === "refresh") {
-          uiSchema.elements[0].elements[0].elements[2] = emptyBox;
-          uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
+          uiSchema.elements[1].elements[0].elements[2] = emptyBox;
+          uiSchema.elements[1].elements[0].elements[3] = refreshSectionUiSchema;
           schema2.properties.refreshElements.required = ["value"];
           schema2.properties.refreshElements.items.required = ["value"];
           schema2.required = ["eventType", "Handler", "refreshElements"];
@@ -8408,9 +8996,17 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
-    deleteEvent: Component(store2, dynamicData2, submitHandler, service2).deleteEvent,
+    deleteEvent: async function() {
+      await Component(store2, dynamicData2, submitHandler, service2).deleteEvent(false);
+      store2.updateDialog("popUpEvent");
+    },
     backHandler: function() {
       store2.navigate(-1);
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpEvent");
     }
   };
 };
@@ -8532,7 +9128,6 @@ function getRefreshElements(eventConfig, eventGropus) {
       result.push(result[0]);
     }
   }
-  console.log(result);
   return result;
 }
 async function executeRefreshHandler(params2) {
@@ -8583,16 +9178,15 @@ function executeCustomHandler(params) {
   }
 }
 function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2, formDataHolder2) {
-  var _a;
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
     store2.setSchema((pre) => {
-      var _a2;
+      var _a;
       return {
         ...pre,
         properties: {
           ...pre.properties,
           [componentName]: {
-            ...(_a2 = pre.properties) == null ? void 0 : _a2[componentName],
+            ...(_a = pre.properties) == null ? void 0 : _a[componentName],
             oneOf: handlerResponse.data
           }
         }
@@ -8600,13 +9194,13 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
     });
   } else if (eventConfig.type === "MultipleSelect" && !(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
     store2.setSchema((pre) => {
-      var _a2;
+      var _a;
       return {
         ...pre,
         properties: {
           ...pre.properties,
           [componentName]: {
-            ...(_a2 = pre.properties) == null ? void 0 : _a2[componentName],
+            ...(_a = pre.properties) == null ? void 0 : _a[componentName],
             type: "array",
             items: {
               oneOf: handlerResponse == null ? void 0 : handlerResponse.data
@@ -8627,24 +9221,32 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
     }
   } else {
     if (handlerResponse) {
-      formDataHolder2[componentName] = eventConfig.lazyLoading ? (_a = handlerResponse == null ? void 0 : handlerResponse.data) == null ? void 0 : _a.data : handlerResponse.data;
+      formDataHolder2[componentName] = handlerResponse.data;
       store2.setFormdata((pre) => {
         return { ...pre, ...formDataHolder2 };
       });
     }
   }
 }
-const buildBodyFormat = (body2, formData, userValue2) => {
+const buildBodyFormat = (body2, formData, userValue2, store2) => {
   let finalBody = { ...userValue2 == null ? void 0 : userValue2.payload };
   body2.map((elem) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     if (typeof (elem == null ? void 0 : elem.value) !== "string") {
       finalBody[elem.key] = elem.value;
     } else {
       if ((_a = elem == null ? void 0 : elem.value) == null ? void 0 : _a.startsWith("$userValue")) {
         const finalpath = elem.value.substring(11);
         finalBody[elem.key] = _.get(userValue2, finalpath);
-      } else if ((_b = elem == null ? void 0 : elem.value) == null ? void 0 : _b.startsWith("$")) {
+      } else if ((_b = elem == null ? void 0 : elem.value) == null ? void 0 : _b.startsWith("$urlParams")) {
+        const finalpath = elem.value.substring(11);
+        const value = (_c = store2 == null ? void 0 : store2.searchParams) == null ? void 0 : _c.get(finalpath);
+        finalBody[elem.key] = value;
+      } else if ((_d = elem == null ? void 0 : elem.value) == null ? void 0 : _d.startsWith("$local")) {
+        const finalpath = elem.value.substring(7);
+        const value = JSON.parse(localStorage.getItem(finalpath) || '""');
+        finalBody[elem.key] = value;
+      } else if ((_e = elem == null ? void 0 : elem.value) == null ? void 0 : _e.startsWith("$")) {
         const finalpath = elem.value.substring(1);
         finalBody[elem.key] = _.get(formData, finalpath);
       } else if ((elem == null ? void 0 : elem.value) === "*" && (elem == null ? void 0 : elem.key) === "*") {
@@ -8692,7 +9294,7 @@ function buildApiPayload(compConfig, body, headers, store, dynamicData, userValu
     headers = buildHeadersFormat(compConfig.headers);
   }
   if (compConfig.body) {
-    body = { ...buildBodyFormat(compConfig.body, store.newData || ((_b = (_a = store == null ? void 0 : store.ctx) == null ? void 0 : _a.core) == null ? void 0 : _b.data) || store.formData, userValue) };
+    body = { ...buildBodyFormat(compConfig.body, store.newData || ((_b = (_a = store == null ? void 0 : store.ctx) == null ? void 0 : _a.core) == null ? void 0 : _b.data) || store.formData, userValue, store) };
   }
   const promiseChain = { body, headers };
   if (compConfig.apiBody) {
@@ -8773,7 +9375,7 @@ var service = (funcParams) => {
   };
   return {
     setPage: async function() {
-      var _a;
+      var _a, _b, _c, _d;
       funcParams.store.setFormdata({});
       funcParams.store.newData = {};
       const pageBasicDetailString = localStorage.getItem("pagemasterMetaData");
@@ -8789,7 +9391,116 @@ var service = (funcParams) => {
       }
       const config = pageData == null ? void 0 : pageData.config;
       const uiSchema = pageData == null ? void 0 : pageData.uiSchema;
-      const schema2 = (_a = pageData == null ? void 0 : pageData.schema) != null ? _a : { type: "object", properties: {} };
+      const event2 = new CustomEvent("pageNameChanged", {
+        detail: { pageName: config.label }
+      });
+      window.dispatchEvent(event2);
+      const theme = (_b = (_a = funcParams == null ? void 0 : funcParams.store) == null ? void 0 : _a.theme) == null ? void 0 : _b.myTheme;
+      uiSchema.elements.push(
+        {
+          type: "HorizontalLayout",
+          config: {
+            main: {
+              direction: "row"
+            },
+            style: {
+              flexDirection: "row",
+              position: "absolute",
+              bottom: 0,
+              marginBottom: "-8px",
+              height: "fit-content",
+              overflow: "hidden",
+              zIndex: 1e3,
+              width: "inherit"
+            }
+          },
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/FooterText",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                main: {
+                  heading: "Copywriter@ACT21.IO"
+                },
+                style: {
+                  color: ((_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.text.disabled) || "#AFAFAF",
+                  fontSize: "12px",
+                  textAlign: "center",
+                  lineHeight: 1,
+                  width: "fit-content",
+                  left: "50%",
+                  position: "relative",
+                  margin: 0,
+                  flexGrow: 1,
+                  height: 0
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/backIcon",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                main: {
+                  iconName: "PrevIcon",
+                  onClick: "backHandler",
+                  width: "fit-content"
+                },
+                style: {
+                  fill: theme.palette.primary.main,
+                  width: 20,
+                  height: 0,
+                  margin: 0,
+                  top: 0,
+                  right: "82px",
+                  position: "absolute",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  ":hover": {
+                    fill: theme.palette.primary.dark
+                  }
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/text",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                main: {
+                  heading: "Previous Page",
+                  onClick: "backHandler"
+                },
+                style: {
+                  textAlign: "left",
+                  lineHeight: 1,
+                  height: 0,
+                  width: "fit-content",
+                  color: theme.palette.primary.main,
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  marginLeft: "2px",
+                  marginRight: 0,
+                  top: 3,
+                  right: "12px",
+                  position: "absolute",
+                  ":hover": {
+                    color: theme.palette.primary.dark
+                  }
+                }
+              }
+            }
+          ]
+        }
+      );
+      const schema2 = (_d = pageData == null ? void 0 : pageData.schema) != null ? _d : { type: "object", properties: {} };
       eventGroups = {};
       eventGroups = extractEvents(config);
       executeEventsParameters = {
@@ -8801,7 +9512,8 @@ var service = (funcParams) => {
         service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
         serviceHolder: this,
-        eventGroups
+        eventGroups,
+        formDataHolder
       };
       await executeRefreshHandler({
         config: {},
@@ -8814,8 +9526,6 @@ var service = (funcParams) => {
         eventGroups,
         formDataHolder
       });
-      const jsonres = await fetch("https://jsonplaceholder.typicode.com/todos/1");
-      await jsonres.json();
       funcParams.store.setSchema(
         (pre) => {
           return {
@@ -8859,6 +9569,16 @@ var service = (funcParams) => {
     backHandler: function() {
       funcParams.store.navigate(-1);
     },
+    onRowMovement: async function(paginationValues) {
+      const apiBody = [
+        { key: "direction", value: paginationValues.rowMovement.direction },
+        { key: "movedRowId", value: paginationValues.rowMovement.movedRowId },
+        { key: "targetRowId", value: paginationValues.rowMovement.targetRowId || [] }
+      ];
+      await this.callExecuteEvents({ path: paginationValues == null ? void 0 : paginationValues.path }, apiBody, "onRowMovement");
+      const response = await this.callExecuteEvents({ path: paginationValues == null ? void 0 : paginationValues.path }, apiBody, "onLoad");
+      return response == null ? void 0 : response.data;
+    },
     onPaginationChange: async function(paginationValues) {
       var _a;
       const apiBody = [
@@ -8868,7 +9588,7 @@ var service = (funcParams) => {
         { key: "filters", value: paginationValues.columnFilters || [] },
         { key: "globalFilter", value: (_a = paginationValues.globalFilter) != null ? _a : "" }
       ];
-      const response = await this.updateConfigApiBody(paginationValues, apiBody);
+      const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response == null ? void 0 : response.data;
     },
     getSelectOptions: async function(param) {
@@ -8877,7 +9597,7 @@ var service = (funcParams) => {
           { key: "searchValue", value: param.serachValue },
           { key: "currentValue", value: param.currentValue }
         ];
-        const response = await this.updateConfigApiBody(param, apiBody);
+        const response = await this.callExecuteEvents(param, apiBody);
         return response == null ? void 0 : response.data;
       }
     },
@@ -8898,10 +9618,10 @@ var service = (funcParams) => {
         }));
       }
     },
-    updateConfigApiBody: async function(paramValue, apiBody) {
-      var _a;
+    callExecuteEvents: async function(paramValue, apiBody, eventType) {
+      var _a, _b;
       let LastCallResponse = void 0;
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onLoad[paramValue.path]) {
+      for (const eventConfig of (_a = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _a[paramValue.path]) {
         if (eventConfig.body) {
           eventConfig.body = [
             ...eventConfig.body,
@@ -8910,7 +9630,7 @@ var service = (funcParams) => {
         } else {
           eventConfig.body = apiBody;
         }
-        const responseEvent = (_a = eventConfig == null ? void 0 : eventConfig.events) == null ? void 0 : _a.filter((elem) => {
+        const responseEvent = (_b = eventConfig == null ? void 0 : eventConfig.events) == null ? void 0 : _b.filter((elem) => {
           return elem.Handler !== "mergeFormdata";
         });
         eventConfig.events = responseEvent != null ? responseEvent : [];
@@ -8948,7 +9668,6 @@ var service = (funcParams) => {
     },
     callHandler: async function(eventType, functionParameters) {
       var _a, _b, _c;
-      formDataHolder = {};
       const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
       if (((_b = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _b[path]) !== void 0) {
         Promise.all((_c = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _c[path].map((eventConfig) => {
@@ -8975,12 +9694,15 @@ var leaderBoard = {
       label: "LeaderBoard",
       divider: true
     },
-    style: { wrapperStyle: {
-      height: { xs: 850, sm: 1e3 }
-    } },
+    style: {},
     wrapperStyle: {
       position: "relative",
       width: "100%"
+    },
+    componentsBoxStyle: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "20px"
     }
   },
   elements: [
@@ -8991,21 +9713,23 @@ var leaderBoard = {
         main: {
           url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
         },
-        containerStyle: {
-          objectFit: "cover",
-          position: "absolute",
-          top: { xs: "90px", "md": "60px" },
-          left: { "xs": "calc(50% - 50px)", "sm": "calc(50% - 50px)", "md": "calc(50% - 100px)" },
-          width: { "xs": "100px", "sm": "100px", "md": "200px" },
-          border: "5px solid rgb(179, 198, 255)",
-          height: { "xs": "100px", "sm": "100px", "md": "200px" },
-          borderRadius: "50%"
-        },
         style: {
-          objectFit: "cover",
-          width: "100%",
-          height: "100%",
-          borderRadius: "50%"
+          imageStyle: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%"
+          },
+          containerStyle: {
+            objectFit: "cover",
+            position: "absolute",
+            top: { xs: "90px", "md": "60px" },
+            left: { "xs": "calc(50% - 50px)", "sm": "calc(50% - 50px)", "md": "calc(50% - 100px)" },
+            width: { "xs": "100px", "sm": "100px", "md": "200px" },
+            border: "5px solid rgb(179, 198, 255)",
+            height: { "xs": "100px", "sm": "100px", "md": "200px" },
+            borderRadius: "50%"
+          }
         },
         layout: 6
       },
@@ -9020,21 +9744,23 @@ var leaderBoard = {
         main: {
           url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
         },
-        containerStyle: {
-          objectFit: "cover",
-          position: "absolute",
-          top: { xs: "160px", "md": "130px" },
-          left: { "xs": "calc(25% - 45px)", "sm": "calc(25% - 45px)", "md": "calc(25% - 90px)" },
-          width: { "xs": "80px", "sm": "80px", "md": "180px" },
-          border: "5px solid rgb(179, 198, 255)",
-          height: { "xs": "80px", "sm": "80px", "md": "180px" },
-          borderRadius: "50%"
-        },
         style: {
-          objectFit: "cover",
-          width: "100%",
-          height: "100%",
-          borderRadius: "50%"
+          imageStyle: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%"
+          },
+          containerStyle: {
+            objectFit: "cover",
+            position: "absolute",
+            top: { xs: "160px", "md": "130px" },
+            left: { "xs": "calc(25% - 45px)", "sm": "calc(25% - 45px)", "md": "calc(25% - 90px)" },
+            width: { "xs": "80px", "sm": "80px", "md": "180px" },
+            border: "5px solid rgb(179, 198, 255)",
+            height: { "xs": "80px", "sm": "80px", "md": "180px" },
+            borderRadius: "50%"
+          }
         },
         layout: 6
       },
@@ -9049,21 +9775,23 @@ var leaderBoard = {
         main: {
           url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg"
         },
-        containerStyle: {
-          objectFit: "cover",
-          position: "absolute",
-          top: { xs: "160px", "md": "130px" },
-          left: { "xs": "calc(75% - 42.5px)", "sm": "calc(75% - 42.5px)", "md": "calc(75% - 85px)" },
-          width: { "xs": "80px", "sm": "80px", "md": "180px" },
-          border: "5px solid rgb(179, 198, 255)",
-          height: { "xs": "80px", "sm": "80px", "md": "180px" },
-          borderRadius: "50%"
-        },
         style: {
-          objectFit: "cover",
-          width: "100%",
-          height: "100%",
-          borderRadius: "50%"
+          imageStyle: {
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%"
+          },
+          containerStyle: {
+            objectFit: "cover",
+            position: "absolute",
+            top: { xs: "160px", "md": "130px" },
+            left: { "xs": "calc(75% - 42.5px)", "sm": "calc(75% - 42.5px)", "md": "calc(75% - 85px)" },
+            width: { "xs": "80px", "sm": "80px", "md": "180px" },
+            border: "5px solid rgb(179, 198, 255)",
+            height: { "xs": "80px", "sm": "80px", "md": "180px" },
+            borderRadius: "50%"
+          }
         },
         layout: 6
       },
@@ -9286,11 +10014,11 @@ var leaderBoard = {
             fontWeight: 900,
             background: "rgb(179, 198, 255)"
           },
-          position: "absolute",
           top: { xs: "300px", sm: "300px", md: "390px", lg: "390px" },
           border: "2px solid rgb(179, 198, 255)",
           width: "95%",
-          left: "2.5%"
+          left: "2.5%",
+          margin: "auto"
         },
         main: {
           disableAction: true,
@@ -9399,7 +10127,8 @@ const BarGraph = {
     widget: "Graph"
   },
   config: {
-    main: {}
+    main: {},
+    style: { containerStyle: {} }
   }
 };
 const PieGraph = {
@@ -9411,7 +10140,8 @@ const PieGraph = {
   config: {
     main: {
       type: "PieGraph"
-    }
+    },
+    style: {}
   }
 };
 const LineGraph = {
@@ -9459,7 +10189,8 @@ const HorizontalBarGraph = {
   config: {
     main: {
       type: "HorizontalBarGraph"
-    }
+    },
+    style: {}
   }
 };
 const buildHorizontalBarGraph = (config, componentScope) => {
@@ -9635,6 +10366,7 @@ const buildStackbarGraph = (config, componentScope) => {
   if (config.leftLabel) {
     barGraph.config.main.leftLabel = config.leftLabel;
   }
+  barGraph.scope = componentScope;
   return barGraph;
 };
 var RunnerBoyProgressBar = {
@@ -9699,7 +10431,7 @@ const buildWrapperSection = (config, componentScope) => {
   wrapper.scope = componentScope;
   wrapper.config.main.label = config.label;
   wrapper.config.main.divider = config.divider === "YES" ? true : false;
-  wrapper.config.main.isAccordion = config.isAccordion === "YES" ? true : false;
+  wrapper.config.main.isAccordion = config.isAccordion === "No" ? false : true;
   if (config.defaultStyle) {
     wrapper.config.defaultStyle = config.defaultStyle === "YES" ? true : false;
   }
@@ -9784,12 +10516,7 @@ var Button = {
     widget: "Button"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: 3,
     main: {
       name: "Compare",
       variant: "contained",
@@ -9799,7 +10526,7 @@ var Button = {
       styleDefault: false,
       icon: "",
       onClick: "onClick",
-      size: "small"
+      size: "medium"
     },
     style: {}
   }
@@ -9848,6 +10575,7 @@ var Table = {
   config: {
     main: {
       onMount: "onMount",
+      enableExpandAll: true,
       allRowData: [],
       downloadAllData: false,
       columns: {
@@ -9880,6 +10608,21 @@ const buildTable = (config, componentScope) => {
   if (config.lazyLoading) {
     table.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
   }
+  if (config.enableRowMovement) {
+    table.config.main.enableRowMovement = config.enableRowMovement === "YES" ? true : false;
+  }
+  if (config.enableExpanding) {
+    table.config.main.enableExpanding = config.enableExpanding === "YES" ? true : false;
+  }
+  if (config.enableExpandAll) {
+    table.config.main.enableExpandAll = config.enableExpandAll === "YES" ? true : false;
+  }
+  if (config.paginateExpandedRows) {
+    table.config.main.paginateExpandedRows = config.paginateExpandedRows === "YES" ? true : false;
+  }
+  if (config.treeStructure) {
+    table.config.main.treeStructure = config.treeStructure === "YES" ? "flatTreeMap" : false;
+  }
   if (config.SelectionAvailable) {
     table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false;
   }
@@ -9927,7 +10670,7 @@ const buildLazyLoadingTable = (config, componentScope) => {
   table.config.main.label = config.label;
   return table;
 };
-var Box = {
+const Box = {
   type: "Control",
   scope: "#/properties/emptyBox",
   options: {
@@ -9964,12 +10707,7 @@ const uploadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    "layout": {
-      "lg": 5.5,
-      "md": 5.5,
-      "sm": 11,
-      "xs": 11
-    }
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 }
   },
   "options": {
     "widget": "UploadFile"
@@ -9986,12 +10724,7 @@ const downloadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    "layout": {
-      "lg": 5.5,
-      "md": 5.5,
-      "sm": 11,
-      "xs": 11
-    }
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 }
   },
   "options": {
     "widget": "DownloadFile"
@@ -10042,16 +10775,14 @@ var Card = {
     main: {
       rowSpacing: 0.5
     },
-    style: {
-      componentsBoxStyle: {
-        position: "relative",
-        color: "white",
-        height: { xs: "120px", md: "160px" },
-        width: "100%",
-        textAlign: "left",
-        background: "#3f51b5",
-        borderRadius: "20px"
-      }
+    componentsBoxStyle: {
+      position: "relative",
+      color: "white",
+      height: { xs: "120px", md: "160px" },
+      width: "100%",
+      textAlign: "left",
+      background: "#3f51b5",
+      borderRadius: "20px"
     },
     layout: { xs: 12, sm: 12, md: 6, lg: 6 }
   },
@@ -10337,7 +11068,7 @@ const buildBasicUiSchema = (config) => {
     pageName: config.name,
     name: config.name,
     accessorKey: config.name,
-    headeing: config.label || config.name,
+    heading: config.label || config.name,
     "elements": []
   };
 };
@@ -10470,7 +11201,7 @@ const RadioUiSchema = {
     widget: "RadioInputField"
   },
   config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "Enabled",
       options: ["YES", "NO"],
@@ -10494,11 +11225,11 @@ const buildRadio = (config, componentScope) => {
   return Radio;
 };
 const buildEmptyBox = (config, componentScope) => {
-  const EmptyBox2 = _.cloneDeep(emptyBox);
+  const EmptyBox = _.cloneDeep(emptyBox);
   if (config.layout) {
-    EmptyBox2.config.layout = createLayoutFormat(config.layout);
+    EmptyBox.config.layout = createLayoutFormat(config.layout);
   }
-  return EmptyBox2;
+  return EmptyBox;
 };
 const ArrayUiSchema = {
   type: "Control",
@@ -10579,7 +11310,7 @@ const FileInput = {
     widget: "FileInputField"
   },
   config: {
-    layout: 11.5,
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       required: false,
       onUpload: "onFileUpload",
@@ -11022,7 +11753,7 @@ const buildUiSchema = (config) => {
       switch (config.graphType) {
         case "BarGraph":
         case "StackBarGraph":
-          elements = buildStackbarGraph(config);
+          elements = buildStackbarGraph(config, componentScope);
           break;
         case "LineGraph":
           elements = buildLineGraph(config, componentScope);