{
  "custom": {},
  "params": {
    "label": "MaterialDef",
    "status": "good",
    "value": 400
  },
  "propConfig": {
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.status": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.value": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 95,
      "width": 300
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "label"
            },
            "position": {
              "basis": "50px",
              "grow": 1,
              "shrink": 0
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "config": {
                    "path": "view.params.label"
                  },
                  "type": "property"
                }
              }
            },
            "props": {
              "textStyle": {
                "fontFamily": "Roboto",
                "fontSize": 20,
                "textAlign": "center"
              }
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "flx_label"
        },
        "position": {
          "basis": "100px",
          "grow": 1
        },
        "props": {
          "direction": "column",
          "justify": "center",
          "style": {
            "overflow": "visible"
          },
          "wrap": "wrap"
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "meta": {
              "name": "value"
            },
            "position": {
              "basis": "100px",
              "grow": 1,
              "shrink": 0
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "config": {
                    "path": "view.params.value"
                  },
                  "type": "property"
                }
              }
            },
            "props": {
              "textStyle": {
                "fontFamily": "Roboto",
                "fontSize": 30,
                "textAlign": "center"
              }
            },
            "type": "ia.display.label"
          }
        ],
        "custom": {
          "status": {
            "good": "#D9EAD3",
            "low": "#FBCFD1",
            "warn": "#F6E5D4"
          }
        },
        "meta": {
          "name": "flx_value"
        },
        "position": {
          "basis": "50px",
          "grow": 1
        },
        "propConfig": {
          "props.style.backgroundColor": {
            "binding": {
              "config": {
                "path": "this.custom.status"
              },
              "transforms": [
                {
                  "code": "\treturn value[self.view.params.status]",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          }
        },
        "props": {
          "style": {
            "borderBottomLeftRadius": 40,
            "borderBottomRightRadius": 40,
            "borderTopLeftRadius": 40,
            "borderTopRightRadius": 40,
            "margin": 20,
            "overflow": "visible"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "justify": "space-around",
      "style": {
        "overflow": "visible"
      },
      "wrap": "wrap"
    },
    "type": "ia.container.flex"
  }
}