impaktapps-ui-builder 1.0.173 → 1.0.180

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

@@ -127,6 +127,62 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
     ],
   }
 };
+const getArrayControlMultiField = (parentScope: string, firstFieldScope: string, secondFieldScope: string, firstFieldLabel?: string, secondFieldLabel?: string, arrayLabel?: string) => {
+  return {
+    type: "Control",
+    scope: `#/properties/${parentScope}`,
+    options: {
+      widget: "Array"
+    },
+    config: {
+      layout: 12,
+      main: {
+        label: arrayLabel,
+      },
+      style: {
+        marginLeft: "-24px",
+        marginBottom: "24px !important",
+        labelStyle: {
+          marginLeft: "24px",
+        },
+        detailsStyle: {
+          marginLeft: "24px",
+        }
+      }
+    },
+    elements: [
+      {
+        type: "Control",
+        scope: `#/properties/${firstFieldScope}`,
+
+        options: {
+          widget: "InputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: firstFieldLabel || "Labels for Tab",
+          },
+        },
+      },
+      {
+        type: "Control",
+        scope: `#/properties/${secondFieldScope}`,
+
+        options: {
+          widget: "InputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: secondFieldLabel || "Labels for Tab",
+          },
+        },
+      },
+      emptyBox("ArrayControlEmpty2", { xs: 6, sm: 6, md: 4, lg: 4 }),
+    ],
+  }
+};
 const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
 sizeHolder.elements[1] = {
   type: "Control",
@@ -261,6 +317,15 @@ const BaseSection = {
 export const buildPropertiesSection = function (type: String) {
   let uiSchema = _.cloneDeep(BaseSection);
   switch (type) {
+    case "OTP_Input":
+      uiSchema.elements = [
+        getInputField("seperator", "Seperator"),
+        getInputField("length", "OTP Length"),
+        getRadioInputField("masking", "OTP Masking", ["YES", "NO"]),
+        emptyBox("empty1", { xs: 12, sm: 6, md: 4, lg: 3 }),
+
+      ]
+      break;
     case "Array":
       uiSchema.elements = [
         getRadioInputField("allExpanded", "Initial Expand", ["YES", "NO"]),
@@ -268,6 +333,10 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("disableExpandAllButton", "Disable Expand Buttons", ["YES", "NO"]),
         getRadioInputField("disableRowActions", "Disable Row Actions", ["YES", "NO"]),
         getInputField("childElementLabel", "Child Element Label"),
+        getInputField("showKeyAsLabel", "ShowKey As Label"),
+        getInputField("rowSpacing", "Row Spacing"),
+        getInputField("columnSpacing", "Column Spacing"),
+        getInputField("spacing", "Spacing"),
         emptyBox("empty1", { xs: 12, sm: 6, md: 4, lg: 3 }),
 
       ]
@@ -327,6 +396,34 @@ export const buildPropertiesSection = function (type: String) {
         emptyBox("PopUpEmpty", { xs: 6, sm: 6, md: 0, lg: 0 })
       ]
       break;
+
+    case "PopOver":
+      uiSchema.elements = [
+        getSelectField("positionVertical", "Attach To (Vertical)", [
+          { label: "Top", value: "top" },
+          { label: "Center", value: "center" },
+          { label: "Bottom", value: "bottom" }
+        ]),
+        getSelectField("positionHorizontal", "Attach To (Horizontal)", [
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" },
+          { label: "Right", value: "right" }
+        ]),
+        getSelectField("contentVertical", "Popover Start (Vertical)", [
+          { label: "Top", value: "top" },
+          { label: "Center", value: "center" },
+          { label: "Bottom", value: "bottom" }
+        ]),
+        getSelectField("contentHorizontal", "Popover Start (Horizontal)", [
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" },
+          { label: "Right", value: "right" }
+        ]),
+        getInputField("width", "Width"),
+        getInputField("gap", "Gap"),
+        emptyBox("PopUpEmpty", { xs: 6, sm: 0, md: 8, lg: 6 })
+      ]
+      break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
@@ -343,7 +440,8 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Right", value: "right" },
           { label: "Bottom", value: "bottom" }
         ]),
-        emptyBox("Radio", { xs: 6, sm: 6, md: 8, lg: 9 }),
+        getSelectField("iconName", "Start Icon", []),
+        emptyBox("Radio", { xs: 0, sm: 0, md: 0, lg: 6 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element"),
         getInputField("keyName", "Event Key Name"),
       ]
@@ -411,6 +509,20 @@ export const buildPropertiesSection = function (type: String) {
         emptyBox("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
+    case "MetricCard":
+      uiSchema.elements = [
+        getInputField("url", "Image Url"),
+        getInputField("label", "Label"),
+        getInputField("cardValue", "Value"),
+        getInputField("description", "Description"),
+        getSelectField("growthRate", "Growth Rate", [
+          { label: "Positive", value: "positive" },
+          { label: "Negative", value: "negative" }
+        ]),
+        getInputField("color", "Card Color"),
+        emptyBox("MetricEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 }),
+      ];
+      break;
     case "Button":
       uiSchema.elements = [
         getSelectField("buttonType", "Button Type", []),
@@ -424,6 +536,14 @@ export const buildPropertiesSection = function (type: String) {
         emptyBox("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
       ];
       break;
+    case "ButtonGroup":
+      uiSchema.elements = [
+        getRadioInputField("multiSelect", "Enable multiSelect", ["YES", "No"]),
+        getInputField("size", "Size"),
+        getSelectField("color", "Color", []),
+        emptyBox("ButtonEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
+      ];
+      break;
     case "Box":
       uiSchema.elements = [
         getSelectField("iconName", "Icon Name", []),
@@ -434,36 +554,56 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getInputField("height", "Height"),
         getInputField("heading", "Heading"),
+        getInputField("subHeader", "Sub Header"),
         getSelectField("graphType", "Graph Type", [
           { label: "Bar Graph", value: "BarGraph" },
           { label: "Stack Bar Graph", value: "StackBarGraph" },
           { label: "Line Graph", value: "LineGraph" },
           { label: "Pie Graph", value: "PieGraph" },
           { label: "Horizontal Bar Graph", value: "HorizontalBarGraph" },
-          { label: "Stack Horizontal Bar Graph", value: "HorizontalStackBarGraph" }
+          { label: "Stack Horizontal Bar Graph", value: "HorizontalStackBarGraph" },
+          { label: "Area Graph", value: "AreaGraph" },
+          { label: "StackBar And Line Graph", value: "StackBarLineGraph" }
         ]),
         getInputField("leftLabel", "Left Label"),
+        getInputField("rightLabel", "Right Label"),
         getRadioInputField("disableLeftLabel", "Disable Left Label", ["YES", "No"]),
         getInputField("bottomLabel", "Bottom Label"),
         emptyBox("GraphEmpty1", { xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getRadioInputField("legendDirection", "Legend Direction", ["Row", "Column"]),
-        getInputField("yAxisValue", "Y-AxisValue"),
-        getInputField("xAxisValue", "X-AxisValue"),
+        getInputField("yAxisValue", "Y-Axis Key"),
+        getInputField("xAxisValue", "X-Axis Key"),
+        getSelectField("xAxisType", "X-AxisType", [
+          { label: "Date", value: "date" },
+          { label: "String", value: "string" },
+          { label: "number", value: "number" }
+        ]),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox("GraphEmpty1", { xs: 6, sm: 0, md: 8, lg: 6 }),
-        getArrayControl("legendLabels", "label"),
-        getArrayControl("pieArcColors", "color"),
+        getInputField("yAxisTickCount", "Y Axis TickCount"),
+        getInputField("xAxisTickCount", "X Axis TickCount"),
+        getSelectField("xAxisFormatType", "X Axis Format Type", [
+          { label: "Date and Month", value: "Date and Month" },
+          { label: "Month and Year", value: "Month and Year" }
+        ]),
+        getInputField("growthRateKey", "Growth Rate Key"),
+        getInputField("tooltipUnit", "Tooltip Unit"),
+        getArrayControlMultiField("legendLabels", "key", "value", "Key", "Label", "Configure Bar Labels"),
+        getArrayControlMultiField("pieArcColors", "key", "value", "Key", "Color", "Configure Bar Colors"),
       ];
       break;
     case "WrapperSection":
       uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]),
       getRadioInputField("isAccordion", "Accordion", ["YES", "No"])
         , getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
-      getInputField("rowSpacing", "Row Spacing"),
+
       getRadioInputField("defaultClosed", "Default Closed", ["YES", "No"]),
-      emptyBox("WrapperSectionEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }), emptyBox("WrapperSectionEmpty2")
+      getInputField("rowSpacing", "Row Spacing"),
+      getInputField("columnSpacing", "Column Spacing"),
+      getInputField("spacing", "Spacing"),
+      getInputField("iconUrl", "Icon Url"),
+      emptyBox("WrapperSectionEmpty1", { xs: 0, sm: 0, md: 4, lg: 6 }), emptyBox("WrapperSectionEmpty2")
       ]
       break;
 
@@ -472,7 +612,7 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
         emptyBox("TabEmpty"),
-        getArrayControl("sectionLabels", "label"),
+        getArrayControlMultiField("sectionLabels", "label", "icon", "Label", "Icon")
       ]
       break;
     case "Table":
@@ -511,7 +651,6 @@ export const buildPropertiesSection = function (type: String) {
           getRadioInputField("enableExpanding", "Row Expanding", ["YES", "NO"]),
           // getRadioInputField("enableExpandAll", "Use All Row Expanding", ["YES", "NO"]),
           getRadioInputField("paginateExpandedRows", "Multi Page Expansion", ["YES", "NO"]),
-          getRadioInputField("treeStructure", "Flat Tree Structure", ["YES", "NO"]),
           getRadioInputField("filterFromLeafRows", "Filter from tree rows", ["YES", "NO"]),
           getInputField("defaultColumnSize", "Default Column Size"), , emptyBox("LazyLoadingTableEmpty3")
         ]),
@@ -570,6 +709,12 @@ export const buildPropertiesSection = function (type: String) {
         ])
       ]
       break;
+    case "PdfViewer":
+      uiSchema.elements = [
+        getInputField("scale", "Zoom"),
+        emptyBox("PdfViewer", { xs: 6, sm: 6, md: 8, lg: 9 })
+      ]
+      break;
     case "Date":
       uiSchema.elements = [
         getSelectField("variant", "Variant", [
@@ -584,7 +729,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Right", value: "right" },
           { label: "Bottom", value: "bottom" }
         ]),
-        emptyBox("DateEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 }),
+        emptyBox("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 }),
       ]
       break;
     case "DateTime":
@@ -601,7 +746,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Right", value: "right" },
           { label: "Bottom", value: "bottom" }
         ]),
-        emptyBox("DateTimeEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 }),
+        emptyBox("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 }),
       ]
       break;
     case "Thought":
@@ -613,6 +758,13 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getInputField("imageUrl", "Image URL"),
         getInputField("height", "Image Height"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position", [
+          { label: "Top", value: "top" },
+          { label: "Left", value: "left" },
+          { label: "Right", value: "right" },
+          { label: "Bottom", value: "bottom" }
+        ]),
         emptyBox("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 }),
       ]
       break;
@@ -630,16 +782,20 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Right", value: "right" },
           { label: "Bottom", value: "bottom" }
         ]),
-        emptyBox("FileInputEmpty", { xs: 6, sm: 6, md: 4, lg: 3 })
+        getInputField("chooseButtonLabel", "ChooseButton Label"),
+        getInputField("noFileAvailableMessage", "No Found Message"),
+        getRadioInputField("useLabel", "Use Button", ["YES", "NO"]),
+        getRadioInputField("externalUpload", "External Upload", ["YES", "NO"]),
+        emptyBox("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 }),
       ]
       break;
     case "Camera":
       uiSchema.elements = [
         getSelectField("iconName", "Icon Name", []),
-        getRadioInputField("multiUplaod", "Multiple Uplaod", ["YES", "NO"]), 
+        getRadioInputField("multiUplaod", "Multiple Uplaod", ["YES", "NO"]),
         getSelectField("color", "Color", []),
         getInputField("tooltipMessage", "Tooltip Message"),
-        getSelectField("variant", "Variant",[]),
+        getSelectField("variant", "Variant", []),
         emptyBox("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
       ];
   }

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

@@ -0,0 +1,17 @@
+export default  {
+  type: "Control",
+  scope: "#/properties/buttonGroup",
+  options: {
+    widget: "ButtonGroup",
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+    main: {
+      variant: "contained",
+      styleDefault:false,
+      size: "small",
+    },
+    style: {
+    },
+  },
+};

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

@@ -173,7 +173,6 @@ export const CoreSection = {
             layout: { xs: 6, sm: 6, md: 4, lg: 4 },
             main: {
               label: "Screen Size",
-
             },
           },
         },

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

@@ -11,7 +11,7 @@ export const BarGraph = {
       type: "BarGraph",
       legendLabels: null
     },
-    style: { containerStyle: {},labelStyle:{margin:{}} ,barStyle:{} }
+    style: { containerStyle: {},labelStyle:{margin:{}}}
   },
 };
 
