impaktapps-ui-builder 1.0.174 → 1.0.180

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

@@ -7,6 +7,7 @@ export const ComponentSchema: any = {
         { 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" },
@@ -25,8 +26,10 @@ export const ComponentSchema: any = {
         { 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" },
@@ -36,6 +39,7 @@ export const ComponentSchema: any = {
         { 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" },
@@ -45,6 +49,7 @@ export const ComponentSchema: any = {
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
         { title: "Thought of the day", const: "Thought" },
+        { title: "PDF", const: "PdfViewer" }
       ],
     },
     elementType: {
@@ -98,7 +103,35 @@ export const ComponentSchema: any = {
         { title: "Standard", const: "standard" },
       ],
     },
-    toolTipPosition:{
+    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" },
@@ -106,6 +139,12 @@ export const ComponentSchema: any = {
         { title: "Bottom", const: "bottom" }
       ],
     },
+    growthRate: {
+      oneOf: [
+        { title: "Positive", const: "positive" },
+        { title: "Negative", const: "negative" }
+      ],
+    },
     orientation: {
       oneOf: [
         { title: "Horizontal", const: "horizontal" },
@@ -140,6 +179,21 @@ export const ComponentSchema: any = {
         { 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: {
@@ -290,6 +344,9 @@ export const ComponentSchema: any = {
       items: {
         type: "object",
         properties: {
+          key: {
+            type: "string",
+          },
           label: {
             type: "string",
           },
@@ -301,12 +358,26 @@ export const ComponentSchema: any = {
       items: {
         type: "object",
         properties: {
+          key: {
+            type: "string",
+          },
           label: {
             type: "string",
           },
         },
       },
     },
+    tabIcons: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          url: {
+            type: "string",
+          },
+        },
+      },
+    },
     InputFormatingAndMasking: {
       type: "array",
       items: {
@@ -369,6 +440,8 @@ export const ComponentSchema: any = {
           title: "Stack Horizontal Bar Graph",
           const: "HorizontalStackBarGraph",
         },
+        { title: "Area Graph", const: "AreaGraph" },
+        { title: "StackBar And Line Graph", const: "StackBarLineGraph" },
       ],
     },
     iconName: {
@@ -404,6 +477,7 @@ export const ComponentSchema: any = {
         { 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" },
@@ -421,6 +495,11 @@ export const ComponentSchema: any = {
         { title: "Detail Icon", const: "DetailIcon" },
         { title: "Report View Icon", const: "ReportViewIcon" },
         { 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: {

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

@@ -49,6 +49,23 @@ export const PageMasterUiSchema: any = (theme) => {
                 required: true,
               },
             },
+          },
+           {
+            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",

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

@@ -1,5 +1,3 @@
-import { title } from "process";
-
 export const EventSchema = {
   type: "object",
   properties: {
@@ -55,8 +53,9 @@ export const EventSchema = {
         { title: "Row Movement", const: "onRowMovement" },
         { title: "Download", const: "onDownload" },
         { title: "Fail", const: "Fail" },
+        { title: "onClose", const: "onClose" },
         { title: "Key Down", const: "onKeyDown" },
-
+        { title: "Set Style", const: "setStyle" },
 
       ]
     },

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

@@ -12,43 +12,47 @@ import { getFormdataFromSessionStorage, validateAndShowErrors, okHandler, saveFo
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Events", "Style", ],
-  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", ],
-  WrapperSection: ["Core", "Components", "Properties", "Style", ],
-  HorizontalLayout: ["Core", "Components", "Properties", "Style", ],
-  TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style",],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style",],
+  WrapperSection: ["Core", "Components", "Properties", "Style",],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style",],
+  TabSection: ["Core", "Components", "TabTitles", "Properties", "Style", "Validation"],
   SpeedoMeter: ["Core", "Properties", "Events", "Style",],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
-  Box: ["Core", "Properties" , "Events", "Style", "Validation"],
+  Box: ["Core", "Properties", "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
   ProgressBarCard: ["Core", "Properties", "Events", "Style"],
-  ProgressBar:["Core", "Properties", "Events", "Style", ],
-  RankCard: ["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", ],
+  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"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style", ],
+  Thought: ["Core", "Properties", "Events", "Style",],
   Date: ["Core", "Properties", "Events", "Style", "Validation"],
   DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
-  Image: ["Core", "Properties","Style"],
-  FileInput: ["Core","Properties","Events", "Style", "Validation"],
-  Camera:["Core","Properties","Events", "Style", "Validation"],
+  Image: ["Core", "Properties", "Events", "Style"],
+  FileInput: ["Core", "Properties", "Events", "Style", "Validation"],
+  Camera: ["Core", "Properties", "Events", "Style", "Validation"],
+  OTP_Input: ["Core", "Properties", "Events", "Style", "Validation"],
 }
-
 export function refreshPage(type: string, store: any) {
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store.theme.myTheme))
   const currentConfig = JSON.parse(sessionStorage.getItem("pageFormdata"));
@@ -59,6 +63,7 @@ export function refreshPage(type: string, store: any) {
       Style: StyleSection,
       Events: EventSection(store.theme.myTheme),
       Components: TableSection(store.theme.myTheme),
+      TabTitles: TableSection(store.theme.myTheme, "tabLabelElements"),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     }
@@ -70,12 +75,12 @@ export function refreshPage(type: string, store: any) {
   // Get Widget Type of parent
   const path = store.searchParams?.get("path");
   const lastDotIndex = path.lastIndexOf('.')
-  const parentPath = path.slice(0,lastDotIndex)
+  const parentPath = path.slice(0, lastDotIndex)
 
   const parentObj = _.get(currentConfig, parentPath)
 
-  if(parentObj?.type === "Table" || parentObj?.type === "ColumnGroup"){
-    UiSchema.elements[0].elements[0].elements[4] = 
+  if (parentObj?.type === "Table" || parentObj?.type === "ColumnGroup") {
+    UiSchema.elements[0].elements[0].elements[4] =
     {
       type: "Control",
       scope: "#/properties/columnFormat",
@@ -90,7 +95,7 @@ export function refreshPage(type: string, store: any) {
         },
       },
     };
-    UiSchema.elements[0].elements[0].elements[6] = 
+    UiSchema.elements[0].elements[0].elements[6] =
     {
       type: "Control",
       scope: "#/properties/filteringOptions",
@@ -105,7 +110,7 @@ export function refreshPage(type: string, store: any) {
         },
       },
     };
-    UiSchema.elements[0].elements[0].elements[5] = 
+    UiSchema.elements[0].elements[0].elements[5] =
     {
       type: "Control",
       scope: "#/properties/enableFilter",
@@ -120,49 +125,49 @@ export function refreshPage(type: string, store: any) {
         },
       },
     },
-    UiSchema.elements[0].elements[0].elements[7] = 
-    {
-      type: "Control",
-      scope: "#/properties/enableSorting",
-      options: {
-        widget: "RadioInputField",
-      },
-      config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-        main: {
-          label: "Enable Sorting",
-          options: ["Yes", "No"],
+      UiSchema.elements[0].elements[0].elements[7] =
+      {
+        type: "Control",
+        scope: "#/properties/enableSorting",
+        options: {
+          widget: "RadioInputField",
         },
-      },
-    },
-    UiSchema.elements[0].elements[0].elements[8] = 
-    {
-      type: "Control",
-      scope: "#/properties/columnKey",
-      config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-        main: {
-          label: "Column Key",
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Enable Sorting",
+            options: ["Yes", "No"],
+          },
         },
       },
-      options: {
-        widget: "InputField",
-      },
-    },
-    UiSchema.elements[0].elements[0].elements[9] = 
-     {
-      type: "Control",
-      scope: "#/properties/elementType",
-      options: {
-        widget: "SelectInputField",
-      },
-      config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
-        main: {
-          label: "Element Type",
+      UiSchema.elements[0].elements[0].elements[8] =
+      {
+        type: "Control",
+        scope: "#/properties/columnKey",
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Column Key",
+          },
+        },
+        options: {
+          widget: "InputField",
         },
       },
-    }
+      UiSchema.elements[0].elements[0].elements[9] =
+      {
+        type: "Control",
+        scope: "#/properties/elementType",
+        options: {
+          widget: "SelectInputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+          main: {
+            label: "Element Type",
+          },
+        },
+      }
     UiSchema.elements[0].elements[0].elements[10] = {
       type: "Control",
       scope: "#/properties/dateFormat",
@@ -187,8 +192,8 @@ export function refreshPage(type: string, store: any) {
       },
     }
   }
-  if(parentObj?.type === "LeaderBoard"){
-    UiSchema.elements[0].elements[0].elements[4] = 
+  if (parentObj?.type === "LeaderBoard") {
+    UiSchema.elements[0].elements[0].elements[4] =
     {
       type: "Control",
       scope: "#/properties/columnFormat",
@@ -204,7 +209,7 @@ export function refreshPage(type: string, store: any) {
     };
   }
 
-  if (sessionStorage.getItem("copiedConfig") ) {
+  if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
   }
   store.setUiSchema(UiSchema);
@@ -230,33 +235,33 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (sessionStorage.getItem("copiedConfig")) {
         schema.properties.RemoveItemButton.disabled = false;
       }
-      
+
       const config = JSON.parse(sessionStorage.getItem("pageFormdata"));
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id")
 
-      let pathArray = [{label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}`}];
+      let pathArray = [{ label: config.name ?? "NewPage", path: `/PageMaster${id ? `?id=${id}` : ''}` }];
 
       if (path) {
-              const pathArrayAll = path.split(".");
-              const arr: any = []
-              pathArrayAll.map((e: string, i: number) => {
-                  if (i === 0) {
-                      arr.push(e)
-                      return;
-                  }
-                  arr.push(`${arr[i - 1]}.${e}`)
-              })
+        const pathArrayAll = path.split(".");
+        const arr: any = []
+        pathArrayAll.map((e: string, i: number) => {
+          if (i === 0) {
+            arr.push(e)
+            return;
+          }
+          arr.push(`${arr[i - 1]}.${e}`)
+        })
 
 
-              arr.map((e) => {
-                  const data = _.get(config, e)
-                  pathArray.push({
-                    label: data?.name || data?.eventType || "NewComponent",
-                    path: `/Component?path=${e}${id ? `&id=${id}` : ''}`
-                  });
-              })
-          }
+        arr.map((e) => {
+          const data = _.get(config, e)
+          pathArray.push({
+            label: data?.name || data?.eventType || "NewComponent",
+            path: `/Component?path=${e}${id ? `&id=${id}` : ''}`
+          });
+        })
+      }
 
       schema.properties.pageName.path = pathArray
       return schema;
@@ -273,14 +278,18 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     editComponents: function () {
 
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
       saveFormdataInSessionStorage(store.ctx.core.data, path)
       if (path) {
-        const path = store.searchParams?.get("path");
-        const finalPath = `${path}.elements[${rowId}]`
+        let finalPath = `${path}`;
+        if (dynamicData?.path?.startsWith("tabLabel")) {
+          finalPath = `${finalPath}.tabLabelElements[${rowId}]`
+        } else {
+          finalPath = `${finalPath}.elements[${rowId}]`
+        }
         store.searchParams.set("path", finalPath)
         store.setSearchParams(store.searchParams)
         this.setPage()
@@ -291,7 +300,12 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     deleteComponents: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
       const rowId = sessionStorage.getItem('rowId');
-      store.formData.elements.splice(rowId, 1);
+      const isTabLabelElements = sessionStorage.getItem('isTabLabelElements') === "true";
+      if (isTabLabelElements) {
+        store.formData.tabLabelElements.splice(rowId, 1);
+      } else {
+        store.formData.elements.splice(rowId, 1);
+      }
       const response = saveFormdataInSessionStorage(store.ctx.core.data, path)
       const data = path ? _.get(response, path) : response;
       store.setFormdata(data);
@@ -299,6 +313,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         store.updateDialog("popUpComponentSection");
       }
       sessionStorage.removeItem('rowId');
+      sessionStorage.removeItem('isTabLabelElements');
     },
     deleteEvent: function (shouldUpdateDialog: boolean = true) {
       const path = store.searchParams?.get("path");
@@ -313,20 +328,28 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     },
     widgetAddClickHandler: function () {
 
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       if (!Array.isArray(store.formData.elements)) {
         store.formData.elements = []
       }
+      if (!Array.isArray(store.formData.tabLabelElements)) {
+        store.formData.tabLabelElements = []
+      }
       const path = store.searchParams?.get("path");
       saveFormdataInSessionStorage(store.ctx.core.data, path)
-      const finalPath = `${path}.elements[${store.formData.elements.length}]`
+      let finalPath = `${path}`;
+      if (dynamicData.path.startsWith("tabLabel")) {
+        finalPath = `${finalPath}.tabLabelElements[${store.formData.tabLabelElements.length}]`
+      } else {
+        finalPath = `${finalPath}.elements[${store.formData.elements.length}]`
+      }
       store.searchParams.set("path", finalPath)
       store.setSearchParams(store.searchParams)
       this.setPage()
 
     },
     eventEditHandler: function () {
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       const rowId = dynamicData.path.split(".")[1];
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
@@ -335,7 +358,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       store.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`)
     },
     eventAddHandler: function () {
-      if (validateAndShowErrors(store)) return; 
+      if (validateAndShowErrors(store)) return;
       const path = store.searchParams?.get("path");
       const id = store.searchParams?.get("id");
       if (!Array.isArray(store.formData.events)) {
@@ -351,6 +374,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     deletePopUpComponent: function () {
       const rowId = dynamicData.path.split(".")[1];
       sessionStorage.setItem('rowId', rowId);
+      sessionStorage.setItem('isTabLabelElements', dynamicData.path.startsWith("tabLabel") ? "true" : "false");
       store.updateDialog("popUpComponentSection");
     },
     deletePopUpEvent: function () {
@@ -373,8 +397,8 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       const copiedElementPath = this.elementPathHandler(parentPathOfCopiedComponent, rowId, elementType);
       const copiedFormData = getFormdataFromSessionStorage(copiedElementPath);
 
-      this.ElementPathSetter(uiSchema,copiedFormData);
-      sessionStorage.setItem('copiedConfig',JSON.stringify(copiedFormData));
+      this.ElementPathSetter(uiSchema, copiedFormData);
+      sessionStorage.setItem('copiedConfig', JSON.stringify(copiedFormData));
       store.setNotify({
         SuccessMessage: `${elementType} Copied Successfully`,
         Success: true,
@@ -397,9 +421,17 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
       if (!Array.isArray(store.formData.events)) {
         store.formData.events = []
       }
+      if (!Array.isArray(store.formData.tabLabelElements)) {
+        store.formData.tabLabelElements = []
+      }
       saveFormdataInSessionStorage(store.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"));
@@ -413,7 +445,7 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
           Fail: true,
         });
       }
-      else if(copiedConfig.name && elementType === "Events"){
+      else if (copiedConfig.name && elementType === "Events") {
         store.setNotify({
           FailMessage: notificationMessages.Component,
           Fail: true,
@@ -436,34 +468,37 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
     elementPathHandler: function (parentPath: string, rowId: any, elementType: string) {
       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: any, copiedFormData?: any) {
       const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
-      if(uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
-        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      if (uiSchema?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons) {
+        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
       }
-      else if(uiSchema?.elements?.[0]?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons){
-        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.name}`;
+      else if (uiSchema?.elements?.[0]?.elements?.[1]?.elements?.[0]?.config?.main?.headerIcons) {
+        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
       }
 
-      
-      if(uiSchema?.elements?.[1]?.elements?.[1]?.config?.main?.headerIcons){
-        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Event: ${formData.eventType}`;
+
+      if (uiSchema?.elements?.[1]?.elements?.[1]?.config?.main?.headerIcons) {
+        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Event: ${formData.eventType}`;
       }
-      else if(uiSchema?.elements?.[0]?.elements?.[1]?.config?.main?.headerIcons){
-        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage  = `Copied Component: ${formData.eventType}`;
+      else if (uiSchema?.elements?.[0]?.elements?.[1]?.config?.main?.headerIcons) {
+        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.eventType}`;
       }
     },
 
-    
-    onNavigatePopupYes: function() {
-      try{
+
+    onNavigatePopupYes: function () {
+      try {
         store.navigate(sessionStorage.getItem("pendingNavigatePath"))
         store.updateDialog(`pageNamepopup`)
       }
-      catch(e){
+      catch (e) {
         store.updateDialog(`pageNamepopup`)
         store.setNotify({
           FailMessage: "Couldn't navigate page",
@@ -471,8 +506,8 @@ export default (store: any, dynamicData: any, submitHandler: any, service: any)
         })
       }
     },
-    onNavigatePopupNo: function() {
-        store.updateDialog(`pageNamepopup`)
+    onNavigatePopupNo: function () {
+      store.updateDialog(`pageNamepopup`)
     }
   }
 };