impaktapps-ui-builder 1.0.200 → 1.0.201

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

@@ -6250,6 +6250,7 @@ const ComponentSchema = {
         { title: "Radio", const: "Radio" },
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
+        { title: "Metric Card", const: "MetricCard" },
         { title: "Runner Boy", const: "RunnerBoyProgressBar" },
         { title: "Table", const: "Table" },
         { title: "Tabs", const: "TabSection" },
@@ -6313,6 +6314,12 @@ const ComponentSchema = {
         { title: "Standard", const: "standard" }
       ]
     },
+    growthRate: {
+      oneOf: [
+        { title: "Positive", const: "positive" },
+        { title: "Negative", const: "negative" }
+      ]
+    },
     orientation: {
       oneOf: [
         { title: "Horizontal", const: "horizontal" },
@@ -7974,14 +7981,14 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
-    case "DataCard":
+    case "MetricCard":
       uiSchema.elements = [
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        getInputField("value", "value"),
-        getInputField("trendIconUrl", "Trend Icon Url"),
-        emptyBox$1("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
+        getInputField("cardValue", "Value"),
+        getSelectField("growthRate", "Growth Rate"),
+        getInputField("color", "Card Color")
       ];
       break;
     case "Button":
@@ -8618,6 +8625,7 @@ const sectionLabels = {
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
   ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
   RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  MetricCard: ["Core", "Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
   Timer: ["Core", "Events", "Style", "Validation"],
   Rank: ["Core", "Events", "Style", "Validation"],
@@ -11798,257 +11806,43 @@ const buildCard = (config, componentScope, store) => {
   }
   return card;
 };
-function DataCard(theme) {
-  const uiSchema = {
-    type: "WrapperLayout",
-    config: {
-      main: {},
-      style: {
-        wrapperStyle: {
-          position: "relative",
-          top: "50%",
-          transform: "translateY(-50%)",
-          marginBottom: 0,
-          borderRadius: "8px"
-        },
-        componentsBoxStyle: {
-          boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.06)",
-          flexDirection: "column",
-          overflow: "hidden",
-          flexWrap: "nowrap",
-          width: "90% !important",
-          background: "#F9FAFB",
-          border: "2px solid #E5E7EB",
-          borderRadius: "16px",
-          padding: "24px 20px 20px 24px",
-          height: "100%",
-          minHeight: "140px",
-          position: "relative",
-          marginLeft: "0px",
-          transition: "all 0.3s ease",
-          "&:hover": {
-            transform: "translateY(-6px)",
-            boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.08)"
-          }
-        }
-      },
-      layout: { xs: 12, sm: 12, md: 6, lg: 3 }
-    },
-    elements: [
-      {
-        type: "Control",
-        scope: "#/properties/programType",
-        config: {
-          main: {
-            url: "https://unpkg.com/heroicons@2.0.18/24/outline/information-circle.svg"
-          },
-          style: {
-            containerStyle: {
-              position: "absolute",
-              top: "20px",
-              right: "20px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              background: "#F3F4F6",
-              borderRadius: "20%",
-              width: "48px",
-              height: "48px",
-              padding: "12px"
-            },
-            imageStyle: {
-              width: "24px",
-              height: "24px",
-              padding: "0px",
-              margin: "0px",
-              opacity: 0.7
-            }
-          }
-        },
-        options: { widget: "Image" }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/programType",
-        config: {
-          main: {
-            heading: "METRIC"
-          },
-          style: {
-            color: "#9CA3AF",
-            justifyContent: "flex-start",
-            background: "inherit",
-            margin: "0px",
-            marginBottom: "16px",
-            paddingRight: "60px",
-            whiteSpace: "normal",
-            wordWrap: "break-word",
-            overflowWrap: "break-word",
-            fontStyle: "normal",
-            fontSize: "12px",
-            fontWeight: "600",
-            letterSpacing: "0.3px",
-            textTransform: "uppercase",
-            fontFamily: "Arial",
-            maxWidth: "24%",
-            lineHeight: "1.2",
-            height: "20px"
-          }
-        },
-        options: { widget: "Box" }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/programType",
-        config: {
-          main: {
-            heading: "--"
-          },
-          style: {
-            color: "#111827",
-            display: "flex",
-            fontSize: { xs: "36px", md: "42px" },
-            fontWeight: "700",
-            background: "inherit",
-            justifyContent: "flex-start",
-            width: "100%",
-            margin: "0px",
-            marginBottom: "16px",
-            lineHeight: "1",
-            maxWidth: "200px",
-            whiteSpace: "nowrap",
-            opacity: 0.85
-          }
-        },
-        options: { widget: "Box" }
-      },
-      {
-        type: "WrapperLayout",
-        config: {
-          main: { spacing: 0, rowSpacing: 0, columnSpacing: 0, gap: 0 },
-          style: {
-            componentsBoxStyle: {
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "flex-start",
-              background: "#E5E7EB",
-              borderRadius: "999px",
-              padding: "6px 14px",
-              width: "fit-content",
-              whiteSpace: "nowrap",
-              gap: "6px",
-              margin: "0px",
-              paddingLeft: "20px",
-              paddingRight: "20px"
-            }
-          },
-          layout: { xs: "auto" }
-        },
-        elements: [
-          {
-            type: "Control",
-            scope: "#/properties/programType",
-            config: {
-              main: {
-                url: "https://unpkg.com/heroicons@2.0.18/24/outline/arrow-right.svg"
-              },
-              style: {
-                containerStyle: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  margin: "0px",
-                  padding: "0px"
-                },
-                imageStyle: {
-                  width: "14px",
-                  height: "14px",
-                  filter: "brightness(0) invert(0.5)",
-                  display: "block"
-                }
-              },
-              layout: { xs: "auto" }
-            },
-            options: { widget: "Image" }
-          },
-          {
-            type: "Control",
-            scope: "#/properties/programType",
-            config: {
-              main: {
-                heading: "\u2014"
-              },
-              style: {
-                color: "#6B7280",
-                fontSize: "12px",
-                fontWeight: "550",
-                background: "transparent",
-                margin: "0px",
-                padding: "0px",
-                lineHeight: "1",
-                display: "flex",
-                alignItems: "center"
-              },
-              layout: { xs: "auto" }
-            },
-            options: { widget: "Box" }
-          }
-        ]
-      }
-    ]
-  };
-  return uiSchema;
-}
-const buildDataCard = (config2, componentScope2, store2) => {
-  var _a, _b, _c, _d, _e;
-  const card2 = _.cloneDeep(DataCard(store2.theme.myTheme));
+var MetricCard = {
+  type: "Control",
+  scope: "#/properties/metricpath",
+  options: {
+    widget: "MetricCard"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 12, lg: 12 },
+    main: {}
+  }
+};
+const buildMetricCard = (config2, componentScope2, store2) => {
+  const card2 = _.cloneDeep(MetricCard);
+  card2.scope = componentScope2;
   if (config2.style) {
-    const parsedStyle = JSON.parse(config2.style);
-    card2.config.wrapperStyle = parsedStyle;
-    card2.elements[1].config.style = {
-      ...card2.elements[1].config.style,
-      ...(_a = parsedStyle.labelStyle) != null ? _a : {}
-    };
-    card2.elements[3].config.style.componentsBoxStyle = {
-      ...card2.elements[3].config.style.componentsBoxStyle,
-      ...(_b = parsedStyle.descriptionBoxStyle) != null ? _b : {}
-    };
-    card2.elements[2].config.style = {
-      ...card2.elements[2].config.style,
-      ...(_c = parsedStyle.valueStyle) != null ? _c : {}
-    };
-    card2.config.componentsBoxStyle = {
-      ...card2.config.componentsBoxStyle,
-      ...(_d = parsedStyle.componentsBoxStyle) != null ? _d : {}
-    };
-    card2.elements[0].config.style.containerStyle = {
-      ...card2.elements[0].config.style.containerStyle,
-      ...(_e = parsedStyle.imageContainerStyle) != null ? _e : {}
-    };
+    card2.config.style = JSON.parse(config2.style);
   }
-  card2.elements[2].scope = `#/properties/${config2.name}/properties/value`;
-  card2.elements[0].scope = `#/properties/${config2.name}/properties/url`;
-  card2.elements[3].elements[1].scope = `#/properties/${config2.name}/properties/description`;
-  card2.elements[1].scope = `#/properties/${config2.name}/properties/label`;
-  card2.elements[3].elements[0].scope = `#/properties/${config2.name}/properties/trendIconUrl`;
   if (config2.layout) {
     card2.config.layout = createLayoutFormat(config2.layout);
   }
   if (config2.label) {
-    card2.elements[1].config.main.heading = config2.label;
+    card2.config.main.label = config2.label;
   }
   if (config2.url) {
-    card2.elements[0].config.main.url = config2.url;
+    card2.config.main.url = config2.url;
   }
   if (config2.description) {
-    card2.elements[3].elements[1].config.main.heading = config2.description;
+    card2.config.main.description = config2.description;
   }
-  if (config2.value) {
-    card2.elements[2].config.main.heading = config2.value;
+  if (config2.values) {
+    card2.config.main.cardValue = config2.value;
   }
-  if (config2.trendIconUrl) {
-    card2.elements[3].elements[0].config.main.url = config2.trendIconUrl;
+  if (config2.growthRate) {
+    card2.config.main.growthRate = config2.growthRate;
+  }
+  if (config2.color) {
+    card2.config.main.color = config2.color;
   }
   return card2;
 };
@@ -13003,8 +12797,9 @@ const buildUiSchema = (config2, store2) => {
     case "card":
       elements = buildCard(config2, componentScope2, store2);
       break;
-    case "DataCard":
-      elements = buildDataCard(config2, componentScope2, store2);
+    case "MetricCard":
+      elements = buildMetricCard(config2, componentScope2);
+      break;
     case "Graph":
       switch (config2.graphType) {
         case "BarGraph":