impaktapps-ui-builder 0.0.382-alpha.552 → 0.0.382-alpha.56

package/dist/src/impaktapps-ui-builder/builder/build/uischema/valueTab.d.ts

@@ -7,7 +7,7 @@ export declare const ValueTab: {
         options: {
             detail: {
                 type: string;
-                elements: {
+                elements: ({
                     type: string;
                     scope: string;
                     options: {
@@ -24,7 +24,22 @@ export declare const ValueTab: {
                             label: string;
                         };
                     };
-                }[];
+                } | {
+                    type: string;
+                    scope: string;
+                    options: {
+                        widget: string;
+                    };
+                    config: {
+                        layout: {
+                            xs: number;
+                            sm: number;
+                            md: number;
+                            lg: number;
+                        };
+                        main?: undefined;
+                    };
+                })[];
             };
         };
     }[];

package/dist/src/impaktapps-ui-builder/builder/services/component.d.ts

@@ -8,13 +8,11 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
     saveHandler: () => Promise<void>;
     onChange: () => void;
     editComponents: () => void;
-    deleteComponents: (shouldUpdateDialog?: boolean) => void;
-    deleteEvent: (shouldUpdateDialog?: boolean) => void;
+    deleteComponents: () => void;
+    deleteEvent: () => void;
     widgetAddClickHandler: () => void;
     eventEditHandler: () => void;
     eventAddHandler: () => void;
     backHandler: () => void;
-    deletePopUpComponent: () => void;
-    deletePopUpEvent: () => void;
 };
 export default _default;

package/dist/src/impaktapps-ui-builder/builder/services/event.d.ts

@@ -2,7 +2,7 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
     setPage: () => Promise<void>;
     refreshPage: (handlerType: any, store: any) => void;
     getFormData: () => any;
