impaktapps-ui-builder 1.0.4 → 1.0.9-4.card.2

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

@@ -44,7 +44,7 @@ const PageMasterSchema = {
       disabled: true
     }
   },
-  required: ["template", "name", "label"]
+  required: ["name", "label"]
 };
 const PageMasterUiSchema = (theme) => {
   var _a;
@@ -96,11 +96,25 @@ const PageMasterUiSchema = (theme) => {
               }
             }
           },
+          {
+            type: "Control",
+            scope: "#/properties/hasBackIcon",
+            options: {
+              widget: "RadioInputField"
+            },
+            config: {
+              layout: { xs: 12, sm: 6, md: 4, lg: 3 },
+              main: {
+                label: "Back Icon",
+                options: [{ label: "Yes", const: "YES" }, { label: "No", const: "NO" }]
+              }
+            }
+          },
           {
             type: "Control",
             scope: "#/properties/EmptyBox",
             config: {
-              layout: { xs: 0, sm: 0, md: 4, lg: 6 }
+              layout: { xs: 0, sm: 6, md: 0, lg: 3 }
             },
             options: {
               widget: "EmptyBox"
@@ -204,91 +218,70 @@ const PageMasterUiSchema = (theme) => {
                 disableAction: true,
                 disableSelection: true,
                 enableDrag: true
-              }
-            },
-            elements: [
-              {
-                accessorKey: "name",
-                header: "Name",
-                size: 300,
-                type: "string"
-              },
-              {
-                accessorKey: "type",
-                header: "Type",
-                size: 300,
-                type: "string"
               },
-              {
-                header: "Edit",
-                field: "Reject_Records",
-                size: 150,
-                type: "action",
-                widget: {
+              action: [
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "TableEditIcon",
+                      size: "small",
+                      startIcon: "EditIcon",
                       onClick: "Edit_Components",
-                      tooltipMessage: "Edit This Record"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      tooltipMessage: "Edit This Record",
+                      name: "Edit"
                     }
                   }
-                }
-              },
-              {
-                header: "Delete",
-                field: "Reject_Records",
-                size: 150,
-                type: "action",
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "Bin",
+                      size: "small",
+                      startIcon: "Bin",
                       onClick: "deletePopUpComponent",
-                      tooltipMessage: "Reject This Record"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      tooltipMessage: "Reject This Record",
+                      name: "Delete"
                     }
                   }
-                }
-              },
-              {
-                header: "Copy",
-                field: "Copy_Component",
-                flex: 1,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/Copy_Component",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "FileCopyIcon",
+                      size: "small",
+                      startIcon: "FileCopyIcon",
                       onClick: "copyPasteElement",
-                      styleDefault: true
+                      styleDefault: false,
+                      name: "Copy"
                     }
                   }
                 }
+              ]
+            },
+            elements: [
+              {
+                accessorKey: "name",
+                header: "Name",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "type",
+                header: "Type",
+                size: 300,
+                type: "string"
               }
             ]
           },
@@ -361,93 +354,70 @@ const PageMasterUiSchema = (theme) => {
                 disableAction: true,
                 disableSelection: true,
                 enableDrag: true
-              }
-            },
-            elements: [
-              {
-                accessorKey: "eventType",
-                header: "Event's Type",
-                size: 300,
-                type: "string"
-              },
-              {
-                accessorKey: "Handler",
-                header: "Handler",
-                size: 200,
-                type: "string"
               },
-              {
-                accessorKey: "Edit_Approve_Records",
-                header: "Edit",
-                type: "action",
-                size: 150,
-                widget: {
+              action: [
+                {
                   type: "Control",
                   scope: "#/properties/Edit_Records",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
                       size: "small",
-                      icon: "TableEditIcon",
+                      startIcon: "EditIcon",
                       tooltipMessage: "Edit This Record",
-                      onClick: "editEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "editEvent",
+                      name: "Edit"
                     }
                   }
-                }
-              },
-              {
-                accessorKey: "Reject_Records",
-                header: "Delete",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "Bin",
+                      size: "small",
+                      startIcon: "Bin",
                       tooltipMessage: "Reject This Record",
-                      onClick: "deletePopUpEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "deletePopUpEvent",
+                      name: "Delete"
                     }
                   }
-                }
-              },
-              {
-                header: "Copy",
-                field: "Copy_Event",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/Copy_Event",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "FileCopyIcon",
+                      size: "small",
+                      startIcon: "FileCopyIcon",
                       onClick: "copyPasteElement",
-                      styleDefault: true
+                      styleDefault: true,
+                      name: "Copy"
                     }
                   }
                 }
+              ]
+            },
+            elements: [
+              {
+                accessorKey: "eventType",
+                header: "Event's Type",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "Handler",
+                header: "Handler",
+                size: 200,
+                type: "string"
               }
             ]
           }
