{
  "custom": {},
  "params": {
    "color": "#FFFFFF",
    "enabled": false,
    "group": "AHU 1",
    "name": "Supply fan speed"
  },
  "propConfig": {
    "params.color": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.enabled": {
      "paramDirection": "inout",
      "persistent": true
    },
    "params.group": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.name": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 22,
      "width": 212
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Color"
        },
        "position": {
          "basis": "20px"
        },
        "propConfig": {
          "props.fill": {
            "binding": {
              "config": {
                "path": "view.params.color"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "elements": [
            {
              "height": "60%",
              "rx": "3px",
              "type": "rect",
              "width": "60%",
              "x": "20%",
              "y": "20%"
            }
          ],
          "viewBox": "0 0 24 24"
        },
        "type": "ia.shapes.svg"
      },
      {
        "events": {
          "component": {
            "onActionPerformed": {
              "config": {
                "script": "\t# Send a message to enableDisablePen handler and in the payload \n\t# include the pen name, pen group, pen color, and a boolean \n\t# denoting whether the pen was selected or de-selected.\n\t\n\tenabledOrDisabled \u003d self.props.selected\n\tname \u003d self.view.params.name\n\tgroup \u003d self.view.params.group\n\tcolor \u003d self.view.params.color\n\t\n\tpayload \u003d {\u0027enabledOrDisabled\u0027:enabledOrDisabled,\u0027name\u0027:name,\u0027group\u0027:group,\u0027color\u0027:color}\n\t\n\tsystem.perspective.sendMessage(\u0027enableDisablePen\u0027,payload\u003dpayload,scope\u003d\u0027page\u0027)"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Checkbox"
        },
        "position": {
          "basis": "20px"
        },
        "propConfig": {
          "props.selected": {
            "binding": {
              "config": {
                "path": "view.params.enabled"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "checkedIcon": {
            "color": {
              "enabled": "var(--neutral-100)"
            },
            "style": {
              "maxHeight": "17px"
            }
          },
          "text": "",
          "uncheckedIcon": {
            "style": {
              "maxHeight": "17px"
            }
          }
        },
        "type": "ia.input.checkbox"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "basis": "12px",
          "grow": 1
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.name"
              },
              "transforms": [
                {
                  "code": "\tif \u0027AHU\u0027 in value:\n\t\treturn value[5:len(value)]\n\telse:\n\t\treturn value",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          }
        },
        "props": {
          "style": {
            "color": "--neutral-90",
            "fontSize": "11px",
            "paddingLeft": "5px"
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "color": "--units-color"
      }
    },
    "type": "ia.container.flex"
  }
}