{
  "custom": {},
  "params": {
    "color": "var(--callToAction)",
    "index": "",
    "label": "",
    "mode": "custom",
    "selected": false,
    "source": ""
  },
  "propConfig": {
    "params.color": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.index": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.label": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.mode": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.selected": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.source": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 35,
      "width": 249
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Color"
        },
        "position": {
          "basis": "4px",
          "shrink": 0
        },
        "propConfig": {
          "props.style.backgroundColor": {
            "binding": {
              "config": {
                "expression": "{view.params.color}"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "borderBottomLeftRadius": "var(--borderRadius)",
            "borderTopLeftRadius": "var(--borderRadius)"
          }
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "shrink": 0
        },
        "propConfig": {
          "position.display": {
            "binding": {
              "config": {
                "expression": "{view.params.label} !\u003d \u0027\u0027"
              },
              "type": "expr"
            }
          },
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.label"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "style": {
            "padding": "2px 0"
          }
        },
        "type": "ia.display.label"
      },
      {
        "events": {
          "dom": {
            "onBlur": {
              "config": {
                "script": "\tself.applyCustomFilter()\n\t"
              },
              "scope": "G",
              "type": "script"
            },
            "onKeyPress": {
              "config": {
                "script": "\tif event.key \u003d\u003d \u0027Enter\u0027:\n\t\tself.applyCustomFilter()"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "TextField"
        },
        "propConfig": {
          "position.basis": {
            "binding": {
              "config": {
                "expression": "\u00270px\u0027"
              },
              "type": "expr"
            }
          },
          "props.style.width": {
            "binding": {
              "config": {
                "path": "this.position.basis"
              },
              "type": "property"
            }
          },
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.label"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "deferUpdates": false,
          "rejectUpdatesWhileFocused": false,
          "style": {
            "background": "transparent",
            "border": "none",
            "fontSize": "inherit",
            "outline": "none",
            "padding": 0
          }
        },
        "scripts": {
          "customMethods": [
            {
              "name": "applyCustomFilter",
              "params": [],
              "script": "\tpayload \u003d {\n\t\u0027source\u0027: self.view.params.source, \n\t\u0027label\u0027: self.props.text,\n\t\u0027index\u0027: self.view.params.index\n\t}\n\tif payload[\u0027label\u0027] !\u003d \u0027\u0027:\n\t\tsystem.perspective.sendMessage(\u0027customFilter\u0027, payload\u003dpayload)\n\tself.refreshBinding(\u0027position.basis\u0027)"
            }
          ],
          "extensionFunctions": null,
          "messageHandlers": []
        },
        "type": "ia.input.text-field"
      },
      {
        "meta": {
          "name": "Close"
        },
        "position": {
          "basis": "18px",
          "shrink": 0
        },
        "propConfig": {
          "props.color": {
            "binding": {
              "config": {
                "expression": "if({view.params.selected},\r\n\u0027color-mix(in srgb, var(--callToAction) 40%, var(--contextBackground) 60%)\u0027,\r\n\u0027color-mix(in srgb, var(--callToAction) 60%, var(--contextBackground) 40%)\u0027)"
              },
              "type": "expr"
            }
          },
          "props.path": {
            "binding": {
              "config": {
                "expression": "if({view.params.selected}, \r\n\u0027material/close\u0027,\r\nif({view.params.label}\u003d\u0027\u0027,\u0027material/search\u0027,\u0027material/add\u0027))"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "cursor": "pointer",
            "marginRight": "5px",
            "width": "24px"
          }
        },
        "type": "ia.display.icon"
      }
    ],
    "events": {
      "dom": {
        "onClick": {
          "config": {
            "script": "\tpayload \u003d {\n\t\u0027source\u0027: self.view.params.source, \n\t\u0027label\u0027: self.view.params.label,\n\t\u0027index\u0027: self.view.params.index\n\t}\n\tsystem.perspective.print(payload)\n\tselected \u003d self.view.params.selected\n\tif payload[\u0027label\u0027] \u003d\u003d \u0027\u0027:\n\t\tself.getChild(\"TextField\").position.basis \u003d \u0027auto\u0027\n\t\tself.getChild(\"TextField\").focus()\n\telse:\n\t\tif selected:\n\t\t\tsystem.perspective.sendMessage(\u0027removeFilter\u0027, payload\u003dpayload)\n\t\telse:\n\t\t\tsystem.perspective.sendMessage(\u0027addFilter\u0027, payload\u003dpayload)"
          },
          "scope": "G",
          "type": "script"
        }
      }
    },
    "meta": {
      "name": "root"
    },
    "propConfig": {
      "props.style.classes": {
        "binding": {
          "config": {
            "expression": "if({view.params.selected},\r\n\u0027buttons/hover-effect-selected\u0027,\r\n\u0027buttons/hover-effect-unselected\u0027)"
          },
          "type": "expr"
        }
      }
    },
    "props": {
      "style": {
        "border": "1px solid var(--border)",
        "borderRadius": "var(--borderRadius)",
        "cursor": "pointer",
        "fontSize": "0.8em",
        "gap": "5px",
        "overflow": "hidden"
      }
    },
    "type": "ia.container.flex"
  }
}