impaktapps-ui-builder 0.0.412-hj → 0.0.412-mtreemap.2

package/dist/src/impaktapps-ui-builder/builder/services/event.d.ts

@@ -5,7 +5,7 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
     setPage: () => Promise<void>;
     refreshPage: (handlerType: any, store: any) => void;
     getFormData: () => any;
-    getUiSchema: () => any;
+    getUiSchema: () => Promise<any>;
     getSchema: () => {
         type: string;
         properties: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.412hj",
+    "version": "0.0.412-mtreemap.2",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-ui-builder/builder/build/buildBasicUiSchema.ts

@@ -7,4 +7,4 @@ export const buildBasicUiSchema = (config) => {
         header: config.label || config.name,
         "elements": []
     }
-}
+}

package/src/impaktapps-ui-builder/builder/build/buildHorizontalBarGraph.ts

@@ -3,33 +3,37 @@ import { HorizontalBarGraph } from "./uischema/graph";
 import _ from "lodash";
 
 
-const buildHorizontalBarGraph = (config:any,componentScope:string) => {
-    const horizontalBarGraph: any = _.cloneDeep(HorizontalBarGraph);
-    horizontalBarGraph.scope = componentScope;
-    if (config.layout) {
-      horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
+const buildHorizontalBarGraph = (config: any, componentScope: string) => {
+  const horizontalBarGraph: any = _.cloneDeep(HorizontalBarGraph);
+  horizontalBarGraph.scope = componentScope;
+  if (config.layout) {
+    horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
+  }
+  horizontalBarGraph.scope = componentScope;
+  horizontalBarGraph.config.main.header = config.heading;
+  if (config.barColor) {
+    horizontalBarGraph.config.barStyle.color = config.barColor;
+  }
+  if (config.containerBackground) {
+    horizontalBarGraph.config.containerStyle.background =
+      config.containerBackground;
+  }
+  if (config.height) {
+    horizontalBarGraph.config.style =
+    {
+      containerStyle: {
+        height: config.height
+      }
     }
-    horizontalBarGraph.scope = componentScope;
-    horizontalBarGraph.config.main.header = config.heading;
-    if (config.barColor) {
-      horizontalBarGraph.config.barStyle.color = config.barColor;
-    }
-    if (config.containerBackground) {
-      horizontalBarGraph.config.containerStyle.background =
-        config.containerBackground;
-    }
-    if (config.height) {
-      horizontalBarGraph.config.style.containerStyle.height =
-        config.height;
-    }
-    if (config.bottomLabel) {
-      horizontalBarGraph.config.main.bottomLabel =
-        config.bottomLabel;
-    }
-    if (config.leftLabel) {
-      horizontalBarGraph.config.main.leftLabel = config.leftLabel;
-    }
-    return horizontalBarGraph
+  }
+  if (config.bottomLabel) {
+    horizontalBarGraph.config.main.bottomLabel =
+      config.bottomLabel;
+  }
+  if (config.leftLabel) {
+    horizontalBarGraph.config.main.leftLabel = config.leftLabel;
+  }
+  return horizontalBarGraph
 }
 
 export default buildHorizontalBarGraph

package/src/impaktapps-ui-builder/builder/build/buildPieGraph.ts

@@ -7,7 +7,12 @@ export const buildPieGraph = (config, componentScope) => {
     pieGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.height) {
-    pieGraph.config.style.containerStyle.height = config.height;
+    pieGraph.config.style =
+    {
+      containerStyle: {
+        height: config.height
+      }
+    };
   }
   if (config.legendHide) {
     pieGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
@@ -20,7 +25,11 @@ export const buildPieGraph = (config, componentScope) => {
   }
 
   if (config.pieArcColors) {
-    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+    pieGraph.config.style = {
+      pieStyle: {
+        colorRange: flatObjectValueInArray(config.pieArcColors)
+      }
+    }
   }
   return pieGraph;
 }

package/src/impaktapps-ui-builder/builder/build/buildStackBarGraph.ts

@@ -8,17 +8,17 @@ export const buildStackbarGraph = (config:any,componentScope:string) => {
       barGraph.config.layout = createLayoutFormat(config.layout);
     }
     if (config.legendHide) {
-      barGraph.config.main.legendAvailable = false;
+      barGraph.config.main.legendAvailable = config.legendHide;
     }
     barGraph.config.main.type = config.graphType;
     barGraph.config.main.header = config.heading;
     if (config.barColor) {
       barGraph.config.barStyle.color = config.barColor;
     }
-    if (config.containerBackground) {
-      barGraph.config.containerStyle.background =
-        config.containerBackground;
-    }
+    // if (config.containerBackground) {
+    //   barGraph.config.containerStyle.background =
+    //     config.containerBackground;
+    // }
     if (config.height) {
       barGraph.config.style.containerStyle.height = config.height;
     }
@@ -28,6 +28,6 @@ export const buildStackbarGraph = (config:any,componentScope:string) => {
     if (config.leftLabel) {
       barGraph.config.main.leftLabel = config.leftLabel;
     }
-    barGraph.scope = componentScope;
+    // barGraph.scope = componentScope;
     return barGraph;
 } 

package/src/impaktapps-ui-builder/builder/build/buildWrapperSection.ts

@@ -18,4 +18,4 @@ export const buildWrapperSection = (config, componentScope) => {
     wrapper.config.layout = createLayoutFormat(config.layout)
   }
   return wrapper;
-}
+}

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

