impaktapps-ui-builder 0.0.352 → 0.0.353

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

@@ -395,12 +395,12 @@ const PageMasterUiSchema = {
       config: {
         layout: 11.7,
         main: {
-          name: "Submit Page",
+          name: "Save",
           startIcon: "ApproveIcon",
           variant: "contained",
           color: "info",
           type: "text",
-          onClick: "submitPageHandler",
+          onClick: "saveHandler",
           size: "small"
         },
         style: {
@@ -5876,16 +5876,17 @@ const ComponentSchema = {
         { title: "Empty Box", const: "EmptyBox" },
         { title: "File", const: "FileInput" },
         { title: "Graph", const: "Graph" },
-        { title: "Input Slider", const: "InputSlider" },
         { title: "Label", const: "Box" },
         { title: "LeaderBoard", const: "LeaderBoard" },
         { title: "MultipleSelect", const: "MultipleSelect" },
         { title: "PanCardText", const: "PanCardText" },
+        { title: "Popup Container", const: "PopUp" },
         { title: "ProgressBar", const: "ProgressBar" },
         { title: "ProgressBar Card", const: "ProgressBarCard" },
         { title: "Select", const: "Select" },
         { title: "Slider", const: "Slider" },
         { title: "SpeedoMeter", const: "SpeedoMeter" },
+        { title: "Stepper Container", const: "Stepper" },
         { title: "Radio", const: "Radio" },
         { title: "Rank", const: "Rank" },
         { title: "Rank Card", const: "RankCard" },
@@ -5981,6 +5982,17 @@ const ComponentSchema = {
         }
       }
     },
+    skipAvailable: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          skipId: {
+            type: "string"
+          }
+        }
+      }
+    },
     Table_Download_Keys_Name: {
       type: "array",
       items: {
@@ -6320,7 +6332,7 @@ const componentBasicUiSchema = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 11, sm: 11, md: 8, lg: 8 }
+        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
       },
       options: {
         widget: "EmptyBox"
@@ -6336,11 +6348,39 @@ const componentBasicUiSchema = {
         layout: {
           xs: 11,
           sm: 11,
-          md: 3,
-          lg: 3
+          md: 2.5,
+          lg: 2.5
         },
         main: {
-          name: "Save",
+          name: "Ok",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "okHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          float: "right"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btnSubmit",
+      options: {
+        widget: "Button"
+      },
+      config: {
+        layout: {
+          xs: 11,
+          sm: 11,
+          md: 2.5,
+          lg: 2.5
+        },
+        main: {
+          name: "Save & Exit",
           startIcon: "ApproveIcon",
           variant: "contained",
           color: "info",
@@ -6364,97 +6404,6 @@ const componentBasicUiSchema = {
     }
   ]
 };
-var buildConfig = (FormData) => {
-  const formData = _.cloneDeep(FormData);
-  let component = {};
-  if (formData.pageName) {
-    delete formData.pageName;
-  }
-  if (formData.eventsSelected) {
-    delete formData.eventsSelected;
-  }
-  if (formData.type === "Table" || formData.type === "WrapperSection" || formData.type === "TabSection") {
-    component.elements = formData.elements || [];
-    if (formData.elements) {
-      delete formData.elements;
-    }
-  }
-  component.events = formData.events || [];
-  if (formData.events) {
-    delete formData.events;
-  }
-  component = { ...formData, ...component };
-  return component;
-};
-const createLayoutFormat = (config) => {
-  if (_.isEmpty(config)) {
-    return {
-      xs: 11,
-      sm: 11,
-      md: 5.5,
-      lg: 5.5
-    };
-  }
-  let data2 = {};
-  config.map((e) => {
-    data2[e.key || "xs"] = +e.value || 5.5;
-  });
-  return data2;
-};
-const flatObjectValueInArray = (config) => {
-  const keyName = Object.keys(config[0])[0];
-  const data2 = config.map((e) => {
-    return e[keyName];
-  });
-  return data2;
-};
-const getNavigationHistory = (config, path) => {
-  if (path) {
-    let urlRoutes = config.name;
-    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 data2 = _.get(config, e);
-      if (data2) {
-        urlRoutes = urlRoutes + ` >    ${(data2 == null ? void 0 : data2.name) || (data2 == null ? void 0 : data2.eventType)}`;
-      } else {
-        urlRoutes = urlRoutes + " > NewComponent";
-      }
-    });
-    return { pageName: urlRoutes };
-  }
-  return void 0;
-};
-const saveFormdataInLocalStorage = (formData, path) => {
-  let updatedFormdata;
-  if (path) {
-    const pageFormdata = getFormdataFromLocalStorage();
-    updatedFormdata = _.set(pageFormdata, path, buildConfig(formData));
-  } else {
-    updatedFormdata = buildConfig(formData);
-  }
-  localStorage.setItem("pageFormdata", JSON.stringify(updatedFormdata));
-  return updatedFormdata;
-};
-const getFormdataFromLocalStorage = (path) => {
-  const pageFormdata = localStorage.getItem("pageFormdata") ? JSON.parse(localStorage.getItem("pageFormdata")) : void 0;
-  let returnValue;
-  if (path) {
-    returnValue = _.get(pageFormdata, path);
-    returnValue = { ...returnValue, ...getNavigationHistory(pageFormdata, path) };
-  }
-  if (!returnValue) {
-    returnValue = getNavigationHistory(pageFormdata, path);
-  }
-  return returnValue || pageFormdata;
-};
 const CoreSection = {
   type: "HorizontalLayout",
   elements: [
@@ -6837,12 +6786,24 @@ const GraphSection = {
 const buildPropertiesSection = function(type) {
   let uiSchema = _.cloneDeep(GraphSection);
   switch (type) {
-    case "InputSlider":
+    case "Stepper":
       uiSchema.elements = [
-        getInputField("max", "Max Limit"),
-        getInputField("step", "Step"),
-        getInputField("min", "Min Limit"),
-        getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"])
+        getRadioInputField("complete", "Complete Needed", ["YES", "NO"]),
+        getRadioInputField("resetButton", "Reset Button", ["YES", "NO"]),
+        getInputField("resetText", "Reset Text"),
+        getInputField("completeText", "Complete Text"),
+        getSelectField("orientation", "Orientation Type"),
+        getArrayControl("sectionLabels", "label"),
+        getArrayControl("skipAvailable", "skipId"),
+        EmptyBox
+      ];
+      break;
+    case "PopUp":
+      uiSchema.elements = [
+        getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
+        getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
+        getInputField("maxWidth", "Max. Width"),
+        EmptyBox
       ];
       break;
     case "Text":
@@ -7230,6 +7191,150 @@ const ValidationSection = {
     }
   ]
 };
+var buildConfig = (FormData) => {
+  const formData = _.cloneDeep(FormData);
+  let component = {};
+  if (formData.pageName) {
+    delete formData.pageName;
+  }
+  if (formData.eventsSelected) {
+    delete formData.eventsSelected;
+  }
+  if (formData.type === "Table" || formData.type === "WrapperSection" || formData.type === "TabSection") {
+    component.elements = formData.elements || [];
+    if (formData.elements) {
+      delete formData.elements;
+    }
+  }
+  component.events = formData.events || [];
+  if (formData.events) {
+    delete formData.events;
+  }
+  component = { ...formData, ...component };
+  return component;
+};
+const createLayoutFormat = (config) => {
+  if (_.isEmpty(config)) {
+    return {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
+    };
+  }
+  let data2 = {};
+  config.map((e) => {
+    data2[e.key || "xs"] = +e.value || 5.5;
+  });
+  return data2;
+};
+const flatObjectValueInArray = (config) => {
+  const keyName = Object.keys(config[0])[0];
+  const data2 = config.map((e) => {
+    return e[keyName];
+  });
+  return data2;
+};
+const clearFromLocalStorage = () => {
+  localStorage.removeItem("pageFormdata");
+};
+const getNavigationHistory = (config, path) => {
+  if (path) {
+    let urlRoutes = config.name;
+    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 data2 = _.get(config, e);
+      if (data2) {
+        urlRoutes = urlRoutes + ` >    ${(data2 == null ? void 0 : data2.name) || (data2 == null ? void 0 : data2.eventType)}`;
+      } else {
+        urlRoutes = urlRoutes + " > NewComponent";
+      }
+    });
+    return { pageName: urlRoutes };
+  }
+  return void 0;
+};
+const saveFormdataInLocalStorage = (formData, path) => {
+  let updatedFormdata;
+  if (path) {
+    const pageFormdata = getFormdataFromLocalStorage();
+    updatedFormdata = _.set(pageFormdata, path, buildConfig(formData));
+  } else {
+    updatedFormdata = buildConfig(formData);
+  }
+  localStorage.setItem("pageFormdata", JSON.stringify(updatedFormdata));
+  return updatedFormdata;
+};
+const getFormdataFromLocalStorage = (path) => {
+  const pageFormdata = localStorage.getItem("pageFormdata") ? JSON.parse(localStorage.getItem("pageFormdata")) : void 0;
+  let returnValue;
+  if (path) {
+    returnValue = _.get(pageFormdata, path);
+    returnValue = { ...returnValue, ...getNavigationHistory(pageFormdata, path) };
+  }
+  if (!returnValue) {
+    returnValue = getNavigationHistory(pageFormdata, path);
+  }
+  return returnValue || pageFormdata;
+};
+async function saveHandler(store2, service2, submitHandler, pageName) {
+  var _a, _b;
+  const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
+  const path = (_b = store2.searchParams) == null ? void 0 : _b.get("path");
+  saveFormdataInLocalStorage(store2.ctx.core.data, path);
+  const config = JSON.parse(localStorage.getItem("pageFormdata"));
+  if (_.isEmpty(store2.ctx.core.errors)) {
+    try {
+      const saveReturn = await submitHandler(store2, service2, config);
+      navigateHandler(store2, true, pageName ? `/${pageName}?id=${id}` : "/PageMasterRecords");
+    } catch (err) {
+      navigateHandler(store2, false);
+    }
+  }
+}
+const navigateHandler = (store2, isSubmitted, pageName) => {
+  if (isSubmitted) {
+    localStorage.removeItem("pageFormdata");
+    store2.navigate(pageName || -1);
+    store2.setNotify({
+      SuccessMessage: "Submit Successfully",
+      Success: true
+    });
+  } else {
+    store2.setValidation("ValidateAndShow");
+    store2.setNotify({
+      Fail: true,
+      FailMessage: "Errors on Page"
+    });
+  }
+};
+function okHandler(store2) {
+  var _a;
+  const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
+  console.log(store2.ctx.core.errors);
+  if (_.isEmpty(store2.ctx.core.errors)) {
+    saveFormdataInLocalStorage(store2.ctx.core.data, path);
+    store2.navigate(-1);
+    store2.setNotify({
+      SuccessMessage: "Save Successfully",
+      Success: true
+    });
+  } else {
+    store2.setValidation("ValidateAndShow");
+    store2.setNotify({
+      Fail: true,
+      FailMessage: "Errors on Page"
+    });
+  }
+}
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "style", "Event", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "style", "Event", "Validation"],
@@ -7254,7 +7359,8 @@ const sectionLabels = {
   Radio: ["Core", "Properties", "style", "Event", "Validation"],
   Text: ["Core", "Properties", "style", "Event", "Validation"],
   TextArea: ["Core", "Properties", "style", "Event", "Validation"],
-  InputSlider: ["Core", "Properties", "style", "Event", "Validation"]
+  PopUp: ["Core", "Components", "Properties", "style"],
+  Stepper: ["Core", "Components", "Properties", "Event", "style"]
 };
 const refreshPage = (type, store2) => {
   var _a;
@@ -7275,7 +7381,7 @@ const refreshPage = (type, store2) => {
   }
   store2.setUiSchema(UiSchema);
 };
-var Component = (store2, dynamicData2) => {
+var Component = (store2, dynamicData2, submitHandler, service2) => {
   return {
     setPage: async function() {
       const formdata = await this.getFormdata();
@@ -7285,7 +7391,7 @@ var Component = (store2, dynamicData2) => {
       this.refreshPage(formdata == null ? void 0 : formdata.type, store2);
     },
     refreshPage,
-    getFormdata: async function() {
+    getFormdata: function() {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       return getFormdataFromLocalStorage(path);
@@ -7293,37 +7399,20 @@ var Component = (store2, dynamicData2) => {
     getSchema: function() {
       return ComponentSchema;
     },
-    saveHandler: async function() {
-      var _a;
-      const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      console.log(store2.ctx.core.errors);
-      if (_.isEmpty(store2.ctx.core.errors)) {
-        saveFormdataInLocalStorage(store2.formData, path);
-        store2.navigate(-1);
-        store2.setNotify({
-          SuccessMessage: "Save Successfully",
-          Success: true
-        });
-      } else {
-        store2.setValidation("ValidateAndShow");
-        store2.setNotify({
-          Fail: true,
-          FailMessage: "Errors on Page"
-        });
-      }
-    },
+    okHandler: () => okHandler(store2),
+    saveHandler: async () => await saveHandler(store2, service2, submitHandler, "PageMaster"),
     onChange: function() {
       var _a, _b, _c, _d;
       if (((_a = store2 == null ? void 0 : store2.formData) == null ? void 0 : _a.type) !== ((_b = store2 == null ? void 0 : store2.newData) == null ? void 0 : _b.type) && ((_c = store2 == null ? void 0 : store2.newData) == null ? void 0 : _c.type) !== void 0) {
         this.refreshPage((_d = store2 == null ? void 0 : store2.newData) == null ? void 0 : _d.type, store2);
       }
     },
-    editComponents: async function() {
+    editComponents: function() {
       var _a, _b, _c;
       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");
-      saveFormdataInLocalStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.ctx.core.data, path);
       if (path) {
         const path2 = (_c = store2.searchParams) == null ? void 0 : _c.get("path");
         const finalPath = `${path2}.elements[${rowId}]`;
@@ -7334,52 +7423,52 @@ var Component = (store2, dynamicData2) => {
         store2.navigate(`/Component?path=${`elements[${rowId}]`}&id=${id}`);
       }
     },
-    deleteComponents: async function() {
+    deleteComponents: function() {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const rowId = dynamicData2.path.split(".")[1];
       store2.formData.elements.splice(rowId, 1);
-      const response2 = saveFormdataInLocalStorage(store2.formData, path);
+      const response2 = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const data2 = path ? _.get(response2, path) : response2;
       store2.setFormdata(data2);
     },
-    deleteEvent: async function() {
+    deleteEvent: function() {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const rowId = dynamicData2.path.split(".")[1];
       store2.formData.events.splice(rowId, 1);
-      const response2 = saveFormdataInLocalStorage(store2.formData, path);
+      const response2 = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       store2.setFormdata(_.get(response2, path));
     },
-    widgetAddClickHandler: async function() {
+    widgetAddClickHandler: function() {
       var _a;
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      saveFormdataInLocalStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.elements[${store2.formData.elements.length}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
-    eventEditHandler: async function() {
+    eventEditHandler: function() {
       var _a, _b;
       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");
-      saveFormdataInLocalStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${rowId}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
-    eventAddHandler: async function() {
+    eventAddHandler: function() {
       var _a, _b;
       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)) {
         store2.formData.events = [];
       }
-      saveFormdataInLocalStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${store2.formData.events.length}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
@@ -7389,7 +7478,7 @@ var Component = (store2, dynamicData2) => {
   };
 };
 var pageMaster = (funcParams) => {
-  const { store: store2, dynamicData: dynamicData2, config, submitHandler } = funcParams;
+  const { store: store2, dynamicData: dynamicData2, config, submitHandler, service: service2 } = funcParams;
   return {
     setPage: async function() {
       const formdata = await this.getFormdata();
@@ -7399,7 +7488,7 @@ var pageMaster = (funcParams) => {
       store2.setSchema(schema2);
       store2.setUiSchema(uiSchema);
     },
-    getFormdata: async function() {
+    getFormdata: function() {
       var _a;
       (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       const formData = getFormdataFromLocalStorage();
@@ -7409,7 +7498,7 @@ var pageMaster = (funcParams) => {
       saveFormdataInLocalStorage(config);
       return config;
     },
-    getUiSchema: async function() {
+    getUiSchema: function() {
       return PageMasterUiSchema;
     },
     getSchema: () => {
@@ -7419,60 +7508,42 @@ var pageMaster = (funcParams) => {
       localStorage.removeItem("pageFormdata");
       store2.navigate("/PageMasterRecords");
     },
-    onAddClickHandler: async function() {
+    onAddClickHandler: function() {
       var _a;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
-      const response2 = saveFormdataInLocalStorage(store2.formData);
+      const response2 = saveFormdataInLocalStorage(store2.ctx.core.data);
       store2.navigate(
         `/Component?path=${`elements[${response2 == null ? void 0 : response2.elements.length}]`}&id=${id}`
       );
     },
-    submitPageHandler: async function() {
-      console.log();
-      if (_.isEmpty(funcParams.store.ctx.core.errors)) {
-        submitHandler(store2, funcParams.service).then((saveReturn) => {
-          localStorage.removeItem("pageFormdata");
-          store2.navigate(-1);
-          store2.setNotify({
-            SuccessMessage: "Submit Successfully",
-            Success: true
-          });
-        });
-      } else {
-        funcParams.store.setValidation("ValidateAndShow");
-        funcParams.store.setNotify({
-          Fail: true,
-          FailMessage: "Errors on Page"
-        });
-      }
-    },
-    Edit_Components: Component(store2, dynamicData2).editComponents,
-    Delete_Components: Component(store2, dynamicData2).deleteComponents,
-    eventAddHandler: async function() {
+    saveHandler: async () => await saveHandler(store2, service2, submitHandler),
+    Edit_Components: Component(store2, dynamicData2, submitHandler, service2).editComponents,
+    Delete_Components: Component(store2, dynamicData2, submitHandler, service2).deleteComponents,
+    eventAddHandler: function() {
       var _a;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInLocalStorage(store2.formData);
+      saveFormdataInLocalStorage(store2.ctx.core.data);
       const finalPath = `events[${store2.formData.events.length}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
-    editEvent: async function() {
+    editEvent: function() {
       var _a;
       const rowId = dynamicData2.path.split(".")[1];
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
-      saveFormdataInLocalStorage(store2.formData);
+      saveFormdataInLocalStorage(store2.ctx.core.data);
       const finalPath = `events[${rowId}]`;
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
-    deleteEvent: async function() {
+    deleteEvent: function() {
       const rowId = dynamicData2.path.split(".")[1];
       store2.formData.events.splice(rowId, 1);
-      const response2 = saveFormdataInLocalStorage(store2.formData);
+      const response2 = saveFormdataInLocalStorage(store2.ctx.core.data);
       store2.setFormdata(response2);
     }
   };
@@ -7518,12 +7589,15 @@ const EventSchema = {
       type: "string",
       oneOf: [
         { title: "Click Event", const: "onClick" },
-        { title: "onStart", const: "onStart" },
         { title: "Load Event", const: "onLoad" },
-        { title: "File Upload Event", const: "onUpload" },
-        { title: "File Download Event", const: "onDownload" },
         { title: "Change Event", const: "onChange" },
         { title: "Success", const: "Success" },
+        { title: "onStart", const: "onStart" },
+        { title: "File Upload Event", const: "onUpload" },
+        { title: "Stepper Back Event", const: "onStepperBack" },
+        { title: "Stepper Next Event", const: "onStepperNext" },
+        { title: "Stepper Skip Event", const: "onStepperSkip" },
+        { title: "File Download Event", const: "onDownload" },
         { title: "Fail", const: "Fail" }
       ]
     },
@@ -7785,7 +7859,7 @@ const EventUiSchema = {
       type: "Control",
       scope: "#/properties/proc",
       config: {
-        layout: { xs: 11, sm: 11, md: 8, lg: 8 }
+        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
       },
       options: {
         widget: "EmptyBox"
@@ -7801,11 +7875,39 @@ const EventUiSchema = {
         layout: {
           xs: 11,
           sm: 11,
-          md: 3,
-          lg: 3
+          md: 2.5,
+          lg: 2.5
         },
         main: {
-          name: "Save",
+          name: "Ok",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "okHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          float: "right"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btnSubmit",
+      options: {
+        widget: "Button"
+      },
+      config: {
+        layout: {
+          xs: 11,
+          sm: 11,
+          md: 2.5,
+          lg: 2.5
+        },
+        main: {
+          name: "Save & Exit",
           startIcon: "ApproveIcon",
           variant: "contained",
           color: "info",
@@ -8014,7 +8116,7 @@ const refreshSectionUiSchema = {
     }
   ]
 };
-var event = (store2, dynamicData2) => {
+var event = (store2, dynamicData2, submitHandler, service2) => {
   return {
     setPage: async function() {
       const formdata = await this.getFormData();
@@ -8047,43 +8149,44 @@ var event = (store2, dynamicData2) => {
       store22.setSchema(schema2);
       store22.setUiSchema(uiSchema);
     },
-    getFormData: Component(store2, dynamicData2).getFormdata,
-    getUiSchema: async function() {
+    getFormData: Component(store2, dynamicData2, submitHandler, service2).getFormdata,
+    getUiSchema: function() {
       return EventUiSchema;
     },
-    getSchema: async () => {
+    getSchema: () => {
       return EventSchema;
     },
+    okHandler: () => okHandler(store2),
+    saveHandler: async () => await saveHandler(store2, service2, submitHandler, "PageMaster"),
     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);
       }
     },
-    saveHandler: Component(store2, dynamicData2).saveHandler,
-    addEvent: async function() {
+    addEvent: function() {
       var _a, _b, _c;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
       }
-      saveFormdataInLocalStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${(_c = (_b = store2.formData) == null ? void 0 : _b.events) == null ? void 0 : _c.length}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
-    editEvent: async function() {
+    editEvent: function() {
       var _a;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      saveFormdataInLocalStorage(store2.formData, path);
+      saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const finalPath = `${path}.events[${rowId}]`;
       store2.searchParams.set("path", finalPath);
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
-    deleteEvent: Component(store2, dynamicData2).deleteEvent,
+    deleteEvent: Component(store2, dynamicData2, submitHandler, service2).deleteEvent,
     backHandler: function() {
       store2.navigate(-1);
     }
@@ -8390,37 +8493,13 @@ var service = (funcParams) => {
       });
     },
     onClick: async function() {
-      var _a;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onClick[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        });
-      }
+      await this.callHandler("onClick");
     },
-    onFileDownload: async () => {
-      var _a;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onDownload[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        });
-      }
+    onFileDownload: async function() {
+      await this.callHandler("onDownload");
     },
-    onFileUpload: async () => {
-      var _a;
-      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
-      for (const eventConfig of eventGroups == null ? void 0 : eventGroups.onUpload[path]) {
-        await executeEvents({
-          ...executeEventsParameters,
-          config: eventConfig,
-          componentName: path
-        });
-      }
+    onFileUpload: async function() {
+      await this.callHandler("onUpload");
     },
     onPaginationChange: async function(paginationValues) {
       var _a;
@@ -8484,6 +8563,29 @@ var service = (funcParams) => {
       }
       return LastCallResponse;
     },
+    StepperBackHandler: async function(param) {
+      await this.callHandler("onStepperBack");
+      param.handleBack();
+    },
+    StepperSkipHandler: async function(param) {
+      await this.callHandler("onStepperSkip");
+      param.handleSkip();
+    },
+    StepperNextHandler: async function(param) {
+      await this.callHandler("onStepperNext");
+      param.handleNext();
+    },
+    callHandler: async function(eventType) {
+      var _a, _b;
+      const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
+      for (const eventConfig of (_b = eventGroups == null ? void 0 : eventGroups[eventType]) == null ? void 0 : _b[path]) {
+        await executeEvents({
+          ...executeEventsParameters,
+          config: eventConfig,
+          componentName: path
+        });
+      }
+    },
     downloadFile: downloadFile$1
   };
 };
@@ -10173,7 +10275,7 @@ const FileInput = {
       required: false,
       onUpload: "onFileUpload",
       onDownload: "onFileDownload",
-      label: "label"
+      label: "Aggrement Copy"
     },
     style: {
       backgroundColor: "none"
@@ -10192,46 +10294,87 @@ const buildFileInput = (config, componentScope) => {
   }
   return box;
 };
-const InputSlider = {
+const Stepper = {
   type: "Control",
-  scope: "#/properties/inputSlider",
+  scope: "#/properties/Stepper",
   options: {
-    widget: "InputSlider"
+    widget: "Stepper"
   },
   config: {
-    layout: 12,
     main: {
-      limitToMax: false,
-      max: 1e4,
-      step: 1e3,
-      min: 0,
-      label: "Slider"
+      label: ["First", "Second", "Third"],
+      stepsSkip: { 0: "false", 1: "false" },
+      resetButton: false,
+      resetText: "RESETdaad",
+      orientation: "vertical"
     }
-  }
+  },
+  "elements": []
 };
-const buildInputSlider = (config, componentScope) => {
-  const inputSlider = _.cloneDeep(InputSlider);
-  inputSlider.scope = componentScope;
-  inputSlider.config.main.label = config.label;
-  if (config.layout) {
-    inputSlider.config.layout = createLayoutFormat(config.layout);
+const buildStepper = (config, componentScope) => {
+  const stepper = _.cloneDeep(Stepper);
+  stepper.scope = componentScope;
+  stepper.config.main.complete = config.fullScreen === "YES" ? true : false;
+  stepper.config.main.resetButton = config.fullWidth === "YES" ? true : false;
+  stepper.config.main.resetText = config.resetText || "ResetData";
+  stepper.config.main.completeText = config.completeText || "CompleteText";
+  stepper.config.main.orientation = config.orientation || "horizontal";
+  if (config.sectionLabels) {
+    stepper.config.main.tabLabels = config.sectionLabels.map((e, i) => {
+      return { label: e.label, id: i };
+    });
   }
-  if (config.limitToMax) {
-    inputSlider.config.main.limitToMax = config.limitToMax === "YES" ? true : false;
+  if (config.skipAvailable) {
+    stepper.config.main.tabLabels = config.skipAvailable.map((e, i) => {
+      return { [e.skipId]: true };
+    });
   }
-  if (config.max) {
-    inputSlider.config.main.max = config.max;
+  if (config.layout) {
+    stepper.config.layout = createLayoutFormat(config.layout);
   }
-  if (config.step) {
-    inputSlider.config.main.step = config.step;
+  if (config.style) {
+    stepper.config.style = JSON.parse(config.style);
   }
-  if (config.min) {
-    inputSlider.config.main.min = config.min;
+  return stepper;
+};
+const PopUP = {
+  type: "Control",
+  scope: "#/properties/text",
+  options: {
+    widget: "PopUp"
+  },
+  config: {
+    layout: {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12
+    },
+    main: {
+      label: "PopUp",
+      fullScreen: false,
+      fullWidth: false,
+      maxWidth: false,
+      alignItems: false,
+      spacing: 2
+    },
+    style: {}
+  }
+};
+const buildPopUp = (config, componentScope) => {
+  const popup = _.cloneDeep(PopUP);
+  popup.scope = componentScope;
+  popup.config.main.label = config.label;
+  popup.config.main.fullScreen = config.fullScreen === "YES" ? true : false;
+  popup.config.main.fullWidth = config.fullWidth === "YES" ? true : false;
+  popup.config.main.maxWidth = config.maxWidth || false;
+  if (config.layout) {
+    popup.config.layout = createLayoutFormat(config.layout);
   }
   if (config.style) {
-    inputSlider.config.main.defaultStyle = JSON.parse(config.style);
+    PopUP.config.style = JSON.parse(config.style);
   }
-  return inputSlider;
+  return popup;
 };
 let schema = {
   type: "object",
@@ -10351,8 +10494,11 @@ const buildUiSchema = (config) => {
   let elements = {};
   const componentScope = `#/properties/${config.name}`;
   switch (config.type) {
-    case "InputSlider":
-      elements = buildInputSlider(config, componentScope);
+    case "Stepper":
+      elements = buildStepper(config, componentScope);
+      break;
+    case "PopUp":
+      elements = buildPopUp(config, componentScope);
       break;
     case "FileInput":
       elements = buildFileInput(config, componentScope);
@@ -10498,8 +10644,5 @@ const buildUiSchema = (config) => {
   }
   return elements;
 };
-var clearLocalStorage = () => {
-  localStorage.removeItem("pageFormdata");
-};
-export { buildConfig, buildSchema, buildUiSchema, clearLocalStorage as clearPreviousCache, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService, schema };
+export { buildConfig, buildSchema, buildUiSchema, clearFromLocalStorage, pageMaster, Component as pageMasterComponents, event as pageMasterEvents, service as pageService, schema };
 //# sourceMappingURL=impaktapps-ui-builder.es.js.map