impaktapps-ui-builder 0.0.412-mtreemap.2 → 0.0.412-mtreemap.21

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

@@ -41,7 +41,7 @@ const PageMasterSchema = {
       }
     }
   },
-  required: ["template", "name"]
+  required: ["template", "name", "label"]
 };
 const PageMasterUiSchema = (theme) => {
   var _a;
@@ -79,15 +79,19 @@ const PageMasterUiSchema = (theme) => {
           },
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/template",
             options: {
-              widget: "InputField"
+              widget: "SelectInputField"
             },
             config: {
               layout: { xs: 11, sm: 4, md: 4, lg: 4 },
               main: {
-                label: "Label",
-                options: [],
+                label: "Template",
+                options: [
+                  { const: "template1", title: "template1" },
+                  { const: "template2", title: "template2" },
+                  { const: "template3", title: "template3" }
+                ],
                 color: "secondary",
                 required: true
               }
@@ -95,228 +99,246 @@ const PageMasterUiSchema = (theme) => {
           },
           {
             type: "Control",
-            scope: "#/properties/emptyBox",
+            scope: "#/properties/label",
             options: {
-              widget: "EmptyBox"
+              widget: "InputField"
             },
             config: {
-              layout: { xs: 0, sm: 4 }
+              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              main: {
+                label: "Label",
+                options: [],
+                color: "secondary",
+                required: true
+              }
             }
+          }
+        ]
+      },
+      {
+        type: "TabLayout",
+        config: {
+          main: {
+            tabLabels: ["Components", "events"],
+            divider: true
           },
+          defaultStyle: true
+        },
+        elements: [
           {
-            type: "TabLayout",
+            type: "Control",
+            scope: "#/properties/elements",
+            options: {
+              widget: "Table"
+            },
             config: {
               main: {
-                tabLabels: ["Components", "events"],
-                divider: true
-              },
-              defaultStyle: true
-            },
-            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: {
-                                onClick: "onAddClickHandler",
-                                size: "small",
-                                icon: "AddIcon",
-                                iconLabel: "Add New",
-                                styleDefault: true
-                              },
-                              style: {
-                                mt: "6px"
-                              }
-                            }
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            onClick: "onAddClickHandler",
+                            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",
-                    field: "Reject_Records",
-                    flex: 1,
-                    widget: {
-                      type: "Control",
-                      scope: "#/properties/RejectButton",
-                      options: {
-                        widget: "IconButton"
-                      },
-                      config: {
-                        main: {
-                          icon: "EditIcon",
-                          onClick: "Edit_Components",
-                          tooltipMessage: "Edit This Record"
-                        }
                       }
                     }
+                  ]
+                },
+                disableAction: true,
+                disableSelection: true,
+                enableDrag: true
+              }
+            },
+            elements: [
+              {
+                accessorKey: "name",
+                header: "Name"
+              },
+              {
+                accessorKey: "type",
+                header: "Type"
+              },
+              {
+                header: "Edit",
+                field: "Reject_Records",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton"
                   },
-                  {
-                    header: "Delete",
-                    field: "Reject_Records",
-                    flex: 1,
-                    widget: {
-                      type: "Control",
-                      scope: "#/properties/RejectButton",
-                      options: {
-                        widget: "IconButton"
-                      },
-                      config: {
-                        main: {
-                          icon: "RejectIcon",
-                          color: "error",
-                          onClick: "Delete_Components",
-                          tooltipMessage: "Reject This Record"
-                        }
-                      }
+                  config: {
+                    main: {
+                      icon: "EditIcon",
+                      color: "primary",
+                      onClick: "Edit_Components",
+                      tooltipMessage: "Edit This Record"
                     }
                   }
-                ]
+                }
               },
               {
-                type: "Control",
-                scope: "#/properties/events",
-                options: {
-                  widget: "Table"
-                },
-                config: {
-                  main: {
-                    headerIcons: {
-                      elements: [
-                        {
-                          widget: {
-                            type: "Control",
-                            scope: "#/properties/New_Record",
-                            options: {
-                              widget: "IconButton"
-                            },
-                            config: {
-                              main: {
-                                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: {
-                          size: "small",
-                          icon: "EditIcon",
-                          tooltipMessage: "Edit This Record",
-                          onClick: "editEvent"
-                        },
-                        style: {
-                          color: "#3949ab"
-                        }
-                      }
-                    }
+                header: "Delete",
+                field: "Reject_Records",
+                flex: 1,
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton"
                   },
-                  {
-                    accessorKey: "Reject_Records",
-                    header: "Delete",
-                    widget: {
-                      type: "Control",
-                      scope: "#/properties/RejectButton",
-                      options: {
-                        widget: "IconButton"
-                      },
-                      config: {
-                        main: {
-                          icon: "RejectIcon",
-                          color: "error",
-                          tooltipMessage: "Reject This Record",
-                          onClick: "deleteEvent"
-                        }
-                      }
+                  config: {
+                    main: {
+                      icon: "RejectIcon",
+                      color: "error",
+                      onClick: "Delete_Components",
+                      tooltipMessage: "Reject This Record"
                     }
                   }
-                ]
+                }
               }
             ]
           },
           {
             type: "Control",
-            scope: "#/properties/btn",
+            scope: "#/properties/events",
             options: {
-              widget: "Button"
+              widget: "Table"
             },
             config: {
-              layout: 11.9,
               main: {
-                name: "Save",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                type: "text",
-                onClick: "saveHandler",
-                size: "medium"
+                headerIcons: {
+                  elements: [
+                    {
+                      widget: {
+                        type: "Control",
+                        scope: "#/properties/New_Record",
+                        options: {
+                          widget: "IconButton"
+                        },
+                        config: {
+                          main: {
+                            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"
               },
-              style: {
-                width: { xs: "90%", sm: "90%", md: "20%", lg: "10%" },
-                float: "right"
+              {
+                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: "editEvent"
+                    },
+                    style: {
+                      color: "#3949ab"
+                    }
+                  }
+                }
+              },
+              {
+                accessorKey: "Reject_Records",
+                header: "Delete",
+                widget: {
+                  type: "Control",
+                  scope: "#/properties/RejectButton",
+                  options: {
+                    widget: "IconButton"
+                  },
+                  config: {
+                    main: {
+                      icon: "RejectIcon",
+                      color: "error",
+                      tooltipMessage: "Reject This Record",
+                      onClick: "deleteEvent"
+                    }
+                  }
+                }
               }
-            }
+            ]
           }
         ]
       },
+      {
+        type: "Control",
+        scope: "#/properties/btn",
+        options: {
+          widget: "EmptyBox"
+        },
+        config: {
+          layout: { xs: 0, sm: 8, md: 8, lg: 8 }
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/btn",
+        options: {
+          widget: "Button"
+        },
+        config: {
+          layout: 11.9,
+          main: {
+            name: "Save",
+            startIcon: "ApproveIcon",
+            variant: "contained",
+            type: "text",
+            onClick: "saveHandler",
+            size: "medium"
+          },
+          style: {
+            width: { xs: "90%", sm: "90%", md: "20%", lg: "10%" },
+            float: "right"
+          }
+        }
+      },
       {
         type: "Control",
         scope: "#/properties/notify",
@@ -6240,30 +6262,63 @@ const componentBasicUiSchema = (theme) => {
               },
               {
                 type: "Control",
-                scope: "#/properties/layout",
-                layout: 12,
+                scope: "#/properties/columnFormat",
                 options: {
-                  detail: {
-                    type: "HorizontalLayout",
-                    elements: [
-                      {
-                        type: "Control",
-                        scope: "#/properties/key",
-                        options: {
-                          widget: "SelectInputField"
-                        },
-                        config: {
-                          layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                          main: {
-                            label: "Screen Size"
-                          }
-                        }
-                      },
-                      {
-                        type: "Control",
-                        scope: "#/properties/value",
-                        options: {
-                          widget: "InputField"
+                  widget: "SelectInputField"
+                },
+                config: {
+                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  main: {
+                    label: "Column Format"
+                  }
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/proc",
+                config: {
+                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                },
+                options: {
+                  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",
+                layout: 12,
+                options: {
+                  detail: {
+                    type: "HorizontalLayout",
+                    elements: [
+                      {
+                        type: "Control",
+                        scope: "#/properties/key",
+                        options: {
+                          widget: "SelectInputField"
+                        },
+                        config: {
+                          layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                          main: {
+                            label: "Screen Size"
+                          }
+                        }
+                      },
+                      {
+                        type: "Control",
+                        scope: "#/properties/value",
+                        options: {
+                          widget: "InputField"
                         },
                         config: {
                           layout: { xs: 11, sm: 4, md: 4, lg: 4 },
@@ -6277,12 +6332,12 @@ const componentBasicUiSchema = (theme) => {
                       },
                       {
                         type: "Control",
-                        scope: "#/properties/emptyBox",
+                        scope: "#/properties/proc",
+                        config: {
+                          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                        },
                         options: {
                           widget: "EmptyBox"
-                        },
-                        config: {
-                          layout: { xs: 0, sm: 4 }
                         }
                       }
                     ]
@@ -6293,6 +6348,172 @@ const componentBasicUiSchema = (theme) => {
           }
         ]
       },
+      {
+        type: "Control",
+        scope: "#/properties/popUpComponentSection",
+        options: {
+          widget: "PopUp"
+        },
+        config: {
+          layout: {
+            xs: 12,
+            sm: 12,
+            md: 12,
+            lg: 12
+          },
+          main: {}
+        },
+        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: "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: {}
+        },
+        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",
@@ -6519,12 +6740,7 @@ const CoreSection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: {
-          xs: 12,
-          sm: 12,
-          md: 6,
-          lg: 6
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Column Format"
         }
@@ -6534,7 +6750,17 @@ const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc",
+      config: {
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
       },
       options: {
         widget: "EmptyBox"
@@ -6580,12 +6806,12 @@ const CoreSection = {
             },
             {
               type: "Control",
-              scope: "#/properties/emptyBox",
+              scope: "#/properties/proc",
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+              },
               options: {
                 widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 4 }
               }
             }
           ]
@@ -6683,7 +6909,7 @@ const EventSection = {
                 icon: "RejectIcon",
                 color: "error",
                 tooltipMessage: "Reject This Record",
-                onClick: "deleteEvent"
+                onClick: "deletePopUpEvent"
               }
             }
           }
@@ -6692,15 +6918,16 @@ const EventSection = {
     }
   ]
 };
-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 = {
@@ -6740,7 +6967,7 @@ const cardLayout = {
             }
           }
         },
-        EmptyBox
+        emptyBox
       ]
     }
   }
@@ -6749,7 +6976,7 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 11.5,
+    layout: 12,
     options: {
       "elementLabelProp": childScope,
       detail: {
@@ -6768,8 +6995,8 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
               }
             }
           },
-          EmptyBox,
-          EmptyBox
+          emptyBox,
+          emptyBox
         ]
       }
     }
@@ -6789,6 +7016,7 @@ sizeHolder.options.detail.elements[1] = {
     }
   }
 };