@@ -11,7 +11,7 @@ export const APISection = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Method",
           type: "text",
@@ -26,7 +26,7 @@ export const APISection = {
         widget: "InputField",
       },
       config: {
-        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Path",
           type: "text",
@@ -35,6 +35,28 @@ export const APISection = {
         },
       },
     },
+    {
+      type: "Control",
+      scope: "#/properties/emptyBox",
+
+      options: {
+        widget: "EmptyBox",
+      },
+      config: {
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/emptyBox",
+
+      options: {
+        widget: "EmptyBox",
+      },
+      config: {
+        layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+      },
+    },
     {
       type: "Control",
       scope: "#/properties/headers",
@@ -51,12 +73,7 @@ export const APISection = {
                 widget: "InputField",
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5,
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Key",
                 },
@@ -70,17 +87,23 @@ export const APISection = {
                 widget: "InputField",
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5,
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value",
                 },
               },
             },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+        
+              options: {
+                widget: "EmptyBox",
+              },
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+              },
+            },
           ],
         },
       },
@@ -101,12 +124,7 @@ export const APISection = {
                 widget: "InputField",
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5,
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Key",
                 },
@@ -120,18 +138,23 @@ export const APISection = {
                 widget: "InputField",
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5,
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value",
                 },
               },
             },
-           
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+        
+              options: {
+                widget: "EmptyBox",
+              },
+              config: {
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+              },
+            },
           ],
         },
       },

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

@@ -9,12 +9,7 @@ const EmptyBox = {
     widget: "EmptyBox",
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5,
-    },
+    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
     main: {
 
     },
@@ -35,12 +30,7 @@ const cardLayout = {
             widget: "SelectInputField",
           },
           config: {
-            layout: {
-              xs: 11,
-              sm: 11,
-              md: 5.5,
-              lg: 5.5,
-            },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Screen Size",
 
@@ -55,12 +45,7 @@ const cardLayout = {
             widget: "InputField",
           },
           config: {
-            layout: {
-              xs: 11,
-              sm: 11,
-              md: 5.5,
-              lg: 5.5,
-            },
+            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
             main: {
               label: "Value",
               type: "number",
@@ -71,6 +56,7 @@ const cardLayout = {
             },
           },
         },
+        EmptyBox,
       ],
     },
   },
@@ -93,17 +79,13 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
               widget: "InputField",
             },
             config: {
-              layout: {
-                xs: 11,
-                sm: 11,
-                md: 5.5,
-                lg: 5.5,
-              },
+              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
               main: {
                 label: childLabel || "Labels for Tab",
               },
             },
           },
+          EmptyBox,
           EmptyBox
         ],
       },
@@ -119,12 +101,7 @@ sizeHolder.options.detail.elements[1] = {
     widget: "InputField",
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5,
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "Size",
     },
