impaktapps-ui-builder 1.0.47 → 1.0.50-alpha.10

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

@@ -1,4 +1,4 @@
 declare const _default: (FormData: any) => any;
 export default _default;
-export declare const createLayoutFormat: (config: any[]) => any;
+export declare const createLayoutFormat: (layout: any[], type?: string) => any;
 export declare const flatObjectValueInArray: (config?: any[]) => any[];

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/box.d.ts

@@ -5,7 +5,12 @@ declare const Box: {
         widget: string;
     };
     config: {
-        layout: number;
+        layout: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+        };
         main: {};
         style: {};
     };

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

@@ -5,7 +5,12 @@ declare const _default: {
         widget: string;
     };
     config: {
-        layout: number;
+        layout: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+        };
         main: {
             name: string;
             variant: string;

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/builder/build/uischema/table.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
     };
     elements: any[];
     config: {
+        layout: number;
         main: {
             onMount: string;
             enableExpandAll: boolean;

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

@@ -1,6 +1,7 @@
 declare const _default: {
     type: string;
     config: {
+        layout: number;
         main: {
             rowSpacing: number;
             divider: boolean;

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.47",
+    "version": "1.0.50-alpha.10",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -11,7 +11,7 @@ const TextField = {
       "widget": "InputField"
     },
   config:{
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main:{
       label:"Adhaar Card",
       formatStrArray:["9","9","9","9"," ","9","9","9","9"," ","X9","X9","X9","X9"],
@@ -43,7 +43,7 @@ const PanField = {
       "widget": "InputField"
     },
   config:{
-    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main:{
       label:"Pan Card",
       placeholder:"AAAAA0000A",

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

@@ -3,7 +3,7 @@ import _ from "lodash";
 const ArrayUiSchema: any = {
     type: "Control",
     scope: "#/properties/adjustments",
-    layout: 11.5,
+    layout: 12,
     elements: [],
     config: {
         main: {}

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

@@ -4,11 +4,11 @@ import { createLayoutFormat } from "./buildConfig";
 const Checkbox =  {
     "type": "Control",
     "scope": "#/properties/username1",
-    "layout": 12,
     "options": {
       "widget": "CheckBox"
     },
     "config": {
+    "layout": { xs: 6, sm: 6, md: 4, lg: 3 },
       "main": {
         "label": "Welcome to Hyperform",
       }

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

@@ -26,13 +26,27 @@ export default (FormData: any) => {
   return component;
 };
 
-export const createLayoutFormat = (config: any[]) => {
-  if (_.isEmpty(config)) {
-    return { xs: 12, sm: 6, md: 4, lg: 3 }
+export const createLayoutFormat = (layout: any[], type?: string) => {
+  if (_.isEmpty(layout)) {
+    const fullLayoutComponents: string[] = ["Array", "WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "Table", "TabSection", "TextArea", "TreeMap", "Thought"]
+    if(fullLayoutComponents.includes(type)){
+      return { xs: 12, sm: 12, md: 12, lg: 12 }
+    }
+    else if(type === "Graph"){
+      return {xs :12,sm:12,md:12,lg:6}
+    }
+    else if(type === "Button"){
+      return { xs: 4, sm: 2.5, md: 2, lg: 1.5 }
+    }
+    else{
+      return { xs: 6, sm: 6, md: 4, lg: 3 }
+    }
   }
-  let data: any = { xs: 12, sm: 6, md: 4, lg: 3 };
-  config.map((e: any) => {
-    data[e.key || "xs"] = +e.value || 5.5
+  let data: any = {  };
+
+  layout.map((e: any) => {
+    data[e.key || "xs"] = +e.value || 5.5;
+
   })
   return data;
 };

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/buildRadio.ts

@@ -9,7 +9,7 @@ const RadioUiSchema = {
       widget: "RadioInputField",
     },
     config: {
-      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 3 },
       main: {
         label: "Enabled",
         options: ["YES", "NO"],

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

@@ -10,7 +10,7 @@ const TextArea =  {
       widget: "TextArea",
     },
     config: {
-      layout:{xs:12,sm:12,md:5.5,lg:5.5},
+      layout:12,
       style:{
         containerStyle:{
           borderRadius:"20px",

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

@@ -5,6 +5,7 @@ const TreeMap = {
     "type": "Control",
     "scope": "#/properties/TreeMap2",
     "config": {
+        layout: 12,
         "main": {
             "layout": "cartsian",
             orientation: "vertical",

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/array.ts

@@ -2,7 +2,7 @@ export const ArrayLayout = {
     "type": "Control",
         "scope": "#/properties/adjustments",
             "config": {
-        "layout": 11.5
+        "layout": 12
     },
     "options": {
         "name": "adjustments",

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

@@ -6,7 +6,7 @@
       widget: "Box",
     },
    
-    config: { layout: 12,
+    config: { layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {},
       style:{
         // fontWeight:300

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/button.ts

@@ -5,7 +5,7 @@ export default  {
     widget: "Button",
   },
   config: {
-    layout: 3,
+    layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
     main: {
       name: "Compare",
       variant: "contained",

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

@@ -40,7 +40,7 @@ export const CoreSection = {
         widget: "InputField",
       },
       config: {
-        layout: { xs: 12, sm: 6, md: 4, lg: 3 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
           label: "Component ID",
           required: true,

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

@@ -6,7 +6,7 @@ export default {
   },
 
   config: {   
-     layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+     layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "date",
@@ -21,7 +21,7 @@ export const DateTime = {
   },
 
   config: {
-    layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "DateTime",
       type: "date",

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

@@ -6,7 +6,7 @@ export default {
   },
 
   config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 6, sm: 6, md: 4, lg: 3 },
     main: {},
     style:{}
   },

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

@@ -13,7 +13,7 @@ export const uploadFile =  {
       "style": {
         "backgroundColor": "none"
       },
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 }
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 }
     },
     "options": {
       "widget": "UploadFile"
@@ -30,7 +30,7 @@ export const downloadFile =   {
       "style": {
         "backgroundColor": "none"
       },
-      layout: { xs: 12, sm: 6, md: 4, lg: 4 }
+      layout: { xs: 12, sm: 6, md: 4, lg: 3 }
     },
     "options": {
       "widget": "DownloadFile"

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

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

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: 6, sm: 6, md: 4, lg: 3 },
     main: {
       label: "",
       type: "text",

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

@@ -6,6 +6,7 @@ export default {
   },
   elements: [],
   config: {
+    layout: 12,
     main: {
       onMount: "onMount",
       enableExpandAll: true,

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

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

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

@@ -1,6 +1,7 @@
 export default {
     type: "WrapperLayout",
     config: {
+      layout: 12,
       main: {
         rowSpacing: 3,
         divider: true,

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/builder/elements/UiSchema/Component/uiSchema.ts

@@ -66,7 +66,7 @@ export const componentBasicUiSchema: any = (theme) => {
                 widget: "InputField",
               },
               config: {
-                layout: { xs: 12, sm: 6, md: 4, lg: 3 },
+                layout: { xs: 6, sm: 6, md: 4, lg: 3 },
                 main: {
                   label: "Component ID",
                   required: true,

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) => {