Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/spinner/README.md b/node_modules/material-design-lite/src/spinner/README.md
new file mode 100755
index 0000000..1da695c
--- /dev/null
+++ b/node_modules/material-design-lite/src/spinner/README.md
@@ -0,0 +1,48 @@
+## Introduction
+
+The Material Design Lite (MDL) **spinner** component is an enhanced replacement for the classic "wait cursor" (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of an open circle that changes colors as it animates in a clockwise direction, and clearly communicates that a process has been started but not completed.
+
+A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process's specific progress or degree of completion. The MDL spinner component provides various types of spinners, and allows you to add display effects.
+
+Spinners are a fairly new feature of most user interfaces, and provide users with a consistent visual cue about ongoing activity, regardless of hardware device, operating system, or browser environment. Their design and use is an important factor in the overall user experience.
+
+### To include an MDL **spinner** component:
+
+ 1. Code an element, such as a `<div>`, `<p>`, or `<span>`, to contain the spinner; the element should have no content of its own.
+```html
+<div></div>
+```
+ 2. Add one or more MDL classes, separated by spaces, to the container using the `class` attribute.
+```html
+<div class="mdl-spinner mdl-js-spinner is-active"></div>
+```
+
+The spinner component is ready for use.
+
+#### Examples
+
+A default spinner in a div.
+
+```html
+<div class="mdl-spinner mdl-js-spinner is-active"></div>
+```
+
+A single-color spinner in a paragraph.
+
+```html
+<p class="mdl-spinner mdl-js-spinner mdl-spinner--single-color is-active"></p>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual enhancements to the spinner. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-spinner` | Defines the container as an MDL spinner component | Required |
+| `mdl-js-spinner` | Assigns basic MDL behavior to spinner | Required |
+| `is-active` | Makes the spinner visible and animated | Optional |
+| `mdl-spinner--single-color` | Uses a single (primary palette) color instead of changing colors | Optional
+
+>**Note:** There is no specific *disabled* version of a spinner; the presence or absence of the `is-active` class determines whether the spinner is visible. For example, this spinner is inactive and invisible: `<div class="mdl-spinner mdl-js-spinner"></div>`
+>This attribute may be added or removed programmatically via scripting.
diff --git a/node_modules/material-design-lite/src/spinner/_spinner.scss b/node_modules/material-design-lite/src/spinner/_spinner.scss
new file mode 100644
index 0000000..602e597
--- /dev/null
+++ b/node_modules/material-design-lite/src/spinner/_spinner.scss
@@ -0,0 +1,256 @@
+/**
+ * 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-spinner {
+ display: inline-block;
+ position: relative;
+ width: $spinner-size;
+ height: $spinner-size;
+
+ &:not(.is-upgraded).is-active:after {
+ content: "Loading...";
+ }
+
+ &.is-upgraded.is-active {
+ animation: mdl-spinner__container-rotate $spinner-duration linear infinite;
+ }
+}
+
+@keyframes mdl-spinner__container-rotate {
+ to { transform: rotate(360deg) }
+}
+
+.mdl-spinner__layer {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+}
+
+.mdl-spinner__layer-1 {
+ border-color: $spinner-color-1;
+
+ .mdl-spinner--single-color & {
+ border-color: $spinner-single-color;
+ }
+
+ .mdl-spinner.is-active & {
+ animation:
+ mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both,
+ mdl-spinner__layer-1-fade-in-out (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both;
+ }
+}
+
+.mdl-spinner__layer-2 {
+ border-color: $spinner-color-2;
+
+ .mdl-spinner--single-color & {
+ border-color: $spinner-single-color;
+ }
+
+ .mdl-spinner.is-active & {
+ animation:
+ mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both,
+ mdl-spinner__layer-2-fade-in-out (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both;
+ }
+}
+
+.mdl-spinner__layer-3 {
+ border-color: $spinner-color-3;
+
+ .mdl-spinner--single-color & {
+ border-color: $spinner-single-color;
+ }
+
+ .mdl-spinner.is-active & {
+ animation:
+ mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both,
+ mdl-spinner__layer-3-fade-in-out (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both;
+ }
+}
+
+.mdl-spinner__layer-4 {
+ border-color: $spinner-color-4;
+
+ .mdl-spinner--single-color & {
+ border-color: $spinner-single-color;
+ }
+
+ .mdl-spinner.is-active & {
+ animation:
+ mdl-spinner__fill-unfill-rotate (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both,
+ mdl-spinner__layer-4-fade-in-out (4 * $spinner-arc-time)
+ $animation-curve-fast-out-slow-in infinite both;
+ }
+}
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+ 12.5% { transform: rotate(0.5 * $spinner-arc-size); }
+ 25% { transform: rotate($spinner-arc-size); }
+ 37.5% { transform: rotate(1.5 * $spinner-arc-size); }
+ 50% { transform: rotate(2 * $spinner-arc-size); }
+ 62.5% { transform: rotate(2.5 * $spinner-arc-size); }
+ 75% { transform: rotate(3 * $spinner-arc-size); }
+ 87.5% { transform: rotate(3.5 * $spinner-arc-size); }
+ to { transform: rotate(4 * $spinner-arc-size); }
+}
+
+/**
+* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
+* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
+* to do proper subpixel rendering for the elements being animated. This is
+* especially visible in Chrome 39 on Ubuntu 14.04. See:
+*
+* - https://github.com/Polymer/paper-spinner/issues/9
+* - https://code.google.com/p/chromium/issues/detail?id=436255
+*/
+@keyframes mdl-spinner__layer-1-fade-in-out {
+ from { opacity: 0.99; }
+ 25% { opacity: 0.99; }
+ 26% { opacity: 0; }
+ 89% { opacity: 0; }
+ 90% { opacity: 0.99; }
+ 100% { opacity: 0.99; }
+}
+
+@keyframes mdl-spinner__layer-2-fade-in-out {
+ from { opacity: 0; }
+ 15% { opacity: 0; }
+ 25% { opacity: 0.99; }
+ 50% { opacity: 0.99; }
+ 51% { opacity: 0; }
+}
+
+@keyframes mdl-spinner__layer-3-fade-in-out {
+ from { opacity: 0; }
+ 40% { opacity: 0; }
+ 50% { opacity: 0.99; }
+ 75% { opacity: 0.99; }
+ 76% { opacity: 0; }
+}
+
+@keyframes mdl-spinner__layer-4-fade-in-out {
+ from { opacity: 0; }
+ 65% { opacity: 0; }
+ 75% { opacity: 0.99; }
+ 90% { opacity: 0.99; }
+ 100% { opacity: 0; }
+}
+
+/**
+* Patch the gap that appear between the two adjacent
+* div.mdl-spinner__circle-clipper while the spinner is rotating
+* (appears on Chrome 38, Safari 7.1, and IE 11).
+*
+* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
+* opacity is 0.99, but still does on Safari and IE.
+*/
+.mdl-spinner__gap-patch {
+ position: absolute;
+ box-sizing: border-box;
+ top: 0;
+ left: 45%;
+ width: 10%;
+ height: 100%;
+ overflow: hidden;
+ border-color: inherit;
+
+ & .mdl-spinner__circle {
+ width: 1000%;
+ left: -450%;
+ }
+}
+
+.mdl-spinner__circle-clipper {
+ display: inline-block;
+ position: relative;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ border-color: inherit;
+
+ &.mdl-spinner__left {
+ float: left;
+ }
+
+ &.mdl-spinner__right {
+ float: right;
+ }
+
+ & .mdl-spinner__circle {
+ width: 200%;
+ }
+}
+
+.mdl-spinner__circle {
+ box-sizing: border-box;
+ height: 100%;
+ border-width: $spinner-stroke-width;
+ border-style: solid;
+ border-color: inherit;
+ border-bottom-color: transparent !important;
+ border-radius: 50%;
+ animation: none;
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ .mdl-spinner__left & {
+ border-right-color: transparent !important;
+ transform: rotate(129deg);
+
+ .mdl-spinner.is-active & {
+ animation: mdl-spinner__left-spin $spinner-arc-time
+ $animation-curve-fast-out-slow-in infinite both;
+ }
+ }
+
+ .mdl-spinner__right & {
+ left: -100%;
+ border-left-color: transparent !important;
+ transform: rotate(-129deg);
+
+ .mdl-spinner.is-active & {
+ animation: mdl-spinner__right-spin $spinner-arc-time
+ $animation-curve-fast-out-slow-in infinite both;
+ }
+ }
+}
+
+@keyframes mdl-spinner__left-spin {
+ from { transform: rotate(130deg); }
+ 50% { transform: rotate(-5deg); }
+ to { transform: rotate(130deg); }
+}
+
+@keyframes mdl-spinner__right-spin {
+ from { transform: rotate(-130deg); }
+ 50% { transform: rotate(5deg); }
+ to { transform: rotate(-130deg); }
+}
diff --git a/node_modules/material-design-lite/src/spinner/snippets/spinner-default.html b/node_modules/material-design-lite/src/spinner/snippets/spinner-default.html
new file mode 100644
index 0000000..26961c8
--- /dev/null
+++ b/node_modules/material-design-lite/src/spinner/snippets/spinner-default.html
@@ -0,0 +1,2 @@
+<!-- MDL Spinner Component -->
+<div class="mdl-spinner mdl-js-spinner is-active"></div>
diff --git a/node_modules/material-design-lite/src/spinner/snippets/spinner-single-color.html b/node_modules/material-design-lite/src/spinner/snippets/spinner-single-color.html
new file mode 100644
index 0000000..083abdf
--- /dev/null
+++ b/node_modules/material-design-lite/src/spinner/snippets/spinner-single-color.html
@@ -0,0 +1,2 @@
+<!-- MDL Spinner Component with Single Color -->
+<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
diff --git a/node_modules/material-design-lite/src/spinner/spinner.js b/node_modules/material-design-lite/src/spinner/spinner.js
new file mode 100644
index 0000000..8159fb3
--- /dev/null
+++ b/node_modules/material-design-lite/src/spinner/spinner.js
@@ -0,0 +1,147 @@
+/**
+ * @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 Spinner MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @param {HTMLElement} element The element that will be upgraded.
+ * @constructor
+ */
+ var MaterialSpinner = function MaterialSpinner(element) {
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialSpinner'] = MaterialSpinner;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialSpinner.prototype.Constant_ = {
+ MDL_SPINNER_LAYER_COUNT: 4
+ };
+
+ /**
+ * 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
+ */
+ MaterialSpinner.prototype.CssClasses_ = {
+ MDL_SPINNER_LAYER: 'mdl-spinner__layer',
+ MDL_SPINNER_CIRCLE_CLIPPER: 'mdl-spinner__circle-clipper',
+ MDL_SPINNER_CIRCLE: 'mdl-spinner__circle',
+ MDL_SPINNER_GAP_PATCH: 'mdl-spinner__gap-patch',
+ MDL_SPINNER_LEFT: 'mdl-spinner__left',
+ MDL_SPINNER_RIGHT: 'mdl-spinner__right'
+ };
+
+ /**
+ * Auxiliary method to create a spinner layer.
+ *
+ * @param {number} index Index of the layer to be created.
+ * @public
+ */
+ MaterialSpinner.prototype.createLayer = function(index) {
+ var layer = document.createElement('div');
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER);
+ layer.classList.add(this.CssClasses_.MDL_SPINNER_LAYER + '-' + index);
+
+ var leftClipper = document.createElement('div');
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+ leftClipper.classList.add(this.CssClasses_.MDL_SPINNER_LEFT);
+
+ var gapPatch = document.createElement('div');
+ gapPatch.classList.add(this.CssClasses_.MDL_SPINNER_GAP_PATCH);
+
+ var rightClipper = document.createElement('div');
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE_CLIPPER);
+ rightClipper.classList.add(this.CssClasses_.MDL_SPINNER_RIGHT);
+
+ var circleOwners = [leftClipper, gapPatch, rightClipper];
+
+ for (var i = 0; i < circleOwners.length; i++) {
+ var circle = document.createElement('div');
+ circle.classList.add(this.CssClasses_.MDL_SPINNER_CIRCLE);
+ circleOwners[i].appendChild(circle);
+ }
+
+ layer.appendChild(leftClipper);
+ layer.appendChild(gapPatch);
+ layer.appendChild(rightClipper);
+
+ this.element_.appendChild(layer);
+ };
+ MaterialSpinner.prototype['createLayer'] =
+ MaterialSpinner.prototype.createLayer;
+
+ /**
+ * Stops the spinner animation.
+ * Public method for users who need to stop the spinner for any reason.
+ *
+ * @public
+ */
+ MaterialSpinner.prototype.stop = function() {
+ this.element_.classList.remove('is-active');
+ };
+ MaterialSpinner.prototype['stop'] = MaterialSpinner.prototype.stop;
+
+ /**
+ * Starts the spinner animation.
+ * Public method for users who need to manually start the spinner for any reason
+ * (instead of just adding the 'is-active' class to their markup).
+ *
+ * @public
+ */
+ MaterialSpinner.prototype.start = function() {
+ this.element_.classList.add('is-active');
+ };
+ MaterialSpinner.prototype['start'] = MaterialSpinner.prototype.start;
+
+ /**
+ * Initialize element.
+ */
+ MaterialSpinner.prototype.init = function() {
+ if (this.element_) {
+ for (var i = 1; i <= this.Constant_.MDL_SPINNER_LAYER_COUNT; i++) {
+ this.createLayer(i);
+ }
+
+ this.element_.classList.add('is-upgraded');
+ }
+ };
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialSpinner,
+ classAsString: 'MaterialSpinner',
+ cssClass: 'mdl-js-spinner',
+ widget: true
+ });
+})();