vaadin-grid-filter.html

<!--
@license
Copyright (c) 2017 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../vaadin-text-field/vaadin-text-field.html">

<dom-module id="vaadin-grid-filter">
  <template>
    <style>
      :host {
        display: inline-flex;
      }

      #filter {
        width: 100%;
        box-sizing: border-box;
      }
    </style>
    <slot name="filter">
      <vaadin-text-field id="filter" value="{{value}}"></vaadin-text-field>
    </slot>

  </template>
  <script>
    {
      /**
       * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
       * and handlers for filtering the grid data.
       *
       * #### Example:
       * ```html
       * <vaadin-grid-column>
       *   <template class="header">
       *     <vaadin-grid-filter path="name.first"></vaadin-grid-filter>
       *   </template>
       *   <template>[[item.name.first]]</template>
       * </vaadin-grid-column>
       * ```
       *
       * @memberof Vaadin
       */
      class GridFilterElement extends Polymer.Element {

        static get is() {
          return 'vaadin-grid-filter';
        }

        static get properties() {
          return {

            /**
             * JS Path of the property in the item used for filtering the data.
             */
            path: String,

            /**
             * Current filter value.
             */
            value: {
              type: String,
              notify: true
            },

            _connected: Boolean
          };
        }

        /** @private */
        connectedCallback() {
          this._connected = true;
        }

        static get observers() {
          return ['_filterChanged(path, value, _connected)'];
        }

        ready() {
          super.ready();

          const child = Polymer.dom(this).firstElementChild;
          if (child && child.getAttribute('slot') !== 'filter') {
            console.warn('Make sure you have assigned slot="filter" to the child elements of <vaadin-grid-filter>');
            child.setAttribute('slot', 'filter');
          }
        }

        _filterChanged(path, value, connected) {
          if (path === undefined || value === undefined || !connected) {
            return;
          }

          this._debouncerFilterChanged = Polymer.Debouncer.debounce(
            this._debouncerFilterChanged,
            Polymer.Async.timeOut.after(200),
            () => {
              this.dispatchEvent(new CustomEvent('filter-changed', {bubbles: true}));
            });
        }

        focus() {
          this.$.filter.focus();
        }

      }

      customElements.define(GridFilterElement.is, GridFilterElement);

      /**
       * @namespace Vaadin
       */
      window.Vaadin = window.Vaadin || {};
      Vaadin.GridFilterElement = GridFilterElement;
    }
  </script>
</dom-module>