color-picker.html

<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="./bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="./bower_components/paper-input/paper-input.html">

<!--
`color-picker`
A material design color picker.

@demo demo/index.html
-->

<dom-module id="color-picker">
  <template>
    <style>
      :host {
        display: block;
      }
      #colorContainer {
        position: relative;
      }
      #colorDisplay {
        width:100%;
        height: 0.5em;
      }
    </style>
    <div id="colorContainer" on-click="_colorpicker_clicked">
      <paper-input id="paperInput" label="[[label]]" placeholder="[[placeholder]]" name="[[name]]" value="[[value]]" on-change="_inputChanged" on-click="_colorpicker_clicked" readonly="[[readonly]]" required=[[required]] validator=[[validator]]></paper-input>
      <div id="colorDisplay"></div>
      <input id="picker" type="color" value="[[value]]" on-change="_valueChanged" hidden title="[[label]]" />
      <paper-ripple></paper-ripple>
    </div>
  </template>

  <script>
    Polymer({

      is: 'color-picker',

      behaviors: [
        Polymer.IronFormElementBehavior,
      ],

      properties: {
        value: {
          type: String,
          notify: true,
          value: "#7d7d7d",
          observer: "_onValueChanged"
        },
        label: {
          type: String,
          notify: true,
          value: 'color input',
        },
      },
      _colorpicker_clicked: function(){
        this.$.picker.click();
        this.$.paperInput.inputElement.blur();
      },
      _inputChanged: function(){
        this.value = this.$.paperInput.value;
      },
      _valueChanged: function(){
        this.value = this.$.picker.value;
      },
      _onValueChanged: function(newValue, oldValue){
        this.$.colorDisplay.style["background-color"] = this.$.picker.value;
        this.$.paperInput.inputElement.blur();
      }
    });
  </script>
</dom-module>