@@ -139,12 +116,7 @@ const getInputField = (scope: String, label: String) => {
       widget: "InputField",
     },
     config: {
-      layout: {
-        xs: 11,
-        sm: 11,
-        md: 5.5,
-        lg: 5.5,
-      },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label: label,
       },
@@ -161,12 +133,7 @@ export const getRadioInputField = (scope: String, label: String, options: string
       widget: "RadioInputField",
     },
     config: {
-      layout: {
-        xs: 11,
-        sm: 11,
-        md: 5.5,
-        lg: 5.5,
-      },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label: label,
 
@@ -217,7 +184,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
       widget: "SelectInputField",
     },
     config: {
-      layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
       main: {
         label: label,
         type: "text",
@@ -260,6 +227,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
+        EmptyBox,
+        EmptyBox,
         cardLayout,
       ]
       break;
@@ -273,7 +242,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Horizontal", value: "horizontal" },
           { label: "Vertical", value: "vertical" },
         ]),
-
+        EmptyBox,
         getArrayControl("sectionLabels", "label")
 
       ]
@@ -290,13 +259,15 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         EmptyBox,
+        EmptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ]
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,]
+        EmptyBox,
+        EmptyBox]
       break;
 
     case "SpeedoMeter":
@@ -305,7 +276,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("heading", "Container Heading"),
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
-        getInputField("width", "Speedometer Width")
+        getInputField("width", "Speedometer Width"),
+        EmptyBox
       ]
       break;
     case "RankCard":
@@ -313,7 +285,10 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("rank", "Rank"),
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
-        getInputField("description", "Card Description")];
+        getInputField("description", "Card Description"),
+        EmptyBox,
+        EmptyBox
+      ];
       break;
     case "LeaderBoard":
       uiSchema.elements = [
@@ -321,6 +296,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
+        EmptyBox,
+        EmptyBox,
         getTextArea("functionCode", "Write Compare Code", false)
       ];
       break;
@@ -334,7 +311,9 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("heading", "Heading"),
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
-        getInputField("bottomLabel_3", "Third BottomLabel")
+        getInputField("bottomLabel_3", "Third BottomLabel"),
+        EmptyBox,
+        EmptyBox
       ];
       break;
     case "card":
@@ -415,11 +394,13 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
+        EmptyBox
       ]
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
+        EmptyBox,
         EmptyBox
       ]
       break;

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

@@ -4,16 +4,15 @@ export default {
       main: {
         rowSpacing: 0.5,
       },
-      style: {
-        wrapperStyle: {
-          position : "relative",
-          color: "white",
-          height: {xs:"120px",md:"160px"},
-          width: "100%",
-          textAlign: "left",
-          background: "#3f51b5",
-          borderRadius: "20px",
-        },
+      
+      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: [

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

@@ -9,7 +9,7 @@ export const CoreSection = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Type",
           type: "text",
@@ -24,12 +24,7 @@ export const CoreSection = {
         widget: "InputField",
       },
       config: {
-        layout: {
-          xs: 12,
-          sm: 12,
-          md: 6,
-          lg: 6,
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Name",
         },
@@ -43,12 +38,7 @@ export const CoreSection = {
         widget: "InputField",
       },
       config: {
-        layout: {
-          xs: 12,
-          sm: 12,
-          md: 6,
-          lg: 6,
-        },
+        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
         main: {
           label: "Label",
         },
@@ -86,7 +76,7 @@ export const CoreSection = {
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 11.5,
+      layout: 12,
       options: {
         "elementLabelProp": "key",
         detail: {
@@ -100,12 +90,7 @@ export const CoreSection = {
                 widget: "SelectInputField",
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5,
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Screen Size",
 
@@ -120,12 +105,7 @@ export const CoreSection = {
                 widget: "InputField",
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5,
-                },
+                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
                 main: {
                   label: "Value",
                   type:"number",
@@ -135,6 +115,16 @@ export const CoreSection = {
                 },
               },
             },
+            {
+              type: 'Control',
+              scope: '#/properties/emptyBox',
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: {xs: 0, sm: 4}
+              }
+            }
           ],
         },
       },

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

@@ -6,12 +6,7 @@ export default {
   },
 
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5,
-    },
+    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
     main: {
       label: "",
       type: "date",

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

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