impaktapps-ui-builder 0.0.591 → 0.0.592-alpha.10

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

@@ -1,22 +1,34 @@
 
 import _ from "lodash";
-import emptyBox from "./emptyBox";
 import { buildLabel } from "../buildLabel";
 import Box from "./box";
-// const emptyBox = {
-//   type: "Control",
-//   scope: `#/properties/empty`,
+const emptyBox = (scope:string,layout?: any) => {
 
-//   options: {
-//     widget: "emptyBox",
-//   },
-//   config: {
-//     layout: { xs: 0, sm: 4, md: 4, lg: 4 },
-//     main: {
+  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: 0, md: 4, lg: 4 },
+  },
+}
+}
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
@@ -32,7 +44,7 @@ const cardLayout = {
             widget: "SelectInputField",
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
             main: {
               label: "Screen Size",
 
@@ -47,7 +59,7 @@ const cardLayout = {
             widget: "InputField",
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
             main: {
               label: "Value",
               type: "number",
@@ -58,7 +70,7 @@ const cardLayout = {
             },
           },
         },
-        emptyBox
+        emptyBox("cardEmpty")
       ],
     },
   },
@@ -81,14 +93,14 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
               widget: "InputField",
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
               main: {
                 label: childLabel || "Labels for Tab",
               },
             },
           },
-          emptyBox,
-          emptyBox
+          emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
+          emptyBox("ArrayControlEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })
         ],
       },
     },
@@ -103,13 +115,13 @@ sizeHolder.options.detail.elements[1] = {
     widget: "InputField",
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       label: "Size",
     },
   },
 };
-sizeHolder.options.detail.elements[2] = emptyBox
+sizeHolder.options.detail.elements[2] = emptyBox("sizeHolderempty")
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -119,7 +131,7 @@ const getInputField = (scope: String, label: String) => {
       widget: "InputField",
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
       main: {
         label: label,
       },
@@ -136,7 +148,7 @@ export const getRadioInputField = (scope: String, label: String, options: string
       widget: "RadioInputField",
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
       main: {
         label: label,
 
@@ -156,6 +168,8 @@ export const buildWrapper = (label: string, elements: any[]) => {
       wrapperStyle: {
         marginTop: '-6px',
         marginBottom: '-8px',
+        marginLeft: "-34px",
+        width: "108%"
       },
       componentsBoxStyle: {
         marginLeft: "24px",
@@ -206,7 +220,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
       widget: "SelectInputField",
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
       main: {
         label: label,
         type: "text",
@@ -218,7 +232,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
 
 
 const GraphSection = {
-  type: "HorizontalLayout",
+  type: "WrapperLayout",
   elements: [],
 };
 
@@ -233,7 +247,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("graphHeight", "Graph Height"),
         getInputField("graphWidth", "Graph Width"),
         getInputField("graphZoomHeight", "Zoom Height"),
-        emptyBox
+        emptyBox("TreeEmpty", {xs: 6, sm: 6, md: 4, lg: 4})
       ]
       break;
     case "InputSlider":
@@ -241,8 +255,9 @@ 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, emptyBox
+        emptyBox("InputSliderEmpty2", {xs: 0, sm: 0, md: 8, lg: 8})
       ]
       break;
     case "DataGrid":
@@ -251,8 +266,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
-        emptyBox,
-        emptyBox,
+        emptyBox("DataGridEmpty1", {xs: 6, sm: 0, md: 4, lg: 4 }),
+        emptyBox("DataGridEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
         cardLayout,
       ]
       break;
@@ -266,7 +281,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Horizontal", value: "horizontal" },
           { label: "Vertical", value: "vertical" },
         ]),
-        emptyBox,
+        emptyBox("Stepper", {xs: 6, sm: 6, md: 4, lg: 4 }),
 
         getArrayControl("sectionLabels", "label")
 
@@ -277,20 +292,21 @@ 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,
-        emptyBox,
+        emptyBox("TextEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
+        emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ]
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox, emptyBox]
+        emptyBox("TextAreaEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }), emptyBox("TextAreaEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })]
       break;
 
     case "SpeedoMeter":
@@ -300,7 +316,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
         getInputField("width", "Speedometer Width"),
-        emptyBox
+        emptyBox("SpeedoMeterEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 })
       ]
       break;
     case "RankCard":
@@ -309,7 +325,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
         getInputField("description", "Card Description"),
-        emptyBox, emptyBox];
+        emptyBox("RankCardEmpty1"), emptyBox("RankCardEmpty2")];
       break;
     case "LeaderBoard":
       uiSchema.elements = [
@@ -317,7 +333,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        emptyBox, emptyBox,
+        emptyBox("LeaderBoardEmpty1"), emptyBox("LeaderBoardEmpty2"),
         getTextArea("functionCode", "Write Compare Code", false),
       ];
       break;
@@ -332,7 +348,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
         getInputField("bottomLabel_3", "Third BottomLabel"),
-        emptyBox, emptyBox
+        emptyBox("ProgressBarCardEmpty1"), emptyBox("ProgressBarCardEmpty2")
       ];
       break;
     case "card":
