impaktapps-ui-builder 0.0.596 → 0.0.751

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

@@ -41,6 +41,7 @@ export const ComponentSchema: any = {
         { title: "Upload File", const: "UploadFile" },
         { title: "TreeMap", const: "TreeMap" },
         { title: "ColumnGroup", const: "ColumnGroup" },
+        { title: "Thought of the Day", const: "Thought" },
       ]
     },
     columnFormat: {
@@ -69,7 +70,7 @@ export const ComponentSchema: any = {
       type: "array",
       items: {
         type: "object",
-        properties: {
+        properties: { 
           key: {
             type: "string",
             oneOf: [
@@ -190,6 +191,36 @@ export const ComponentSchema: any = {
         },
       },
     },
+    enableColumnFilter:{
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          keyName: {
+            type: "string",
+          },
+        },
+      },
+    },
+    filteringOptions:{
+      type: "array",
+      items:{
+        oneOf: [
+          { const: 'fuzzy', title: 'Fuzzy' },
+          { const: 'contains', title: 'Contain' },
+          { const: 'startsWith', title: 'Starts with' },
+          { const: 'endsWith', title: 'Ends with' },
+          { const: 'equals', title: 'Equals' },
+          { const: 'notEquals', title: 'Not Equals' },
+          { const: 'between', title: 'Between' },
+          { const: 'betweenInclusive', title: 'Between inclusive' },
+          { const: 'greaterThan', title: 'Greater than' },
+          { const: 'greaterThanOrEqualTo', title: 'Greater than or equal to' },
+          { const: 'lessThan', title: 'Less than' },
+          { const: 'lessThanOrEqualTo', title: 'Less than or equal to' },
+        ]
+      },
+    },
     legendLabels: {
       type: "array",
       items: {
@@ -273,6 +304,7 @@ export const ComponentSchema: any = {
         { title: "Line Graph", const: "LineGraph" },
         { title: "Pie Graph", const: "PieGraph" },
         { title: "Horizontal Bar Graph", const: "HorizontalBarGraph" },
+        { title: "Stack Horizontal Bar Graph", const: "HorizontalStackBarGraph" }
       ]
     },
     iconName: {
@@ -310,7 +342,10 @@ export const ComponentSchema: any = {
     name: {
       type: "string",
     },
-    label: { type: 'string' }
+    label: { type: 'string' },
+    RemoveItemButton:{
+      disabled: true,
+    },
   },
 
   required: ["name",]

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

@@ -45,7 +45,7 @@ export const componentBasicUiSchema: any = (theme)=>{
                 widget: "SelectInputField",
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Type",
                 },
@@ -59,7 +59,7 @@ export const componentBasicUiSchema: any = (theme)=>{
                 widget: "InputField",
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Name",
                   options: [],
@@ -76,7 +76,7 @@ export const componentBasicUiSchema: any = (theme)=>{
                 widget: "InputField",
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Label",
                   options: [],
@@ -92,7 +92,7 @@ export const componentBasicUiSchema: any = (theme)=>{
                 widget: "SelectInputField",
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                 main: {
                   label: "Column Format",
         
@@ -103,7 +103,7 @@ export const componentBasicUiSchema: any = (theme)=>{
               type: "Control",
               scope: "#/properties/proc",
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
               },
               options: {
                 widget: "EmptyBox",
@@ -113,7 +113,7 @@ export const componentBasicUiSchema: any = (theme)=>{
               type: "Control",
               scope: "#/properties/proc",
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
               },
               options: {
                 widget: "EmptyBox",
@@ -134,7 +134,7 @@ export const componentBasicUiSchema: any = (theme)=>{
                         widget: "SelectInputField",
                       },
                       config: {
-                        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                         main: {
                           label: "Screen Size",
                         
@@ -149,7 +149,7 @@ export const componentBasicUiSchema: any = (theme)=>{
                         widget: "InputField",
                       },
                       config: {
-                        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
                         main: {
                           label: "Value",
                           type:"number",
@@ -164,7 +164,7 @@ export const componentBasicUiSchema: any = (theme)=>{
                       type: "Control",
                       scope: "#/properties/proc",
                       config: {
-                        layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
                       },
                       options: {
                         widget: "EmptyBox",
@@ -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,21 +292,16 @@ 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",
             },
@@ -216,58 +311,96 @@ export const componentBasicUiSchema: any = (theme)=>{
                 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: 12,
+              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,21 +418,16 @@ 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",
             },
@@ -309,127 +437,98 @@ export const componentBasicUiSchema: any = (theme)=>{
                 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: 12,
+              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: 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/btn",
-      options: {
-        widget: "Button",
-      },
-
-      config: {
-        layout: 1.8,
-        main: {
-          name: "Ok",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          // color: "info",
-          type: "text",
-          onClick: "okHandler",
-          size: "medium",
-        },
-        style: {
-          float: "right",
-        },
-      },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/btnSubmit",
-      options: {
-        widget: "Button",
-      },
-
-      config: {
-        layout: 1.8,
-        main: {
-          name: "Save & Exit",
-          startIcon: "ApproveIcon",
-          variant: "contained",
-          // color: "info",
-          type: "text",
-          onClick: "saveHandler",
-          size: "medium",
-        },
-        style: {
-          float: "right",
-        },
-      },
     },
     {
       type: "Control",
@@ -472,13 +571,14 @@ export const componentBasicUiSchema: any = (theme)=>{
               color: theme?.palette?.text.disabled || "#AFAFAF",
               fontSize: '12px',
               textAlign: 'center',
-              lineHeight: 1,
+              lineHeight: 2,
               width: 'fit-content',
               left: '50%',
               position: 'relative',
               margin: 0,
               flexGrow: 1,
-              height: 0
+              height: 0,
+              transform: "translate(-50%,0%)"
             }
           },
         },
@@ -500,7 +600,7 @@ export const componentBasicUiSchema: any = (theme)=>{
               height: 0,
               margin: 0,
               top: 0,
-              right: '90px',
+              right: {xs: '12px', sm: '84px'},
               position: 'absolute',
               fontSize: '12px',
               cursor: 'pointer',
@@ -523,6 +623,7 @@ export const componentBasicUiSchema: any = (theme)=>{
               onClick: "backHandler"
             },
             style: {
+              display: {xs: 'none', sm: "flex"},
               textAlign: 'left',
               lineHeight: 1,
               height: 0,
@@ -533,7 +634,7 @@ export const componentBasicUiSchema: any = (theme)=>{
               marginLeft: '2px',
               marginRight: 0,
               top: 3,
-              right: '20px',
+              right: '12px',
               position: 'absolute',
               ':hover': {
                 color: theme.palette.primary.dark,