impaktapps-ui-builder 1.0.46 → 1.0.50-alpha.1

package/dist/src/impaktapps-ui-builder/builder/build/buildPhoneInput.d.ts

@@ -0,0 +1 @@
+export declare const buildPhoneInputField: (config: any, componentScope: string) => any;

package/dist/src/impaktapps-ui-builder/builder/build/uischema/phoneInput.d.ts

@@ -0,0 +1,20 @@
+declare const PhoneInput: {
+    scope: string;
+    type: string;
+    options: {
+        widget: string;
+    };
+    config: {
+        layout: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+        };
+        main: {
+            defaultCountry: string;
+            label: string;
+        };
+    };
+};
+export default PhoneInput;

package/dist/src/impaktapps-ui-builder/runtime/services/service.d.ts

@@ -5,6 +5,7 @@ interface funcParamsProps {
     userValue: any;
     pageDataProvider: any;
     functionsProvider?: Record<string, any>;
+    setExternaldata?: any;
 }
 export declare const extractEvents: (eventConfig: any) => any;
 declare const _default: (funcParams: funcParamsProps) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "1.0.46",
+    "version": "1.0.50-alpha.1",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-ui-builder/builder/build/buildConfig.ts

@@ -28,25 +28,17 @@ export default (FormData: any) => {
 
 export const createLayoutFormat = (config: any[]) => {
   if (_.isEmpty(config)) {
-    return {
-      xs: 12,
-      sm: 12,
-      md: 12,
-      lg: 12,
-    }
+    return { xs: 12, sm: 6, md: 4, lg: 3 }
   }
-  let data: any = {
-    xs: 12,
-    sm: 12,
-    md: 6,
-    lg: 6,
-  };
+  let data: any = {  };
+
   config.map((e: any) => {
-    data[e.key || "xs"] = +e.value || 5.5
+    data[e.key || "xs"] = +e.value || 5.5;
+
   })
   return data;
 };
-export const flatObjectValueInArray = (config: any[]=[]) => {
+export const flatObjectValueInArray = (config: any[] = []) => {
   if (config.length < 1) {
     return
   }

package/src/impaktapps-ui-builder/builder/build/buildFileInput.ts

@@ -8,7 +8,7 @@ const FileInput = {
       widget: "FileInputField",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         required: false,
         onUpload: "onFileUpload",

package/src/impaktapps-ui-builder/builder/build/buildPhoneInput.ts

@@ -0,0 +1,26 @@
+import _ from "lodash";
+import PhoneInput from "./uischema/phoneInput";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildPhoneInputField = (config: any, componentScope: string) => {
+  const phonInputField: any = _.cloneDeep(PhoneInput);
+  phonInputField.config.main.label = config.label;
+  if (config.style) {
+    phonInputField.config.style = JSON.parse(config.style)
+  }
+  // if (config.multiline) {
+  //   phonInputField.config.main.multiline = config.multiline === "YES" ? true : false;
+  // }
+  if (config.InputFormatingAndMasking) {
+    phonInputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
+  }
+  if (config.placeholder) {
+    phonInputField.config.main.placeholder = config.placeholder;
+  }
+  if (config.layout) {
+    phonInputField.config.layout = createLayoutFormat(config.layout)
+  }
+  phonInputField.config.main.errorMessage = `${config.name} is empty or invalid`;
+  phonInputField.scope = componentScope;
+  return phonInputField;
+}

package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts

@@ -1,6 +1,4 @@
 import _ from "lodash";
-import emptyBox from "./uischema/emptyBox";
-import cardSlider from "./uischema/cardSlider";
 import { buildLeaderBoard } from "./buildLeaderboard";
 import { buildProgressBarCard } from "./buildProgressBarCard";
 import { buildProgressBar } from "./buildProgressBar";
@@ -40,6 +38,7 @@ import { buildDataGrid } from "./buildDataGrid";
 import { buildInputSlider } from "./buildInputSlider";
 import { buildTreeMap } from "./buildTreeMap";
 import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
+import { buildPhoneInputField } from "./buildPhoneInput";
 export let schema = {
   type: "object",
   properties: {},
@@ -307,6 +306,8 @@ const buildUiSchema = (config: any, store?: any) => {
     case "Thought":
       elements = buildThoughtOfTheDay(config, componentScope);
       break;
+    case "PhoneInput":
+      elements = buildPhoneInputField(config, componentScope);
       break;
     default:
       schema = {

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

@@ -26,6 +26,66 @@ export const emptyBox = (scope: string, layout?: any) => {
     },
   }
 }
+// const cardLayout = {
+//   type: "Control",
+//   scope: "#/properties/cardLayout",
+//   options: {
+//     widget: "Array",
+//   },
+//   config: {
+//     layout: 12,
+//     main: {
+//       label: "Card Layout",
+//       childElementLabel: "Card Layout",
+//     },
+//     style: {
+//       marginLeft: "-24px",
+//       marginBottom: "24px !important",
+//       labelStyle: {
+//         marginLeft: "24px",
+//       },
+//       detailsStyle: {
+//         marginLeft: "24px",
+//       }
+//     }
+//   },
+//   elements: [
+//     {
+//       type: "Control",
+//       scope: "#/properties/key",
+//       options: {
+//         widget: "SelectInputField",
+//       },
+//       config: {
+//         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+//         main: {
+//           label: "Screen Size",
+
+//         },
+//       },
+//     },
+//     {
+//       type: "Control",
+//       scope: "#/properties/value",
+
+//       options: {
+//         widget: "InputField",
+//       },
+//       config: {
+//         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+//         main: {
+//           label: "Value",
+//           type: "number",
+//           // freeSolo:true,
+//           helperText: 'Number should be in range of 0 to 12',
+//           errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
+
+//         },
+//       },
+//     },
+//     emptyBox("cardEmpty")
+//   ],
+// };
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
@@ -54,7 +114,7 @@ const cardLayout = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
           label: "Screen Size",
 

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

@@ -0,0 +1,16 @@
+const PhoneInput = {
+    scope: "#/properties/testPhone",
+    type: "Control",
+    options: {
+        widget: "PhoneInput"
+    },
+    config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+        defaultCountry: "in",
+        label: "Phone"
+        }
+    }
+};
+
+export default PhoneInput;

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

@@ -6,7 +6,7 @@ export default {
     widget: "SelectInputField",
   },
   config: {
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "text",

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

@@ -41,7 +41,8 @@ export const ComponentSchema: any = {
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
         { title: "Column Group", const: "ColumnGroup" },
-        { title: "Thought of the day", const: "Thought" }
+        { title: "Thought of the day", const: "Thought" },
+        { title: "Phone Input", const: "PhoneInput" }
       ]
     },
     elementType: {

package/src/impaktapps-ui-builder/runtime/services/service.ts

@@ -19,7 +19,8 @@ interface funcParamsProps {
   service: any,
   userValue: any,
   pageDataProvider: any,
-  functionsProvider?: Record<string, any>
+  functionsProvider?: Record<string, any>,
+  setExternaldata?: any
 }
 let pageData: any = false;
 export const extractEvents = (eventConfig: any) => {
@@ -65,7 +66,7 @@ export default (funcParams: funcParamsProps) => {
   let executeEventsParameters: handlersProps = {
     config: {}, componentName: "",
     store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-    serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider }, eventGroups,
+    serviceHolder: { downloadFile, download: doDownload, ...funcParams.functionsProvider },eventGroups,
     functionsProvider: funcParams.functionsProvider, formDataHolder
   };
   return {
@@ -77,6 +78,9 @@ export default (funcParams: funcParamsProps) => {
       eventGroups = {};
       pageData = await funcParams.pageDataProvider();
       const config = pageData?.config;
+      
+      funcParams?.setExternaldata();
+
       const uiSchema = pageData?.uiSchema;
       const event = new CustomEvent('pageNameChanged', {
         detail: { pageName: config.label }
@@ -190,17 +194,19 @@ export default (funcParams: funcParamsProps) => {
         }
       );
       const schema = pageData?.schema ?? { type: "object", properties: {} };
-      eventGroups = extractEvents(config);
+      const newEventGroups = extractEvents(config);
+      console.log("newEventGroups", newEventGroups,eventGroups)
+      eventGroups = newEventGroups;
       executeEventsParameters = {
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
         functionsProvider: funcParams.functionsProvider,
-        serviceHolder: this, eventGroups, formDataHolder
+        serviceHolder: this, eventGroups: newEventGroups, formDataHolder
       }
       await executeRefreshHandler({
         config: {}, componentName: "",
         store: funcParams.store, dynamicData: funcParams.dynamicData, userValue: funcParams.userValue, service: funcParams.service,
-        serviceHolder: this, eventGroups, formDataHolder: {}
+        serviceHolder: this, eventGroups: newEventGroups, formDataHolder: {}
       })
       funcParams.store.setSchema(
         (pre: any) => {