impaktapps-ui-builder 0.0.275 → 0.0.276

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

@@ -4531,7 +4531,7 @@ var lodash = { exports: {} };
         customizer = typeof customizer == "function" ? customizer : undefined$1;
         return baseIsMatch(object, source, getMatchData(source), customizer);
       }
-      function isNaN(value) {
+      function isNaN2(value) {
         return isNumber(value) && value != +value;
       }
       function isNative(value) {
@@ -5608,7 +5608,7 @@ var lodash = { exports: {} };
       lodash2.isMap = isMap;
       lodash2.isMatch = isMatch;
       lodash2.isMatchWith = isMatchWith;
-      lodash2.isNaN = isNaN;
+      lodash2.isNaN = isNaN2;
       lodash2.isNative = isNative;
       lodash2.isNil = isNil;
       lodash2.isNull = isNull;
@@ -5948,6 +5948,45 @@ const ComponentSchema = {
           }
         }
       }
+    },
+    legendLabels: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string"
+          }
+        }
+      }
+    },
+    pieArcColors: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string"
+          }
+        }
+      }
+    },
+    validation: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          componentName: {
+            type: "string"
+          },
+          validationType: {
+            type: "string"
+          },
+          validationValue: {
+            type: "string"
+          }
+        }
+      }
     }
   }
 };
@@ -6028,7 +6067,7 @@ const componentBasicUiSchema = {
         main: {
           tabLabels: ["Core"],
           defaultStyle: true,
-          id: "component"
+          id: `component`
         }
       },
       elements: [
@@ -6054,6 +6093,7 @@ const componentBasicUiSchema = {
                     { label: "Container", value: "WrapperSection" },
                     { label: "Tabs", value: "TabSection" },
                     { label: "Text", value: "Text" },
+                    { label: "Radio", value: "Radio" },
                     { label: "Text Area", value: "TextArea" },
                     { label: "Button", value: "Button" },
                     { label: "Card", value: "card" },
@@ -6263,6 +6303,13 @@ const createLayoutFormat = (config) => {
   });
   return data2;
 };
