Release version 0.3.0-beta4.0.3.0-beta4

3 files changed, 4 insertions, 968 deletions

diff --git a/README.md b/README.md
index 6f28248..9970583 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ We offer three ways to use Vaadin Components in your project: Bower, CDN and ZIP
  We recommend using [Bower](http://bower.io) for managing your front-end dependencies. Follow the [Bower installation instructions](http://bower.io/#install-bower), then run the following command inside your project folder:
 
  ```shell
- $ bower install --save vaadin-components#0.3.0-beta3
+ $ bower install --save vaadin-components#0.3.0-beta4
  ```
 
  This will download Vaadin Components and its dependencies to the `bower_components` folder inside your project‘s folder.
@@ -68,8 +68,8 @@ We offer three ways to use Vaadin Components in your project: Bower, CDN and ZIP
     <!-- Import Web Component polyfills and the components that you want -->
     
     <!-- CDN -->
-    <script src="https://cdn.vaadin.com/vaadin-components/0.3.0-beta3/webcomponentsjs/webcomponents-lite.js"></script>
-    <link href="https://cdn.vaadin.com/vaadin-components/0.3.0-beta3/vaadin-grid/vaadin-grid.html" rel="import">
+    <script src="https://cdn.vaadin.com/vaadin-components/0.3.0-beta4/webcomponentsjs/webcomponents-lite.js"></script>
+    <link href="https://cdn.vaadin.com/vaadin-components/0.3.0-beta4/vaadin-grid/vaadin-grid.html" rel="import">
     
     <!-- Bower -->
     <!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
diff --git a/bower.json b/bower.json
index 3d28e01..406475a 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "vaadin-components",
-  "version": "0.3.0-snapshot",
+  "version": "0.3.0-beta4",
   "authors": [
     "Vaadin Ltd"
   ],
diff --git a/vaadin-grid/vaadin-grid.html.orig b/vaadin-grid/vaadin-grid.html.orig
deleted file mode 100644
index 27ab483..0000000
--- a/vaadin-grid/vaadin-grid.html.orig
+++ /dev/null
@@ -1,964 +0,0 @@
-<!--
-@element v-grid
--->
-
-<link rel='import' href='../../../bower_components/polymer/polymer.html'>
-<script type="text/javascript" language="javascript" src="VaadinGridImport.nocache.js"></script>
-
-<style>
-  v-grid > table {
-    display: none;
-  }
-</style>
-
-<!--
-Data grid for showing large amounts of tabular data.
-
-Basic usage:
-```html
-<v-grid>
-  <table>
-    <colgroup>
-      <col header-text="Name">
-      <col header-text="Value">
-      <col header-text="Progress">
-    </colgroup>
-    <tbody>
-      <tr>
-        <td>Project A</td><td>10000</td><td>0.8</td>
-      </tr>
-      <tr>
-        <td>Project B</td><td>999999</td><td>0.8</td>
-      </tr>
-    </tbody>
-  </table>
-</v-grid>
-```
-
-More examples available at http://vaadin.github.io/components-examples/v-grid/
--->
-<dom-module id="v-grid">
-<style>
-  /* Host styles */
-  :host {
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    box-sizing: border-box;
-    display: block;
-    font: 400 13px/1.1 Roboto, sans-serif;
-    color: rgba(0, 0, 0, 0.87);
-    cursor: default;
-    transition: opacity 200ms;
-    white-space: nowrap;
-  }
-
-  :host(.v-grid-loading) {
-    height: 0;
-    opacity: 0;
-    transition: none;
-  }
-
-  :host > div {
-    height: 100%;
-    outline: none;
-    position: relative;
-  }
-
-  /* Anim */
-  @keyframes v-grid-spin-360 {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @-webkit-keyframes v-grid-spin-360 {
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-
-  /* Table wrapper */
-  .v-grid-tablewrapper {
-    box-sizing: border-box;
-    overflow: hidden;
-    outline: none;
-    position: absolute;
-    z-index: 5;
-  }
-
-  .v-grid-tablewrapper:before {
-    display: none;
-  }
-
-  .v-grid-tablewrapper > table {
-    box-sizing: border-box;
-    display: block;
-  }
-
-  .v-grid-loading-data .v-grid-tablewrapper:before {
-    -webkit-animation: v-grid-spin-360 400ms linear infinite;
-    animation: v-grid-spin-360 400ms linear infinite;
-    border: 2px solid #03A9F4;
-    border-radius: 50%;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    content: "";
-    display: block;
-    height: 16px;
-    left: 50%;
-    margin-left: -8px;
-    margin-top: -8px;
-    position: absolute;
-    top: 50%;
-    width: 16px;
-  }
-
-  /* Scroller styles */
-  .v-grid-scroller {
-    box-sizing: border-box;
-<<<<<<< HEAD
-=======
-    background: #fff;
-  }
-  
-  :host > div {
-    position: relative;
->>>>>>> master
-    outline: none;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .v-grid-scroller-horizontal {
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow-y: hidden;
-    -ms-overflow-y: hidden;
-  }
-
-  .v-grid-scroller-vertical {
-    bottom: 0;
-    right: 0;
-    top: 0;
-    overflow-x: hidden;
-    -ms-overflow-x: hidden;
-  }
-
-  .v-grid-horizontal-scrollbar-deco {
-    bottom: 0;
-    box-sizing: border-box;
-    left: 0;
-    position: absolute;
-    right: 0;
-  }
-
-  /* Grid body */
-  .v-grid-body {
-    box-sizing: border-box;
-    display: block;
-    left: 0;
-    position: absolute;
-    top: 0;
-    z-index: 0;
-  }
-
-  :host(:not([selection-mode])) .v-grid-body,
-  :host([selection-mode="single"]) .v-grid-body {
-    cursor: pointer;
-  }
-
-  .v-grid-body tr {
-    height: 48px;
-    left: 0;
-    top: 0;
-    position: absolute;
-  }
-
-  .v-grid-body td {
-    opacity: 0;
-  }
-
-  .v-grid-row-has-data td {
-    border-bottom: 1px solid #e3e3e3;
-    opacity: 1;
-  }
-
-  /* Row styles */
-  .v-grid-row {
-    box-sizing: border-box;
-    display: block;
-  }
-
-  .v-grid-row:hover td {
-    background-color: #eeeeee;
-  }
-
-  .v-grid-row-selected td {
-    background-color: #f5f5f5;
-  }
-
-  /* Focus styles */
-  .v-grid-row:after {
-    background-color: #03A9F4;
-    bottom: 0;
-    content: "";
-    height: 2px;
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    transition: all 0.16s ease-in-out;
-    transform: scaleX(0.0);
-    z-index: 1;
-  }
-
-  :focus .v-grid-row-focused:after {
-    transform: scaleX(1.0);
-  }
-
-  :focus .v-grid-row-focused {
-    -webkit-animation: v-grid-row-focused 820ms ease-in-out;
-    animation: v-grid-row-focused 820ms ease-in-out;
-  }
-
-  @keyframes v-grid-row-focused {
-    50% {
-      color: #03A9F4;
-    } 100% {
-      color: inherit;
-    }
-  }
-
-  /* Grid cell */
-  .v-grid-cell {
-    -webkit-align-items: center;
-    align-items: center;
-    background-color: white;
-    box-sizing: border-box;
-    display: -webkit-inline-flex;
-    display: inline-flex;
-    height: inherit;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: opacity 0.1s ease-in;
-  }
-
-  /* Grid header */
-  .v-grid-header {
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: block;
-    left: 0;
-    position: absolute;
-    top: 0;
-    z-index: 10;
-  }
-
-  .v-grid-header tr {
-    color: rgba(0, 0, 0, 0.54);
-    font-size: 12px;
-    height: 56px;
-  }
-
-  .v-grid-header th {
-    font-weight: 500;
-  }
-
-  .v-grid-header-deco {
-    background-color: white;
-    border-left: 1px solid rgba(255, 255, 255, 0.3);
-    box-sizing: border-box;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 1;
-  }
-
-  /* Sorting */
-  .v-grid-header [class*="sort-"] {
-    font-weight: 500;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.87);
-    position: relative;
-  }
-
-  .v-grid-header [class*="sort-"]:after {
-<<<<<<< HEAD
-    font-size: 8px;
-    padding-left: 8px;
-  }
-
-  .v-grid-header .sort-asc:after {
-    content: url(arrow-up.svg) " " attr(sort-order);
-=======
-    position: absolute;
-    font-family: sans-serif;
-    content: url(sort-asc.svg) " " attr(sort-order);
-    right: 12px;
-    font-size: 12px;
-    width: 11px;
-    top: 50%;
-    margin-top: -0.5em;
->>>>>>> master
-  }
-
-  .v-grid-header .sort-desc:after {
-    content: url(arrow-down.svg) " " attr(sort-order);
-  }
-
-  /* Grid footer */
-  .v-grid-footer {
-    bottom: 0;
-    box-sizing: border-box;
-    display: block;
-    left: 0;
-    position: absolute;
-    z-index: 10;
-  }
-
-  .v-grid-footer td {
-    font-size: 12px;
-    font-weight: 500;
-    color: rgba(0, 0, 0, 0.56);
-    height: 56px;
-  }
-
-  .v-grid-footer-deco {
-    bottom: 0;
-    box-sizing: border-box;
-    position: absolute;
-    right: 0;
-    z-index: 1;
-  }
-
-  /* Cell padding */
-  .v-grid-header th,
-  .v-grid-body td,
-  .v-grid-footer td {
-    /* Google Material Design specifies 56dp inbetween columns.
-       Columns are as wide as their widest item. This approach
-       might not be applicable for us, as we allow column expand
-       ratio, etc. Options 1, 2 and 3 listed below. */
-    /* Divide padding equally among cells. */
-       padding: 0 28px 0 28px;
-    /* Put all padding on right side.
-       padding: 0 56px 0 0; */
-    /* No padding, allow users to specify expand ratio.
-       padding: 0; */
-  }
-
-  .v-grid-header th:first-child,
-  .v-grid-body td:first-child,
-  .v-grid-footer td:first-child {
-    padding-left: 24px;
-  }
-
-  .v-grid-header th:last-child,
-  .v-grid-body td:last-child,
-  .v-grid-footer td:last-child {
-    padding-right: 24px;
-  }
-
-  .v-grid-header th.frozen,
-  .v-grid-body td.frozen,
-  .v-grid-footer td.frozen {
-    border-right: 1px solid #e3e3e3;
-    padding: 0 24px 0 24px;
-  }
-
-  .v-grid-header th.frozen + th,
-  .v-grid-body td.frozen + td,
-  .v-grid-footer td.frozen + td {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-
-  /* TODO We need some other way of defining the frozen column divider than
-   using the cell, since this will affect all frozen columns, when we only
-    want to apply it to the last frozen column .*/
-  /* Double selector to increase specificity. Otherwise Polymer increases the
-   specificity of the ".v-grid-header th" more than this, and we can't
-   override the border */
-  .v-grid-cell.frozen.frozen {
-    position: relative;
-    z-index: 1;
-  }
-
-  /* Input styles */
-  input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-  }
-
-  input[type="checkbox"] + label {
-    position: relative;
-    left: 0;
-    box-sizing: border-box;
-    display: block;
-    width: 18px;
-    height: 18px;
-    border: 2px solid #7a7a7a;
-    border-radius: 2px;
-    cursor: pointer;
-    transition: background-color 120ms, border-color 120ms;
-  }
-
-  input[type="checkbox"]:focus {
-    outline: none;
-  }
-
-  input[type="checkbox"] + label:after {
-    content: url("tick.svg");
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    display: block;
-    width: 18px;
-    height: 18px;
-    transition: all 200ms;
-    -webkit-transform: scale(0);
-    transform: scale(0);
-    -webkit-transform-origin: 40% 80%;
-    transform-origin: 40% 80%;
-  }
-
-  input[type="checkbox"]:checked + label {
-    background-color: #03A9F4;
-    border-color: transparent;
-  }
-
-  input[type="checkbox"]:checked + label:after {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-
-  input[type="checkbox"]:indeterminate + label:after {
-    content: "–";
-    left: -2px;
-    font-size: 13px;
-    text-align: center;
-    -webkit-transform: none;
-    transform: none;
-  }
-
-  /* Activation "splash" */
-  input[type="checkbox"] + label:before {
-    content: "";
-    position: absolute;
-    top: -13px;
-    left: -13px;
-    width: 41px;
-    height: 41px;
-    border-radius: 50%;
-    background-color: #666;
-    opacity: 0;
-    -webkit-transform: scale(0.8);
-    transform: scale(0.8);
-    transition: all 180ms cubic-bezier(0.75,.0,0.25,1);
-  }
-
-  input[type="checkbox"] + label:active:before {
-    transform: scale(1.1);
-    opacity: 0.15;
-    transition-duration: 80ms;
-    transition-property: all;
-  }
-
-  input[type="checkbox"]:checked + label:before {
-    background-color: #03A9F4;
-  }
-
-  /* Small adjustments for the checkbox in the header */
-  .v-grid-header input[type="checkbox"] + label:before {
-    background-color: white;
-  }
-
-  .v-grid-header input[type="checkbox"] + label:after {
-    transition: none;
-  }
-
-  #measure {
-    width: 100% !important;
-    height: 100% !important;
-    z-index: -1 !important;
-    pointer-events: none !important;
-    position: relative !important;
-    float: left !important;
-    margin-left: -100% !important;
-    opacity: 0 !important;
-  }
-
-  #measureobject {
-    position: absolute !important;
-    width: 100% !important;
-    height: 100% !important;
-  }
-
-</style>
-  <template>
-    <div id="measure" class="v-grid">
-      <iframe id="measureobject" class="v-grid"></iframe>
-    </div>
-    <content></content>
-  </template>
-</dom-module>
-
-<script>
-    VGrid = Polymer({
-
-      is: "v-grid",
-
-      _grid: undefined,
-
-      properties: {
-        /**
-         * Object for controlling and accessing the data source of the grid.
-         *
-         * @property {Data} data
-         * @type {Data}
-         */
-        data: {
-          type: Object,
-          readOnly: true,
-          value: function() {
-            var _this = this;
-            return {
-
-              get source() {
-                return this._source;
-              },
-              set source(source) {
-                var sourceFunction = source;
-                if (Array.isArray(source)) {
-                  sourceFunction = function(req) {
-                    var array = source.slice(req.index, req.index + req.count);
-                    req.success(array, source.length);
-                  };
-                }
-                _this._grid.setDataSource(sourceFunction);
-
-                this._source = source;
-              },
-              get sortOrder() {
-                return _this._grid.getSortOrder();
-              },
-              set sortOrder(sortOrder) {
-                _this._grid.setSortOrder(sortOrder);
-              },
-
-              clearCache: function(estimatedNewSize) {
-                _this._grid.getDataSource().clearCache(estimatedNewSize);
-              }
-            };
-          }
-        },
-
-        /**
-         * Object for controlling and accessing the header rows in the grid.
-         *
-         * @property {Header} header
-         * @type {Header}
-         */
-        header: {
-          type: Object,
-          readOnly: true,
-          value: function() {
-            var _this = this;
-            return {
-              getCell: function(rowIndex, columnId) {
-                return _this._grid.getStaticSection().getHeaderCell(rowIndex, columnId);
-              },
-              addRow: function(rowIndex, cellContent) {
-                _this._grid.getStaticSection().addHeader(rowIndex, cellContent);
-              },
-              removeRow: function(rowIndex) {
-                _this._grid.getStaticSection().removeHeader(rowIndex);
-              },
-              setRowClassName: function(rowIndex, className) {
-                _this._grid.getStaticSection().setHeaderRowClassName(rowIndex, className);
-              },
-              get defaultRow() {
-                return _this._grid.getStaticSection().getDefaultHeader();
-              },
-              set defaultRow(rowIndex) {
-                _this._grid.getStaticSection().setDefaultHeader(rowIndex);
-              },
-              get hidden() {
-                return _this._grid.getStaticSection().isHeaderHidden();
-              },
-              set hidden(hidden) {
-                _this._grid.getStaticSection().setHeaderHidden(hidden);
-              },
-              get rowCount() {
-                return _this._grid.getStaticSection().getHeaderRowCount();
-              }
-            };
-          }
-        },
-
-        /**
-         * Object for controlling and accessing the footer rows in the grid.
-         *
-         * @property {Footer} footer
-         * @type {Footer}
-         */
-        footer: {
-          type: Object,
-          readOnly: true,
-          value: function() {
-            var _this = this;
-            return {
-              getCell: function(rowIndex, columnId) {
-                return _this._grid.getStaticSection().getFooterCell(rowIndex, columnId);
-              },
-              addRow: function(rowIndex, cellContent) {
-                _this._grid.getStaticSection().addFooter(rowIndex, cellContent);
-              },
-              removeRow: function(rowIndex) {
-                _this._grid.getStaticSection().removeFooter(rowIndex);
-              },
-              setRowClassName: function(rowIndex, className) {
-                _this._grid.getStaticSection().setFooterRowClassName(rowIndex, className);
-              },
-              get hidden() {
-                return _this._grid.getStaticSection().isFooterHidden();
-              },
-              set hidden(hidden) {
-                _this._grid.getStaticSection().setFooterHidden(hidden);
-              },
-              get rowCount() {
-                return _this._grid.getStaticSection().getFooterRowCount();
-              }
-            };
-          }
-        },
-
-        /**
-         * Object for controlling and accessing the selected rows in the grid.
-         *
-         * @property {Selection} selection
-         * @type {Selection}
-         */
-        selection: {
-          type: Object,
-          readOnly: true,
-          value: function() {
-            var _this = this;
-            return {
-              select: function(index) {
-                _this._grid.getSelectionModel().select(index);
-
-                return _this;
-              },
-              deselect: function(index) {
-                _this._grid.getSelectionModel().deselect(index);
-
-                return _this;
-              },
-              clear: function() {
-                _this._grid.getSelectionModel().clear();
-
-                return _this;
-              },
-              selectAll: function() {
-                _this._grid.getSelectionModel().selectAll();
-
-                return _this;
-              },
-              selected: function(mapper, from, to) {
-                return _this._grid.getSelectionModel().selected(mapper, from, to);
-              },
-              deselected: function(mapper, from, to) {
-                return _this._grid.getSelectionModel().deselected(mapper, from, to);
-              },
-              get size() {
-                return _this._grid.getSelectionModel().size();
-              },
-              get mode() {
-                return _this._grid.getSelectionMode();
-              },
-              set mode(mode) {
-                _this._grid.setSelectionMode(mode);
-                _this.serializeValueToAttribute(_this.selection.mode, "selection-mode");
-              }
-            };
-          }
-        }
-      },
-
-      attributeChanged: function(name, type, value) {
-        switch (name) {
-          case 'disabled':
-            this.disabled = typeof value == "string";
-            break;
-          case 'selection-mode':
-            this.selection.mode = value;
-            break;
-          default:
-            this[Polymer.CaseMap.dashToCamelCase(name)] = value;
-        }
-      },
-
-      listeners: {
-        /**
-         * A change in the sorting order.
-         *
-         * @event sort
-         */
-        /**
-         * Row is selected or deselected.
-         *
-         * @event select
-         */
-        /**
-         * A change in the selection mode.
-         *
-         * @event selectionmodechange
-         */
-        'selectionmodechange': '_onSelectionModeChange'
-      },
-
-      _onSelectionModeChange: function() {
-        this.serializeValueToAttribute(this.selection.mode, "selection-mode");
-      },
-
-      created: function() {
-        this._grid = new vaadin.GridComponent();
-      },
-
-      ready: function() {
-        this.async(function() {
-          for (var i = 0; i < this.attributes.length; i++) {
-            this.attributeChanged(this.attributes[i].nodeName, null, this.attributes[i].nodeValue);
-          }
-        });
-      },
-
-      _bindResizeListener: function() {
-        var _this = this;
-        this.$.measureobject.addEventListener("load", function() {
-          this.contentDocument.defaultView.addEventListener('resize', function(e) {
-            _this._grid.updateSize();
-          });
-          _this._grid.updateSize();
-        });
-
-        this.$.measureobject.src = "about:blank";
-      },
-
-      attached: function() {
-        var _this = this;
-        this._grid.attached(this, Polymer.dom(this).querySelector("table"), Polymer.dom(this.root));
-        this._bindResizeListener();
-
-        // hide until fully loaded
-        this.toggleClass('v-grid-loading', true);
-        this.then(function() {
-          _this.toggleClass('v-grid-loading', false);
-        });
-      },
-
-      /**
-       * Scrolls to a certain row, using user-specified scroll destination.
-       *
-       * Scrolling happens asynchronously, so this method returns a 'thenable'
-       * which can be used to be notified when the scrolling is finished.
-       *
-       * Example: `grid.scrollToRow(10, 'end').then(doMoreStuff);`
-       *
-       * @method scrollToRow
-       * @param {number} index - Zero-based index of the row to scroll to.
-       * @param {string} scrollDestination - Desired destination placement of scrolled-to-row. Valid values are `any`, `start`, `middle` and `end`. Defaults to `any`.
-       * @return {v-grid}
-       */
-      scrollToRow: function(index, scrollDestination) {
-        this._grid.scrollToRow(index, scrollDestination);
-        return this;
-      },
-
-      /**
-       * Scrolls to the beginning of the grid.
-       *
-       * Scrolling happens asynchronously, so this method returns a 'thenable'
-       * which can be used to be notified when the scrolling is finished.
-       *
-       * Example: `grid.scrollToStart().then(doMoreStuff);`
-       *
-       * @method scrollToStart
-       * @return {v-grid}
-       */
-      scrollToStart: function() {
-        this._grid.scrollToStart();
-        return this;
-      },
-
-      /**
-       * Scrolls to the end of the grid.
-       *
-       * Scrolling happens asynchronously, so this method returns a 'thenable'
-       * which can be used to be notified when the scrolling is finished.
-       *
-       * Example: `grid.scrollToEnd().then(doMoreStuff);`
-       *
-       * @method scrollToEnd
-       * @return {v-grid}
-       */
-      scrollToEnd: function() {
-        this._grid.scrollToEnd();
-        return this;
-      },
-
-      /**
-       * Adds a new column. Column is added at the end if `beforeColumn` is not defined.
-       *
-       * @method addColumn
-       * @param {Column} column - Column to be added.
-       * @param {string} beforeColumn - Index or id of the column before which the new column should be added.
-       */
-      addColumn: function(column, beforeColumn) {
-        this._grid.addColumn(column, beforeColumn);
-      },
-
-      /**
-       * Removes a column with certain id
-       *
-       * @method removeColumn
-       * @param {string} id - Column to be removed.
-       */
-      removeColumn: function(id) {
-        this._grid.removeColumn(id);
-      },
-
-      get rowClassGenerator() {
-        return this._grid.getRowClassGenerator();
-      },
-
-      /**
-       * The style generator that is used for generating styles for rows.
-       *
-       * Example:
-       * ```
-       * grid.rowClassGenerator = function(row) {
-       *  var activity = row.data[2];
-       *  return 'activity-' + activity.toLowerCase();
-       * };
-       *```
-       *
-       * @property {function} rowClassGenerator
-       * @param {Row} row - Reference to the row being rendered.
-       * @type {function}
-       */
-      set rowClassGenerator(row) {
-        this._grid.setRowClassGenerator(row);
-      },
-
-      get cellClassGenerator() {
-        return this._grid.getCellClassGenerator();
-      },
-
-      /**
-       * The style generator that is used for generating styles for cells.
-       *
-       * Example:
-       * ```
-       * grid.cellClassGenerator = function(cell) {
-       *   if (cell.index == 2) {
-       *      var activity = cell.row.data[2];
-       *      return 'activity-' + activity.toLowerCase();
-       *    }
-       *    return '';
-       *  };
-       * ```
-       * @property {function} cellClassGenerator
-       * @param {Cell} cell - Reference to the cell being rendered.
-       * @type {function}
-       *
-       */
-      set cellClassGenerator(cell) {
-        this._grid.setCellClassGenerator(cell);
-      },
-
-      /**
-       * Disables the grid.
-       *
-       * Attribute: `disabled`
-       *
-       * @property {boolean} disabled
-       * @default false
-       * @type {boolean}
-       */
-      get disabled() {
-        return this._grid.isDisabled();
-      },
-      set disabled(disabled) {
-        this._grid.setDisabled(disabled);
-        this.reflectPropertyToAttribute("disabled");
-      },
-
-      /**
-       * The number of frozen columns in this grid. Setting it to 0
-       * means that no data columns will be frozen, but the built-in selection
-       * checkbox column will still be frozen if it's in use. Setting the count to
-       * -1 will also disable the selection column.
-       *
-       * Attribute: `frozen-columns`
-       *
-       * @property {number} frozenColumns
-       * @default 0
-       * @type {number}
-       */
-      get frozenColumns() {
-        return this._grid.getFrozenColumns();
-      },
-      set frozenColumns(frozenColumns) {
-        this._grid.setFrozenColumns(frozenColumns);
-        this.reflectPropertyToAttribute("frozenColumns");
-      },
-
-      /**
-       * The number of visible rows in the grid. Implicitly sets the height
-       * in the inline style, overriding any previous height. Setting style.height
-       * in this case should be ignored if possible.
-       *
-       * Attribute: `rows`
-       *
-       * @property {number} rows
-       * @default 10
-       * @type {number}
-       */
-      get rows() {
-        var rows = this._grid.getRows();
-        return rows > 0 ? rows : undefined;
-      },
-      set rows(rows) {
-        this._grid.setRows(rows);
-        this.reflectPropertyToAttribute("rows");
-      },
-
-      /**
-       * The array of Columns attached to the grid.
-       *
-       * @property {Array<Column>} columns
-       * @type {Array<Column>}
-       */
-      get columns() {
-        return this._grid.getColumns();
-      },
-      set columns(cols) {
-        this._grid.setColumns(cols);
-      },
-
-      /**
-       * Executes a callback when the grid has finished any pending work.
-       *
-       * @method then
-       * @param {Function} callback
-       * @return {Promise}
-       */
-      then: function(callback) {
-        return this._grid.then(callback);
-      }
-    }); // End Polymer prototype
-</script>