impaktapps-ui-builder 0.0.101-alpha.13 → 0.0.101-alpha.130

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

@@ -1,8 +1,6 @@
 
 import _ from "lodash";
-import { buildLabel } from "../buildLabel";
-import Box from "./box";
-const emptyBox = (scope:string,layout?: any) => {
+export const emptyBox = (scope:string,layout?: any) => {
 
   if(layout !== undefined){
     return {
@@ -12,7 +10,6 @@ const emptyBox = (scope:string,layout?: any) => {
         widget: "EmptyBox",
       },
       config: {
-        //[{},{},{}]
         layout: layout,
       },
     }
@@ -32,82 +29,108 @@ const emptyBox = (scope:string,layout?: any) => {
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
-  layout: 11.5,
   options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/key",
-          options: {
-            widget: "SelectInputField",
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Screen Size",
+    widget: "Array",
+  },
+  config: {
+    layout: 12,
+    main: {
+      label: "Card Layout",
+      childElementLabel: "Card Layout",
+    },
+    style: {
+      marginLeft: "-24px",
+      marginBottom: "24px !important",
+      labelStyle: {
+        marginLeft: "24px",
+      },
+      detailsStyle: {
+        marginLeft: "24px",
+      }
+    }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/key",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Screen Size",
 
-            },
-          },
         },
-        {
-          type: "Control",
-          scope: "#/properties/value",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/value",
 
-          options: {
-            widget: "InputField",
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Value",
-              type: "number",
-              // freeSolo:true,
-              helperText: 'Number should be in range of 0 to 12',
-              errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
+      options: {
+        widget: "InputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Value",
+          type: "number",
+          // freeSolo:true,
+          helperText: 'Number should be in range of 0 to 12',
+          errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
 
-            },
-          },
         },
-        emptyBox("cardEmpty")
-      ],
+      },
     },
