rgb-component-input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-input/iron-input.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-input/paper-input-error.html">
<link rel="import" href="../paper-input/paper-input-behavior.html">
<link rel="import" href="rgb-component-validator.html">

<dom-module id="rgb-component-input">
  <template>

    <style>
      :host {
        display: inline-block;
      }

      :host([hidden]) {
        display: none !important;
      }

      input[is="iron-input"] {
        font: inherit;
        outline: none;
        box-shadow: none;
        border: none;
        width: auto;
        text-align: center;
      }
    </style>

    <rgb-component-validator></rgb-component-validator>

    <paper-input-container auto-validate always-float-label>
      <label for="input">[[ color ]]</label>
      <input is="iron-input"
        id="input"
        type="number"
        bind-value="{{ value }}"
        minlength="1"
        maxlength="3"
        aria-label="[[ color ]] value from 0 to 255"
        allowed-pattern="[0-9]"
        validator="rgb-component-validator"
        invalid="{{ invalid }}"
        prevent-invalid-input
      />
      <paper-input-error>0 - 255</paper-input-error>
    </paper-input-container>

  </template>
</dom-module>

<script>
  Polymer({

    is: 'rgb-component-input',

    behaviors: [
      Polymer.PaperInputBehavior
    ],

    properties: {
      color: {
        type: String
      },

      invalid: {
        type: Boolean,
        value: false,
        notify: true
      },

      value: {
        type: Number
      }
    },

    listeners: {
      'value-changed': '_onValueChanged'
    },

    _onValueChanged: function (e, obj) {
      value = parseInt(obj.value);

      if (value > 255) {
        value = 255;
      } else if (value < 0) {
        value = 0;
      }

      this.set('value', value);
    }

  });
</script>