@@ -6256,6 +6226,7 @@ const ComponentSchema = {
         { title: "Data Card", const: "card" },
         { title: "Check Box", const: "CheckBox" },
         { title: "Container", const: "WrapperSection" },
+        { title: "Tab Container", const: "HorizontalLayout" },
         { title: "Data Grid", const: "DataGrid" },
         { title: "Date", const: "Date" },
         { title: "Time Stamp", const: "DateTime" },
@@ -6263,6 +6234,7 @@ const ComponentSchema = {
         { title: "Empty Box", const: "EmptyBox" },
         { title: "File Handler", const: "FileInput" },
         { title: "Graph", const: "Graph" },
+        { title: "Image", const: "Image" },
         { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
         { title: "Leaderboard", const: "LeaderBoard" },
@@ -6304,6 +6276,13 @@ const ComponentSchema = {
         { title: "Amount Column", const: "amount" }
       ]
     },
+    variant: {
+      oneOf: [
+        { title: "Outlined", const: "outlined" },
+        { title: "Filled", const: "filled" },
+        { title: "Standard", const: "standard" }
+      ]
+    },
     orientation: {
       oneOf: [
         { title: "Horizontal", const: "horizontal" },
@@ -6386,20 +6365,6 @@ const ComponentSchema = {
         }
       }
     },
-    events: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          eventType: {
-            type: "string"
-          },
-          configType: {
-            type: "string"
-          }
-        }
-      }
-    },
     sectionLabels: {
       type: "array",
       items: {
@@ -6564,7 +6529,34 @@ const ComponentSchema = {
         { title: "Error Icon", const: "ErrorIcon" },
         { title: "Refresh Icon", const: "RefreshIcon" },
         { title: "Download Icon", const: "DownloadIcon" },
-        { title: "Exception Icon", const: "ExceptionIcon" }
+        { title: "Download All Icon", const: "DownloadAllIcon" },
+        { title: "Exception Icon", const: "ExceptionIcon" },
+        { "title": "Alarm Icon", "const": "AlarmIcon" },
+        { "title": "Click Icon", "const": "ClickIcon" },
+        { "title": "Content Copy Icon", "const": "ContentCopyIcon" },
+        { "title": "File Copy Icon", "const": "FileCopyIcon" },
+        { "title": "Pause Icon", "const": "PauseIcon" },
+        { "title": "Play Icon", "const": "PlayIcon" },
+        { "title": "Close Icon", "const": "CloseIcon" },
+        { "title": "Replay Icon", "const": "ReplayIcon" },
+        { "title": "Delete Icon", "const": "DeleteIcon" },
+        { "title": "Drafts Icon", "const": "DraftsIcon" },
+        { "title": "Perm Phone Msg Icon", "const": "PermPhoneMsgIcon" },
+        { "title": "Paste Icon", "const": "PasteIcon" },
+        { "title": "Prev Icon", "const": "PrevIcon" },
+        { "title": "Verified Icon", "const": "VerifiedIcon" },
+        { "title": "Table Add Icon", "const": "TableAddIcon" },
+        { "title": "Table Download Icon", "const": "TableDownloadIcon" },
+        { "title": "Audit Trail Icon", "const": "AuditTrailIcon" },
+        { "title": "View Component", "const": "View" },
+        { "title": "Table Edit Icon", "const": "TableEditIcon" },
+        { "title": "Maximize Icon", "const": "Maximize" },
+        { "title": "Minimize Icon", "const": "Minimize" },
+        { "title": "Subtract Icon", "const": "Subtract" },
+        { "title": "Bin Icon", "const": "Bin" },
+        { "title": "Export Icon", "const": "Export" },
+        { "title": "Table Paste Icon", "const": "TablePaste" },
+        { "title": "Clone Icon", "const": "CloneIcon" }
       ]
     },
     color: {
@@ -6693,53 +6685,64 @@ const componentBasicUiSchema = (theme) => {
               {
                 type: "Control",
                 scope: "#/properties/layout",
-                layout: 12,
-                options: {
-                  detail: {
-                    type: "HorizontalLayout",
-                    elements: [
-                      {
-                        type: "Control",
-                        scope: "#/properties/key",
-                        options: {
-                          widget: "SelectInputField"
-                        },
-                        config: {
-                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                          main: {
-                            label: "Screen Size"
-                          }
-                        }
-                      },
-                      {
-                        type: "Control",
-                        scope: "#/properties/value",
-                        options: {
-                          widget: "InputField"
-                        },
-                        config: {
-                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                          main: {
-                            label: "Value",
-                            type: "number",
-                            helperText: "Number should be in range of 0 to 12",
-                            errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-                          }
-                        }
-                      },
-                      {
-                        type: "Control",
-                        scope: "#/properties/proc",
-                        config: {
-                          layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-                        },
-                        options: {
-                          widget: "EmptyBox"
-                        }
+                config: {
+                  layout: 12,
+                  main: {
+                    label: "Layout",
+                    childElementLabel: "Layout"
+                  },
+                  style: {
+                    marginLeft: "-24px",
+                    marginBottom: "24px !important",
+                    labelStyle: {
+                      marginLeft: "24px"
+                    },
+                    detailsStyle: {
+                      marginLeft: "24px"
+                    }
+                  }
+                },
+                elements: [
+                  {
+                    type: "Control",
+                    scope: "#/properties/key",
+                    options: {
+                      widget: "SelectInputField"
+                    },
+                    config: {
+                      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                      main: {
+                        label: "Screen Size"
+                      }
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/value",
+                    options: {
+                      widget: "InputField"
+                    },
+                    config: {
+                      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                      main: {
+                        label: "Value",
+                        type: "number",
+                        helperText: "Number should be in range of 0 to 12",
+                        errorMessage: "Number Can't be greater than 12 and can't be less than 0."
                       }
-                    ]
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/proc",
+                    config: {
+                      layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+                    },
+                    options: {
+                      widget: "EmptyBox"
+                    }
                   }
-                }
+                ]
               }
             ]
           }
@@ -7204,54 +7207,64 @@ const CoreSection = {
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 12,
-      options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Screen Size"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/value",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value",
-                  type: "number",
-                  helperText: "Number should be in range of 0 to 12",
-                  errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/proc",
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
-              },
-              options: {
-                widget: "EmptyBox"
-              }
+      config: {
+        layout: 12,
+        main: {
+          label: "Layout",
+          childElementLabel: "Layout"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "SelectInputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Screen Size"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
+              type: "number",
+              helperText: "Number should be in range of 0 to 12",
+              errorMessage: "Number Can't be greater than 12 and can't be less than 0."
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/proc",
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          },
+          options: {
+            widget: "EmptyBox"
+          }
         }
-      }
+      ]
     }
   ]
 };
@@ -7328,95 +7341,71 @@ const EventSection = (theme) => {
             disableAction: true,
             disableSelection: true,
             enableDrag: true
-          }
-        },
-        elements: [
-          {
-            accessorKey: "eventType",
-            header: "Event's Type",
-            type: "string",
-            size: 300
           },
-          {
-            accessorKey: "Handler",
-            header: "Handler",
-            type: "string",
-            size: 200
-          },
-          {
-            accessorKey: "Edit_Approve_Records",
-            header: "Edit",
-            size: 150,
-            type: "action",
-            widget: {
+          action: [
+            {
               type: "Control",
               scope: "#/properties/Edit_Records",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
                   size: "small",
-                  icon: "TableEditIcon",
+                  startIcon: "EditIcon",
                   tooltipMessage: "Edit This Record",
-                  onClick: "eventEditHandler"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  onClick: "eventEditHandler",
+                  name: "Edit"
                 }
               }
-            }
-          },
-          {
-            accessorKey: "Reject_Records",
-            header: "Delete",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
               scope: "#/properties/RejectButton",
               accessorKeyName: "Reject_Records",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "Bin",
+                  startIcon: "Bin",
                   tooltipMessage: "Reject This Record",
-                  onClick: "deletePopUpEvent"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  onClick: "deletePopUpEvent",
+                  name: "Delete",
+                  size: "small"
                 }
               }
-            }
-          },
-          {
-            header: "Copy",
-            field: "Copy_Event",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
               scope: "#/properties/Copy_Event",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "FileCopyIcon",
+                  startIcon: "FileCopyIcon",
                   onClick: "copyPasteElement",
                   tooltipMessage: "Reject This Record",
-                  styleDefault: true
+                  styleDefault: false,
+                  name: "Copy"
                 }
               }
             }
