impaktapps-ui-builder 0.0.595 → 0.0.961

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

@@ -66,7 +66,7 @@ const PageMasterUiSchema = (theme) => {
               widget: "InputField"
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
               main: {
                 label: "Name",
                 options: [],
@@ -84,7 +84,7 @@ const PageMasterUiSchema = (theme) => {
               widget: "SelectInputField"
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
               main: {
                 label: "Template",
                 options: [
@@ -104,7 +104,7 @@ const PageMasterUiSchema = (theme) => {
               widget: "InputField"
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
               main: {
                 label: "Label",
                 options: [],
@@ -112,6 +112,16 @@ const PageMasterUiSchema = (theme) => {
                 required: true
               }
             }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/EmptyBox",
+            config: {
+              layout: { xs: 6, sm: 6, md: 0, lg: 0 }
+            },
+            options: {
+              widget: "EmptyBox"
+            }
           }
         ]
       },
@@ -317,7 +327,7 @@ const PageMasterUiSchema = (theme) => {
           widget: "EmptyBox"
         },
         config: {
-          layout: { xs: 0, sm: 8, md: 8, lg: 8 }
+          layout: { xs: 8, sm: 10 }
         }
       },
       {
@@ -327,7 +337,7 @@ const PageMasterUiSchema = (theme) => {
           widget: "Button"
         },
         config: {
-          layout: 11.9,
+          layout: { xs: 4, sm: 2 },
           main: {
             name: "Save",
             startIcon: "ApproveIcon",
@@ -335,10 +345,6 @@ const PageMasterUiSchema = (theme) => {
             type: "text",
             onClick: "saveHandler",
             size: "medium"
-          },
-          style: {
-            width: { xs: "90%", sm: "90%", md: "20%", lg: "10%" },
-            float: "right"
           }
         }
       },
@@ -592,7 +598,7 @@ const PageMasterUiSchema = (theme) => {
                 height: 0,
                 margin: 0,
                 top: 0,
-                right: "82px",
+                right: { xs: "12px", sm: "84px" },
                 position: "absolute",
                 fontSize: "12px",
                 cursor: "pointer",
@@ -614,6 +620,7 @@ const PageMasterUiSchema = (theme) => {
                 onClick: "backHandler"
               },
               style: {
+                display: { xs: "none", sm: "flex" },
                 textAlign: "left",
                 lineHeight: 1,
                 height: 0,
@@ -6261,6 +6268,36 @@ const ComponentSchema = {
         }
       }
     },
+    enableColumnFilter: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          keyName: {
+            type: "string"
+          }
+        }
+      }
+    },
+    filteringOptions: {
+      type: "array",
+      items: {
+        oneOf: [
+          { const: "fuzzy", title: "Fuzzy" },
+          { const: "contains", title: "Contain" },
+          { const: "startsWith", title: "Starts with" },
+          { const: "endsWith", title: "Ends with" },
+          { const: "equals", title: "Equals" },
+          { const: "notEquals", title: "Not Equals" },
+          { const: "between", title: "Between" },
+          { const: "betweenInclusive", title: "Between inclusive" },
+          { const: "greaterThan", title: "Greater than" },
+          { const: "greaterThanOrEqualTo", title: "Greater than or equal to" },
+          { const: "lessThan", title: "Less than" },
+          { const: "lessThanOrEqualTo", title: "Less than or equal to" }
+        ]
+      }
+    },
     legendLabels: {
       type: "array",
       items: {
@@ -6339,7 +6376,8 @@ const ComponentSchema = {
         { title: "Stack Bar Graph", const: "StackBarGraph" },
         { title: "Line Graph", const: "LineGraph" },
         { title: "Pie Graph", const: "PieGraph" },
-        { title: "Horizontal Bar Graph", const: "HorizontalBarGraph" }
+        { title: "Horizontal Bar Graph", const: "HorizontalBarGraph" },
+        { title: "Stack Horizontal Bar Graph", const: "HorizontalStackBarGraph" }
       ]
     },
     iconName: {
@@ -6426,7 +6464,7 @@ const componentBasicUiSchema = (theme) => {
                   widget: "SelectInputField"
                 },
                 config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                   main: {
                     label: "Type"
                   }
@@ -6439,7 +6477,7 @@ const componentBasicUiSchema = (theme) => {
                   widget: "InputField"
                 },
                 config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                   main: {
                     label: "Name",
                     options: [],
@@ -6455,7 +6493,7 @@ const componentBasicUiSchema = (theme) => {
                   widget: "InputField"
                 },
                 config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                   main: {
                     label: "Label",
                     options: [],
@@ -6471,7 +6509,7 @@ const componentBasicUiSchema = (theme) => {
                   widget: "SelectInputField"
                 },
                 config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                   main: {
                     label: "Column Format"
                   }
@@ -6481,7 +6519,7 @@ const componentBasicUiSchema = (theme) => {
                 type: "Control",
                 scope: "#/properties/proc",
                 config: {
-                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
                 },
                 options: {
                   widget: "EmptyBox"
@@ -6491,7 +6529,7 @@ const componentBasicUiSchema = (theme) => {
                 type: "Control",
                 scope: "#/properties/proc",
                 config: {
-                  layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                  layout: { xs: 0, sm: 0, md: 4, lg: 4 }
                 },
                 options: {
                   widget: "EmptyBox"
@@ -6512,7 +6550,7 @@ const componentBasicUiSchema = (theme) => {
                           widget: "SelectInputField"
                         },
                         config: {
-                          layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                           main: {
                             label: "Screen Size"
                           }
@@ -6525,7 +6563,7 @@ const componentBasicUiSchema = (theme) => {
                           widget: "InputField"
                         },
                         config: {
-                          layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                           main: {
                             label: "Value",
                             type: "number",
@@ -6538,7 +6576,7 @@ const componentBasicUiSchema = (theme) => {
                         type: "Control",
                         scope: "#/properties/proc",
                         config: {
-                          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                          layout: { xs: 0, sm: 0, md: 4, lg: 4 }
                         },
                         options: {
                           widget: "EmptyBox"
@@ -6741,17 +6779,7 @@ const componentBasicUiSchema = (theme) => {
           widget: "EmptyBox"
         },
         config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
-        },
-        config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+          layout: { xs: 4, sm: 8 }
         }
       },
       {
@@ -6761,7 +6789,7 @@ const componentBasicUiSchema = (theme) => {
           widget: "Button"
         },
         config: {
-          layout: 1.8,
+          layout: { xs: 4, sm: 2 },
           main: {
             name: "Ok",
             startIcon: "ApproveIcon",
@@ -6769,9 +6797,6 @@ const componentBasicUiSchema = (theme) => {
             type: "text",
             onClick: "okHandler",
             size: "medium"
-          },
-          style: {
-            float: "right"
           }
         }
       },
@@ -6782,7 +6807,7 @@ const componentBasicUiSchema = (theme) => {
           widget: "Button"
         },
         config: {
-          layout: 1.8,
+          layout: { xs: 4, sm: 2 },
           main: {
             name: "Save & Exit",
             startIcon: "ApproveIcon",
@@ -6790,9 +6815,6 @@ const componentBasicUiSchema = (theme) => {
             type: "text",
             onClick: "saveHandler",
             size: "medium"
-          },
-          style: {
-            float: "right"
           }
         }
       },
@@ -6864,7 +6886,7 @@ const componentBasicUiSchema = (theme) => {
                 height: 0,
                 margin: 0,
                 top: 0,
-                right: "90px",
+                right: { xs: "12px", sm: "84px" },
                 position: "absolute",
                 fontSize: "12px",
                 cursor: "pointer",
@@ -6886,6 +6908,7 @@ const componentBasicUiSchema = (theme) => {
                 onClick: "backHandler"
               },
               style: {
+                display: { xs: "none", sm: "flex" },
                 textAlign: "left",
                 lineHeight: 1,
                 height: 0,
@@ -6896,7 +6919,7 @@ const componentBasicUiSchema = (theme) => {
                 marginLeft: "2px",
                 marginRight: 0,
                 top: 3,
-                right: "20px",
+                right: "12px",
                 position: "absolute",
                 ":hover": {
                   color: theme.palette.primary.dark
@@ -6920,7 +6943,7 @@ const CoreSection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Type",
           type: "text"
@@ -6934,7 +6957,7 @@ const CoreSection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Name"
         }
@@ -6947,7 +6970,7 @@ const CoreSection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Label"
         }
@@ -6960,7 +6983,7 @@ const CoreSection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Column Format"
         }
@@ -6970,7 +6993,7 @@ const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
       },
       options: {
         widget: "EmptyBox"
@@ -6980,7 +7003,7 @@ const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
       },
       options: {
         widget: "EmptyBox"
@@ -7002,7 +7025,7 @@ const CoreSection = {
                 widget: "SelectInputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Screen Size"
                 }
@@ -7015,7 +7038,7 @@ const CoreSection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Value",
                   type: "number",
@@ -7028,7 +7051,7 @@ const CoreSection = {
               type: "Control",
               scope: "#/properties/proc",
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
               },
               options: {
                 widget: "EmptyBox"
@@ -7141,17 +7164,29 @@ const EventSection = (theme) => {
   };
   return uiSchema;
 };
-var emptyBox = {
-  type: "Control",
-  scope: "#/properties/emptyBox",
-  options: {
-    widget: "EmptyBox"
-  },
-  config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
-    main: {},
-    style: {}
+const emptyBox$1 = (scope, layout) => {
+  if (layout !== void 0) {
+    return {
+      type: "Control",
+      scope: `#/properties/${scope}`,
+      options: {
+        widget: "EmptyBox"
+      },
+      config: {
+        layout
+      }
+    };
   }
+  return {
+    type: "Control",
+    scope: "#/properties/empty",
+    options: {
+      widget: "EmptyBox"
+    },
+    config: {
+      layout: { xs: 0, sm: 0, md: 4, lg: 4 }
+    }
+  };
 };
 const cardLayout = {
   type: "Control",
@@ -7168,7 +7203,7 @@ const cardLayout = {
             widget: "SelectInputField"
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
             main: {
               label: "Screen Size"
             }
@@ -7181,7 +7216,7 @@ const cardLayout = {
             widget: "InputField"
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
             main: {
               label: "Value",
               type: "number",
@@ -7190,7 +7225,7 @@ const cardLayout = {
             }
           }
         },
-        emptyBox
+        emptyBox$1("cardEmpty")
       ]
     }
   }
@@ -7212,14 +7247,14 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
               widget: "InputField"
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
               main: {
                 label: childLabel || "Labels for Tab"
               }
             }
           },
-          emptyBox,
-          emptyBox
+          emptyBox$1("ArrayControlEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 }),
+          emptyBox$1("ArrayControlEmpty2", { xs: 0, sm: 0, md: 4, lg: 4 })
         ]
       }
     }
@@ -7233,13 +7268,13 @@ sizeHolder.options.detail.elements[1] = {
     widget: "InputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       label: "Size"
     }
   }
 };
-sizeHolder.options.detail.elements[2] = emptyBox;
+sizeHolder.options.detail.elements[2] = emptyBox$1("sizeHolderempty");
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -7248,7 +7283,7 @@ const getInputField = (scope, label) => {
       widget: "InputField"
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
       main: {
         label
       }
@@ -7263,7 +7298,7 @@ const getRadioInputField = (scope, label, options) => {
       widget: "RadioInputField"
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
       main: {
         label,
         options
@@ -7281,7 +7316,9 @@ const buildWrapper = (label, elements) => {
       },
       wrapperStyle: {
         marginTop: "-6px",
-        marginBottom: "-8px"
+        marginBottom: "-8px",
+        marginLeft: "-34px",
+        width: "108%"
       },
       componentsBoxStyle: {
         marginLeft: "24px"
@@ -7313,7 +7350,8 @@ const getTextArea = (scope, heading, hideButton, layout) => {
       main: {
         heading,
         minRows: 8,
-        hideButton
+        hideButton,
+        enableCodeEditor: true
       }
     }
   };
@@ -7326,7 +7364,7 @@ const getSelectField = (scope, label, options) => {
       widget: "SelectInputField"
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
       main: {
         label,
         type: "text"
@@ -7334,8 +7372,25 @@ const getSelectField = (scope, label, options) => {
     }
   };
 };
+const getMultiSelectField = (scope, label) => {
+  return {
+    type: "Control",
+    scope: `#/properties/${scope}`,
+    options: {
+      widget: "MultipleSelect"
+    },
+    config: {
+      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      main: {
+        multiple: true,
+        label,
+        options: []
+      }
+    }
+  };
+};
 const GraphSection = {
-  type: "HorizontalLayout",
+  type: "WrapperLayout",
   elements: []
 };
 const buildPropertiesSection = function(type) {
@@ -7348,7 +7403,7 @@ const buildPropertiesSection = function(type) {
         getInputField("graphHeight", "Graph Height"),
         getInputField("graphWidth", "Graph Width"),
         getInputField("graphZoomHeight", "Zoom Height"),
-        emptyBox
+        emptyBox$1("TreeEmpty", { xs: 6, sm: 6, md: 4, lg: 4 })
       ];
       break;
     case "InputSlider":
@@ -7356,9 +7411,9 @@ const buildPropertiesSection = function(type) {
         getInputField("max", "Max Limit"),
         getInputField("step", "Step"),
         getInputField("min", "Min Limit"),
+        emptyBox$1("InputSliderEmpty1", { xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"]),
-        emptyBox,
-        emptyBox
+        emptyBox$1("InputSliderEmpty2", { xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
     case "DataGrid":
@@ -7367,8 +7422,8 @@ const buildPropertiesSection = function(type) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
-        emptyBox,
-        emptyBox,
+        emptyBox$1("DataGridEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }),
+        emptyBox$1("DataGridEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 }),
         cardLayout
       ];
       break;
@@ -7379,7 +7434,7 @@ const buildPropertiesSection = function(type) {
         getInputField("resetText", "Reset Text"),
         getInputField("completeText", "Complete Text"),
         getSelectField("orientation", "Orientation Type"),
-        emptyBox,
+        emptyBox$1("Stepper", { xs: 6, sm: 6, md: 4, lg: 4 }),
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -7387,22 +7442,23 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
         getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
-        getInputField("maxWidth", "Max. Width")
+        getInputField("maxWidth", "Max. Width"),
+        emptyBox$1("PopUpEmpty", { xs: 6, sm: 6, md: 0, lg: 0 })
       ];
       break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox,
-        emptyBox,
+        emptyBox$1("TextEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 }),
+        emptyBox$1("TextEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox,
-        emptyBox
+        getRadioInputField("enableCodeEditor", "Enable Code Editor", ["YES", "NO"]),
+        getInputField("codeEditorLanguage", "Enter Code Language")
       ];
       break;
     case "SpeedoMeter":
@@ -7412,7 +7468,7 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
         getInputField("width", "Speedometer Width"),
-        emptyBox
+        emptyBox$1("SpeedoMeterEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
       ];
       break;
     case "RankCard":
@@ -7421,8 +7477,8 @@ const buildPropertiesSection = function(type) {
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
         getInputField("description", "Card Description"),
-        emptyBox,
-        emptyBox
+        emptyBox$1("RankCardEmpty1"),
+        emptyBox$1("RankCardEmpty2")
       ];
       break;
     case "LeaderBoard":
@@ -7431,8 +7487,8 @@ const buildPropertiesSection = function(type) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        emptyBox,
-        emptyBox,
+        emptyBox$1("LeaderBoardEmpty1"),
+        emptyBox$1("LeaderBoardEmpty2"),
         getTextArea("functionCode", "Write Compare Code", false)
       ];
       break;
@@ -7449,8 +7505,8 @@ const buildPropertiesSection = function(type) {
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
         getInputField("bottomLabel_3", "Third BottomLabel"),
-        emptyBox,
-        emptyBox
+        emptyBox$1("ProgressBarCardEmpty1"),
+        emptyBox$1("ProgressBarCardEmpty2")
       ];
       break;
     case "card":
@@ -7458,7 +7514,7 @@ const buildPropertiesSection = function(type) {
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        emptyBox
+        emptyBox$1("cardEmpty", { xs: 6, sm: 6, md: 0, lg: 0 })
       ];
       break;
     case "Button":
@@ -7468,7 +7524,7 @@ const buildPropertiesSection = function(type) {
         getSelectField("color", "Color"),
         getInputField("tooltipMessage", "Tooltip Message"),
         getSelectField("defaultStyle", "Default Style"),
-        emptyBox
+        emptyBox$1("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
       ];
       break;
     case "Graph":
@@ -7478,10 +7534,11 @@ const buildPropertiesSection = function(type) {
         getSelectField("graphType", "Graph Type"),
         getInputField("leftLabel", "Left Label"),
         getInputField("bottomLabel", "Bottom Label"),
+        emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
-        emptyBox,
+        emptyBox$1("GraphEmpty2"),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color")
       ];
@@ -7492,38 +7549,46 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("isAccordion", "Accordion", ["YES", "No"]),
         getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
         getInputField("rowSpacing", "Row Spacing"),
-        emptyBox,
-        emptyBox
+        emptyBox$1("WrapperSectionEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }),
+        emptyBox$1("WrapperSectionEmpty2")
       ];
       break;
     case "TabSection":
       uiSchema.elements = [
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
-        emptyBox,
+        emptyBox$1("TabEmpty"),
         getArrayControl("sectionLabels", "label")
       ];
       break;
     case "Table":
-    case "LazyLoadingTable":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("SelectionAvailable", "Row Selection", ["YES", "NO"]),
         getRadioInputField("ColumnResizingAvailable", "ColumnResizing ", ["YES", "NO"]),
         getRadioInputField("DragAvailable", "Row Dragging", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
+        getRadioInputField("disableGlobalSearch", "Disable Global Search", ["YES", "NO"]),
+        getRadioInputField("disableColumnFilter", "Disable Column Filter", ["YES", "NO"]),
+        getRadioInputField("disableSorting", "Disable Sorting", ["YES", "NO"]),
+        getRadioInputField("disableEditColumn", "Disable Edit Column", ["YES", "NO"]),
+        getRadioInputField("disableFullScreenToggle", "Disable Full Screen", ["YES", "NO"]),
+        getRadioInputField("disableDensityToggle", "Disable Density Toggle", ["YES", "NO"]),
+        getRadioInputField("disableDownloadFile", "Disable Download File", ["YES", "NO"]),
+        getRadioInputField("disablePagination", "Disable Pagination", ["YES", "NO"]),
         getInputField("selectKey", "Selection Key"),
-        emptyBox,
+        getMultiSelectField("filteringOptions", "Filtering Options"),
         buildWrapper("Tree Table Properties", [
           getRadioInputField("enableRowMovement", "Row Rearrangement", ["YES", "NO"]),
           getRadioInputField("enableExpanding", "Row Expanding", ["YES", "NO"]),
           getRadioInputField("paginateExpandedRows", "Multi Page Expansion", ["YES", "NO"]),
           getRadioInputField("treeStructure", "Flat Tree Structure", ["YES", "NO"]),
-          emptyBox,
-          emptyBox
+          emptyBox$1("LazyLoadingTableEmpty2"),
+          emptyBox$1("LazyLoadingTableEmpty3")
         ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
-        sizeHolder
+        sizeHolder,
+        getArrayControl("enableColumnFilter", "keyName", "Component Name")
       ];
       break;
     case "Radio":
@@ -7535,14 +7600,14 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
-        emptyBox
+        emptyBox$1("SelectEmpty")
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        emptyBox,
-        emptyBox
+        emptyBox$1("MultipleSelectEmpty1", { xs: 0, sm: 6, md: 4, lg: 4 }),
+        emptyBox$1("MultipleSelectEmpty2")
       ];
       break;
   }
@@ -7702,7 +7767,7 @@ const ValueTab = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Label"
                 }
@@ -7715,7 +7780,7 @@ const ValueTab = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
@@ -7728,7 +7793,7 @@ const ValueTab = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
               }
             }
           ]
@@ -7756,7 +7821,7 @@ const ValidationSection = {
                 widget: "SelectInputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Validation Type"
                 }
@@ -7769,7 +7834,7 @@ const ValidationSection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Validation Value"
                 }
@@ -7782,7 +7847,7 @@ const ValidationSection = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: { xs: 0, sm: 4 }
+                layout: { xs: 0, sm: 0, md: 4 }
               }
             }
           ]
@@ -7838,8 +7903,8 @@ const flatObjectValueInArray = (config = []) => {
   });
   return data;
 };
-const clearFromLocalStorage = () => {
-  localStorage.removeItem("pageFormdata");
+const clearFromSessionStorage = () => {
+  sessionStorage.removeItem("pageFormdata");
 };
 const getNavigationHistory = (config, path) => {
   if (path) {
@@ -7865,19 +7930,19 @@ const getNavigationHistory = (config, path) => {
   }
   return void 0;
 };
-const saveFormdataInLocalStorage = (formData, path) => {
+const saveFormdataInSessionStorage = (formData, path) => {
   let updatedFormdata;
   if (path) {
-    const pageFormdata = getFormdataFromLocalStorage();
+    const pageFormdata = getFormdataFromSessionStorage();
     updatedFormdata = _.set(pageFormdata, path, buildConfig(formData));
   } else {
     updatedFormdata = buildConfig(formData);
   }
-  localStorage.setItem("pageFormdata", JSON.stringify(updatedFormdata));
+  sessionStorage.setItem("pageFormdata", JSON.stringify(updatedFormdata));
   return updatedFormdata;
 };
-const getFormdataFromLocalStorage = (path) => {
-  const pageFormdata = localStorage.getItem("pageFormdata") ? JSON.parse(localStorage.getItem("pageFormdata")) : void 0;
+const getFormdataFromSessionStorage = (path) => {
+  const pageFormdata = sessionStorage.getItem("pageFormdata") ? JSON.parse(sessionStorage.getItem("pageFormdata")) : void 0;
   let returnValue;
   if (path) {
     returnValue = _.get(pageFormdata, path);
@@ -7892,8 +7957,8 @@ async function saveHandler(store2, service2, submitHandler, pageName) {
   var _a, _b;
   (_a = store2.searchParams) == null ? void 0 : _a.get("id");
   const path = (_b = store2.searchParams) == null ? void 0 : _b.get("path");
-  saveFormdataInLocalStorage(store2.ctx.core.data, path);
-  const config = JSON.parse(localStorage.getItem("pageFormdata"));
+  saveFormdataInSessionStorage(store2.ctx.core.data, path);
+  const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
   if (_.isEmpty(store2.ctx.core.errors)) {
     try {
       const saveReturn = await submitHandler(store2, service2, config);
@@ -7905,7 +7970,7 @@ async function saveHandler(store2, service2, submitHandler, pageName) {
 }
 const navigateHandler = (store2, isSubmitted, pageName) => {
   if (isSubmitted) {
-    localStorage.removeItem("pageFormdata");
+    sessionStorage.removeItem("pageFormdata");
     store2.navigate(pageName || -1);
     store2.setNotify({
       SuccessMessage: "Submit Successfully",
@@ -7923,7 +7988,7 @@ function okHandler(store2) {
   var _a;
   const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
   if (_.isEmpty(store2.ctx.core.errors)) {
-    saveFormdataInLocalStorage(store2.ctx.core.data, path);
+    saveFormdataInSessionStorage(store2.ctx.core.data, path);
     store2.navigate(-1);
     store2.setNotify({
       SuccessMessage: "Save Successfully",
@@ -8000,7 +8065,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     getFormdata: function() {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      return getFormdataFromLocalStorage(path);
+      return getFormdataFromSessionStorage(path);
     },
     getSchema: function() {
       return ComponentSchema;
@@ -8018,7 +8083,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
-      saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      saveFormdataInSessionStorage(store2.ctx.core.data, path);
       if (path) {
         const path2 = (_c = store2.searchParams) == null ? void 0 : _c.get("path");
         const finalPath = `${path2}.elements[${rowId}]`;
@@ -8032,27 +8097,27 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     deleteComponents: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = localStorage.getItem("rowId");
+      const rowId = sessionStorage.getItem("rowId");
       store2.formData.elements.splice(rowId, 1);
-      const response = saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      const response = saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const data = path ? _.get(response, path) : response;
       store2.setFormdata(data);
       if (shouldUpdateDialog) {
         store2.updateDialog("popUpComponentSection");
       }
-      localStorage.removeItem("rowId");
+      sessionStorage.removeItem("rowId");
     },
     deleteEvent: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = localStorage.getItem("rowId");
+      const rowId = sessionStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
-      const response = saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      const response = saveFormdataInSessionStorage(store2.ctx.core.data, path);
       store2.setFormdata(_.get(response, path));
       if (shouldUpdateDialog) {
         store2.updateDialog("popUpEventSection");
       }
-      localStorage.removeItem("rowId");
+      sessionStorage.removeItem("rowId");
     },
     widgetAddClickHandler: function() {
       var _a;
@@ -8060,7 +8125,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
         store2.formData.elements = [];
       }
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.elements[${store2.formData.elements.length}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
@@ -8071,7 +8136,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
-      saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${rowId}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
@@ -8082,7 +8147,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${store2.formData.events.length}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
@@ -8091,12 +8156,12 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     deletePopUpComponent: function() {
       const rowId = dynamicData2.path.split(".")[1];
-      localStorage.setItem("rowId", rowId);
+      sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function() {
       const rowId = dynamicData2.path.split(".")[1];
-      localStorage.setItem("rowId", rowId);
+      sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpEventSection");
     }
   };
@@ -8116,11 +8181,11 @@ var pageMaster = (funcParams) => {
       var _a;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       const config = await funcParams.pageConfigProvider(id);
-      const formData = getFormdataFromLocalStorage();
+      const formData = getFormdataFromSessionStorage();
       if (formData) {
         return formData;
       }
-      saveFormdataInLocalStorage(config);
+      saveFormdataInSessionStorage(config);
       return config;
     },
     getUiSchema: function() {
@@ -8130,7 +8195,7 @@ var pageMaster = (funcParams) => {
       return PageMasterSchema;
     },
     backHandler: () => {
-      localStorage.removeItem("pageFormdata");
+      sessionStorage.removeItem("pageFormdata");
       store2.navigate("/PageMasterRecords");
     },
     onAddClickHandler: function() {
@@ -8139,7 +8204,7 @@ var pageMaster = (funcParams) => {
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
-      const response = saveFormdataInLocalStorage(store2.ctx.core.data);
+      const response = saveFormdataInSessionStorage(store2.ctx.core.data);
       if (id) {
         store2.navigate(
           `/Component?path=${`elements[${response == null ? void 0 : response.elements.length}]`}&id=${id}`
@@ -8162,7 +8227,7 @@ var pageMaster = (funcParams) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInLocalStorage(store2.ctx.core.data);
+      saveFormdataInSessionStorage(store2.ctx.core.data);
       const finalPath = `events[${store2.formData.events.length}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
@@ -8170,26 +8235,26 @@ var pageMaster = (funcParams) => {
       var _a;
       const rowId = dynamicData2.path.split(".")[1];
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
-      saveFormdataInLocalStorage(store2.ctx.core.data);
+      saveFormdataInSessionStorage(store2.ctx.core.data);
       const finalPath = `events[${rowId}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
     deleteEvent: function() {
-      const rowId = localStorage.getItem("rowId");
+      const rowId = sessionStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
-      const response = saveFormdataInLocalStorage(store2.ctx.core.data);
+      const response = saveFormdataInSessionStorage(store2.ctx.core.data);
       store2.setFormdata(response);
       store2.updateDialog("popUpPageMasterEvent");
-      localStorage.removeItem("rowId");
+      sessionStorage.removeItem("rowId");
     },
     deletePopUpComponent: function() {
       const rowId = dynamicData2.path.split(".")[1];
-      localStorage.setItem("rowId", rowId);
+      sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpPageMasterComponent");
     },
     deletePopUpEvent: function() {
       const rowId = dynamicData2.path.split(".")[1];
-      localStorage.setItem("rowId", rowId);
+      sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpPageMasterEvent");
     }
   };
@@ -8328,7 +8393,7 @@ const EventUiSchema = (theme) => {
                   widget: "SelectInputField"
                 },
                 config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                  layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                   main: {
                     label: "Event Type",
                     type: "text"
@@ -8448,17 +8513,7 @@ const EventUiSchema = (theme) => {
           widget: "EmptyBox"
         },
         config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
-        },
-        config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+          layout: { xs: 4, sm: 8 }
         }
       },
       {
@@ -8468,7 +8523,7 @@ const EventUiSchema = (theme) => {
           widget: "Button"
         },
         config: {
-          layout: 1.8,
+          layout: { xs: 4, sm: 2 },
           main: {
             name: "Ok",
             startIcon: "ApproveIcon",
@@ -8489,7 +8544,7 @@ const EventUiSchema = (theme) => {
           widget: "Button"
         },
         config: {
-          layout: 1.8,
+          layout: { xs: 4, sm: 2 },
           main: {
             name: "Save & Exit",
             startIcon: "ApproveIcon",
@@ -8665,7 +8720,7 @@ const EventUiSchema = (theme) => {
                 height: 0,
                 margin: 0,
                 top: 0,
-                right: "82px",
+                right: { xs: "12px", sm: "84px" },
                 position: "absolute",
                 fontSize: "12px",
                 cursor: "pointer",
@@ -8687,6 +8742,7 @@ const EventUiSchema = (theme) => {
                 onClick: "backHandler"
               },
               style: {
+                display: { xs: "none", sm: "flex" },
                 textAlign: "left",
                 lineHeight: 1,
                 height: 0,
@@ -8721,7 +8777,7 @@ const APISection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Method",
           type: "text"
@@ -8735,7 +8791,7 @@ const APISection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Path",
           type: "text",
@@ -8751,7 +8807,7 @@ const APISection = {
         widget: "EmptyBox"
       },
       config: {
-        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
       }
     },
     {
@@ -8761,7 +8817,7 @@ const APISection = {
         widget: "EmptyBox"
       },
       config: {
-        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+        layout: { xs: 0, sm: 0, md: 4, lg: 4 }
       }
     },
     {
@@ -8780,7 +8836,7 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Key"
                 }
@@ -8793,7 +8849,7 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
@@ -8806,7 +8862,7 @@ const APISection = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
               }
             }
           ]
@@ -8829,7 +8885,7 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Key"
                 }
@@ -8842,7 +8898,7 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
@@ -8855,7 +8911,7 @@ const APISection = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 }
               }
             }
           ]
@@ -8883,7 +8939,7 @@ const refreshSectionUiSchema = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 12, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Value"
                 }
@@ -8896,7 +8952,7 @@ const refreshSectionUiSchema = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 0, sm: 6, md: 4, lg: 4 },
                 main: {}
               }
             },
@@ -8907,7 +8963,7 @@ const refreshSectionUiSchema = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
                 main: {}
               }
             }
@@ -8917,6 +8973,18 @@ 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() {
@@ -8932,7 +9000,19 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       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] = getTextArea("eventCode", "Write Custom Code", false);
+          uiSchema.elements[1].elements[0].elements[3] = {
+            type: "Control",
+            scope: "#/properties/emptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              layout: { xs: 0, sm: 6, md: 0, lg: 0 },
+              main: {},
+              style: {}
+            }
+          };
+          uiSchema.elements[1].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false);
           schema2.required = ["eventType", "Handler", "eventCode"];
         } else if (handlerType === "api") {
           uiSchema.elements[1].elements[0].elements[2] = emptyBox;
@@ -8940,7 +9020,19 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
           schema2.required = ["eventType", "Handler", "method", "path"];
         } else if (handlerType === "inBuiltFunction") {
           uiSchema.elements[1].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
-          uiSchema.elements[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
+          uiSchema.elements[1].elements[0].elements[3] = {
+            type: "Control",
+            scope: "#/properties/emptyBox",
+            options: {
+              widget: "EmptyBox"
+            },
+            config: {
+              layout: { xs: 6, sm: 6, md: 0, lg: 0 },
+              main: {},
+              style: {}
+            }
+          };
+          uiSchema.elements[1].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
           schema2.required = ["eventType", "Handler", "inBuiltFunctionType"];
         } else if (handlerType === "refresh") {
           uiSchema.elements[1].elements[0].elements[2] = emptyBox;
@@ -8980,7 +9072,7 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${(_c = (_b = store2.formData) == null ? void 0 : _b.events) == null ? void 0 : _c.length}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
@@ -8990,7 +9082,7 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       var _a;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      saveFormdataInLocalStorage(store2.ctx.core.data, path);
+      saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${rowId}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
@@ -9005,7 +9097,7 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     deletePopUpEvent: function() {
       const rowId = dynamicData2.path.split(".")[1];
-      localStorage.setItem("rowId", rowId);
+      sessionStorage.setItem("rowId", rowId);
       store2.updateDialog("popUpEvent");
     }
   };
@@ -9125,7 +9217,6 @@ function getRefreshElements(eventConfig, eventGropus) {
   } else {
     if (eventGropus == null ? void 0 : eventGropus.onLoad) {
       result = Object.keys(eventGropus == null ? void 0 : eventGropus.onLoad);
-      result.push(result[0]);
     }
   }
   return result;
@@ -9178,7 +9269,7 @@ function executeCustomHandler(params) {
   }
 }
 function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2, formDataHolder) {
-  if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
+  if (eventConfig.type === "Select" && (handlerResponse == null ? void 0 : handlerResponse.data) && !_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
     store2.setSchema((pre) => {
       var _a;
       return {
@@ -9192,7 +9283,7 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
         }
       };
     });
-  } else if (eventConfig.type === "MultipleSelect" && !(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
+  } else if (eventConfig.type === "MultipleSelect" && (handlerResponse == null ? void 0 : handlerResponse.data) && !_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
     store2.setSchema((pre) => {
       var _a;
       return {
@@ -9210,7 +9301,7 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
       };
     });
   } else if (eventConfig.type === "page") {
-    if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data)) {
+    if (!(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
       store2.newData = {
         ...store2.newData,
         ...handlerResponse == null ? void 0 : handlerResponse.data
@@ -9244,7 +9335,7 @@ const buildBodyFormat = (body2, formData, userValue2, store2) => {
         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) || '""');
+        const value = JSON.parse(sessionStorage.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);
@@ -9378,12 +9469,12 @@ var service = (funcParams) => {
       var _a, _b, _c, _d;
       funcParams.store.setFormdata({});
       funcParams.store.newData = {};
-      const pageBasicDetailString = localStorage.getItem("pagemasterMetaData");
+      const pageBasicDetailString = sessionStorage.getItem("pagemasterMetaData");
       if (pageBasicDetailString) {
         pageData = JSON.parse(pageBasicDetailString);
       } else {
         pageData = await funcParams.pageDataProvider();
-        localStorage.setItem("pagemasterMetaData", JSON.stringify({
+        sessionStorage.setItem("pagemasterMetaData", JSON.stringify({
           schema: pageData == null ? void 0 : pageData.schema,
           uiSchema: pageData == null ? void 0 : pageData.uiSchema,
           config: pageData == null ? void 0 : pageData.config
@@ -9457,7 +9548,7 @@ var service = (funcParams) => {
                   height: 0,
                   margin: 0,
                   top: 0,
-                  right: "82px",
+                  right: { xs: "12px", sm: "84px" },
                   position: "absolute",
                   fontSize: "12px",
                   cursor: "pointer",
@@ -9479,6 +9570,7 @@ var service = (funcParams) => {
                   onClick: "backHandler"
                 },
                 style: {
+                  display: { xs: "none", sm: "flex" },
                   textAlign: "left",
                   lineHeight: 1,
                   height: 0,
@@ -9501,7 +9593,6 @@ var service = (funcParams) => {
         }
       );
       const schema2 = (_d = pageData == null ? void 0 : pageData.schema) != null ? _d : { type: "object", properties: {} };
-      eventGroups = {};
       eventGroups = extractEvents(config);
       executeEventsParameters = {
         config: {},
@@ -9530,6 +9621,7 @@ var service = (funcParams) => {
         (pre) => {
           return {
             ...schema2,
+            ...pre,
             properties: { ...schema2.properties, ...pre.properties }
           };
         }
@@ -10105,7 +10197,7 @@ const buildProgressBar = (config, componentScope) => {
   if (config.layout) {
     ProgressBar.config.layout = config.layout;
   }
-  ProgressBar.config.main.heading = config.heading;
+  ProgressBar.config.main.heading = config.label;
   if (config.bottomLabel_3) {
     ProgressBar.config.main.bottomLabel_3 = config.bottomLabel_3;
   }
@@ -10166,7 +10258,6 @@ const LineGraph = {
       hideBottomAxisLine: false,
       legend: {
         labelColor: "green",
-        legendTitle: "Our Assests",
         direction: "row",
         align: "right",
         colorRectWidth: 20
@@ -10199,11 +10290,15 @@ const buildHorizontalBarGraph = (config, componentScope) => {
   if (config.layout) {
     horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
   }
+  horizontalBarGraph.config.main.type = config.graphType;
   horizontalBarGraph.scope = componentScope;
   horizontalBarGraph.config.main.header = config.heading;
   if (config.barColor) {
     horizontalBarGraph.config.barStyle.color = config.barColor;
   }
+  if (config.xAxisValue) {
+    horizontalBarGraph.config.main.xAxisValue = config.xAxisValue;
+  }
   if (config.containerBackground) {
     horizontalBarGraph.config.containerStyle.background = config.containerBackground;
   }
@@ -10335,6 +10430,9 @@ const buildPieGraph = (config, componentScope) => {
   if (config.legendLabels) {
     pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
   }
+  if (config.xAxisValue) {
+    pieGraph.config.main.xAxisValue = config.xAxisValue;
+  }
   if (config.pieArcColors) {
     pieGraph.config.style = {
       pieStyle: {
@@ -10357,6 +10455,9 @@ const buildStackbarGraph = (config, componentScope) => {
   if (config.barColor) {
     barGraph.config.barStyle.color = config.barColor;
   }
+  if (config.xAxisValue) {
+    barGraph.config.main.xAxisValue = config.xAxisValue;
+  }
   if (config.height) {
     barGraph.config.style.containerStyle.height = config.height;
   }
@@ -10450,7 +10551,7 @@ var TextInputField = {
     widget: "InputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
     main: {
       label: ""
     },
@@ -10483,7 +10584,7 @@ var SelectInputField = {
     widget: "SelectInputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
     main: {
       label: "",
       type: "text",
@@ -10526,7 +10627,7 @@ var Button = {
       styleDefault: false,
       icon: "",
       onClick: "onClick",
-      size: "medium"
+      size: "small"
     },
     style: {}
   }
@@ -10585,20 +10686,6 @@ var Table = {
     }
   }
 };
-var lazyLoadingTable = {
-  type: "Control",
-  scope: "#/properties/LazyLoadingTable",
-  options: {
-    widget: "LazyLoadingTable"
-  },
-  elements: [],
-  config: {
-    main: {
-      onMount: "onMount",
-      columns: {}
-    }
-  }
-};
 const buildTable = (config, componentScope) => {
   const table = _.cloneDeep(Table);
   table.scope = componentScope;
@@ -10635,39 +10722,36 @@ const buildTable = (config, componentScope) => {
   if (config.downloadAllData) {
     table.config.main.downloadAllData = config.downloadAllData === "YES" ? true : false;
   }
-  if (config.Table_Download_Keys_Name) {
-    table.config.main.TableDownloadKeysName = config.Table_Download_Keys_Name.map((e) => e.KeyName);
+  if (config.disableGlobalSearch) {
+    table.config.main.disableGlobalSearch = config.disableGlobalSearch === "YES" ? true : false;
   }
-  if (config.selectKey) {
-    table.config.main.selectKey = config.selectKey;
+  if (config.disableColumnFilter) {
+    table.config.main.disableColumnFilter = config.disableColumnFilter === "YES" ? true : false;
   }
-  return table;
-};
-const buildLazyLoadingTable = (config, componentScope) => {
-  const table = _.cloneDeep(lazyLoadingTable);
-  table.scope = componentScope;
-  if (config.style) {
-    table.config.style = JSON.parse(config.style);
+  if (config.disableSorting) {
+    table.config.main.disableSorting = config.disableSorting === "YES" ? true : false;
   }
-  if (config.SelectionAvailable) {
-    table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false;
+  if (config.disableEditColumn) {
+    table.config.main.disableEditColumn = config.disableEditColumn === "YES" ? true : false;
   }
-  if (config.ColumnResizingAvailable) {
-    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? false : true;
+  if (config.disableFullScreenToggle) {
+    table.config.main.disableFullScreenToggle = config.disableFullScreenToggle === "YES" ? true : false;
   }
-  if (config.DragAvailable) {
-    table.config.main.enableDrag = config.DragAvailable === "YES" ? true : false;
+  if (config.disableDensityToggle) {
+    table.config.main.disableDensityToggle = config.disableDensityToggle === "YES" ? true : false;
   }
-  if (config.selectKey) {
-    table.config.main.selectKey = config.selectKey;
+  if (config.disableDownloadFile) {
+    table.config.main.disableDownloadFile = config.disableDownloadFile === "YES" ? true : false;
   }
-  if (config.downloadAllData) {
-    table.config.main.downloadAllData = config.downloadAllData === "YES" ? true : false;
+  if (config.disablePagination) {
+    table.config.main.disablePagination = config.disablePagination === "YES" ? true : false;
   }
   if (config.Table_Download_Keys_Name) {
     table.config.main.TableDownloadKeysName = config.Table_Download_Keys_Name.map((e) => e.KeyName);
   }
-  table.config.main.label = config.label;
+  if (config.selectKey) {
+    table.config.main.selectKey = config.selectKey;
+  }
   return table;
 };
 const Box = {
@@ -10707,7 +10791,7 @@ const uploadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 }
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 }
   },
   "options": {
     "widget": "UploadFile"
@@ -10724,7 +10808,7 @@ const downloadFile = {
     "style": {
       "backgroundColor": "none"
     },
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 }
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 }
   },
   "options": {
     "widget": "DownloadFile"
@@ -10735,10 +10819,7 @@ const buildUploadFile = (config, componentScope) => {
   UploadFile.scope = componentScope;
   UploadFile.config.main.label = config.label;
   if (config.layout) {
-    UploadFile.config.layout = config.layout;
-  }
-  if (config.layout) {
-    uploadFile.config.layout = createLayoutFormat(config.layout);
+    UploadFile.config.layout = createLayoutFormat(config.layout);
   }
   if (config.style) {
     UploadFile.config.style = config.style;
@@ -10769,121 +10850,158 @@ const buildDownloadFile = (config, componentScope) => {
   }
   return DownloadFile;
 };
-var Card = {
-  type: "WrapperLayout",
-  config: {
-    main: {
-      rowSpacing: 0.5
-    },
-    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 }
-  },
-  elements: [
-    {
-      type: "Control",
-      scope: "#/properties/programType",
-      config: {
-        main: {
-          heading: "$5000.00"
-        },
-        style: {
-          position: "absolute",
-          left: "10%",
-          top: "15%",
-          color: "#f5effc",
-          height: "80px",
-          display: "flex",
-          fontSize: { xs: "24px", md: "32px" },
-          alignItems: "center",
-          background: "inherit",
-          justifyContent: "flex-start"
-        },
-        layout: 5
+function Card(theme) {
+  const uiSchema = {
+    type: "WrapperLayout",
+    config: {
+      main: {},
+      wrapperStyle: {},
+      componentsBoxStyle: {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        width: "100%",
+        background: "transparent",
+        border: `1.5px solid ${theme.palette.primary.main}`,
+        borderRadius: "20px",
+        padding: "0px 20px 0px 20px",
+        "&: hover": {
+          background: `${theme.palette.primary.main}`,
+          border: `1.5px solid black`,
+          "& p": {
+            color: "white"
+          }
+        }
       },
-      options: {
-        widget: "Box"
-      }
+      layout: { xs: 12, sm: 12, md: 6, lg: 6 }
     },
-    {
-      type: "Control",
-      scope: "#/properties/programType",
-      config: {
-        main: {
-          url: "https://www.svgrepo.com/show/500606/loading.svg"
-        },
-        style: {
-          color: "#f5effc",
-          objectFit: "contain",
-          position: "absolute",
-          top: "10px",
-          right: "10px",
-          height: "80%",
-          width: "35%",
-          display: "flex",
-          fontSize: "34px",
-          alignItems: "center",
-          background: "inherit",
-          padding: "20px",
-          justifyContent: "left"
+    elements: [
+      {
+        type: "HorizontalLayout",
+        config: {
+          layout: 8
         },
-        layout: 5
+        elements: [
+          {
+            type: "WrapperLayout",
+            config: {
+              main: {
+                columnSpacing: 0,
+                gap: 0
+              },
+              wrapperStyle: {
+                marginTop: "4px",
+                background: "transparent"
+              },
+              componentsBoxStyle: {
+                flexDirection: "column",
+                flexWrap: "nowrap",
+                width: "100%",
+                height: "inherit",
+                background: "transparent",
+                borderRadius: "0px"
+              },
+              layout: 12
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/programType",
+                config: {
+                  main: {
+                    heading: "$5000.00"
+                  },
+                  style: {
+                    color: "black",
+                    display: "flex",
+                    fontSize: { xs: "24px", md: "28px" },
+                    fontWeight: "bold",
+                    background: "inherit",
+                    justifyContent: "flex-start",
+                    width: "calc(100%+8px)",
+                    margin: "-8px"
+                  },
+                  layout: 12
+                },
+                options: {
+                  widget: "Box"
+                }
+              },
+              {
+                type: "Control",
+                scope: "#/properties/programType",
+                config: {
+                  main: {
+                    heading: "Total Earnings"
+                  },
+                  style: {
+                    color: "black",
+                    fontSize: "16px",
+                    justifyContent: "center",
+                    textWrap: "wrap",
+                    background: "inherit",
+                    width: "calc(100%+8pc)",
+                    margin: "-8px",
+                    lineHeight: "1"
+                  },
+                  layout: 12
+                },
+                options: {
+                  widget: "Box"
+                }
+              }
+            ]
+          }
+        ]
       },
-      options: {
-        widget: "Image"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/programType",
-      config: {
-        main: {
-          heading: "Total Earnings"
-        },
-        style: {
-          position: "absolute",
-          top: "calc(60%)",
-          alignItems: "center",
-          color: "#8999e8",
-          fontSize: "16px",
-          left: "10%",
-          background: "inherit",
-          justifyContent: "center"
+      {
+        type: "Control",
+        scope: "#/properties/programType",
+        config: {
+          main: {
+            url: "https://www.svgrepo.com/show/500606/loading.svg"
+          },
+          style: {
+            containerStyle: {
+              height: "100%",
+              display: "flex",
+              justifyContent: "center"
+            },
+            imageStyle: {
+              height: "100%",
+              fontSize: "none",
+              padding: "4px",
+              marginLeft: "8px"
+            }
+          },
+          layout: 4
         },
-        layout: 12
-      },
-      options: {
-        widget: "Box"
+        options: {
+          widget: "Image"
+        }
       }
-    }
-  ]
-};
-const buildCard = (config, componentScope) => {
-  const card = _.cloneDeep(Card);
+    ]
+  };
+  return uiSchema;
+}
+const buildCard = (config, componentScope, store2) => {
+  const card = _.cloneDeep(Card(store2.theme.myTheme));
   if (config.style) {
     card.config.style = JSON.parse(config.style);
   }
-  card.elements[0].scope = `#/properties/${config.name}/properties/value`;
+  card.elements[0].elements[0].elements[0].scope = `#/properties/${config.name}/properties/value`;
   card.elements[1].scope = `#/properties/${config.name}/properties/url`;
-  card.elements[2].scope = `#/properties/${config.name}/properties/description`;
+  card.elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/description`;
   if (config.layout) {
     card.config.layout = createLayoutFormat(config.layout);
   }
   if (config.label) {
-    card.elements[0].config.main.heading = config.label;
+    card.elements[0].elements[0].elements[0].config.main.heading = config.label;
   }
   if (config.url) {
     card.elements[1].config.main.url = config.url;
   }
   if (config.description) {
-    card.elements[2].config.main.heading = config.description;
+    card.elements[0].elements[0].elements[1].config.main.heading = config.description;
   }
   return card;
 };
@@ -10894,7 +11012,7 @@ var DateInputField = {
     widget: "DateInputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       label: "",
       type: "date"
@@ -10908,7 +11026,7 @@ const DateTime = {
     widget: "DateTimeInputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       label: "DateTime",
       type: "date"
@@ -11035,7 +11153,7 @@ var MultipleSelect = {
     widget: "MultipleSelect"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       label: "",
       type: "text",
@@ -11111,6 +11229,12 @@ const buildTextArea = (config, componentScope) => {
   if (config.placeholder) {
     textArea.config.main.placeholder = config.placeholder;
   }
+  if (config.enableCodeEditor) {
+    textArea.config.main.enableCodeEditor = config.enableCodeEditor === "YES" ? true : false;
+  }
+  if (config.codeEditorLanguage) {
+    textArea.config.main.codeEditorLanguage = config.codeEditorLanguage;
+  }
   textArea.scope = componentScope;
   return textArea;
 };
@@ -11201,7 +11325,7 @@ const RadioUiSchema = {
     widget: "RadioInputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
     main: {
       label: "Enabled",
       options: ["YES", "NO"],
@@ -11310,7 +11434,7 @@ const FileInput = {
     widget: "FileInputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       required: false,
       onUpload: "onFileUpload",
@@ -11664,7 +11788,7 @@ const buildSchema = (config, tableName, isArrayType) => {
   }
   return schema;
 };
-const buildUiSchema = (config) => {
+const buildUiSchema = (config, store2) => {
   let elements = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
@@ -11728,9 +11852,6 @@ const buildUiSchema = (config) => {
     case "Array":
       elements = buildArray(config, componentScope);
       break;
-    case "LazyLoadingTable":
-      elements = buildLazyLoadingTable(config, componentScope);
-      break;
     case "Box":
       elements = buildLabel(config, componentScope);
       break;
@@ -11747,7 +11868,7 @@ const buildUiSchema = (config) => {
       elements = buildEmptyBox(config);
       break;
     case "card":
-      elements = buildCard(config);
+      elements = buildCard(config, componentScope, store2);
       break;
     case "Graph":
       switch (config.graphType) {
@@ -11762,6 +11883,7 @@ const buildUiSchema = (config) => {
           elements = buildPieGraph(config, componentScope);
           break;
         case "HorizontalBarGraph":
+        case "HorizontalStackBarGraph":
           elements = buildHorizontalBarGraph(config, componentScope);
           break;
       }
@@ -11824,46 +11946,57 @@ const buildUiSchema = (config) => {
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
           type: cellElem.columnFormat,
-          elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem)) : []
+          elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : []
         };
       });
     } else if (config.type == "Table") {
       const sizeMap = {};
+      const filterMap = {};
       if (config.sizeHolder) {
         config.sizeHolder.map((e, i) => {
           sizeMap[e.keyName] = e.value;
         });
       }
+      if (config.enableColumnFilter) {
+        config.enableColumnFilter.map((e) => {
+          filterMap[e.keyName] = true;
+        });
+      }
       elements.elements = config.elements.map((cellElem, elemInd) => {
+        var _a, _b;
         if (cellElem.type) {
           return {
             accessorKey: cellElem.name,
             header: cellElem.label || cellElem.name,
             size: sizeMap[cellElem.name] || 180,
             type: cellElem.columnFormat,
-            widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem) : void 0,
-            elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem)) : []
+            widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store2) : void 0,
+            elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : [],
+            enableColumnFilter: Object.keys(filterMap).length === 0 ? true : (_a = filterMap[cellElem.name]) != null ? _a : false,
+            columnFilterModeOptions: config.filteringOptions
           };
         } else {
           return {
             accessorKey: cellElem.name,
             type: cellElem.columnFormat,
             header: cellElem.label || cellElem.name,
-            size: sizeMap[cellElem.name] || 180
+            size: sizeMap[cellElem.name] || 180,
+            enableColumnFilter: Object.keys(filterMap).length === 0 ? true : (_b = filterMap[cellElem.name]) != null ? _b : false,
+            columnFilterModeOptions: config.filteringOptions
           };
         }
       });
     } else if (config.type == "Array") {
       elements.options.detail.elements = config.elements.map((e, elemInd) => {
-        return buildUiSchema(e);
+        return buildUiSchema(e, store2);
       });
     } else {
       elements.elements = config.elements.map((e, elemInd) => {
-        return buildUiSchema(e);
+        return buildUiSchema(e, store2);
       });
     }
   }
   return elements;
 };
-export { buildConfig, buildSchema, buildUiSchema, clearFromLocalStorage, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService, schema };
+export { buildConfig, buildSchema, buildUiSchema, clearFromSessionStorage, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService, schema };
 //# sourceMappingURL=impaktapps-ui-builder.es.js.map