impaktapps-ui-builder 0.0.592 → 0.0.595

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

@@ -1,34 +1,22 @@
 
 import _ from "lodash";
+import emptyBox from "./emptyBox";
 import { buildLabel } from "../buildLabel";
 import Box from "./box";
-const emptyBox = (scope:string,layout?: any) => {
+// const emptyBox = {
+//   type: "Control",
+//   scope: `#/properties/empty`,
 
-  if(layout !== undefined){
-    return {
-      type: "Control",
-      scope: `#/properties/${scope}`,
-      options: {
-        widget: "EmptyBox",
-      },
-      config: {
-        //[{},{},{}]
-        layout: layout,
-      },
-    }
-  }
-  return {
-  type: "Control",
-  scope: "#/properties/empty",
+//   options: {
+//     widget: "emptyBox",
+//   },
+//   config: {
+//     layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+//     main: {
 
-  options: {
-    widget: "EmptyBox",
-  },
-  config: {
-    layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-  },
-}
-}
+//     },
+//   },
+// };
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
@@ -44,7 +32,7 @@ const cardLayout = {
             widget: "SelectInputField",
           },
           config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Screen Size",
 
@@ -59,7 +47,7 @@ const cardLayout = {
             widget: "InputField",
           },
           config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Value",
               type: "number",
@@ -70,7 +58,7 @@ const cardLayout = {
             },
           },
         },
-        emptyBox("cardEmpty")
+        emptyBox
       ],
     },
   },
@@ -93,14 +81,14 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
               widget: "InputField",
             },
             config: {
-              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
               main: {
                 label: childLabel || "Labels for Tab",
               },
             },
           },
-          emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
-          emptyBox("ArrayControlEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })
+          emptyBox,
+          emptyBox
         ],
       },
     },
@@ -115,13 +103,13 @@ sizeHolder.options.detail.elements[1] = {
     widget: "InputField",
   },
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "Size",
     },
   },
 };
-sizeHolder.options.detail.elements[2] = emptyBox("sizeHolderempty")
+sizeHolder.options.detail.elements[2] = emptyBox
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -131,7 +119,7 @@ const getInputField = (scope: String, label: String) => {
       widget: "InputField",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label: label,
       },
@@ -148,7 +136,7 @@ export const getRadioInputField = (scope: String, label: String, options: string
       widget: "RadioInputField",
     },
     config: {
-      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label: label,
 
@@ -168,8 +156,6 @@ export const buildWrapper = (label: string, elements: any[]) => {
       wrapperStyle: {
         marginTop: '-6px',
         marginBottom: '-8px',
-        marginLeft: "-34px",
-        width: "108%"
       },
       componentsBoxStyle: {
         marginLeft: "24px",
@@ -220,7 +206,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
       widget: "SelectInputField",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label: label,
         type: "text",
@@ -232,7 +218,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
 
 
 const GraphSection = {
-  type: "WrapperLayout",
+  type: "HorizontalLayout",
   elements: [],
 };
 
@@ -247,7 +233,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("graphHeight", "Graph Height"),
         getInputField("graphWidth", "Graph Width"),
         getInputField("graphZoomHeight", "Zoom Height"),
-        emptyBox("TreeEmpty", {xs: 6, sm: 6, md: 4, lg: 4})
+        emptyBox
       ]
       break;
     case "InputSlider":
@@ -255,9 +241,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("max", "Max Limit"),
         getInputField("step", "Step"),
         getInputField("min", "Min Limit"),
-        emptyBox("InputSliderEmpty1", {xs: 6, sm: 0, md: 0, lg: 0}),
         getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"]),
-        emptyBox("InputSliderEmpty2", {xs: 0, sm: 0, md: 8, lg: 8})
+        emptyBox, emptyBox
       ]
       break;
     case "DataGrid":
@@ -266,8 +251,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
-        emptyBox("DataGridEmpty1", {xs: 6, sm: 0, md: 4, lg: 4 }),
-        emptyBox("DataGridEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
+        emptyBox,
+        emptyBox,
         cardLayout,
       ]
       break;
@@ -281,7 +266,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Horizontal", value: "horizontal" },
           { label: "Vertical", value: "vertical" },
         ]),
-        emptyBox("Stepper", {xs: 6, sm: 6, md: 4, lg: 4 }),
+        emptyBox,
 
         getArrayControl("sectionLabels", "label")
 
@@ -292,21 +277,20 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
         getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
         getInputField("maxWidth", "Max. Width"),
-        emptyBox("PopUpEmpty", {xs: 6, sm: 6, md: 0, lg: 0 })
       ]
       break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox("TextEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
-        emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
+        emptyBox,
+        emptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ]
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox("TextAreaEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }), emptyBox("TextAreaEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })]
+        emptyBox, emptyBox]
       break;
 
     case "SpeedoMeter":