+sizeHolder.options.detail.elements[2] = emptyBox;
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -6876,7 +7104,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":
@@ -6884,7 +7113,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":
@@ -6893,8 +7124,8 @@ const buildPropertiesSection = function(type) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
-        EmptyBox,
-        EmptyBox,
+        emptyBox,
+        emptyBox,
         cardLayout
       ];
       break;
@@ -6905,7 +7136,7 @@ const buildPropertiesSection = function(type) {
         getInputField("resetText", "Reset Text"),
         getInputField("completeText", "Complete Text"),
         getSelectField("orientation", "Orientation Type"),
-        EmptyBox,
+        emptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -6913,23 +7144,22 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
         getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
-        getInputField("maxWidth", "Max. Width"),
-        EmptyBox
+        getInputField("maxWidth", "Max. Width")
       ];
       break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,
-        EmptyBox,
+        emptyBox,
+        emptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
     case "SpeedoMeter":
@@ -6939,7 +7169,7 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
         getInputField("width", "Speedometer Width"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "RankCard":
@@ -6948,8 +7178,8 @@ const buildPropertiesSection = function(type) {
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
         getInputField("description", "Card Description"),
-        EmptyBox,
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
     case "LeaderBoard":
@@ -6958,8 +7188,8 @@ const buildPropertiesSection = function(type) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        EmptyBox,
-        EmptyBox,
+        emptyBox,
+        emptyBox,
         getTextArea("functionCode", "Write Compare Code", false)
       ];
       break;
@@ -6976,8 +7206,8 @@ const buildPropertiesSection = function(type) {
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
         getInputField("bottomLabel_3", "Third BottomLabel"),
-        EmptyBox,
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
     case "card":
@@ -6985,7 +7215,7 @@ const buildPropertiesSection = function(type) {
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Button":
@@ -6995,7 +7225,7 @@ const buildPropertiesSection = function(type) {
         getSelectField("color", "Color"),
         getInputField("tooltipMessage", "Tooltip Message"),
         getSelectField("defaultStyle", "Default Style"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Graph":
@@ -7008,6 +7238,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")
       ];
@@ -7017,13 +7248,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;
@@ -7049,14 +7283,14 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        EmptyBox,
-        EmptyBox
+        emptyBox,
+        emptyBox
       ];
       break;
   }
@@ -7182,7 +7416,7 @@ const TableSection = {
               main: {
                 icon: "RejectIcon",
                 color: "error",
-                onClick: "deleteComponent",
+                onClick: "deletePopUpComponent",
                 tooltipMessage: "Reject This Record"
               }
             }
@@ -7198,7 +7432,7 @@ const ValueTab = {
     {
       type: "Control",
       scope: "#/properties/value",
-      layout: 11.5,
+      layout: 12,
       options: {
         detail: {
           type: "HorizontalLayout",
@@ -7324,10 +7558,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 = {};
@@ -7484,14 +7718,14 @@ const refreshPage = (type, store2) => {
     const sectionUiSchema = {
       Core: CoreSection,
       Value: ValueTab,
-      style: StyleSection,
+      Style: StyleSection,
       Event: EventSection,
       Components: TableSection,
       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].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
     UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
   }
   store2.setUiSchema(UiSchema);
@@ -7538,22 +7772,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;
@@ -7589,6 +7831,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");
     }
   };
 };
@@ -7643,7 +7895,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");
@@ -7663,10 +7918,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");
     }
   };
 };
