impaktapps-ui-builder 0.0.383 → 0.0.382457

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

@@ -1117,7 +1117,7 @@ var lodash = { exports: {} };
     }
     var runInContext = function runInContext2(context) {
       context = context == null ? root : _2.defaults(root.Object(), context, _2.pick(root, contextProps));
-      var Array2 = context.Array, Date = context.Date, Error = context.Error, Function2 = context.Function, Math = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String = context.String, TypeError = context.TypeError;
+      var Array2 = context.Array, Date = context.Date, Error2 = context.Error, Function2 = context.Function, Math = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String = context.String, TypeError = context.TypeError;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -1602,7 +1602,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError(FUNC_ERROR_TEXT);
         }
-        return setTimeout(function() {
+        return setTimeout2(function() {
           func.apply(undefined$1, args);
         }, wait);
       }
@@ -3433,7 +3433,7 @@ var lodash = { exports: {} };
         return object[key];
       }
       var setData = shortOut(baseSetData);
-      var setTimeout = ctxSetTimeout || function(func, wait) {
+      var setTimeout2 = ctxSetTimeout || function(func, wait) {
         return root.setTimeout(func, wait);
       };
       var setToString = shortOut(baseSetToString);
@@ -4225,7 +4225,7 @@ var lodash = { exports: {} };
         }
         function leadingEdge(time) {
           lastInvokeTime = time;
-          timerId = setTimeout(timerExpired, wait);
+          timerId = setTimeout2(timerExpired, wait);
           return leading ? invokeFunc(time) : result2;
         }
         function remainingWait(time) {
@@ -4241,7 +4241,7 @@ var lodash = { exports: {} };
           if (shouldInvoke(time)) {
             return trailingEdge(time);
           }
-          timerId = setTimeout(timerExpired, remainingWait(time));
+          timerId = setTimeout2(timerExpired, remainingWait(time));
         }
         function trailingEdge(time) {
           timerId = undefined$1;
@@ -4272,12 +4272,12 @@ var lodash = { exports: {} };
             }
             if (maxing) {
               clearTimeout(timerId);
-              timerId = setTimeout(timerExpired, wait);
+              timerId = setTimeout2(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
           }
           if (timerId === undefined$1) {
-            timerId = setTimeout(timerExpired, wait);
+            timerId = setTimeout2(timerExpired, wait);
           }
           return result2;
         }
@@ -4520,7 +4520,7 @@ var lodash = { exports: {} };
       }
       function isNative(value) {
         if (isMaskable(value)) {
-          throw new Error(CORE_ERROR_TEXT);
+          throw new Error2(CORE_ERROR_TEXT);
         }
         return baseIsNative(value);
       }
@@ -5061,7 +5061,7 @@ var lodash = { exports: {} };
         if (!variable) {
           source = "with (obj) {\n" + source + "\n}\n";
         } else if (reForbiddenIdentifierChars.test(variable)) {
-          throw new Error(INVALID_TEMPL_VAR_ERROR_TEXT);
+          throw new Error2(INVALID_TEMPL_VAR_ERROR_TEXT);
         }
         source = (isEvaluating ? source.replace(reEmptyStringLeading, "") : source).replace(reEmptyStringMiddle, "$1").replace(reEmptyStringTrailing, "$1;");
         source = "function(" + (variable || "obj") + ") {\n" + (variable ? "" : "obj || (obj = {});\n") + "var __t, __p = ''" + (isEscaping ? ", __e = _.escape" : "") + (isEvaluating ? ", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n" : ";\n") + source + "return __p\n}";
