Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/icon-toggle/README.md b/node_modules/material-design-lite/src/icon-toggle/README.md
new file mode 100755
index 0000000..7af700a
--- /dev/null
+++ b/node_modules/material-design-lite/src/icon-toggle/README.md
@@ -0,0 +1,64 @@
+## Introduction
+
+The Material Design Lite (MDL) **icon-toggle** component is an enhanced version of the standard HTML `<input type="checkbox">` element. An icon-toggle consists of a user defined icon that indicates, by visual highlighting, a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, icon-toggles may appear individually or in groups, and can be selected and deselected individually.
+
+Icon toggles, particularly as a replacement for certain checkboxes, can be a valuable feature in 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 icon-toggle component's [Material Design specifications page](http://www.google.com/design/spec/components/buttons.html#buttons-other-buttons) for details.
+
+The icon-toggle component can have a more customized visual look than a standard checkbox, and may be initially or programmatically *disabled*.
+
+### To include an MDL **icon-toggle** component:
+
+ 1. Code a `<label>` element and give it a `for` attribute whose value is the unique id of the icon-toggle it will contain.
+```html
+<label for="icon-toggle-1">
+...
+</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="icon-toggle-1">
+ <input type="checkbox" id="icon-toggle-1">
+</label>
+```
+ 3. Also inside the label, after the input element, code an `<i>` element containing the icon-toggle's desired icon.
+```html
+<label for="icon-toggle-1">
+ <input type="checkbox" id="icon-toggle-1">
+ <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+</label>
+```
+ 4. Add one or more MDL classes, separated by spaces, to the label and input elements, using the `class` attribute.
+```html
+<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
+ <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
+ <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+</label>
+```
+
+The icon-toggle component is ready for use.
+
+#### Example
+
+An icon-toggle with a ripple click effect.
+
+```html
+<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
+ <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input">
+ <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+</label>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the icon-toggle. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-icon-toggle` | Defines label as an MDL component | Required on label element|
+| `mdl-js-icon-toggle` | Assigns basic MDL behavior to label | Required on label element |
+| `mdl-icon-toggle__input` | Applies basic MDL behavior to icon-toggle | Required on input element (icon-toggle) |
+| `mdl-icon-toggle__label` | Applies basic MDL behavior to caption | Required on i element (icon) |
+| `mdl-js-ripple-effect` | Applies *ripple* click effect | Optional; goes on label element, not input element (icon-toggle) |
+
+>**Note:** Disabled versions of all available input types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input type="checkbox" id="icon-toggle-5" class="mdl-icon-toggle__input" disabled>`
+>This attribute may be added or removed programmatically via scripting.
diff --git a/node_modules/material-design-lite/src/icon-toggle/_icon-toggle.scss b/node_modules/material-design-lite/src/icon-toggle/_icon-toggle.scss
new file mode 100644
index 0000000..354f023
--- /dev/null
+++ b/node_modules/material-design-lite/src/icon-toggle/_icon-toggle.scss
@@ -0,0 +1,121 @@
+/**
+ * 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-icon-toggle {
+ position: relative;
+
+ z-index: 1;
+
+ vertical-align: middle;
+
+ display: inline-block;
+ height: $icon-toggle-size;
+ margin: 0;
+ padding: 0;
+}
+
+.mdl-icon-toggle__input {
+ line-height: $icon-toggle-size;
+
+ .mdl-icon-toggle.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-icon-toggle__label {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ height: $icon-toggle-size;
+ width: $icon-toggle-size;
+ min-width: $icon-toggle-size;
+ color: $icon-toggle-color;
+ border-radius: 50%;
+ padding: 0;
+ margin-left: 0;
+ margin-right: 0;
+ text-align: center;
+ background-color: transparent;
+ will-change: background-color;
+ transition: background-color 0.2s $animation-curve-default,
+ color 0.2s $animation-curve-default;
+
+ &.material-icons {
+ line-height: $icon-toggle-size;
+ font-size: $icon-toggle-font-size;
+ }
+
+ .mdl-icon-toggle.is-checked & {
+ color: $icon-toggle-checked-color;
+ }
+
+ .mdl-icon-toggle.is-disabled & {
+ color: $icon-toggle-disabled-color;
+ cursor: auto;
+ transition: none;
+ }
+
+ .mdl-icon-toggle.is-focused & {
+ background-color: $icon-toggle-focus-color;
+ }
+
+ .mdl-icon-toggle.is-focused.is-checked & {
+ background-color: $icon-toggle-checked-focus-color;
+ }
+}
+
+
+.mdl-icon-toggle__ripple-container {
+ position: absolute;
+ z-index: 2;
+ top: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
+ left: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
+
+ box-sizing: border-box;
+ width: $icon-toggle-ripple-size;
+ height: $icon-toggle-ripple-size;
+ border-radius: 50%;
+
+ cursor: pointer;
+
+ overflow: hidden;
+ -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+
+ & .mdl-ripple {
+ background: $icon-toggle-color;
+ }
+
+ .mdl-icon-toggle.is-disabled & {
+ cursor: auto;
+ }
+
+ .mdl-icon-toggle.is-disabled & .mdl-ripple {
+ background: transparent;
+ }
+}
diff --git a/node_modules/material-design-lite/src/icon-toggle/icon-toggle.js b/node_modules/material-design-lite/src/icon-toggle/icon-toggle.js
new file mode 100644
index 0000000..5d5a17c
--- /dev/null
+++ b/node_modules/material-design-lite/src/icon-toggle/icon-toggle.js
@@ -0,0 +1,255 @@
+/**
+ * @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 icon toggle 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 MaterialIconToggle = function MaterialIconToggle(element) {
+ this.element_ = element;
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialIconToggle'] = MaterialIconToggle;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialIconToggle.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
+ */
+ MaterialIconToggle.prototype.CssClasses_ = {
+ INPUT: 'mdl-icon-toggle__input',
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+ RIPPLE_CONTAINER: 'mdl-icon-toggle__ripple-container',
+ RIPPLE_CENTER: 'mdl-ripple--center',
+ RIPPLE: 'mdl-ripple',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_CHECKED: 'is-checked'
+ };
+
+ /**
+ * Handle change of state.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialIconToggle.prototype.onChange_ = function(event) {
+ this.updateClasses_();
+ };
+
+ /**
+ * Handle focus of element.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialIconToggle.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
+ */
+ MaterialIconToggle.prototype.onBlur_ = function(event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+ };
+
+ /**
+ * Handle mouseup.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialIconToggle.prototype.onMouseUp_ = function(event) {
+ this.blur_();
+ };
+
+ /**
+ * Handle class updates.
+ *
+ * @private
+ */
+ MaterialIconToggle.prototype.updateClasses_ = function() {
+ this.checkDisabled();
+ this.checkToggleState();
+ };
+
+ /**
+ * Add blur.
+ *
+ * @private
+ */
+ MaterialIconToggle.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
+ */
+ MaterialIconToggle.prototype.checkToggleState = function() {
+ if (this.inputElement_.checked) {
+ this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+ }
+ };
+ MaterialIconToggle.prototype['checkToggleState'] =
+ MaterialIconToggle.prototype.checkToggleState;
+
+ /**
+ * Check the inputs disabled state and update display.
+ *
+ * @public
+ */
+ MaterialIconToggle.prototype.checkDisabled = function() {
+ if (this.inputElement_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+ };
+ MaterialIconToggle.prototype['checkDisabled'] =
+ MaterialIconToggle.prototype.checkDisabled;
+
+ /**
+ * Disable icon toggle.
+ *
+ * @public
+ */
+ MaterialIconToggle.prototype.disable = function() {
+ this.inputElement_.disabled = true;
+ this.updateClasses_();
+ };
+ MaterialIconToggle.prototype['disable'] =
+ MaterialIconToggle.prototype.disable;
+
+ /**
+ * Enable icon toggle.
+ *
+ * @public
+ */
+ MaterialIconToggle.prototype.enable = function() {
+ this.inputElement_.disabled = false;
+ this.updateClasses_();
+ };
+ MaterialIconToggle.prototype['enable'] = MaterialIconToggle.prototype.enable;
+
+ /**
+ * Check icon toggle.
+ *
+ * @public
+ */
+ MaterialIconToggle.prototype.check = function() {
+ this.inputElement_.checked = true;
+ this.updateClasses_();
+ };
+ MaterialIconToggle.prototype['check'] = MaterialIconToggle.prototype.check;
+
+ /**
+ * Uncheck icon toggle.
+ *
+ * @public
+ */
+ MaterialIconToggle.prototype.uncheck = function() {
+ this.inputElement_.checked = false;
+ this.updateClasses_();
+ };
+ MaterialIconToggle.prototype['uncheck'] =
+ MaterialIconToggle.prototype.uncheck;
+
+ /**
+ * Initialize element.
+ */
+ MaterialIconToggle.prototype.init = function() {
+
+ if (this.element_) {
+ this.inputElement_ =
+ this.element_.querySelector('.' + this.CssClasses_.INPUT);
+
+ if (this.element_.classList.contains(this.CssClasses_.JS_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_.JS_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.boundElementOnMouseUp = 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.boundElementOnMouseUp);
+
+ this.updateClasses_();
+ this.element_.classList.add('is-upgraded');
+ }
+ };
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialIconToggle,
+ classAsString: 'MaterialIconToggle',
+ cssClass: 'mdl-js-icon-toggle',
+ widget: true
+ });
+})();
diff --git a/node_modules/material-design-lite/src/icon-toggle/snippets/icon-off.html b/node_modules/material-design-lite/src/icon-toggle/snippets/icon-off.html
new file mode 100644
index 0000000..347a490
--- /dev/null
+++ b/node_modules/material-design-lite/src/icon-toggle/snippets/icon-off.html
@@ -0,0 +1,4 @@
+<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
+ <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
+ <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+</label>
diff --git a/node_modules/material-design-lite/src/icon-toggle/snippets/icon-on.html b/node_modules/material-design-lite/src/icon-toggle/snippets/icon-on.html
new file mode 100644
index 0000000..23632a3
--- /dev/null
+++ b/node_modules/material-design-lite/src/icon-toggle/snippets/icon-on.html
@@ -0,0 +1,4 @@
+<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
+ <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
+ <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+</label>