+const flatObjectValueInArray = (config) => {
+  const keyName = Object.keys(config[0])[0];
+  const data2 = config.map((e) => {
+    return e[keyName];
+  });
+  return data2;
+};
 const getNavigationHistory = (config, path) => {
   if (path) {
     let urlRoutes = config.name;
@@ -6336,6 +6383,7 @@ const CoreSection = {
             { label: "Text Area", value: "TextArea" },
             { label: "Button", value: "Button" },
             { label: "Card", value: "card" },
+            { label: "Radio", value: "Radio" },
             { label: "Rank", value: "Rank" },
             { label: "SpeedoMeter", value: "SpeedoMeter" },
             { label: "ProgressBar", value: "ProgressBar" },
@@ -6629,6 +6677,38 @@ const EventSection = {
     }
   ]
 };
+const getArrayControl = (parentScope, childScope, childLabel) => {
+  return {
+    type: "Control",
+    scope: `#/properties/${parentScope}`,
+    layout: 11.5,
+    options: {
+      detail: {
+        type: "HorizontalLayout",
+        elements: [
+          {
+            type: "Control",
+            scope: `#/properties/${childScope}`,
+            options: {
+              widget: "InputField"
+            },
+            config: {
+              layout: {
+                xs: 11,
+                sm: 11,
+                md: 5.5,
+                lg: 5.5
+              },
+              main: {
+                label: childLabel || "Labels for Tab"
+              }
+            }
+          }
+        ]
+      }
+    }
+  };
+};
 const getInputField = (scope, label) => {
   return {
     type: "Control",
@@ -6720,7 +6800,15 @@ const GraphSection = {
 };
 const buildPropertiesSection = function(type) {
   let uiSchema = _.cloneDeep(GraphSection);
-  if (type === "SpeedoMeter" || type === "RankCard" || type === "Timer") {
+  if (type === "SpeedoMeter") {
+    uiSchema.elements = [
+      getInputField("segments", "Segments Count"),
+      getInputField("heading", "Container Heading"),
+      getInputField("heading", "Container Heading"),
+      getInputField("speedoCaption", "Speedometer Caption"),
+      getInputField("width", "Speedometer Width")
+    ];
+  } else if (type === "RankCard") {
     uiSchema.elements = [
       getInputField("rank", "Rank"),
       getInputField("image", "Image Url"),
@@ -6779,47 +6867,25 @@ const buildPropertiesSection = function(type) {
       getSelectField("graphType", "Graph Type", [
         { label: "Bar Graph", value: "BarGraph" },
         { label: "Stack Bar Graph", value: "StackBarGraph" },
+        { label: "Line Graph", value: "LineGraph" },
         { label: "Pie Graph", value: "PieGraph" },
         { label: "Horizontal Bar Graph", value: "HorizontalBarGraph" }
       ]),
       leftLabel,
       bottomLabel,
-      legendAvailabe
+      legendAvailabe,
+      getArrayControl("legendLabels", "label"),
+      getArrayControl("pieArcColors", "color")
     ];
   } else if (type === "WrapperSection") {
     uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), getRadioInputField("heading", "Page Heading", ["YES", "No"])];
   } else if (type === "TabSection") {
     uiSchema.elements = [
-      {
-        type: "Control",
-        scope: "#/properties/sectionLabels",
-        layout: 11.5,
-        options: {
-          detail: {
-            type: "HorizontalLayout",
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/label",
-                options: {
-                  widget: "InputField"
-                },
-                config: {
-                  layout: {
-                    xs: 11,
-                    sm: 11,
-                    md: 5.5,
-                    lg: 5.5
-                  },
-                  main: {
-                    label: "Labels for Tab"
-                  }
-                }
-              }
-            ]
-          }
-        }
-      }
+      getArrayControl("sectionLabels", "label")
+    ];
+  } else if (type === "Radio") {
+    uiSchema.elements = [
+      getArrayControl("sectionLabels", "label", "Options Of Radio")
     ];
   }
   return uiSchema;
@@ -6982,27 +7048,82 @@ const ValueTab = {
   type: "HorizontalLayout",
   elements: [OptionArray]
 };
+const ValidationSection = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/validation",
+      layout: 11.5,
+      options: {
+        detail: {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/validationType",
+              options: {
+                widget: "InputField"
+              },
+              config: {
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
+                main: {
+                  label: "Validation Type"
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/validationValue",
+              options: {
+                widget: "InputField"
+              },
+              config: {
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
+                main: {
+                  label: "Validation Value"
+                }
+              }
+            }
+          ]
+        }
+      }
+    }
+  ]
+};
 const sectionLabels = {
-  Select: ["Core", "Value", "style", "Event"],
-  MultipleSelect: ["Core", "Value", "style", "Event"],
-  Table: ["Core", "Components", "style", "Event"],
-  LeaderBoard: ["Core", "Components", "Properties", "style", "Event"],
-  WrapperSection: ["Core", "Components", "Properties", "style"],
-  TabSection: ["Core", "Components", "Properties", "style"],
-  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"],
-  Slider: ["Core", "Components", "Properties", "style", "Event"],
-  Timer: ["Core", "Properties", "style", "Event"],
-  Rank: ["Core", "Properties", "style", "Event"],
-  Button: ["Core", "Properties", "style", "Event"],
-  Array: ["Core", "Components"]
+  Select: ["Core", "Value", "style", "Event", "Validation"],
+  MultipleSelect: ["Core", "Value", "style", "Event", "Validation"],
+  Table: ["Core", "Components", "style", "Event", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "style", "Event", "Validation"],
+  WrapperSection: ["Core", "Components", "Properties", "style", "Validation"],
+  TabSection: ["Core", "Components", "Properties", "style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "style", "Event", "Validation"],
+  card: ["Core", "Properties", "style", "Event", "Validation"],
+  UploadFile: ["Core", "style", "Event", "Validation"],
+  Graph: ["Core", "Properties", "style", "Event", "Validation"],
+  DownloadFile: ["Core", "style", "Event", "Validation"],
+  Box: ["Core", "Properties", "style", "Event", "Validation"],
+  Properties: ["Core", "Properties", "style", "Event", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "style", "Event", "Validation"],
+  RankCard: ["Core", "Properties", "style", "Event", "Validation"],
+  Slider: ["Core", "Components", "Properties", "style", "Event", "Validation"],
+  Timer: ["Core", "Properties", "style", "Event", "Validation"],
+  Rank: ["Core", "Properties", "style", "Event", "Validation"],
+  Button: ["Core", "Properties", "style", "Event", "Validation"],
+  Array: ["Core", "Components", "Validation"],
+  Radio: ["Core", "Properties", "style", "Event", "Validation"],
+  Text: ["Core", "Event", "Validation"]
 };
 const refreshPage = (type, store2) => {
   var _a;
@@ -7014,11 +7135,12 @@ const refreshPage = (type, store2) => {
       style: StyleSection,
       Event: EventSection,
       Components: TableSection,
-      Properties: buildPropertiesSection(type)
+      Properties: buildPropertiesSection(type),
+      Validation: ValidationSection
     };
     const elements = (_a = sectionLabels[type]) == null ? void 0 : _a.map((e) => sectionUiSchema[e]);
-    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event"];
-    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection];
+    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event", "Validation"];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
   }
   store2.setUiSchema(UiSchema);
 };
