impaktapps-ui-builder 1.0.4 → 1.0.6

package/src/impaktapps-ui-builder/builder/build/uischema/button.ts

@@ -5,7 +5,7 @@ export default  {
     widget: "Button",
   },
   config: {
-    layout: 3,
+    layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
     main: {
       name: "Compare",
       variant: "contained",

package/src/impaktapps-ui-builder/builder/build/uischema/buttonGroup.ts

@@ -0,0 +1,17 @@
+export default  {
+  type: "Control",
+  scope: "#/properties/buttonGroup",
+  options: {
+    widget: "ButtonGroup",
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+    main: {
+      variant: "contained",
+      styleDefault:false,
+      size: "small",
+    },
+    style: {
+    },
+  },
+};

package/src/impaktapps-ui-builder/builder/build/uischema/card.ts

@@ -1,196 +1,169 @@
-export default function Card(theme){
-  const uiSchema = {
+export default function Card(theme) {
+  const uiSchema =
+  {
     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",
+          // border: `1.5px solid ${theme.palette.primary.light}`,
+          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}`,
+            // border: `1.5px solid black`,
+            // "& p": {
+            //   color: "white",
+            // },
           },
         },
       },
-      layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+
+      layout: { xs: 12, sm: 12, md: 3, lg: 3 },
     },
     elements: [
-      {
-        type: "HorizontalLayout",
+      { 
+        type: "Control",
+        scope: "#/properties/initilCardScope",
         config: {
-          layout: 8,
-        },
-        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",
-              },
-              layout: 12,
+          main: {
+            url: "https://www.svgrepo.com/show/500606/loading.svg",
+          },
+          style: {
+            containerStyle: {
+              position: "absolute",
+                color:"inherit",
+              top: "4px",
+              right: "4px",
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "flex-start",
+            },
+            imageStyle: {
+              color:"inherit",
+              width: "32px",
+              height: "32px",
+              padding: "0px",
+              margin: "0px",
             },
-            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
-                      },
-                      // layout: 1,
-                    },
-                    options: {
-                      widget: "Box",
-                    },
-                  },
-                  {
-                    type: "Control",
-                    scope: "#/properties/programType",
-                    config: {
-                      main: {
-                        heading: "5000.00",
-                      },
-                      style: {
-                        color: "black",
-                        display: "flex",
-                        fontSize: { xs: "24px", md: "28px" },
-                        fontWeight: "bold",
-                        background: "inherit",
-                        justifyContent: "flex-start",
-                        width: "auto",
-                        margin: "-8px",
-                        position: "absolute",
-                        left: "24px"
-                      },
-                      // layout: 11,
-                    },
-                    options: {
-                      widget: "Box",
-                    },
-                  },
-                ],
-              },
-              {
-                type: "Control",
-                scope: "#/properties/programType",
-                config: {
-                  main: {
-                    heading: "Total Earnings",
-                  },
-                  style: {
-                    color: "black",
-                    fontSize: "16px",
-                    justifyContent: "center",
-                    textWrap: "wrap",
-                    background: "inherit",
-                    width: "calc(100%+8px)",
-                    margin: "-8px",
-                    marginTop: {xs: "16px", md: "20px"},
-                  },
-                  layout: 12,
-                },
-
-                options: {
-                  widget: "Box",
-                },
-              },
-            ],
           },
-        ],
+        },
+        options: {
+          widget: "Image",
+        },
       },
       {
         type: "Control",
-        scope: "#/properties/programType",
+        scope: "#/properties/initilCardScope",
         config: {
           main: {
-            url: "https://www.svgrepo.com/show/500606/loading.svg",
+            heading: "Total Earnings",
           },
           style: {
-            containerStyle: {
-              height: "100%",
+          color: "inherit",
+            fontSize: "16px",
+            fontWeight: 300,
+            fontFamily:"Poppins",
+            justifyContent: "flex-start",
+            background: "inherit",
+          position: "absolute",
+              top: "8px",
+              left: "12px",
               display: "flex",
-              justifyContent: "end",
+             maxWidth: "200px",
+            whiteSpace: "nowrap",
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none",
             },
-            imageStyle: {
-              width: "unset",
-              fontSize: "none",
-              padding: "4px",
-              margin: "0px 0px 0px 8px",
-              height: "64px",
+          },
+        },
+        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",
             },
           },
-          layout: 4,
         },
         options: {
-          widget: "Image",
+          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",
         },
       },
     ],

package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts

@@ -62,20 +62,76 @@ export const CoreSection = {
         },
       },
     },
-    // {
-    //   type: "Control",
-    //   scope: "#/properties/columnFormat",
-    //   options: {
-    //     widget: "SelectInputField",
-    //   },
-    //   config: {
-    //     layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-    //     main: {
-    //       label: "Column Format",
-
-    //     },
-    //   },
-    // },
+    {
+      type: "Control",
+      scope: "#/properties/proc5",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc6",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc7",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc8",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc9",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc10",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc11",
+      config: {
+        layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+      },
+      options: {
+        widget: "EmptyBox",
+      },
+    },
     {
       type: "Control",
       scope: "#/properties/proc",
@@ -89,129 +145,67 @@ export const CoreSection = {
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 12,
-      options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "SelectInputField",
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Screen Size",
-
-                },
-              },
+      config: {
+        layout: 12,
+        main: {
+          label: "Layout",
+          childElementLabel: "Layout",
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "SelectInputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Screen Size",
             },
-            {
-              type: "Control",
-              scope: "#/properties/value",
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
+              type: "number",
+              // freeSolo:true,
+              helperText: 'Number should be in range of 0 to 12',
+              errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
 
-              options: {
-                widget: "InputField",
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value",
-                  type:"number",
-                  // freeSolo:true,
-                  helperText:'Number should be in range of 0 to 12',
-                  errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
-                },
-              },
-            },
-            {
-              type: "Control",
-              scope: "#/properties/proc",
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-              },
-              options: {
-                widget: "EmptyBox",
-              },
             },
-          ],
+          },
         },
-      },
+        {
+          type: "Control",
+          scope: "#/properties/proc",
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+          },
+          options: {
+            widget: "EmptyBox",
+          },
+        },
+      ],
     },
-
-    
-    // {
-    //   type: "Control",
-    //   scope: "#/properties/layout",
-    //   options: {
-    //     widget: "Array",
-    //   },
-    //   config: {
-    //     layout: 12,
-    //     main: {
-    //       label: "Layout",
-    //       childElementLabel: "Layout",
-    //     },
-    //     style: {
-    //       marginLeft: "-24px",
-    //       marginBottom: "24px !important",
-    //       labelStyle: {
-    //         marginLeft: "24px",
-    //       },
-    //       detailsStyle: {
-    //         marginLeft: "24px",
-    //       }
-    //     }
-    //   },
-    //   elements: [
-    //     {
-    //       type: "Control",
-    //       scope: "#/properties/key",
-    //       options: {
-    //         widget: "SelectInputField",
-    //       },
-    //       config: {
-    //         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-    //         main: {
-    //           label: "Screen Size",
-            
-    //         },
-    //       },
-    //     },
-    //     {
-    //       type: "Control",
-    //       scope: "#/properties/value",
-
-    //       options: {
-    //         widget: "InputField",
-    //       },
-    //       config: {
-    //         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-    //         main: {
-    //           label: "Value",
-    //           type:"number",
-    //           // freeSolo:true,
-    //           helperText:'Number should be in range of 0 to 12',
-    //           errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
-             
-    //         },
-    //       },
-    //     },
-    //     {
-    //       type: "Control",
-    //       scope: "#/properties/proc",
-    //       config: {
-    //         layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-    //       },
-    //       options: {
-    //         widget: "EmptyBox",
-    //       },
-    //     },
-    //   ],
-    // },
   ],
 };

package/src/impaktapps-ui-builder/builder/build/uischema/dateInputField.ts

@@ -6,7 +6,7 @@ export default {
   },
 
   config: {   
-     layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+     layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "date",
@@ -21,7 +21,7 @@ export const DateTime = {
   },
 
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "DateTime",
       type: "date",

package/src/impaktapps-ui-builder/builder/build/uischema/emptyBox.ts

@@ -6,7 +6,7 @@ export default {
   },
 
   config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {},
     style:{}
   },