{
  "custom": {},
  "params": {
    "color": "#FFFFFF"
  },
  "propConfig": {
    "params.color": {
      "paramDirection": "inout",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 380,
      "width": 250
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Color Palette"
        },
        "position": {
          "grow": 1
        },
        "props": {
          "alignContent": "flex-start",
          "alignItems": "flex-start",
          "elementPosition": {
            "basis": "20px",
            "grow": 0,
            "shrink": 0
          },
          "instances": [
            {
              "color": "#FFFFFF"
            },
            {
              "color": "#D5D5D5"
            },
            {
              "color": "#AAAAAA"
            },
            {
              "color": "#808080"
            },
            {
              "color": "#555555"
            },
            {
              "color": "#2B2B2B"
            },
            {
              "color": "#000000"
            },
            {
              "color": "#FFCCCC"
            },
            {
              "color": "#FF8A8A"
            },
            {
              "color": "#FF4747"
            },
            {
              "color": "#FF0000"
            },
            {
              "color": "#D90000"
            },
            {
              "color": "#AC0000"
            },
            {
              "color": "#800000"
            },
            {
              "color": "#FFE8CC"
            },
            {
              "color": "#FFCA8A"
            },
            {
              "color": "#FFAC47"
            },
            {
              "color": "#FF8C00"
            },
            {
              "color": "#D97700"
            },
            {
              "color": "#AC5F00"
            },
            {
              "color": "#804600"
            },
            {
              "color": "#FFFFCC"
            },
            {
              "color": "#FFFF8A"
            },
            {
              "color": "#FFFF47"
            },
            {
              "color": "#FFFF00"
            },
            {
              "color": "#D9D900"
            },
            {
              "color": "#ACAC00"
            },
            {
              "color": "#808000"
            },
            {
              "color": "#CCFFCC"
            },
            {
              "color": "#8AFF8A"
            },
            {
              "color": "#47FF47"
            },
            {
              "color": "#00FF00"
            },
            {
              "color": "#00D900"
            },
            {
              "color": "#00AC00"
            },
            {
              "color": "#008000"
            },
            {
              "color": "#CCFFFF"
            },
            {
              "color": "#8AFFFF"
            },
            {
              "color": "#47FFFF"
            },
            {
              "color": "#00FFFF"
            },
            {
              "color": "#00D9D9"
            },
            {
              "color": "#00ACAC"
            },
            {
              "color": "#008080"
            },
            {
              "color": "#CCCCFF"
            },
            {
              "color": "#8A8AFF"
            },
            {
              "color": "#4747FF"
            },
            {
              "color": "#0000FF"
            },
            {
              "color": "#0000D9"
            },
            {
              "color": "#0000AC"
            },
            {
              "color": "#000080"
            },
            {
              "color": "#FFCCFF"
            },
            {
              "color": "#FF8AFF"
            },
            {
              "color": "#FF47FF"
            },
            {
              "color": "#FF00FF"
            },
            {
              "color": "#D900D9"
            },
            {
              "color": "#AC00AC"
            },
            {
              "color": "#800080"
            }
          ],
          "key": "value",
          "path": "Framework/Color Picker/Color",
          "style": {
            "backgroundColor": "#FFFFFF"
          },
          "useDefaultViewHeight": false,
          "useDefaultViewWidth": false,
          "wrap": "wrap"
        },
        "scripts": {
          "customMethods": [],
          "extensionFunctions": null,
          "messageHandlers": [
            {
              "messageType": "color-clicked",
              "pageScope": true,
              "script": "\tcolor \u003d payload[\"color\"]\n\tself.view.params.color \u003d color",
              "sessionScope": false,
              "viewScope": false
            }
          ]
        },
        "type": "ia.display.flex-repeater"
      },
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "position": {
                  "basis": "40px",
                  "shrink": 0
                },
                "props": {
                  "style": {
                    "marginLeft": "6px"
                  },
                  "text": "Red"
                },
                "type": "ia.display.label"
              },
              {
                "children": [
                  {
                    "meta": {
                      "name": "NumericEntryField"
                    },
                    "position": {
                      "basis": "32px",
                      "shrink": 0
                    },
                    "propConfig": {
                      "props.value": {
                        "binding": {
                          "config": {
                            "path": "view.params.color"
                          },
                          "transforms": [
                            {
                              "code": "\ttry:\n\t\treturn int(value[1:3], 16)\n\texcept:\n\t\treturn None",
                              "type": "script"
                            }
                          ],
                          "type": "property"
                        },
                        "onChange": {
                          "enabled": null,
                          "script": "\tif origin in [\"Browser\", \"BindingWriteback\"]:\n\t\tif currentValue.value !\u003d None:\n\t\t\tcolor \u003d self.view.params.color\n\t\t\thexColor \u003d hex(currentValue.value).replace(\"0x\",\"\").upper().replace(\"L\",\"\")\n\t\t\tif len(hexColor) \u003d\u003d 1:\n\t\t\t\thexColor \u003d \"0%s\" % hexColor\n\t\t\tcolor \u003d \"#\" + hexColor + color[3:]\n\t\t\tself.view.params.color \u003d color"
                        }
                      }
                    },
                    "props": {
                      "format": "0,0",
                      "inputBounds": {
                        "maximum": 255,
                        "minimum": 0
                      },
                      "style": {
                        "borderRadius": "4px"
                      }
                    },
                    "type": "ia.input.numeric-entry-field"
                  }
                ],
                "meta": {
                  "name": "FlexContainer"
                },
                "position": {
                  "basis": "50px",
                  "shrink": 0
                },
                "props": {
                  "direction": "column",
                  "justify": "center",
                  "style": {
                    "marginLeft": "10px",
                    "marginRight": "10px"
                  }
                },
                "type": "ia.container.flex"
              },
              {
                "meta": {
                  "name": "Slider"
                },
                "position": {
                  "grow": 1
                },
                "propConfig": {
                  "props.value": {
                    "binding": {
                      "config": {
                        "bidirectional": true,
                        "path": "../FlexContainer/NumericEntryField.props.value"
                      },
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "labels": {
                    "interval": 42.5,
                    "show": true
                  },
                  "max": 255,
                  "style": {
                    "marginLeft": "10px",
                    "marginRight": "20px"
                  }
                },
                "type": "ia.input.slider"
              }
            ],
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "basis": "72px",
              "shrink": 0
            },
            "props": {
              "style": {
                "overflow": "hidden"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "direction": "column"
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "position": {
                  "basis": "40px",
                  "shrink": 0
                },
                "props": {
                  "style": {
                    "marginLeft": "6px"
                  },
                  "text": "Blue"
                },
                "type": "ia.display.label"
              },
              {
                "children": [
                  {
                    "meta": {
                      "name": "NumericEntryField"
                    },
                    "position": {
                      "basis": "32px",
                      "shrink": 0
                    },
                    "propConfig": {
                      "props.value": {
                        "binding": {
                          "config": {
                            "path": "view.params.color"
                          },
                          "transforms": [
                            {
                              "code": "\ttry:\n\t\treturn int(value[3:5], 16)\n\texcept:\n\t\treturn None",
                              "type": "script"
                            }
                          ],
                          "type": "property"
                        },
                        "onChange": {
                          "enabled": null,
                          "script": "\tif origin in [\"Browser\", \"BindingWriteback\"]:\n\t\tif currentValue.value !\u003d None:\n\t\t\tcolor \u003d self.view.params.color\n\t\t\thexColor \u003d hex(currentValue.value).replace(\"0x\",\"\").upper().replace(\"L\",\"\")\n\t\t\tif len(hexColor) \u003d\u003d 1:\n\t\t\t\thexColor \u003d \"0%s\" % hexColor\n\t\t\tcolor \u003d \"#\" + color[1:3] + hexColor + color[5:]\n\t\t\tself.view.params.color \u003d color"
                        }
                      }
                    },
                    "props": {
                      "format": "0,0",
                      "inputBounds": {
                        "maximum": 255,
                        "minimum": 0
                      },
                      "style": {
                        "borderRadius": "4px"
                      }
                    },
                    "type": "ia.input.numeric-entry-field"
                  }
                ],
                "meta": {
                  "name": "FlexContainer"
                },
                "position": {
                  "basis": "50px",
                  "shrink": 0
                },
                "props": {
                  "direction": "column",
                  "justify": "center",
                  "style": {
                    "marginLeft": "10px",
                    "marginRight": "10px"
                  }
                },
                "type": "ia.container.flex"
              },
              {
                "meta": {
                  "name": "Slider"
                },
                "position": {
                  "grow": 1
                },
                "propConfig": {
                  "props.value": {
                    "binding": {
                      "config": {
                        "bidirectional": true,
                        "path": "../FlexContainer/NumericEntryField.props.value"
                      },
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "labels": {
                    "interval": 42.5,
                    "show": true
                  },
                  "max": 255,
                  "style": {
                    "marginLeft": "10px",
                    "marginRight": "20px"
                  }
                },
                "type": "ia.input.slider"
              }
            ],
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "basis": "72px",
              "shrink": 0
            },
            "props": {
              "style": {
                "overflow": "hidden"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "FlexContainer_1"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "direction": "column"
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "children": [
              {
                "meta": {
                  "name": "Label"
                },
                "position": {
                  "basis": "40px",
                  "shrink": 0
                },
                "props": {
                  "style": {
                    "marginLeft": "6px"
                  },
                  "text": "Green"
                },
                "type": "ia.display.label"
              },
              {
                "children": [
                  {
                    "meta": {
                      "name": "NumericEntryField"
                    },
                    "position": {
                      "basis": "32px",
                      "shrink": 0
                    },
                    "propConfig": {
                      "props.value": {
                        "binding": {
                          "config": {
                            "path": "view.params.color"
                          },
                          "transforms": [
                            {
                              "code": "\ttry:\n\t\treturn int(value[5:], 16)\n\texcept:\n\t\treturn None",
                              "type": "script"
                            }
                          ],
                          "type": "property"
                        },
                        "onChange": {
                          "enabled": null,
                          "script": "\tif origin in [\"Browser\", \"BindingWriteback\"]:\n\t\tif currentValue.value !\u003d None:\n\t\t\tcolor \u003d self.view.params.color\n\t\t\thexColor \u003d hex(currentValue.value).replace(\"0x\",\"\").upper().replace(\"L\",\"\")\n\t\t\tif len(hexColor) \u003d\u003d 1:\n\t\t\t\thexColor \u003d \"0%s\" % hexColor\n\t\t\tcolor \u003d \"#\" + color[1:5] + hexColor\n\t\t\tself.view.params.color \u003d color"
                        }
                      }
                    },
                    "props": {
                      "format": "0,0",
                      "inputBounds": {
                        "maximum": 255,
                        "minimum": 0
                      },
                      "style": {
                        "borderRadius": "4px"
                      }
                    },
                    "type": "ia.input.numeric-entry-field"
                  }
                ],
                "meta": {
                  "name": "FlexContainer"
                },
                "position": {
                  "basis": "50px",
                  "shrink": 0
                },
                "props": {
                  "direction": "column",
                  "justify": "center",
                  "style": {
                    "marginLeft": "10px",
                    "marginRight": "10px"
                  }
                },
                "type": "ia.container.flex"
              },
              {
                "meta": {
                  "name": "Slider"
                },
                "position": {
                  "grow": 1
                },
                "propConfig": {
                  "props.value": {
                    "binding": {
                      "config": {
                        "bidirectional": true,
                        "path": "../FlexContainer/NumericEntryField.props.value"
                      },
                      "type": "property"
                    }
                  }
                },
                "props": {
                  "labels": {
                    "interval": 42.5,
                    "show": true
                  },
                  "max": 255,
                  "style": {
                    "marginLeft": "10px",
                    "marginRight": "20px"
                  }
                },
                "type": "ia.input.slider"
              }
            ],
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "basis": "72px",
              "shrink": 0
            },
            "props": {
              "style": {
                "overflow": "hidden"
              }
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "FlexContainer_2"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "direction": "column"
        },
        "type": "ia.container.flex"
      },
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "shrink": 0
            },
            "props": {
              "style": {
                "marginLeft": "6px",
                "marginRight": "6px"
              },
              "text": "Color"
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "TextField"
            },
            "position": {
              "basis": "100px",
              "shrink": 0
            },
            "propConfig": {
              "props.text": {
                "binding": {
                  "config": {
                    "bidirectional": true,
                    "path": "view.params.color"
                  },
                  "type": "property"
                }
              }
            },
            "props": {
              "style": {
                "borderRadius": "4px"
              }
            },
            "type": "ia.input.text-field"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "20px"
            },
            "propConfig": {
              "props.style.backgroundColor": {
                "binding": {
                  "config": {
                    "path": "view.params.color"
                  },
                  "type": "property"
                }
              }
            },
            "props": {
              "style": {
                "borderColor": "#D3D3D3",
                "borderRadius": "32px",
                "borderStyle": "solid",
                "borderWidth": "1px",
                "margin": "6px"
              }
            },
            "type": "ia.display.label"
          },
          {
            "children": [
              {
                "events": {
                  "component": {
                    "onActionPerformed": {
                      "config": {
                        "script": "\t## Send message back to view/component that called color picker popup\n\tsystem.perspective.sendMessage(\n\t\t\"updateFromColorPicker\",\n\t\tpayload\u003d{\"color\": self.view.params.color},\n\t\tscope\u003d\"session\"\n\t)\n\t## close color picker poup\n\tsystem.perspective.closePopup(\"ColorPicker\")"
                      },
                      "scope": "G",
                      "type": "script"
                    }
                  }
                },
                "meta": {
                  "name": "Button Update and Close",
                  "tooltip": {
                    "enabled": true,
                    "location": "center-left",
                    "text": "Update and close"
                  }
                },
                "props": {
                  "image": {
                    "icon": {
                      "path": "material/exit_to_app"
                    }
                  },
                  "text": ""
                },
                "type": "ia.input.button"
              }
            ],
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "grow": 1
            },
            "props": {
              "justify": "flex-end"
            },
            "type": "ia.container.flex"
          }
        ],
        "meta": {
          "name": "FlexContainer_0"
        },
        "position": {
          "basis": "32px",
          "shrink": 0
        },
        "props": {
          "style": {
            "marginBottom": "10px",
            "marginTop": "10px"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "classes": "Framework/ColorPicker/Container"
      }
    },
    "type": "ia.container.flex"
  }
}