impaktapps-ui-builder 0.0.412 → 0.0.591

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

@@ -9,7 +9,7 @@ const RadioUiSchema = {
       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: "Enabled",
         options: ["YES", "NO"],

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

@@ -25,7 +25,6 @@ export const buildSchema = (config: any) => {
        
     }
     buildRule(config)
-    console.log(schema)
     window.localStorage.setItem("schemaDemo",JSON.stringify(schema))
     return schema;
 };

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

@@ -8,17 +8,13 @@ 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.height) {
       barGraph.config.style.containerStyle.height = config.height;
     }

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

@@ -2,7 +2,7 @@ import Table from "./uischema/table";
 import _ from "lodash";
 import buildUiSchema from "./buildUiSchema";
 import lazyLoadingTable from "./uischema/lazyLoadingTable";
- 
+
 export const buildTable = (config: any, componentScope: string) => {
   const table: any = _.cloneDeep(Table);
   table.scope = componentScope;
@@ -12,6 +12,22 @@ export const buildTable = (config: any, componentScope: string) => {
   if (config.lazyLoading) {
     table.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
   }
+  if (config.enableRowMovement) {
+    table.config.main.enableRowMovement = config.enableRowMovement === "YES" ? true : false;
+  }
+  if (config.enableExpanding) {
+    table.config.main.enableExpanding = config.enableExpanding === "YES" ? true : false;
+  }
+
+  if (config.enableExpandAll) {
+    table.config.main.enableExpandAll = config.enableExpandAll === "YES" ? true : false;
+  }
+  if (config.paginateExpandedRows) {
+    table.config.main.paginateExpandedRows = config.paginateExpandedRows === "YES" ? true : false;
+  }
+  if (config.treeStructure) {
+    table.config.main.treeStructure = config.treeStructure === "YES" ? "flatTreeMap" : false;
+  }
   if (config.SelectionAvailable) {
     table.config.main.Selection = config.SelectionAvailable === "YES" ? true : false
   };

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

@@ -54,5 +54,8 @@ export const buildTreeMap = (config, componentScope) => {
     if (config.graphZoomWidth) {
         treMap.config.main.graphZoomWidth = config.graphZoomWidth;
     }
+    if (config.style) {
+        treMap.config.style = JSON.parse(config.style)
+      }
     return treMap;
 }

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

@@ -7,7 +7,7 @@ export const buildWrapperSection = (config, componentScope) => {
   wrapper.scope = componentScope;
   wrapper.config.main.label = config.label;
   wrapper.config.main.divider = config.divider === "YES" ? true : false;
-  wrapper.config.main.isAccordion = config.isAccordion === "YES" ? true : false;
+  wrapper.config.main.isAccordion = config.isAccordion === "No" ? false : true;
   if(config.defaultStyle){
   wrapper.config.defaultStyle = config.defaultStyle ==="YES" ? true : false;
   }

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/box.ts

@@ -1,5 +1,5 @@
 
-  export default {
+   const Box =  {
     type: "Control",
     scope: "#/properties/emptyBox",
     options: {
@@ -12,4 +12,5 @@
         // fontWeight:300
       }
     },
-  };
+  };
+  export default Box;

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

@@ -1,25 +1,22 @@
 
 import _ from "lodash";
 import emptyBox from "./emptyBox";
-const EmptyBox = {
-  type: "Control",
-  scope: `#/properties/empty`,
+import { buildLabel } from "../buildLabel";
+import Box from "./box";
+// const emptyBox = {
+//   type: "Control",
+//   scope: `#/properties/empty`,
 
-  options: {
-    widget: "EmptyBox",
-  },
-  config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5,
-    },
-    main: {
+//   options: {
+//     widget: "emptyBox",
+//   },
+//   config: {
+//     layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+//     main: {
 
-    },
-  },
-};
+//     },
+//   },
+// };
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
@@ -35,12 +32,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 +47,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 +58,7 @@ const cardLayout = {
             },
           },
         },
+        emptyBox
       ],
     },
   },
@@ -79,7 +67,7 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 11.5,
+    layout: 12,
     options: {
       "elementLabelProp": childScope,
       detail: {
@@ -93,18 +81,14 @@ 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,
+          emptyBox
         ],
       },
     },
@@ -119,17 +103,13 @@ 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",
     },
   },
 };
+sizeHolder.options.detail.elements[2] = emptyBox
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -139,12 +119,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 +136,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,
 
