impaktapps-ui-builder 0.0.320 → 0.0.322

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.320",
+    "version": "0.0.322",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -8,6 +8,12 @@ export const buildTextField = (config:any,componentScope:string) =>{
     if (config.style) {
       inputField.config.style = JSON.parse(config.style)
     }
+    if (config.InputFormatingAndMasking) {
+      inputField.config.main.formatStrArray = config.InputFormatingAndMasking.map(e => e.formatElement);
+    }
+    if (config.placeholder) {
+      inputField.config.main.placeholder = config.placeholder;
+    }
     if (config.layout) {
       inputField.config.layout = createLayoutFormat(config.layout)
     }

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

@@ -42,6 +42,9 @@ export const buildTextArea = (config:any,componentScope:string) =>{
       if (config.style) {
         textArea.config.style = JSON.parse(config.style)
       }
+      if (config.placeholder) {
+        textArea.config.main.placeholder = config.placeholder;
+      }
       textArea.scope = componentScope;
     return textArea;
 }

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

@@ -178,11 +178,7 @@ const buildUiSchema = (config: any) => {
         break;
     case "RunnerBoyProgressBar":
       elements = RunnerBoyProgressbar(config, componentScope);
-
-      break;
-    case "TabSection":
-      elements = buildTabSection(config, componentScope);
-      break;
+    break;
     case "WrapperSection":
       elements = buildWrapperSection(config, componentScope);
       break;

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

@@ -48,6 +48,7 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
               },
             },
           },
+          EmptyBox
         ],
       },
     },
