<!--
ag-data-grid-search renders a search area for the grid.
The value of the search is provided to the ```dataSource's fetch``` function
as a ```search { keyword: <string> }``` object.

Usage:
  ```
  <ag-data-grid-search label="Search Contacts"></ag-data-grid-search>
  ```
@element ag-data-grid-search
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-input/paper-input.html">
<polymer-element name="ag-data-grid-search" grid-search expects-grid-state attributes="label">
  <template>
    <link rel="stylesheet" href="ag-data-grid-search.css">
    <paper-input committedValue="{{ value }}" id="search" label="{{ label }}"></paper-input>
  </template>
  <script>
    /*
     * Renders a search box inside the grid components
     */
    Polymer('ag-data-grid-search', {
      /**
       * Label text for search box.
       * @attribute label
       * @type string
       */
      label: '',
      valueChanged: function() {
        this.gridState.search.keyword = this.value;
      }
    });
  </script>
</polymer-element>