impaktapps-ui-builder 0.0.25 → 0.0.27

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

@@ -6048,6 +6048,7 @@ const componentBasicUiSchema = {
                   options: [
                     { label: "Select", value: "Select" },
                     { label: "Date", value: "Date" },
+                    { label: "CheckBox", value: "CheckBox" },
                     { label: "Table", value: "Table" },
                     { label: "Array", value: "Array" },
                     { label: "Container", value: "WrapperSection" },
@@ -6067,7 +6068,7 @@ const componentBasicUiSchema = {
                     { label: "ProgressBar Card", value: "ProgressBarCard" },
                     { label: "Rank Card", value: "RankCard" },
                     { label: "Runner Boy Progress Bar", value: "RunnerBoyProgressBar" },
-                    { label: "Card Slider", value: "CardSlider" },
+                    { label: "Slider", value: "Slider" },
                     { label: "Timer", value: "Timer" },
                     { label: "MultipleSelect", value: "MultipleSelect" },
                     { label: "LeaderBoard", value: "LeaderBoard" }
@@ -6282,19 +6283,19 @@ const getNavigationHistory = (config, path) => {
   }
   return void 0;
 };
-const saveFormdataInSessionStorage = (formData, path) => {
+const saveFormdataInLocalStorage = (formData, path) => {
   let updatedFormdata;
   if (path) {
-    const pageFormdata = getFormdataFromSessionStorage();
+    const pageFormdata = getFormdataFromLocalStorage();
     updatedFormdata = _.set(pageFormdata, path, buildConfig(formData));
   } else {
     updatedFormdata = buildConfig(formData);
   }
-  sessionStorage.setItem("pageFormdata", JSON.stringify(updatedFormdata));
+  localStorage.setItem("pageFormdata", JSON.stringify(updatedFormdata));
   return updatedFormdata;
 };
-const getFormdataFromSessionStorage = (path) => {
-  const pageFormdata = sessionStorage.getItem("pageFormdata") ? JSON.parse(sessionStorage.getItem("pageFormdata")) : void 0;
+const getFormdataFromLocalStorage = (path) => {
+  const pageFormdata = localStorage.getItem("pageFormdata") ? JSON.parse(localStorage.getItem("pageFormdata")) : void 0;
   let returnValue;
   if (path) {
     returnValue = _.get(pageFormdata, path);
@@ -6322,6 +6323,7 @@ const CoreSection = {
           options: [
             { label: "Select", value: "Select" },
             { label: "Date", value: "Date" },
+            { label: "CheckBox", value: "CheckBox" },
             { label: "Table", value: "Table" },
             { label: "Array", value: "Array" },
             { label: "Container", value: "WrapperSection" },
@@ -6341,7 +6343,7 @@ const CoreSection = {
             { label: "ProgressBar Card", value: "ProgressBarCard" },
             { label: "Rank Card", value: "RankCard" },
             { label: "Runner Boy Progress Bar", value: "RunnerBoyProgressBar" },
-            { label: "Card Slider", value: "CardSlider" },
+            { label: "Slider", value: "Slider" },
             { label: "Timer", value: "Timer" },
             { label: "MultipleSelect", value: "MultipleSelect" },
             { label: "LeaderBoard", value: "LeaderBoard" }
@@ -6708,16 +6710,6 @@ const getSelectField = (scope, label, options) => {
     }
   };
 };
-const emptyBox$1 = {
-  type: "Control",
-  scope: "#/properties/proc",
-  config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 }
-  },
-  options: {
-    widget: "EmptyBox"
-  }
-};
 const GraphSection = {
   type: "HorizontalLayout",
   elements: []
@@ -6725,8 +6717,12 @@ const GraphSection = {
 const buildPropertiesSection = function(type) {
   let uiSchema = _.cloneDeep(GraphSection);
   if (type === "SpeedoMeter" || type === "RankCard" || type === "Timer") {
-    const heading = getInputField("heading", "Heading");
-    uiSchema.elements = [heading, emptyBox$1];
+    uiSchema.elements = [
+      getInputField("rank", "Rank"),
+      getInputField("image", "Image Url"),
+      getInputField("title", "Card Title"),
+      getInputField("description", "Card Description")
+    ];
   } else if (type === "LeaderBoard") {
     uiSchema.elements = [
       getInputField("valueLabel", "Value Label"),
@@ -6746,9 +6742,7 @@ const buildPropertiesSection = function(type) {
     const bottomLabel_3 = getInputField("bottomLabel_3", "Third BottomLabel");
     uiSchema.elements = [heading, bottomLabel_1, bottomLabel_2, bottomLabel_3];
   } else if (type === "card") {
-    const caption = getInputField("", "Caption");
-    const iconName = getInputField("iconName", "Icon Name");
-    uiSchema.elements = [caption, iconName];
+    uiSchema.elements = [getInputField("url", "Image Url"), getInputField("label", "Label"), getInputField("description", "Description")];
   } else if (type === "Box") {
     const iconName = getInputField("value", "Value");
     uiSchema.elements = [getSelectField("graphType", "Label Type", [
@@ -6994,12 +6988,13 @@ const sectionLabels = {
   SpeedoMeter: ["Core", "Properties", "style", "Event"],
   card: ["Core", "Properties", "style", "Event"],
   UploadFile: ["Core", "style", "Event"],
+  Graph: ["Core", "Properties", "style", "Event"],
   DownloadFile: ["Core", "style", "Event"],
   Box: ["Core", "Properties", "style", "Event"],
   Properties: ["Core", "Properties", "style", "Event"],
   ProgressBarCard: ["Core", "Properties", "style", "Event"],
   RankCard: ["Core", "Properties", "style", "Event"],
-  CardSlider: ["Core", "Properties", "style", "Event"],
+  Slider: ["Core", "Components", "Properties", "style", "Event"],
   Timer: ["Core", "Properties", "style", "Event"],
   Rank: ["Core", "Properties", "style", "Event"],
   Button: ["Core", "Properties", "style", "Event"],
@@ -7018,8 +7013,8 @@ const refreshPage = (type, store2) => {
       Properties: buildPropertiesSection(type)
     };
     const elements = (_a = sectionLabels[type]) == null ? void 0 : _a.map((e) => sectionUiSchema[e]);
-    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style"];
-    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection];
+    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event"];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection];
   }
   store2.setUiSchema(UiSchema);
 };
@@ -7036,7 +7031,7 @@ var Component = (store2, dynamicData2) => {
     getFormdata: async function() {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      return getFormdataFromSessionStorage(path);
+      return getFormdataFromLocalStorage(path);
     },
     getSchema: function() {
       return ComponentSchema;
@@ -7044,7 +7039,7 @@ var Component = (store2, dynamicData2) => {
     saveHandler: async function() {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      saveFormdataInSessionStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.formData, path);
       store2.navigate(-1);
       store2.setNotify({
         SuccessMessage: "Save Successfully",
@@ -7062,7 +7057,7 @@ var Component = (store2, dynamicData2) => {
       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");
-      saveFormdataInSessionStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.formData, path);
       if (path) {
         const path2 = (_c = store2.searchParams) == null ? void 0 : _c.get("path");
         const finalPath = `${path2}.elements[${rowId}]`;
@@ -7078,7 +7073,7 @@ var Component = (store2, dynamicData2) => {
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const rowId = dynamicData2.path.split(".")[1];
       store2.formData.elements.splice(rowId, 1);
-      const response = saveFormdataInSessionStorage(store2.formData, path);
+      const response = saveFormdataInLocalStorage(store2.formData, path);
       const data2 = path ? _.get(response, path) : response;
       store2.setFormdata(data2);
     },
@@ -7087,7 +7082,7 @@ var Component = (store2, dynamicData2) => {
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const rowId = dynamicData2.path.split(".")[1];
       store2.formData.events.splice(rowId, 1);
-      const response = saveFormdataInSessionStorage(store2.formData, path);
+      const response = saveFormdataInLocalStorage(store2.formData, path);
       store2.setFormdata(_.get(response, path));
     },
     widgetAddClickHandler: async function() {
@@ -7096,7 +7091,7 @@ var Component = (store2, dynamicData2) => {
         store2.formData.elements = [];
       }
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      saveFormdataInSessionStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.formData, path);
       const finalPath = `${path}.elements[${store2.formData.elements.length}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
@@ -7107,7 +7102,7 @@ var Component = (store2, dynamicData2) => {
       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");
-      saveFormdataInSessionStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.formData, path);
       const finalPath = `${path}.events[${rowId}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
@@ -7118,7 +7113,7 @@ var Component = (store2, dynamicData2) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInSessionStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.formData, path);
       const finalPath = `${path}.events[${store2.formData.events.length}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
@@ -7141,11 +7136,11 @@ var pageMaster = (funcParams) => {
     getFormdata: async function() {
       var _a;
       (_a = store2.searchParams) == null ? void 0 : _a.get("id");
-      const formData = getFormdataFromSessionStorage();
+      const formData = getFormdataFromLocalStorage();
       if (formData) {
         return formData;
       }
-      saveFormdataInSessionStorage(config);
+      saveFormdataInLocalStorage(config);
       return config;
     },
     getUiSchema: async function() {
@@ -7155,7 +7150,7 @@ var pageMaster = (funcParams) => {
       return PageMasterSchema;
     },
     backHandler: () => {
-      sessionStorage.removeItem("pageFormdata");
+      localStorage.removeItem("pageFormdata");
       store2.navigate("/PageMasterRecords");
     },
     onAddClickHandler: async function() {
@@ -7164,14 +7159,14 @@ var pageMaster = (funcParams) => {
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
-      const response = saveFormdataInSessionStorage(store2.formData);
+      const response = saveFormdataInLocalStorage(store2.formData);
       store2.navigate(
         `/Component?path=${`elements[${response == null ? void 0 : response.elements.length}]`}&id=${id}`
       );
     },
     submitPageHandler: async function() {
       submitHandler(store2, funcParams.service).then((saveReturn) => {
-        sessionStorage.removeItem("pageFormdata");
+        localStorage.removeItem("pageFormdata");
         store2.navigate(-1);
         store2.setNotify({
           SuccessMessage: "Submit Successfully",
@@ -7187,7 +7182,7 @@ var pageMaster = (funcParams) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInSessionStorage(store2.formData);
+      saveFormdataInLocalStorage(store2.formData);
       const finalPath = `events[${store2.formData.events.length}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
@@ -7195,14 +7190,14 @@ var pageMaster = (funcParams) => {
       var _a;
       const rowId = dynamicData2.path.split(".")[1];
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
-      saveFormdataInSessionStorage(store2.formData);
+      saveFormdataInLocalStorage(store2.formData);
       const finalPath = `events[${rowId}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
     deleteEvent: async function() {
       const rowId = dynamicData2.path.split(".")[1];
       store2.formData.events.splice(rowId, 1);
-      const response = saveFormdataInSessionStorage(store2.formData);
+      const response = saveFormdataInLocalStorage(store2.formData);
       store2.setFormdata(response);
     }
   };
@@ -7753,7 +7748,7 @@ var event = (store2, dynamicData2) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInSessionStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.formData, 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);
@@ -7763,7 +7758,7 @@ var event = (store2, dynamicData2) => {
       var _a;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      saveFormdataInSessionStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.formData, path);
       const finalPath = `${path}.events[${rowId}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
@@ -7937,17 +7932,21 @@ async function executeCustomHandler(customHandlerConfig, componentName, store, d
   return { response: void 0, events: customHandlerConfig == null ? void 0 : customHandlerConfig.events };
 }
 async function mergeFormdata(handlerResponse, componentName2, eventConfig, store2) {
-  if (eventConfig.type === "Select") {
-    handlerResponse && store2.setFormdata((pre) => {
-      return { ...pre, [componentName2]: { options: handlerResponse.data } };
-    });
-  } else if (eventConfig.type === "Table") {
-    handlerResponse && store2.setFormdata((pre) => {
-      return { ...pre, [componentName2]: { rows: handlerResponse.data } };
+  if (eventConfig.type === "Select" && handlerResponse) {
+    store2.setSchema((pre) => {
+      return {
+        ...pre,
+        properties: {
+          ...pre.properties,
+          [componentName2]: {
+            enum: handlerResponse.data
+          }
+        }
+      };
     });
   } else if (eventConfig.type === "page") {
     store2.setFormdata((pre) => {
-      return { ...pre, ...handlerResponse.data };
+      return { ...pre, ...handlerResponse == null ? void 0 : handlerResponse.data };
     });
   } else {
     handlerResponse && store2.setFormdata((pre) => {
@@ -8015,14 +8014,20 @@ function getRefreshElements(eventConfig, eventGropus) {
 }
 let compType;
 let eventGroups = {};
+const notifyUiSchema = {
+  type: "Control",
+  scope: "#/properties/notify",
+  options: {
+    widget: "Notify"
+  },
+  layout: 6
+};
 const extractEvents = (eventConfig) => {
   function extractsConfigEvents(eventConfigObj) {
     if (eventConfigObj.events) {
       eventConfigObj.events.forEach((event2) => {
         if (eventConfigObj.type) {
           compType = eventConfigObj.type;
-        } else {
-          compType = "page";
         }
         if (!eventGroups[event2.eventType]) {
           eventGroups[event2.eventType] = {};
@@ -8055,7 +8060,7 @@ var service = (funcParams) => {
         this,
         eventGroups
       );
-      funcParams.store.setSchema(funcParams.schema);
+      funcParams.uiSchema.elements.push(notifyUiSchema);
       funcParams.store.setUiSchema(funcParams.uiSchema);
     },
     onClick: async function() {
@@ -8078,8 +8083,8 @@ var service = (funcParams) => {
       if (eventGroups.onChange) {
         const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
         Promise.all(ChangeEventsKeysArray.map(async (componentName2) => {
-          var _a, _b, _c, _d, _e;
-          if (((_b = (_a = funcParams.store) == null ? void 0 : _a.formData[componentName2]) == null ? void 0 : _b.selected) !== ((_c = funcParams.store.newData[componentName2]) == null ? void 0 : _c.selected) && ((_e = (_d = funcParams.store) == null ? void 0 : _d.newData[componentName2]) == null ? void 0 : _e.selected) !== void 0) {
+          var _a, _b;
+          if (((_a = funcParams.store) == null ? void 0 : _a.formData[componentName2]) !== funcParams.store.newData[componentName2] && ((_b = funcParams.store) == null ? void 0 : _b.newData[componentName2]) !== void 0) {
             for (const eventConfig of eventGroups.onChange[componentName2]) {
               await executeEvents(
                 eventConfig,
@@ -8111,24 +8116,6 @@ var emptyBox = {
     style: {}
   }
 };
-var cardSlider = {
-  type: "SliderLayout",
-  config: {
-    main: {
-      header: true,
-      label: "Rewards For Top Rankers",
-      divider: true
-    },
-    defaultStyle: true,
-    style: {
-      labelStyle: {
-        paddingLeft: "8px"
-      }
-    },
-    layout: 12
-  },
-  elements: []
-};
 var leaderBoard = {
   type: "WrapperLayout",
   config: {
@@ -8158,7 +8145,7 @@ var leaderBoard = {
           top: "60px",
           left: "calc(50% - 85px)",
           width: "180px",
-          border: "5px solid #5065C7",
+          border: "5px solid rgb(179, 198, 255)",
           height: "180px",
           borderRadius: "50%"
         },
@@ -8181,7 +8168,7 @@ var leaderBoard = {
           top: "130px",
           left: "calc(25% - 90px)",
           width: "180px",
-          border: "5px solid #5065C7",
+          border: "5px solid rgb(179, 198, 255)",
           height: "180px",
           borderRadius: "50%"
         },
@@ -8204,7 +8191,7 @@ var leaderBoard = {
           top: "130px",
           left: "calc(75% - 85px)",
           width: "170px",
-          border: "5px solid #5065C7",
+          border: "5px solid rgb(179, 198, 255)",
           height: "180px",
           borderRadius: "50%"
         },
@@ -8320,7 +8307,7 @@ var leaderBoard = {
           },
           animation: "rotateAnimation 4s infinite",
           width: "40px",
-          border: "5px solid #5065C7",
+          border: "5px solid rgb(179, 198, 255)",
           height: "40px",
           borderRadius: "50%"
         },
@@ -8358,7 +8345,7 @@ var leaderBoard = {
           },
           animation: "rotateAnimation 4s infinite",
           width: "40px",
-          border: "5px solid #5065C7",
+          border: "5px solid rgb(179, 198, 255)",
           height: "40px",
           borderRadius: "50%"
         },
@@ -8396,7 +8383,7 @@ var leaderBoard = {
           },
           animation: "rotateAnimation 4s infinite",
           width: "40px",
-          border: "5px solid #5065C7",
+          border: "5px solid rgb(179, 198, 255)",
           height: "40px",
           borderRadius: "50%"
         },
@@ -8412,6 +8399,7 @@ var leaderBoard = {
       options: {
         widget: "Table"
       },
+      elements: [],
       config: {
         style: {
           tableHeadstyle: {
@@ -8426,88 +8414,23 @@ var leaderBoard = {
         },
         main: {
           disableAction: true,
-          disableSelection: true,
-          columns: {
-            dataColumns: [
-              {
-                accessorKey: "a",
-                widgetWithData: true,
-                size: 40,
-                header: " ",
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/id",
-                  options: {
-                    widget: "Box"
-                  },
-                  config: {
-                    style: {
-                      objectFit: "cover",
-                      width: "40px",
-                      height: "40px",
-                      borderRadius: "50%"
-                    },
-                    main: {
-                      url: "https://www.svgrepo.com/show/484058/person.svg"
-                    }
-                  }
-                }
-              },
-              {
-                accessorKey: "name",
-                header: "Name"
-              },
-              {
-                accessorKey: "id",
-                header: "Policy"
-              },
-              {
-                accessorKey: "modifiedOn",
-                header: "Incentice"
-              },
-              {
-                accessorKey: "active",
-                header: "active"
-              },
-              {
-                accessorKey: "button",
-                size: 80,
-                header: "Compare",
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/id",
-                  options: {
-                    widget: "Button"
-                  },
-                  config: {
-                    style: {
-                      fontSize: "12px"
-                    },
-                    main: {
-                      name: "Compare"
-                    }
-                  }
-                }
-              }
-            ]
-          }
+          disableSelection: true
         }
       }
     }
   ]
 };
 const buildLeaderBoard = (config) => {
-  var _a;
   const LeaderBoard = _.cloneDeep(leaderBoard);
-  if ((_a = config.columns) == null ? void 0 : _a.dataColumns) {
-    const modifyColumns = config.columns.dataColumns.map((e, i) => {
-      if (!e.widgetType) {
-        return e;
+  if (config.elements) {
+    const modifyColumns = config.elements.map((e, i) => {
+      if (!e.type) {
+        return { accessorKey: e.name, header: e.label || e.name };
       }
-      const widgetSchema = buildUiSchema([{ ...e.widget, name: e.accessorKey }]);
-      return { widget: widgetSchema[0], accessorKey: e.accessorKey, header: e.header, size: e.size };
+      const widgetSchema = { widget: buildUiSchema(e), accessorKey: e.name, header: e.label || e.name };
+      return { ...widgetSchema };
     });
-    LeaderBoard.elements[9].config.main.columns.dataColumns = modifyColumns;
+    LeaderBoard.elements[9].elements = modifyColumns;
   }
   if (config.name) {
     LeaderBoard.elements[0].scope = `#/properties/${config.name}/properties/firstImage`;
@@ -8541,7 +8464,7 @@ var progressBar = {
   config: {
     layout: 6,
     main: {
-      developOnlyProgresBar: true,
+      developOnlyProgresBar: false,
       bottomLabel_3: "Remaining",
       heading: "PBC Details"
     }
@@ -8551,16 +8474,13 @@ const buildProgressBarCard = (config, myScope) => {
   const progressBarCard = _.cloneDeep(progressBar);
   progressBarCard.scope = myScope;
   if (config.heading) {
-    progressBarCard.elements[0].config.main.heading = config.heading;
-  }
-  if (config.layout) {
-    progressBarCard.config.layout = config.layout;
+    progressBarCard.config.main.heading = config.heading;
   }
   if (config.bottomLabel_3) {
-    progressBarCard.elements[0].config.main.bottomLabel_3 = config.bottomLabel_3;
+    progressBarCard.config.main.bottomLabel_3 = config.bottomLabel_3;
   }
   if (config.bottomLabel_2) {
-    progressBarCard.elements[0].config.main.bottomLabel_2 = config.bottomLabel_2;
+    progressBarCard.config.main.bottomLabel_2 = config.bottomLabel_2;
   }
   if (config.bottomLabel_1) {
     progressBarCard.elements[0].config.main.bottomLabel_1 = config.bottomLabel_1;
@@ -8668,7 +8588,6 @@ const PieGraph = {
       type: "PieGraph",
       bottomLabel: "Name of Employe",
       leftLabel: "Value",
-      tooltipDataKey: ["HDFC", "SBI", "Kotak"],
       axisLeft: true,
       axisBottom: true,
       legendAvailable: true,
@@ -8840,13 +8759,25 @@ const buildPieGraph = (config, componentScope) => {
     pieGraph.config.layout = config.layout;
   }
   if (config.containerBackground) {
-    pieGraph.config.containerStyle.background = config.containerBackground;
+    pieGraph.config.style.containerStyle.background = config.containerBackground;
   }
   if (config.height) {
-    pieGraph.config.containerStyle.height = config.height;
+    pieGraph.config.style.containerStyle.height = config.height;
+  }
+  if (config.legendAvailabe) {
+    pieGraph.config.main.legendAvailabe = config.legendAvailabe === "YES" ? false : true;
   }
   pieGraph.scope = componentScope;
-  pieGraph.config.main.heading = config.heading;
+  pieGraph.config.main.header = config.heading;
+  if (config.bottomLabel) {
+    pieGraph.config.main.bottomLabel = config.bottomLabel;
+  }
+  if (config.leftLabel) {
+    pieGraph.config.main.leftLabel = config.leftLabel;
+  }
+  if (config.tooltipDataKey) {
+    pieGraph.config.main.tooltipDataKey = config.tooltipDataKey;
+  }
   return pieGraph;
 };
 const buildStackbarGraph = (config, componentScope) => {
@@ -8878,780 +8809,149 @@ const buildStackbarGraph = (config, componentScope) => {
   return barGraph;
 };
 var RunnerBoyProgressBar = {
+  type: "Control",
+  scope: "#/properties/path",
+  options: {
+    widget: "RunnerBoyProgressBar"
+  },
+  config: {
+    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    main: {}
+  }
+};
+const RunnerBoyProgressbar = (config, componentScope) => {
+  const RunnerBoy = _.cloneDeep(RunnerBoyProgressBar);
+  RunnerBoy.scope = componentScope;
+  if (config.layout) {
+    RunnerBoy.config.layout = createLayoutFormat(config.layout);
+  }
+  return RunnerBoy;
+};
+var Tabsection = {
+  type: "TabLayout",
+  config: {
+    main: {
+      id: "groupMaster",
+      tabLabels: ["default"],
+      layout: 12
+    }
+  },
+  elements: []
+};
+const buildTabSection = (config, componentScope) => {
+  const tab = _.cloneDeep(Tabsection);
+  if (config.sectionLabels) {
+    tab.config.main.tabLabels = config.sectionLabels.map((e) => e.label);
+  }
+  tab.config.main.id = config.name;
+  return tab;
+};
+var WrapperSection = {
   type: "WrapperLayout",
   config: {
-    layout: 12,
     main: {
-      header: true
-    },
-    wrapperStyle: {
-      "width": "100%"
+      label: "Default Label",
+      divider: true
     },
-    style: {
-      wrapperStyle: {
-        width: "100%",
-        height: "120px",
-        position: "relative",
-        border: "1px solid black",
-        background: "#fff",
-        borderRadius: "10px",
-        color: "white",
-        margin: "auto"
-      }
-    }
+    defaultStyle: true
   },
-  elements: [
-    {
-      "type": "Control",
-      "scope": "#/properties/oneRunnerTick",
-      "layout": { xs: 12, sm: 8, md: 6, lg: 5 },
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "10px",
-          top: "0",
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
+  elements: []
+};
+const buildWrapperSection = (config, componentScope) => {
+  const wrapper = _.cloneDeep(WrapperSection);
+  wrapper.config.main.label = config.label;
+  wrapper.config.main.divider = config.divider ? true : false;
+  wrapper.config.main.header = config.heading ? true : false;
+  return wrapper;
+};
+var TextInputField = {
+  type: "Control",
+  scope: "#/properties/text",
+  options: {
+    widget: "InputField"
+  },
+  config: {
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
     },
-    {
-      "type": "Control",
-      "scope": "#/properties/zeroPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "0%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(10px - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
+    main: {
+      label: ""
     },
-    {
-      "type": "Control",
-      "scope": "#/properties/twoRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "10%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
+    style: {}
+  }
+};
+const buildTextField = (config, componentScope) => {
+  const inputField = _.cloneDeep(TextInputField);
+  inputField.config.main.label = config.label;
+  if (config.style) {
+    inputField.config.style = JSON.parse(config.style);
+  }
+  if (config.layout) {
+    inputField.config.layout = createLayoutFormat(config.layout);
+  }
+  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
+  inputField.scope = componentScope;
+  return inputField;
+};
+var SelectInputField = {
+  type: "Control",
+  scope: "#/properties/select",
+  options: {
+    widget: "SelectInputField"
+  },
+  config: {
+    "layout": {
+      "xs": 11,
+      "sm": 11,
+      "md": 5.5,
+      "lg": 5.5
     },
-    {
-      "type": "Control",
-      "scope": "#/properties/tenPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "10%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(10% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
+    main: {
+      label: "",
+      type: "text"
+    }
+  }
+};
+const buildSelect = (config, componentScope) => {
+  const selectInputField = _.cloneDeep(SelectInputField);
+  selectInputField.config.main.label = config.label;
+  if (config.value) {
+    const options = config.value.map((e) => {
+      return { label: e.label, value: e.value };
+    });
+    selectInputField.config.main.options = options;
+  }
+  if (config.layout) {
+    selectInputField.config.layout = createLayoutFormat(config.layout);
+  }
+  selectInputField.scope = componentScope;
+  return selectInputField;
+};
+var Button = {
+  type: "Control",
+  scope: "#/properties/button",
+  options: {
+    widget: "Button"
+  },
+  config: {
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
     },
-    {
-      "type": "Control",
-      "scope": "#/properties/threeRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "20%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/twentyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "20%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(20% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/fourRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "30%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/thirtyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "30%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(30% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/fiveRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "40%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/fortyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "40%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(40% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/sixRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "50%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/fiftyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "50%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(50% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/sixtyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "60%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(60% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/sevenRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "60%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/seventyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "70%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(70% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/eightRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "70%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/eightyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "80%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(80% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/nineRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "80%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/nintyPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "90%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(90% - 3px)",
-          top: "12px",
-          width: "10px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/tenRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "90%",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/hundredPercentage",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "100%"
-        },
-        style: {
-          position: "absolute",
-          left: "calc(100% - 22px)",
-          top: "12px",
-          width: "20px",
-          textAlign: "center",
-          fontSize: "8px",
-          zIndex: 2
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/elevenRunnerTick",
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: "calc(100% - 10px)",
-          top: 0,
-          width: "2px",
-          zIndex: 10,
-          height: "10px",
-          background: "green"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/runnerBoy",
-      "layout": { xs: 12, sm: 8, md: 6, lg: 5 },
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          "url": "https://media1.giphy.com/media/JTOaN2A7IVwoGKIQ11/giphy.gif?cid=ecf05e47oxseox7hagztx1974svhjicmd09zlj0au9zewn8v&ep=v1_stickers_search&rid=giphy.gif&ct=s"
-        },
-        containerStyle: {
-          position: "absolute",
-          left: 0,
-          textAlign: "center",
-          borderRadius: "20px 20px 0 0",
-          display: "flex",
-          top: "20px",
-          width: "80px",
-          height: "100px",
-          background: "transparent",
-          fontWeight: "bolder",
-          color: "white",
-          "@keyframes rotateRunnerAnimation": {
-            from: {
-              left: 0
-            },
-            to: {
-              left: "calc(50% - 40px)"
-            }
-          },
-          animation: "rotateRunnerAnimation 10s linear 1s 1 forwards",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/progressBar",
-      "layout": { xs: 12, sm: 8, md: 6, lg: 5 },
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: "20 Policy Completed"
-        },
-        style: {
-          position: "absolute",
-          left: 0,
-          textAlign: "center",
-          borderRadius: "0 10px 10px 10px",
-          top: "calc(100% - 15px)",
-          display: "flex",
-          zIndex: 3,
-          overflow: "hidden",
-          fontSize: "10px",
-          width: "1px",
-          height: "15px",
-          background: "green",
-          fontWeight: 900,
-          textShadow: "2px 2px 5px gray",
-          color: "white",
-          "@keyframes widthAnimation": {
-            from: {
-              width: 0
-            },
-            to: {
-              width: "50%"
-            }
-          },
-          animation: "widthAnimation 10s linear 1s 1 forwards",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/progrssBarContainer",
-      "layout": { xs: 12, sm: 8, md: 6, lg: 5 },
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          heading: " "
-        },
-        style: {
-          position: "absolute",
-          left: 0,
-          textAlign: "center",
-          borderRadius: "0 0 10px 10px",
-          display: "flex",
-          overflow: "hidden",
-          fontSize: "8px",
-          top: "calc(100% - 15px)",
-          width: "100%",
-          height: "15px",
-          background: "#D9FFE2",
-          fontWeight: "bolder",
-          color: "white"
-        }
-      }
-    },
-    {
-      "type": "Control",
-      "scope": "#/properties/trophy",
-      "layout": { xs: 12, sm: 8, md: 6, lg: 5 },
-      "options": {
-        "widget": "Box"
-      },
-      "config": {
-        "main": {
-          "url": "https://tse2.mm.bing.net/th?id=OIP.4mtQjTlFWqEt6ze9dSB2DwHaLi&pid=Api&P=0&h=180"
-        },
-        containerStyle: {
-          position: "absolute",
-          right: "-20px",
-          textAlign: "center",
-          borderRadius: "0 0 10px 10px",
-          display: "flex",
-          overFlow: "hidden",
-          fontSize: "8px",
-          bottom: "15px",
-          width: "40px",
-          height: "60px",
-          "@keyframes trophyAnimation": {
-            0: {
-              transform: "rotate(0deg)"
-            },
-            "50%": {
-              transform: "rotate(20deg)"
-            },
-            "100%": {
-              transform: "rotate(-20deg)"
-            }
-          },
-          animation: "trophyAnimation 3s  infinite alternate"
-        },
-        style: {
-          textAlign: "center",
-          borderRadius: "0 0 10px 10px",
-          display: "flex",
-          overFlow: "hidden",
-          fontSize: "8px",
-          bottom: "15px",
-          width: "40px",
-          height: "60px",
-          background: "#D9FFE2",
-          fontWeight: "bolder",
-          color: "white"
-        }
-      }
-    }
-  ]
-};
-const RunnerBoyProgressbar = (config, componentScope) => {
-  const RunnerBoy = _.cloneDeep(RunnerBoyProgressBar);
-  RunnerBoy.scope = componentScope;
-  return RunnerBoy;
-};
-var Tabsection = {
-  type: "TabLayout",
-  config: {
-    main: {
-      id: "groupMaster",
-      tabLabels: ["default"],
-      layout: 12
-    }
-  },
-  elements: []
-};
-const buildTabSection = (config, componentScope) => {
-  const tab = _.cloneDeep(Tabsection);
-  if (config.sectionLabels) {
-    tab.config.main.tabLabels = config.sectionLabels.map((e) => e.label);
-  }
-  tab.config.main.id = config.name;
-  return tab;
-};
-var WrapperSection = {
-  type: "WrapperLayout",
-  config: {
-    main: {
-      label: "Default Label",
-      divider: true
-    },
-    defaultStyle: true
-  },
-  elements: []
-};
-const buildWrapperSection = (config, componentScope) => {
-  const wrapper = _.cloneDeep(WrapperSection);
-  wrapper.config.main.label = config.label;
-  wrapper.config.main.divider = config.divider ? true : false;
-  wrapper.config.main.header = config.heading ? true : false;
-  return wrapper;
-};
-var TextInputField = {
-  type: "Control",
-  scope: "#/properties/text",
-  options: {
-    widget: "InputField"
-  },
-  config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
-    main: {
-      label: ""
-    },
-    style: {}
-  }
-};
-const buildTextField = (config, componentScope) => {
-  const inputField = _.cloneDeep(TextInputField);
-  inputField.config.main.label = config.label;
-  if (config.style) {
-    inputField.config.style = JSON.parse(config.style);
-  }
-  if (config.layout) {
-    inputField.config.layout = createLayoutFormat(config.layout);
-  }
-  inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
-  inputField.scope = componentScope;
-  return inputField;
-};
-var SelectInputField = {
-  type: "Control",
-  scope: "#/properties/select",
-  options: {
-    widget: "SelectInputField"
-  },
-  config: {
-    "layout": {
-      "xs": 11,
-      "sm": 11,
-      "md": 5.5,
-      "lg": 5.5
-    },
-    main: {
-      label: "",
-      type: "text"
-    }
-  }
-};
-const buildSelect = (config, componentScope) => {
-  const selectInputField = _.cloneDeep(SelectInputField);
-  selectInputField.config.main.label = config.label;
-  if (config.value) {
-    const options = config.value.map((e) => {
-      return { label: e.label, value: e.value };
-    });
-    selectInputField.config.main.options = options;
-  }
-  if (config.layout) {
-    selectInputField.config.layout = createLayoutFormat(config.layout);
-  }
-  selectInputField.scope = `${componentScope}/properties/options`;
-  return selectInputField;
-};
-var Button = {
-  type: "Control",
-  scope: "#/properties/button",
-  options: {
-    widget: "Button"
-  },
-  config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    },
-    main: {
-      name: "Compare",
-      variant: "contained",
-      color: "info",
-      type: "text",
-      startIcon: "",
-      icon: "",
-      onClick: "onClick",
-      size: "large"
+    main: {
+      name: "Compare",
+      variant: "contained",
+      color: "info",
+      type: "text",
+      startIcon: "",
+      icon: "",
+      onClick: "onClick",
+      size: "large"
     },
     style: {}
   }
@@ -9697,7 +8997,7 @@ var Table = {
 };
 const buildTable = (config, componentScope) => {
   const table = _.cloneDeep(Table);
-  table.scope = `${componentScope}/properties/rows`;
+  table.scope = componentScope;
   if (config.style) {
     table.config.style = JSON.parse(config.style);
   }
@@ -9814,94 +9114,99 @@ const buildDownloadFile = (config, componentScope) => {
   return DownloadFile;
 };
 var Card = {
-  "type": "WrapperLayout",
-  "config": {
-    "main": {
-      "rowSpacing": 0.5
+  type: "WrapperLayout",
+  config: {
+    main: {
+      rowSpacing: 0.5
     },
-    "style": {
-      "wrapperStyle": {
-        "color": "white",
-        "width": "100%",
-        "textAlign": "left",
-        "background": "#3f51b5",
-        "borderRadius": "20px"
+    style: {
+      wrapperStyle: {
+        position: "relative",
+        color: "white",
+        height: { xs: "120px", md: "160px" },
+        width: "100%",
+        textAlign: "left",
+        background: "#3f51b5",
+        borderRadius: "20px"
       }
     },
-    "layout": {
-      xs: 11,
-      sm: 11,
-      md: 6,
-      lg: 6
-    }
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 }
   },
-  "elements": [
+  elements: [
     {
-      "type": "Control",
-      "scope": "#/properties/programType",
-      "config": {
-        "main": {
-          "heading": "$5000.00"
+      type: "Control",
+      scope: "#/properties/programType",
+      config: {
+        main: {
+          heading: "$5000.00"
         },
-        "style": {
-          "color": "#f5effc",
-          "height": "80px",
-          "display": "flex",
-          "fontSize": "32px",
-          paddingLeft: "10px",
-          "alignItems": "center",
-          "background": "inherit"
+        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
+        layout: 5
       },
-      "options": {
-        "widget": "Box"
+      options: {
+        widget: "Box"
       }
     },
     {
-      "type": "Control",
-      "scope": "#/properties/programType",
-      "config": {
-        "main": {
-          "url": "$"
+      type: "Control",
+      scope: "#/properties/programType",
+      config: {
+        main: {
+          url: "$"
         },
-        "style": {
-          "color": "#f5effc",
-          "height": "80px",
-          "display": "flex",
-          "fontSize": "34px",
-          "alignItems": "center",
-          "background": "inherit",
-          paddingTop: "20px",
-          "justifyContent": "right"
+        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"
         },
-        "layout": 5
+        layout: 5
       },
-      "options": {
-        "widget": "Box"
+      options: {
+        widget: "Box"
       }
     },
     {
-      "type": "Control",
-      "scope": "#/properties/programType",
-      "config": {
-        "main": {
-          "heading": "Total Earnings"
+      type: "Control",
+      scope: "#/properties/programType",
+      config: {
+        main: {
+          heading: "Total Earnings"
         },
-        "style": {
-          "color": "#8999e8",
-          "fontSize": "12px",
-          "paddingTop": "-28px",
-          "background": "inherit",
-          textAlign: "left",
-          float: "left",
-          paddingLeft: "10px",
-          "paddingBottom": "25px"
+        style: {
+          position: "absolute",
+          top: "calc(60%)",
+          alignItems: "center",
+          color: "#8999e8",
+          fontSize: "16px",
+          left: "10%",
+          background: "inherit",
+          justifyContent: "center"
         },
-        "layout": 12
+        layout: 12
       },
-      "options": {
-        "widget": "Box"
+      options: {
+        widget: "Box"
       }
     }
   ]
@@ -9918,7 +9223,8 @@ const buildCard = (config, componentScope) => {
     card.config.layout = createLayoutFormat(config.layout);
   }
   card.elements[0].config.main.heading = config.label;
-  card.elements[2].config.main.heading = config.caption;
+  card.elements[1].config.main.url = config.url;
+  card.elements[2].config.main.heading = config.description;
   return card;
 };
 var DateInputField = {
@@ -9951,217 +9257,56 @@ const buildDate = (config, componentScope) => {
   return dateInputField;
 };
 var RankCard = {
-  type: "WrapperLayout",
-  config: {
-    wrapperStyle: {
-      width: 295,
-      height: 310,
-      position: "relative",
-      background: "white",
-      borderRadius: "12px",
-      boxShadow: "2px 2px 5px grey",
-      margin: "none"
-    },
-    main: {},
-    layout: 4
+  type: "Control",
+  scope: "#/properties/path",
+  options: {
+    widget: "RankCard"
   },
-  elements: [
-    {
-      type: "Control",
-      scope: "#/properties/image",
-      config: {
-        main: {
-          url: ""
-        },
-        style: {
-          position: "absolute",
-          left: "calc(50% - 90px)",
-          top: "10px",
-          border: "1px solid blue",
-          objectFit: "cover",
-          width: "180px",
-          boxShadow: "1px 1px  2px blue",
-          height: "180px",
-          borderRadius: "50%",
-          marginLeft: "auto",
-          marginRight: "auto"
-        },
-        layout: 6
-      },
-      options: {
-        widget: "Box"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/name",
-      config: {
-        style: {
-          color: "white",
-          position: "absolute",
-          width: "95%",
-          top: "200px",
-          padding: "0px 12px",
-          display: "inline-block",
-          borderRadius: "8px",
-          "@keyframes RankCardImage": {
-            from: {
-              backgroundColor: "green"
-            },
-            to: {
-              backgroundColor: "blue"
-            }
-          },
-          animation: "RankCardImage 4s infinite alternate"
-        },
-        main: {
-          heading: "Prakhar"
-        }
-      },
-      options: {
-        widget: "Box"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/description",
-      config: {
-        style: {
-          maxHeight: 120,
-          fontSize: "15px",
-          fontWeight: "400",
-          width: "95%",
-          position: "absolute",
-          top: "240px",
-          color: "gray",
-          overflow: "auto",
-          wordWrap: "break-word",
-          "&::-webkit-scrollbar": { display: "none" }
-        },
-        main: {
-          heading: "sadnfikudfojbsvdjnblokvnjsdnvlkjm nlskjdnv"
-        }
-      },
-      options: {
-        widget: "Box"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/rank",
-      config: {
-        style: {
-          position: "absolute",
-          top: "0px",
-          right: "0px",
-          width: "15%",
-          animation: "RankCardImage 4s infinite alternate",
-          backgroundColor: "rgb(57, 73, 171)",
-          color: "white",
-          boxShadow: "2px 2px 5px gray",
-          padding: "4px 8px",
-          borderRadius: "4px 12px 4px 25px",
-          fontWeight: "bold"
-        },
-        main: {
-          heading: "#1"
-        }
-      },
-      options: {
-        widget: "Box"
-      }
-    }
-  ]
+  config: {
+    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    main: {}
+  }
 };
-const buildrankCard = (config, componentScope) => {
+const buildRankCard = (config, componentScope) => {
   const rankCard = _.cloneDeep(RankCard);
   rankCard.scope = componentScope;
+  if (config.image) {
+    rankCard.config.main.url = config.image;
+  }
+  if (config.title) {
+    rankCard.config.main.title = config.title;
+  }
+  if (config.description) {
+    rankCard.config.main.description = config.description;
+  }
+  if (config.rank) {
+    rankCard.config.main.rank = `#${config.rank}`;
+  }
   if (config.layout) {
     rankCard.config.layout = createLayoutFormat(config.layout);
   }
   return rankCard;
 };
 var RollAndDice = {
-  type: "WrapperLayout",
-  name: "Rank",
-  config: {
-    wrapperStyle: {
-      width: "100%",
-      padding: "none"
-    },
-    style: {
-      wrapperStyle: {
-        width: "100%",
-        height: 270,
-        position: "relative",
-        background: "#333333",
-        borderRadius: "12px",
-        boxShadow: "2px 2px 5px grey",
-        margin: "auto",
-        padding: "none"
-      }
-    },
-    main: {
-      header: true
-    },
-    layout: 12
+  type: "Control",
+  scope: "#/properties/path",
+  options: {
+    widget: "RollAndDice"
   },
-  elements: [
-    {
-      type: "Control",
-      scope: "#/properties/name",
-      config: {
-        style: {
-          color: "white",
-          height: 190,
-          width: "60%",
-          marginLeft: "auto",
-          marginRight: "auto",
-          backgroundSize: "contain",
-          backgroundPosition: "center",
-          display: "flex",
-          alignItems: "center",
-          marginTop: "10px",
-          justifyContent: "center",
-          backgroundRepeat: "no-repeat",
-          padding: "0px 12px",
-          backgroundImage: "url('https://media0.giphy.com/media/oVC14esV3dKehcBkT4/giphy.gif?cid=ecf05e47vv4p7czphyk7mnyu6uwho7r1g8da0lwyceacljoe&ep=v1_stickers_search&rid=giphy.gif&ct=s')",
-          borderRadius: "50%"
-        },
-        main: {
-          heading: ""
-        }
-      },
-      options: {
-        widget: "Box"
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/button",
-      config: {
-        layout: 4,
-        style: {},
-        main: {
-          name: "Rank",
-          onClick: "rankProvider"
-        }
-      },
-      options: {
-        widget: "Button"
-      }
-    }
-  ]
+  config: {
+    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    main: {}
+  }
 };
 const buildRollAndDice = (config, componentScope) => {
   const rank = _.cloneDeep(RollAndDice);
   if (config.name) {
-    RollAndDice.name = config.name;
-    rank.elements[1].scope = componentScope;
+    rank.scope = componentScope;
   }
   if (config.layout) {
     rank.config.layout = createLayoutFormat(config.layout);
   }
+  return rank;
 };
 var Timer = {
   type: "Control",
@@ -10280,6 +9425,53 @@ const buildTextArea = (config, componentScope) => {
   textArea.scope = componentScope;
   return textArea;
 };
+var cardSlider = {
+  type: "Control",
+  scope: "#/properties/path",
+  options: {
+    widget: "Slider"
+  },
+  elements: [],
+  config: {
+    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    main: {}
+  }
+};
+const buildSlider = (config, componentScope) => {
+  const slider = _.cloneDeep(cardSlider);
+  if (config.name) {
+    slider.scope = componentScope;
+  }
+  if (config.layout) {
+    slider.config.layout = createLayoutFormat(config.layout);
+  }
+  return slider;
+};
+const Checkbox = {
+  "type": "Control",
+  "scope": "#/properties/username1",
+  "layout": 12,
+  "options": {
+    "widget": "CheckBox"
+  },
+  "config": {
+    "main": {
+      "label": "Welcome to Hyperform"
+    }
+  }
+};
+const buildCheckbox = (config, componentScope) => {
+  const check = _.cloneDeep(Checkbox);
+  check.scope = componentScope;
+  check.config.main.label = config.label;
+  if (config.layout) {
+    check.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.style) {
+    check.config.style = JSON.parse(config.style);
+  }
+  return check;
+};
 const buildUiSchema = (config) => {
   let elements = {};
   const componentScope = `#/properties/${config.name}`;
@@ -10314,6 +9506,9 @@ const buildUiSchema = (config) => {
     case "Box":
       elements = buildLabel(config, componentScope);
       break;
+    case "CheckBox":
+      elements = buildCheckbox(config, componentScope);
+      break;
     case "UploadFile":
       elements = buildUploadFile(config, componentScope);
       break;
@@ -10357,15 +9552,13 @@ const buildUiSchema = (config) => {
       elements = buildProgressBarCard(config, componentScope);
       break;
     case "RankCard":
-      elements = buildrankCard(config, componentScope);
+      elements = buildRankCard(config, componentScope);
       break;
     case "Rank":
       elements = buildRollAndDice(config, componentScope);
       break;
-    case "CardSlider":
-      const CardSlider = _.cloneDeep(cardSlider);
-      CardSlider.scope = componentScope;
-      elements = CardSlider;
+    case "Slider":
+      elements = buildSlider(config, componentScope);
       break;
     case "Timer":
       elements = buildTimer(config, componentScope);
@@ -10380,7 +9573,9 @@ const buildUiSchema = (config) => {
       elements = buildBasicUiSchema(config);
   }
   if (config == null ? void 0 : config.elements) {
-    if (config.type == "Table") {
+    if ((config == null ? void 0 : config.type) === "LeaderBoard") {
+      return elements;
+    } else if (config.type == "Table") {
       elements.elements = config.elements.map((e, elemInd) => {
         if (e.type) {
           return {
@@ -10402,8 +9597,8 @@ const buildUiSchema = (config) => {
   }
   return elements;
 };
-var clearSessionStorage = () => {
-  sessionStorage.removeItem("pageFormdata");
+var clearLocalStorage = () => {
+  localStorage.removeItem("pageFormdata");
 };
-export { buildConfig, buildUiSchema, clearSessionStorage, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService };
+export { buildConfig, buildUiSchema, clearLocalStorage as clearPreviousCache, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService };
 //# sourceMappingURL=impaktapps-ui-builder.es.js.map