@@ -27,7 +27,7 @@ export const PieGraph = {
       type: "PieGraph",
       legendLabels: null
     },
-    style:{ containerStyle: {},labelStyle:{margin:{}} ,pieStyle:{} }
+    style:{ containerStyle: {},labelStyle:{margin:{}}}
   },
 };
 export const LineGraph = {
@@ -42,7 +42,7 @@ export const LineGraph = {
       type: "LineGraph",
       legendLabels: null
     },
-    style: { containerStyle: {},labelStyle:{margin:{}} ,lineStyle:{} },
+    style: { containerStyle: {},labelStyle:{margin:{}}},
   },
 };
 
@@ -58,6 +58,39 @@ export const HorizontalBarGraph = {
       type: "HorizontalBarGraph",
       legendLabels: null
     },
-    style:{ containerStyle: {},labelStyle:{margin:{}} ,barStyle:{} }
+    style:{ containerStyle: {},labelStyle:{margin:{}} }
   },
 };
+
+export const AreaBarGraph = {
+  type: "Control",
+  scope: "#/properties/graph",
+  options: {
+    widget: "Graph",
+  },
+  config: {
+    layout: {xs :12,sm:12,md:12,lg:12},
+    main: {
+      type: "AreaGraph",
+      legendLabels: null
+    },
+    style:{ containerStyle: {},labelStyle:{margin:{}} }
+  },
+};
+
+export const StackBarLineG = {
+  type: "Control",
+  scope: "#/properties/graph",
+  options: {
+    widget: "Graph",
+  },
+  config: {
+    layout: {xs :12,sm:12,md:12,lg:12},
+    main: {
+      type: "StackBarLineGraph",
+      legendLabels: null
+    },
+    style:{ containerStyle: {},labelStyle:{margin:{}} }
+  },
+};
+

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

