impaktapps-ui-builder 1.0.257 → 1.0.260

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

@@ -6256,6 +6256,7 @@ const ComponentSchema = {
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
         { title: "Metric Card", const: "MetricCard" },
+        { title: "Info Card", const: "InfoCard" },
         { title: "Runner Boy", const: "RunnerBoyProgressBar" },
         { title: "Table", const: "Table" },
         { title: "Tabs", const: "TabSection" },
@@ -8139,6 +8140,20 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("MetricEmpty1", { xs: 6, sm: 0, md: 8, lg: 6 })
       ];
       break;
+    case "InfoCard":
+      uiSchema.elements = [
+        getInputField("title", "Title"),
+        getInputField("url", "Image Url"),
+        getInputField("labelOne", "Label One"),
+        getInputField("valueOne", "valueOne"),
+        getInputField("labelTwo", "Label Two"),
+        getInputField("valueTwo", "valueTwo"),
+        getInputField("primaryTextColor", "Label Color"),
+        getInputField("secondaryTextColor", "Value Color"),
+        getInputField("chipBackgroundColor", "Title Background Color"),
+        emptyBox$1("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
+      ];
+      break;
     case "Button":
       uiSchema.elements = [
         getSelectField("buttonType", "Button Type"),
@@ -8828,6 +8843,7 @@ const sectionLabels = {
   ProgressBar: ["Core", "Properties", "Events", "Style"],
   RankCard: ["Core", "Properties", "Events", "Style"],
   MetricCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  InfoCard: ["Core", "Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
   Timer: ["Core", "Events", "Style"],
   Rank: ["Core", "Events", "Style"],
@@ -13120,6 +13136,394 @@ const buildOTP_Input = (config2, componentScope2) => {
   OTP.config.main.length = +config2.length;
   return OTP;
 };
+function InfoCard(theme) {
+  const uiSchema = {
+    type: "WrapperLayout",
+    config: {
+      main: {},
+      style: {
+        wrapperStyle: {
+          position: "relative",
+          top: "50%",
+          transform: "translateY(-50%)",
+          marginBottom: 0,
+          borderRadius: "12px",
+          fontFamily: "Poppins"
+        },
+        componentsBoxStyle: {
+          flexDirection: "column",
+          overflow: "hidden",
+          flexWrap: "nowrap",
+          width: "100% !important",
+          background: theme.palette.background.paper,
+          borderRadius: "12px",
+          border: `1.5px solid ${theme.palette.divider}`,
+          padding: "24px 24px 24px 24px",
+          height: "100%",
+          minHeight: "140px",
+          position: "relative",
+          gap: "0px !important",
+          transition: "box-shadow 0.25s ease, transform 0.25s ease",
+          "&:hover": {
+            boxShadow: "0 8px 28px 0 rgba(100, 100, 120, 0.18)",
+            transform: "translateY(-3px)"
+          }
+        }
+      },
+      layout: { xs: 12, sm: 12, md: 3, lg: 3 }
+    },
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: { heading: "Title" },
+          style: {
+            color: `${theme.palette.primary.main}`,
+            fontSize: "11px",
+            fontWeight: 600,
+            fontFamily: "Poppins",
+            letterSpacing: "0.6px",
+            background: `${theme.palette.primary.main}18`,
+            borderRadius: "20px",
+            padding: "4px 14px",
+            display: "inline-flex",
+            alignItems: "center",
+            width: "fit-content",
+            alignSelf: "flex-start",
+            position: "absolute",
+            top: "24px",
+            left: "20px",
+            whiteSpace: "nowrap"
+          }
+        },
+        options: { widget: "Box" }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: { url: "https://www.svgrepo.com/show/500606/loading.svg" },
+          style: {
+            containerStyle: {
+              position: "absolute",
+              top: "24px",
+              right: "22px",
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "flex-start"
+            },
+            imageStyle: {
+              width: "27px",
+              height: "27px"
+            }
+          }
+        },
+        options: { widget: "Image" }
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: { heading: "" },
+          style: {
+            display: "block",
+            height: "48px",
+            width: "100%",
+            background: "transparent",
+            padding: "0px",
+            margin: "0px"
+          }
+        },
+        options: { widget: "Box" }
+      },
+      {
+        type: "WrapperLayout",
+        config: {
+          main: { rowSpacing: 0, columnSpacingSpacing: 0, spacing: 0, gap: 0 },
+          style: {
+            componentsBoxStyle: {
+              flexDirection: "row",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              gap: "4px",
+              padding: "0px",
+              marginTop: "-10px",
+              margin: "0px",
+              marginBottom: "6px",
+              background: "transparent",
+              boxShadow: "none",
+              width: "0",
+              minHeight: "unset"
+            }
+          },
+          layout: { xs: 12, sm: 12, md: 12, lg: 12 }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/initilCardScope",
+            config: {
+              layout: "auto",
+              main: { heading: "\u2022" },
+              style: {
+                color: theme.palette.text.secondary,
+                fontSize: "22px",
+                fontWeight: 600,
+                fontFamily: "Poppins",
+                letterSpacing: "0px",
+                background: "transparent",
+                padding: "0px",
+                margin: "0px",
+                width: "fit-content",
+                flexShrink: 0,
+                display: "flex",
+                alignItems: "center",
+                lineHeight: "1",
+                paddingBottom: "2px"
+              }
+            },
+            options: { widget: "Box" }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/initilCardScope",
+            config: {
+              layout: "auto",
+              main: { heading: "Label One" },
+              style: {
+                color: theme.palette.text.secondary,
+                fontSize: "11px",
+                fontWeight: 600,
+                fontFamily: "Poppins",
+                letterSpacing: "0.6px",
+                background: "transparent",
+                padding: "0px",
+                margin: "0px",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                lineHeight: "1.4"
+              }
+            },
+            options: { widget: "Box" }
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: { heading: "--" },
+          style: {
+            color: `${theme.palette.primary.main}`,
+            fontSize: { xs: "28px", md: "32px" },
+            fontWeight: 700,
+            fontFamily: "Poppins",
+            lineHeight: "1.15",
+            margin: "0px",
+            marginBottom: "16px",
+            padding: "0px",
+            background: "transparent",
+            display: "flex",
+            maxWidth: "220px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": { display: "none" }
+          }
+        },
+        options: { widget: "Box" }
+      },
+      {
+        type: "WrapperLayout",
+        config: {
+          main: { rowSpacing: 0, columnSpacingSpacing: 0, spacing: 0, gap: 0 },
+          style: {
+            componentsBoxStyle: {
+              flexDirection: "row",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              gap: "4px",
+              padding: "0px",
+              margin: "0px",
+              marginBottom: "6px",
+              background: "transparent",
+              boxShadow: "none",
+              width: "0%",
+              minHeight: "unset"
+            }
+          },
+          layout: { xs: 12, sm: 12, md: 12, lg: 12 }
+        },
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/initilCardScope",
+            config: {
+              layout: "auto",
+              main: { heading: "\u2022" },
+              style: {
+                color: theme.palette.text.secondary,
+                fontSize: "22px",
+                fontWeight: 600,
+                fontFamily: "Poppins",
+                letterSpacing: "0px",
+                background: "transparent",
+                padding: "0px",
+                margin: "0px",
+                width: "fit-content",
+                flexShrink: 0,
+                display: "flex",
+                alignItems: "center",
+                lineHeight: "1",
+                paddingBottom: "2px"
+              }
+            },
+            options: { widget: "Box" }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/initilCardScope",
+            config: {
+              layout: "auto",
+              main: { heading: "Label Two" },
+              style: {
+                color: theme.palette.text.secondary,
+                fontSize: "11px",
+                fontWeight: 600,
+                fontFamily: "Poppins",
+                letterSpacing: "0.6px",
+                background: "transparent",
+                padding: "0px",
+                margin: "0px",
+                width: "fit-content",
+                display: "flex",
+                alignItems: "center",
+                lineHeight: "1.4"
+              }
+            },
+            options: { widget: "Box" }
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/initilCardScope",
+        config: {
+          main: { heading: "--" },
+          style: {
+            color: `${theme.palette.primary.main}`,
+            fontSize: { xs: "20px", md: "22px" },
+            fontWeight: 500,
+            fontFamily: "Poppins",
+            lineHeight: "1.15",
+            margin: "0px",
+            padding: "0px",
+            background: "transparent",
+            display: "flex",
+            maxWidth: "220px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": { display: "none" }
+          }
+        },
+        options: { widget: "Box" }
+      }
+    ]
+  };
+  return uiSchema;
+}
+const buildInfoCard = (config2, componentScope2, store2) => {
+  const card2 = _.cloneDeep(InfoCard(store2.theme.myTheme));
+  card2.elements[0].scope = `#/properties/${config2.name}/properties/title`;
+  card2.elements[1].scope = `#/properties/${config2.name}/properties/url`;
+  card2.elements[3].elements[1].scope = `#/properties/${config2.name}/properties/labelOne`;
+  card2.elements[4].scope = `#/properties/${config2.name}/properties/valueOne`;
+  card2.elements[5].elements[1].scope = `#/properties/${config2.name}/properties/labelTwo`;
+  card2.elements[6].scope = `#/properties/${config2.name}/properties/valueTwo`;
+  if (config2.title) {
+    card2.elements[0].config.main.heading = config2.title;
+  }
+  if (config2.url) {
+    card2.elements[1].config.main.url = config2.url;
+  }
+  if (config2.labelOne) {
+    card2.elements[3].elements[1].config.main.heading = config2.labelOne;
+  }
+  if (config2.valueOne) {
+    card2.elements[4].config.main.heading = config2.valueOne;
+  }
+  if (config2.labelTwo) {
+    card2.elements[5].elements[1].config.main.heading = config2.labelTwo;
+  }
+  if (config2.valueTwo) {
+    card2.elements[6].config.main.heading = config2.valueTwo;
+  }
+  if (config2.primaryTextColor) {
+    card2.elements[4].config.style.color = config2.primaryTextColor;
+    card2.elements[6].config.style.color = config2.primaryTextColor;
+  }
+  if (config2.secondaryTextColor) {
+    card2.elements[0].config.style.color = config2.secondaryTextColor;
+    card2.elements[3].elements[0].config.style.color = config2.secondaryTextColor;
+    card2.elements[3].elements[1].config.style.color = config2.secondaryTextColor;
+    card2.elements[5].elements[0].config.style.color = config2.secondaryTextColor;
+    card2.elements[5].elements[1].config.style.color = config2.secondaryTextColor;
+  }
+  if (config2.chipBackgroundColor) {
+    card2.elements[0].config.style.background = config2.chipBackgroundColor;
+  }
+  if (config2.style) {
+    const styleObj = JSON.parse(config2.style);
+    if (styleObj.wrapperStyle) {
+      card2.config.style.wrapperStyle = {
+        ...card2.config.style.wrapperStyle,
+        ...styleObj.wrapperStyle
+      };
+    }
+    if (styleObj.headingStyle) {
+      card2.elements[0].config.style = {
+        ...card2.elements[0].config.style,
+        ...styleObj.headingStyle
+      };
+    }
+    if (styleObj.labelStyle) {
+      const labelStyle = styleObj.labelStyle;
+      card2.elements[3].elements[0].config.style = {
+        ...card2.elements[3].elements[0].config.style,
+        ...labelStyle
+      };
+      card2.elements[3].elements[1].config.style = {
+        ...card2.elements[3].elements[1].config.style,
+        ...labelStyle
+      };
+      card2.elements[5].elements[0].config.style = {
+        ...card2.elements[5].elements[0].config.style,
+        ...labelStyle
+      };
+      card2.elements[5].elements[1].config.style = {
+        ...card2.elements[5].elements[1].config.style,
+        ...labelStyle
+      };
+    }
+    if (styleObj.valueStyle) {
+      card2.elements[4].config.style = {
+        ...card2.elements[4].config.style,
+        ...styleObj.valueStyle
+      };
+      card2.elements[6].config.style = {
+        ...card2.elements[6].config.style,
+        ...styleObj.valueStyle
+      };
+    }
+  }
+  if (config2.layout) {
+    card2.config.layout = createLayoutFormat(config2.layout);
+  }
+  return card2;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -13283,6 +13687,9 @@ const buildUiSchema = (config2, store2) => {
     case "MetricCard":
       elements = buildMetricCard(config2, componentScope2);
       break;
+    case "InfoCard":
+      elements = buildInfoCard(config2, componentScope2, store2);
+      break;
     case "Graph":
       switch (config2.graphType) {
         case "BarGraph":