@@ -7791,28 +8058,15 @@ const EventUiSchema = (theme) => {
                   }
                 }
               },
+              getSelectField("Handler", "Handler"),
               {
                 type: "Control",
-                scope: `#/properties/Handler`,
-                options: {
-                  widget: "SelectInputField"
-                },
-                config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                  main: {
-                    label: "Handler",
-                    type: "text"
-                  }
-                }
-              },
-              {
-                type: "Control",
-                scope: "#/properties/emptyBox",
+                scope: "#/properties/EmptyBox",
                 options: {
                   widget: "EmptyBox"
                 },
                 config: {
-                  layout: { xs: 0, sm: 4 }
+                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
                 }
               }
             ]
@@ -7875,6 +8129,7 @@ const EventUiSchema = (theme) => {
                   },
                   config: {
                     main: {
+                      color: "info",
                       size: "small",
                       icon: "EditIcon",
                       tooltipMessage: "Edit This Record",
@@ -8263,6 +8518,17 @@ const refreshSectionUiSchema = {
                 }
               }
             },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                main: {}
+              }
+            },
             {
               type: "Control",
               scope: "#/properties/emptyBox",
@@ -8280,18 +8546,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() {
@@ -8306,18 +8560,19 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       const schema2 = _.cloneDeep(EventSchema);
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[1].elements[0].elements[2] = getRadioInputField("isSync", "Run in Sync", ["Yes", "No"]);
-          uiSchema.elements[1].elements[0].elements[3] = emptyBox;
+          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);
           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;
           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, 12);
