impaktapps-ui-builder 0.0.99 → 0.0.101-alpha.1

package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts

@@ -178,6 +178,106 @@ export const componentBasicUiSchema: any = (theme)=>{
         },
       ],
     },
+    {
+      type: "HorizontalLayout",
+      config: {
+        layout:{xs:12,sm: 6}
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/RemoveItemButton",
+          options: {
+            widget: "IconButton",
+          },
+          config: {
+            layout: { xs: 1, sm: 1 },
+            main: {
+              onClick: "RemoveItemButton",
+              size: "large",
+              icon: "RejectIcon",
+              styleDefault: true,
+            },
+            style:{
+              marginLeft: "-10px"
+            }
+          },
+        },
+
+        {
+          type: "Control",
+          scope: "#/properties/copiedElementDetails",
+    
+          options: {
+            widget: "Box",
+          },
+          config: {
+            layout: { xs: 6, sm: 6 },
+            main: {
+              heading: "No element copied",
+            },
+            style: {
+              color: "#535557",
+              marginLeft: "-10px",
+              fontSize: "12px",
+              marginTop: "4px"
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          options: {
+            widget: "EmptyBox",
+          },
+          config: {
+            layout: { xs: 1, sm: 5 },
+          },
+        },
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btn",
+      options: {
+        widget: "Button",
+      },
+
+      config: {
+        layout: { xs: 4, sm: 2 },
+        main: {
+          name: "Ok",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          // color: "info",
+          type: "text",
+          onClick: "okHandler",
+          size: "medium",
+        },
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btnSubmit",
+      options: {
+        widget: "Button",
+      },
+
+      config: {
+        layout: { xs: 4, sm: 2 },
+        main: {
+          name: "Save & Exit",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          // color: "info",
+          type: "text",
+          onClick: "saveHandler",
+          size: "medium",
+        },
+      },
+    },
+
+
     {
       type: "Control",
       scope: "#/properties/popUpComponentSection",
@@ -192,82 +292,115 @@ export const componentBasicUiSchema: any = (theme)=>{
           lg: 12,
         },
         main: {
+          title: "WARNING!"
         },
         style: {
-          "& .MuiPaper-root":{
-            width: '30%',
-          },
-          "& .MuiTypography-root":{
-            padding: 0
-          },
         }
       },
       elements:
         [
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/popupText",
             options: {
               widget: "Box",
             },
             config: {
-              layout: 12,
+              layout: 11,
               main: {
                 heading: "Are you sure you want to delete ?",
               },
               style:{
-                marginTop: "-40px"
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
               }
             },
           },
           {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox",
-            },
+            type: "WrapperLayout",
             config: {
-              main:{},
-              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 },
-            },
-          },
-          {
-            type: "Control",
-            scope: "#/properties/ConfirmDeleteCompButton",
-            options: {
-              widget: "Button",
+              layout: 11,
+              main: {},
+
             },
-            config: {
-              layout: 3,
-              main: {
-                name: "Yes",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "error",
-                type: "text",
-                onClick: "deleteComponents",
-                size: "small",
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteCompButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpComponent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
               },
-            },
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteCompButton",
-            options: {
-              widget: "Button",
-            },
-            config: {
-              layout: 3,
-              main: {
-                name: "No",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deletePopUpComponent",
-                size: "small",
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteCompButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteComponents",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
               },
-            },
+            ]
           },
         ]
     },
@@ -285,134 +418,117 @@ export const componentBasicUiSchema: any = (theme)=>{
           lg: 12,
         },
         main: {
+          title: "WARNING!"
         },
         style: {
-          "& .MuiPaper-root":{
-            width: '30%',
-          },
-          "& .MuiTypography-root":{
-            padding: 0
-          },
         }
       },
       elements:
         [
           {
             type: "Control",
-            scope: "#/properties/label",
+            scope: "#/properties/popupText1",
             options: {
               widget: "Box",
             },
             config: {
-              layout: 12,
+              layout: 11,
               main: {
                 heading: "Are you sure you want to delete ?",
               },
               style:{
-                marginTop: "-40px"
+                marginTop: "-20px",
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "10px 30px 20px 30px",
+                  textAlign: "center",
+                  lineHeight: "1"
+                }
               }
             },
           },
           {
-            type: "Control",
-            scope: "#/properties/EmptyBox",
-            options: {
-              widget: "EmptyBox",
-            },
+            type: "WrapperLayout",
             config: {
-              main:{},
-              layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 },
-            },
-          },
-          {
-            type: "Control",
-            scope: "#/properties/ConfirmDeleteEventButton",
-            options: {
-              widget: "Button",
+              layout: 11,
+              main: {},
+
             },
-            config: {
-              layout: 3,
-              main: {
-                name: "Yes",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deleteEvent",
-                size: "small",
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteEventButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "info",
+                    type: "text",
+                    onClick: "deletePopUpEvent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
               },
-            },
-          },
-          {
-            type: "Control",
-            scope: "#/properties/CancelDeleteEventButton",
-            options: {
-              widget: "Button",
-            },
-            config: {
-              layout: 3,
-              main: {
-                name: "No",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                color: "info",
-                type: "text",
-                onClick: "deletePopUpEvent",
-                size: "small",
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteEventButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    startIcon: "ApproveIcon",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteEvent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
               },
-            },
+            ]
           },
         ]
