brainy-table-column-filter.html

<link rel="import" href="../paper-input/paper-input.html">

<dom-module id="brainy-table-column-filter">
  <style>
    :host {
      --paper-input-container-label: {
        font-size: inherit;
      }
    }

    :host([hidden]) {
      display: none;
    }
  </style>

  <template>
    <paper-input label="[[label]]" no-label-float value="[[value]]" on-value-changed="_valueChanged"></paper-input>
  </template>
  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'brainy-table-column-filter',

        properties: {
          label: String,
          value: {
            type: String,
            notify: true
          },
          hidden: Boolean
        },

        _valueChanged: function(e) {
          // store value in a variable, referring to e.detail.value inside the debounce
          // function results in weird outcomes. event object might be reused by Polymer?
          var value = e.detail.value;
          this.debounce('value', function() {
            this.value = value;
          }.bind(this), 250);
        }
      });
    })();
  </script>
</dom-module>