<link rel="import" href="grid-filter.html">

<dom-module id="grid-column">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <template id="header">
      <div>[[name]]</div>
    </template>

    <template id="filter">
      <grid-filter name="[[name]]" path="[[filter]]"></grid-filter>
    </template>


  </template>
  <script>
    Polymer({
      is: 'grid-column',

      properties: {
        name: {
          type: String,
          notify: true,
          value: ''
        },

        filter: {
          type: String,
          observer: '_filterChanged'
        },
        
        width: {
          type: String,
          notify: true,
          value: "100%"
        },

        order: {
          type: Number,
          notify: true,
          value: 0
        },

        headerTemplate: {
          type: Object,
          value: function() {
            return Polymer.dom(this.root).querySelector('#header');
          }
        },

        template: {
          type: Object,
          value: function() {
            return Polymer.dom(this).querySelector('template');
          }
        }
      },

      _filterChanged: function(filter) {
        if (filter !== undefined) {
          this.headerTemplate = Polymer.dom(this.root).querySelector('#filter');
        }
      }
    });
  </script>
</dom-module>

<link rel="import" href="grid-filter.html">

<dom-module id="grid-column">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <template id="header">
      <div>[[name]]</div>
    </template>

    <template id="filter">
      <grid-filter name="[[name]]" path="[[filter]]"></grid-filter>
    </template>


  </template>
  <script>
    Polymer({
      is: 'grid-column',

      properties: {
        name: {
          type: String,
          notify: true,
          value: ''
        },

        filter: {
          type: String,
          observer: '_filterChanged'
        },

        width: {
          type: String,
          notify: true,
          value: "100%"
        },

        order: {
          type: Number,
          notify: true
        },

        headerTemplate: {
          type: Object,
          value: function() {
            return Polymer.dom(this.root).querySelector('#header');
          }
        },

        template: {
          type: Object,
          value: function() {
            return Polymer.dom(this).querySelector('template');
          }
        }
      },

      _filterChanged: function(filter) {
        if (filter !== undefined) {
          this.headerTemplate = Polymer.dom(this.root).querySelector('#filter');
        }
      }
    });
  </script>
</dom-module>

Remove obsolete default value for order.
Remove obsolete default value for order.