-      },
-    {
-      type: "Control",
-      scope: "#/properties/EmptyBox",
-      options: {
-        widget: "EmptyBox",
-      },
-      config: {
-        layout: { xs: 4, sm: 8 },
-      },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btn",
-      options: {
-        widget: "Button",
-      },
-
-      config: {
-        layout: { xs: 4, sm: 2 },
-        main: {
-          name: "Ok",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          // color: "info",
-          type: "text",
-          onClick: "okHandler",
-          size: "medium",
-        },
-      },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btnSubmit",
-      options: {
-        widget: "Button",
-      },
-
-      config: {
-        layout: { xs: 4, sm: 2 },
-        main: {
-          name: "Save & Exit",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          // color: "info",
-          type: "text",
-          onClick: "saveHandler",
-          size: "medium",
-        },
-      },
     },
     {
       type: "Control",
@@ -422,26 +538,130 @@ export const componentBasicUiSchema: any = (theme)=>{
       },
       layout: 6,
     },
+    // {
+    //   type: "HorizontalLayout",
+    //   config: {
+    //     main: {
+    //       direction: 'row'
+    //     },
+    //     style: {
+    //       flexDirection: "row",
+    //       position: "absolute",
+    //       bottom: 0,
+    //       marginBottom: '-8px',
+    //       height: 'fit-content',
+    //       overflow: 'hidden',
+    //       zIndex: 1000,
+    //       width: 'inherit'
+    //     }
+    //   },
+    //   elements: [
+    //     {
+
+    //       type: "Control",
+    //       scope: "#/properties/FooterText",
+    //       options: {
+    //         widget: "Box",
+    //       },
+    //       config: {
+    //         main: {
+    //           heading: "Copywriter@ACT21.IO"
+    //         },
+    //         style: {
+    //           color: theme?.palette?.text.disabled || "#AFAFAF",
+    //           fontSize: '11px',
+    //           textAlign: 'center',
+    //           lineHeight: 2,
+    //           width: 'fit-content',
+    //           left: '50%',
+    //           position: 'relative',
+    //           margin: 0,
+    //           flexGrow: 1,
+    //           height: 0,
+    //           transform: "translate(-50%,0%)"
+    //         }
+    //       },
+    //     },
+    //     {
+    //       type: "Control",
+    //       scope: "#/properties/backIcon",
+    //       options: {
+    //         widget: "Box",
+    //       },
+    //       config: {
+    //         main: {
+    //           iconName: 'PrevIcon',
+    //           onClick: "backHandler",
+    //           width: 'fit-content',
+    //         },
+    //         style: {
+    //           fill: theme.palette.primary.main,
+    //           width: 20,
+    //           height: 0,
+    //           margin: 0,
+    //           top: 0,
+    //           right: {xs: '12px', sm: '84px'},
+    //           position: 'absolute',
+    //           fontSize: '12px',
+    //           cursor: 'pointer',
+    //           ':hover': {
+    //             fill: theme.palette.primary.dark,
+    //           }
+    //         }
+    //       }
+    //     },
+    //     {
+    //       type: "Control",
+    //       scope: "#/properties/text",
+
+    //       options: {
+    //         widget: "Box",
+    //       },
+    //       config: {
+    //         main: {
+    //           heading: "Previous Page",
+    //           onClick: "backHandler"
+    //         },
+    //         style: {
+    //           display: {xs: 'none', sm: "flex"},
+    //           textAlign: 'left',
+    //           lineHeight: 1,
+    //           height: 0,
+    //           width: 'fit-content',
+    //           color: theme.palette.primary.main,
+    //           fontSize: "12px",
+    //           cursor: 'pointer',
+    //           marginLeft: '2px',
+    //           marginRight: 0,
+    //           top: 3,
+    //           right: '12px',
+    //           position: 'absolute',
+    //           ':hover': {
+    //             color: theme.palette.primary.dark,
+    //           }
+    //         }
+    //       },
+    //     },
+    //   ]
+    // }
     {
       type: "HorizontalLayout",
       config: {
         main: {
-          direction: 'row'
+          direction: "row",
         },
         style: {
           flexDirection: "row",
           position: "absolute",
           bottom: 0,
-          marginBottom: '-8px',
-          height: 'fit-content',
-          overflow: 'hidden',
+          height: "fit-content",
+          overflow: "hidden",
           zIndex: 1000,
-          width: 'inherit'
-        }
+          width: "inherit",
+        },
       },
       elements: [
         {
-
           type: "Control",
           scope: "#/properties/FooterText",
           options: {
@@ -449,83 +669,85 @@ export const componentBasicUiSchema: any = (theme)=>{
           },
           config: {
             main: {
-              heading: "Copywriter@ACT21.IO"
+              heading: "Copywriter@ACT21.IO",
             },
             style: {
-              color: theme?.palette?.text.disabled || "#AFAFAF",
-              fontSize: '12px',
-              textAlign: 'center',
-              lineHeight: 1,
-              width: 'fit-content',
-              left: '50%',
-              position: 'relative',
+              color: theme?.palette?.text?.disabled || "#AFAFAF",
+              fontSize: "11px",
+              textAlign: "center",
+              lineHeight: 2,
+              width: "fit-content",
+              left: "50%",
+              position: "relative",
               margin: 0,
               flexGrow: 1,
-              height: 0
-            }
+              height: 0,
+              transform: "translate(-50%, 0%)",
+            },
           },
         },
         {
           type: "Control",
-          scope: "#/properties/backIcon",
+          scope: "#/properties/FooterBackIcon",
           options: {
             widget: "Box",
           },
           config: {
             main: {
-              iconName: 'PrevIcon',
+              iconName: "PrevIcon",
               onClick: "backHandler",
-              width: 'fit-content',
+              width: "fit-content",
             },
             style: {
-              fill: theme.palette.primary.main,
+              fill: theme?.palette?.primary?.main,
               width: 20,
               height: 0,
-              margin: 0,
+              // margin: 0,
               top: 0,
-              right: {xs: '12px', sm: '84px'},
-              position: 'absolute',
-              fontSize: '12px',
-              cursor: 'pointer',
-              ':hover': {
-                fill: theme.palette.primary.dark,
-              }
-            }
-          }
+              right: { xs: "12px", sm: "84px" },
+              position: "absolute",
+              fontSize: "12px",
+              cursor: "pointer",
+              ":hover": {
+                fill: theme?.palette?.primary?.dark,
+              },
+              marginRight: "20px",
+            },
+          },
         },
         {
           type: "Control",
-          scope: "#/properties/text",
-
+          scope: "#/properties/FooterBackHandlerText",
           options: {
             widget: "Box",
           },
           config: {
             main: {
               heading: "Previous Page",
-              onClick: "backHandler"
+              onClick: "backHandler",
             },
             style: {
-              display: {xs: 'none', sm: "flex"},
-              textAlign: 'left',
+              display: { xs: "none", sm: "flex" },
+              textAlign: "left",
               lineHeight: 1,
               height: 0,
-              width: 'fit-content',
-              color: theme.palette.primary.main,
+              width: "fit-content",
+              color: theme?.palette?.primary?.main,
               fontSize: "12px",
-              cursor: 'pointer',
-              marginLeft: '2px',
-              marginRight: 0,
+              cursor: "pointer",
+              marginLeft: "2px",
+    
               top: 3,
-              right: '12px',
-              position: 'absolute',
-              ':hover': {
-                color: theme.palette.primary.dark,
-              }
-            }
+              right: "12px",
+              position: "absolute",
+              ":hover": {
+                color: theme?.palette?.primary?.dark,
+              },
+              marginRight: "4px",
+            },
           },
         },
-      ]
+      ],
     }
   ],
 };