| <!-- |
| ag-data-grid-filter-toggle renders a boolean filter. |
| The value of the filter is provided to the ```dataSource's fetch``` function |
| as a value in the filters map. ```filters[key]: <boolean>``` |
| |
| Usage: |
| ``` |
| <ag-data-grid-filter-toggle |
| key="withPhone" |
| label="Only show contacts that have a phone number"> |
| </ag-data-grid-filter-toggle> |
| ``` |
| @element ag-data-grid-filter-toggle |
| --> |
| <link rel="import" href="../../../polymer/polymer.html"> |
| <link rel="import" href="../../../paper-toggle-button/paper-toggle-button.html"> |
| <polymer-element name="ag-data-grid-filter-toggle" attributes="key checked label" grid-filter expects-grid-state> |
| <template> |
| <link rel="stylesheet" href="ag-data-grid-filter-toggle.css"> |
| <link rel="stylesheet" href="../common.css"> |
| <div class="filter-container"> |
| <h3>{{label}}</h3> |
| <paper-toggle-button id="toggle" on-change="{{ updateGridState }}" checked?="{{ checked }}"></paper-toggle-button> |
| </div> |
| </template> |
| <script> |
| Polymer('ag-data-grid-filter-toggle', { |
| /** |
| * Label text for the toggle filter |
| * @attribute label |
| * @type string |
| * @default '' |
| */ |
| label: '', |
| |
| /** |
| * Whether toggle is checked or not |
| * @attribute checked |
| * @type boolean |
| * @default false |
| */ |
| checked: false, |
| |
| /** |
| * Key that will be added to filters map passed to the fetch() function of |
| * your data source with the value of the filter (boolean in this case) |
| * @attribute key |
| * @type string |
| * @default '' |
| */ |
| key: '', |
| |
| updateGridState: function() { |
| this.gridState.filters[this.key] = this.$.toggle.checked; |
| } |
| }); |
| </script> |
| </polymer-element> |