@@ -316,7 +300,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
         getInputField("width", "Speedometer Width"),
-        emptyBox("SpeedoMeterEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 })
+        emptyBox
       ]
       break;
     case "RankCard":
@@ -325,7 +309,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
         getInputField("description", "Card Description"),
-        emptyBox("RankCardEmpty1"), emptyBox("RankCardEmpty2")];
+        emptyBox, emptyBox];
       break;
     case "LeaderBoard":
       uiSchema.elements = [
@@ -333,7 +317,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        emptyBox("LeaderBoardEmpty1"), emptyBox("LeaderBoardEmpty2"),
+        emptyBox, emptyBox,
         getTextArea("functionCode", "Write Compare Code", false),
       ];
       break;
@@ -348,7 +332,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
         getInputField("bottomLabel_3", "Third BottomLabel"),
-        emptyBox("ProgressBarCardEmpty1"), emptyBox("ProgressBarCardEmpty2")
+        emptyBox, emptyBox
       ];
       break;
     case "card":
@@ -356,7 +340,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        emptyBox("cardEmpty", {xs: 6, sm: 6, md: 0, lg: 0 })
+        emptyBox
       ];
       break;
     case "Button":
@@ -369,7 +353,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Apply Default Style", value: "true" },
           { label: "No Style", value: "false" },
         ]),
-        emptyBox("ButtonEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 })
+        emptyBox
       ];
       break;
     case "Graph":
@@ -385,11 +369,10 @@ export const buildPropertiesSection = function (type: String) {
         ]),
         getInputField("leftLabel", "Left Label"),
         getInputField("bottomLabel", "Bottom Label"),
-        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
-        emptyBox("GraphEmpty2"),
+        emptyBox,
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];
@@ -399,7 +382,7 @@ export const buildPropertiesSection = function (type: String) {
       getRadioInputField("isAccordion", "Accordion", ["YES", "No"])
         , getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
       getInputField("rowSpacing", "Row Spacing"),
-        emptyBox("WrapperSectionEmpty1", {xs: 6, sm: 0, md: 4, lg: 4 }), emptyBox("WrapperSectionEmpty2")
+        emptyBox, emptyBox
       ]
       break;
 
@@ -407,7 +390,7 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
-        emptyBox("TabEmpty"),
+        emptyBox,
         getArrayControl("sectionLabels", "label"),
       ]
       break;
@@ -419,14 +402,14 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("ColumnResizingAvailable", "ColumnResizing ", ["YES", "NO"]),
         getRadioInputField("DragAvailable", "Row Dragging", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
-        getInputField("selectKey", "Selection Key"), emptyBox("LazyLoadingTableEmpty1", {xs: 6, sm: 0, md: 0, lg: 0 }),
+        getInputField("selectKey", "Selection Key"), emptyBox,
         buildWrapper("Tree Table Properties", [
           getRadioInputField("enableRowMovement", "Row Rearrangement", ["YES", "NO"]),
           getRadioInputField("enableExpanding", "Row Expanding", ["YES", "NO"]),
           // getRadioInputField("enableExpandAll", "Use All Row Expanding", ["YES", "NO"]),
           getRadioInputField("paginateExpandedRows", "Multi Page Expansion", ["YES", "NO"]),
           getRadioInputField("treeStructure", "Flat Tree Structure", ["YES", "NO"]),
-          emptyBox("LazyLoadingTableEmpty2"), emptyBox("LazyLoadingTableEmpty3")
+          emptyBox, emptyBox
         ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
         sizeHolder,
@@ -442,14 +425,14 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
-        emptyBox("SelectEmpty")
+        emptyBox
       ]
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        emptyBox("MultipleSelectEmpty1", {xs: 0, sm: 6, md: 4, lg: 4 }),
-        emptyBox("MultipleSelectEmpty2")
+        emptyBox,
+        emptyBox
       ]
       break;
   }

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