+          ]
+        },
+        elements: [
+          {
+            accessorKey: "eventType",
+            header: "Event's Type",
+            type: "string",
+            size: 300
+          },
+          {
+            accessorKey: "Handler",
+            header: "Handler",
+            type: "string",
+            size: 200
           }
         ]
       }
@@ -7451,44 +7440,55 @@ const emptyBox$1 = (scope, layout) => {
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
-  layout: 12,
-  options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/key",
-          options: {
-            widget: "SelectInputField"
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Screen Size"
-            }
-          }
-        },
-        {
-          type: "Control",
-          scope: "#/properties/value",
-          options: {
-            widget: "InputField"
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Value",
-              type: "number",
-              helperText: "Number should be in range of 0 to 12",
-              errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-            }
-          }
-        },
-        emptyBox$1("cardEmpty")
-      ]
+  config: {
+    layout: 12,
+    main: {
+      label: "Card Layout",
+      childElementLabel: "Card Layout"
+    },
+    style: {
+      marginLeft: "-24px",
+      marginBottom: "24px !important",
+      labelStyle: {
+        marginLeft: "24px"
+      },
+      detailsStyle: {
+        marginLeft: "24px"
+      }
     }
-  }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/key",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Screen Size"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/value",
+      options: {
+        widget: "InputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Value",
+          type: "number",
+          helperText: "Number should be in range of 0 to 12",
+          errorMessage: "Number Can't be greater than 12 and can't be less than 0."
+        }
+      }
+    },
+    emptyBox$1("cardEmpty")
+  ]
 };
 const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
@@ -7654,6 +7654,16 @@ const BaseSection = {
 const buildPropertiesSection = function(type) {
   let uiSchema = _.cloneDeep(BaseSection);
   switch (type) {
+    case "Array":
+      uiSchema.elements = [
+        getRadioInputField("allExpanded", "Initial Expand", ["YES", "NO"]),
+        getRadioInputField("disableAddButton", "Disable Add Button", ["YES", "NO"]),
+        getRadioInputField("disableExpandAllButton", "Disable Expand Buttons", ["YES", "NO"]),
+        getRadioInputField("disableRowActions", "Disable Row Actions", ["YES", "NO"]),
+        getInputField("childElementLabel", "Child Element Label"),
+        emptyBox$1("empty1", { xs: 12, sm: 6, md: 4, lg: 3 })
+      ];
+      break;
     case "TreeMap":
       uiSchema.elements = [
         getSelectField("orientation", "orientation"),
@@ -7708,8 +7718,10 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
-        emptyBox$1("TextEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 }),
-        getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
+        getSelectField("variant", "Variant"),
+        emptyBox$1("TextEmpty1", { xs: 6, sm: 6, md: 0, lg: 3 }),
+        getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element"),
+        getInputField("keyName", "Event Key Name")
       ];
       break;
     case "TextArea":
@@ -7784,6 +7796,12 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
       ];
       break;
+    case "Box":
+      uiSchema.elements = [
+        getSelectField("iconName", "Icon Name"),
+        emptyBox$1("BoxEmpty1", { xs: 6, sm: 6, md: 4, lg: 8 })
+      ];
+      break;
     case "Graph":
       uiSchema.elements = [
         getInputField("height", "Height"),
@@ -7860,21 +7878,47 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
+        getSelectField("variant", "Variant"),
         emptyBox$1("SelectEmpty")
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
+        getSelectField("variant", "Variant"),
         emptyBox$1("MultipleSelectEmpty1", { xs: 0, sm: 6, md: 4, lg: 4 }),
         emptyBox$1("MultipleSelectEmpty2")
       ];
       break;
+    case "Date":
+      uiSchema.elements = [
+        getSelectField("variant", "Variant"),
+        emptyBox$1("DateEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
+      ];
+      break;
+    case "DateTime":
+      uiSchema.elements = [
+        getSelectField("variant", "Variant"),
+        emptyBox$1("DateTimeEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
+      ];
+      break;
     case "Thought":
       uiSchema.elements = [
         getTextArea("thought", "Today's thought", false)
       ];
       break;
+    case "Image":
+      uiSchema.elements = [
+        getInputField("imageUrl", "Image URL"),
+        getInputField("height", "Image Height"),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
+      ];
+      break;
+    case "FileInput":
+      uiSchema.elements = [
+        getRadioInputField("variant", "Variant", ["Outlined", "Standard"])
+      ];
+      break;
   }
   return uiSchema;
 };
@@ -7985,94 +8029,69 @@ const TableSection = (theme) => {
             disableAction: true,
             disableSelection: true,
             enableDrag: true
-          }
-        },
-        elements: [
-          {
-            accessorKey: "name",
-            header: "Name",
-            type: "string",
-            size: 300
-          },
-          {
-            accessorKey: "type",
-            header: "Type",
-            type: "string",
-            size: 200
           },
-          {
-            header: "Edit Record",
-            field: "Reject_Records",
-            size: 150,
-            type: "action",
-            widget: {
+          action: [
+            {
               type: "Control",
               scope: "#/properties/RejectButton",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "TableEditIcon",
+                  startIcon: "EditIcon",
                   size: "small",
                   onClick: "editComponents",
-                  tooltipMessage: "Reject This Record"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  tooltipMessage: "Reject This Record",
+                  name: "Edit"
                 }
               }
-            }
-          },
-          {
-            header: "Delete",
-            field: "Reject_Records",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
               scope: "#/properties/RejectButton",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "Bin",
+                  startIcon: "Bin",
                   onClick: "deletePopUpComponent",
-                  tooltipMessage: "Reject This Record"
-                },
-                style: {
-                  fill: theme.palette.primary.main,
-                  "& :hover": {
-                    fill: theme.palette.primary.dark
-                  }
+                  tooltipMessage: "Reject This Record",
+                  name: "Delete",
+                  size: "small"
                 }
               }
-            }
-          },
-          {
-            header: "Copy",
-            field: "Copy_Component",
-            size: 150,
-            type: "action",
-            widget: {
+            },
+            {
               type: "Control",
               scope: "#/properties/Copy_Component",
               options: {
-                widget: "IconButton"
+                widget: "Button"
               },
               config: {
                 main: {
-                  icon: "FileCopyIcon",
+                  startIcon: "FileCopyIcon",
                   onClick: "copyPasteElement",
-                  styleDefault: true,
-                  disabled: false
+                  styleDefault: false,
+                  name: "Copy"
                 }
               }
             }
+          ]
+        },
+        elements: [
+          {
+            accessorKey: "name",
+            header: "Name",
+            type: "string",
+            size: 300
+          },
+          {
+            accessorKey: "type",
+            header: "Type",
+            type: "string",
+            size: 200
           }
         ]
       }