@@ -5180,7 +5180,7 @@ var lodash = { exports: {} };
         try {
           return apply(func, undefined$1, args);
         } catch (e) {
-          return isError(e) ? e : new Error(e);
+          return isError(e) ? e : new Error2(e);
         }
       });
       var bindAll = flatRest(function(object, methodNames) {
@@ -5871,6 +5871,7 @@ const ComponentSchema = {
         { title: "Card", const: "card" },
         { title: "CheckBox", const: "CheckBox" },
         { title: "Container", const: "WrapperSection" },
+        { title: "DataGrid", const: "DataGrid" },
         { title: "Date", const: "Date" },
         { title: "Download File", const: "DownloadFile" },
         { title: "Empty Box", const: "EmptyBox" },
@@ -5880,11 +5881,13 @@ const ComponentSchema = {
         { title: "LeaderBoard", const: "LeaderBoard" },
         { title: "MultipleSelect", const: "MultipleSelect" },
         { title: "PanCardText", const: "PanCardText" },
+        { title: "Popup Container", const: "PopUp" },
         { title: "ProgressBar", const: "ProgressBar" },
         { title: "ProgressBar Card", const: "ProgressBarCard" },
         { title: "Select", const: "Select" },
         { title: "Slider", const: "Slider" },
         { title: "SpeedoMeter", const: "SpeedoMeter" },
+        { title: "Stepper Container", const: "Stepper" },
         { title: "Radio", const: "Radio" },
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
@@ -5897,6 +5900,12 @@ const ComponentSchema = {
         { title: "Upload File", const: "UploadFile" }
       ]
     },
+    orientation: {
+      oneOf: [
+        { title: "Horizontal", const: "horizontal" },
+        { title: "Vertical", const: "vertical" }
+      ]
+    },
     method: {
       type: "string",
       oneOf: [
@@ -5924,6 +5933,24 @@ const ComponentSchema = {
         }
       }
     },
+    cardLayout: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          key: {
+            type: "string",
+            oneOf: [
+              { title: "Extra Small", const: "xs" },
+              { title: "Small", const: "sm" },
+              { title: "Medium", const: "md" },
+              { title: "Large", const: "lg" }
+            ]
+          },
+          value: {}
+        }
+      }
+    },
     value: {
       type: "array",
       items: {
@@ -5991,6 +6018,20 @@ const ComponentSchema = {
         }
       }
     },
+    sizeHolder: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          keyName: {
+            type: "string"
+          },
+          value: {
+            type: "string"
+          }
+        }
+      }
+    },
     legendLabels: {
       type: "array",
       items: {
@@ -6648,6 +6689,57 @@ const EmptyBox = {
     main: {}
   }
 };
+const cardLayout = {
+  type: "Control",
+  scope: "#/properties/cardLayout",
+  layout: 11.5,
+  options: {
+    detail: {
+      type: "HorizontalLayout",
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "SelectInputField"
+          },
+          config: {
+            layout: {
+              xs: 11,
+              sm: 11,
+              md: 5.5,
+              lg: 5.5
+            },
+            main: {
+              label: "Screen Size"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+          options: {
+            widget: "InputField"
+          },
+          config: {
+            layout: {
+              xs: 11,
+              sm: 11,
+              md: 5.5,
+              lg: 5.5
+            },
+            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."
+            }
+          }
+        }
+      ]
+    }
+  }
+};
 const getArrayControl = (parentScope, childScope, childLabel) => {
   return {
     type: "Control",
@@ -6682,6 +6774,25 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
     }
   };
 };
