impaktapps-ui-builder 1.0.148 → 1.0.150

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

@@ -6258,6 +6258,7 @@ const ComponentSchema = {
         { title: "Timer", const: "Timer" },
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
+        { title: "SegmentChart ", const: "SegmentChart" },
         { title: "Column Group", const: "ColumnGroup" },
         { title: "Thought of the day", const: "Thought" }
       ]
@@ -7960,8 +7961,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"),
+        getSelectField("variant", "Variant"),
+        getArrayControl("pieArcColors", "color", "Color")
       ];
       break;
     case "card":
@@ -10842,7 +10844,14 @@ const buildProgressBar = (config2, componentScope2) => {
   if (config2.layout) {
     ProgressBar.config.layout = config2.layout;
   }
+  ProgressBar.config.main.variant = config2.variant;
   ProgressBar.config.main.heading = config2.label;
+  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;
   }
@@ -11550,185 +11559,37 @@ 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",
@@ -11738,23 +11599,119 @@ function Card(theme) {
           },
           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/programType",
+        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/programType",
+        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/programType",
+        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"
+        }
       }
     ]
   };
@@ -12586,6 +12543,31 @@ const buildImage = (config2, componentScope2) => {
   }
   return image;
 };
+const segmentUISchema = {
+  type: "Control",
+  scope: "#/properties/SegmentChart",
+  options: {
+    widget: "SegmentChart"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 12 },
+    main: {}
+  }
+};
+const buildSegmentChart = (config2, componentScope2) => {
+  const segment = _.cloneDeep(segmentUISchema);
+  segment.scope = componentScope2;
+  if (config2.layout) {
+    segment.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.pieArcColors) {
+    segment.config.main.colorRange = flatObjectValueInArray(config2.pieArcColors);
+  }
+  if (config2.style) {
+    segment.config.style = JSON.parse(config2.style);
+  }
+  return segment;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -12798,6 +12780,9 @@ const buildUiSchema = (config2, store2) => {
     case "Image":
       elements = buildImage(config2, componentScope2);
       break;
+    case "SegmentChart":
+      elements = buildSegmentChart(config2, componentScope2);
+      break;
     default:
       schema = {
         type: "object",