@@ -175,7 +145,26 @@ export const getRadioInputField = (scope: String, label: String, options: string
     },
   };
 };
-
+export const buildWrapper = (label: string, elements: any[]) => {
+  return {
+    type: "WrapperLayout",
+    config: {
+      main: {
+        label: label || "Details",
+        isAccordion: true,
+      },
+      wrapperStyle: {
+        marginTop: '-6px',
+        marginBottom: '-8px',
+      },
+      componentsBoxStyle: {
+        marginLeft: "24px",
+      },
+      defaultStyle: true
+    },
+    elements: elements || []
+  }
+}
 export const getTextArea = (scope: string, heading: string, hideButton: boolean, layout?: any) => {
   return {
     type: "Control",
@@ -217,7 +206,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",
@@ -244,13 +233,16 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("graphHeight", "Graph Height"),
         getInputField("graphWidth", "Graph Width"),
         getInputField("graphZoomHeight", "Zoom Height"),
+        emptyBox
       ]
+      break;
     case "InputSlider":
       uiSchema.elements = [
         getInputField("max", "Max Limit"),
         getInputField("step", "Step"),
         getInputField("min", "Min Limit"),
         getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"]),
+        emptyBox, emptyBox
       ]
       break;
     case "DataGrid":
@@ -259,6 +251,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
+        emptyBox,
+        emptyBox,
         cardLayout,
       ]
       break;
@@ -272,6 +266,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Horizontal", value: "horizontal" },
           { label: "Vertical", value: "vertical" },
         ]),
+        emptyBox,
 
         getArrayControl("sectionLabels", "label")
 
@@ -282,20 +277,20 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
         getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
         getInputField("maxWidth", "Max. Width"),
-        EmptyBox
       ]
       break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,
+        emptyBox,
+        emptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ]
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,]
+        emptyBox, emptyBox]
       break;
 
     case "SpeedoMeter":
@@ -304,7 +299,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":
@@ -312,7 +308,8 @@ 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 = [
@@ -320,7 +317,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        getTextArea("functionCode", "Write Compare Code", false)
+        emptyBox, emptyBox,
+        getTextArea("functionCode", "Write Compare Code", false),
       ];
       break;
     case "CardSlider":
@@ -333,7 +331,8 @@ 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":
@@ -341,7 +340,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("url", "Image Url"),
         getInputField("label", "Label"),
         getInputField("description", "Description"),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Button":
@@ -354,7 +353,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Apply Default Style", value: "true" },
           { label: "No Style", value: "false" },
         ]),
-        EmptyBox
+        emptyBox
       ];
       break;
     case "Graph":
@@ -373,6 +372,7 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
+        emptyBox,
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];
@@ -381,7 +381,8 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]),
       getRadioInputField("isAccordion", "Accordion", ["YES", "No"])
         , getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
-        getInputField("rowSpacing", "Row Spacing"),
+      getInputField("rowSpacing", "Row Spacing"),
+        emptyBox, emptyBox
       ]
       break;
 
@@ -389,6 +390,7 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
+        emptyBox,
         getArrayControl("sectionLabels", "label"),
       ]
       break;
@@ -396,13 +398,22 @@ export const buildPropertiesSection = function (type: String) {
     case "LazyLoadingTable":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        getRadioInputField("SelectionAvailable", "Selection Available", ["YES", "NO"]),
-        getRadioInputField("ColumnResizingAvailable", "ColumnResizing Available", ["YES", "NO"]),
-        getRadioInputField("DragAvailable", "Drag Available", ["YES", "NO"]),
+        getRadioInputField("SelectionAvailable", "Row Selection", ["YES", "NO"]),
+        getRadioInputField("ColumnResizingAvailable", "ColumnResizing ", ["YES", "NO"]),
+        getRadioInputField("DragAvailable", "Row Dragging", ["YES", "NO"]),
         getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
-        getInputField("selectKey", "Selection Key"),
+        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, emptyBox
+        ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
-        sizeHolder
+        sizeHolder,
+
       ]
       break;
     case "Radio":
@@ -414,12 +425,14 @@ 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,
+        emptyBox
       ]
       break;
   }

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

@@ -5,12 +5,7 @@ export default  {
     widget: "Button",
   },
   config: {
-    layout: {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5,
-    },
+    layout: 3,
     main: {
       name: "Compare",
       variant: "contained",
@@ -20,7 +15,7 @@ export default  {
       styleDefault:false,
       icon:"",
       onClick: "onClick",
-      size: "small",
+      size: "medium",
     },
     style: {
     },