+          uiSchema.elements[0].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;
           schema2.properties.refreshElements.required = ["value"];
           schema2.properties.refreshElements.items.required = ["value"];
@@ -8334,8 +8589,8 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       store22.setUiSchema(uiSchema);
     },
     getFormData: Component(store2, dynamicData2, submitHandler, service2).getFormdata,
-    getUiSchema: async function() {
-      return await EventUiSchema(store2.theme.myTheme);
+    getUiSchema: function() {
+      return EventUiSchema;
     },
     getSchema: () => {
       return EventSchema;
@@ -8370,9 +8625,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");
     }
   };
 };
@@ -8596,17 +8859,25 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
     }
   }
 }
-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) === "*") {
@@ -8654,7 +8925,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) {
@@ -8735,7 +9006,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");
@@ -8751,7 +9022,114 @@ 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: {} };
+      window.localStorage.setItem("pageName", config.label);
+      window.dispatchEvent(new Event("pageNameChanged"));
+      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 = {
@@ -8776,8 +9154,6 @@ var service = (funcParams) => {
         eventGroups,
         formDataHolder
       });
-      const jsonres = await fetch("https://jsonplaceholder.typicode.com/todos/1");
-      await jsonres.json();
       funcParams.store.setSchema(
         (pre) => {
           return {
@@ -8937,9 +9313,12 @@ var leaderBoard = {
       label: "LeaderBoard",
       divider: true
     },
-    style: { wrapperStyle: {
-      height: { xs: 850, sm: 1e3 }
-    } },
+    style: {
+      wrapperStyle: {
+        display: "flex",
+        gap: "10px"
+      }
+    },
     wrapperStyle: {
       position: "relative",
       width: "100%"
@@ -9248,11 +9627,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,
@@ -9391,7 +9770,7 @@ const LineGraph = {
       leftLabel: "Incentive",
       gridHidden: true,
       numHidden: false,
-      tooltipDataKey: ["First", "Second", "Third"],
+      tooltipDataKey: ["MAMA New Project", "Second", "Third"],
       axisLeft: true,
       axisBottom: true,
       hideLeftAxisLine: false,
@@ -9649,7 +10028,8 @@ var WrapperSection = {
   config: {
     main: {
       rowSpacing: 3,
-      divider: true
+      divider: true,
+      label: "Default Label"
     },
     defaultStyle: true
   },
@@ -9660,7 +10040,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;
   }
@@ -9745,12 +10125,7 @@ var Button = {
     widget: "Button"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: 3,
     main: {
       name: "Compare",
       variant: "contained",
@@ -9760,7 +10135,7 @@ var Button = {
       styleDefault: false,
       icon: "",
       onClick: "onClick",
-      size: "small"
+      size: "medium"
     },
     style: {}
   }
@@ -9925,12 +10300,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"
@@ -9947,12 +10317,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"
@@ -10003,14 +10368,16 @@ var Card = {
     main: {
       rowSpacing: 0.5
     },
-    componentsBoxStyle: {
-      position: "relative",
-      color: "white",
-      height: { xs: "120px", md: "160px" },
-      width: "100%",
-      textAlign: "left",
-      background: "#3f51b5",
-      borderRadius: "20px"
+    style: {
+      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 }
   },
@@ -10136,12 +10503,7 @@ const DateTime = {
     widget: "DateTimeInputField"
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "DateTime",
       type: "date"
@@ -10301,7 +10663,7 @@ const buildBasicUiSchema = (config) => {
     pageName: config.name,
     name: config.name,
     accessorKey: config.name,
-    header: config.label || config.name,
+    heading: config.label || config.name,
     "elements": []
   };
 };
@@ -10434,7 +10796,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"],
@@ -10458,11 +10820,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",
@@ -10543,7 +10905,7 @@ const FileInput = {
     widget: "FileInputField"
   },
   config: {
-    layout: 11.5,
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       required: false,
       onUpload: "onFileUpload",