impaktapps-ui-builder 0.0.382-alpha.212 → 0.0.382-alpha.22

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

@@ -8,12 +8,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: {
 
     },
@@ -34,12 +29,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",
             
@@ -54,12 +44,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",
@@ -70,6 +55,7 @@ const cardLayout =  {
             },
           },
         },
+        EmptyBox,
       ],
     },
   },
@@ -92,12 +78,7 @@ 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",
               },
@@ -118,17 +99,26 @@ 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] = {
+  type: "Control",
+  scope: `#/properties/empty`,
+
+  options: {
+    widget: "EmptyBox",
+  },
+  config: {
+    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    main: {
+      label: 'empty'
+    },
+  },
+};
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -138,12 +128,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,
       },
@@ -160,12 +145,7 @@ 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,
 
@@ -216,7 +196,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",
@@ -241,6 +221,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
+        EmptyBox,
+        EmptyBox,
         cardLayout,
       ]
       break;
@@ -254,7 +236,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Horizontal", value: "horizontal" },
           { label: "Vertical", value: "vertical" },
         ]),
-
+        EmptyBox,
         getArrayControl("sectionLabels", "label")
 
       ]
@@ -271,13 +253,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":
@@ -286,7 +270,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":
@@ -294,7 +279,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 = [
@@ -302,6 +290,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;
@@ -315,7 +305,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":
@@ -358,7 +350,7 @@ export const buildPropertiesSection = function (type: String) {
       ];
       break;
     case "WrapperSection":
-      uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox]
+      uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox, EmptyBox]
       break;
 
     case "TabSection":
@@ -388,11 +380,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/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,31 +38,16 @@ 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",
         },
       },
     },
-    {
-      type: "Control",
-      scope: "#/properties/proc",
-      config: {
-        layout: { xs: 11, sm: 11, md: 6, lg: 6 },
-      },
-      options: {
-        widget: "EmptyBox",
-      },
-    },
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 11.5,
+      layout: 12,
       options: {
         "elementLabelProp": "key",
         detail: {
@@ -81,12 +61,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",
 
@@ -101,12 +76,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",
@@ -116,6 +86,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:{}
   },

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

@@ -1,58 +1,58 @@
 export const EventSection = {
     type: "HorizontalLayout",
     elements: [
-          {
-            type: "WrapperLayout",
-            config: {
-              main: {
-                // label: "Table Columns",
-                divider: true,
-              },
-              wrapperStyle: {
-                border:"1px solid gray"
-              },
-            },
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/programType",
+          // {
+          //   type: "WrapperLayout",
+          //   config: {
+          //     main: {
+          //       // label: "Table Columns",
+          //       divider: true,
+          //     },
+          //     wrapperStyle: {
+          //       border:"1px solid gray"
+          //     },
+          //   },
+          //   elements: [
+          //     {
+          //       type: "Control",
+          //       scope: "#/properties/programType",
       
-                options: {
-                  widget: "Box",
-                },
-                config: {
-                  layout: 8,
-                  main: {
-                    heading: "Event Table",
-                  },
-                  style: {
-                    fontFamily: "Roboto",
-                    fontWeight: "500",
-                    paddingLeft:"-10px",
-                    fontSize: "20px",},
-                },
-              },
-              {
-                type: "Control",
-                scope: "#/properties/Back_Button",
+          //       options: {
+          //         widget: "Box",
+          //       },
+          //       config: {
+          //         layout: 8,
+          //         main: {
+          //           heading: "Event Table",
+          //         },
+          //         style: {
+          //           fontFamily: "Roboto",
+          //           fontWeight: "500",
+          //           paddingLeft:"-10px",
+          //           fontSize: "20px",},
+          //       },
+          //     },
+          //     {
+          //       type: "Control",
+          //       scope: "#/properties/Back_Button",
       
-                options: {
-                  widget: "IconButton",
-                },
-                config: {
-                  layout: 3,
-                  main: {
-                    icon: "AddIcon",
-                    styleDefault: true,
-                    size: "small",
-                    onClick: "eventAddHandler",
-                    tooltipMessage: "Back",
-                  },
-                  style: {
-                    float: "right", 
-                  },
-                },
-              },
+          //       options: {
+          //         widget: "IconButton",
+          //       },
+          //       config: {
+          //         layout: 3,
+          //         main: {
+          //           icon: "AddIcon",
+          //           styleDefault: true,
+          //           size: "small",
+          //           onClick: "eventAddHandler",
+          //           tooltipMessage: "Back",
+          //         },
+          //         style: {
+          //           float: "right", 
+          //         },
+          //       },
+          //     },
       {
         type: "Control",
         scope: "#/properties/events",
@@ -61,6 +61,33 @@ export const EventSection = {
         },
         config: {
           main: {
+            headerIcons: {
+              elements: [
+                {
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/New_Record",
+
+                    options: {
+                      widget: "IconButton",
+                    },
+                    config: {
+                      main: {
+                        color: "info",
+                        onClick: "eventAddHandler",
+                        size: "small",
+                        icon: "AddIcon",
+                        iconLabel: "Add New",
+                        styleDefault: true,
+                      },
+                      style: {
+                        mt: "6px",
+                      },
+                    },
+                  }
+                },
+              ]
+            },
             disableAction: true,
             disableSelection: true,
             enableDrag: true,
@@ -124,7 +151,7 @@ export const EventSection = {
           },
         ]
       }]}
-    ]}
+    // ]}
   
   export const EventSectionSchema = {
     events: {

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

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

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

@@ -19,12 +19,7 @@ export const refreshSectionUiSchema = {
                 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",
                 },
@@ -38,12 +33,7 @@ export const refreshSectionUiSchema = {
                 widget: "EmptyBox",
               },
               config: {
-                layout: {
-                  xs: 11,
-                  sm: 11,
-                  md: 5.5,
-                  lg: 5.5,
-                },
+                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
                 main: {
                  
                 },

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

@@ -6,12 +6,7 @@ export default {
     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: "",
       type: "text",