@@ -340,7 +356,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        emptyBox
+        emptyBox("cardEmpty", {xs: 6, sm: 6, md: 0, lg: 0 })
       ];
       break;
     case "Button":
@@ -353,7 +369,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Apply Default Style", value: "true" },
           { label: "No Style", value: "false" },
         ]),
-        emptyBox
+        emptyBox("ButtonEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 })
       ];
       break;
     case "Graph":
@@ -366,13 +382,15 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Line Graph", value: "LineGraph" },
           { label: "Pie Graph", value: "PieGraph" },
           { label: "Horizontal Bar Graph", value: "HorizontalBarGraph" },
+          { label: "Stack Horizontal Bar Graph", value: "HorizontalStackBarGraph" }
         ]),
         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,
+        emptyBox("GraphEmpty2"),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];
@@ -382,7 +400,7 @@ export const buildPropertiesSection = function (type: String) {
       getRadioInputField("isAccordion", "Accordion", ["YES", "No"])
         , getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
       getInputField("rowSpacing", "Row Spacing"),
-        emptyBox, emptyBox
+        emptyBox("WrapperSectionEmpty1", {xs: 6, sm: 0, md: 4, lg: 4 }), emptyBox("WrapperSectionEmpty2")
       ]
       break;
 
@@ -390,7 +408,7 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
-        emptyBox,
+        emptyBox("TabEmpty"),
         getArrayControl("sectionLabels", "label"),
       ]
       break;
@@ -402,14 +420,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,
+        getInputField("selectKey", "Selection Key"), emptyBox("LazyLoadingTableEmpty1", {xs: 6, sm: 0, md: 0, lg: 0 }),
         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, emptyBox
+          emptyBox("LazyLoadingTableEmpty2"), emptyBox("LazyLoadingTableEmpty3")
         ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
         sizeHolder,
@@ -425,14 +443,14 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
-        emptyBox
+        emptyBox("SelectEmpty")
       ]
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        emptyBox,
-        emptyBox
+        emptyBox("MultipleSelectEmpty1", {xs: 0, sm: 6, md: 4, lg: 4 }),
+        emptyBox("MultipleSelectEmpty2")
       ]
       break;
   }

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

@@ -1,98 +1,140 @@
-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,
+export default function Card(theme){
+  const uiSchema = {
+    type: "WrapperLayout",
+    config: {
+      main: {
+      },
+      wrapperStyle: {
+  
       },
-      options: {
-        widget: "Box",
+      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"
+        }
+        }
       },
+      layout: { xs: 12, sm: 12, md: 6, lg: 6, },
     },
-    {
-      type: "Control",
-      scope: "#/properties/programType",
-      config: {
-        main: {
-          url: "https://www.svgrepo.com/show/500606/loading.svg",
+    elements: [
+      {
+        type: "HorizontalLayout",
+        config: {
+          layout: 8
         },
-        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",
+        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",
+                },
+              },
+            ]
+          },
+        ]
       },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/programType",
-      config: {
-        main: {
-          heading: "Total Earnings",
+      {
+        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,
         },
-        style: {
-          position: "absolute",
-          top: "calc(60%)",
-          alignItems: "center",
-          color: "#8999e8",
-          fontSize: "16px",
-          left: "10%",
-          background: "inherit",
-          justifyContent: "center",
+        options: {
+          widget: "Image",
         },
-        layout: 12,
       },
- 
-      options: {
-        widget: "Box",
-      },
-    },
-  ],
-};
+      
+    ],
+  };
+
+  return uiSchema
+}

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

@@ -9,7 +9,7 @@ export const CoreSection = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Type",
           type: "text",
@@ -24,7 +24,7 @@ export const CoreSection = {
         widget: "InputField",
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Name",
         },
@@ -38,7 +38,7 @@ export const CoreSection = {
         widget: "InputField",
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
         main: {
           label: "Label",
         },
@@ -51,7 +51,7 @@ export const CoreSection = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, 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: 4, md: 4, lg: 4 },
+        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
       },
       options: {
         widget: "EmptyBox",
@@ -72,7 +72,7 @@ export const CoreSection = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
       },
       options: {
         widget: "EmptyBox",
@@ -95,7 +95,7 @@ export const CoreSection = {
                 widget: "SelectInputField",
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Screen Size",
 
@@ -110,7 +110,7 @@ export const CoreSection = {
                 widget: "InputField",
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, 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: 4, md: 4, lg: 4 },
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
               },
               options: {
                 widget: "EmptyBox",
@@ -152,7 +152,7 @@ export const OptionArray: any = {
             widget: "SelectInputField",
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
             main: {
               label: "Label",
             },
@@ -166,7 +166,7 @@ export const OptionArray: any = {
             widget: "InputField",
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: { xs: 6, sm: 6, 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: 11, sm: 4, md: 4, lg: 4 },
+  config: {   
+     layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       label: "",
       type: "date",
@@ -21,7 +21,7 @@ export const DateTime = {
   },
 
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
     main: {
       label: "DateTime",
       type: "date",