impaktapps-ui-builder 1.0.4 → 1.0.6

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

@@ -1,4 +1,4 @@
-import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
+import { createLayoutFormat, createKeyValueMap } from "./buildConfig";
 import { HorizontalBarGraph } from "./uischema/graph";
 import _ from "lodash";
 
@@ -7,7 +7,7 @@ const buildHorizontalBarGraph = (config:any,componentScope:string) => {
     const horizontalBarGraph: any = _.cloneDeep(HorizontalBarGraph);
     horizontalBarGraph.scope = componentScope;
     if (config.layout) {
-      horizontalBarGraph.config.layout = createLayoutFormat(config.layout);
+      horizontalBarGraph.config.layout = createLayoutFormat(config.layout, config.type);
     }
     horizontalBarGraph.config.main.type = config.graphType;
     horizontalBarGraph.scope = componentScope;
@@ -19,10 +19,13 @@ const buildHorizontalBarGraph = (config:any,componentScope:string) => {
       horizontalBarGraph.config.main.bottomAxisAngle = config.bottomAxisAngle==="YES"?true:false;
     }
     if (config.legendLabels) {
-      horizontalBarGraph.config.main.legendLabels = flatObjectValueInArray(config.legendLabels);
+      horizontalBarGraph.config.main.legendLabels = createKeyValueMap(config.legendLabels);
+    }
+    if(config.legendDirection){
+      horizontalBarGraph.config.main.legendDirection = config.legendDirection === "Row" ? "row" : "column";
     }
     if (config.pieArcColors) {
-      horizontalBarGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+      horizontalBarGraph.config.style.colorMap = createKeyValueMap(config.pieArcColors);
     }
     if (config.xAxisValue) {
       horizontalBarGraph.config.main.xAxisValue = config.xAxisValue;
@@ -42,6 +45,9 @@ const buildHorizontalBarGraph = (config:any,componentScope:string) => {
     if (config.leftLabel) {
       horizontalBarGraph.config.main.leftLabel = config.leftLabel;
     }
+    if (config.disableLeftLabel) {
+      horizontalBarGraph.config.main.disableLeftLabel = config.disableLeftLabel==="YES"? true: false;
+    }
     return horizontalBarGraph
 }
 

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

@@ -0,0 +1,15 @@
+import { createLayoutFormat } from "./buildConfig";
+import horizontalLayout from "./uischema/horizontalLayout";
+import _ from "lodash";
+
+export const buildHorizontalLayout = (config, componentScope) => {
+  const horizontal: any = _.cloneDeep(horizontalLayout);
+  horizontal.scope = componentScope;
+  if (config.style) {
+    horizontal.config.style = JSON.parse(config.style)
+  }
+  if (config.layout) {
+    horizontal.config.layout = createLayoutFormat(config.layout, config.type)
+  }
+  return horizontal;
+}

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

@@ -0,0 +1,38 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+const imageUiSchema = {
+  type: "Control",
+  scope: "#/properties/Logo",
+
+  options: {
+    widget: "Image",
+  },
+  config: {
+    layout: 3,
+    main: {
+      url: "",
+      onClick: "onClick",
+    },
+    style: {
+    },
+  },
+};
+
+export const buildImage = (config, componentScope) => {
+  const image: any = _.cloneDeep(imageUiSchema);
+  image.scope = componentScope;
+  image.config.main.url = config.imageUrl;
+  if (config.layout) {
+    image.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config.style) {
+    image.config.style = JSON.parse(config.style);
+  } 
+  if (config.height) {
+    image.config.style.imageStyle = { ...image.config.style.imageStyle, height: config.height }
+  }
+  image.config.main.toolTip = config.toolTip;
+  image.config.main.toolTipPosition = config.toolTipPosition;
+  return image;
+};

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

@@ -9,6 +9,9 @@ export const buildLabel = (config,componentScope) => {
     if(config.layout){
       box.config.layout = createLayoutFormat(config.layout)
     }
+    if(config.iconName){
+      box.config.main.iconName = config.iconName
+    }
     if (config.style) {
       box.config.style = JSON.parse(config.style)
     }

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

@@ -37,8 +37,11 @@ export const buildLeaderBoard = (config) => {
     if (config.scoreKey) {
         LeaderBoard.config.main.scoreKey = config.scoreKey;
     }
+    if(config.isScoreAmount){
+        LeaderBoard.config.main.isScoreAmount = config.isScoreAmount === "YES" ? true : false;
+    }
     if (config.layout) {
-        LeaderBoard.config.layout = createLayoutFormat(config.layout);
+        LeaderBoard.config.layout = createLayoutFormat(config.layout, config.type);
     }
     if (config.style) {
         LeaderBoard.config.style = JSON.parse(config.style)

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

@@ -1,11 +1,11 @@
-import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
+import { createLayoutFormat, createKeyValueMap } from "./buildConfig";
 import { LineGraph } from "./uischema/graph";
 import _ from "lodash";
 
 export const buildLineGraph = (config, componentScope) => {
   const lineGraph: any = _.cloneDeep(LineGraph);
   if (config.layout) {
-    lineGraph.config.layout = createLayoutFormat(config.layout);
+    lineGraph.config.layout = createLayoutFormat(config.layout, config.type);
   }
   lineGraph.config.main.header = config.heading;
   if (config.height) {
@@ -28,18 +28,24 @@ export const buildLineGraph = (config, componentScope) => {
   if (config.leftLabel) {
     lineGraph.config.main.leftLabel = config.leftLabel;
   }
+  if (config.disableLeftLabel) {
+    lineGraph.config.main.disableLeftLabel = config.disableLeftLabel==="YES"? true: false;
+  }
   if (config.legendHide) {
     lineGraph.config.main.legendAvailable = config.legendHide==="YES"?false:true;
   }
+  if(config.legendDirection){
+    lineGraph.config.main.legendDirection = config.legendDirection === "Row" ? "row" : "column";
+  }
   if (config.bottomAxisAngle) {
     lineGraph.config.main.bottomAxisAngle = config.bottomAxisAngle==="YES"?true:false;
   }
   if (config.legendLabels) {
-    lineGraph.config.main.legendLabels = flatObjectValueInArray(config.legendLabels);
+    lineGraph.config.main.legendLabels = createKeyValueMap(config.legendLabels);
   }
 
   if (config.pieArcColors) {
-    lineGraph.config.style.lineStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+    lineGraph.config.style.colorMap = createKeyValueMap(config.pieArcColors);
   }
   lineGraph.scope = componentScope;
   return lineGraph;

package/src/impaktapps-ui-builder/builder/build/buildMetricCard.tsx

@@ -0,0 +1,37 @@
+import MetricCard from "./uischema/metricCard";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildMetricCard = (config,componentScope,store) =>{
+    const card: any = _.cloneDeep(MetricCard);
+
+    card.scope = componentScope;
+
+    if (config.style) {
+      card.config.style = JSON.parse(config.style)
+    }
+    if(config.layout){
+      card.config.layout = createLayoutFormat(config.layout)
+    }
+    if(config.label){
+      card.config.main.label = config.label;
+    }
+    if(config.url){
+     card.config.main.url = config.url;
+    }
+    if(config.description){
+      card.config.main.description = config.description;
+    }
+    if(config.cardValue){
+      card.config.main.cardValue = config.cardValue;
+    }
+    if (config.growthRate) {
+     card.config.main.growthRate = config.growthRate;
+    }
+    if (config.color) {
+      card.config.main.color = config.color
+    }
+
+    return card;
+}
+

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

@@ -15,9 +15,21 @@ export const buildMultiSelect = (config, componentScope) => {
   if (config.value) {
     multipleSelect.config.main.options = config.value;
   }
+  if (config.variant) {
+    multipleSelect.config.main.variant = config.variant;
+  }
   if (config.lazyLoading) {
       multipleSelect.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
     }
+  if (config.toolTip) {
+    multipleSelect.config.main.toolTip = config.toolTip;
+  }
+  if (config.toolTipPosition) {
+    multipleSelect.config.main.toolTipPosition = config.toolTipPosition;
+  }
+  if (config.style) {
+    multipleSelect.config.style = JSON.parse(config.style);
+  }
    
   
   return multipleSelect;

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

@@ -0,0 +1,44 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+const OTPSchema = {
+    type: "Control",
+    scope: "#/properties/OTPInput",
+
+    options: {
+        widget: "OTPInput",
+    },
+    config: {
+        layout: { xs: 12, sm: 12, md: 3, lg: 3 },
+        main: {
+            seperator: "",
+            length: 4,
+            type: "number",
+            masking:true
+        },
+    },
+};
+
+export const buildOTP_Input = (config, componentScope) => {
+    const OTP: any = _.cloneDeep(OTPSchema);
+    OTP.scope = componentScope;
+
+    if (config.layout) {
+        OTP.config.layout = createLayoutFormat(config.layout)
+    }
+
+    if (config.style) {
+        OTP.config.style = JSON.parse(config.style)
+    }
+    if (config.errorMessage) {
+        OTP.config.main.errorMessage = config.errorMessage
+    }
+    if (config.toolTip) {
+        OTP.config.main.toolTip = config.toolTip;
+    }
+    OTP.config.main.masking = config.masking === "YES" ? true : false;
+    OTP.config.main.type = config.OTP_Format;
+    OTP.config.main.seperator = config.seperator;
+    OTP.config.main.length = +config.length;
+    return OTP;
+}

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

@@ -0,0 +1,16 @@
+import pdfViewer from "./uischema/pdfViewer";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildPdfViewer = (config, componentScope: string) => {
+    const PdfViewer: any = _.cloneDeep(pdfViewer)
+    PdfViewer.scope = componentScope;
+    PdfViewer.config.main.scale = config.scale;
+    if (config.layout) {
+        PdfViewer.config.layout = createLayoutFormat(config.layout);
+    }
+    if (config.style) {
+        PdfViewer.config.style = JSON.parse(config.style)
+    }
+    return PdfViewer
+}

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

@@ -1,10 +1,10 @@
-import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
+import { createLayoutFormat, createKeyValueMap } from "./buildConfig";
 import { PieGraph } from "./uischema/graph";
 import _ from "lodash";
 export const buildPieGraph = (config, componentScope) => {
   const pieGraph: any = _.cloneDeep(PieGraph);
   if (config.layout) {
-    pieGraph.config.layout = createLayoutFormat(config.layout);
+    pieGraph.config.layout = createLayoutFormat(config.layout, config.type);
   }
   if (config.height) {
     pieGraph.config.style.containerStyle.height = config.height;
@@ -12,17 +12,20 @@ export const buildPieGraph = (config, componentScope) => {
   if (config.legendHide) {
     pieGraph.config.main.legendAvailable = config.legendHide === "YES" ? false : true;
   }
+  if(config.legendDirection){
+    pieGraph.config.main.legendDirection = config.legendDirection === "Row" ? "row" : "column";
+  }
   pieGraph.scope = componentScope;
   pieGraph.config.main.header = config.heading;
 
   if (config.legendLabels) {
-    pieGraph.config.main.legendLabels = flatObjectValueInArray(config.legendLabels);
+    pieGraph.config.main.legendLabels = createKeyValueMap(config.legendLabels);
   }
   if (config.xAxisValue) {
     pieGraph.config.main.xAxisValue = config.xAxisValue;
   }
   if (config.pieArcColors) {
-    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+    pieGraph.config.style.colorMap = createKeyValueMap(config.pieArcColors);
   }
   return pieGraph;
 }

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

@@ -17,6 +17,7 @@ const PopUP =  {
       },
       main: {
         label: "PopUp",
+        onClose:"onClose",
         fullScreen:false,
         fullWidth:false,
         maxWidth:false,
@@ -34,10 +35,10 @@ export const buildPopUp = (config,componentScope) =>{
     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)
+      popup.config.layout = createLayoutFormat(config.layout, config.type)
     }
     if (config.style) {
-      PopUP.config.style = JSON.parse(config.style)
+      popup.config.style = JSON.parse(config.style)
   }
     return popup;
 }

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

@@ -0,0 +1,40 @@
+import { createLayoutFormat } from "./buildConfig";
+import _ from "lodash";
+
+const PopOver =  {
+    type: "Control",
+    scope: "#/properties/text",
+    options: {
+      widget: "Popover",
+    },
+    config: {
+      layout: {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+      },
+      main: {
+        label: "PopOver"
+      },
+      style:{}
+    },
+  }
+export const buildPopOver = (config,componentScope) =>{
+    const popOver: any = _.cloneDeep(PopOver);
+    popOver.scope = componentScope;
+    popOver.config.main.positionVertical = config.positionVertical;
+    popOver.config.main.positionHorizontal = config.positionHorizontal;
+    popOver.config.main.contentVertical = config.contentVertical;
+    popOver.config.main.contentHorizontal = config.contentHorizontal;
+    popOver.config.main.width = config.width;
+    popOver.config.main.gap = config.gap;
+
+    if (config.layout) {
+      popOver.config.layout = createLayoutFormat(config.layout, config.type)
+    }
+    if (config.style) {
+      popOver.config.style = JSON.parse(config.style)
+    }
+    return popOver;
+}

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

@@ -1,26 +1,36 @@
 import progressBar from "./uischema/progressBar";
 import _ from "lodash";
-import { createLayoutFormat } from "./buildConfig";
+import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
 
-export const buildProgressBar = (config:any,componentScope:any) =>{
-    const ProgressBar: any = _.cloneDeep(progressBar);
-        ProgressBar.scope = componentScope;
-        if (config.layout) {
-          ProgressBar.config.layout = config.layout;
-        }
-        ProgressBar.config.main.heading = config.label;
-        if (config.bottomLabel_3) {
-          ProgressBar.config.main.bottomLabel_3 = config.bottomLabel_3;
-        }
-        if(config.layout){
-          ProgressBar.config.layout = createLayoutFormat(config.layout)
-        }
-        if (config.bottomLabel_2) {
-          ProgressBar.config.main.bottomLabel_2 = config.bottomLabel_2;
-        }
-        if (config.bottomLabel_1) {
-          ProgressBar.config.main.bottomLabel_1 = config.bottomLabel_1;
-        }
-        return ProgressBar;
+export const buildProgressBar = (config: any, componentScope: any) => {
+  const ProgressBar: any = _.cloneDeep(progressBar);
+  ProgressBar.scope = componentScope;
+  if (config.layout) {
+    ProgressBar.config.layout = config.layout;
+  }
+
+  ProgressBar.config.main.heading = config.label;
+  if(config.variant){
+   ProgressBar.config.main.variant = config.variant
+  }
+  if (config.pieArcColors) {
+    ProgressBar.config.main.colorRange = flatObjectValueInArray(config.pieArcColors);
+  }
+  if (config.size) {
+    ProgressBar.config.main.size = Number(config.size);
+  }
+  if (config.bottomLabel_3) {
+    ProgressBar.config.main.bottomLabel_3 = config.bottomLabel_3;
+  }
+  if (config.layout) {
+    ProgressBar.config.layout = createLayoutFormat(config.layout)
+  }
+  if (config.bottomLabel_2) {
+    ProgressBar.config.main.bottomLabel_2 = config.bottomLabel_2;
+  }
+  if (config.bottomLabel_1) {
+    ProgressBar.config.main.bottomLabel_1 = config.bottomLabel_1;
+  }
+  return ProgressBar;
 
 }

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

@@ -9,11 +9,10 @@ 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"],
-        errorMessage: "Enabled is not marked as YES or NO",
+        options: ["YES", "NO"]
       },
     },
   };
@@ -31,5 +30,14 @@ const RadioUiSchema = {
     if (config.style) {
         Radio.config.style = JSON.parse(config.style)
     }
+    if (config.errorMessage) {
+        Radio.config.main.errorMessage = config.errorMessage
+    }
+    if (config.toolTip) {
+      Radio.config.main.toolTip = config.toolTip;
+    }
+    if (config.toolTipPosition) {
+      Radio.config.main.toolTipPosition = config.toolTipPosition;
+    }
     return Radio;
 }

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

@@ -14,9 +14,21 @@ export const buildSelect = (config: any, componentScope: string) => {
   if (config.lazyLoading) {
     selectInputField.config.main.lazyLoading = config.lazyLoading === "YES" ? true : false;
   }
+  if (config.variant) {
+    selectInputField.config.main.variant = config.variant;
+  }
   if (config.layout) {
     selectInputField.config.layout = createLayoutFormat(config.layout)
   }
+  if (config.toolTip) {
+    selectInputField.config.main.toolTip = config.toolTip;
+  }
+  if (config.toolTipPosition) {
+    selectInputField.config.main.toolTipPosition = config.toolTipPosition;
+  }
+  if (config.style) {
+    selectInputField.config.style = JSON.parse(config.style);
+  }
   selectInputField.scope = componentScope;
   return selectInputField;
 }

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

@@ -1,26 +1,29 @@
-import { createLayoutFormat, flatObjectValueInArray } from "./buildConfig";
+import { createLayoutFormat, createKeyValueMap } from "./buildConfig";
 import { BarGraph } from "./uischema/graph";
 import _ from "lodash";
 
 export const buildStackbarGraph = (config:any,componentScope:string) => {
     const barGraph: any = _.cloneDeep(BarGraph);
     if (config.layout) {
-      barGraph.config.layout = createLayoutFormat(config.layout);
+      barGraph.config.layout = createLayoutFormat(config.layout, config.type);
     }
     if (config.legendHide) {
       barGraph.config.main.legendAvailable = config.legendHide;
       barGraph.config.main.legendAvailable = config.legendHide==="YES"?false:true;
     }
+    if(config.legendDirection){
+      barGraph.config.main.legendDirection = config.legendDirection === "Row" ? "row" : "column";
+    }
     if (config.bottomAxisAngle) {
       barGraph.config.main.bottomAxisAngle = config.bottomAxisAngle==="YES"?true:false;
     }
     barGraph.config.main.type = config?.graphType ?? "BarGraph";
     barGraph.config.main.header = config.heading;
     if (config.legendLabels) {
-      barGraph.config.main.legendLabels = flatObjectValueInArray(config.legendLabels);
+      barGraph.config.main.legendLabels = createKeyValueMap(config.legendLabels);
     }
     if (config.pieArcColors) {
-      barGraph.config.style.barStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
+      barGraph.config.style.colorMap = createKeyValueMap(config.pieArcColors);
     }
     if (config.xAxisValue) {
       barGraph.config.main.xAxisValue = config.xAxisValue;
@@ -39,6 +42,9 @@ export const buildStackbarGraph = (config:any,componentScope:string) => {
     if (config.leftLabel) {
       barGraph.config.main.leftLabel = config.leftLabel;
     }
+    if (config.disableLeftLabel) {
+     barGraph.config.main.disableLeftLabel = config.disableLeftLabel==="YES"? true: false;
+    }
     barGraph.scope = componentScope;
     return barGraph;
 } 

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

@@ -0,0 +1,72 @@
+import { createLayoutFormat, createKeyValueMap } from "./buildConfig";
+import { StackBarLineG } from "./uischema/graph";
+import _ from "lodash";
+
+
+const buildStackBarLineGraph = (config:any,componentScope:string) => {
+    const StackBarLineGraph: any = _.cloneDeep(StackBarLineG);
+    StackBarLineGraph.scope = componentScope;
+    if (config.layout) {
+      StackBarLineGraph.config.layout = createLayoutFormat(config.layout, config.type);
+    }
+    StackBarLineGraph.config.main.type = config.graphType;
+    StackBarLineGraph.scope = componentScope;
+    StackBarLineGraph.config.main.header = config.heading;
+    StackBarLineGraph.config.main.subHeader = config.subHeader;
+    if (config.legendHide) {
+      StackBarLineGraph.config.main.legendAvailable = config.legendHide==="YES"?false:true;
+    }
+    if (config.bottomAxisAngle) {
+      StackBarLineGraph.config.main.bottomAxisAngle = config.bottomAxisAngle==="YES"?true:false;
+    }
+    if (config.legendLabels) {
+      StackBarLineGraph.config.main.legendLabels = createKeyValueMap(config.legendLabels);
+    }
+    if(config.legendDirection){
+      StackBarLineGraph.config.main.legendDirection = config.legendDirection === "Row" ? "row" : "column";
+    }
+    if (config.height) {
+      StackBarLineGraph.config.style.containerStyle.height = config.height;
+    }
+    if (config.pieArcColors) {
+      StackBarLineGraph.config.style.colorMap = createKeyValueMap(config.pieArcColors);
+    }
+    if(config.yAxisTickCount){
+      StackBarLineGraph.config.main.yAxisTickCount = config.yAxisTickCount
+    }
+    if(config.xAxisTickCount){
+      StackBarLineGraph.config.main.xAxisTickCount = config.xAxisTickCount
+    }
+    if (config.xAxisValue) {
+      StackBarLineGraph.config.main.xAxisValue = config.xAxisValue;
+    }
+    if(config.xAxisType) {
+      StackBarLineGraph.config.main.xAxisType = config.xAxisType;
+    }
+    if (config.bottomLabel) {
+      StackBarLineGraph.config.main.bottomLabel = config.bottomLabel;
+    }
+    if (config.leftLabel) {
+      StackBarLineGraph.config.main.leftLabel = config.leftLabel;
+    }
+    if (config.rightLabel) {
+      StackBarLineGraph.config.main.rightLabel = config.rightLabel;
+    }
+    if (config.disableLeftLabel) {
+      StackBarLineGraph.config.main.disableLeftLabel = config.disableLeftLabel==="YES"? true: false;
+    }
+    if (config.growthRateKey) {
+      StackBarLineGraph.config.main.growthRateKey = config.growthRateKey;
+    }
+    if (config.tooltipUnit) {
+      StackBarLineGraph.config.main.tooltipUnit = config.tooltipUnit;
+    }
+    if (config.leftMargin) {
+      StackBarLineGraph.config.style.labelStyle.margin ={
+        left: config.leftMargin
+      }
+    }
+    return StackBarLineGraph
+}
+
+export default buildStackBarLineGraph;

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

@@ -1,3 +1,4 @@
+import { flatObjectValueInArray } from "./buildConfig";
 import Tabsection from "./uischema/tabsection";
 import _ from "lodash";
  
@@ -13,6 +14,10 @@ export const buildTabSection = (config:any,componentScope:string) => {
     }
     if (config.sectionLabels) {
       tab.config.main.tabLabels = config.sectionLabels.map(e => e.label);
+      tab.config.main.tabIcons = config.sectionLabels.map(e => e.icon);
+    }
+    if (config.style) {
+      tab.config.style = JSON.parse(config.style)
     }
     tab.config.main.id = config.name;
     return tab