@@ -1,140 +1,98 @@
-export default function Card(theme){
-  const uiSchema = {
-    type: "WrapperLayout",
-    config: {
-      main: {
-      },
-      wrapperStyle: {
-  
+export default {
+  type: "WrapperLayout",
+  config: {
+    main: {
+      rowSpacing: 0.5,
+    },
+    componentsBoxStyle: {
+      position: "relative",
+      color: "white",
+      height: { xs: "120px", md: "160px" },
+      width: "100%",
+      textAlign: "left",
+      background: "#3f51b5",
+      borderRadius: "20px",
+    },
+    layout: { xs: 12, sm: 12, md: 6, lg: 6, },
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/programType",
+      config: {
+        main: {
+          heading: "$5000.00",
+        },
+        style: {
+          position: "absolute",
+          left: "10%",
+          top: "15%",
+          color: "#f5effc",
+          height: "80px",
+          display: "flex",
+          fontSize: { xs: "24px", md: "32px" },
+          alignItems: "center",
+          background: "inherit",
+          justifyContent: "flex-start",
+ 
+        },
+        layout: 5,
       },
-      componentsBoxStyle: {
-        flexDirection: "row",
-        flexWrap: "nowrap",
-        width: "100%",
-        background: "transparent",
-        border: `1.5px solid ${theme.palette.primary.main}`,
-        borderRadius: "20px",
-        padding: "0px 20px 0px 20px",
-        "&: hover": {
-        background: `${theme.palette.primary.main}`,
-        border: `1.5px solid black`,
-        "& p": {
-          color: "white"
-        }
-        }
+      options: {
+        widget: "Box",
       },
-      layout: { xs: 12, sm: 12, md: 6, lg: 6, },
     },
-    elements: [
-      {
-        type: "HorizontalLayout",
-        config: {
-          layout: 8
+    {
+      type: "Control",
+      scope: "#/properties/programType",
+      config: {
+        main: {
+          url: "https://www.svgrepo.com/show/500606/loading.svg",
         },
-        elements: [
-          {
-            type: "WrapperLayout",
-            config: {
-              main: {
-                columnSpacing: 0,
-                gap: 0
-              },
-              wrapperStyle: {
-                marginTop: "4px",
-                background: "transparent"
-              },
-              componentsBoxStyle: {
-                flexDirection: "column",
-                flexWrap: "nowrap",
-                width: '100%',
-                height: 'inherit',
-                background: "transparent",
-                borderRadius: "0px",
-              },
-              layout: 12,
-            },
-            elements: [
-              {
-                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: "calc(100%+8px)",
-                    margin: "-8px",
-                  },
-                  layout: 12,
-                },
-                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%+8pc)",
-                    margin: "-8px",
-                    lineHeight: "1"
-                  },
-                  layout: 12,
-                },
-    
-                options: {
-                  widget: "Box",
-                },
-              },
-            ]
-          },
-        ]
+        style: {
+          color: "#f5effc",
+          objectFit: "contain",
+          position: "absolute",
+          top: "10px",
+          right: "10px",
+          height: "80%",
+          width: "35%",
+          display: "flex",
+          fontSize: "34px",
+          alignItems: "center",
+          background: "inherit",
+          padding: "20px",
+          justifyContent: "left",
+        },
+        layout: 5,
+      },
+      options: {
+        widget: "Image",
       },
-      {
-        type: "Control",
-        scope: "#/properties/programType",
-        config: {
-          main: {
-            url: "https://www.svgrepo.com/show/500606/loading.svg",
-          },
-          style: {
-            containerStyle: {
-              height: '100%',
-              display: "flex",
-              justifyContent: "center"
-            },
-            imageStyle: {
-              // width: "none",
-              height: '100%',
-              fontSize: "none",
-              padding: "4px",
-              marginLeft: "8px"
-            },
-          },
-          layout: 4,
+    },
+    {
+      type: "Control",
+      scope: "#/properties/programType",
+      config: {
+        main: {
+          heading: "Total Earnings",
         },
-        options: {
-          widget: "Image",
+        style: {
+          position: "absolute",
+          top: "calc(60%)",
+          alignItems: "center",
+          color: "#8999e8",
+          fontSize: "16px",
+          left: "10%",
+          background: "inherit",
+          justifyContent: "center",
         },
+        layout: 12,
       },
-      
-    ],
-  };
-
-  return uiSchema
-}
+ 
+      options: {
+        widget: "Box",
+      },
+    },
+  ],
+};

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

@@ -9,7 +9,7 @@ export const CoreSection = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Type",
           type: "text",
@@ -24,7 +24,7 @@ export const CoreSection = {
         widget: "InputField",
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Name",
         },
@@ -38,7 +38,7 @@ export const CoreSection = {
         widget: "InputField",
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Label",
         },
@@ -51,7 +51,7 @@ export const CoreSection = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Column Format",
 
@@ -62,7 +62,7 @@ export const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 },
       },
       options: {
         widget: "EmptyBox",
@@ -72,7 +72,7 @@ export const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 },
       },
       options: {
         widget: "EmptyBox",
@@ -95,7 +95,7 @@ export const CoreSection = {
                 widget: "SelectInputField",
               },
               config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Screen Size",
 
@@ -110,7 +110,7 @@ export const CoreSection = {
                 widget: "InputField",
               },
               config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value",
                   type:"number",
@@ -124,7 +124,7 @@ export const CoreSection = {
               type: "Control",
               scope: "#/properties/proc",
               config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
               },
               options: {
                 widget: "EmptyBox",
@@ -152,7 +152,7 @@ export const OptionArray: any = {
             widget: "SelectInputField",
           },
           config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Label",
             },
@@ -166,7 +166,7 @@ export const OptionArray: any = {
             widget: "InputField",
           },
           config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Value",
               helperText: 'Number should be in range of 0 to 12',

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

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