{
  "custom": {},
  "params": {
    "active": false,
    "color": "",
    "id": "",
    "text": ""
  },
  "propConfig": {
    "params.active": {
      "paramDirection": "inout",
      "persistent": true
    },
    "params.color": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.id": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.text": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 28,
      "width": 183
    }
  },
  "root": {
    "children": [
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tsystem.perspective.sendMessage(\u0027activate-filter\u0027, payload \u003d {\u0027id\u0027:self.view.params.id}, scope \u003d \u0027page\u0027)\n\tself.view.params.active \u003d True "
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "AddButton"
        },
        "position": {
          "basis": "30px"
        },
        "propConfig": {
          "position.display": {
            "binding": {
              "config": {
                "expression": "!{view.params.active}"
              },
              "type": "expr"
            }
          },
          "props.color": {
            "binding": {
              "config": {
                "path": "view.params.color"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/add",
          "style": {
            "cursor": "pointer"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tsystem.perspective.sendMessage(\u0027deactivate-filter\u0027, payload \u003d {\u0027id\u0027:self.view.params.id}, scope \u003d \u0027page\u0027)\n\tself.view.params.active \u003d False  "
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "RemoveButton"
        },
        "position": {
          "basis": "30px"
        },
        "propConfig": {
          "position.display": {
            "binding": {
              "config": {
                "expression": "{view.params.active}"
              },
              "type": "expr"
            }
          },
          "props.color": {
            "binding": {
              "config": {
                "path": "view.params.color"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "path": "material/remove",
          "style": {
            "cursor": "pointer"
          }
        },
        "type": "ia.display.icon"
      },
      {
        "meta": {
          "name": "FilterText"
        },
        "position": {
          "basis": "153px"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.text"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "style": {
            "classes": "Page/Text",
            "fontSize": 12
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "overflow": "hidden"
      }
    },
    "scripts": {
      "customMethods": [],
      "extensionFunctions": null,
      "messageHandlers": [
        {
          "messageType": "deactivate-filter",
          "pageScope": true,
          "script": "\t# implement your handler here\n\tif payload[\u0027id\u0027] \u003d\u003d self.view.params.id or payload[\u0027id\u0027] \u003d\u003d -1:\n\t\tself.view.params.active \u003d False",
          "sessionScope": false,
          "viewScope": false
        }
      ]
    },
    "type": "ia.container.flex"
  }
}