impaktapps-ui-builder 1.0.165 → 1.0.170

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

@@ -6225,6 +6225,8 @@ const ComponentSchema = {
         { title: "Button", const: "Button" },
         { title: "Data Card", const: "card" },
         { title: "Check Box", const: "CheckBox" },
+        { title: "Camera", const: "Camera" },
+        { title: "Column Group", const: "ColumnGroup" },
         { title: "Container", const: "WrapperSection" },
         { title: "Tab Container", const: "HorizontalLayout" },
         { title: "Data Grid", const: "DataGrid" },
@@ -6258,7 +6260,6 @@ const ComponentSchema = {
         { title: "Timer", const: "Timer" },
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
-        { title: "Column Group", const: "ColumnGroup" },
         { title: "Thought of the day", const: "Thought" }
       ]
     },
@@ -7970,8 +7971,9 @@ const buildPropertiesSection = function(type) {
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
         getInputField("bottomLabel_3", "Third BottomLabel"),
-        emptyBox$1("ProgressBarCardEmpty1"),
-        emptyBox$1("ProgressBarCardEmpty2")
+        getInputField("size", "Size"),
+        getRadioInputField("variant", "Variant", ["circular", "horizontal"]),
+        getArrayControl("pieArcColors", "color", "Color")
       ];
       break;
     case "card":
@@ -8025,6 +8027,7 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("isAccordion", "Accordion", ["YES", "No"]),
         getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
         getInputField("rowSpacing", "Row Spacing"),
+        getRadioInputField("defaultClosed", "Default Closed", ["YES", "No"]),
         emptyBox$1("WrapperSectionEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }),
         emptyBox$1("WrapperSectionEmpty2")
       ];
@@ -8138,6 +8141,15 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("FileInputEmpty", { xs: 6, sm: 6, md: 4, lg: 3 })
       ];
       break;
+    case "Camera":
+      uiSchema.elements = [
+        getSelectField("iconName", "Icon Name"),
+        getRadioInputField("multiUplaod", "Multiple Uplaod", ["YES", "NO"]),
+        getSelectField("color", "Color"),
+        getInputField("tooltipMessage", "Tooltip Message"),
+        getSelectField("variant", "Variant"),
+        emptyBox$1("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
+      ];
   }
   return uiSchema;
 };
