<!--
ag-data-grid-column

Usage:
ag-data-grid-column defines a column of data and provides the template to render
the cells for that column.
a variable named ```item``` is in scope for the cell renderer template that refers
to the JavaScript object, as defined by the dataSource, being rendered currently.
  ```
    <ag-data-grid-column
      label="Name"
      key="name"
      sortable
      primary
      wrap
      minFlex="3"
      flex="4"
      priority="3"
      align="center"/>

      <template>
         <div>{{ item.name }}</div>
      </template>

    </ag-data-grid-column>
  ```
@element ag-data-grid-column
-->
<link rel="import" href="../../polymer/polymer.html">
<polymer-element name="ag-data-grid-column" grid-column attributes="label sortable key primary wrap flex minFlex priority align">
  <script>
    Polymer('ag-data-grid-column', {
      /**
       * Label text for the column
       * @attribute label
       * @type string
       * @default ''
       */
      label: '',

      /**
       * number specifying how flexible the width of the column is
       * compared to other columns. For instance for a grid with three columns
       * flex values of 1, 3, 1. means the middle column needs to be three times
       * as wide as the other two.
       * Flex value of 0 means the column should not be displayed.
       * Flex values for all the columns can add up to any value.
       * @attribute flex
       * @type integer
       * @default 1
       */
      flex: 1,

      /**
       * minimum Flex value that this column can be reduced to by the responsive data grid
       * Defaults to 1 meaning column can be reduced to 1 flex as available space shrinks.
       * @attribute minFlex
       * @type integer
       * @default 1
       */
      minFlex: 1,

      /**
       * specifies the importance of this column. Responsive grid uses this number
       * to decide which columns to reduce/hide when available space shrinks.
       * Lower number means more important.
       * @attribute priority
       * @type integer
       * @default 1
       */
      priority: 1,

      /**
       * whether this column is sortable
       * @attribute sortable
       * @type boolean
       * @default false
       */
      sortable: false,

      /**
       * whether this the primary column of the grid.
       * Normally there is a single column that other columns are dependents on
       * @attribute primary
       * @type boolean
       * @default false
       */
      primary: false,


      /**
       * whether text inside the cells of this columns are allowed to wrap.
       * @attribute wrap
       * @type boolean
       * @default false
       */
      wrap: false,

      /**
       * Key that will be pass as sort.key to fetch() function of your data source.
       * @attribute key
       * @type string
       * @default ''
       */
      key: '',

      /**
       * How the text context of the column is aligned horizontally.
       * Default to left aligned, can be center, right
       * @attribute align
       * @type string
       * @default 'left'
       */
      align: 'left'
    });
  </script>
</polymer-element>