impaktapps-ui-builder 0.0.101-alpha.28 → 0.0.101-alpha.281

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

@@ -184,7 +184,8 @@ const PageMasterUiSchema = (theme) => {
                             size: "small",
                             icon: "TablePaste",
                             iconLabel: "Paste",
-                            styleDefault: true
+                            styleDefault: true,
+                            title: ""
                           },
                           style: {
                             mt: "6px",
@@ -365,7 +366,7 @@ const PageMasterUiSchema = (theme) => {
             elements: [
               {
                 accessorKey: "eventType",
-                header: "Event Type",
+                header: "Event's Type",
                 size: 300,
                 type: "string"
               },
@@ -377,7 +378,7 @@ const PageMasterUiSchema = (theme) => {
               },
               {
                 accessorKey: "Edit_Approve_Records",
-                header: "Edit Widget",
+                header: "Edit",
                 type: "action",
                 size: 150,
                 widget: {
@@ -524,15 +525,17 @@ const PageMasterUiSchema = (theme) => {
             config: {
               layout: 11,
               main: {
-                heading: "Are you sure you want to delete ?"
+                heading: "Are you sure you want to delete this Component ?"
               },
               style: {
-                marginTop: "-20px",
                 fontSize: "20px",
                 "&.MuiTypography-root": {
-                  padding: "10px 30px 20px 30px",
+                  padding: "0px 20px",
                   textAlign: "center",
-                  lineHeight: "1"
+                  lineHeight: "1.2",
+                  fontWeight: "normal",
+                  fontSize: "18px",
+                  marginBottom: theme.spacing(5)
                 }
               }
             }
@@ -554,15 +557,15 @@ const PageMasterUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "No",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
-                    color: "info",
                     type: "text",
                     onClick: "deletePopUpComponent",
                     size: "large"
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     left: 0,
                     width: "50%",
@@ -590,7 +593,6 @@ const PageMasterUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "Yes",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
                     color: "error",
                     type: "text",
@@ -599,6 +601,8 @@ const PageMasterUiSchema = (theme) => {
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     right: 0,
                     width: "50%",
@@ -647,15 +651,17 @@ const PageMasterUiSchema = (theme) => {
             config: {
               layout: 11,
               main: {
-                heading: "Are you sure you want to delete ?"
+                heading: "Are you sure you want to delete this Event ?"
               },
               style: {
-                marginTop: "-20px",
                 fontSize: "20px",
                 "&.MuiTypography-root": {
-                  padding: "10px 30px 20px 30px",
+                  padding: "0px 20px",
                   textAlign: "center",
-                  lineHeight: "1"
+                  lineHeight: "1.2",
+                  fontWeight: "normal",
+                  fontSize: "18px",
+                  marginBottom: theme.spacing(5)
                 }
               }
             }
@@ -677,15 +683,15 @@ const PageMasterUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "No",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
-                    color: "info",
                     type: "text",
                     onClick: "deletePopUpEvent",
                     size: "large"
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     left: 0,
                     width: "50%",
@@ -713,7 +719,6 @@ const PageMasterUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "Yes",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
                     color: "error",
                     type: "text",
@@ -722,6 +727,8 @@ const PageMasterUiSchema = (theme) => {
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     right: 0,
                     width: "50%",
@@ -6243,7 +6250,7 @@ const ComponentSchema = {
   properties: {
     type: {
       oneOf: [
-        { title: "Masked Aadhaar", const: "AadharcardText" },
+        { title: "Masked Aadhar Card", const: "AadharcardText" },
         { title: "Array", const: "Array" },
         { title: "Button", const: "Button" },
         { title: "Data Card", const: "card" },
@@ -6258,7 +6265,7 @@ const ComponentSchema = {
         { title: "Graph", const: "Graph" },
         { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
-        { title: "LeaderBoard", const: "LeaderBoard" },
+        { title: "Leaderboard", const: "LeaderBoard" },
         { title: "Multi-Select Dropdown", const: "MultipleSelect" },
         { title: "Pan Card Masked", const: "PanCardText" },
         { title: "Pop Up", const: "PopUp" },
@@ -6280,8 +6287,14 @@ const ComponentSchema = {
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
         { title: "Column Group", const: "ColumnGroup" },
-        { title: "Thought of the day", const: "Thought" },
-        { title: "Pdf Viewer", const: "PdfViewer" }
+        { title: "Thought of the day", const: "Thought" }
+      ]
+    },
+    elementType: {
+      oneOf: [
+        { title: "Table Action Element", const: "action" },
+        { title: "Table Header Element", const: "tableHeader" },
+        { title: "Table Element", const: "element" }
       ]
     },
     columnFormat: {
@@ -6435,23 +6448,20 @@ const ComponentSchema = {
       }
     },
     filteringOptions: {
-      type: "array",
-      items: {
-        oneOf: [
-          { const: "fuzzy", title: "Fuzzy" },
-          { const: "contains", title: "Contain" },
-          { const: "startsWith", title: "Starts with" },
-          { const: "endsWith", title: "Ends with" },
-          { const: "equals", title: "Equals" },
-          { const: "notEquals", title: "Not Equals" },
-          { const: "between", title: "Between" },
-          { const: "betweenInclusive", title: "Between inclusive" },
-          { const: "greaterThan", title: "Greater than" },
-          { const: "greaterThanOrEqualTo", title: "Greater than or equal to" },
-          { const: "lessThan", title: "Less than" },
-          { const: "lessThanOrEqualTo", title: "Less than or equal to" }
-        ]
-      }
+      oneOf: [
+        { const: "fuzzy", title: "Fuzzy" },
+        { const: "contains", title: "Contain" },
+        { const: "startsWith", title: "Starts with" },
+        { const: "endsWith", title: "Ends with" },
+        { const: "equals", title: "Equals" },
+        { const: "notEquals", title: "Not Equals" },
+        { const: "between", title: "Between" },
+        { const: "betweenInclusive", title: "Between inclusive" },
+        { const: "greaterThan", title: "Greater than" },
+        { const: "greaterThanOrEqualTo", title: "Greater than or equal to" },
+        { const: "lessThan", title: "Less than" },
+        { const: "lessThanOrEqualTo", title: "Less than or equal to" }
+      ]
     },
     legendLabels: {
       type: "array",
@@ -6567,6 +6577,9 @@ const ComponentSchema = {
         { title: "Info", const: "info" }
       ]
     },
+    pageName: {
+      path: []
+    },
     name: {
       type: "string"
     },
@@ -6828,15 +6841,16 @@ const componentBasicUiSchema = (theme) => {
             config: {
               layout: 11,
               main: {
-                heading: "Are you sure you want to delete ?"
+                heading: "Are you sure you want to delete this Component ?"
               },
               style: {
-                marginTop: "-20px",
-                fontSize: "20px",
                 "&.MuiTypography-root": {
-                  padding: "10px 30px 20px 30px",
+                  padding: "0px 20px",
                   textAlign: "center",
-                  lineHeight: "1"
+                  lineHeight: "1.2",
+                  fontWeight: "normal",
+                  fontSize: "18px",
+                  marginBottom: theme.spacing(5)
                 }
               }
             }
@@ -6865,6 +6879,8 @@ const componentBasicUiSchema = (theme) => {
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     left: 0,
                     width: "50%",
@@ -6900,6 +6916,8 @@ const componentBasicUiSchema = (theme) => {
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     right: 0,
                     width: "50%",
@@ -6948,15 +6966,17 @@ const componentBasicUiSchema = (theme) => {
             config: {
               layout: 11,
               main: {
-                heading: "Are you sure you want to delete ?"
+                heading: "Are you sure you want to delete this Event ?"
               },
               style: {
-                marginTop: "-20px",
                 fontSize: "20px",
                 "&.MuiTypography-root": {
-                  padding: "10px 30px 20px 30px",
+                  padding: "0px 20px",
                   textAlign: "center",
-                  lineHeight: "1"
+                  lineHeight: "1.2",
+                  fontWeight: "normal",
+                  fontSize: "18px",
+                  marginBottom: theme.spacing(5)
                 }
               }
             }
@@ -6985,6 +7005,8 @@ const componentBasicUiSchema = (theme) => {
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     left: 0,
                     width: "50%",
@@ -7020,6 +7042,8 @@ const componentBasicUiSchema = (theme) => {
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     right: 0,
                     width: "50%",
@@ -7044,23 +7068,23 @@ const componentBasicUiSchema = (theme) => {
         type: "Control",
         scope: "#/properties/pageName",
         options: {
-          widget: "Box"
+          widget: "Breadcrumb"
         },
         config: {
           layout: 12,
           main: {
-            heading: ""
+            onNavigatePopupNo: "onNavigatePopupNo",
+            onNavigatePopupYes: "onNavigatePopupYes"
           },
           style: {
             paddingLeft: theme.spacing(3),
-            width: "100%",
-            fontSize: "10px",
             color: theme.palette.grey[600],
+            fontSize: "10px",
             position: "fixed",
             bottom: "24px",
-            backgroundColor: theme.palette.background.default,
             borderBottom: `1px solid ${theme.palette.common.black}29`,
-            borderTop: `1px solid ${theme.palette.common.black}29`
+            borderTop: `1px solid ${theme.palette.common.black}29`,
+            backgroundColor: theme.palette.background.default
           }
         }
       },
@@ -7336,7 +7360,7 @@ const EventSection = (theme) => {
         elements: [
           {
             accessorKey: "eventType",
-            header: "Event Type",
+            header: "Event's Type",
             type: "string",
             size: 300
           },
@@ -7348,7 +7372,7 @@ const EventSection = (theme) => {
           },
           {
             accessorKey: "Edit_Approve_Records",
-            header: "Edit Widget",
+            header: "Edit",
             size: 150,
             type: "action",
             widget: {
@@ -7724,7 +7748,7 @@ const buildPropertiesSection = function(type) {
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox$1("TextEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 }),
+        getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
         emptyBox$1("TextEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
@@ -8394,54 +8418,139 @@ function okHandler(store2) {
   }
 }
 const sectionLabels = {
-  Select: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  MultipleSelect: ["Core", "Properties", "Value", "Event", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
-  LeaderBoard: ["Core", "Components", "Properties", "Event", "Style", "Validation"],
+  Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
+  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Event", "Style", "Validation"],
-  card: ["Core", "Properties", "Event", "Style", "Validation"],
-  UploadFile: ["Core", "Event", "Style", "Validation"],
-  Graph: ["Core", "Properties", "Event", "Style", "Validation"],
-  DownloadFile: ["Core", "Event", "Style", "Validation"],
-  Box: ["Core", "Event", "Style", "Validation"],
-  Properties: ["Core", "Properties", "Event", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  RankCard: ["Core", "Properties", "Event", "Style", "Validation"],
-  Slider: ["Core", "Components", "Event", "Style", "Validation"],
-  Timer: ["Core", "Event", "Style", "Validation"],
-  Rank: ["Core", "Event", "Style", "Validation"],
-  Button: ["Core", "Properties", "Event", "Style", "Validation"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
+  card: ["Core", "Properties", "Events", "Style", "Validation"],
+  UploadFile: ["Core", "Events", "Style", "Validation"],
+  Graph: ["Core", "Properties", "Events", "Style", "Validation"],
+  DownloadFile: ["Core", "Events", "Style", "Validation"],
+  Box: ["Core", "Events", "Style", "Validation"],
+  Properties: ["Core", "Properties", "Events", "Style", "Validation"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  Slider: ["Core", "Components", "Events", "Style", "Validation"],
+  Timer: ["Core", "Events", "Style", "Validation"],
+  Rank: ["Core", "Events", "Style", "Validation"],
+  Button: ["Core", "Properties", "Events", "Style", "Validation"],
   Array: ["Core", "Components", "Validation"],
-  Radio: ["Core", "Properties", "Event", "Style", "Validation"],
-  Text: ["Core", "Properties", "Event", "Style", "Validation"],
-  TextArea: ["Core", "Properties", "Event", "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"],
-  Stepper: ["Core", "Components", "Properties", "Event", "Style"],
-  DataGrid: ["Core", "Components", "Properties", "Event", "Style"],
-  InputSlider: ["Core", "Properties", "Event", "Style", "Validation"],
-  TreeMap: ["Core", "Components", "Properties", "Event", "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", "Event", "Style", "Validation"]
+  Thought: ["Core", "Properties", "Events", "Style", "Validation"]
 };
 function refreshPage(type, store2) {
-  var _a;
+  var _a, _b;
   const UiSchema = _.cloneDeep(componentBasicUiSchema(store2.theme.myTheme));
+  const currentConfig = JSON.parse(sessionStorage.getItem("pageFormdata"));
   if (type) {
     const sectionUiSchema = {
       Core: CoreSection,
       Value: ValueTab,
       Style: StyleSection,
-      Event: EventSection(store2.theme.myTheme),
+      Events: EventSection(store2.theme.myTheme),
       Components: TableSection(store2.theme.myTheme),
       Properties: buildPropertiesSection(type),
       Validation: ValidationSection
     };
     const elements = (_a = sectionLabels[type]) == null ? void 0 : _a.map((e) => sectionUiSchema[e]);
-    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Event", "Validation"];
+    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "Style", "Events", "Validation"];
     UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection(store2.theme.myTheme), ValidationSection];
   }
+  const path = (_b = store2.searchParams) == null ? void 0 : _b.get("path");
+  const lastDotIndex = path.lastIndexOf(".");
+  const parentPath = path.slice(0, lastDotIndex);
+  const parentObj = _.get(currentConfig, parentPath);
+  if ((parentObj == null ? void 0 : parentObj.type) === "Table") {
+    UiSchema.elements[0].elements[0].elements[4] = {
+      type: "Control",
+      scope: "#/properties/columnFormat",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Column Format"
+        }
+      }
+    };
+    UiSchema.elements[0].elements[0].elements[6] = {
+      type: "Control",
+      scope: "#/properties/filteringOptions",
+      options: {
+        widget: "SelectInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Filter Mode",
+          multiple: true
+        }
+      }
+    };
+    UiSchema.elements[0].elements[0].elements[5] = {
+      type: "Control",
+      scope: "#/properties/enableFilter",
+      options: {
+        widget: "RadioInputField"
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Enable Filter",
+          options: ["Yes", "No"]
+        }
+      }
+    }, 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[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"
+        }
+      }
+    };
+  }
   if (sessionStorage.getItem("copiedConfig")) {
     this.ElementPathSetter(UiSchema);
   }
@@ -8463,10 +8572,34 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       return getFormdataFromSessionStorage(path);
     },
     getSchema: function() {
+      var _a, _b, _c;
       const schema2 = _.cloneDeep(ComponentSchema);
       if (sessionStorage.getItem("copiedConfig")) {
         schema2.properties.RemoveItemButton.disabled = false;
       }
+      const config2 = JSON.parse(sessionStorage.getItem("pageFormdata"));
+      const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
+      const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
+      let pathArray = [{ label: (_c = config2.name) != null ? _c : "NewPage", path: `/PageMaster${id ? `?id=${id}` : ""}` }];
+      if (path) {
+        const pathArrayAll = path.split(".");
+        const arr = [];
+        pathArrayAll.map((e, i) => {
+          if (i === 0) {
+            arr.push(e);
+            return;
+          }
+          arr.push(`${arr[i - 1]}.${e}`);
+        });
+        arr.map((e) => {
+          const data = _.get(config2, e);
+          pathArray.push({
+            label: (data == null ? void 0 : data.name) || (data == null ? void 0 : data.eventType) || "NewComponent",
+            path: `/Component?path=${e}${id ? `&id=${id}` : ""}`
+          });
+        });
+      }
+      schema2.properties.pageName.path = pathArray;
       return schema2;
     },
     okHandler: () => okHandler(store2),
@@ -8579,6 +8712,10 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       const copiedFormData = getFormdataFromSessionStorage(copiedElementPath);
       this.ElementPathSetter(uiSchema, copiedFormData);
       sessionStorage.setItem("copiedConfig", JSON.stringify(copiedFormData));
+      store2.setNotify({
+        SuccessMessage: `${elementType} Copied Successfully`,
+        Success: true
+      });
       store2.setSchema(schema2);
       store2.setUiSchema(uiSchema);
     },
@@ -8604,15 +8741,15 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       const pastedElementPath = this.elementPathHandler(pastedElementParentPath, insertElementIndex, elementType);
       const copiedConfig = JSON.parse(sessionStorage.getItem("copiedConfig"));
       const notificationMessages = {
-        Event: " The event cannot be integrated into the component section.",
-        Component: "The component cannot be integrated into the event section."
+        Events: " The Events cannot be integrated into the component section.",
+        Component: "The component cannot be integrated into the Events section."
       };
       if (copiedConfig.Handler && elementType === "Component") {
         store2.setNotify({
-          FailMessage: notificationMessages.Event,
+          FailMessage: notificationMessages.Events,
           Fail: true
         });
-      } else if (copiedConfig.name && elementType === "Event") {
+      } else if (copiedConfig.name && elementType === "Events") {
         store2.setNotify({
           FailMessage: notificationMessages.Component,
           Fail: true
@@ -8638,8 +8775,33 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
       return parentPath ? `${parentPath}.events[${rowId}]` : `events[${rowId}]`;
     },
     ElementPathSetter: function(uiSchema, copiedFormData) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
       const formData = copiedFormData || JSON.parse(sessionStorage.getItem("copiedConfig"));
-      uiSchema.elements[2].elements[1].config.main.heading = `Copied Path: ${formData.pageName}`;
+      if ((_f = (_e = (_d = (_c = (_b = (_a = uiSchema == null ? void 0 : uiSchema.elements) == null ? void 0 : _a[1]) == null ? void 0 : _b.elements) == null ? void 0 : _c[0]) == null ? void 0 : _d.config) == null ? void 0 : _e.main) == null ? void 0 : _f.headerIcons) {
+        uiSchema.elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
+      } else if ((_n = (_m = (_l = (_k = (_j = (_i = (_h = (_g = uiSchema == null ? void 0 : uiSchema.elements) == null ? void 0 : _g[0]) == null ? void 0 : _h.elements) == null ? void 0 : _i[1]) == null ? void 0 : _j.elements) == null ? void 0 : _k[0]) == null ? void 0 : _l.config) == null ? void 0 : _m.main) == null ? void 0 : _n.headerIcons) {
+        uiSchema.elements[0].elements[1].elements[0].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.name}`;
+      }
+      if ((_t = (_s = (_r = (_q = (_p = (_o = uiSchema == null ? void 0 : uiSchema.elements) == null ? void 0 : _o[1]) == null ? void 0 : _p.elements) == null ? void 0 : _q[1]) == null ? void 0 : _r.config) == null ? void 0 : _s.main) == null ? void 0 : _t.headerIcons) {
+        uiSchema.elements[1].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Event: ${formData.eventType}`;
+      } else if ((_z = (_y = (_x = (_w = (_v = (_u = uiSchema == null ? void 0 : uiSchema.elements) == null ? void 0 : _u[0]) == null ? void 0 : _v.elements) == null ? void 0 : _w[1]) == null ? void 0 : _x.config) == null ? void 0 : _y.main) == null ? void 0 : _z.headerIcons) {
+        uiSchema.elements[0].elements[1].config.main.headerIcons.elements[1].widget.config.main.tooltipMessage = `Copied Component: ${formData.eventType}`;
+      }
+    },
+    onNavigatePopupYes: function() {
+      try {
+        store2.navigate(sessionStorage.getItem("pendingNavigatePath"));
+        store2.updateDialog(`pageNamepopup`);
+      } catch (e) {
+        store2.updateDialog(`pageNamepopup`);
+        store2.setNotify({
+          FailMessage: "Couldn't navigate page",
+          Fail: true
+        });
+      }
+    },
+    onNavigatePopupNo: function() {
+      store2.updateDialog(`pageNamepopup`);
     }
   };
 };
@@ -8790,18 +8952,18 @@ const EventSchema = {
     eventType: {
       type: "string",
       oneOf: [
-        { title: "Click Event", const: "onClick" },
-        { title: "Load Event", const: "onLoad" },
-        { title: "Change Event", const: "onChange" },
-        { title: "Mount Event", const: "onMount" },
+        { title: "Click", const: "onClick" },
+        { title: "Load", const: "onLoad" },
+        { title: "Change", const: "onChange" },
+        { title: "Mount", const: "onMount" },
         { title: "Success", const: "Success" },
-        { title: "onStart", const: "onStart" },
-        { title: "Cell Renderer", const: "onCellRenderer" },
-        { title: "File Upload Event", const: "onUpload" },
-        { title: "Back Event", const: "onBack" },
-        { title: "Next Event", const: "onNext" },
-        { title: "onRowMovement", const: "onRowMovement" },
-        { title: "File Download Event", const: "onDownload" },
+        { title: "Start", const: "onStart" },
+        { title: "Cell Render", const: "onCellRenderer" },
+        { title: "Upload", const: "onUpload" },
+        { title: "Back", const: "onBack" },
+        { title: "Next", const: "onNext" },
+        { title: "Row Movement", const: "onRowMovement" },
+        { title: "Download", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
     },
@@ -8809,7 +8971,7 @@ const EventSchema = {
       type: "string",
       oneOf: [
         { title: "Custom", const: "custom" },
-        { title: "Api", const: "api" },
+        { title: "API", const: "api" },
         { title: "Inbuilt Function", const: "inBuiltFunction" },
         { title: "Refresh", const: "refresh" }
       ]
@@ -8838,6 +9000,9 @@ const EventSchema = {
     },
     RemoveItemButton: {
       disabled: true
+    },
+    pageName: {
+      path: [{ label: "defaultLabel", path: "defaultPath" }]
     }
   },
   required: ["eventType", "Handler"]
@@ -8846,7 +9011,7 @@ const EventUiSchema = (theme) => {
   var _a;
   const uiSchema = {
     type: "HorizontalLayout",
-    heading: "Page-Event",
+    heading: "Page-Events",
     elements: [
       {
         type: "TabLayout",
@@ -8980,7 +9145,7 @@ const EventUiSchema = (theme) => {
             elements: [
               {
                 accessorKey: "eventType",
-                header: "Event Type",
+                header: "Event's Type",
                 size: 300,
                 type: "string"
               },
@@ -8992,7 +9157,7 @@ const EventUiSchema = (theme) => {
               },
               {
                 accessorKey: "Edit_Approve_Records",
-                header: "Edit Widget",
+                header: "Edit",
                 type: "action",
                 size: 150,
                 widget: {
@@ -9149,15 +9314,17 @@ const EventUiSchema = (theme) => {
             config: {
               layout: 11,
               main: {
-                heading: "Are you sure you want to delete ?"
+                heading: "Are you sure you want to delete this Event ?"
               },
               style: {
-                marginTop: "-20px",
                 fontSize: "20px",
                 "&.MuiTypography-root": {
-                  padding: "10px 30px 20px 30px",
+                  padding: "0px 20px",
                   textAlign: "center",
-                  lineHeight: "1"
+                  lineHeight: "1.2",
+                  fontWeight: "normal",
+                  fontSize: "18px",
+                  marginBottom: theme.spacing(5)
                 }
               }
             }
@@ -9181,13 +9348,14 @@ const EventUiSchema = (theme) => {
                     name: "No",
                     startIcon: "ApproveIcon",
                     variant: "contained",
-                    color: "info",
                     type: "text",
                     onClick: "deletePopUpEvent",
                     size: "large"
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     left: 0,
                     width: "50%",
@@ -9215,7 +9383,6 @@ const EventUiSchema = (theme) => {
                   layout: 6,
                   main: {
                     name: "Yes",
-                    startIcon: "ApproveIcon",
                     variant: "contained",
                     color: "error",
                     type: "text",
@@ -9224,6 +9391,8 @@ const EventUiSchema = (theme) => {
                   },
                   style: {
                     position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
                     bottom: 0,
                     right: 0,
                     width: "50%",
@@ -9248,23 +9417,23 @@ const EventUiSchema = (theme) => {
         type: "Control",
         scope: "#/properties/pageName",
         options: {
-          widget: "Box"
+          widget: "Breadcrumb"
         },
         config: {
           layout: 12,
           main: {
-            heading: ""
+            onNavigatePopupNo: "onNavigatePopupNo",
+            onNavigatePopupYes: "onNavigatePopupYes"
           },
           style: {
             paddingLeft: theme.spacing(3),
-            width: "100%",
-            fontSize: "10px",
             color: theme.palette.grey[600],
+            fontSize: "10px",
             position: "fixed",
             bottom: "24px",
-            backgroundColor: theme.palette.background.default,
             borderBottom: `1px solid ${theme.palette.common.black}29`,
-            borderTop: `1px solid ${theme.palette.common.black}29`
+            borderTop: `1px solid ${theme.palette.common.black}29`,
+            backgroundColor: theme.palette.background.default
           }
         }
       },
@@ -9555,15 +9724,21 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       const formdata = await this.getFormData();
       store2.setFormdata(formdata);
       const schema2 = await this.getSchema();
+      console.log("SettingSchema>>", schema2);
       store2.setSchema(schema2);
       this.refreshPage(formdata.Handler, store2);
     },
     refreshPage: (handlerType, store22) => {
+      var _a, _b, _c;
       const uiSchema = _.cloneDeep(EventUiSchema(store22.theme.myTheme));
       const schema2 = _.cloneDeep(EventSchema);
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[0].elements[0].elements[2] = getRadioInputField("isSync", "Run in Sync", ["Yes", "No"]);
+          uiSchema.elements[0].elements[0].elements[2] = getRadioInputField(
+            "isSync",
+            "Run in Sync",
+            ["Yes", "No"]
+          );
           uiSchema.elements[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
@@ -9576,14 +9751,26 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
               style: {}
             }
           };
-          uiSchema.elements[0].elements[0].elements[4] = getTextArea("eventCode", "Write Custom Code", false);
+          uiSchema.elements[0].elements[0].elements[4] = getTextArea(
+            "eventCode",
+            "Write Custom Code",
+            false
+          );
           schema2.required = ["eventType", "Handler", "eventCode"];
         } else if (handlerType === "api") {
-          uiSchema.elements[0].elements[0].elements[2] = emptyBox$1("emptyBox", { xs: 0, sm: 0, md: 4, lg: 6 });
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox$1("emptyBox", {
+            xs: 0,
+            sm: 0,
+            md: 4,
+            lg: 6
+          });
           uiSchema.elements[0].elements[0].elements[3] = APISection;
           schema2.required = ["eventType", "Handler", "method", "path"];
         } else if (handlerType === "inBuiltFunction") {
-          uiSchema.elements[0].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
+          uiSchema.elements[0].elements[0].elements[2] = getSelectField(
+            "inBuiltFunctionType",
+            "Function Name"
+          );
           uiSchema.elements[0].elements[0].elements[3] = {
             type: "Control",
             scope: "#/properties/emptyBox",
@@ -9596,10 +9783,19 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
               style: {}
             }
           };
-          uiSchema.elements[0].elements[0].elements[4] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true);
+          uiSchema.elements[0].elements[0].elements[4] = getTextArea(
+            "funcParametersCode",
+            "Write Custom Code for Functions Parameter",
+            true
+          );
           schema2.required = ["eventType", "Handler", "inBuiltFunctionType"];
         } else if (handlerType === "refresh") {
-          uiSchema.elements[0].elements[0].elements[2] = emptyBox$1("emptyBox", { xs: 0, sm: 0, md: 4, lg: 6 });
+          uiSchema.elements[0].elements[0].elements[2] = emptyBox$1("emptyBox", {
+            xs: 0,
+            sm: 0,
+            md: 4,
+            lg: 6
+          });
           uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
           schema2.properties.refreshElements.required = ["value"];
           schema2.properties.refreshElements.items.required = ["value"];
@@ -9613,9 +9809,34 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
         ];
       }
       if (sessionStorage.getItem("copiedConfig")) {
-        Component(store22, dynamicData2, submitHandler, service2).ElementPathSetter(uiSchema);
+        Component(store22, dynamicData2, submitHandler, service2).ElementPathSetter(
+          uiSchema
+        );
         schema2.properties.RemoveItemButton.disabled = false;
       }
+      const config2 = JSON.parse(sessionStorage.getItem("pageFormdata"));
+      const path = (_a = store22.searchParams) == null ? void 0 : _a.get("path");
+      const id = (_b = store22.searchParams) == null ? void 0 : _b.get("id");
+      let pathArray = [{ label: (_c = config2.name) != null ? _c : "NewPage", path: `/PageMaster${id ? `?id=${id}` : ""}` }];
+      if (path) {
+        const pathArrayAll = path.split(".");
+        const arr = [];
+        pathArrayAll.map((e, i) => {
+          if (i === 0) {
+            arr.push(e);
+            return;
+          }
+          arr.push(`${arr[i - 1]}.${e}`);
+        });
+        arr.map((e) => {
+          const data = _.get(config2, e);
+          pathArray.push({
+            label: (data == null ? void 0 : data.name) || (data == null ? void 0 : data.eventType) || "NewComponent",
+            path: (data == null ? void 0 : data.eventType) ? `/ComponentEvents?path=${e}${id ? `&id=${id}` : ""}` : `/Component?path=${e}${id ? `&id=${id}` : ""}`
+          });
+        });
+      }
+      schema2.properties.pageName.path = pathArray;
       store22.setSchema(schema2);
       store22.setUiSchema(uiSchema);
     },
@@ -9624,10 +9845,34 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       return EventUiSchema;
     },
     getSchema: () => {
+      var _a, _b, _c;
       const schema2 = _.cloneDeep(EventSchema);
       if (sessionStorage.getItem("copiedConfig")) {
         schema2.properties.RemoveItemButton.disabled = false;
       }
+      const config2 = JSON.parse(sessionStorage.getItem("pageFormdata"));
+      const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
+      const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
+      let pathArray = [{ label: (_c = config2.name) != null ? _c : "NewPage", path: `/PageMaster${id ? `?id=${id}` : ""}` }];
+      if (path) {
+        const pathArrayAll = path.split(".");
+        const arr = [];
+        pathArrayAll.map((e, i) => {
+          if (i === 0) {
+            arr.push(e);
+            return;
+          }
+          arr.push(`${arr[i - 1]}.${e}`);
+        });
+        arr.map((e) => {
+          const data = _.get(config2, e);
+          pathArray.push({
+            label: (data == null ? void 0 : data.name) || (data == null ? void 0 : data.eventType) || "NewComponent",
+            path: (data == null ? void 0 : data.eventType) ? `/ComponentEvents?path=${e}${id ? `&id=${id}` : ""}` : `/Component?path=${e}${id ? `&id=${id}` : ""}`
+          });
+        });
+      }
+      schema2.properties.pageName.path = _.cloneDeep(pathArray);
       return schema2;
     },
     okHandler: () => okHandler(store2),
@@ -9635,7 +9880,10 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     onChange: function() {
       var _a, _b, _c;
       if (((_a = store2 == null ? void 0 : store2.formData) == null ? void 0 : _a.Handler) !== ((_b = store2 == null ? void 0 : store2.newData) == null ? void 0 : _b.Handler) && ((_c = store2 == null ? void 0 : store2.newData) == null ? void 0 : _c.Handler) !== void 0) {
-        this.refreshPage(store2.newData.Handler || store2.formdata.Handler, store2);
+        this.refreshPage(
+          store2.newData.Handler || store2.formdata.Handler,
+          store2
+        );
       }
     },
     addEvent: function() {
@@ -9661,7 +9909,9 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       this.setPage();
     },
     deleteEvent: async function() {
-      await Component(store2, dynamicData2, submitHandler, service2).deleteEvent(false);
+      await Component(store2, dynamicData2, submitHandler, service2).deleteEvent(
+        false
+      );
       store2.updateDialog("popUpEvent");
     },
     backHandler: function() {
@@ -9673,10 +9923,30 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
       store2.updateDialog("popUpEvent");
     },
     copyPasteElement: function() {
-      Component(store2, dynamicData2, submitHandler, service2).copyPasteElement(store2, this.setPage.bind(this));
+      Component(store2, dynamicData2, submitHandler, service2).copyPasteElement(
+        store2,
+        this.setPage.bind(this)
+      );
     },
     RemoveItemButton: function() {
-      Component(store2, dynamicData2, submitHandler, service2).RemoveItemButton(store2);
+      Component(store2, dynamicData2, submitHandler, service2).RemoveItemButton(
+        store2
+      );
+    },
+    onNavigatePopupYes: function() {
+      try {
+        store2.navigate(sessionStorage.getItem("pendingNavigatePath"));
+        store2.updateDialog(`pageNamepopup`);
+      } catch (e) {
+        store2.updateDialog(`pageNamepopup`);
+        store2.setNotify({
+          FailMessage: "Couldn't navigate page",
+          Fail: true
+        });
+      }
+    },
+    onNavigatePopupNo: function() {
+      store2.updateDialog(`pageNamepopup`);
     }
   };
 };
@@ -9847,16 +10117,17 @@ function executeCustomHandler(params) {
   }
 }
 function mergeFormdata(handlerResponse, componentName, eventConfig, store2, service2, formDataHolder) {
+  var _a, _b, _c;
   if (eventConfig.type === "Select" && (handlerResponse == null ? void 0 : handlerResponse.data)) {
     if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
       store2.setSchema((pre) => {
-        var _a;
+        var _a2;
         return {
           ...pre,
           properties: {
             ...pre.properties,
             [componentName]: {
-              ...(_a = pre.properties) == null ? void 0 : _a[componentName],
+              ...(_a2 = pre.properties) == null ? void 0 : _a2[componentName],
               oneOf: handlerResponse.data
             }
           }
@@ -9866,13 +10137,13 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
   } else if (eventConfig.type === "MultipleSelect" && (handlerResponse == null ? void 0 : handlerResponse.data)) {
     if (!_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data)) {
       store2.setSchema((pre) => {
-        var _a;
+        var _a2;
         return {
           ...pre,
           properties: {
             ...pre.properties,
             [componentName]: {
-              ...(_a = pre.properties) == null ? void 0 : _a[componentName],
+              ...(_a2 = pre.properties) == null ? void 0 : _a2[componentName],
               type: "array",
               items: {
                 oneOf: handlerResponse == null ? void 0 : handlerResponse.data
@@ -9892,6 +10163,14 @@ function mergeFormdata(handlerResponse, componentName, eventConfig, store2, serv
         return { ...pre, ...handlerResponse == null ? void 0 : handlerResponse.data };
       });
     }
+  } else if (eventConfig.type === "Table" && eventConfig.lazyLoading) {
+    if (handlerResponse && (handlerResponse == null ? void 0 : handlerResponse.data)) {
+      formDataHolder[componentName] = (_a = handlerResponse.data) == null ? void 0 : _a.data;
+      formDataHolder[`${componentName}_RowCount`] = (_c = (_b = handlerResponse.data) == null ? void 0 : _b.meta) == null ? void 0 : _c.totalRowCount;
+      store2.setFormdata((pre) => {
+        return { ...pre, ...formDataHolder };
+      });
+    }
   } else {
     if (handlerResponse) {
       formDataHolder[componentName] = handlerResponse.data;
@@ -10027,13 +10306,7 @@ const extractEvents = (eventConfig) => {
   return eventGroups;
 };
 var service = (funcParams) => {
-  eventGroups = {};
   const formDataHolder = {};
-  if (pageData) {
-    if (!lodash.exports.isEmpty(pageData) && typeof pageData === "object") {
-      eventGroups = extractEvents(pageData == null ? void 0 : pageData.config);
-    }
-  }
   let executeEventsParameters = {
     config: {},
     componentName: "",
@@ -10042,26 +10315,18 @@ var service = (funcParams) => {
     userValue: funcParams.userValue,
     service: funcParams.service,
     serviceHolder: { downloadFile: downloadFile$1, download: doDownload, ...funcParams.functionsProvider },
-    eventGroups,
     functionsProvider: funcParams.functionsProvider,
     formDataHolder
   };
   return {
     setPage: async function() {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+      funcParams.store.setAdditionalErrors([]);
       funcParams.store.setFormdata({});
+      funcParams.store.setSchema({ type: "object", properties: {} });
       funcParams.store.newData = {};
-      const pageBasicDetailString = sessionStorage.getItem("pagemasterMetaData");
-      if (pageBasicDetailString) {
-        pageData = JSON.parse(pageBasicDetailString);
-      } else {
-        pageData = await funcParams.pageDataProvider();
-        sessionStorage.setItem("pagemasterMetaData", JSON.stringify({
-          schema: pageData == null ? void 0 : pageData.schema,
-          uiSchema: pageData == null ? void 0 : pageData.uiSchema,
-          config: pageData == null ? void 0 : pageData.config
-        }));
-      }
+      eventGroups = {};
+      pageData = await funcParams.pageDataProvider();
       const config2 = pageData == null ? void 0 : pageData.config;
       const uiSchema = pageData == null ? void 0 : pageData.uiSchema;
       const event2 = new CustomEvent("pageNameChanged", {
@@ -10175,7 +10440,8 @@ var service = (funcParams) => {
         }
       );
       const schema2 = (_m = pageData == null ? void 0 : pageData.schema) != null ? _m : { type: "object", properties: {} };
-      eventGroups = extractEvents(config2);
+      const newEventGroups = extractEvents(config2);
+      eventGroups = newEventGroups;
       executeEventsParameters = {
         config: {},
         componentName: "",
@@ -10185,7 +10451,7 @@ var service = (funcParams) => {
         service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
         serviceHolder: this,
-        eventGroups,
+        eventGroups: newEventGroups,
         formDataHolder
       };
       await executeRefreshHandler({
@@ -10196,8 +10462,8 @@ var service = (funcParams) => {
         userValue: funcParams.userValue,
         service: funcParams.service,
         serviceHolder: this,
-        eventGroups,
-        formDataHolder
+        eventGroups: newEventGroups,
+        formDataHolder: {}
       });
       funcParams.store.setSchema(
         (pre) => {
@@ -10212,11 +10478,11 @@ var service = (funcParams) => {
       funcParams.store.setUiSchema(uiSchema);
     },
     onCellRenderer: (cellParams) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (eventGroups.onCellRenderer) {
         let finalResponse = {};
         const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || ((_c = (_b = funcParams == null ? void 0 : funcParams.dynamicData) == null ? void 0 : _b.path) == null ? void 0 : _c.split(".")[0]);
-        for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onCellRenderer[path]) {
+        for (const eventConfig of (_d = eventGroups == null ? void 0 : eventGroups.onCellRenderer) == null ? void 0 : _d[path]) {
           executeEventsParameters.store.functionParameters = cellParams;
           finalResponse = executeEvents({
             ...executeEventsParameters,
@@ -10271,7 +10537,7 @@ var service = (funcParams) => {
           { key: "searchValue", value: param.serachValue },
           { key: "currentValue", value: param.currentValue }
         ];
-        const response = await this.callExecuteEvents(param, apiBody);
+        const response = await this.callExecuteEvents(param, apiBody, "onLoad");
         return response == null ? void 0 : response.data;
       }
     },
@@ -10820,6 +11086,9 @@ const buildTextField = (config2, componentScope2) => {
   if (config2.style) {
     inputField.config.style = JSON.parse(config2.style);
   }
+  if (config2.multiline) {
+    inputField.config.main.multiline = config2.multiline === "YES" ? true : false;
+  }
   if (config2.InputFormatingAndMasking) {
     inputField.config.main.formatStrArray = config2.InputFormatingAndMasking.map((e) => e.formatElement);
   }
@@ -10932,6 +11201,7 @@ var Table = {
     main: {
       onMount: "onMount",
       enableExpandAll: true,
+      headerIcons: {},
       allRowData: [],
       downloadAllData: false,
       columns: {
@@ -11113,7 +11383,8 @@ function Card(theme) {
       wrapperStyle: {
         position: "relative",
         top: "50%",
-        transform: "translateY(-50%)"
+        transform: "translateY(-50%)",
+        marginBottom: 0
       },
       componentsBoxStyle: {
         boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
@@ -11152,7 +11423,8 @@ function Card(theme) {
                 gap: 0
               },
               wrapperStyle: {
-                background: "transparent"
+                background: "transparent",
+                marginBottom: 0
               },
               componentsBoxStyle: {
                 flexDirection: "column",
@@ -11173,7 +11445,8 @@ function Card(theme) {
                     gap: 0
                   },
                   wrapperStyle: {
-                    background: "transparent"
+                    background: "transparent",
+                    marginBottom: 0
                   },
                   componentsBoxStyle: {
                     flexDirection: "row",
@@ -11206,6 +11479,7 @@ function Card(theme) {
                         justifyContent: "flex-start",
                         width: "auto",
                         margin: "-8px",
+                        marginLeft: "-24px",
                         height: 0
                       }
                     },
@@ -11230,7 +11504,7 @@ function Card(theme) {
                         width: "auto",
                         margin: "-8px",
                         position: "absolute",
-                        left: "8px"
+                        left: "24px"
                       }
                     },
                     options: {
@@ -11254,8 +11528,7 @@ function Card(theme) {
                     background: "inherit",
                     width: "calc(100%+8px)",
                     margin: "-8px",
-                    marginTop: { xs: "0px", md: "12px" },
-                    lineHeight: "1"
+                    marginTop: { xs: "16px", md: "20px" }
                   },
                   layout: 12
                 },
@@ -12024,41 +12297,6 @@ const buildThoughtOfTheDay = (config2, componentScope2) => {
   }
   return thought;
 };
-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) => {
-  const PdfViewer = _.cloneDeep(pdfViewer);
-  PdfViewer.config.main.label = config2.label;
-  if (config2.name) {
-    PdfViewer.scope = `#/properties/${config2.name}`;
-  }
-  if (config2.layout) {
-    PdfViewer.config.layout = createLayoutFormat(config2.layout);
-  }
-  if (config2.label) {
-    PdfViewer.config.main.title = config2.label;
-  }
-  if (config2.style) {
-    PdfViewer.config.style = JSON.parse(config2.style);
-  }
-  return PdfViewer;
-};
 let schema = {
   type: "object",
   properties: {},
@@ -12313,9 +12551,6 @@ const buildUiSchema = (config2, store2) => {
     case "Thought":
       elements = buildThoughtOfTheDay(config2, componentScope2);
       break;
-    case "PdfViewer":
-      elements = buildPdfViewer(config2);
-      break;
     default:
       schema = {
         type: "object",
@@ -12345,41 +12580,49 @@ const buildUiSchema = (config2, store2) => {
       });
     } else if (config2.type == "Table") {
       const sizeMap = {};
-      const filterMap = {};
       if (config2.sizeHolder) {
         config2.sizeHolder.map((e, i) => {
           sizeMap[e.keyName] = e.value;
         });
       }
-      if (config2.enableColumnFilter) {
-        config2.enableColumnFilter.map((e) => {
-          filterMap[e.keyName] = true;
-        });
-      }
-      elements.elements = config2.elements.map((cellElem, elemInd) => {
-        var _a, _b;
+      const tableHeaderElements = [];
+      const tableActionElement = [];
+      const rowElements = [];
+      config2.elements.filter((cellElem, elemInd) => {
+        const commonProperties = {
+          accessorKey: cellElem.name,
+          type: cellElem.columnFormat,
+          header: cellElem.label || cellElem.name,
+          size: sizeMap[cellElem.name] || 180,
+          enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
+          columnFilterModeOptions: cellElem.filteringOptions,
+          enableSorting: cellElem.enableSorting === "No" ? false : true,
+          columnKey: cellElem.columnKey
+        };
         if (cellElem.type) {
-          return {
-            accessorKey: cellElem.name,
-            header: cellElem.label || cellElem.name,
-            size: sizeMap[cellElem.name] || 180,
-            type: cellElem.columnFormat,
+          if (cellElem.elementType == "action") {
+            const actionElem = buildUiSchema(cellElem, store2);
+            tableActionElement.push(actionElem);
+            return false;
+          }
+          if (cellElem.elementType == "tableHeader") {
+            const headerElem = buildUiSchema(cellElem, store2);
+            tableHeaderElements.push({ widget: headerElem });
+            return false;
+          }
+          const tableElem = {
             widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store2) : void 0,
             elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store2)) : [],
-            enableColumnFilter: Object.keys(filterMap).length === 0 ? true : (_a = filterMap[cellElem.name]) != null ? _a : false,
-            columnFilterModeOptions: config2.filteringOptions
+            ...commonProperties
           };
+          rowElements.push(tableElem);
         } else {
-          return {
-            accessorKey: cellElem.name,
-            type: cellElem.columnFormat,
-            header: cellElem.label || cellElem.name,
-            size: sizeMap[cellElem.name] || 180,
-            enableColumnFilter: Object.keys(filterMap).length === 0 ? true : (_b = filterMap[cellElem.name]) != null ? _b : false,
-            columnFilterModeOptions: config2.filteringOptions
-          };
+          rowElements.push({ ...commonProperties });
         }
       });
+      elements.elements = rowElements;
+      elements.config.action = tableActionElement;
+      elements.config.main.headerIcons.elements = tableHeaderElements;
     } else if (config2.type == "Array") {
       elements.options.detail.elements = config2.elements.map((e, elemInd) => {
         return buildUiSchema(e, store2);