Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/checkbox/README.md b/node_modules/material-design-lite/src/checkbox/README.md
new file mode 100755
index 0000000..2a000e7
--- /dev/null
+++ b/node_modules/material-design-lite/src/checkbox/README.md
@@ -0,0 +1,64 @@
+## Introduction
+
+The Material Design Lite (MDL) **checkbox** component is an enhanced version of the standard HTML `<input type="checkbox">` element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects.
+
+Checkboxes are a common 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 checkbox component's [Material Design specifications page](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox) for details.
+
+The enhanced checkbox component has a more vivid visual look than a standard checkbox, and may be initially or programmatically *disabled*.
+
+### To include an MDL **checkbox** component:
+
+ 1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the checkbox it will contain. The `for` attribute is optional when the `<input>` element is contained inside the `<label>` element, but is recommended for clarity.
+```html
+<label for="chkbox1">
+...
+</label>
+```
+ 2. Inside the label, code an `<input>` element and give it a `type` attribute whose value is `"checkbox"`. Also give it an `id` attribute whose value matches the label's `for` attribute value.
+```html
+<label for="chkbox1">
+ <input type="checkbox" id="chkbox1">
+</label>
+```
+ 3. Also inside the label, after the checkbox, code a `<span>` element containing the checkbox's text caption.
+```html
+<label for="chkbox1">
+ <input type="checkbox" id="chkbox1">
+ <span>Enable AutoSave</span>
+</label>
+```
+ 4. Add one or more MDL classes, separated by spaces, to the label, checkbox, and caption using the `class` attribute.
+```html
+<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox">
+ <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
+ <span class="mdl-checkbox__label">Enable AutoSave</span>
+</label>
+```
+
+The checkbox component is ready for use.
+
+#### Example
+
+A checkbox with a ripple click effect.
+
+```html
+<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
+ <span class="mdl-checkbox__label">Enable AutoSave</span>
+</label>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the checkbox. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-checkbox` | Defines label as an MDL component | Required on label element|
+| `mdl-js-checkbox` | Assigns basic MDL behavior to label | Required on label element |
+| `mdl-checkbox__input` | Applies basic MDL behavior to checkbox | Required on input element (checkbox) |
+| `mdl-checkbox__label` | Applies basic MDL behavior to caption | Required on span element (caption) |
+| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (checkbox) |
+
+>**Note:** Disabled versions of all the available checkbox types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" disabled>`
+>This attribute may be added or removed programmatically via scripting.
diff --git a/node_modules/material-design-lite/src/checkbox/_checkbox.scss b/node_modules/material-design-lite/src/checkbox/_checkbox.scss
new file mode 100644
index 0000000..3dd265e
--- /dev/null
+++ b/node_modules/material-design-lite/src/checkbox/_checkbox.scss
@@ -0,0 +1,180 @@
+/**
+ * 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-checkbox {
+ position: relative;
+
+ z-index: 1;
+
+ vertical-align: middle;
+
+ display: inline-block;
+
+ box-sizing: border-box;
+ width: 100%;
+ height: $checkbox-label-height;
+ margin: 0;
+ padding: 0;
+
+ &.is-upgraded {
+ padding-left: $checkbox-button-size + $checkbox-padding;
+ }
+}
+
+.mdl-checkbox__input {
+ line-height: $checkbox-label-height;
+
+ .mdl-checkbox.is-upgraded & {
+ // Hide input element, while still making it respond to focus.
+ position: absolute;
+ width: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ opacity: 0;
+ -ms-appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: none;
+ }
+}
+
+.mdl-checkbox__box-outline {
+ position: absolute;
+ top: $checkbox-top-offset;
+ left: 0;
+
+ display: inline-block;
+
+ box-sizing: border-box;
+ width: $checkbox-button-size;
+ height: $checkbox-button-size;
+ margin: 0;
+
+ cursor: pointer;
+ overflow: hidden;
+
+ border: 2px solid $checkbox-off-color;
+ border-radius: 2px;
+
+ z-index: 2;
+
+ .mdl-checkbox.is-checked & {
+ border: 2px solid $checkbox-color;
+ }
+
+ fieldset[disabled] .mdl-checkbox &,
+ .mdl-checkbox.is-disabled & {
+ border: 2px solid $checkbox-disabled-color;
+ cursor: auto;
+ }
+}
+
+.mdl-checkbox__focus-helper {
+ position: absolute;
+ top: $checkbox-top-offset;
+ left: 0;
+
+ display: inline-block;
+
+ box-sizing: border-box;
+ width: $checkbox-button-size;
+ height: $checkbox-button-size;
+ border-radius: 50%;
+
+ background-color: transparent;
+
+ .mdl-checkbox.is-focused & {
+ box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+
+ .mdl-checkbox.is-focused.is-checked & {
+ box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
+ background-color: $checkbox-focus-color;
+ }
+}
+
+.mdl-checkbox__tick-outline {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ mask: url("#{$checkbox-image-path}/tick-mask.svg?embed");
+
+ background: transparent;
+ @include material-animation-default(0.28s);
+ transition-property: background;
+
+ .mdl-checkbox.is-checked & {
+ background: $checkbox-color url("#{$checkbox-image-path}/tick.svg?embed");
+ }
+
+ fieldset[disabled] .mdl-checkbox.is-checked &,
+ .mdl-checkbox.is-checked.is-disabled & {
+ background: $checkbox-disabled-color url("#{$checkbox-image-path}/tick.svg?embed");
+ }
+}
+
+.mdl-checkbox__label {
+ position: relative;
+ cursor: pointer;
+ font-size: $checkbox-label-font-size;
+ line-height: $checkbox-label-height;
+ margin: 0;
+
+ fieldset[disabled] .mdl-checkbox &,
+ .mdl-checkbox.is-disabled & {
+ color: $checkbox-disabled-color;
+ cursor: auto;
+ }
+}
+
+.mdl-checkbox__ripple-container {
+ position: absolute;
+ z-index: 2;
+ top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
+ left: -(($checkbox-ripple-size - $checkbox-button-size) / 2);
+
+ box-sizing: border-box;
+ width: $checkbox-ripple-size;
+ height: $checkbox-ripple-size;
+ border-radius: 50%;
+
+ cursor: pointer;
+
+ overflow: hidden;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+
+ & .mdl-ripple {
+ background: $checkbox-color;
+ }
+
+ fieldset[disabled] .mdl-checkbox &,
+ .mdl-checkbox.is-disabled & {
+ cursor: auto;
+ }
+
+ fieldset[disabled] .mdl-checkbox & .mdl-ripple,
+ .mdl-checkbox.is-disabled & .mdl-ripple {
+ background: transparent;
+ }
+}
diff --git a/node_modules/material-design-lite/src/checkbox/checkbox.js b/node_modules/material-design-lite/src/checkbox/checkbox.js
new file mode 100644
index 0000000..148035b
--- /dev/null
+++ b/node_modules/material-design-lite/src/checkbox/checkbox.js
@@ -0,0 +1,269 @@
+/**
+ * @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 Checkbox MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+ var MaterialCheckbox = function MaterialCheckbox(element) {
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialCheckbox'] = MaterialCheckbox;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialCheckbox.prototype.Constant_ = {
+ TINY_TIMEOUT: 0.001
+ };
+
+ /**
+ * 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
+ */
+ MaterialCheckbox.prototype.CssClasses_ = {
+ INPUT: 'mdl-checkbox__input',
+ BOX_OUTLINE: 'mdl-checkbox__box-outline',
+ FOCUS_HELPER: 'mdl-checkbox__focus-helper',
+ TICK_OUTLINE: 'mdl-checkbox__tick-outline',
+ RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-checkbox__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked',
+ IS_UPGRADED: 'is-upgraded'
+ };
+
+ /**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialCheckbox.prototype.onChange_ = function(event) {
+ this.updateClasses_();
+ };
+
+ /**
+ * Handle focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialCheckbox.prototype.onFocus_ = function(event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+ };
+
+ /**
+ * Handle lost focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialCheckbox.prototype.onBlur_ = function(event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+ };
+
+ /**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialCheckbox.prototype.onMouseUp_ = function(event) {
+ this.blur_();
+ };
+
+ /**
+ * Handle class updates.
+ *
+ * @private
+ */
+ MaterialCheckbox.prototype.updateClasses_ = function() {
+ this.checkDisabled();
+ this.checkToggleState();
+ };
+
+ /**
+ * Add blur.
+ *
+ * @private
+ */
+ MaterialCheckbox.prototype.blur_ = function() {
+ // TODO: figure out why there's a focus event being fired after our blur,
+ // so that we can avoid this hack.
+ window.setTimeout(function() {
+ this.inputElement_.blur();
+ }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
+ };
+
+ // Public methods.
+
+ /**
+ * Check the inputs toggle state and update display.
+ *
+ * @public
+ */
+ MaterialCheckbox.prototype.checkToggleState = function() {
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+ };
+ MaterialCheckbox.prototype['checkToggleState'] =
+ MaterialCheckbox.prototype.checkToggleState;
+
+ /**
+ * Check the inputs disabled state and update display.
+ *
+ * @public
+ */
+ MaterialCheckbox.prototype.checkDisabled = function() {
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+ };
+ MaterialCheckbox.prototype['checkDisabled'] =
+ MaterialCheckbox.prototype.checkDisabled;
+
+ /**
+ * Disable checkbox.
+ *
+ * @public
+ */
+ MaterialCheckbox.prototype.disable = function() {
+ this.inputElement_.disabled = true;
+ this.updateClasses_();
+ };
+ MaterialCheckbox.prototype['disable'] = MaterialCheckbox.prototype.disable;
+
+ /**
+ * Enable checkbox.
+ *
+ * @public
+ */
+ MaterialCheckbox.prototype.enable = function() {
+ this.inputElement_.disabled = false;
+ this.updateClasses_();
+ };
+ MaterialCheckbox.prototype['enable'] = MaterialCheckbox.prototype.enable;
+
+ /**
+ * Check checkbox.
+ *
+ * @public
+ */
+ MaterialCheckbox.prototype.check = function() {
+ this.inputElement_.checked = true;
+ this.updateClasses_();
+ };
+ MaterialCheckbox.prototype['check'] = MaterialCheckbox.prototype.check;
+
+ /**
+ * Uncheck checkbox.
+ *
+ * @public
+ */
+ MaterialCheckbox.prototype.uncheck = function() {
+ this.inputElement_.checked = false;
+ this.updateClasses_();
+ };
+ MaterialCheckbox.prototype['uncheck'] = MaterialCheckbox.prototype.uncheck;
+
+ /**
+ * Initialize element.
+ */
+ MaterialCheckbox.prototype.init = function() {
+ if (this.element_) {
+ this.inputElement_ = this.element_.querySelector('.' +
+ this.CssClasses_.INPUT);
+
+ var boxOutline = document.createElement('span');
+ boxOutline.classList.add(this.CssClasses_.BOX_OUTLINE);
+
+ var tickContainer = document.createElement('span');
+ tickContainer.classList.add(this.CssClasses_.FOCUS_HELPER);
+
+ var tickOutline = document.createElement('span');
+ tickOutline.classList.add(this.CssClasses_.TICK_OUTLINE);
+
+ boxOutline.appendChild(tickOutline);
+
+ this.element_.appendChild(tickContainer);
+ this.element_.appendChild(boxOutline);
+
+ if (this.element_.classList.contains(this.CssClasses_.RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+ this.rippleContainerElement_ = document.createElement('span');
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CONTAINER);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+ this.rippleContainerElement_.classList.add(this.CssClasses_.RIPPLE_CENTER);
+ this.boundRippleMouseUp = this.onMouseUp_.bind(this);
+ this.rippleContainerElement_.addEventListener('mouseup', this.boundRippleMouseUp);
+
+ var ripple = document.createElement('span');
+ ripple.classList.add(this.CssClasses_.RIPPLE);
+
+ this.rippleContainerElement_.appendChild(ripple);
+ this.element_.appendChild(this.rippleContainerElement_);
+ }
+ this.boundInputOnChange = this.onChange_.bind(this);
+ this.boundInputOnFocus = this.onFocus_.bind(this);
+ this.boundInputOnBlur = this.onBlur_.bind(this);
+ this.boundElementMouseUp = this.onMouseUp_.bind(this);
+ this.inputElement_.addEventListener('change', this.boundInputOnChange);
+ this.inputElement_.addEventListener('focus', this.boundInputOnFocus);
+ this.inputElement_.addEventListener('blur', this.boundInputOnBlur);
+ this.element_.addEventListener('mouseup', this.boundElementMouseUp);
+
+ this.updateClasses_();
+ 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: MaterialCheckbox,
+ classAsString: 'MaterialCheckbox',
+ cssClass: 'mdl-js-checkbox',
+ widget: true
+ });
+})();
diff --git a/node_modules/material-design-lite/src/checkbox/snippets/check-off.html b/node_modules/material-design-lite/src/checkbox/snippets/check-off.html
new file mode 100644
index 0000000..1cbcc25
--- /dev/null
+++ b/node_modules/material-design-lite/src/checkbox/snippets/check-off.html
@@ -0,0 +1,4 @@
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
+ <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
+ <span class="mdl-checkbox__label">Checkbox</span>
+</label>
diff --git a/node_modules/material-design-lite/src/checkbox/snippets/check-on.html b/node_modules/material-design-lite/src/checkbox/snippets/check-on.html
new file mode 100644
index 0000000..cd7a065
--- /dev/null
+++ b/node_modules/material-design-lite/src/checkbox/snippets/check-on.html
@@ -0,0 +1,4 @@
+<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
+ <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
+ <span class="mdl-checkbox__label">Checkbox</span>
+</label>