@@ -8092,9 +8111,6 @@ const ValueTab = {
     {
       type: "Control",
       scope: "#/properties/value",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -8165,51 +8181,61 @@ const ValidationSection = {
     {
       type: "Control",
       scope: "#/properties/validation",
-      layout: 11.5,
-      options: {
-        "elementLabelProp": "validationType",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/validationType",
-              options: {
-                widget: "SelectInputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Validation Type"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/validationValue",
-              options: {
-                widget: "InputField"
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Validation Value"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4 }
-              }
+      config: {
+        layout: 12,
+        main: {
+          label: "Validation",
+          childElementLabel: "Validation"
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px"
+          },
+          detailsStyle: {
+            marginLeft: "24px"
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/validationType",
+          options: {
+            widget: "SelectInputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Validation Type"
             }
-          ]
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/validationValue",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Validation Value"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+          }
         }
-      }
+      ]
     }
   ]
 };
@@ -8235,22 +8261,21 @@ var buildConfig = (FormData) => {
   component = { ...formData, ...component };
   return component;
 };
-const createLayoutFormat = (config2) => {
-  if (_.isEmpty(config2)) {
-    return {
-      xs: 12,
-      sm: 12,
-      md: 12,
-      lg: 12
-    };
+const createLayoutFormat = (layout, type) => {
+  if (_.isEmpty(layout)) {
+    const fullLayoutComponents = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout"];
+    if (fullLayoutComponents.includes(type)) {
+      return { xs: 12, sm: 12, md: 12, lg: 12 };
+    } else if (type === "Graph") {
+      return { xs: 12, sm: 12, md: 12, lg: 6 };
+    } else if (type === "Button") {
+      return { xs: 4, sm: 2.5, md: 2, lg: 1.5 };
+    } else {
+      return { xs: 6, sm: 6, md: 4, lg: 3 };
+    }
   }
-  let data = {
-    xs: 12,
-    sm: 12,
-    md: 6,
-    lg: 6
-  };
-  config2.map((e) => {
+  let data = {};
+  layout.map((e) => {
     data[e.key || "xs"] = +e.value || 5.5;
   });
   return data;
@@ -8370,13 +8395,14 @@ const sectionLabels = {
   Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
   SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
-  Box: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Properties", "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
   ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
   RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -8384,7 +8410,7 @@ const sectionLabels = {
   Timer: ["Core", "Events", "Style", "Validation"],
   Rank: ["Core", "Events", "Style", "Validation"],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
-  Array: ["Core", "Components", "Validation"],
+  Array: ["Core", "Components", "Properties", "Validation"],
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
   Text: ["Core", "Properties", "Events", "Style", "Validation"],
   TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -8394,7 +8420,11 @@ const sectionLabels = {
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style", "Validation"]
+  Thought: ["Core", "Properties", "Events", "Style", "Validation"],
+  Date: ["Core", "Properties", "Events", "Style", "Validation"],
+  DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
+  Image: ["Core", "Properties", "Style"],
+  FileInput: ["Core", "Properties", "Events", "Style", "Validation"]
 };
 function refreshPage(type, store2) {
   var _a, _b;
@@ -8418,7 +8448,7 @@ function refreshPage(type, store2) {
   const lastDotIndex = path.lastIndexOf(".");
   const parentPath = path.slice(0, lastDotIndex);
   const parentObj = _.get(currentConfig, parentPath);
-  if ((parentObj == null ? void 0 : parentObj.type) === "Table") {
+  if ((parentObj == null ? void 0 : parentObj.type) === "Table" || (parentObj == null ? void 0 : parentObj.type) === "ColumnGroup") {
     UiSchema.elements[0].elements[0].elements[4] = {
       type: "Control",
       scope: "#/properties/columnFormat",
@@ -8907,11 +8937,14 @@ const EventSchema = {
         { title: "Start", const: "onStart" },
         { title: "Cell Render", const: "onCellRenderer" },
         { title: "Upload", const: "onUpload" },
+        { title: "FileDelete", const: "onFileDelete" },
+        { title: "Download", const: "onDownload" },
         { title: "Back", const: "onBack" },
         { title: "Next", const: "onNext" },
         { title: "Row Movement", const: "onRowMovement" },
         { title: "Download", const: "onDownload" },
-        { title: "Fail", const: "Fail" }
+        { title: "Fail", const: "Fail" },
+        { title: "Key Down", const: "onKeyDown" }
       ]
     },
     Handler: {
@@ -9087,93 +9120,70 @@ const EventUiSchema = (theme) => {
                 disableAction: true,
                 disableSelection: true,
                 enableDrag: true
-              }
-            },
-            elements: [
-              {
-                accessorKey: "eventType",
-                header: "Event's Type",
-                size: 300,
-                type: "string"
               },
-              {
-                accessorKey: "Handler",
-                header: "Handler",
-                size: 200,
-                type: "string"
-              },
-              {
-                accessorKey: "Edit_Approve_Records",
-                header: "Edit",
-                type: "action",
-                size: 150,
-                widget: {
+              action: [
+                {
                   type: "Control",
                   scope: "#/properties/Edit_Records",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
                       size: "small",
-                      icon: "TableEditIcon",
+                      startIcon: "EditIcon",
                       tooltipMessage: "Edit This Record",
-                      onClick: "editEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "editEvent",
+                      name: "Edit"
                     }
                   }
-                }
-              },
-              {
-                accessorKey: "Reject_Records",
-                header: "Delete",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/RejectButton",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "Bin",
+                      startIcon: "Bin",
                       tooltipMessage: "Reject This Record",
-                      onClick: "deletePopUpEvent"
-                    },
-                    style: {
-                      fill: theme.palette.primary.main,
-                      "& :hover": {
-                        fill: theme.palette.primary.dark
-                      }
+                      onClick: "deletePopUpEvent",
+                      name: "Delete",
+                      size: "small"
                     }
                   }
-                }
-              },
-              {
-                header: "Copy",
-                field: "Copy_Event",
-                type: "action",
-                size: 150,
-                widget: {
+                },
+                {
                   type: "Control",
                   scope: "#/properties/Copy_Event",
                   options: {
-                    widget: "IconButton"
+                    widget: "Button"
                   },
                   config: {
                     main: {
-                      icon: "FileCopyIcon",
+                      startIcon: "FileCopyIcon",
                       onClick: "copyPasteElement",
-                      styleDefault: true
+                      styleDefault: false,
+                      name: "Copy",
+                      size: "small"
                     }
                   }
                 }
+              ]
+            },
+            elements: [
+              {
+                accessorKey: "eventType",
+                header: "Event's Type",
+                size: 300,
+                type: "string"
+              },
+              {
+                accessorKey: "Handler",
+                header: "Handler",
+                size: 200,
+                type: "string"
               }
             ]
           }
@@ -9486,9 +9496,6 @@ const APISection = {
     {
       type: "Control",
       scope: "#/properties/headers",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -9548,9 +9555,6 @@ const APISection = {
     {
       type: "Control",
       scope: "#/properties/body",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -9616,9 +9620,6 @@ const refreshSectionUiSchema = {
     {
       type: "Control",
       scope: "#/properties/refreshElements",
-      options: {
-        widget: "Array"
-      },
       config: {
         layout: 12,
         main: {
@@ -10268,9 +10269,9 @@ var service = (funcParams) => {
   };
   return {
     setPage: async function() {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      var _a, _b, _c;
       funcParams.store.setAdditionalErrors([]);
-      funcParams.store.setFormdata({});
+      funcParams.store.setFormdata((funcParams == null ? void 0 : funcParams.initFormData()) || {});
       funcParams.store.setSchema({ type: "object", properties: {} });
       funcParams.store.newData = {};
       eventGroups = {};
@@ -10278,116 +10279,11 @@ var service = (funcParams) => {
       const config2 = pageData == null ? void 0 : pageData.config;
       const uiSchema = pageData == null ? void 0 : pageData.uiSchema;
       const event2 = new CustomEvent("pageNameChanged", {
-        detail: { pageName: config2.label }
+        detail: { pageName: config2.label, hasBackIcon: config2.hasBackIcon === "NO" ? false : true }
       });
       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,
-              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: ((_d = (_c = theme == null ? void 0 : theme.palette) == null ? void 0 : _c.text) == null ? void 0 : _d.disabled) || "#AFAFAF",
-                  fontSize: "11px",
-                  textAlign: "center",
-                  lineHeight: 2,
-                  width: "fit-content",
-                  left: "50%",
-                  position: "relative",
-                  margin: 0,
-                  flexGrow: 1,
-                  height: 0,
-                  transform: "translate(-50%, 0%)"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackIcon",
-              options: {
-                widget: "Box"
-              },
-              config: {
-                main: {
-                  iconName: "PrevIcon",
-                  onClick: "backHandler",
-                  width: "fit-content"
-                },
-                style: {
-                  fill: (_f = (_e = theme == null ? void 0 : theme.palette) == null ? void 0 : _e.primary) == null ? void 0 : _f.main,
-                  width: 20,
-                  height: 0,
-                  top: 0,
-                  right: { xs: "12px", sm: "84px" },
-                  position: "absolute",
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  ":hover": {
-                    fill: (_h = (_g = theme == null ? void 0 : theme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.dark
-                  },
-                  marginRight: "20px"
-                }
-              }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/FooterBackHandlerText",
-              options: {
-                widget: "Box"
-              },
-              config: {
-                main: {
-                  heading: "Previous Page",
-                  onClick: "backHandler"
-                },
-                style: {
-                  display: { xs: "none", sm: "flex" },
-                  textAlign: "left",
-                  lineHeight: 1,
-                  height: 0,
-                  width: "fit-content",
-                  color: (_j = (_i = theme == null ? void 0 : theme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.main,
-                  fontSize: "12px",
-                  cursor: "pointer",
-                  marginLeft: "2px",
-                  top: 3,
-                  right: "12px",
-                  position: "absolute",
-                  ":hover": {
-                    color: (_l = (_k = theme == null ? void 0 : theme.palette) == null ? void 0 : _k.primary) == null ? void 0 : _l.dark
-                  },
-                  marginRight: "4px"
-                }
-              }
-            }
-          ]
-        }
-      );
-      const schema2 = (_m = pageData == null ? void 0 : pageData.schema) != null ? _m : { type: "object", properties: {} };
+      (_b = (_a = funcParams == null ? void 0 : funcParams.store) == null ? void 0 : _a.theme) == null ? void 0 : _b.myTheme;
+      const schema2 = (_c = pageData == null ? void 0 : pageData.schema) != null ? _c : { type: "object", properties: {} };
       eventGroups = extractEvents(config2);
       executeEventsParameters = {
         config: {},
@@ -10401,6 +10297,15 @@ var service = (funcParams) => {
         eventGroups,
         formDataHolder
       };
+      funcParams.store.setSchema(
+        (pre) => {
+          return {
+            ...schema2,
+            ...pre,
+            properties: { ...schema2.properties, ...pre.properties }
+          };
+        }
+      );
       await executeRefreshHandler({
         config: {},
         componentName: "",
@@ -10412,15 +10317,6 @@ var service = (funcParams) => {
         eventGroups,
         formDataHolder: {}
       });
-      funcParams.store.setSchema(
-        (pre) => {
-          return {
-            ...schema2,
-            ...pre,
-            properties: { ...schema2.properties, ...pre.properties }
-          };
-        }
-      );
       uiSchema.elements.push(notifyUiSchema);
       funcParams.store.setUiSchema(uiSchema);
     },
@@ -10444,6 +10340,12 @@ var service = (funcParams) => {
     onClick: function() {
       this.callHandler("onClick");
     },
+    onKeyDown: function() {
+      this.callHandler("onKeyDown");
+    },
+    onFileDelete: async function() {
+      this.callHandler("onFileDelete");
+    },
     onMount: function() {
       this.callHandler("onMount");
     },
@@ -10467,13 +10369,14 @@ var service = (funcParams) => {
       return response == null ? void 0 : response.data;
     },
     onPaginationChange: async function(paginationValues) {
-      var _a;
+      var _a, _b;
       const apiBody = [
         { key: "size", value: paginationValues.pagination.pageSize },
         { key: "pageIndex", value: paginationValues.pagination.pageIndex },
         { key: "sorting", value: paginationValues.sorting || [] },
         { key: "filters", value: paginationValues.tableColumnConfig || [] },
-        { key: "globalFilter", value: (_a = paginationValues.globalFilter) != null ? _a : "" }
+        { key: "globalFilter", value: (_a = paginationValues.globalFilter) != null ? _a : "" },
+        { key: "expandedRowIds", value: (_b = paginationValues.expandedRowIds) != null ? _b : [] }
       ];
       const response = await this.callExecuteEvents(paginationValues, apiBody, "onLoad");
       return response == null ? void 0 : response.data;
@@ -10508,8 +10411,8 @@ var service = (funcParams) => {
     callExecuteEvents: async function(paramValue, apiBody, eventType) {
       var _a, _b;
       let LastCallResponse = void 0;
-      const eventsGroupClone = _.cloneDeep(eventGroups);
-      for (const eventConfig of (_a = eventsGroupClone == null ? void 0 : eventsGroupClone[eventType]) == null ? void 0 : _a[paramValue.path]) {
+      const cloneEventGroup = _.cloneDeep(eventGroups);
+      for (const eventConfig of (_a = cloneEventGroup == null ? void 0 : cloneEventGroup[eventType]) == null ? void 0 : _a[paramValue.path]) {
         if (eventConfig.body) {
           eventConfig.body = [
             ...eventConfig.body,
@@ -10556,7 +10459,7 @@ var service = (funcParams) => {
     },
     callHandler: async function(eventType, functionParameters) {
       var _a, _b, _c;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[funcParams.dynamicData.path.split(".").length - 1];
       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) => {
           executeEventsParameters.store.functionParameters = functionParameters;
@@ -10619,7 +10522,7 @@ const buildLeaderBoard = (config2) => {
     LeaderBoard.config.main.scoreKey = config2.scoreKey;
   }
   if (config2.layout) {
-    LeaderBoard.config.layout = createLayoutFormat(config2.layout);
+    LeaderBoard.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.style) {
     LeaderBoard.config.style = JSON.parse(config2.style);
@@ -10746,7 +10649,7 @@ const buildHorizontalBarGraph = (config2, componentScope2) => {
   const horizontalBarGraph = _.cloneDeep(HorizontalBarGraph);
   horizontalBarGraph.scope = componentScope2;
   if (config2.layout) {
-    horizontalBarGraph.config.layout = createLayoutFormat(config2.layout);
+    horizontalBarGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   horizontalBarGraph.config.main.type = config2.graphType;
   horizontalBarGraph.scope = componentScope2;
@@ -10878,7 +10781,7 @@ const buildSpeedoMeter = (config2, componentScope2) => {
 const buildPieGraph = (config2, componentScope2) => {
   const pieGraph = _.cloneDeep(PieGraph);
   if (config2.layout) {
-    pieGraph.config.layout = createLayoutFormat(config2.layout);
+    pieGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.height) {
     pieGraph.config.style.containerStyle.height = config2.height;
@@ -10903,7 +10806,7 @@ const buildStackbarGraph = (config2, componentScope2) => {
   var _a;
   const barGraph = _.cloneDeep(BarGraph);
   if (config2.layout) {
-    barGraph.config.layout = createLayoutFormat(config2.layout);
+    barGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.legendHide) {
     barGraph.config.main.legendAvailable = config2.legendHide;
@@ -10982,12 +10885,16 @@ const buildTabSection = (config2, componentScope2) => {
   if (config2.sectionLabels) {
     tab.config.main.tabLabels = config2.sectionLabels.map((e) => e.label);
   }
+  if (config2.style) {
+    tab.config.style = JSON.parse(config2.style);
+  }
   tab.config.main.id = config2.name;
   return tab;
 };
 var WrapperSection = {
   type: "WrapperLayout",
   config: {
+    layout: 12,
     main: {
       rowSpacing: 3,
       divider: true,
@@ -11010,7 +10917,7 @@ const buildWrapperSection = (config2, componentScope2) => {
     wrapper.config.style = JSON.parse(config2.style);
   }
   if (config2.layout) {
-    wrapper.config.layout = createLayoutFormat(config2.layout);
+    wrapper.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   return wrapper;
 };
@@ -11021,7 +10928,7 @@ var TextInputField = {
     widget: "InputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: ""
     },
@@ -11037,12 +10944,18 @@ const buildTextField = (config2, componentScope2) => {
   if (config2.multiline) {
     inputField.config.main.multiline = config2.multiline === "YES" ? true : false;
   }
+  if (config2.keyName) {
+    inputField.config.main.keyName = config2.keyName;
+  }
   if (config2.InputFormatingAndMasking) {
     inputField.config.main.formatStrArray = config2.InputFormatingAndMasking.map((e) => e.formatElement);
   }
   if (config2.placeholder) {
     inputField.config.main.placeholder = config2.placeholder;
   }
+  if (config2.variant) {
+    inputField.config.main.variant = config2.variant;
+  }
   if (config2.layout) {
     inputField.config.layout = createLayoutFormat(config2.layout);
   }
@@ -11057,7 +10970,7 @@ var SelectInputField = {
     widget: "SelectInputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "text",
@@ -11077,6 +10990,9 @@ const buildSelect = (config2, componentScope2) => {
   if (config2.lazyLoading) {
     selectInputField.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
+  if (config2.variant) {
+    selectInputField.config.main.variant = config2.variant;
+  }
   if (config2.layout) {
     selectInputField.config.layout = createLayoutFormat(config2.layout);
   }
@@ -11090,7 +11006,7 @@ var Button = {
     widget: "Button"
   },
   config: {
-    layout: 3,
+    layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
     main: {
       name: "Compare",
       variant: "contained",
@@ -11111,7 +11027,7 @@ const buildButton = (config2, componentScope2) => {
     config2.buttonType === "ButtonWithIconAndText" ? button.config.main.startIcon = config2.iconName : button.config.main.icon = config2.iconName;
   }
   if (config2.layout) {
-    button.config.layout = createLayoutFormat(config2.layout);
+    button.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.tooltipMessage) {
     button.config.main.tooltipMessage = config2.tooltipMessage;
@@ -11146,6 +11062,7 @@ var Table = {
   },
   elements: [],
   config: {
+    layout: 12,
     main: {
       onMount: "onMount",
       enableExpandAll: true,
@@ -11237,8 +11154,10 @@ const Box = {
     widget: "Box"
   },
   config: {
-    layout: 12,
-    main: {},
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+    main: {
+      iconName: ""
+    },
     style: {}
   }
 };
@@ -11249,6 +11168,9 @@ const buildLabel = (config2, componentScope2) => {
   if (config2.layout) {
     box.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.iconName) {
+    box.config.main.iconName = config2.iconName;
+  }
   if (config2.style) {
     box.config.style = JSON.parse(config2.style);
   }
@@ -11267,7 +11189,7 @@ const uploadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 }
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 }
   },
   "options": {
     "widget": "UploadFile"
@@ -11284,7 +11206,7 @@ const downloadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 }
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 }
   },
   "options": {
     "widget": "DownloadFile"
@@ -11309,6 +11231,7 @@ const buildUploadFile = (config2, componentScope2) => {
 const buildDownloadFile = (config2, componentScope2) => {
   const DownloadFile = _.cloneDeep(downloadFile);
   DownloadFile.scope = componentScope2;
+  DownloadFile.config.main.label = config2.label;
   if (config2.layout) {
     DownloadFile.config.layout = config2.layout;
   }
@@ -11363,7 +11286,7 @@ function Card(theme) {
       {
         type: "HorizontalLayout",
         config: {
-          layout: 8
+          layout: 9
         },
         elements: [
           {
@@ -11383,7 +11306,8 @@ function Card(theme) {
                 width: "100%",
                 height: "inherit",
                 background: "transparent",
-                borderRadius: "0px"
+                borderRadius: "0px",
+                padding: 0
               },
               layout: 12
             },
@@ -11409,7 +11333,8 @@ function Card(theme) {
                     marginLeft: "-10px",
                     marginTop: "-8px",
                     justifyContent: "start",
-                    position: "relative"
+                    position: "relative",
+                    padding: 0
                   },
                   layout: 12
                 },
@@ -11512,7 +11437,7 @@ function Card(theme) {
               height: "64px"
             }
           },
-          layout: 4
+          layout: 3
         },
         options: {
           widget: "Image"
@@ -11555,7 +11480,7 @@ var DateInputField = {
     widget: "DateInputField"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "date"
@@ -11569,7 +11494,7 @@ const DateTime = {
     widget: "DateTimeInputField"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "DateTime",
       type: "date"
@@ -11584,6 +11509,9 @@ const buildDate = (config2, componentScope2) => {
   if (config2.layout) {
     dateInputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.variant) {
+    dateInputField.config.main.variant = config2.variant;
+  }
   return dateInputField;
 };
 const buildDateTime = (config2, componentScope2) => {
@@ -11594,6 +11522,9 @@ const buildDateTime = (config2, componentScope2) => {
   if (config2.layout) {
     dateTimeInputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.variant) {
+    dateTimeInputField.config.main.variant = config2.variant;
+  }
   return dateTimeInputField;
 };
 var RankCard = {
@@ -11677,12 +11608,12 @@ var MultipleSelect = {
     widget: "MultipleSelect"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "text",
       multiple: true,
-      variant: "standard",
+      variant: "outlined",
       options: []
     }
   }
@@ -11699,6 +11630,9 @@ const buildMultiSelect = (config2, componentScope2) => {
   if (config2.value) {
     multipleSelect.config.main.options = config2.value;
   }
+  if (config2.variant) {
+    multipleSelect.config.main.variant = config2.variant;
+  }
   if (config2.lazyLoading) {
     multipleSelect.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
@@ -11721,7 +11655,7 @@ const TextArea = {
     widget: "TextArea"
   },
   config: {
-    layout: { xs: 12, sm: 12, md: 5.5, lg: 5.5 },
+    layout: 12,
     style: {
       containerStyle: {
         borderRadius: "20px"
@@ -11745,7 +11679,7 @@ const buildTextArea = (config2, componentScope2) => {
   const textArea = _.cloneDeep(TextArea);
   textArea.config.main.heading = config2.label;
   if (config2.layout) {
-    textArea.config.layout = createLayoutFormat(config2.layout);
+    textArea.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.style) {
     textArea.config.style = JSON.parse(config2.style);
@@ -11787,11 +11721,11 @@ const buildSlider = (config2, componentScope2) => {
 const Checkbox = {
   "type": "Control",
   "scope": "#/properties/username1",
-  "layout": 12,
   "options": {
     "widget": "CheckBox"
   },
   "config": {
+    "layout": { xs: 6, sm: 6, md: 4, lg: 3 },
     "main": {
       "label": "Welcome to Hyperform"
     }
@@ -11812,7 +11746,7 @@ const buildCheckbox = (config2, componentScope2) => {
 const buildLineGraph = (config2, componentScope2) => {
   const lineGraph = _.cloneDeep(LineGraph);
   if (config2.layout) {
-    lineGraph.config.layout = createLayoutFormat(config2.layout);
+    lineGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   lineGraph.config.main.header = config2.heading;
   if (config2.height) {
@@ -11857,7 +11791,7 @@ const RadioUiSchema = {
     widget: "RadioInputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       label: "Enabled",
       options: ["YES", "NO"],
@@ -11887,7 +11821,7 @@ var emptyBox = {
     widget: "EmptyBox"
   },
   config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {},
     style: {}
   }
@@ -11902,16 +11836,31 @@ const buildEmptyBox = (config2, componentScope2) => {
 const ArrayUiSchema = {
   type: "Control",
   scope: "#/properties/adjustments",
-  layout: 11.5,
-  options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: []
-    }
+  layout: 12,
+  elements: [],
+  config: {
+    main: {}
   }
 };
 const buildArray = (config2, componentScope2) => {
   const array = _.cloneDeep(ArrayUiSchema);
+  if (config2.allExpanded) {
+    array.config.main.allExpanded = config2.allExpanded === "YES" ? true : false;
+  }
+  if (config2.disableAddButton) {
+    array.config.main.disableAddButton = config2.disableAddButton === "YES" ? true : false;
+  }
+  if (config2.disableExpandAllButton) {
+    array.config.main.disableExpandAllButton = config2.disableExpandAllButton === "YES" ? true : false;
+  }
+  if (config2.disableRowActions) {
+    array.config.main.disableRowActions = config2.disableRowActions === "YES" ? true : false;
+  }
+  if (config2.style) {
+    array.config.style = JSON.parse(config2.style);
+  }
+  array.config.main.childElementLabel = config2.childElementLabel;
+  array.config.main.label = config2.label;
   array.scope = componentScope2;
   return array;
 };
@@ -11923,7 +11872,7 @@ const TextField = {
     "widget": "InputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       label: "Adhaar Card",
       formatStrArray: ["9", "9", "9", "9", " ", "9", "9", "9", "9", " ", "X9", "X9", "X9", "X9"],
@@ -11952,7 +11901,7 @@ const PanField = {
     "widget": "InputField"
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       label: "Pan Card",
       placeholder: "AAAAA0000A",
@@ -11980,7 +11929,7 @@ const FileInput = {
     widget: "FileInputField"
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       required: false,
       onUpload: "onFileUpload",
@@ -12002,6 +11951,9 @@ const buildFileInput = (config2, componentScope2) => {
   if (config2.style) {
     box.config.style = JSON.parse(config2.style);
   }
+  if (config2.variant) {
+    box.config.main.variant = config2.variant;
+  }
   return box;
 };
 const Stepper = {
@@ -12075,10 +12027,10 @@ const buildPopUp = (config2, componentScope2) => {
   popup.config.main.fullWidth = config2.fullWidth === "YES" ? true : false;
   popup.config.main.maxWidth = config2.maxWidth || false;
   if (config2.layout) {
-    popup.config.layout = createLayoutFormat(config2.layout);
+    popup.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.style) {
-    PopUP.config.style = JSON.parse(config2.style);
+    popup.config.style = JSON.parse(config2.style);
   }
   return popup;
 };
@@ -12115,10 +12067,10 @@ const buildDataGrid = (config2, componentScope2) => {
     DataGrid.config.main.label = config2.label;
   }
   if (config2.layout) {
-    DataGrid.config.layout = createLayoutFormat(config2.layout);
+    DataGrid.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.cardLayout) {
-    DataGrid.config.cardLayout = createLayoutFormat(config2.cardLayout);
+    DataGrid.config.cardLayout = createLayoutFormat(config2.cardLayout, config2.type);
   }
   if (config2.style) {
     DataGrid.config.style = JSON.parse(config2.style);
@@ -12170,6 +12122,7 @@ const TreeMap = {
   "type": "Control",
   "scope": "#/properties/TreeMap2",
   "config": {
+    layout: 12,
     "main": {
       "layout": "cartsian",
       orientation: "vertical",
@@ -12195,7 +12148,7 @@ const buildTreeMap = (config2, componentScope2) => {
     treMap.config.main.header = config2.label;
   }
   if (config2.layout) {
-    treMap.config.layout = createLayoutFormat(config2.layout);
+    treMap.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.orientation) {
     treMap.config.main.orientation = config2.orientation;
@@ -12238,7 +12191,7 @@ const buildThoughtOfTheDay = (config2, componentScope2) => {
     thought.config.main.thought = `${config2.thought}`;
   }
   if (config2.layout) {
-    thought.config.layout = createLayoutFormat(config2.layout);
+    thought.config.layout = createLayoutFormat(config2.layout, config2.type);
   }
   if (config2.label) {
     thought.config.main.label = config2.label;
@@ -12248,6 +12201,58 @@ const buildThoughtOfTheDay = (config2, componentScope2) => {
   }
   return thought;
 };
+var horizontalLayout = {
+  type: "HorizontalLayout",
+  config: {
+    layout: 12,
+    main: {
+      rowSpacing: 3,
+      divider: false
+    },
+    defaultStyle: true
+  },
+  elements: []
+};
+const buildHorizontalLayout = (config2, componentScope2) => {
+  const horizontal = _.cloneDeep(horizontalLayout);
+  horizontal.scope = componentScope2;
+  if (config2.style) {
+    horizontal.config.style = JSON.parse(config2.style);
+  }
+  if (config2.layout) {
+    horizontal.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  return horizontal;
+};
+const imageUiSchema = {
+  type: "Control",
+  scope: "#/properties/Logo",
+  options: {
+    widget: "Image"
+  },
+  config: {
+    layout: 3,
+    main: {
+      url: ""
+    },
+    style: {}
+  }
+};
+const buildImage = (config2, componentScope2) => {
+  const image = _.cloneDeep(imageUiSchema);
+  image.scope = componentScope2;
+  image.config.main.url = config2.imageUrl;
+  if (config2.layout) {
+    image.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.style) {
+    image.config.style = JSON.parse(config2.style);
+  }
+  if (config2.height) {
+    image.config.style.imageStyle = { ...image.config.style.imageStyle, height: config2.height };
+  }
+  return image;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -12340,7 +12345,7 @@ function buildRule(configObj, tableName, arrayHolderName) {
 const buildSchema = (config2, tableName, isArrayType) => {
   buildRule(config2, tableName, isArrayType);
   if (config2 == null ? void 0 : config2.elements) {
-    if (config2.type == "Table" || config2.type == "Array") {
+    if (config2.type == "Array") {
       if (!schema.properties[config2.name]) {
         schema.properties[config2.name] = {
           type: "array",
@@ -12402,6 +12407,9 @@ const buildUiSchema = (config2, store2) => {
     case "WrapperSection":
       elements = buildWrapperSection(config2, componentScope2);
       break;
+    case "HorizontalLayout":
+      elements = buildHorizontalLayout(config2, componentScope2);
+      break;
     case "Text":
       elements = buildTextField(config2, componentScope2);
       break;
@@ -12502,6 +12510,9 @@ const buildUiSchema = (config2, store2) => {
     case "Thought":
       elements = buildThoughtOfTheDay(config2, componentScope2);
       break;
+    case "Image":
+      elements = buildImage(config2, componentScope2);
+      break;
     default:
       schema = {
         type: "object",
@@ -12521,13 +12532,26 @@ const buildUiSchema = (config2, store2) => {
         });
       }
       elements.elements = config2.elements.map((cellElem, elemInd) => {
-        return {
+        const commonProperties = {
           accessorKey: cellElem.name,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
-          type: cellElem.columnFormat,
-          elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : []
+          enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
+          columnFilterModeOptions: cellElem.filteringOptions,
+          enableSorting: cellElem.enableSorting === "No" ? false : true,
+          columnKey: cellElem.columnKey
         };
+        if (cellElem.type) {
+          const tableElem = {
+            widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store2) : void 0,
+            ...commonProperties,
+            ...cellElem.type === "ColumnGroup" ? buildUiSchema(cellElem, store2) : {}
+          };
+          return tableElem;
+        } else {
+          return { ...commonProperties };
+        }
       });
     } else if (config2.type == "Table") {
       const sizeMap = {};
@@ -12542,7 +12566,7 @@ const buildUiSchema = (config2, store2) => {
       config2.elements.filter((cellElem, elemInd) => {
         const commonProperties = {
           accessorKey: cellElem.name,
-          type: cellElem.columnFormat,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
           enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
@@ -12563,8 +12587,8 @@ const buildUiSchema = (config2, store2) => {
           }
           const tableElem = {
             widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store2) : void 0,
-            elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : [],
-            ...commonProperties
+            ...commonProperties,
+            ...cellElem.type === "ColumnGroup" ? buildUiSchema(cellElem, store2) : {}
           };
           rowElements.push(tableElem);
         } else {
@@ -12574,10 +12598,6 @@ const buildUiSchema = (config2, store2) => {
       elements.elements = rowElements;
       elements.config.action = tableActionElement;
       elements.config.main.headerIcons.elements = tableHeaderElements;
-    } else if (config2.type == "Array") {
-      elements.options.detail.elements = config2.elements.map((e, elemInd) => {
-        return buildUiSchema(e, store2);
-      });
     } else {
       elements.elements = config2.elements.map((e, elemInd) => {
         return buildUiSchema(e, store2);