Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/data-table/README.md b/node_modules/material-design-lite/src/data-table/README.md
new file mode 100644
index 0000000..63ff51e
--- /dev/null
+++ b/node_modules/material-design-lite/src/data-table/README.md
@@ -0,0 +1,162 @@
+## Introduction
+
+The Material Design Lite (MDL) **data-table** component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.
+
+Tables are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is therefore an important factor in the overall user experience. See the data-table component's [Material Design specifications page](http://www.google.com/design/spec/components/data-tables.html) for details.
+
+The available row/column/cell types in a data-table are mostly self-formatting; that is, once the data-table is defined, the individual cells require very little specific attention. For example, the rows exhibit shading behavior on mouseover and selection, numeric values are automatically formatted by default, and the addition of a single class makes the table rows individually or collectively selectable. This makes the data-table component convenient and easy to code for the developer, as well as attractive and intuitive for the user.
+
+### To include an MDL **data-table** component:
+
+ 1. Code a `<table>` element. Include `<thead>` and `<tbody>` elements to hold the title and data rows, respectively.
+```html
+<table>
+ <thead>
+ </thead>
+ <tbody>
+ </tbody>
+</table>
+```
+
+ 2. Add one or more MDL classes, separated by spaces, to the table using the `class` attribute.
+```html
+<table class="mdl-data-table mdl-js-data-table">
+ <thead>
+ </thead>
+ <tbody>
+ </tbody>
+</table>
+```
+
+ 2. Inside the `<thead>`, code exactly one table row `<tr>` containing one table header cell `<th>` for each column, and include the desired text in the header cells. To ensure proper header alignment, add the "non-numeric" MDL class to the header cell of text-only columns. (Data cells are formatted as numeric by default.)
+```html
+<table class="mdl-data-table mdl-js-data-table">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Name</th>
+ <th>Age</th>
+ <th>ID Number</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+</table>
+```
+
+ 3. Inside the `<tbody>`, code one table row `<tr>` for each data row and one table data cell `<td>` for each column in the row. As with the header cells, add the "non-numeric" MDL class to text-only data cells to ensure proper alignment.
+```html
+<table class="mdl-data-table mdl-js-data-table">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Name</th>
+ <th>Age</th>
+ <th>ID Number</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Don Aubrey</td>
+ <td>25</td>
+ <td>49021</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Sophia Carson</td>
+ <td>32</td>
+ <td>10258</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Steve Moreno</td>
+ <td>29</td>
+ <td>12359</td>
+ </tr>
+ </tbody>
+</table>
+```
+
+The data-table component is ready for use.
+
+#### Examples
+
+A data-table with a "master" select checkbox and individual row select checkboxes.
+```html
+<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Material</th>
+ <th>Quantity</th>
+ <th>Unit price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+ <td>250</td>
+ <td>$2.90</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+ <td>50</td>
+ <td>$1.25</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+ <td>10</td>
+ <td>$12.35</td>
+ </tr>
+ </tbody>
+</table>
+```
+
+A data-table without select checkboxes containing mostly text data.
+```html
+<table class="mdl-data-table mdl-js-data-table">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Name</th>
+ <th class="mdl-data-table__cell--non-numeric">Nickname</th>
+ <th>Age</th>
+ <th class="mdl-data-table__cell--non-numeric">Living?</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">John Lennon</td>
+ <td class="mdl-data-table__cell--non-numeric">The smart one</td>
+ <td>40</td>
+ <td class="mdl-data-table__cell--non-numeric">No</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Paul McCartney</td>
+ <td class="mdl-data-table__cell--non-numeric">The cute one</td>
+ <td>73</td>
+ <td class="mdl-data-table__cell--non-numeric">Yes</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">George Harrison</td>
+ <td class="mdl-data-table__cell--non-numeric">The shy one</td>
+ <td>58</td>
+ <td class="mdl-data-table__cell--non-numeric">No</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Ringo Starr</td>
+ <td class="mdl-data-table__cell--non-numeric">The funny one</td>
+ <td>74</td>
+ <td class="mdl-data-table__cell--non-numeric">Yes</td>
+ </tr>
+ </tbody>
+</table>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the data-table. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-data-table` | Defines table as an MDL component | Required on table element|
+| `mdl-js-data-table` | Assigns basic MDL behavior to table | Required on table element|
+| `mdl-data-table--selectable` | Applies all/individual selectable behavior (checkboxes) | Optional; goes on table element |
+| `mdl-data-table__header--sorted-ascending` | Applies visual styling to indicate the column is sorted in ascending order | Optional; goes on table header (`th`) |
+| `mdl-data-table__header--sorted-descending` | Applies visual styling to indicate the column is sorted in descending order | Optional; goes on table header (`th`) |
+| `mdl-data-table__cell--non-numeric` | Applies text formatting to data cell | Optional; goes on both table header and table data cells |
+| (none) | Applies numeric formatting to header or data cell (default) | |
diff --git a/node_modules/material-design-lite/src/data-table/_data-table.scss b/node_modules/material-design-lite/src/data-table/_data-table.scss
new file mode 100644
index 0000000..1f04724
--- /dev/null
+++ b/node_modules/material-design-lite/src/data-table/_data-table.scss
@@ -0,0 +1,120 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+@import "../mixins";
+
+.mdl-data-table {
+ position: relative;
+ border: $data-table-dividers;
+ border-collapse: collapse;
+ white-space: nowrap;
+ font-size: $data-table-font-size;
+ background-color: unquote("rgb(#{$color-white})");
+
+ thead {
+ padding-bottom: 3px;
+
+ .mdl-data-table__select {
+ margin-top: 0;
+ }
+ }
+
+ tbody {
+ tr {
+ position: relative;
+ height: $data-table-row-height;
+ @include material-animation-default(0.28s);
+ transition-property: background-color;
+
+ &.is-selected {
+ background-color: $data-table-selection-color;
+ }
+
+ &:hover {
+ background-color: $data-table-hover-color;
+ }
+ }
+ }
+
+ td, th {
+ padding: 0 $data-table-column-padding 12px $data-table-column-padding;
+ text-align: right;
+
+ &:first-of-type {
+ padding-left: 24px;
+ }
+
+ &:last-of-type {
+ padding-right: 24px;
+ }
+ }
+
+ td {
+ position: relative;
+ vertical-align: middle;
+ height: $data-table-row-height;
+ border-top: $data-table-dividers;
+ border-bottom: $data-table-dividers;
+ padding-top: $data-table-cell-top;
+ box-sizing: border-box;
+
+ .mdl-data-table__select {
+ vertical-align: middle;
+ }
+ }
+
+ th {
+ position: relative;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ @include typo-body-2();
+ height: $data-table-row-height;
+ font-size: $data-table-header-font-size;
+ color: $data-table-header-color;
+ padding-bottom: 8px;
+ box-sizing: border-box;
+
+ &.mdl-data-table__header--sorted-ascending,
+ &.mdl-data-table__header--sorted-descending {
+ color: $data-table-header-sorted-color;
+ &:before {
+ @include typo-icon;
+ font-size: $data-table-header-sort-icon-size;
+ content: "\e5d8";
+ margin-right: 5px;
+ vertical-align: sub;
+ }
+ &:hover {
+ cursor: pointer;
+ &:before {
+ color: $data-table-header-sorted-icon-hover-color;
+ }
+ }
+ }
+ &.mdl-data-table__header--sorted-descending:before {
+ content: "\e5db";
+ }
+ }
+}
+
+.mdl-data-table__select {
+ width: 16px;
+}
+
+.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
+ text-align: left;
+}
diff --git a/node_modules/material-design-lite/src/data-table/data-table.js b/node_modules/material-design-lite/src/data-table/data-table.js
new file mode 100644
index 0000000..f2d7983
--- /dev/null
+++ b/node_modules/material-design-lite/src/data-table/data-table.js
@@ -0,0 +1,177 @@
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function() {
+ 'use strict';
+
+ /**
+ * Class constructor for Data Table Card MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {Element} element The element that will be upgraded.
+ */
+ var MaterialDataTable = function MaterialDataTable(element) {
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+
+ window['MaterialDataTable'] = MaterialDataTable;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialDataTable.prototype.Constant_ = {
+ // None at the moment.
+ };
+
+ /**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialDataTable.prototype.CssClasses_ = {
+ DATA_TABLE: 'mdl-data-table',
+ SELECTABLE: 'mdl-data-table--selectable',
+ SELECT_ELEMENT: 'mdl-data-table__select',
+ IS_SELECTED: 'is-selected',
+ IS_UPGRADED: 'is-upgraded'
+ };
+
+ /**
+ * Generates and returns a function that toggles the selection state of a
+ * single row (or multiple rows).
+ *
+ * @param {Element} checkbox Checkbox that toggles the selection state.
+ * @param {Element} row Row to toggle when checkbox changes.
+ * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
+ * @private
+ */
+ MaterialDataTable.prototype.selectRow_ = function(checkbox, row, opt_rows) {
+ if (row) {
+ return function() {
+ if (checkbox.checked) {
+ row.classList.add(this.CssClasses_.IS_SELECTED);
+ } else {
+ row.classList.remove(this.CssClasses_.IS_SELECTED);
+ }
+ }.bind(this);
+ }
+
+ if (opt_rows) {
+ return function() {
+ var i;
+ var el;
+ if (checkbox.checked) {
+ for (i = 0; i < opt_rows.length; i++) {
+ el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+ el['MaterialCheckbox'].check();
+ opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
+ }
+ } else {
+ for (i = 0; i < opt_rows.length; i++) {
+ el = opt_rows[i].querySelector('td').querySelector('.mdl-checkbox');
+ el['MaterialCheckbox'].uncheck();
+ opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
+ }
+ }
+ }.bind(this);
+ }
+ };
+
+ /**
+ * Creates a checkbox for a single or or multiple rows and hooks up the
+ * event handling.
+ *
+ * @param {Element} row Row to toggle when checkbox changes.
+ * @param {(Array<Object>|NodeList)=} opt_rows Rows to toggle when checkbox changes.
+ * @private
+ */
+ MaterialDataTable.prototype.createCheckbox_ = function(row, opt_rows) {
+ var label = document.createElement('label');
+ var labelClasses = [
+ 'mdl-checkbox',
+ 'mdl-js-checkbox',
+ 'mdl-js-ripple-effect',
+ this.CssClasses_.SELECT_ELEMENT
+ ];
+ label.className = labelClasses.join(' ');
+ var checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.classList.add('mdl-checkbox__input');
+
+ if (row) {
+ checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED);
+ checkbox.addEventListener('change', this.selectRow_(checkbox, row));
+ } else if (opt_rows) {
+ checkbox.addEventListener('change', this.selectRow_(checkbox, null, opt_rows));
+ }
+
+ label.appendChild(checkbox);
+ componentHandler.upgradeElement(label, 'MaterialCheckbox');
+ return label;
+ };
+
+ /**
+ * Initialize element.
+ */
+ MaterialDataTable.prototype.init = function() {
+ if (this.element_) {
+ var firstHeader = this.element_.querySelector('th');
+ var bodyRows = Array.prototype.slice.call(this.element_.querySelectorAll('tbody tr'));
+ var footRows = Array.prototype.slice.call(this.element_.querySelectorAll('tfoot tr'));
+ var rows = bodyRows.concat(footRows);
+
+ if (this.element_.classList.contains(this.CssClasses_.SELECTABLE)) {
+ var th = document.createElement('th');
+ var headerCheckbox = this.createCheckbox_(null, rows);
+ th.appendChild(headerCheckbox);
+ firstHeader.parentElement.insertBefore(th, firstHeader);
+
+ for (var i = 0; i < rows.length; i++) {
+ var firstCell = rows[i].querySelector('td');
+ if (firstCell) {
+ var td = document.createElement('td');
+ if (rows[i].parentNode.nodeName.toUpperCase() === 'TBODY') {
+ var rowCheckbox = this.createCheckbox_(rows[i]);
+ td.appendChild(rowCheckbox);
+ }
+ rows[i].insertBefore(td, firstCell);
+ }
+ }
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+ }
+ };
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialDataTable,
+ classAsString: 'MaterialDataTable',
+ cssClass: 'mdl-js-data-table'
+ });
+})();
diff --git a/node_modules/material-design-lite/src/data-table/snippets/data-table.html b/node_modules/material-design-lite/src/data-table/snippets/data-table.html
new file mode 100644
index 0000000..e269e04
--- /dev/null
+++ b/node_modules/material-design-lite/src/data-table/snippets/data-table.html
@@ -0,0 +1,26 @@
+<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Material</th>
+ <th>Quantity</th>
+ <th>Unit price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+ <td>25</td>
+ <td>$2.90</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+ <td>50</td>
+ <td>$1.25</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+ <td>10</td>
+ <td>$2.35</td>
+ </tr>
+ </tbody>
+</table>