@@ -158,119 +159,135 @@ const GraphSection = {
 
 export const buildPropertiesSection = function (type: String) {
   let uiSchema = _.cloneDeep(GraphSection);
-  if (type === "Text"||type === "TextArea") {
-    uiSchema.elements = [
-      getInputField("placeholder", "Placeholder"),
-      EmptyBox
-    ]
-  }
-  if (type === "SpeedoMeter") {
-    uiSchema.elements = [
-      getInputField("segments", "Segments Count"),
-      getInputField("heading", "Container Heading"),
-      getInputField("heading", "Container Heading"),
-      getInputField("speedoCaption", "Speedometer Caption"),
-      getInputField("width", "Speedometer Width")
-    ]
-  }
-  else if (type === "RankCard") {
-    uiSchema.elements = [
-      getInputField("rank", "Rank"),
-      getInputField("image", "Image Url"),
-      getInputField("title", "Card Title"),
-      getInputField("description", "Card Description")];
-  }
-  else if (type === "LeaderBoard") {
-    uiSchema.elements = [getInputField("valueLabel", "Value Label"),
-    getInputField("firstImage", "First Image url"),
-    getInputField("secondImage", "Second Image url"),
-    getInputField("thirdImage", "Third Image url"),
-    getTextArea("functionCode", "Write Compare Code", false)
-    ];
-  }
-  else if (type === "CardSlider") {
-    const heading = getInputField("heading", "Heading");
-    const iconName = getInputField("iconName", "Icon Name");
-    uiSchema.elements = [heading, iconName];
-  } else if (type === "ProgressBar" || type === "ProgressBarCard") {
-    const heading = getInputField("heading", "Heading");
-    const bottomLabel_1 = getInputField("bottomLabel_1", "First BottomLabel");
-    const bottomLabel_2 = getInputField("bottomLabel_2", "Second BottomLabel");
-    const bottomLabel_3 = getInputField("bottomLabel_3", "Third BottomLabel");
-    uiSchema.elements = [heading, bottomLabel_1, bottomLabel_2, bottomLabel_3];
-  } else if (type === "card") {
-    uiSchema.elements = [getInputField("url", "Image Url"), getInputField("label", "Label"), getInputField("description", "Description"),EmptyBox];
-  }
-  else if (type === "Button") {
-    const color = getSelectField("color", "Color",[]);
-    const iconName = getSelectField("iconName", "Icon Name",[]);
-    uiSchema.elements = [getSelectField("buttonType", "Button Type", []), iconName,  color,
-    getInputField("tooltipMessage", "Tooltip Message"), 
-    getSelectField("defaultStyle", "Default Style", [
-      { label: "Apply Default Style", value: "true" },
-      { label: "No Style", value: "false" },
-    ]),
-    JSON.parse(JSON.stringify(EmptyBox))
-    ];
-  } else if (type === "Graph") {
-    const height = getInputField("height", "Height");
-    const heading = getInputField("heading", "Heading");
-    const leftLabel = getInputField("leftLabel", "Left Label");
-    const bottomLabel = getInputField("bottomLabel", "Bottom Label");
-    const legendAvailabe = getRadioInputField("legendHide", "Legend Hide", ["YES", "No"])
+  switch (type) {
+    case "Text":
+      uiSchema.elements = [
+        getInputField("placeholder", "Placeholder"),
+        EmptyBox,
+        getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
+      ]
+      break;
+    case "TextArea":
+      uiSchema.elements = [
+        getInputField("placeholder", "Placeholder"),
+        EmptyBox,]
+      break;
 
-    uiSchema.elements = [
-      heading,
-      height,
-      getSelectField("graphType", "Graph Type", [
-        { label: "Bar Graph", value: "BarGraph" },
-        { label: "Stack Bar Graph", value: "StackBarGraph" },
-        { label: "Line Graph", value: "LineGraph" },
-        { label: "Pie Graph", value: "PieGraph" },
-        { label: "Horizontal Bar Graph", value: "HorizontalBarGraph" },
-      ]),
-      leftLabel,
-      bottomLabel,
-      legendAvailabe,
-      getArrayControl("legendLabels", "label"),
-      getArrayControl("pieArcColors", "color"),
-    ];
-  } else if (type === "WrapperSection") {
-    uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox]
-  }
-  else if (type === "TabSection") {
-    uiSchema.elements = [
-      getArrayControl("sectionLabels", "label"),
-    ]
-  }
-  else if (type === "Table" || type === "LazyLoadingTable") {
-    uiSchema.elements = [
-      getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-      getRadioInputField("SelectionAvailable", "Selection Available", ["YES", "NO"]),
-      getRadioInputField("ColumnResizingAvailable", "ColumnResizing Available", ["YES", "NO"]),
-      getRadioInputField("DragAvailable", "Drag Available", ["YES", "NO"]),
-      getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
-      getInputField("selectKey", "Selection Key"),
-      getArrayControl("Table_Download_Keys_Name", "KeyName","Table Key Name"),
-    ]
-  }
-  else if (type === "Radio") {
-    uiSchema.elements = [
-      getArrayControl("sectionLabels", "label", "Options Of Radio"),
-    ]
-  }
-  else if (type === "Select") {
-    uiSchema.elements = [
-      getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-      getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
-    ]
-  }
-  else if (type === "MultipleSelect") {
-    uiSchema.elements = [
-      getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-      EmptyBox
-    ]
-  }
+    case "SpeedoMeter":
+      uiSchema.elements = [
+        getInputField("segments", "Segments Count"),
+        getInputField("heading", "Container Heading"),
+        getInputField("heading", "Container Heading"),
+        getInputField("speedoCaption", "Speedometer Caption"),
+        getInputField("width", "Speedometer Width")
+      ]
+      break;
+    case "RankCard":
+      uiSchema.elements = [
+        getInputField("rank", "Rank"),
+        getInputField("image", "Image Url"),
+        getInputField("title", "Card Title"),
+        getInputField("description", "Card Description")];
+      break;
+    case "LeaderBoard":
+      uiSchema.elements = [
+        getInputField("valueLabel", "Value Label"),
+        getInputField("firstImage", "First Image url"),
+        getInputField("secondImage", "Second Image url"),
+        getInputField("thirdImage", "Third Image url"),
+        getTextArea("functionCode", "Write Compare Code", false)
+      ];
+      break;
+    case "CardSlider":
+      uiSchema.elements = [getInputField("heading", "Heading"),
+      getInputField("iconName", "Icon Name")];
+      break;
+    case "ProgressBar":
+    case "ProgressBarCard":
+      uiSchema.elements = [
+        getInputField("heading", "Heading"),
+        getInputField("bottomLabel_1", "First BottomLabel"),
+        getInputField("bottomLabel_2", "Second BottomLabel"),
+        getInputField("bottomLabel_3", "Third BottomLabel")
+      ];
+      break;
+    case "card":
+      uiSchema.elements = [
+        getInputField("url", "Image Url"),
+        getInputField("label", "Label"),
+        getInputField("description", "Description"),
+        EmptyBox
+      ];
+      break;
+    case "Button":
+      uiSchema.elements = [
+        getSelectField("buttonType", "Button Type", []),
+        getSelectField("iconName", "Icon Name", []),
+        getSelectField("color", "Color", []),
+        getInputField("tooltipMessage", "Tooltip Message"),
+        getSelectField("defaultStyle", "Default Style", [
+          { label: "Apply Default Style", value: "true" },
+          { label: "No Style", value: "false" },
+        ]),
+        EmptyBox
+      ];
+      break;
+    case "Graph":
+      uiSchema.elements = [
+        getInputField("height", "Height"),
+        getInputField("heading", "Heading"),
+        getSelectField("graphType", "Graph Type", [
+          { label: "Bar Graph", value: "BarGraph" },
+          { label: "Stack Bar Graph", value: "StackBarGraph" },
+          { label: "Line Graph", value: "LineGraph" },
+          { label: "Pie Graph", value: "PieGraph" },
+          { label: "Horizontal Bar Graph", value: "HorizontalBarGraph" },
+        ]),
+        getInputField("leftLabel", "Left Label"),
+        getInputField("bottomLabel", "Bottom Label"),
+        getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
+        getArrayControl("legendLabels", "label"),
+        getArrayControl("pieArcColors", "color"),
+      ];
+      break;
+    case "WrapperSection":
+      uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox]
+      break;
 
+    case "TabSection":
+      uiSchema.elements = [
+        getArrayControl("sectionLabels", "label"),
+      ]
+      break;
+    case "Table":
+    case "LazyLoadingTable":
+      uiSchema.elements = [
+        getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
+        getRadioInputField("SelectionAvailable", "Selection Available", ["YES", "NO"]),
+        getRadioInputField("ColumnResizingAvailable", "ColumnResizing Available", ["YES", "NO"]),
+        getRadioInputField("DragAvailable", "Drag Available", ["YES", "NO"]),
+        getRadioInputField("downloadAllData", "Download All Data", ["YES", "NO"]),
+        getInputField("selectKey", "Selection Key"),
+        getArrayControl("Table_Download_Keys_Name", "KeyName", "Table Key Name"),
+      ]
+      break;
+    case "Radio":
+      uiSchema.elements = [
+        getArrayControl("sectionLabels", "label", "Options Of Radio"),
+      ]
+      break;
+    case "Select":
+      uiSchema.elements = [
+        getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
+        getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
+      ]
+      break;
+    case "MultipleSelect":
+      uiSchema.elements = [
+        getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
+        EmptyBox
+      ]
+      break;
+  }
   return uiSchema;
 };

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

@@ -158,6 +158,18 @@ export const ComponentSchema: any = {
         },
       },
     },
+    InputFormatingAndMasking: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          formatElement: {
+            type: "string",
+          },
+
+        },
+      },
+    },
     validation: {
       type: "array",
       items: {

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

@@ -31,7 +31,8 @@ const sectionLabels = {
   Button: ["Core", "Properties", "style", "Event","Validation"],
   Array:["Core","Components","Validation"],
   Radio:["Core", "Properties", "style", "Event","Validation"],
-  Text:["Core","style", "Event","Validation"]
+  Text:["Core","Properties","style", "Event","Validation"],
+  TextArea:["Core","Properties","style", "Event","Validation"],
 }
 
 export const refreshPage = (type:string,store:any) => {