@@ -8482,7 +8494,7 @@ var buildConfig = (FormData) => {
 };
 const createLayoutFormat = (layout, type) => {
   if (_.isEmpty(layout)) {
-    const fullLayoutComponents = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout"];
+    const fullLayoutComponents = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout", "Table"];
     if (fullLayoutComponents.includes(type)) {
       return { xs: 12, sm: 12, md: 12, lg: 12 };
     } else if (type === "Graph") {
@@ -8512,6 +8524,17 @@ const flatObjectValueInArray = (config2 = []) => {
 const clearFromSessionStorage = () => {
   sessionStorage.removeItem("pageFormdata");
 };
+const isErrorExist = (store2) => {
+  if (!_.isEmpty(store2.ctx.core.errors)) {
+    store2.setValidation("ValidateAndShow");
+    store2.setNotify({
+      Fail: true,
+      FailMessage: "Error on Page"
+    });
+    return false;
+  }
+  return true;
+};
 const getNavigationHistory = (config2, path) => {
   if (path) {
     let urlRoutes = config2.name;
@@ -8613,23 +8636,24 @@ function okHandler(store2) {
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
-  WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  HorizontalLayout: ["Core", "Components", "Properties", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style"],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style"],
+  WrapperSection: ["Core", "Components", "Properties", "Style"],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style"],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
   Box: ["Core", "Properties", "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
-  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style"],
+  ProgressBar: ["Core", "Properties", "Events", "Style"],
+  RankCard: ["Core", "Properties", "Events", "Style"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
-  Timer: ["Core", "Events", "Style", "Validation"],
-  Rank: ["Core", "Events", "Style", "Validation"],
+  Timer: ["Core", "Events", "Style"],
+  Rank: ["Core", "Events", "Style"],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
   Array: ["Core", "Components", "Properties", "Events", "Validation"],
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -8641,11 +8665,12 @@ const sectionLabels = {
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style", "Validation"],
+  Thought: ["Core", "Properties", "Events", "Style"],
   Date: ["Core", "Properties", "Events", "Style", "Validation"],
   DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
   Image: ["Core", "Properties", "Style"],
-  FileInput: ["Core", "Properties", "Events", "Style", "Validation"]
+  FileInput: ["Core", "Properties", "Events", "Style", "Validation"],
+  Camera: ["Core", "Properties", "Events", "Style", "Validation"]
 };
 function refreshPage(type, store2) {
   var _a, _b;
@@ -8848,6 +8873,8 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     editComponents: function() {
       var _a, _b, _c;
+      if (!isErrorExist(store2))
+        return;
       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");
@@ -8889,6 +8916,8 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     widgetAddClickHandler: function() {
       var _a;
+      if (!isErrorExist(store2))
+        return;
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
@@ -8901,6 +8930,8 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     eventEditHandler: function() {
       var _a, _b;
+      if (!isErrorExist(store2))
+        return;
       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");
@@ -8910,6 +8941,8 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     eventAddHandler: function() {
       var _a, _b;
+      if (!isErrorExist(store2))
+        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
       if (!Array.isArray(store2.formData.events)) {
@@ -9083,6 +9116,8 @@ var pageMaster = (funcParams) => {
     },
     onAddClickHandler: function() {
       var _a;
+      if (!isErrorExist(store2))
+        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
@@ -9106,6 +9141,8 @@ var pageMaster = (funcParams) => {
     },
     eventAddHandler: function() {
       var _a;
+      if (!isErrorExist(store2))
+        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -9116,6 +9153,8 @@ var pageMaster = (funcParams) => {
     },
     editEvent: function() {
       var _a;
+      if (!isErrorExist(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       saveFormdataInSessionStorage(store2.ctx.core.data);
@@ -10095,6 +10134,8 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     addEvent: function() {
       var _a, _b, _c;
+      if (!isErrorExist(store2))
+        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -10107,6 +10148,8 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     editEvent: function() {
       var _a;
+      if (!isErrorExist(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
@@ -10865,6 +10908,15 @@ const buildProgressBar = (config2, componentScope2) => {
     ProgressBar.config.layout = config2.layout;
   }
   ProgressBar.config.main.heading = config2.label;
+  if (config2.variant) {
+    ProgressBar.config.main.variant = config2.variant;
+  }
+  if (config2.pieArcColors) {
+    ProgressBar.config.main.colorRange = flatObjectValueInArray(config2.pieArcColors);
+  }
+  if (config2.size) {
+    ProgressBar.config.main.size = Number(config2.size);
+  }
   if (config2.bottomLabel_3) {
     ProgressBar.config.main.bottomLabel_3 = config2.bottomLabel_3;
   }
@@ -11219,6 +11271,7 @@ const buildWrapperSection = (config2, componentScope2) => {
   wrapper.config.main.label = config2.label;
   wrapper.config.main.divider = config2.divider === "YES" ? true : false;
   wrapper.config.main.isAccordion = config2.isAccordion === "No" ? false : true;
+  wrapper.config.main.defaultClosed = config2.defaultClosed === "YES" ? true : false;
   if (config2.defaultStyle) {
     wrapper.config.defaultStyle = config2.defaultStyle === "YES" ? true : false;
   }
@@ -11475,6 +11528,9 @@ const buildTable = (config2, componentScope2) => {
   if (config2.initialDensity) {
     table.config.main.initialDensity = config2.initialDensity;
   }
+  if (config2.layout) {
+    table.config.layout = createLayoutFormat(config2.layout);
+  }
   return table;
 };
 const Box = {
@@ -11596,211 +11652,159 @@ function Card(theme) {
     type: "WrapperLayout",
     config: {
       main: {},
-      wrapperStyle: {
-        position: "relative",
-        top: "50%",
-        transform: "translateY(-50%)",
-        marginBottom: 0
-      },
-      componentsBoxStyle: {
-        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
-        flexDirection: "row",
-        flexWrap: "nowrap",
-        width: "100% !important",
-        background: "transparent",
-        border: `1.5px solid ${theme.palette.primary.light}`,
-        borderRadius: "8px",
-        padding: "0px 4px",
-        height: "100%",
-        alignItems: "center",
-        marginLeft: "0px",
-        "&: hover": {
-          background: `${theme.palette.primary.main}`,
-          border: `1.5px solid black`,
-          "& p": {
-            color: "white"
+      style: {
+        wrapperStyle: {
+          position: "relative",
+          top: "50%",
+          transform: "translateY(-50%)",
+          marginBottom: 0,
+          borderRadius: "12px",
+          fontFamily: "poppins"
+        },
+        componentsBoxStyle: {
+          boxShadow: "0 0 6px 1px rgba(149, 147, 147, 0.25)",
+          flexDirection: "column",
+          overflow: "hidden",
+          flexWrap: "nowrap",
+          width: "100% !important",
+          background: "transparent",
+          borderRadius: "12px",
+          padding: "20px 20px 20px 14px",
+          height: "100%",
+          minHeight: "100px",
+          position: "relative",
+          marginLeft: "0px",
+          "&: hover": {
+            background: `${theme.palette.primary.main}`,
+            color: `${theme.palette.primary.contrastText}`
           }
         }
       },
-      layout: { xs: 12, sm: 12, md: 6, lg: 6 }
+      layout: { xs: 12, sm: 12, md: 3, lg: 3 }
     },
     elements: [
-      {
-        type: "HorizontalLayout",
-        config: {
-          layout: 9
-        },
-        elements: [
-          {
-            type: "WrapperLayout",
-            config: {
-              main: {
-                columnSpacing: 0,
-                gap: 0
-              },
-              wrapperStyle: {
-                background: "transparent",
-                marginBottom: 0
-              },
-              componentsBoxStyle: {
-                flexDirection: "column",
-                flexWrap: "nowrap",
-                width: "100%",
-                height: "inherit",
-                background: "transparent",
-                borderRadius: "0px",
-                paddingRight: 0
-              },
-              layout: 12
-            },
-            elements: [
-              {
-                type: "WrapperLayout",
-                config: {
-                  main: {
-                    columnSpacing: 0,
-                    gap: 0
-                  },
-                  wrapperStyle: {
-                    background: "transparent",
-                    marginBottom: 0
-                  },
-                  componentsBoxStyle: {
-                    flexDirection: "row",
-                    flexWrap: "nowrap",
-                    width: "100%",
-                    height: "0",
-                    background: "transparent",
-                    borderRadius: "0px",
-                    marginLeft: "-10px",
-                    marginTop: "-8px",
-                    justifyContent: "start",
-                    position: "relative"
-                  },
-                  layout: 12
-                },
-                elements: [
-                  {
-                    type: "Control",
-                    scope: "#/properties/programType",
-                    config: {
-                      main: {
-                        heading: ""
-                      },
-                      style: {
-                        color: "black",
-                        display: "flex",
-                        fontSize: { xs: "24px", md: "28px" },
-                        fontWeight: "bold",
-                        background: "inherit",
-                        justifyContent: "flex-start",
-                        width: "auto",
-                        margin: "-8px",
-                        marginLeft: "-24px",
-                        height: 0
-                      }
-                    },
-                    options: {
-                      widget: "Box"
-                    }
-                  },
-                  {
-                    type: "Control",
-                    scope: "#/properties/programType",
-                    config: {
-                      main: {
-                        heading: "5000.00"
-                      },
-                      style: {
-                        color: "black",
-                        display: "flex",
-                        fontSize: { xs: "21px", md: "22px" },
-                        fontWeight: "500",
-                        background: "inherit",
-                        justifyContent: "flex-start",
-                        width: "auto",
-                        margin: "-8px",
-                        marginTop: "-6px",
-                        position: "absolute",
-                        left: "7px",
-                        whiteSpace: "nowrap",
-                        overflowX: "auto",
-                        overflowY: "hidden",
-                        scrollbarWidth: "none",
-                        msOverflowStyle: "none",
-                        maxWidth: "calc(100% + 20px)",
-                        "&::-webkit-scrollbar": {
-                          display: "none"
-                        }
-                      }
-                    },
-                    options: {
-                      widget: "Box"
-                    }
-                  }
-                ]
-              },
-              {
-                type: "Control",
-                scope: "#/properties/programType",
-                config: {
-                  main: {
-                    heading: "Total Earnings"
-                  },
-                  style: {
-                    color: "black",
-                    fontSize: "16px",
-                    fontWeight: "400",
-                    justifyContent: "center",
-                    whiteSpace: "nowrap",
-                    overflowX: "auto",
-                    overflowY: "hidden",
-                    scrollbarWidth: "none",
-                    msOverflowStyle: "none",
-                    background: "inherit",
-                    width: "calc(100% + 8px)",
-                    margin: "-8px",
-                    marginTop: { xs: "16px", md: "20px" },
-                    "&::-webkit-scrollbar": {
-                      display: "none"
-                    }
-                  },
-                  layout: 12
-                },
-                options: {
-                  widget: "Box"
-                }
-              }
-            ]
-          }
-        ]
-      },
       {
         type: "Control",
-        scope: "#/properties/programType",
+        scope: "#/properties/initilCardScope",
         config: {
           main: {
             url: "https://www.svgrepo.com/show/500606/loading.svg"
           },
           style: {
             containerStyle: {
-              height: "100%",
+              position: "absolute",
+              color: "inherit",
+              top: "4px",
+              right: "4px",
               display: "flex",
-              justifyContent: "end"
+              justifyContent: "flex-end",
+              alignItems: "flex-start"
             },
             imageStyle: {
-              width: "unset",
-              fontSize: "none",
-              padding: "4px",
-              margin: "0px 0px 0px 8px",
-              height: "64px"
+              color: "inherit",
+              width: "32px",
+              height: "32px",
+              padding: "0px",
+              margin: "0px"
             }
-          },
-          layout: 3
+          }
         },
         options: {
           widget: "Image"
         }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: {
+            heading: "Total Earnings"
+          },
+          style: {
+            color: "inherit",
+            fontSize: "16px",
+            fontWeight: 300,
+            fontFamily: "Poppins",
+            justifyContent: "flex-start",
+            background: "inherit",
+            position: "absolute",
+            top: "8px",
+            left: "12px",
+            display: "flex",
+            maxWidth: "200px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            }
+          }
+        },
+        options: {
+          widget: "Box"
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: {
+            heading: "5000.00"
+          },
+          style: {
+            color: "inherit",
+            display: "flex",
+            fontSize: { xs: "22px", md: "40px" },
+            fontWeight: 600,
+            background: "inherit",
+            justifyContent: "flex-start",
+            width: "100%",
+            margin: "0px",
+            marginBottom: "4px",
+            marginTop: "8px",
+            lineHeight: "1",
+            maxWidth: "300px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            overflowY: "hidden",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            }
+          }
+        },
+        options: {
+          widget: "Box"
+        }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: {
+            heading: "Increased from last month"
+          },
+          style: {
+            color: "inherit",
+            fontSize: "12px",
+            fontWeight: "400",
+            justifyContent: "flex-start",
+            background: "inherit",
+            margin: "0px",
+            paddingLeft: "2px",
+            marginBottom: "8px",
+            maxWidth: "200px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            }
+          }
+        },
+        options: {
+          widget: "Box"
+        }
       }
     ]
   };
@@ -11811,9 +11815,10 @@ const buildCard = (config, componentScope, store) => {
   if (config.style) {
     card.config.wrapperStyle = JSON.parse(config.style);
   }
-  card.elements[0].elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/value`;
-  card.elements[1].scope = `#/properties/${config.name}/properties/url`;
-  card.elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/description`;
+  card.elements[0].scope = `#/properties/${config.name}/properties/url`;
+  card.elements[1].scope = `#/properties/${config.name}/properties/label`;
+  card.elements[2].scope = `#/properties/${config.name}/properties/value`;
+  card.elements[3].scope = `#/properties/${config.name}/properties/description`;
   if (config.layout) {
     card.config.layout = createLayoutFormat(config.layout);
   }
@@ -11822,13 +11827,13 @@ const buildCard = (config, componentScope, store) => {
     card.elements[0].elements[0].elements[0].elements[1].config.style.left = "24px";
   }
   if (config.label) {
-    card.elements[0].elements[0].elements[0].elements[1].config.main.heading = config.label;
+    card.elements[1].config.main.heading = config.label;
   }
   if (config.url) {
-    card.elements[1].config.main.url = config.url;
+    card.elements[0].config.main.url = config.url;
   }
   if (config.description) {
-    card.elements[0].elements[0].elements[1].config.main.heading = config.description;
+    card.elements[3].config.main.heading = config.description;
   }
   return card;
 };
@@ -12663,6 +12668,50 @@ const buildImage = (config2, componentScope2) => {
   }
   return image;
 };
+const cameraUiSchema = {
+  type: "Control",
+  scope: "#/properties/camera",
+  options: {
+    widget: "Camera"
+  },
+  config: {
+    main: {
+      label: "Upload Photo",
+      multiUplaod: false,
+      onUpload: "onFileUpload"
+    }
+  }
+};
+const buildCamera = (config2, componentScope2) => {
+  const camera = _.cloneDeep(cameraUiSchema);
+  camera.scope = componentScope2;
+  if (config2.iconName) {
+    camera.config.main.startIcon = config2.iconName;
+  }
+  if (config2.layout) {
+    camera.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  if (config2.tooltipMessage) {
+    camera.config.main.tooltipMessage = config2.tooltipMessage;
+  }
+  camera.config.main.multiUplaod = config2.multiUplaod === "YES" ? true : false;
+  if (config2.style) {
+    camera.config.style = JSON.parse(config2.style);
+  }
+  if (config2.size) {
+    camera.config.main.size = config2.size;
+  }
+  if (config2.variant) {
+    camera.config.main.variant = config2.variant;
+  }
+  if (config2.color) {
+    camera.config.main.color = config2.color;
+  }
+  if (config2.label) {
+    camera.config.main.name = config2.label;
+  }
+  return camera;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -12875,6 +12924,9 @@ const buildUiSchema = (config2, store2) => {
     case "Image":
       elements = buildImage(config2, componentScope2);
       break;
+    case "Camera":
+      elements = buildCamera(config2, componentScope2);
+      break;
     default:
       schema = {
         type: "object",