-  },
+    emptyBox("cardEmpty")
+  ],
 };
 const getArrayControl = (parentScope: string, childScope: string, childLabel?: string,) => {
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 12,
     options: {
-      "elementLabelProp": childScope,
-      detail: {
-        type: "HorizontalLayout",
-        elements: [
-          {
-            type: "Control",
-            scope: `#/properties/${childScope}`,
+      widget: "Array"
+    },
+    config: {
+      layout: 12,
+      main: {
+        label: childLabel,
+        childElementLabel: childLabel,
+      },
+      style: {
+        marginLeft: "-24px",
+        marginBottom: "24px !important",
+        labelStyle: {
+          marginLeft: "24px",
+        },
+        detailsStyle: {
+          marginLeft: "24px",
+        }
+      }
+    },
+    elements: [
+      {
+        type: "Control",
+        scope: `#/properties/${childScope}`,
 
-            options: {
-              widget: "InputField",
-            },
-            config: {
-              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-              main: {
-                label: childLabel || "Labels for Tab",
-              },
-            },
+        options: {
+          widget: "InputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, 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("ArrayControlEmpty1", {xs: 6, sm: 6, md: 8, lg: 8 }),
+    ],
   }
 };
 const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
-sizeHolder.options.detail.elements[1] = {
+sizeHolder.elements[1] = {
   type: "Control",
   scope: `#/properties/value`,
 
@@ -121,7 +144,7 @@ sizeHolder.options.detail.elements[1] = {
     },
   },
 };
-sizeHolder.options.detail.elements[2] = emptyBox("sizeHolderempty")
+sizeHolder.elements[2] = emptyBox("sizeHolderempty")
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -131,7 +154,7 @@ const getInputField = (scope: String, label: String) => {
       widget: "InputField",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         label: label,
       },
@@ -148,7 +171,7 @@ export const getRadioInputField = (scope: String, label: String, options: string
       widget: "RadioInputField",
     },
     config: {
-      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 3 },
       main: {
         label: label,
 
@@ -165,16 +188,6 @@ export const buildWrapper = (label: string, elements: any[]) => {
         label: label || "Details",
         isAccordion: true,
       },
-      wrapperStyle: {
-        marginTop: '-6px',
-        marginBottom: '-8px',
-        marginLeft: "-34px",
-        width: "108%"
-      },
-      componentsBoxStyle: {
-        marginLeft: "12px",
-      },
-      defaultStyle: true
     },
     elements: elements || []
   }
@@ -189,22 +202,8 @@ export const getTextArea = (scope: string, heading: string, hideButton: boolean,
     },
     config: {
       layout: layout || 12,
-      style: {
-        containerStyle: {
-          borderRadius: "20px",
-        },
-        headerContainerStyle: {
-
-        },
-        textAreaStyle: {
-          borderRadius: "20px",
-          padding: "20px"
-          // background:"black",
-          // color:"white"
-        }
-      },
       main: {
-        heading: heading,
+        label: heading,
         minRows: 8,
         hideButton: hideButton,
         enableCodeEditor: true
@@ -221,7 +220,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: 6, sm: 6, md: 4, lg: 3 },
       main: {
         label: label,
         type: "text",
@@ -239,7 +238,7 @@ export const getMultiSelectField = (scope: string, label: string) => {
       widget: "MultipleSelect",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         multiple: true,
         label: label,
@@ -250,13 +249,19 @@ export const getMultiSelectField = (scope: string, label: string) => {
 }
 
 
-const GraphSection = {
+const BaseSection = {
   type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
   elements: [],
 };
 
 export const buildPropertiesSection = function (type: String) {
-  let uiSchema = _.cloneDeep(GraphSection);
+  let uiSchema = _.cloneDeep(BaseSection);
   switch (type) {
 
     case "TreeMap":
@@ -317,7 +322,7 @@ export const buildPropertiesSection = function (type: String) {
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox("TextEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
+        getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
         emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ]
@@ -327,6 +332,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("enableCodeEditor", "Enable Code Editor",["YES", "NO"]),
         getInputField("codeEditorLanguage", "Enter Code Language"),
+        emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 0, lg: 3 }),
       ]
       break;
 
@@ -413,7 +419,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("xAxisValue", "X-AxisValue"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 8 }),
+        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 6 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];

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

@@ -16,21 +16,25 @@ export const EventSection = (theme)=>{
                   widget: {
                     type: "Control",
                     scope: "#/properties/New_Record",
-  
                     options: {
                       widget: "IconButton",
                     },
                     config: {
                       main: {
-                        color: "info",
                         onClick: "eventAddHandler",
                         size: "small",
-                        icon: "AddIcon",
-                        iconLabel: "Add New",
+                        icon: "TableAddIcon",
+                        iconLabel: "Add",
                         styleDefault: true,
                       },
                       style: {
                         mt: "6px",
+                        color: "inherit",
+                        fill: "inherit",
+                        "&:hover": {
+                          color: "inherit",
+                          fill: "inherit",
+                        }
                       },
                     },
                   }
@@ -45,15 +49,20 @@ export const EventSection = (theme)=>{
                     },
                     config: {
                       main: {
-                        // color: "info",
                         onClick: "copyPasteElement",
                         size: "small",
-                        icon: "PasteIcon",
+                        icon: "TablePaste",
                         iconLabel: "Paste",
                         styleDefault: true,
                       },
                       style: {
                         mt: "6px",
+                        color: "inherit",
+                        fill: "inherit",
+                        "&:hover": {
+                          color: "inherit",
+                          fill: "inherit",
+                        }
                       },
                     },
                   }
@@ -70,16 +79,21 @@ export const EventSection = (theme)=>{
               
           {
             accessorKey: "eventType",
-            header: "Event Type",
+            header: "Event's Type",
+            type: "string",
+            size: 300,
           },
           {
             accessorKey: "Handler",
             header: "Handler",
+            type: "string",
+            size: 200,
           },
           {
             accessorKey: "Edit_Approve_Records",
-            header: "Edit Widget",
-
+            header: "Edit",
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/Edit_Records",
@@ -88,14 +102,16 @@ export const EventSection = (theme)=>{
               },
               config: {
                 main: {
-                  color: "info",
                   size: "small",
-                  icon: "EditIcon",
+                  icon: "TableEditIcon",
                   tooltipMessage: "Edit This Record",
                   onClick: "eventEditHandler",
                 },
                 style: {
-                  color: theme.palette.primary.main,
+                  fill: theme.palette.primary.main,
+                  "& :hover": {
+                    fill: theme.palette.primary.dark,
+                  },
                 },
               },
             },
@@ -103,7 +119,8 @@ export const EventSection = (theme)=>{
           {
             accessorKey: "Reject_Records",
             header: "Delete",
-
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/RejectButton",
@@ -113,18 +130,24 @@ export const EventSection = (theme)=>{
               },
               config: {
                 main: {
-                  icon: "RejectIcon",
-                  color: "error",
+                  icon: "Bin",
                   tooltipMessage: "Reject This Record",
                   onClick: "deletePopUpEvent",
                 },
+                style: {
+                  fill: theme.palette.primary.main,
+                  "& :hover": {
+                    fill: theme.palette.primary.dark,
+                  },
+                },
               },
             },
           },
           {
             header: "Copy",
             field: "Copy_Event",
-            flex: 1,
+            size: 150,
+            type: "action",
             widget: {
               type: "Control",
               scope: "#/properties/Copy_Event",
@@ -134,7 +157,6 @@ export const EventSection = (theme)=>{
               config: {
                 main: {
                   icon: "FileCopyIcon",
-                  // color: "error",
                   onClick: "copyPasteElement",
                   tooltipMessage: "Reject This Record",
                   styleDefault: true,

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

@@ -6,56 +6,56 @@ export const refreshSectionUiSchema = {
     {
       type: "Control",
       scope: "#/properties/refreshElements",
-      layout: 11.5,
       options: {
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/value",
-
-              options: {
-                widget: "InputField",
-              },
-              config: {
-                layout: { xs: 12, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Value",
-                },
-              },
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
+        widget: "Array",
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Refresh Elements",
+          childElementLabel: "Refresh Elements",
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/value",
 
-              options: {
-                widget: "EmptyBox",
-              },
-              config: {
-                layout: { xs: 0, sm: 6, md: 4, lg: 4 },
-                main: {
-                 
-                },
-              },
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
             },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
 
-              options: {
-                widget: "EmptyBox",
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-                main: {
-                 
-                },
-              },
+          options: {
+            widget: "EmptyBox",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 8, lg: 8 },
+            main: {
+              
             },
-          ],
+          },
         },
-      },
+      ],
     }
   ],
 };

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

@@ -1,5 +1,11 @@
 export const StyleSection = {
-    type: "HorizontalLayout",
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
     elements: [
       {
         type: "Control",
@@ -15,18 +21,8 @@ export const StyleSection = {
             md: 12,
             lg: 12,
           },
-          style:{
-            containerStyle:{
-              // background:"gray"
-              borderRadius:"20px"
-            },
-            headerContainerStyle:{
-              
-            },
-            textAreaStyle:{
-             borderRadius:"20px",
-             padding:"20px"
-            }
+          style: {
+            "& .MuiFormLabel-root:not(.MuiInputLabel-shrink)": {},
           },
           main: {
             heading:"JSON Style",