impaktapps-ui-builder 1.0.1585 → 1.1.0

package/dist/impaktapps-ui-builder.es.js

@@ -96,6 +96,22 @@ const PageMasterUiSchema = (theme) => {
               }
             }
           },
+          {
+            type: "Control",
+            scope: "#/properties/pageIconUrl",
+            options: {
+              widget: "InputField"
+            },
+            config: {
+              layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+              main: {
+                label: "Page Icon URL",
+                options: [],
+                color: "secondary",
+                required: true
+              }
+            }
+          },
           {
             type: "Control",
             scope: "#/properties/hasBackIcon",
@@ -6223,6 +6239,7 @@ const ComponentSchema = {
         { title: "Masked Aadhar Card", const: "AadharcardText" },
         { title: "Array", const: "Array" },
         { title: "Button", const: "Button" },
+        { title: "ButtonGroup", const: "ButtonGroup" },
         { title: "Data Card", const: "card" },
         { title: "Check Box", const: "CheckBox" },
         { title: "Camera", const: "Camera" },
@@ -6241,8 +6258,10 @@ const ComponentSchema = {
         { title: "Label", const: "Box" },
         { title: "Leaderboard", const: "LeaderBoard" },
         { title: "Multi-Select Dropdown", const: "MultipleSelect" },
+        { title: "OTP_Input", const: "OTP_Input" },
         { title: "Pan Card Masked", const: "PanCardText" },
         { title: "Pop Up", const: "PopUp" },
+        { title: "Pop Over", const: "PopOver" },
         { title: "Progress Bar", const: "ProgressBar" },
         { title: "Progress Bar Card", const: "ProgressBarCard" },
         { title: "Dropdown", const: "Select" },
@@ -6252,6 +6271,7 @@ const ComponentSchema = {
         { title: "Radio", const: "Radio" },
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
+        { title: "Metric Card", const: "MetricCard" },
         { title: "Runner Boy", const: "RunnerBoyProgressBar" },
         { title: "Table", const: "Table" },
         { title: "Tabs", const: "TabSection" },
@@ -6260,7 +6280,8 @@ const ComponentSchema = {
         { title: "Timer", const: "Timer" },
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
-        { title: "Thought of the day", const: "Thought" }
+        { title: "Thought of the day", const: "Thought" },
+        { title: "PDF", const: "PdfViewer" }
       ]
     },
     elementType: {
@@ -6314,6 +6335,48 @@ const ComponentSchema = {
         { title: "Standard", const: "standard" }
       ]
     },
+    positionVertical: {
+      oneOf: [
+        { title: "Top", const: "top" },
+        { title: "Center", const: "center" },
+        { title: "Bottom", const: "bottom" }
+      ]
+    },
+    positionHorizontal: {
+      oneOf: [
+        { title: "Left", const: "left" },
+        { title: "Center", const: "center" },
+        { title: "Right", const: "right" }
+      ]
+    },
+    contentVertical: {
+      oneOf: [
+        { title: "Top", const: "top" },
+        { title: "Center", const: "center" },
+        { title: "Bottom", const: "bottom" }
+      ]
+    },
+    contentHorizontal: {
+      oneOf: [
+        { title: "Left", const: "left" },
+        { title: "Center", const: "center" },
+        { title: "Right", const: "right" }
+      ]
+    },
+    toolTipPosition: {
+      oneOf: [
+        { title: "Top", const: "top" },
+        { title: "Left", const: "left" },
+        { title: "Right", const: "right" },
+        { title: "Bottom", const: "bottom" }
+      ]
+    },
+    growthRate: {
+      oneOf: [
+        { title: "Positive", const: "positive" },
+        { title: "Negative", const: "negative" }
+      ]
+    },
     orientation: {
       oneOf: [
         { title: "Horizontal", const: "horizontal" },
@@ -6348,6 +6411,21 @@ const ComponentSchema = {
         { title: "Spacious", const: "spacious" }
       ]
     },
+    xAxisFormatType: {
+      type: "string",
+      oneOf: [
+        { title: "Date and Month", const: "Date and Month" },
+        { title: "Month and Year", const: "Month and Year" }
+      ]
+    },
+    xAxisType: {
+      type: "string",
+      oneOf: [
+        { title: "Date", const: "date" },
+        { title: "String", const: "string" },
+        { title: "Number", const: "number" }
+      ]
+    },
     layout: {
       type: "array",
       items: {
@@ -6483,6 +6561,9 @@ const ComponentSchema = {
       items: {
         type: "object",
         properties: {
+          key: {
+            type: "string"
+          },
           label: {
             type: "string"
           }
@@ -6494,12 +6575,26 @@ const ComponentSchema = {
       items: {
         type: "object",
         properties: {
+          key: {
+            type: "string"
+          },
           label: {
             type: "string"
           }
         }
       }
     },
+    tabIcons: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          url: {
+            type: "string"
+          }
+        }
+      }
+    },
     InputFormatingAndMasking: {
       type: "array",
       items: {
@@ -6561,7 +6656,9 @@ const ComponentSchema = {
         {
           title: "Stack Horizontal Bar Graph",
           const: "HorizontalStackBarGraph"
-        }
+        },
+        { title: "Area Graph", const: "AreaGraph" },
+        { title: "StackBar And Line Graph", const: "StackBarLineGraph" }
       ]
     },
     iconName: {
@@ -6597,6 +6694,7 @@ const ComponentSchema = {
         { title: "Drafts Icon", const: "DraftsIcon" },
         { title: "Perm Phone Msg Icon", const: "PermPhoneMsgIcon" },
         { title: "Paste Icon", const: "PasteIcon" },
+        { title: "Calendar", const: "Calendar" },
         { title: "Prev Icon", const: "PrevIcon" },
         { title: "Verified Icon", const: "VerifiedIcon" },
         { title: "Table Add Icon", const: "TableAddIcon" },
@@ -6613,7 +6711,12 @@ const ComponentSchema = {
         { title: "Clone Icon", const: "CloneIcon" },
         { title: "Detail Icon", const: "DetailIcon" },
         { title: "Report View Icon", const: "ReportViewIcon" },
-        { title: "Payout", const: "Payout" }
+        { title: "Payout", const: "Payout" },
+        { title: "Info Outlined", const: "InfoOutlinedIcon" },
+        { title: "Territory Add", const: "TerritoryAdd" },
+        { title: "Territory Edit", const: "TerritoryEdit" },
+        { title: "Territory Delete", const: "TerritoryDelete" },
+        { title: "Git Compare", const: "GitCompare" }
       ]
     },
     color: {
@@ -7719,6 +7822,60 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
     ]
   };
 };
+const getArrayControlMultiField = (parentScope, firstFieldScope, secondFieldScope, firstFieldLabel, secondFieldLabel, arrayLabel) => {
+  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$1("ArrayControlEmpty2", { xs: 6, sm: 6, md: 4, lg: 4 })
+    ]
+  };
+};
 const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
 sizeHolder.elements[1] = {
   type: "Control",
@@ -7841,6 +7998,14 @@ const BaseSection = {
 const buildPropertiesSection = function(type) {
   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$1("empty1", { xs: 12, sm: 6, md: 4, lg: 3 })
+      ];
+      break;
     case "Array":
       uiSchema.elements = [
         getRadioInputField("allExpanded", "Initial Expand", ["YES", "NO"]),
@@ -7848,6 +8013,10 @@ const buildPropertiesSection = function(type) {
         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$1("empty1", { xs: 12, sm: 6, md: 4, lg: 3 })
       ];
       break;
@@ -7901,12 +8070,26 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("PopUpEmpty", { xs: 6, sm: 6, md: 0, lg: 0 })
       ];
       break;
+    case "PopOver":
+      uiSchema.elements = [
+        getSelectField("positionVertical", "Attach To (Vertical)"),
+        getSelectField("positionHorizontal", "Attach To (Horizontal)"),
+        getSelectField("contentVertical", "Popover Start (Vertical)"),
+        getSelectField("contentHorizontal", "Popover Start (Horizontal)"),
+        getInputField("width", "Width"),
+        getInputField("gap", "Gap"),
+        emptyBox$1("PopUpEmpty", { xs: 6, sm: 0, md: 8, lg: 6 })
+      ];
+      break;
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
         getSelectField("variant", "Variant"),
-        emptyBox$1("TextEmpty1", { xs: 6, sm: 6, md: 0, lg: 3 }),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        getSelectField("iconName", "Icon Name"),
+        emptyBox$1("Radio", { xs: 0, sm: 0, md: 0, lg: 6 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element"),
         getInputField("keyName", "Event Key Name")
       ];
@@ -7975,6 +8158,17 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("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"),
+        getInputField("color", "Card Color"),
+        emptyBox$1("MetricEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 })
+      ];
+      break;
     case "Button":
       uiSchema.elements = [
         getSelectField("buttonType", "Button Type"),
@@ -7985,6 +8179,14 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("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$1("ButtonEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
+      ];
+      break;
     case "Box":
       uiSchema.elements = [
         getSelectField("iconName", "Icon Name"),
@@ -7995,20 +8197,27 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("height", "Height"),
         getInputField("heading", "Heading"),
+        getInputField("subHeader", "Sub Header"),
         getSelectField("graphType", "Graph Type"),
         getInputField("leftLabel", "Left Label"),
+        getInputField("rightLabel", "Right Label"),
         getRadioInputField("disableLeftLabel", "Disable Left Label", ["YES", "No"]),
         getInputField("bottomLabel", "Bottom Label"),
         emptyBox$1("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"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox$1("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"),
+        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":
@@ -8016,9 +8225,12 @@ const buildPropertiesSection = function(type) {
         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$1("WrapperSectionEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }),
+        getInputField("rowSpacing", "Row Spacing"),
+        getInputField("columnSpacing", "Column Spacing"),
+        getInputField("spacing", "Spacing"),
+        getInputField("iconUrl", "Icon Url"),
+        emptyBox$1("WrapperSectionEmpty1", { xs: 0, sm: 0, md: 4, lg: 6 }),
         emptyBox$1("WrapperSectionEmpty2")
       ];
       break;
@@ -8027,7 +8239,7 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("verticalOrientation", "Vertical Orientation", ["YES", "NO"]),
         getRadioInputField("lazyLoad", "Lazy Load", ["YES", "NO"]),
         emptyBox$1("TabEmpty"),
-        getArrayControl("sectionLabels", "label")
+        getArrayControlMultiField("sectionLabels", "label", "icon", "Label", "Icon")
       ];
       break;
     case "Table":
@@ -8052,12 +8264,13 @@ const buildPropertiesSection = function(type) {
         buildWrapper("Tree Table Properties", [
           getRadioInputField("enableRowMovement", "Row Rearrangement", ["YES", "NO"]),
           getRadioInputField("enableExpanding", "Row Expanding", ["YES", "NO"]),
+          getRadioInputField("mergeExpandIcon", "Merge Expand Icon", ["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$1("LazyLoadingTableEmpty3")
+          getInputField("expandedKey", "Expanded Key"),
+          getInputField("parentIdKey", "Parent Key")
         ]),
         getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
         sizeHolder,
@@ -8067,7 +8280,9 @@ const buildPropertiesSection = function(type) {
     case "Radio":
       uiSchema.elements = [
         getInputField("errorMessage", "Error Message"),
-        emptyBox$1("Radio", { xs: 6, sm: 6, md: 8, lg: 9 }),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("RadioEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 }),
         getArrayControl("sectionLabels", "label", "Options Of Radio")
       ];
       break;
@@ -8076,27 +8291,39 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
         getSelectField("variant", "Variant"),
-        emptyBox$1("SelectEmpty")
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("SelectEmpty", { xs: 6, sm: 6, md: 8, lg: 9 })
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getSelectField("variant", "Variant"),
-        emptyBox$1("MultipleSelectEmpty1", { xs: 0, sm: 6, md: 4, lg: 4 }),
-        emptyBox$1("MultipleSelectEmpty2")
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position")
+      ];
+      break;
+    case "PdfViewer":
+      uiSchema.elements = [
+        getInputField("scale", "Zoom"),
+        emptyBox$1("PdfViewer", { xs: 6, sm: 6, md: 8, lg: 9 })
       ];
       break;
     case "Date":
       uiSchema.elements = [
         getSelectField("variant", "Variant"),
-        emptyBox$1("DateEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
       ];
       break;
     case "DateTime":
       uiSchema.elements = [
         getSelectField("variant", "Variant"),
-        emptyBox$1("DateTimeEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
       ];
       break;
     case "Thought":
@@ -8108,6 +8335,8 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("imageUrl", "Image URL"),
         getInputField("height", "Image Height"),
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
         emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
       ];
       break;
@@ -8118,12 +8347,19 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("disableDelete", "Disable Delete", ["YES", "NO"]),
         getRadioInputField("disableDownload", "Disable Download", ["YES", "NO"]),
         getInputField("description", "Enter description"),
-        emptyBox$1("FileInputEmpty", { xs: 6, sm: 6, md: 8, lg: 9 })
+        getInputField("toolTip", "Tooltip"),
+        getSelectField("toolTipPosition", "Tooltip Position"),
+        getInputField("chooseButtonLabel", "ChooseButton Label"),
+        getInputField("noFileAvailableMessage", "No Found Message"),
+        getRadioInputField("useLabel", "Use Button", ["YES", "NO"]),
+        getRadioInputField("externalUpload", "External Upload", ["YES", "NO"]),
+        emptyBox$1("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 })
       ];
       break;
     case "Camera":
       uiSchema.elements = [
         getSelectField("iconName", "Icon Name"),
+        getRadioInputField("multiUplaod", "Multiple Uplaod", ["YES", "NO"]),
         getSelectField("color", "Color"),
         getInputField("tooltipMessage", "Tooltip Message"),
         getSelectField("variant", "Variant"),
@@ -8166,13 +8402,13 @@ const StyleSection = {
     }
   ]
 };
-const TableSection = (theme) => {
+const TableSection = (theme, scopeName = "elements") => {
   const uiSchema = {
     type: "HorizontalLayout",
     elements: [
       {
         type: "Control",
-        scope: "#/properties/elements",
+        scope: `#/properties/${scopeName}`,
         options: {
           widget: "Table"
         },
@@ -8183,7 +8419,7 @@ const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/New_Record",
+                    scope: `#/properties/${scopeName}_New_Record`,
                     options: {
                       widget: "IconButton"
                     },
@@ -8210,7 +8446,7 @@ const TableSection = (theme) => {
                 {
                   widget: {
                     type: "Control",
-                    scope: "#/properties/Paste_Component",
+                    scope: scopeName === "elements" ? `#/properties/Paste_Component` : `#/properties/Paste_TabsComponent`,
                     options: {
                       widget: "IconButton"
                     },
@@ -8275,7 +8511,7 @@ const TableSection = (theme) => {
             },
             {
               type: "Control",
-              scope: "#/properties/Copy_Component",
+              scope: scopeName === "elements" ? `#/properties/Copy_Component` : `#/properties/Copy_TabsComponent`,
               options: {
                 widget: "Button"
               },
@@ -8468,6 +8704,10 @@ var buildConfig = (FormData) => {
   if (formData.events) {
     delete formData.events;
   }
+  if (formData.tabLabelElements) {
+    component.tabLabelElements = formData.tabLabelElements || [];
+    delete formData.tabLabelElements;
+  }
   component = { ...formData, ...component };
   return component;
 };
@@ -8500,9 +8740,27 @@ const flatObjectValueInArray = (config2 = []) => {
   });
   return data;
 };
+const createKeyValueMap = (config2 = []) => {
+  return config2.reduce((acc, item) => {
+    if (!item.key)
+      return acc;
+    acc[item.key] = item.value;
+    return acc;
+  }, {});
+};
 const clearFromSessionStorage = () => {
   sessionStorage.removeItem("pageFormdata");
 };
+const validateAndShowErrors = (store2) => {
+  if (_.isEmpty(store2.ctx.core.errors))
+    return false;
+  store2.setValidation("ValidateAndShow");
+  store2.setNotify({
+    Fail: true,
+    FailMessage: "Error on Page"
+  });
+  return true;
+};
 const getNavigationHistory = (config2, path) => {
   if (path) {
     let urlRoutes = config2.name;
@@ -8561,11 +8819,13 @@ async function saveHandler(store2, service2, submitHandler) {
       const saveReturn = await submitHandler(store2, service2, config2);
       navigateHandler(store2, true, "/PageMasterRecords");
     } catch (err) {
-      navigateHandler(store2, false);
+      navigateHandler(store2, false, void 0, err.message);
     }
+  } else {
+    navigateHandler(store2, false);
   }
 }
-const navigateHandler = (store2, isSubmitted, pageName) => {
+const navigateHandler = (store2, isSubmitted, pageName, errorMessage) => {
   if (isSubmitted) {
     sessionStorage.removeItem("pageFormdata");
     store2.navigate(pageName || -1);
@@ -8577,7 +8837,7 @@ const navigateHandler = (store2, isSubmitted, pageName) => {
     store2.setValidation("ValidateAndShow");
     store2.setNotify({
       Fail: true,
-      FailMessage: "Errors on Page"
+      FailMessage: errorMessage || "Errors on Page"
     });
   }
 };
@@ -8606,7 +8866,7 @@ const sectionLabels = {
   LeaderBoard: ["Core", "Components", "Properties", "Events", "Style"],
   WrapperSection: ["Core", "Components", "Properties", "Style"],
   HorizontalLayout: ["Core", "Components", "Properties", "Style"],
-  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  TabSection: ["Core", "Components", "TabTitles", "Properties", "Style", "Validation"],
   SpeedoMeter: ["Core", "Properties", "Events", "Style"],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
@@ -8617,15 +8877,19 @@ const sectionLabels = {
   ProgressBarCard: ["Core", "Properties", "Events", "Style"],
   ProgressBar: ["Core", "Properties", "Events", "Style"],
   RankCard: ["Core", "Properties", "Events", "Style"],
+  MetricCard: ["Core", "Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
   Timer: ["Core", "Events", "Style"],
   Rank: ["Core", "Events", "Style"],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
-  Array: ["Core", "Components", "Properties", "Events", "Validation"],
+  ButtonGroup: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  Array: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
   Text: ["Core", "Properties", "Events", "Style", "Validation"],
   TextArea: ["Core", "Properties", "Events", "Style", "Validation"],
-  PopUp: ["Core", "Components", "Properties", "Style"],
+  PopUp: ["Core", "Components", "Properties", "Events", "Style"],
+  PopOver: ["Core", "Components", "Properties", "Style"],
+  PdfViewer: ["Core", "Properties", "Style"],
   Stepper: ["Core", "Components", "Properties", "Events", "Style"],
   DataGrid: ["Core", "Components", "Properties", "Events", "Style"],
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -8634,9 +8898,10 @@ const sectionLabels = {
   Thought: ["Core", "Properties", "Events", "Style"],
   Date: ["Core", "Properties", "Events", "Style", "Validation"],
   DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
-  Image: ["Core", "Properties", "Style"],
+  Image: ["Core", "Properties", "Events", "Style"],
   FileInput: ["Core", "Properties", "Events", "Style", "Validation"],
-  Camera: ["Core", "Properties", "Events", "Style", "Validation"]
+  Camera: ["Core", "Properties", "Events", "Style", "Validation"],
+  OTP_Input: ["Core", "Properties", "Events", "Style", "Validation"]
 };
 function refreshPage(type, store2) {
   var _a, _b;
@@ -8649,6 +8914,7 @@ function refreshPage(type, store2) {
       Style: StyleSection,
       Events: EventSection(store2.theme.myTheme),
       Components: TableSection(store2.theme.myTheme),
+      TabTitles: TableSection(store2.theme.myTheme, "tabLabelElements"),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     };
@@ -8839,13 +9105,19 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     editComponents: function() {
       var _a, _b, _c;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
       if (path) {
-        const path2 = (_c = store2.searchParams) == null ? void 0 : _c.get("path");
-        const finalPath = `${path2}.elements[${rowId}]`;
+        let finalPath = `${path}`;
+        if ((_c = dynamicData2 == null ? void 0 : dynamicData2.path) == null ? void 0 : _c.startsWith("tabLabel")) {
+          finalPath = `${finalPath}.tabLabelElements[${rowId}]`;
+        } else {
+          finalPath = `${finalPath}.elements[${rowId}]`;
+        }
         store2.searchParams.set("path", finalPath);
         store2.setSearchParams(store2.searchParams);
         this.setPage();
@@ -8857,7 +9129,12 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const rowId = sessionStorage.getItem("rowId");
-      store2.formData.elements.splice(rowId, 1);
+      const isTabLabelElements = sessionStorage.getItem("isTabLabelElements") === "true";
+      if (isTabLabelElements) {
+        store2.formData.tabLabelElements.splice(rowId, 1);
+      } else {
+        store2.formData.elements.splice(rowId, 1);
+      }
       const response = saveFormdataInSessionStorage(store2.ctx.core.data, path);
       const data = path ? _.get(response, path) : response;
       store2.setFormdata(data);
@@ -8865,6 +9142,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
         store2.updateDialog("popUpComponentSection");
       }
       sessionStorage.removeItem("rowId");
+      sessionStorage.removeItem("isTabLabelElements");
     },
     deleteEvent: function(shouldUpdateDialog = true) {
       var _a;
@@ -8880,18 +9158,30 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     widgetAddClickHandler: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
+      if (!Array.isArray(store2.formData.tabLabelElements)) {
+        store2.formData.tabLabelElements = [];
+      }
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
-      const finalPath = `${path}.elements[${store2.formData.elements.length}]`;
+      let finalPath = `${path}`;
+      if (dynamicData2.path.startsWith("tabLabel")) {
+        finalPath = `${finalPath}.tabLabelElements[${store2.formData.tabLabelElements.length}]`;
+      } else {
+        finalPath = `${finalPath}.elements[${store2.formData.elements.length}]`;
+      }
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
     eventEditHandler: function() {
       var _a, _b;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
@@ -8901,6 +9191,8 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     eventAddHandler: function() {
       var _a, _b;
+      if (validateAndShowErrors(store2))
+        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
       if (!Array.isArray(store2.formData.events)) {
@@ -8916,6 +9208,7 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     deletePopUpComponent: function() {
       const rowId = dynamicData2.path.split(".")[1];
       sessionStorage.setItem("rowId", rowId);
+      sessionStorage.setItem("isTabLabelElements", dynamicData2.path.startsWith("tabLabel") ? "true" : "false");
       store2.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function() {
@@ -8962,9 +9255,17 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
+      if (!Array.isArray(store2.formData.tabLabelElements)) {
+        store2.formData.tabLabelElements = [];
+      }
       saveFormdataInSessionStorage(store2.ctx.core.data, pastedElementParentPath);
       const formData = getFormdataFromSessionStorage(pastedElementParentPath);
-      const insertElementIndex = elementType === "Component" ? formData.elements.length : formData.events.length;
+      const currentLength = {
+        "TabsComponent": formData.tabLabelElements.length,
+        "Component": formData.elements.length,
+        "Events": formData.events.length
+      };
+      const insertElementIndex = currentLength[elementType] || 0;
       const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
       const notificationMessages = {
@@ -8999,6 +9300,9 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       if (elementType === "Component") {
         return parentPath ? `${parentPath}.elements[${rowId}]` : `elements[${rowId}]`;
       }
+      if (elementType === "TabsComponent") {
+        return `${parentPath}.tabLabelElements[${rowId}]`;
+      }
       return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
     },
     ElementPathSetter: function(uiSchema, copiedFormData) {
@@ -9074,6 +9378,8 @@ var pageMaster = (funcParams) => {
     },
     onAddClickHandler: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
@@ -9097,6 +9403,8 @@ var pageMaster = (funcParams) => {
     },
     eventAddHandler: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -9107,6 +9415,8 @@ var pageMaster = (funcParams) => {
     },
     editEvent: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       saveFormdataInSessionStorage(store2.ctx.core.data);
@@ -9194,7 +9504,9 @@ const EventSchema = {
         { title: "Row Movement", const: "onRowMovement" },
         { title: "Download", const: "onDownload" },
         { title: "Fail", const: "Fail" },
-        { title: "Key Down", const: "onKeyDown" }
+        { title: "onClose", const: "onClose" },
+        { title: "Key Down", const: "onKeyDown" },
+        { title: "Set Style", const: "setStyle" }
       ]
     },
     Handler: {
@@ -10086,6 +10398,8 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     addEvent: function() {
       var _a, _b, _c;
+      if (validateAndShowErrors(store2))
+        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -10098,6 +10412,8 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     editEvent: function() {
       var _a;
+      if (validateAndShowErrors(store2))
+        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
@@ -10533,7 +10849,7 @@ var service = (funcParams) => {
       const config2 = pageData == null ? void 0 : pageData.config;
       const uiSchema = pageData == null ? void 0 : pageData.uiSchema;
       const event2 = new CustomEvent("pageNameChanged", {
-        detail: { pageName: config2.label, hasBackIcon: config2.hasBackIcon === "NO" ? false : true }
+        detail: { pageName: config2.label, pageIconUrl: config2.pageIconUrl, hasBackIcon: config2.hasBackIcon === "NO" ? false : true }
       });
       window.dispatchEvent(event2);
       (_b = (_a = funcParams == null ? void 0 : funcParams.store) == null ? void 0 : _a.theme) == null ? void 0 : _b.myTheme;
@@ -10576,6 +10892,25 @@ var service = (funcParams) => {
         funcParams.store.setUiSchema(uiSchema);
       });
     },
+    getStyle: () => {
+      var _a, _b, _c, _d;
+      const cloneEventGroup = _.cloneDeep(eventGroups);
+      if (cloneEventGroup.setStyle) {
+        let finalResponse = {};
+        const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || ((_b = funcParams == null ? void 0 : funcParams.dynamicData.path) == null ? void 0 : _b.split(".").pop());
+        if ((_c = cloneEventGroup == null ? void 0 : cloneEventGroup.setStyle) == null ? void 0 : _c[path]) {
+          for (const eventConfig of (_d = cloneEventGroup == null ? void 0 : cloneEventGroup.setStyle) == null ? void 0 : _d[path]) {
+            finalResponse = executeEvents({
+              ...executeEventsParameters,
+              config: eventConfig,
+              componentName: path
+            });
+          }
+          return finalResponse;
+        }
+      }
+      return {};
+    },
     onCellRenderer: (cellParams) => {
       var _a, _b, _c, _d, _e;
       const cloneEventGroup = _.cloneDeep(eventGroups);
@@ -10605,6 +10940,9 @@ var service = (funcParams) => {
     onFileDelete: async function() {
       this.callHandler("onFileDelete");
     },
+    onClose: function() {
+      this.callHandler("onClose");
+    },
     onMount: function() {
       this.callHandler("onMount");
     },
@@ -10655,8 +10993,8 @@ var service = (funcParams) => {
         return;
       const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
       const promises = ChangeEventsKeysArray.flatMap((componentName) => {
-        var _a, _b;
-        if (((_a = funcParams.store) == null ? void 0 : _a.formData[componentName]) === funcParams.store.newData[componentName] || ((_b = funcParams.store) == null ? void 0 : _b.newData[componentName]) === void 0) {
+        var _a;
+        if (((_a = funcParams.store) == null ? void 0 : _a.formData[componentName]) === funcParams.store.newData[componentName]) {
           return [];
         }
         return eventGroups.onChange[componentName].map(
@@ -10891,7 +11229,7 @@ const BarGraph = {
       type: "BarGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, barStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
   }
 };
 const PieGraph = {
@@ -10906,7 +11244,7 @@ const PieGraph = {
       type: "PieGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, pieStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
   }
 };
 const LineGraph = {
@@ -10921,7 +11259,7 @@ const LineGraph = {
       type: "LineGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, lineStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
   }
 };
 const HorizontalBarGraph = {
@@ -10936,7 +11274,37 @@ const HorizontalBarGraph = {
       type: "HorizontalBarGraph",
       legendLabels: null
     },
-    style: { containerStyle: {}, labelStyle: { margin: {} }, barStyle: {} }
+    style: { containerStyle: {}, labelStyle: { margin: {} } }
+  }
+};
+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: {} } }
+  }
+};
+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: {} } }
   }
 };
 const buildHorizontalBarGraph = (config2, componentScope2) => {
@@ -10955,13 +11323,13 @@ const buildHorizontalBarGraph = (config2, componentScope2) => {
     horizontalBarGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
   if (config2.legendLabels) {
-    horizontalBarGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    horizontalBarGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
   }
   if (config2.legendDirection) {
     horizontalBarGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
   }
   if (config2.pieArcColors) {
-    horizontalBarGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    horizontalBarGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   if (config2.xAxisValue) {
     horizontalBarGraph.config.main.xAxisValue = config2.xAxisValue;
@@ -11095,13 +11463,13 @@ const buildPieGraph = (config2, componentScope2) => {
   pieGraph.scope = componentScope2;
   pieGraph.config.main.header = config2.heading;
   if (config2.legendLabels) {
-    pieGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    pieGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
   }
   if (config2.xAxisValue) {
     pieGraph.config.main.xAxisValue = config2.xAxisValue;
   }
   if (config2.pieArcColors) {
-    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    pieGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   return pieGraph;
 };
@@ -11124,10 +11492,10 @@ const buildStackbarGraph = (config2, componentScope2) => {
   barGraph.config.main.type = (_a = config2 == null ? void 0 : config2.graphType) != null ? _a : "BarGraph";
   barGraph.config.main.header = config2.heading;
   if (config2.legendLabels) {
-    barGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    barGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
   }
   if (config2.pieArcColors) {
-    barGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    barGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   if (config2.xAxisValue) {
     barGraph.config.main.xAxisValue = config2.xAxisValue;
@@ -11193,6 +11561,7 @@ const buildTabSection = (config2, componentScope2) => {
   }
   if (config2.sectionLabels) {
     tab.config.main.tabLabels = config2.sectionLabels.map((e) => e.label);
+    tab.config.main.tabIcons = config2.sectionLabels.map((e) => e.icon);
   }
   if (config2.style) {
     tab.config.style = JSON.parse(config2.style);
@@ -11205,9 +11574,11 @@ var WrapperSection = {
   config: {
     layout: 12,
     main: {
-      rowSpacing: 3,
       divider: true,
-      label: "Default Label"
+      label: "Default Label",
+      rowSpacing: 2,
+      columnSpacing: 2,
+      spacing: 2
     },
     defaultStyle: true
   },
@@ -11220,6 +11591,10 @@ const buildWrapperSection = (config2, componentScope2) => {
   wrapper.config.main.divider = config2.divider === "YES" ? true : false;
   wrapper.config.main.isAccordion = config2.isAccordion === "No" ? false : true;
   wrapper.config.main.defaultClosed = config2.defaultClosed === "YES" ? true : false;
+  wrapper.config.main.icon = config2.iconUrl;
+  wrapper.config.main.rowSpacing = Number(config2.rowSpacing);
+  wrapper.config.main.columnSpacing = Number(config2.columnSpacing);
+  wrapper.config.main.spacing = Number(config2.spacing);
   if (config2.defaultStyle) {
     wrapper.config.defaultStyle = config2.defaultStyle === "YES" ? true : false;
   }
@@ -11269,6 +11644,15 @@ const buildTextField = (config2, componentScope2) => {
   if (config2.layout) {
     inputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.toolTip) {
+    inputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    inputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.iconName) {
+    inputField.config.main.startIcon = config2.iconName;
+  }
   inputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
   inputField.scope = componentScope2;
   return inputField;
@@ -11285,7 +11669,8 @@ var SelectInputField = {
       label: "",
       type: "text",
       freeSole: false
-    }
+    },
+    style: {}
   }
 };
 const buildSelect = (config2, componentScope2) => {
@@ -11306,6 +11691,15 @@ const buildSelect = (config2, componentScope2) => {
   if (config2.layout) {
     selectInputField.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.toolTip) {
+    selectInputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    selectInputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    selectInputField.config.style = JSON.parse(config2.style);
+  }
   selectInputField.scope = componentScope2;
   return selectInputField;
 };
@@ -11467,6 +11861,15 @@ const buildTable = (config2, componentScope2) => {
   if (config2.layout) {
     table.config.layout = createLayoutFormat(config2.layout);
   }
+  if (config2.mergeExpandIcon) {
+    table.config.main.mergeExpandIcon = config2.mergeExpandIcon === "YES" ? true : false;
+  }
+  if (config2.expandedKey) {
+    table.config.main.expandedKey = config2.expandedKey;
+  }
+  if (config2.parentIdKey) {
+    table.config.main.parentIdKey = config2.parentIdKey;
+  }
   return table;
 };
 const Box = {
@@ -11478,7 +11881,8 @@ const Box = {
   config: {
     layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
-      iconName: ""
+      iconName: "",
+      onClick: "onClick"
     },
     style: {}
   }
@@ -11547,6 +11951,12 @@ const buildUploadFile = (config2, componentScope2) => {
   if (config2.required) {
     UploadFile.config.main.required = true;
   }
+  if (config2.toolTip) {
+    UploadFile.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    UploadFile.config.main.toolTipPosition = config2.toolTipPosition;
+  }
   UploadFile.config.main.errorMessage = config2.errorMessage;
   return UploadFile;
 };
@@ -11569,6 +11979,12 @@ const buildDownloadFile = (config2, componentScope2) => {
   if (config2.errorMessage) {
     DownloadFile.config.main.errorMessage = config2.errorMessage;
   }
+  if (config2.toolTip) {
+    DownloadFile.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    DownloadFile.config.main.toolTipPosition = config2.toolTipPosition;
+  }
   return DownloadFile;
 };
 function Card(theme) {
@@ -11761,6 +12177,46 @@ const buildCard = (config, componentScope, store) => {
   }
   return card;
 };
+var MetricCard = {
+  type: "Control",
+  scope: "#/properties/metricpath",
+  options: {
+    widget: "MetricCard"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 3, lg: 3 },
+    main: {}
+  }
+};
+const buildMetricCard = (config2, componentScope2, store2) => {
+  const card2 = _.cloneDeep(MetricCard);
+  card2.scope = componentScope2;
+  if (config2.style) {
+    card2.config.style = JSON.parse(config2.style);
+  }
+  if (config2.layout) {
+    card2.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.label) {
+    card2.config.main.label = config2.label;
+  }
+  if (config2.url) {
+    card2.config.main.url = config2.url;
+  }
+  if (config2.description) {
+    card2.config.main.description = config2.description;
+  }
+  if (config2.cardValue) {
+    card2.config.main.cardValue = config2.cardValue;
+  }
+  if (config2.growthRate) {
+    card2.config.main.growthRate = config2.growthRate;
+  }
+  if (config2.color) {
+    card2.config.main.color = config2.color;
+  }
+  return card2;
+};
 var DateInputField = {
   type: "Control",
   scope: "#/properties/date",
@@ -11792,7 +12248,6 @@ const DateTime = {
 const buildDate = (config2, componentScope2) => {
   const dateInputField = _.cloneDeep(DateInputField);
   dateInputField.config.main.label = config2.label;
-  dateInputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
   dateInputField.scope = componentScope2;
   if (config2.layout) {
     dateInputField.config.layout = createLayoutFormat(config2.layout);
@@ -11800,12 +12255,20 @@ const buildDate = (config2, componentScope2) => {
   if (config2.variant) {
     dateInputField.config.main.variant = config2.variant;
   }
+  if (config2.toolTip) {
+    dateInputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    dateInputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    dateInputField.config.style = JSON.parse(config2.style);
+  }
   return dateInputField;
 };
 const buildDateTime = (config2, componentScope2) => {
   const dateTimeInputField = _.cloneDeep(DateTime);
   dateTimeInputField.config.main.label = config2.label;
-  dateTimeInputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
   dateTimeInputField.scope = componentScope2;
   if (config2.layout) {
     dateTimeInputField.config.layout = createLayoutFormat(config2.layout);
@@ -11813,6 +12276,15 @@ const buildDateTime = (config2, componentScope2) => {
   if (config2.variant) {
     dateTimeInputField.config.main.variant = config2.variant;
   }
+  if (config2.toolTip) {
+    dateTimeInputField.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    dateTimeInputField.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    dateTimeInputField.config.style = JSON.parse(config2.style);
+  }
   return dateTimeInputField;
 };
 var RankCard = {
@@ -11903,7 +12375,8 @@ var MultipleSelect = {
       multiple: true,
       variant: "outlined",
       options: []
-    }
+    },
+    style: {}
   }
 };
 const buildMultiSelect = (config2, componentScope2) => {
@@ -11924,6 +12397,15 @@ const buildMultiSelect = (config2, componentScope2) => {
   if (config2.lazyLoading) {
     multipleSelect.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
+  if (config2.toolTip) {
+    multipleSelect.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    multipleSelect.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  if (config2.style) {
+    multipleSelect.config.style = JSON.parse(config2.style);
+  }
   return multipleSelect;
 };
 const buildBasicUiSchema = (config2) => {
@@ -12070,10 +12552,10 @@ const buildLineGraph = (config2, componentScope2) => {
     lineGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
   }
   if (config2.legendLabels) {
-    lineGraph.config.main.legendLabels = flatObjectValueInArray(config2.legendLabels);
+    lineGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
   }
   if (config2.pieArcColors) {
-    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config2.pieArcColors);
+    lineGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
   }
   lineGraph.scope = componentScope2;
   return lineGraph;
@@ -12108,6 +12590,12 @@ const buildRadio = (config2, componentScope2) => {
   if (config2.errorMessage) {
     Radio.config.main.errorMessage = config2.errorMessage;
   }
+  if (config2.toolTip) {
+    Radio.config.main.toolTip = config2.toolTip;
+  }
+  if (config2.toolTipPosition) {
+    Radio.config.main.toolTipPosition = config2.toolTipPosition;
+  }
   return Radio;
 };
 var emptyBox = {
@@ -12156,7 +12644,11 @@ const buildArray = (config2, componentScope2) => {
   if (config2.style) {
     array.config.style = JSON.parse(config2.style);
   }
+  array.config.main.rowSpacing = Number(config2.rowSpacing);
+  array.config.main.columnSpacing = Number(config2.columnSpacing);
+  array.config.main.spacing = Number(config2.spacing);
   array.config.main.childElementLabel = config2.childElementLabel;
+  array.config.main.showKeyAsLabel = config2.showKeyAsLabel;
   array.config.main.label = config2.label;
   array.scope = componentScope2;
   return array;
@@ -12231,7 +12723,8 @@ const FileInput = {
       required: false,
       onUpload: "onFileUpload",
       onDownload: "onFileDownload",
-      label: "Aggrement Copy"
+      label: "Aggrement Copy",
+      "onClick": "onClick"
     },
     style: {
       backgroundColor: "none"
@@ -12248,21 +12741,19 @@ const buildFileInput = (config2, componentScope2) => {
   if (config2.style) {
     box.config.style = JSON.parse(config2.style);
   }
-  if (config2.variant) {
-    box.config.main.variant = config2.variant;
-  }
-  if (config2.disableUpload) {
-    box.config.main.disableUpload = config2.disableUpload === "YES" ? true : false;
-  }
-  if (config2.disableDownload) {
-    box.config.main.disableDownload = config2.disableDownload === "YES" ? true : false;
-  }
-  if (config2.disableDelete) {
-    box.config.main.disableDelete = config2.disableDelete === "YES" ? true : false;
-  }
-  if (config2.description) {
-    box.config.main.description = config2.description;
-  }
+  box.config.main.variant = config2.variant;
+  box.config.main.disableUpload = config2.disableUpload === "YES" ? true : false;
+  box.config.main.disableDownload = config2.disableDownload === "YES" ? true : false;
+  box.config.main.disableDelete = config2.disableDelete === "YES" ? true : false;
+  box.config.main.useLabel = config2.useLabel === "YES" ? true : false;
+  box.config.main.description = config2.description;
+  box.config.main.toolTip = config2.toolTip;
+  box.config.main.chooseButtonLabel = config2.chooseButtonLabel;
+  box.config.main.noFileAvailableMessage = config2.noFileAvailableMessage;
+  if (config2.toolTipPosition) {
+    box.config.main.toolTipPosition = config2.toolTipPosition;
+  }
+  box.config.main.externalUpload = config2.externalUpload === "YES" ? true : false;
   return box;
 };
 const Stepper = {
@@ -12319,6 +12810,7 @@ const PopUP = {
     },
     main: {
       label: "PopUp",
+      onClose: "onClose",
       fullScreen: false,
       fullWidth: false,
       maxWidth: false,
@@ -12542,7 +13034,8 @@ const imageUiSchema = {
   config: {
     layout: 3,
     main: {
-      url: ""
+      url: "",
+      onClick: "onClick"
     },
     style: {}
   }
@@ -12560,8 +13053,134 @@ const buildImage = (config2, componentScope2) => {
   if (config2.height) {
     image.config.style.imageStyle = { ...image.config.style.imageStyle, height: config2.height };
   }
+  image.config.main.toolTip = config2.toolTip;
+  image.config.main.toolTipPosition = config2.toolTipPosition;
   return image;
 };
+const buildAreaGraph = (config2, componentScope2) => {
+  const AreaGraph = _.cloneDeep(AreaBarGraph);
+  AreaGraph.scope = componentScope2;
+  if (config2.layout) {
+    AreaGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  AreaGraph.config.main.type = config2.graphType;
+  AreaGraph.scope = componentScope2;
+  AreaGraph.config.main.header = config2.heading;
+  AreaGraph.config.main.subHeader = config2.subHeader;
+  if (config2.legendHide) {
+    AreaGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
+  }
+  if (config2.bottomAxisAngle) {
+    AreaGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
+  }
+  if (config2.legendLabels) {
+    AreaGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
+  }
+  if (config2.legendDirection) {
+    AreaGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
+  }
+  if (config2.height) {
+    AreaGraph.config.style.containerStyle.height = config2.height;
+  }
+  if (config2.pieArcColors) {
+    AreaGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
+  }
+  if (config2.xAxisFormatType) {
+    AreaGraph.config.main.xAxisFormatType = config2.xAxisFormatType;
+  }
+  if (config2.yAxisTickCount) {
+    AreaGraph.config.main.yAxisTickCount = config2.yAxisTickCount;
+  }
+  if (config2.xAxisTickCount) {
+    AreaGraph.config.main.xAxisTickCount = config2.xAxisTickCount;
+  }
+  if (config2.xAxisValue) {
+    AreaGraph.config.main.xAxisValue = config2.xAxisValue;
+  }
+  if (config2.xAxisType) {
+    AreaGraph.config.main.xAxisType = config2.xAxisType;
+  }
+  if (config2.bottomLabel) {
+    AreaGraph.config.main.bottomLabel = config2.bottomLabel;
+  }
+  if (config2.leftLabel) {
+    AreaGraph.config.main.leftLabel = config2.leftLabel;
+  }
+  if (config2.disableLeftLabel) {
+    AreaGraph.config.main.disableLeftLabel = config2.disableLeftLabel === "YES" ? true : false;
+  }
+  if (config2.leftMargin) {
+    AreaGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
+    };
+  }
+  return AreaGraph;
+};
+const buildStackBarLineGraph = (config2, componentScope2) => {
+  const StackBarLineGraph = _.cloneDeep(StackBarLineG);
+  StackBarLineGraph.scope = componentScope2;
+  if (config2.layout) {
+    StackBarLineGraph.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  StackBarLineGraph.config.main.type = config2.graphType;
+  StackBarLineGraph.scope = componentScope2;
+  StackBarLineGraph.config.main.header = config2.heading;
+  StackBarLineGraph.config.main.subHeader = config2.subHeader;
+  if (config2.legendHide) {
+    StackBarLineGraph.config.main.legendAvailable = config2.legendHide === "YES" ? false : true;
+  }
+  if (config2.bottomAxisAngle) {
+    StackBarLineGraph.config.main.bottomAxisAngle = config2.bottomAxisAngle === "YES" ? true : false;
+  }
+  if (config2.legendLabels) {
+    StackBarLineGraph.config.main.legendLabels = createKeyValueMap(config2.legendLabels);
+  }
+  if (config2.legendDirection) {
+    StackBarLineGraph.config.main.legendDirection = config2.legendDirection === "Row" ? "row" : "column";
+  }
+  if (config2.height) {
+    StackBarLineGraph.config.style.containerStyle.height = config2.height;
+  }
+  if (config2.pieArcColors) {
+    StackBarLineGraph.config.style.colorMap = createKeyValueMap(config2.pieArcColors);
+  }
+  if (config2.yAxisTickCount) {
+    StackBarLineGraph.config.main.yAxisTickCount = config2.yAxisTickCount;
+  }
+  if (config2.xAxisTickCount) {
+    StackBarLineGraph.config.main.xAxisTickCount = config2.xAxisTickCount;
+  }
+  if (config2.xAxisValue) {
+    StackBarLineGraph.config.main.xAxisValue = config2.xAxisValue;
+  }
+  if (config2.xAxisType) {
+    StackBarLineGraph.config.main.xAxisType = config2.xAxisType;
+  }
+  if (config2.bottomLabel) {
+    StackBarLineGraph.config.main.bottomLabel = config2.bottomLabel;
+  }
+  if (config2.leftLabel) {
+    StackBarLineGraph.config.main.leftLabel = config2.leftLabel;
+  }
+  if (config2.rightLabel) {
+    StackBarLineGraph.config.main.rightLabel = config2.rightLabel;
+  }
+  if (config2.disableLeftLabel) {
+    StackBarLineGraph.config.main.disableLeftLabel = config2.disableLeftLabel === "YES" ? true : false;
+  }
+  if (config2.growthRateKey) {
+    StackBarLineGraph.config.main.growthRateKey = config2.growthRateKey;
+  }
+  if (config2.tooltipUnit) {
+    StackBarLineGraph.config.main.tooltipUnit = config2.tooltipUnit;
+  }
+  if (config2.leftMargin) {
+    StackBarLineGraph.config.style.labelStyle.margin = {
+      left: config2.leftMargin
+    };
+  }
+  return StackBarLineGraph;
+};
 const cameraUiSchema = {
   type: "Control",
   scope: "#/properties/camera",
@@ -12588,6 +13207,7 @@ const buildCamera = (config2, componentScope2) => {
   if (config2.tooltipMessage) {
     camera.config.main.tooltipMessage = config2.tooltipMessage;
   }
+  camera.config.main.multiUplaod = config2.multiUplaod === "YES" ? true : false;
   if (config2.style) {
     camera.config.style = JSON.parse(config2.style);
   }
@@ -12601,10 +13221,149 @@ const buildCamera = (config2, componentScope2) => {
     camera.config.main.color = config2.color;
   }
   if (config2.label) {
-    camera.config.main.name = config2.label;
+    camera.config.main.label = config2.label;
   }
   return camera;
 };
+var ButtonGroup = {
+  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: {}
+  }
+};
+const buildButtonGroup = (config2, componentScope2) => {
+  const buttonGroup = _.cloneDeep(ButtonGroup);
+  if (config2.layout) {
+    buttonGroup.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  buttonGroup.scope = componentScope2;
+  if (config2.multiSelect) {
+    buttonGroup.config.main.multiSelect = config2.multiSelect === "YES" ? true : false;
+  }
+  if (config2.style) {
+    buttonGroup.config.style = JSON.parse(config2.style);
+  }
+  if (config2.size) {
+    buttonGroup.config.main.size = config2.size;
+  }
+  if (config2.color) {
+    buttonGroup.config.main.color = config2.color;
+  }
+  return buttonGroup;
+};
+const PopOver = {
+  type: "Control",
+  scope: "#/properties/text",
+  options: {
+    widget: "Popover"
+  },
+  config: {
+    layout: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
+    },
+    main: {
+      label: "PopOver"
+    },
+    style: {}
+  }
+};
+const buildPopOver = (config2, componentScope2) => {
+  const popOver = _.cloneDeep(PopOver);
+  popOver.scope = componentScope2;
+  popOver.config.main.positionVertical = config2.positionVertical;
+  popOver.config.main.positionHorizontal = config2.positionHorizontal;
+  popOver.config.main.contentVertical = config2.contentVertical;
+  popOver.config.main.contentHorizontal = config2.contentHorizontal;
+  popOver.config.main.width = config2.width;
+  popOver.config.main.gap = config2.gap;
+  if (config2.layout) {
+    popOver.config.layout = createLayoutFormat(config2.layout, config2.type);
+  }
+  if (config2.style) {
+    popOver.config.style = JSON.parse(config2.style);
+  }
+  return popOver;
+};
+const OTPSchema = {
+  type: "Control",
+  scope: "#/properties/OTPInput",
+  options: {
+    widget: "OTPInput"
+  },
+  config: {
+    layout: { xs: 12, sm: 12, md: 3, lg: 3 },
+    main: {
+      seperator: "",
+      length: 4,
+      type: "number",
+      masking: true
+    }
+  }
+};
+const buildOTP_Input = (config2, componentScope2) => {
+  const OTP = _.cloneDeep(OTPSchema);
+  OTP.scope = componentScope2;
+  if (config2.layout) {
+    OTP.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.style) {
+    OTP.config.style = JSON.parse(config2.style);
+  }
+  if (config2.errorMessage) {
+    OTP.config.main.errorMessage = config2.errorMessage;
+  }
+  if (config2.toolTip) {
+    OTP.config.main.toolTip = config2.toolTip;
+  }
+  OTP.config.main.masking = config2.masking === "YES" ? true : false;
+  OTP.config.main.type = config2.OTP_Format;
+  OTP.config.main.seperator = config2.seperator;
+  OTP.config.main.length = +config2.length;
+  return OTP;
+};
+var pdfViewer = {
+  type: "Control",
+  scope: "#/properties/pdfviewer",
+  options: {
+    widget: "PdfViewer"
+  },
+  config: {
+    layout: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
+    },
+    main: {
+      title: "PDF"
+    }
+  }
+};
+const buildPdfViewer = (config2, componentScope2) => {
+  const PdfViewer = _.cloneDeep(pdfViewer);
+  PdfViewer.scope = componentScope2;
+  PdfViewer.config.main.scale = config2.scale;
+  if (config2.layout) {
+    PdfViewer.config.layout = createLayoutFormat(config2.layout);
+  }
+  if (config2.style) {
+    PdfViewer.config.style = JSON.parse(config2.style);
+  }
+  return PdfViewer;
+};
 let schema = {
   type: "object",
   properties: {},
@@ -12675,6 +13434,9 @@ const buildUiSchema = (config2, store2) => {
   let elements = {};
   const componentScope2 = `#/properties/${config2.name}`;
   switch (config2.type) {
+    case "OTP_Input":
+      elements = buildOTP_Input(config2, componentScope2);
+      break;
     case "TreeMap":
       elements = buildTreeMap(config2, componentScope2);
       break;
@@ -12693,6 +13455,9 @@ const buildUiSchema = (config2, store2) => {
     case "PopUp":
       elements = buildPopUp(config2, componentScope2);
       break;
+    case "PopOver":
+      elements = buildPopOver(config2, componentScope2);
+      break;
     case "FileInput":
       elements = buildFileInput(config2, componentScope2);
       break;
@@ -12732,6 +13497,9 @@ const buildUiSchema = (config2, store2) => {
     case "Button":
       elements = buildButton(config2, componentScope2);
       break;
+    case "ButtonGroup":
+      elements = buildButtonGroup(config2, componentScope2);
+      break;
     case "Table":
       elements = buildTable(config2, componentScope2);
       break;
@@ -12756,6 +13524,9 @@ const buildUiSchema = (config2, store2) => {
     case "card":
       elements = buildCard(config2, componentScope2, store2);
       break;
+    case "MetricCard":
+      elements = buildMetricCard(config2, componentScope2);
+      break;
     case "Graph":
       switch (config2.graphType) {
         case "BarGraph":
@@ -12772,6 +13543,12 @@ const buildUiSchema = (config2, store2) => {
         case "HorizontalStackBarGraph":
           elements = buildHorizontalBarGraph(config2, componentScope2);
           break;
+        case "AreaGraph":
+          elements = buildAreaGraph(config2, componentScope2);
+          break;
+        case "StackBarLineGraph":
+          elements = buildStackBarLineGraph(config2, componentScope2);
+          break;
         default:
           elements = buildStackbarGraph(config2, componentScope2);
           break;
@@ -12820,6 +13597,9 @@ const buildUiSchema = (config2, store2) => {
     case "Camera":
       elements = buildCamera(config2, componentScope2);
       break;
+    case "PdfViewer":
+      elements = buildPdfViewer(config2, componentScope2);
+      break;
     default:
       schema = {
         type: "object",
@@ -12923,6 +13703,11 @@ const buildUiSchema = (config2, store2) => {
       });
     }
   }
+  if (config2.tabLabelElements) {
+    elements.tabLabelElements = config2.tabLabelElements.map((e, elemInd) => {
+      return buildUiSchema(e, store2);
+    });
+  }
   return elements;
 };
 export { buildConfig, buildSchema, buildUiSchema, clearFromSessionStorage, downloadFile$1 as downloadFile, downloadFileFromUrl, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService, schema };