@@ -7027,8 +7149,8 @@ var Component = (store2, dynamicData2) => {
     setPage: async function() {
       const formdata = await this.getFormdata();
       store2.setFormdata(formdata);
-      const schema = this.getSchema();
-      store2.setSchema(schema);
+      const schema2 = this.getSchema();
+      store2.setSchema(schema2);
       this.refreshPage(formdata == null ? void 0 : formdata.type, store2);
     },
     refreshPage,
@@ -7077,8 +7199,8 @@ 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 = saveFormdataInLocalStorage(store2.formData, path);
-      const data2 = path ? _.get(response, path) : response;
+      const response2 = saveFormdataInLocalStorage(store2.formData, path);
+      const data2 = path ? _.get(response2, path) : response2;
       store2.setFormdata(data2);
     },
     deleteEvent: async function() {
@@ -7086,8 +7208,8 @@ 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 = saveFormdataInLocalStorage(store2.formData, path);
-      store2.setFormdata(_.get(response, path));
+      const response2 = saveFormdataInLocalStorage(store2.formData, path);
+      store2.setFormdata(_.get(response2, path));
     },
     widgetAddClickHandler: async function() {
       var _a;
@@ -7133,8 +7255,8 @@ var pageMaster = (funcParams) => {
       const formdata = await this.getFormdata();
       store2.setFormdata(formdata);
       const uiSchema = await this.getUiSchema();
-      const schema = await this.getSchema();
-      store2.setSchema(schema);
+      const schema2 = await this.getSchema();
+      store2.setSchema(schema2);
       store2.setUiSchema(uiSchema);
     },
     getFormdata: async function() {
@@ -7163,9 +7285,9 @@ var pageMaster = (funcParams) => {
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
-      const response = saveFormdataInLocalStorage(store2.formData);
+      const response2 = saveFormdataInLocalStorage(store2.formData);
       store2.navigate(
-        `/Component?path=${`elements[${response == null ? void 0 : response.elements.length}]`}&id=${id}`
+        `/Component?path=${`elements[${response2 == null ? void 0 : response2.elements.length}]`}&id=${id}`
       );
     },
     submitPageHandler: async function() {
@@ -7201,8 +7323,8 @@ var pageMaster = (funcParams) => {
     deleteEvent: async function() {
       const rowId = dynamicData2.path.split(".")[1];
       store2.formData.events.splice(rowId, 1);
-      const response = saveFormdataInLocalStorage(store2.formData);
-      store2.setFormdata(response);
+      const response2 = saveFormdataInLocalStorage(store2.formData);
+      store2.setFormdata(response2);
     }
   };
 };
@@ -7347,6 +7469,7 @@ const EventUiSchema = {
                   type: "text",
                   options: [
                     { label: "Click Event", value: "onClick" },
+                    { label: "onStart", value: "onStart" },
                     { label: "Load Event", value: "onLoad" },
                     { label: "Change Event", value: "onChange" },
                     { label: "Success", value: "Success" },
@@ -7709,8 +7832,8 @@ var event = (store2, dynamicData2) => {
     setPage: async function() {
       const formdata = await this.getFormData();
       store2.setFormdata(formdata);
-      const schema = await this.getSchema();
-      store2.setSchema(schema);
+      const schema2 = await this.getSchema();
+      store2.setSchema(schema2);
       this.refreshPage(formdata.Handler, store2);
     },
     refreshPage: (handlerType, store22) => {
@@ -7793,7 +7916,7 @@ const executeEvents = async (config, componentName2, store2, dynamicData2, userV
   let nextEvent = [];
   let LoadResponse = null;
   if (config.eventType === "onLoad") {
-    const { response, events } = await executetOnLoadEvent(
+    const { response: response2, events } = await executetOnLoadEvent(
       config,
       componentName2,
       store2,
@@ -7804,10 +7927,10 @@ const executeEvents = async (config, componentName2, store2, dynamicData2, userV
       eventGroups2,
       parentEventOutput2
     );
-    LoadResponse = response;
+    LoadResponse = response2;
     nextEvent = events;
   } else {
-    const { response, events } = await executeEventsHandler(
+    const { response: response2, events } = await executeEventsHandler(
       config,
       componentName2,
       store2,
@@ -7818,7 +7941,7 @@ const executeEvents = async (config, componentName2, store2, dynamicData2, userV
       eventGroups2,
       parentEventOutput2
     );
-    LoadResponse = response;
+    LoadResponse = response2;
     nextEvent = events;
   }
   if ((nextEvent == null ? void 0 : nextEvent.length) > 0) {
@@ -7829,7 +7952,24 @@ const executeEvents = async (config, componentName2, store2, dynamicData2, userV
 };
 const executetOnLoadEvent = async (config, componentName2, store2, dynamicData2, userValue2, service2, serviceHolder2, eventGroups2, parentEventOutput2) => {
   try {
-    const { response } = await executeEventsHandler(
+    const startEvent = config == null ? void 0 : config.events.filter((e) => e.eventType === "onStart");
+    if (startEvent.length > 0) {
+      const { response: response3 } = await executeEventsHandler(
+        config,
+        componentName2,
+        store2,
+        dynamicData2,
+        userValue2,
+        service2,
+        serviceHolder2,
+        eventGroups2,
+        parentEventOutput2
+      );
+      if (response3) {
+        return;
+      }
+    }
+    const { response: response2 } = await executeEventsHandler(
       config,
       componentName2,
       store2,
@@ -7842,7 +7982,7 @@ const executetOnLoadEvent = async (config, componentName2, store2, dynamicData2,
     );
     const SuccessEvent = config == null ? void 0 : config.events.filter((e) => e.eventType === "Success");
     const setEvent = SuccessEvent.length > 0 ? SuccessEvent : [{ Handler: "mergeFormdata", eventType: "Success", type: config.type }];
-    return { response, events: setEvent };
+    return { response: response2, events: setEvent };
   } catch (err) {
     const FailEvent = config == null ? void 0 : config.events.filter((e) => e.eventType === "Fail");
     const setEvent = FailEvent.length > 0 ? FailEvent : [];
@@ -7913,13 +8053,13 @@ async function executeApiEventHandler(apiHandlerConfig, componentName2, store2,
     "Access-Control-Allow-Origin": "*"
   };
   const { body: body2, headers: headers2 } = await buildApiPayload(apiHandlerConfig, initialBody, initialHeaders, store2, dynamicData2, userValue2);
-  let response;
-  response = await service2[apiHandlerConfig.method](
+  let response2;
+  response2 = await service2[apiHandlerConfig.method](
     apiHandlerConfig.path,
     body2,
     headers2 && { headers: headers2 }
   );
-  return { response, events: apiHandlerConfig == null ? void 0 : apiHandlerConfig.events };
+  return { response: response2, events: apiHandlerConfig == null ? void 0 : apiHandlerConfig.events };
 }
 async function executeInBuiltFunctionHandler(refreshHandlerConfig, componentName, store, dynamicData, userValue, service, serviceHolder, parentEventOutput) {
   let parameter = {};
@@ -7931,9 +8071,10 @@ async function executeInBuiltFunctionHandler(refreshHandlerConfig, componentName
   return { response: void 0, events: refreshHandlerConfig == null ? void 0 : refreshHandlerConfig.events };
 }
 async function executeCustomHandler(customHandlerConfig, componentName, store, dynamicData, userValue, service, serviceHolder, parentEventOutput) {
+  console.log(service);
   const makeFunc = eval(customHandlerConfig.eventCode);
-  makeFunc(store, dynamicData, userValue, parentEventOutput, service);
-  return { response: void 0, events: customHandlerConfig == null ? void 0 : customHandlerConfig.events };
+  const response = await makeFunc(store, dynamicData, userValue, parentEventOutput, service, componentName);
+  return { response, events: customHandlerConfig == null ? void 0 : customHandlerConfig.events };
 }
 async function mergeFormdata(handlerResponse, componentName2, eventConfig, store2) {
   if (eventConfig.type === "Select" && !(_.isEmpty(handlerResponse) && handlerResponse)) {
@@ -8012,6 +8153,7 @@ 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;
@@ -8130,10 +8272,12 @@ var leaderBoard = {
       label: "LeaderBoard",
       divider: true
     },
+    style: { wrapperStyle: {
+      height: { xs: 850, sm: 1e3 }
+    } },
     wrapperStyle: {
       position: "relative",
-      width: "100%",
-      height: 1e3
+      width: "100%"
     }
   },
   elements: [
@@ -8649,6 +8793,41 @@ const PieGraph = {
     }
   }
 };
+const LineGraph = {
+  type: "Control",
+  scope: "#/properties/graph",
+  options: {
+    widget: "Graph"
+  },
+  config: {
+    main: {
+      type: "LineGraph",
+      header: "Quartely Incentive in Thousand",
+      bottomLabel: "Years",
+      leftLabel: "Incentive",
+      gridHidden: true,
+      numHidden: false,
+      tooltipDataKey: ["MAMA New Project", "Second", "Third"],
+      axisLeft: true,
+      axisBottom: true,
+      hideLeftAxisLine: false,
+      hideBottomAxisLine: false,
+      legend: {
+        labelColor: "green",
+        legendTitle: "Our Assests",
+        direction: "row",
+        align: "right",
+        colorRectWidth: 20
+      }
+    },
+    style: {
+      containerStyle: {},
+      headerStyle: {},
+      labelStyle: {},
+      lineStyle: {}
+    }
+  }
+};
 const HorizontalBarGraph = {
   type: "Control",
   scope: "#/properties/graph",
@@ -8684,8 +8863,9 @@ const HorizontalBarGraph = {
 };
 const buildHorizontalBarGraph = (config, componentScope) => {
   const horizontalBarGraph = _.cloneDeep(HorizontalBarGraph);
+  horizontalBarGraph.scope = componentScope;
   if (config.layout) {
-    horizontalBarGraph.config.layout = config.layout;
+    horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
   }
   horizontalBarGraph.scope = componentScope;
   horizontalBarGraph.config.main.header = config.heading;
@@ -8696,7 +8876,7 @@ const buildHorizontalBarGraph = (config, componentScope) => {
     horizontalBarGraph.config.containerStyle.background = config.containerBackground;
   }
   if (config.height) {
-    horizontalBarGraph.config.containerStyle.height = config.height;
+    horizontalBarGraph.config.style.containerStyle.height = config.height;
   }
   if (config.bottomLabel) {
     horizontalBarGraph.config.main.bottomLabel = config.bottomLabel;
@@ -8713,10 +8893,12 @@ var SpeedoMeter = {
     widget: "SpeedoMeter"
   },
   config: {
-    layout: 12,
+    layout: { xs: 0, sm: 12, md: 12, lg: 12 },
+    width: 350,
+    segments: "5",
     main: {
-      currentValueText: "",
-      customSegmentLabels: {},
+      currentValueText: "Your Score",
+      customSegmentLabels: [],
       data: {
         maxValue: 1e5,
         value: 5e4,
@@ -8730,7 +8912,6 @@ var SpeedoMeter = {
       needleColor: "#3f51b5",
       startColor: "red",
       textColor: "black",
-      segments: 5,
       endColor: "green",
       containerStyle: {
         background: "white",
@@ -8755,16 +8936,28 @@ const buildSpeedoMeter = (config, componentScope) => {
   const speedoMeter = _.cloneDeep(SpeedoMeter);
   speedoMeter.scope = componentScope;
   if (config.layout) {
-    speedoMeter.config.layout = config.layout;
+    speedoMeter.config.layout = createLayoutFormat(config.layout);
   }
   if (config.heading) {
     speedoMeter.config.main.header = config.heading;
   }
-  if (config.currentValueText) {
-    speedoMeter.config.main.currentValueText = config.currentValueText;
+  if (config.segments) {
+    speedoMeter.config.main.segments = config.segments;
+  }
+  if (config.style) {
+    const styleObj = JSON.parse(config.style);
+    if (styleObj == null ? void 0 : styleObj.style) {
+      speedoMeter.config.style = { ...speedoMeter.config.style, ...styleObj.style };
+    }
+    if (styleObj == null ? void 0 : styleObj.containerStyle) {
+      speedoMeter.config.style.containerStyle = { ...speedoMeter.config.style.containerStyle, ...styleObj.containerStyle };
+    }
+  }
+  if (config.width) {
+    speedoMeter.config.main.width = config.width;
   }
-  if (config.customSegmentLabels) {
-    speedoMeter.config.main.customSegmentLabels = config.customSegmentLabels;
+  if (config.speedoCaption) {
+    speedoMeter.config.main.currentValueText = config.speedoCaption;
   }
   if (config.data) {
     speedoMeter.config.main.data = config.data;
@@ -8789,34 +8982,28 @@ const buildSpeedoMeter = (config, componentScope) => {
 const buildPieGraph = (config, componentScope) => {
   const pieGraph = _.cloneDeep(PieGraph);
   if (config.layout) {
-    pieGraph.config.layout = config.layout;
-  }
-  if (config.containerBackground) {
-    pieGraph.config.style.containerStyle.background = config.containerBackground;
+    pieGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.height) {
     pieGraph.config.style.containerStyle.height = config.height;
   }
-  if (config.legendAvailabe) {
-    pieGraph.config.main.legendAvailabe = config.legendAvailabe === "YES" ? false : true;
+  if (config.legendHide) {
+    pieGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
   }
   pieGraph.scope = componentScope;
   pieGraph.config.main.header = config.heading;
-  if (config.bottomLabel) {
-    pieGraph.config.main.bottomLabel = config.bottomLabel;
+  if (config.legendLabels) {
+    pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
   }
-  if (config.leftLabel) {
-    pieGraph.config.main.leftLabel = config.leftLabel;
-  }
-  if (config.tooltipDataKey) {
-    pieGraph.config.main.tooltipDataKey = config.tooltipDataKey;
+  if (config.pieArcColors) {
+    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
   }
   return pieGraph;
 };
 const buildStackbarGraph = (config, componentScope) => {
   const barGraph = _.cloneDeep(BarGraph);
   if (config.layout) {
-    barGraph.config.layout = config.layout;
+    barGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.legendHide) {
     barGraph.config.main.legendAvailable = false;
@@ -9249,15 +9436,12 @@ const buildCard = (config, componentScope) => {
   if (config.style) {
     card.config.style = JSON.parse(config.style);
   }
-  card.elements[0].scope = `#/properties/${config.name.replace(/ /g, "")}/value`;
-  card.elements[1].scope = `#/properties/${config.name.replace(/ /g, "")}/url`;
-  card.elements[2].scope = `#/properties/${config.name.replace(/ /g, "")}/description`;
+  card.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`;
   if (config.layout) {
     card.config.layout = createLayoutFormat(config.layout);
   }
-  card.elements[0].config.main.heading = config.label;
-  card.elements[1].config.main.url = config.url;
-  card.elements[2].config.main.heading = config.description;
   return card;
 };
 var DateInputField = {
@@ -9378,7 +9562,7 @@ const buildTimer = (config, componentScope) => {
     timer.config.main.label = config.label;
   }
   if (config.layout) {
-    timer.config.layout = config.layout;
+    timer.config.layout = createLayoutFormat(config.layout);
   }
   return timer;
 };
@@ -9466,7 +9650,7 @@ var cardSlider = {
   },
   elements: [],
   config: {
-    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    layout: 12,
     main: {}
   }
 };
@@ -9505,6 +9689,63 @@ const buildCheckbox = (config, componentScope) => {
   }
   return check;
 };
+const buildLineGraph = (config, componentScope) => {
+  const lineGraph = _.cloneDeep(LineGraph);
+  if (config.layout) {
+    lineGraph.config.layout = config.layout;
+  }
+  lineGraph.config.main.header = config.heading;
+  if (config.height) {
+    lineGraph.config.style.containerStyle.height = config.height;
+  }
+  if (config.bottomLabel) {
+    lineGraph.config.main.bottomLabel = config.bottomLabel;
+  }
+  if (config.leftLabel) {
+    lineGraph.config.main.leftLabel = config.leftLabel;
+  }
+  if (config.legendHide) {
+    lineGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
+  }
+  if (config.legendLabels) {
+    lineGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+  }
+  if (config.pieArcColors) {
+    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+  }
+  lineGraph.scope = componentScope;
+  return lineGraph;
+};
+const RadioUiSchema = {
+  type: "Control",
+  scope: "#/properties/invoiceEnabled",
+  options: {
+    widget: "RadioInputField"
+  },
+  config: {
+    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    main: {
+      label: "Enabled",
+      options: ["YES", "NO"],
+      errorMessage: "Enabled is not marked as YES or NO"
+    }
+  }
+};
+const buildRadio = (config, componentScope) => {
+  const Radio = _.cloneDeep(RadioUiSchema);
+  Radio.scope = componentScope;
+  Radio.config.main.heading = config.label;
+  if (config.layout) {
+    Radio.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.sectionLabels) {
+    Radio.config.main.options = config.sectionLabels.map((e) => e.label || e.Options);
+  }
+  if (config.style) {
+    Radio.config.style = JSON.parse(config.style);
+  }
+  return Radio;
+};
 const buildUiSchema = (config) => {
   let elements = {};
   const componentScope = `#/properties/${config.name}`;
@@ -9530,6 +9771,9 @@ const buildUiSchema = (config) => {
     case "Select":
       elements = buildSelect(config, componentScope);
       break;
+    case "Radio":
+      elements = buildRadio(config, componentScope);
+      break;
     case "Button":
       elements = buildButton(config, componentScope);
       break;
@@ -9565,7 +9809,7 @@ const buildUiSchema = (config) => {
           elements = buildStackbarGraph(config, componentScope);
           break;
         case "LineGraph":
-          elements = buildPieGraph(config, componentScope);
+          elements = buildLineGraph(config, componentScope);
           break;
         case "PieGraph":
           elements = buildPieGraph(config, componentScope);
@@ -9630,8 +9874,37 @@ const buildUiSchema = (config) => {
   }
   return elements;
 };
+const schema = {
+  type: "object",
+  properties: {},
+  required: []
+};
+const buildSchema = (config) => {
+  function buildRule(configObj) {
+    if (configObj.validation) {
+      configObj.validation.forEach((rule) => {
+        if (!schema.properties[configObj.name]) {
+          schema.properties[configObj.name] = {};
+        }
+        if (rule.validationType === "required") {
+          schema.required.push(configObj.name);
+        } else {
+          schema.properties[configObj.name]["type"] = "string";
+          schema.properties[configObj.name][rule.validationType] = isNaN(rule.validationValue) ? rule.validationValue : Number(rule.validationValue);
+        }
+      });
+    }
+  }
+  buildRule(config);
+  if (config == null ? void 0 : config.elements) {
+    config.elements.forEach(buildRule);
+  }
+  console.log(schema);
+  window.localStorage.setItem("schemaDemo", JSON.stringify(schema));
+  return schema;
+};
 var clearLocalStorage = () => {
   localStorage.removeItem("pageFormdata");
 };
-export { buildConfig, buildUiSchema, clearLocalStorage as clearPreviousCache, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService };
+export { buildConfig, buildSchema, buildUiSchema, clearLocalStorage as clearPreviousCache, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService };
 //# sourceMappingURL=impaktapps-ui-builder.es.js.map