-    getUiSchema: () => any;
+    getUiSchema: () => Promise<any>;
     getSchema: () => {
         type: string;
         properties: {
@@ -81,8 +81,7 @@ declare const _default: (store: any, dynamicData: any, submitHandler: any, servi
     onChange: () => void;
     addEvent: () => void;
     editEvent: () => void;
-    deleteEvent: () => Promise<void>;
+    deleteEvent: () => void;
     backHandler: () => void;
-    deletePopUpEvent: () => void;
 };
 export default _default;

package/dist/src/impaktapps-ui-builder/builder/services/pageMaster.d.ts

@@ -51,11 +51,9 @@ declare const _default: (funcParams: funcParamsProps) => {
     onAddClickHandler: () => void;
     saveHandler: () => Promise<void>;
     Edit_Components: () => void;
-    Delete_Components: () => Promise<void>;
+    Delete_Components: () => void;
     eventAddHandler: () => void;
     editEvent: () => void;
     deleteEvent: () => void;
-    deletePopUpComponent: () => void;
-    deletePopUpEvent: () => void;
 };
 export default _default;

package/dist/src/impaktapps-ui-builder/runtime/services/service.d.ts

@@ -19,6 +19,7 @@ declare const _default: (funcParams: funcParamsProps) => {
     updateConfigApiBody: (paramValue: any, apiBody: any) => Promise<any>;
     onBack: (functionParameters: any) => Promise<void>;
     onNext: (functionParameters: any) => Promise<void>;
+    backHandler: () => void;
     onReset: (functionParameters: any) => Promise<void>;
     callHandler: (eventType: string, functionParameters?: any) => Promise<void>;
     downloadFile: (obj: any) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.382-alpha.552",
+    "version": "0.0.382-alpha.56",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -2,5 +2,6 @@ export const buildBasicUiSchema = (config)=>{
     return  {
         "type": "HorizontalLayout",
         pageName:`${config.name}`,
+        heading:`${config.label}`,
         "elements": []}
     }

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

@@ -3,33 +3,37 @@ import { HorizontalBarGraph } from "./uischema/graph";
 import _ from "lodash";
 
 
-const buildHorizontalBarGraph = (config:any,componentScope:string) => {
-    const horizontalBarGraph: any = _.cloneDeep(HorizontalBarGraph);
-    horizontalBarGraph.scope = componentScope;
-    if (config.layout) {
-      horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
+const buildHorizontalBarGraph = (config: any, componentScope: string) => {
+  const horizontalBarGraph: any = _.cloneDeep(HorizontalBarGraph);
+  horizontalBarGraph.scope = componentScope;
+  if (config.layout) {
+    horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
+  }
+  horizontalBarGraph.scope = componentScope;
+  horizontalBarGraph.config.main.header = config.heading;
+  if (config.barColor) {
+    horizontalBarGraph.config.barStyle.color = config.barColor;
+  }
+  if (config.containerBackground) {
+    horizontalBarGraph.config.containerStyle.background =
+      config.containerBackground;
+  }
+  if (config.height) {
+    horizontalBarGraph.config.style =
+    {
+      containerStyle: {
+        height: config.height
+      }
     }
-    horizontalBarGraph.scope = componentScope;
-    horizontalBarGraph.config.main.header = config.heading;
-    if (config.barColor) {
-      horizontalBarGraph.config.barStyle.color = config.barColor;
-    }
-    if (config.containerBackground) {
-      horizontalBarGraph.config.containerStyle.background =
-        config.containerBackground;
-    }
-    if (config.height) {
-      horizontalBarGraph.config.style.containerStyle.height =
-        config.height;
-    }
-    if (config.bottomLabel) {
-      horizontalBarGraph.config.main.bottomLabel =
-        config.bottomLabel;
-    }
-    if (config.leftLabel) {
-      horizontalBarGraph.config.main.leftLabel = config.leftLabel;
-    }
-    return horizontalBarGraph
+  }
+  if (config.bottomLabel) {
+    horizontalBarGraph.config.main.bottomLabel =
+      config.bottomLabel;
+  }
+  if (config.leftLabel) {
+    horizontalBarGraph.config.main.leftLabel = config.leftLabel;
+  }
+  return horizontalBarGraph
 }
 
 export default buildHorizontalBarGraph

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

@@ -2,26 +2,35 @@ import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
 import { PieGraph } from "./uischema/graph";
 import _ from "lodash";
 // flatObjectValueInArray
-export const buildPieGraph = (config,componentScope) =>{
-    const pieGraph: any = _.cloneDeep(PieGraph);
-    if (config.layout) {
-      pieGraph.config.layout = createLayoutFormat(config.layout);
+export const buildPieGraph = (config, componentScope) => {
+  const pieGraph: any = _.cloneDeep(PieGraph);
+  if (config.layout) {
+    pieGraph.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.height) {
+    pieGraph.config.style =
+    {
+      containerStyle: {
+        height: config.height
+      }
+    };
+  }
+  if (config.legendHide) {
+    pieGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
+  }
+  pieGraph.scope = componentScope;
+  pieGraph.config.main.header = config.heading;
+
+  if (config.legendLabels) {
+    pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
+  }
+
+  if (config.pieArcColors) {
+    pieGraph.config.style = {
+      pieStyle: {
+        colorRange: flatObjectValueInArray(config.pieArcColors)
+      }
     }
-    if (config.height) {
-      pieGraph.config.style.containerStyle.height = config.height;
-    }
-    if (config.legendHide) {
-      pieGraph.config.main.legendAvailabe = config.legendHide==="YES"?false:true;
-    }
-    pieGraph.scope = componentScope;
-    pieGraph.config.main.header = config.heading;
-  
-      if(config.legendLabels){
-        pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
-        }
-    
-        if(config.pieArcColors){
-          pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
-          }
-    return pieGraph;
+  }
+  return pieGraph;
 }

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

@@ -8,17 +8,17 @@ 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.containerBackground) {
+    //   barGraph.config.containerStyle.background =
+    //     config.containerBackground;
+    // }
     if (config.height) {
       barGraph.config.style.containerStyle.height = config.height;
     }
@@ -28,6 +28,6 @@ export const buildStackbarGraph = (config:any,componentScope:string) => {
     if (config.leftLabel) {
       barGraph.config.main.leftLabel = config.leftLabel;
     }
-    barGraph.scope = componentScope;
+    // barGraph.scope = componentScope;
     return barGraph;
 } 

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

@@ -4,8 +4,10 @@ import _ from "lodash";
 
 export const buildWrapperSection = (config,componentScope) =>{
     const wrapper: any = _.cloneDeep(WrapperSection);
+    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;
     if (config.style) {
         wrapper.config.style = JSON.parse(config.style)
       }
@@ -13,4 +15,4 @@ export const buildWrapperSection = (config,componentScope) =>{
         wrapper.config.layout = createLayoutFormat(config.layout)
       }
     return wrapper;
-}
+}

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,17 +78,13 @@ 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
         ],
       },
@@ -118,12 +100,7 @@ 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",
     },
@@ -138,12 +115,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 +132,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 +183,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 +208,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
+        EmptyBox,
+        EmptyBox,
         cardLayout,
       ]
       break;
@@ -254,7 +223,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Horizontal", value: "horizontal" },
           { label: "Vertical", value: "vertical" },
         ]),
-
+        EmptyBox,
         getArrayControl("sectionLabels", "label")
 
       ]
@@ -271,13 +240,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 +257,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 +266,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 +277,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 +292,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 +337,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"]), getRadioInputField("isAccordion", "Accordion", ["YES", "No"]), EmptyBox]
       break;
 
     case "TabSection":
@@ -388,11 +367,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/card.ts

@@ -4,16 +4,15 @@ export default {
       main: {
         rowSpacing: 0.5,
       },
-      style: {
-        wrapperStyle: {
-          position : "relative",
-          color: "white",
-          height: {xs:"120px",md:"160px"},
-          width: "100%",
-          textAlign: "left",
-          background: "#3f51b5",
-          borderRadius: "20px",
-        },
+      
+      componentsBoxStyle: {
+        position : "relative",
+        color: "white",
+        height: {xs:"120px",md:"160px"},
+        width: "100%",
+        textAlign: "left",
+        background: "#3f51b5",
+        borderRadius: "20px",
       },
    layout: { xs: 12, sm: 12,md: 6,lg: 6, },},
     elements: [