@@ -0,0 +1,13 @@
+export default {
+    type: "Control",
+    scope: "#/properties/metricpath",
+  
+    options: {
+      widget: "MetricCard",
+    },
+    config: {
+      layout: { xs: 12, sm: 12, md: 3, lg: 3 },
+      main: {
+      },
+    },
+  };

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

@@ -14,5 +14,7 @@ export default {
       variant: "outlined",
       options: [],
     },
+    style: {
+    }
   },
 };

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

@@ -0,0 +1,18 @@
+export default {
+    type: "Control",
+    scope: "#/properties/pdfviewer",
+    options: {
+      widget: "PdfViewer",
+    },
+    config: {
+      layout: {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+      },
+      main: {
+        title: "PDF"
+      },
+    },
+  }

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

@@ -12,5 +12,7 @@ export default {
       type: "text",
       freeSole:false
     },
+    style: {
+    },
   },
 };

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

@@ -1,10 +1,10 @@
-export const TableSection = (theme) => {
+export const TableSection = (theme,scopeName="elements") => {
   const uiSchema = {
     type: "HorizontalLayout",
     elements: [
       {
         type: "Control",
-        scope: "#/properties/elements",
+        scope: `#/properties/${scopeName}`,
         options: {
           widget: "Table",
         },
@@ -15,8 +15,7 @@ export const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/New_Record",
-
+                     scope: `#/properties/${scopeName}_New_Record`,
                     options: {
                       widget: "IconButton",
                     },
@@ -43,7 +42,7 @@ export const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/Paste_Component",
+                     scope: scopeName === "elements" ? `#/properties/Paste_Component` : `#/properties/Paste_TabsComponent`,
                     options: {
                       widget: "IconButton",
                     },
@@ -109,7 +108,7 @@ export const TableSection = (theme) => {
             },
             {
               type: "Control",
-              scope: "#/properties/Copy_Component",
+              scope: scopeName === "elements" ? `#/properties/Copy_Component` : `#/properties/Copy_TabsComponent`,
               options: {
                 widget: "Button",
               },

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

@@ -3,9 +3,11 @@ export default {
     config: {
       layout: 12,
       main: {
-        rowSpacing: 3,
         divider: true,
         label: "Default Label",
+        rowSpacing: 2,
+        columnSpacing:2,
+        spacing:2,
       },
       defaultStyle: true,
     },