impaktapps-ui-builder 0.0.320 → 0.0.322

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

@@ -6013,6 +6013,17 @@ const ComponentSchema = {
         }
       }
     },
+    InputFormatingAndMasking: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          formatElement: {
+            type: "string"
+          }
+        }
+      }
+    },
     validation: {
       type: "array",
       items: {
@@ -6727,7 +6738,8 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
                 label: childLabel || "Labels for Tab"
               }
             }
-          }
+          },
+          EmptyBox
         ]
       }
     }
@@ -6823,104 +6835,128 @@ const GraphSection = {
 };
 const buildPropertiesSection = function(type) {
   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"),
-      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"]);
-    uiSchema.elements = [
-      heading,
-      height,
-      getSelectField("graphType", "Graph Type"),
-      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
-    ];
+  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;
+    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"),
+        EmptyBox
+      ];
+      break;
+    case "Graph":
+      uiSchema.elements = [
+        getInputField("height", "Height"),
+        getInputField("heading", "Heading"),
+        getSelectField("graphType", "Graph Type"),
+        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;
 };
@@ -7207,7 +7243,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"]
 };
 const refreshPage = (type, store2) => {
   var _a;
@@ -9286,6 +9323,12 @@ const buildTextField = (config, componentScope) => {
   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);
   }
@@ -9907,6 +9950,9 @@ const buildTextArea = (config, componentScope) => {
   if (config.style) {
     textArea.config.style = JSON.parse(config.style);
   }
+  if (config.placeholder) {
+    textArea.config.main.placeholder = config.placeholder;
+  }
   textArea.scope = componentScope;
   return textArea;
 };
@@ -10269,9 +10315,6 @@ const buildUiSchema = (config) => {
     case "RunnerBoyProgressBar":
       elements = RunnerBoyProgressbar(config, componentScope);
       break;
-    case "TabSection":
-      elements = buildTabSection(config);
-      break;
     case "WrapperSection":
       elements = buildWrapperSection(config);
       break;