+const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
+sizeHolder.options.detail.elements[1] = {
+  type: "Control",
+  scope: `#/properties/value`,
+  options: {
+    widget: "InputField"
+  },
+  config: {
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
+    },
+    main: {
+      label: "Size"
+    }
+  }
+};
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -6773,6 +6884,33 @@ const GraphSection = {
 const buildPropertiesSection = function(type) {
   let uiSchema = _.cloneDeep(GraphSection);
   switch (type) {
+    case "DataGrid":
+      uiSchema.elements = [
+        getRadioInputField("divider", "Use Header divider", ["YES", "NO"]),
+        getInputField("elevation", "Card Elevation"),
+        getInputField("height", "Grid height"),
+        getInputField("justifyContent", "justifyContent"),
+        cardLayout
+      ];
+      break;
+    case "Stepper":
+      uiSchema.elements = [
+        getRadioInputField("resetButton", "Reset Button", ["YES", "NO"]),
+        getRadioInputField("defaultButtonAvailable", "Use Default Buttons ", ["YES", "NO"]),
+        getInputField("resetText", "Reset Text"),
+        getInputField("completeText", "Complete Text"),
+        getSelectField("orientation", "Orientation Type"),
+        getArrayControl("sectionLabels", "label")
+      ];
+      break;
+    case "PopUp":
+      uiSchema.elements = [
+        getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
+        getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
+        getInputField("maxWidth", "Max. Width"),
+        EmptyBox
+      ];
+      break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
@@ -6874,7 +7012,8 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("DragAvailable", "Drag Available", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
         getInputField("selectKey", "Selection Key"),
-        getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name")
+        getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
+        sizeHolder
       ];
       break;
     case "Radio":
@@ -7254,14 +7393,14 @@ const getFormdataFromLocalStorage = (path) => {
 };
 async function saveHandler(store2, service2, submitHandler, pageName) {
   var _a, _b;
-  (_a = store2.searchParams) == null ? void 0 : _a.get("id");
+  const id = (_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"));
   if (_.isEmpty(store2.ctx.core.errors)) {
     try {
       const saveReturn = await submitHandler(store2, service2, config);
-      navigateHandler(store2, true, pageName ? `/${pageName}?id=${saveReturn.id}` : "/PageMasterRecords");
+      navigateHandler(store2, true, pageName ? `/${pageName}?id=${id}` : "/PageMasterRecords");
     } catch (err) {
       navigateHandler(store2, false);
     }
@@ -7325,7 +7464,10 @@ const sectionLabels = {
   Array: ["Core", "Components", "Validation"],
   Radio: ["Core", "Properties", "style", "Event", "Validation"],
   Text: ["Core", "Properties", "style", "Event", "Validation"],
-  TextArea: ["Core", "Properties", "style", "Event", "Validation"]
+  TextArea: ["Core", "Properties", "style", "Event", "Validation"],
+  PopUp: ["Core", "Components", "Properties", "style"],
+  Stepper: ["Core", "Components", "Properties", "Event", "style"],
+  DataGrid: ["Core", "Components", "Properties", "Event", "style"]
 };
 const refreshPage = (type, store2) => {
   var _a;
@@ -7554,12 +7696,14 @@ const EventSchema = {
       type: "string",
       oneOf: [
         { title: "Click Event", const: "onClick" },
-        { title: "onStart", const: "onStart" },
         { title: "Load Event", const: "onLoad" },
-        { title: "File Upload Event", const: "onUpload" },
-        { title: "File Download Event", const: "onDownload" },
         { title: "Change Event", const: "onChange" },
         { title: "Success", const: "Success" },
+        { title: "onStart", const: "onStart" },
+        { title: "File Upload Event", const: "onUpload" },
+        { title: "Back Event", const: "onBack" },
+        { title: "Next Event", const: "onNext" },
+        { title: "File Download Event", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
     },
@@ -7576,7 +7720,8 @@ const EventSchema = {
       type: "string",
       oneOf: [
         { title: "RankProvider", const: "RankProvider" },
-        { title: "Download File", const: "downloadFile" }
+        { title: "Download File", const: "downloadFile" },
+        { title: "Download", const: "download" }
       ]
     },
     body: {
@@ -8169,6 +8314,20 @@ const downloadFile$1 = (obj) => {
   URL.revokeObjectURL(url);
   document.body.removeChild(link);
 };
+const doDownload = (response2, service2) => {
+  let url = `${service2.defaults.baseURL}/${response2.path}`;
+  if (response2 == null ? void 0 : response2.params) {
+    const keysArray = Object.keys(response2 == null ? void 0 : response2.params);
+    keysArray.map((e, i) => {
+      url = url + `${i === 0 ? "?" : "&"}${e}=${response2 == null ? void 0 : response2.params[e]}`;
+    });
+  }
+  const link = document.createElement("a");
+  link.href = url;
+  document.body.appendChild(link);
+  link.click();
+  link.parentNode.removeChild(link);
+};
 const executeEvents = async (params2) => {
   var _a, _b, _c;
   let nextEvent = [];
@@ -8195,6 +8354,7 @@ const executeEvents = async (params2) => {
   return finalResponse;
 };
 async function executeEventsHandler(params2) {
+  var _a, _b, _c;
   if (params2.config.Handler === "api") {
     return await executeApiEventHandler(params2);
   } else if (params2.config.Handler === "inBuiltFunction") {
@@ -8212,6 +8372,12 @@ async function executeEventsHandler(params2) {
       params2.service
     );
     return result;
+  } else if (params2.config.Handler === "onBackHandler") {
+    return (_a = params2.store.functionParameters) == null ? void 0 : _a.handleBack();
+  } else if (params2.config.Handler === "onNextHandler") {
+    return (_b = params2.store.functionParameters) == null ? void 0 : _b.handleNext();
+  } else if (params2.config.Handler === "onResetHandler") {
+    return (_c = params2.store.functionParameters) == null ? void 0 : _c.handleReset();
   }
 }
 async function executeRefreshHandler(params2) {
@@ -8276,7 +8442,7 @@ async function mergeFormdata(handlerResponse, componentName, eventConfig, store2
             ...(_a = pre.properties) == null ? void 0 : _a[componentName],
             type: "array",
             items: {
-              oneOf: handlerResponse.data
+              oneOf: handlerResponse == null ? void 0 : handlerResponse.data
             }
           }
         }
@@ -8293,7 +8459,7 @@ async function mergeFormdata(handlerResponse, componentName, eventConfig, store2
       store2.setFormdata((pre) => {
         return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse.data.data : handlerResponse.data };
       });
-      await service2.get("https://jsonplaceholder.typicode.com/posts/1");
+      await asyncOperation();
     }
   }
 }
@@ -8367,6 +8533,16 @@ function getRefreshElements(eventConfig, eventGropus) {
   console.log(result);
   return result;
 }
+function asyncOperation() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      {
+        resolve("Operation completed successfully!");
+        reject(new Error("Operation failed!"));
+      }
+    }, 50);
+  });
+}
 let compType;
 let eventGroups = {};
 const notifyUiSchema = {
@@ -8397,6 +8573,9 @@ const extractEvents = (eventConfig) => {
         if (!!!SuccessEvent && event2.eventType === "onLoad") {
           event2.events.push({ Handler: "mergeFormdata", eventType: "Success", type: compType, lazyLoading: eventConfig.lazyLoading === "YES" ? true : false });
         }
+        if (!!!SuccessEvent && (event2.eventType === "onBack" || event2.eventType === "onNext" || event2.eventType === "onReset")) {
+          event2.events.push({ Handler: `${event2.eventType}Handler`, eventType: "Success", type: compType, lazyLoading: eventConfig.lazyLoading === "YES" ? true : false });
+        }
         eventGroups[event2.eventType][eventConfigObj.name].push({ ...event2, type: compType });
       });
     }
@@ -8417,7 +8596,7 @@ var service = (funcParams) => {
     dynamicData: funcParams.dynamicData,
     userValue: funcParams.userValue,
     service: funcParams.service,
-    serviceHolder: { downloadFile: downloadFile$1 },
+    serviceHolder: { downloadFile: downloadFile$1, download: doDownload },
     eventGroups
   };
   return {
@@ -8455,37 +8634,13 @@ var service = (funcParams) => {
       });
     },
     onClick: async function() {
-      var _a;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onClick[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        });
-      }
+      await this.callHandler("onClick");
     },
