Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/tabs/README.md b/node_modules/material-design-lite/src/tabs/README.md
new file mode 100755
index 0000000..c3f37c6
--- /dev/null
+++ b/node_modules/material-design-lite/src/tabs/README.md
@@ -0,0 +1,150 @@
+## Introduction
+
+The Material Design Lite (MDL) **tab** component is a user interface element that allows different content blocks to share the same screen space in a mutually exclusive manner. Tabs are always presented in sets of two or more, and they make it easy to explore and switch among different views or functional aspects of an app, or to browse categorized data sets individually. Tabs serve as "headings" for their respective content; the *active* tab — the one whose content is currently displayed — is always visually distinguished from the others so the user knows which heading the current content belongs to.
+
+Tabs are an established but non-standardized feature in user interfaces, and allow users to view different, but often related, blocks of content (often called *panels*). Tabs save screen real estate and provide intuitive and logical access to data while reducing navigation and associated user confusion. Their design and use is an important factor in the overall user experience. See the tab component's [Material Design specifications page](http://www.google.com/design/spec/components/tabs.html) for details.
+
+### To include a set of MDL **tab** components:
+
+ 1. Code a `<div>` element; this is the "outer" div, intended to contain all of the tabs and their content.
+```html
+<div>
+</div>
+```
+ 2. Inside the "outer" div, code one "inner" div for the tabs themselves, and one for each tab's content, all siblings. That is, for three content tabs, you would code four "inner" divs.
+```html
+<div>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+ <div>
+ ...
+ </div>
+</div>
+```
+ 3. Inside the first "inner" div (the tabs), code one anchor `<a>` (link) tag for each tab. Include `href` attributes with values to match the tabs' `id` attribute values, and some brief link text. On the remaining "inner" divs (the content), code `id` attributes whose values match the links' `href`s.
+```html
+<div>
+ <div>
+ <a href="#tab1">Tab One</a>
+ <a href="#tab2">Tab Two</a>
+ <a href="#tab3">Tab Three</a>
+ </div>
+ <div id="tab1">
+ ...
+ </div>
+ <div id="tab2">
+ ...
+ </div>
+ <div id="tab3">
+ ...
+ </div>
+</div>
+```
+ 4. Inside the remaining "inner" divs, code the content you intend to display in each panel; use standard HTML tags to structure the content as desired.
+```html
+<div>
+ <div>
+ <a href="#tab1">Tab One</a>
+ <a href="#tab2">Tab Two</a>
+ <a href="#tab3">Tab Three</a>
+ </div>
+ <div id="tab1">
+ <p>First tab's content.</p>
+ </div>
+ <div id="tab2">
+ <p>Second tab's content.</p>
+ </div>
+ <div id="tab3">
+ <p>Third tab's content.</p>
+ </div>
+</div>
+```
+ 5. Add one or more MDL classes, separated by spaces, to the "outer" and "inner" divs using the `class` attribute; be sure to include the `is-active` class on the tab you want to be displayed by default.
+```html
+<div class="mdl-tabs mdl-js-tabs">
+ <div class="mdl-tabs__tab-bar">
+ <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
+ <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
+ <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
+ </div>
+ <div class="mdl-tabs__panel is-active" id="tab1">
+ <p>First tab's content.</p>
+ </div>
+ <div class="mdl-tabs__panel" id="tab2">
+ <p>Second tab's content.</p>
+ </div>
+ <div class="mdl-tabs__panel" id="tab3">
+ <p>Third tab's content.</p>
+ </div>
+</div>
+```
+
+The tab components are ready for use.
+
+#### Example
+
+Three tabs, with ripple effect on tab links.
+
+```html
+<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
+ <div class="mdl-tabs__tab-bar">
+ <a href="#about-panel" class="mdl-tabs__tab is-active">About the Beatles</a>
+ <a href="#members-panel" class="mdl-tabs__tab">Members</a>
+ <a href="#albums-panel" class="mdl-tabs__tab">Discography</a>
+ </div>
+ <div class="mdl-tabs__panel is-active" id="about-panel">
+ <p><b>The Beatles</b> were a four-piece musical group from Liverpool, England.
+ Formed in 1960, their career spanned just over a decade, yet they are widely
+ regarded as the most influential band in history.</p>
+ <p>Their songs are among the best-loved music of all time. It is said that every
+ minute of every day, a radio station somewhere is playing a Beatles song.</p>
+ </div>
+ <div class="mdl-tabs__panel" id="members-panel">
+ <p>The Beatles' members were:</p>
+ <ul>
+ <li>John Lennon (1940-1980)</li>
+ <li>Paul McCartney (1942-)</li>
+ <li>George Harrison (1943-2001)</li>
+ <li>Ringo Starr (1940-)</li>
+ </ul>
+ </div>
+ <div class="mdl-tabs__panel" id="albums-panel">
+ <p>The Beatles' original UK LPs, in order of release:</p>
+ <ol>
+ <li>Please Please Me (1963)</li>
+ <li>With the Beatles (1963)</li>
+ <li>A Hard Day's Night (1964)</li>
+ <li>Beatles for Sale (1964)</li>
+ <li>Help! (1965)</li>
+ <li>Rubber Soul (1965)</li>
+ <li>Revolver (1966)</li>
+ <li>Sgt. Pepper's Lonely Hearts Club Band (1967)</li>
+ <li>The Beatles ("The White Album", 1968)</li>
+ <li>Yellow Submarine (1969)</li>
+ <li>Abbey Road (1969)</li>
+ <li>Let It Be (1970)</li>
+ </ol>
+ </div>
+</div>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the tabs. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-tabs` | Defines a tabs container as an MDL component | Required on "outer" div element |
+| `mdl-js-tabs` | Assigns basic MDL behavior to tabs container | Required on "outer" div element|
+| `mdl-js-ripple-effect` | Applies *ripple* click effect to tab links | Optional; goes on "outer" div element|
+| `mdl-tabs__tab-bar` | Defines a container as an MDL tabs link bar | Required on first "inner" div element |
+| `mdl-tabs__tab` | Defines an anchor (link) as an MDL tab activator | Required on all links in first "inner" div element |
+| `is-active` | Defines a tab as the default display tab | Required on one (and only one) of the "inner" div (tab) elements |
+| `mdl-tabs__panel` | Defines a container as tab content | Required on each of the "inner" div (tab) elements |
diff --git a/node_modules/material-design-lite/src/tabs/_tabs.scss b/node_modules/material-design-lite/src/tabs/_tabs.scss
new file mode 100644
index 0000000..a9ec51d
--- /dev/null
+++ b/node_modules/material-design-lite/src/tabs/_tabs.scss
@@ -0,0 +1,114 @@
+/**
+ * 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";
+
+
+.mdl-tabs {
+ display: block;
+ width: 100%;
+}
+
+.mdl-tabs__tab-bar {
+ display : flex;
+ flex-direction : row;
+ justify-content : center; // ⇾
+ align-content : space-between; // ||
+ align-items : flex-start; // ↓
+
+ height : 48px;
+ padding : 0 0 0 0;
+ margin : 0;
+ border-bottom : 1px solid $tab-border-color;
+}
+
+.mdl-tabs__tab {
+ margin: 0;
+ border: none;
+ padding: 0 24px 0 24px;
+
+ float: left;
+ position: relative;
+ display: block;
+
+ text-decoration: none;
+ height: 48px;
+ line-height: 48px;
+
+ text-align: center;
+ font-weight: 500;
+ font-size: $layout-tab-font-size;
+ text-transform: uppercase;
+
+ color: $tab-text-color;
+ overflow: hidden;
+
+ .mdl-tabs.is-upgraded &.is-active {
+ color: $tab-active-text-color;
+ }
+
+ .mdl-tabs.is-upgraded &.is-active:after {
+ height: 2px;
+ width: 100%;
+ display: block;
+ content: " ";
+ bottom: 0px;
+ left: 0px;
+ position: absolute;
+ background: $tab-highlight-color;
+ animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+ transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+ }
+
+ & .mdl-tabs__ripple-container {
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0px;
+ top: 0px;
+ z-index: 1;
+ overflow: hidden;
+
+ & .mdl-ripple {
+ background: $tab-highlight-color;
+ }
+ }
+}
+
+.mdl-tabs__panel {
+ display: block;
+
+ .mdl-tabs.is-upgraded & {
+ display: none;
+ }
+
+ .mdl-tabs.is-upgraded &.is-active {
+ display: block;
+ }
+}
+
+@keyframes border-expand {
+ 0% {
+ opacity: 0;
+ width: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ width: 100%;
+ }
+}
diff --git a/node_modules/material-design-lite/src/tabs/snippets/tabs.html b/node_modules/material-design-lite/src/tabs/snippets/tabs.html
new file mode 100644
index 0000000..ec88207
--- /dev/null
+++ b/node_modules/material-design-lite/src/tabs/snippets/tabs.html
@@ -0,0 +1,33 @@
+<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
+ <div class="mdl-tabs__tab-bar">
+ <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
+ <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
+ <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
+ </div>
+
+ <div class="mdl-tabs__panel is-active" id="starks-panel">
+ <ul>
+ <li>Eddard</li>
+ <li>Catelyn</li>
+ <li>Robb</li>
+ <li>Sansa</li>
+ <li>Brandon</li>
+ <li>Arya</li>
+ <li>Rickon</li>
+ </ul>
+ </div>
+ <div class="mdl-tabs__panel" id="lannisters-panel">
+ <ul>
+ <li>Tywin</li>
+ <li>Cersei</li>
+ <li>Jamie</li>
+ <li>Tyrion</li>
+ </ul>
+ </div>
+ <div class="mdl-tabs__panel" id="targaryens-panel">
+ <ul>
+ <li>Viserys</li>
+ <li>Daenerys</li>
+ </ul>
+ </div>
+</div>
diff --git a/node_modules/material-design-lite/src/tabs/tabs.js b/node_modules/material-design-lite/src/tabs/tabs.js
new file mode 100644
index 0000000..110997b
--- /dev/null
+++ b/node_modules/material-design-lite/src/tabs/tabs.js
@@ -0,0 +1,164 @@
+/**
+ * @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 Tabs 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 MaterialTabs = function MaterialTabs(element) {
+ // Stores the HTML element.
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialTabs'] = MaterialTabs;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialTabs.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
+ */
+ MaterialTabs.prototype.CssClasses_ = {
+ TAB_CLASS: 'mdl-tabs__tab',
+ PANEL_CLASS: 'mdl-tabs__panel',
+ ACTIVE_CLASS: 'is-active',
+ UPGRADED_CLASS: 'is-upgraded',
+
+ MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
+ MDL_RIPPLE: 'mdl-ripple',
+ MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+ };
+
+ /**
+ * Handle clicks to a tabs component
+ *
+ * @private
+ */
+ MaterialTabs.prototype.initTabs_ = function() {
+ if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+ this.element_.classList.add(
+ this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+ }
+
+ // Select element tabs, document panels
+ this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
+ this.panels_ =
+ this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
+
+ // Create new tabs for each tab element
+ for (var i = 0; i < this.tabs_.length; i++) {
+ new MaterialTab(this.tabs_[i], this);
+ }
+
+ this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
+ };
+
+ /**
+ * Reset tab state, dropping active classes
+ *
+ * @private
+ */
+ MaterialTabs.prototype.resetTabState_ = function() {
+ for (var k = 0; k < this.tabs_.length; k++) {
+ this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+ }
+ };
+
+ /**
+ * Reset panel state, droping active classes
+ *
+ * @private
+ */
+ MaterialTabs.prototype.resetPanelState_ = function() {
+ for (var j = 0; j < this.panels_.length; j++) {
+ this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
+ }
+ };
+
+ /**
+ * Initialize element.
+ */
+ MaterialTabs.prototype.init = function() {
+ if (this.element_) {
+ this.initTabs_();
+ }
+ };
+
+ /**
+ * Constructor for an individual tab.
+ *
+ * @constructor
+ * @param {Element} tab The HTML element for the tab.
+ * @param {MaterialTabs} ctx The MaterialTabs object that owns the tab.
+ */
+ function MaterialTab(tab, ctx) {
+ if (tab) {
+ if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
+ var rippleContainer = document.createElement('span');
+ rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
+ rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
+ var ripple = document.createElement('span');
+ ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
+ rippleContainer.appendChild(ripple);
+ tab.appendChild(rippleContainer);
+ }
+
+ tab.addEventListener('click', function(e) {
+ if (tab.getAttribute('href').charAt(0) === '#') {
+ e.preventDefault();
+ var href = tab.href.split('#')[1];
+ var panel = ctx.element_.querySelector('#' + href);
+ ctx.resetTabState_();
+ ctx.resetPanelState_();
+ tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+ panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
+ }
+ });
+
+ }
+ }
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialTabs,
+ classAsString: 'MaterialTabs',
+ cssClass: 'mdl-js-tabs'
+ });
+})();