-    onFileDownload: async () => {
-      var _a;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onDownload[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        });
-      }
+    onFileDownload: async function() {
+      await this.callHandler("onDownload");
     },
-    onFileUpload: async () => {
-      var _a;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onUpload[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        });
-      }
+    onFileUpload: async function() {
+      await this.callHandler("onUpload");
     },
     onPaginationChange: async function(paginationValues) {
       var _a;
@@ -8549,7 +8704,46 @@ var service = (funcParams) => {
       }
       return LastCallResponse;
     },
-    downloadFile: downloadFile$1
+    onBack: async function(functionParameters) {
+      var _a, _b;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onBack", functionParameters);
+      if (((_b = eventGroups == null ? void 0 : eventGroups["onBack"]) == null ? void 0 : _b[path]) === void 0) {
+        functionParameters == null ? void 0 : functionParameters.handleBack();
+      }
+    },
+    onNext: async function(functionParameters) {
+      var _a, _b;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onNext", functionParameters);
+      if (((_b = eventGroups == null ? void 0 : eventGroups["onNext"]) == null ? void 0 : _b[path]) === void 0) {
+        functionParameters == null ? void 0 : functionParameters.handleNext();
+      }
+    },
+    onReset: async function(functionParameters) {
+      var _a, _b;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      await this.callHandler("onReset", functionParameters);
+      if (((_b = eventGroups == null ? void 0 : eventGroups["onReset"]) == null ? void 0 : _b[path]) === void 0) {
+        functionParameters == null ? void 0 : functionParameters.handleReset();
+      }
+    },
+    callHandler: async function(eventType, functionParameters) {
+      var _a, _b, _c;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      if (((_b = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _b[path]) !== void 0) {
+        for (const eventConfig of (_c = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _c[path]) {
+          executeEventsParameters.store.functionParameters = functionParameters;
+          await executeEvents({
+            ...executeEventsParameters,
+            config: eventConfig,
+            componentName: path
+          });
+        }
+      }
+    },
+    downloadFile: downloadFile$1,
+    download: doDownload
   };
 };
 var leaderBoard = {
@@ -9368,9 +9562,17 @@ var WrapperSection = {
   elements: []
 };
 const buildWrapperSection = (config, componentScope) => {
+  console.log("config buildWrapperSection  : ", config);
+  console.log("componentScope : ", componentScope);
   const wrapper = _.cloneDeep(WrapperSection);
   wrapper.config.main.label = config.label;
   wrapper.config.main.divider = config.divider === "YES" ? true : false;
+  if (config.style) {
+    wrapper.config.style = JSON.parse(config.style);
+  }
+  if (config.layout) {
+    wrapper.config.layout = createLayoutFormat(config.layout);
+  }
   return wrapper;
 };
 var TextInputField = {
@@ -9477,6 +9679,8 @@ var Button = {
   }
 };
 const buildButton = (config, componentScope) => {
+  console.log("config : ", config);
+  console.log("componentScope : ", componentScope);
   const button = _.cloneDeep(Button);
   if (config.buttonType) {
     button.options.widget = config.buttonType === "IconButton" ? "IconButton" : "Button";
@@ -9554,7 +9758,7 @@ const buildTable = (config, componentScope) => {
     table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false;
   }
   if (config.ColumnResizingAvailable) {
-    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? true : false;
+    table.config.main.disableColumnResizing = config.ColumnResizingAvailable === "YES" ? false : true;
   }
   if (config.DragAvailable) {
     table.config.main.enableDrag = config.DragAvailable === "YES" ? true : false;
@@ -10123,7 +10327,7 @@ const RadioUiSchema = {
 const buildRadio = (config, componentScope) => {
   const Radio = _.cloneDeep(RadioUiSchema);
   Radio.scope = componentScope;
-  Radio.config.main.heading = config.label;
+  Radio.config.main.label = config.label;
   if (config.layout) {
     Radio.config.layout = createLayoutFormat(config.layout);
   }
@@ -10248,7 +10452,7 @@ const FileInput = {
 const buildFileInput = (config, componentScope) => {
   const box = _.cloneDeep(FileInput);
   box.scope = componentScope;
-  box.config.main.heading = config.label;
+  box.config.main.label = config.label;
   if (config.layout) {
     box.config.layout = createLayoutFormat(config.layout);
   }
@@ -10257,6 +10461,127 @@ const buildFileInput = (config, componentScope) => {
   }
   return box;
 };
+const Stepper = {
+  type: "Control",
+  scope: "#/properties/Stepper",
+  options: {
+    widget: "Stepper"
+  },
+  config: {
+    main: {
+      steps: [{ label: "First" }, { label: "Second" }, { label: "Third" }],
+      resetButton: false,
+      resetText: "Reset",
+      orientation: "vertical"
+    }
+  },
+  "elements": []
+};
+const buildStepper = (config, componentScope) => {
+  const stepper = _.cloneDeep(Stepper);
+  stepper.scope = componentScope;
+  stepper.config.main.resetButton = config.resetButton === "YES" ? true : false;
+  if (config.defaultButtonAvailable) {
+    stepper.config.main.defaultButtonAvailable = config.defaultButtonAvailable === "YES" ? true : false;
+  }
+  stepper.config.main.resetText = config.resetText || "ResetData";
+  stepper.config.main.completeText = config.completeText || "Complete Text";
+  stepper.config.main.orientation = config.orientation || "horizontal";
+  if (config.sectionLabels) {
+    stepper.config.main.steps = config.sectionLabels.map((e, i) => {
+      return { label: e.label, id: i };
+    });
+  }
+  if (config.layout) {
+    stepper.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.style) {
+    stepper.config.style = JSON.parse(config.style);
+  }
+  return stepper;
+};
+const PopUP = {
+  type: "Control",
+  scope: "#/properties/text",
+  options: {
+    widget: "PopUp"
+  },
+  config: {
+    layout: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
+    },
+    main: {
+      label: "PopUp",
+      fullScreen: false,
+      fullWidth: false,
+      maxWidth: false,
+      alignItems: false,
+      spacing: 2
+    },
+    style: {}
+  }
+};
+const buildPopUp = (config, componentScope) => {
+  const popup = _.cloneDeep(PopUP);
+  popup.scope = componentScope;
+  popup.config.main.title = config.label;
+  popup.config.main.fullScreen = config.fullScreen === "YES" ? true : false;
+  popup.config.main.fullWidth = config.fullWidth === "YES" ? true : false;
+  popup.config.main.maxWidth = config.maxWidth || false;
+  if (config.layout) {
+    popup.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.style) {
+    PopUP.config.style = JSON.parse(config.style);
+  }
+  return popup;
+};
+const dataGrid = {
+  "type": "Control",
+  "scope": "#/properties/dataGrid",
+  "layout": 12,
+  "options": {
+    "widget": "DataGrid"
+  },
+  elements: [],
+  "config": {
+    "main": {
+      elevation: 0,
+      useWrapper: false
+    },
+    style: {}
+  }
+};
+const buildDataGrid = (config, componentScope) => {
+  const DataGrid = _.cloneDeep(dataGrid);
+  DataGrid.scope = componentScope;
+  if (config.elevation) {
+    DataGrid.config.main.elevation = +config.elevation;
+  }
+  DataGrid.config.main.divider = config.divider === "NO" ? false : true;
+  if (config.height) {
+    DataGrid.config.main.height = `${config.height}px`;
+  }
+  if (config.justifyContent) {
+    DataGrid.config.main.justifyContent = config.justifyContent;
+  }
+  if (config.label) {
+    DataGrid.config.main.label = config.label;
+  }
+  if (config.layout) {
+    DataGrid.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.cardLayout) {
+    DataGrid.config.cardLayout = createLayoutFormat(config.cardLayout);
+  }
+  if (config.style) {
+    DataGrid.config.style = JSON.parse(config.style);
+  }
+  return DataGrid;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -10375,6 +10700,15 @@ const buildUiSchema = (config) => {
   let elements = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
+    case "DataGrid":
+      elements = buildDataGrid(config, componentScope);
+      break;
+    case "Stepper":
+      elements = buildStepper(config, componentScope);
+      break;
+    case "PopUp":
+      elements = buildPopUp(config, componentScope);
+      break;
     case "FileInput":
       elements = buildFileInput(config, componentScope);
       break;
@@ -10391,7 +10725,7 @@ const buildUiSchema = (config) => {
       elements = RunnerBoyProgressbar(config, componentScope);
       break;
     case "WrapperSection":
-      elements = buildWrapperSection(config);
+      elements = buildWrapperSection(config, componentScope);
       break;
     case "Text":
       elements = buildTextField(config, componentScope);
@@ -10494,17 +10828,25 @@ const buildUiSchema = (config) => {
     if ((config == null ? void 0 : config.type) === "LeaderBoard") {
       return elements;
     } else if (config.type == "Table") {
+      const sizeMap = {};
+      if (config.sizeHolder) {
+        config.sizeHolder.map((e, i) => {
+          sizeMap[e.keyName] = e.value;
+        });
+      }
       elements.elements = config.elements.map((e, elemInd) => {
         if (e.type) {
           return {
             accessorKey: e.name,
             header: e.label || e.name,
+            size: sizeMap[e.name] || 180,
             widget: buildUiSchema(e)
           };
         }
         return {
           accessorKey: e.name,
-          header: e.label || e.name
+          header: e.label || e.name,
+          size: sizeMap[e.name] || 180
         };
       });
     } else if (config.type == "Array") {