Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/textfield/README.md b/node_modules/material-design-lite/src/textfield/README.md
new file mode 100755
index 0000000..7ca9d7a
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/README.md
@@ -0,0 +1,259 @@
+## Introduction
+
+The Material Design Lite (MDL) **text field** component is an enhanced version of the standard HTML `<input type="text">` and `<input type="textarea">` elements. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The MDL text field component provides various types of text fields, and allows you to add both display and click effects.
+
+Text fields 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 text field component's [Material Design specifications page](http://www.google.com/design/spec/components/text-fields.html) for details.
+
+The enhanced text field component has a more vivid visual look than a standard text field, and may be initially or programmatically *disabled*.
+There are three main types of text fields in the text field component, each with its own basic coding requirements. The types are *single-line*, *multi-line*, and *expandable*.
+
+### To include a *single-line* MDL **text field** component:
+
+ 1. Code a `<div>` element to hold the text field.
+```html
+<div>
+...
+</div>
+```
+ 2. Inside the div, code an `<input>` element with a `type` attribute of `"text"` (the text field), and an `id` attribute of your choice.
+```html
+<div>
+ <input type="text" id="user">
+</div>
+```
+ 3. Also inside the div, after the text field, code a `<label>` element with a `for` attribute whose value matches the `input` element's `id` value, and a short string to be used as the field's placeholder text.
+```html
+<div>
+ <input type="text" id="user">
+ <label for="user">User name</label>
+</div>
+```
+ 4. Optionally, add a `pattern` attribute and value to the `<input>` element (see the [W3C HTML5 forms specification](http://www.w3.org/TR/html5/forms.html#the-pattern-attribute) for details) and an associated error message in a `<span>` element following the `<label>`.
+```html
+<div>
+ <input type="text" id="user" pattern="[A-Z,a-z, ]*">
+ <label for="user">User name</label>
+ <span>Letters and spaces only</span>
+</div>
+```
+ 5. Add one or more MDL classes, separated by spaces, to the div container, text field, field label, and error message using the `class` attribute.
+```html
+<div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" id="user" pattern="[A-Z,a-z, ]*">
+ <label class="mdl-textfield__label" for="user">User name</label>
+ <span class="mdl-textfield__error">Letters and spaces only</span>
+</div>
+```
+The single-line text field component is ready for use.
+
+#### Examples
+
+Single-line text field with a standard label.
+```html
+<div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" id="fname">
+ <label class="mdl-textfield__label" for="fname">First name</label>
+</div>
+```
+
+Single-line text field with a floating label.
+```html
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" id="addr1">
+ <label class="mdl-textfield__label" for="addr1">Address line 1</label>
+</div>
+```
+
+Single-line text field with a standard label, pattern matching, and error message.
+```html
+<div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" pattern="[0-9]*" id="phone">
+ <label class="mdl-textfield__label" for="phone">Phone</label>
+ <span class="mdl-textfield__error">Digits only</span>
+</div>
+```
+
+### To include a *multi-line* MDL **text field** component:
+
+ 1. Code a `<div>` element to hold the text field.
+```html
+<div>
+...
+</div>
+```
+ 2. Inside the div, code a `<textarea>` element with a `type` attribute of `"text"` (the multi-line text field), and an `id` attribute of your choice. Include a `rows` attribute with a value of `"1"` (this attribute sets the number of *concurrently visible* input rows).
+```html
+<div>
+ <textarea type="text" rows="1" id="address"></textarea>
+</div>
+```
+ 3. Also inside the div, after the text field, code a `<label>` element with a `for` attribute whose value matches the `<textarea>` element's `id` value, and a short string to be used as the field's placeholder text.
+```html
+<div>
+ <textarea type="text" rows="1" id="address"></textarea>
+ <label for="address">Full address</label>
+</div>
+```
+ 4. Add one or more MDL classes, separated by spaces, to the div container, text field, and field label using the `class` attribute.
+```html
+<div class="mdl-textfield mdl-js-textfield">
+ <textarea class="mdl-textfield__input" type="text" rows="1" id="address"></textarea>
+ <label class="mdl-textfield__label" for="address">Full address</label>
+</div>
+```
+
+The multi-line text field component is ready for use.
+
+#### Examples
+
+Multi-line text field with one visible input line.
+```html
+<div class="mdl-textfield mdl-js-textfield">
+ <textarea class="mdl-textfield__input" type="text" rows="1" id="schools"></textarea>
+ <label class="mdl-textfield__label" for="schools">Schools attended</label>
+</div>
+```
+
+Multi-line text field with one visible input line and floating label.
+```html
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <textarea class="mdl-textfield__input" type="text" rows= "1" id="schools"></textarea>
+ <label class="mdl-textfield__label" for="schools">Schools attended</label>
+</div>
+```
+
+Multi-line text field with multiple visible input lines and a maximum number of lines.
+```html
+<div class="mdl-textfield mdl-js-textfield">
+ <textarea class="mdl-textfield__input" type="text" rows="3" maxrows="6"
+ id="schools"></textarea>
+ <label class="mdl-textfield__label" for="schools">Schools attended (max. 6)</label>
+</div>
+```
+
+### To include an *expandable* MDL **text field** component:
+
+ 1. Code an "outer" `<div>` element to hold the expandable text field.
+```html
+<div>
+...
+</div>
+```
+ 2. Inside the div, code a `<label>` element with a `for` attribute whose value will match the `<input>` element's `id` value (to be coded in step 5).
+```html
+<div>
+ <label for="expando1">
+ ...
+ </label>
+</div>
+```
+ 3. Inside the label, code a `<span>` element; the span should be empty, and should be the label's only content. This element will contain the expandable text field's icon.
+```html
+<div>
+ <label for="expando1">
+ <span></span>
+ </label>
+</div>
+```
+ 4. Still inside the "outer" div, after the label containing the span, code an "inner" (nested) `<div>` element.
+```html
+<div>
+ <label for="expando1">
+ <span></span>
+ </label>
+ <div>
+ ...
+ </div>
+</div>
+```
+ 5. Inside the "inner" div, code an `<input>` element with a `type` attribute of `"text"` (the text field), and an `id` attribute whose value matches that of the `for` attribute in step 2.
+```html
+<div>
+ <label for="expando1">
+ <span></span>
+ </label>
+ <div>
+ <input type="text" id="expando1">
+ </div>
+</div>
+```
+ 6. Still inside the "inner" div, after the text field, code a `<label>` element with a `for` attribute whose value also matches the `<input>` element's `id` value (coded in step 5), and a short string to be used as the field's placeholder text.
+```html
+<div>
+ <label for="expando1">
+ <span></span>
+ </label>
+ <div>
+ <input type="text" id="expando1">
+ <label for="expando1">Expandable text field</label>
+ </div>
+</div>
+```
+ 7. Add one or more MDL classes, separated by spaces, to the "outer" div container, label, and span, and to the "inner" div container, text field, and field label using the `class` attribute.
+```html
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+ <label class="mdl-button mdl-js-button mdl-button--icon" for="expando1">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" id="expando1">
+ <label class="mdl-textfield__label" for="expando1">Expandable text field</label>
+ </div>
+</div>
+```
+
+The expandable text field component is ready for use. It will expand when the icon (the empty `<span>`) is clicked or gains focus.
+
+#### Examples
+
+Expandable text field with a standard label.
+```html
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+ <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" id="search-expandable">
+ <label class="mdl-textfield__label" for="search-expandable">Search text</label>
+ </div>
+</div>
+```
+
+Expandable text field with a floating label.
+```html
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
+ mdl-textfield--floating-label">
+ <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable2">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" id="search-expandable2">
+ <label class="mdl-textfield__label" for="search-expandable2">
+ Enter search text below
+ </label>
+ </div>
+</div>
+```
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the text field. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-textfield` | Defines container as an MDL component | Required on "outer" div element|
+| `mdl-js-textfield` | Assigns basic MDL behavior to input | Required on "outer" div element |
+| `mdl-textfield__input` | Defines element as textfield input | Required on input or textarea element |
+| `mdl-textfield__label` | Defines element as textfield label | Required on label element for input or textarea elements |
+| `mdl-textfield--floating-label` | Applies *floating label* effect | Optional; goes on "outer" div element |
+| `mdl-textfield__error` | Defines span as an MDL error message | Optional; goes on span element for MDL input element with *pattern*|
+| `mdl-textfield--expandable` | Defines a div as an MDL expandable text field container | For expandable input fields, required on "outer" div element |
+| `mdl-button` | Defines label as an MDL icon button | For expandable input fields, required on "outer" div's label element |
+| `mdl-js-button` | Assigns basic behavior to icon container | For expandable input fields, required on "outer" div's label element |
+| `mdl-button--icon` | Defines label as an MDL icon container | For expandable input fields, required on "outer" div's label element |
+| `mdl-input__expandable-holder` | Defines a container as an MDL component | For expandable input fields, required on "inner" div element |
+| `is-invalid` | Defines the textfield as invalid on initial load. | Optional on `mdl-textfield` element |
+
+(1) The "search" icon is used here as an example. Other icons can be used by modifying the text. For a list of available icons, see [this page](https://www.google.com/design/icons).
+
+>**Note:** Disabled versions of each text field type are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-textfield mdl-js-textfield" type="text" disabled>`
+>This attribute may be added or removed programmatically via scripting.
diff --git a/node_modules/material-design-lite/src/textfield/_textfield.scss b/node_modules/material-design-lite/src/textfield/_textfield.scss
new file mode 100644
index 0000000..b2b1d60
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/_textfield.scss
@@ -0,0 +1,223 @@
+/**
+ * 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";
+
+// The container for the whole component.
+.mdl-textfield {
+ position: relative;
+ font-size: $input-text-font-size;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ max-width: 100%;
+ margin: 0;
+ padding: $input-text-vertical-spacing 0;
+
+ // Align buttons, if used.
+ & .mdl-button {
+ position: absolute;
+ bottom: $input-text-vertical-spacing;
+ }
+}
+
+// Optional class to align right.
+.mdl-textfield--align-right {
+ text-align: right;
+}
+
+// Optional class to display at full width.
+.mdl-textfield--full-width {
+ width: 100%;
+}
+
+// Optional class to make the text field expandable.
+.mdl-textfield--expandable {
+ min-width: $input-text-button-size;
+ width: auto;
+ min-height: $input-text-button-size;
+
+ // Align icon button
+ .mdl-button--icon {
+ top: $input-text-expandable-icon-top;
+ }
+}
+
+// Styling for the input element.
+.mdl-textfield__input {
+ border: none;
+ border-bottom: 1px solid $input-text-bottom-border-color;
+ display: block;
+ font-size: $input-text-font-size;
+ font-family: $performance_font;
+ margin: 0;
+ padding: $input-text-padding 0;
+ width: $input-text-width;
+ background: none;
+ text-align: left;
+ color: inherit;
+
+ &[type="number"] {
+ -moz-appearance: textfield;
+ }
+
+ &[type="number"]::-webkit-inner-spin-button,
+ &[type="number"]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ .mdl-textfield.is-focused & {
+ outline: none;
+ }
+
+ .mdl-textfield.is-invalid & {
+ border-color: $input-text-error-color;
+ box-shadow: none;
+ }
+
+ fieldset[disabled] .mdl-textfield &,
+ .mdl-textfield.is-disabled & {
+ background-color: transparent;
+ border-bottom: 1px dotted $input-text-disabled-color;
+ color: $input-text-disabled-text-color;
+ }
+}
+
+.mdl-textfield textarea.mdl-textfield__input {
+ display: block;
+}
+
+// Styling for the label / floating label.
+.mdl-textfield__label {
+ bottom: 0;
+ color: $input-text-label-color;
+ font-size: $input-text-font-size;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ position: absolute;
+ display: block;
+ top: ($input-text-padding + $input-text-vertical-spacing);
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
+
+ .mdl-textfield.is-dirty &,
+ .mdl-textfield.has-placeholder & {
+ visibility: hidden;
+ }
+
+ // Floating Label
+ .mdl-textfield--floating-label & {
+ @include material-animation-default();
+ }
+
+ .mdl-textfield--floating-label.has-placeholder & {
+ transition: none;
+ }
+
+ fieldset[disabled] .mdl-textfield &,
+ .mdl-textfield.is-disabled.is-disabled & {
+ color: $input-text-disabled-text-color;
+ }
+
+ .mdl-textfield--floating-label.is-focused &,
+ .mdl-textfield--floating-label.is-dirty &,
+ .mdl-textfield--floating-label.has-placeholder & {
+ color: $input-text-highlight-color;
+ font-size : $input-text-floating-label-fontsize;
+ top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
+ visibility: visible;
+ }
+
+ .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder &,
+ .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &,
+ .mdl-textfield--floating-label.has-placeholder .mdl-textfield__expandable-holder & {
+ top: -($input-text-floating-label-fontsize + $input-text-padding);
+ }
+
+ .mdl-textfield--floating-label.is-invalid & {
+ color: $input-text-error-color;
+ font-size: $input-text-floating-label-fontsize;
+ }
+
+ // The after label is the colored underline for the TextField.
+ &:after {
+ background-color: $input-text-highlight-color;
+ bottom: $input-text-vertical-spacing;
+ content: '';
+ height: 2px;
+ left: 45%;
+ position: absolute;
+ @include material-animation-default();
+ visibility: hidden;
+ width: 10px;
+ }
+
+ .mdl-textfield.is-focused &:after {
+ left: 0;
+ visibility: visible;
+ width: 100%;
+ }
+
+ .mdl-textfield.is-invalid &:after {
+ background-color: $input-text-error-color;
+ }
+}
+
+// TextField Error.
+.mdl-textfield__error {
+ color: $input-text-error-color;
+ position: absolute;
+ font-size: $input-text-floating-label-fontsize;
+ margin-top: 3px;
+ visibility: hidden;
+ display: block;
+
+ .mdl-textfield.is-invalid & {
+ visibility: visible;
+ }
+}
+
+// Expandable Holder.
+.mdl-textfield__expandable-holder {
+ display: inline-block;
+ position: relative;
+ margin-left: $input-text-button-size;
+
+ @include material-animation-default();
+ display: inline-block;
+
+ // Safari (possibly others) need to be convinced that this field is actually
+ // visible, otherwise it cannot be tabbed to nor focused via a <label>.
+ // TODO: In some cases (Retina displays), this is big enough to render the
+ // inner element :(
+ max-width: 0.1px;
+
+ .mdl-textfield.is-focused &, .mdl-textfield.is-dirty & {
+ // This is an unfortunate hack. Animating between widths in percent (%)
+ // in many browsers (Chrome, Firefox) only animates the inner visual style
+ // of the input - the outer bounding box still 'jumps'.
+ // Thus assume a sensible maximum, and animate to/from that value.
+ max-width: 600px;
+ }
+ .mdl-textfield__label:after {
+ bottom: 0;
+ }
+}
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-expanding-demo.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-expanding-demo.html
new file mode 100644
index 0000000..02c49b1
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-expanding-demo.html
@@ -0,0 +1,7 @@
+<style>
+ .demo-textfield__textfield-expanding .mdl-textfield {
+ width: 100px;
+ }
+</style>
+
+{% include "textfield-expanding.html" %}
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-expanding.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-expanding.html
new file mode 100644
index 0000000..53453e4
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-expanding.html
@@ -0,0 +1,12 @@
+<!-- Expandable Textfield -->
+<form action="#">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
+ <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" id="sample6">
+ <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
+ </div>
+ </div>
+</form>
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-numeric-demo.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-numeric-demo.html
new file mode 100644
index 0000000..38676e6
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-numeric-demo.html
@@ -0,0 +1,7 @@
+<style>
+ .demo-textfield__textfield-floating-numeric .mdl-textfield {
+ width: 100px;
+ }
+</style>
+
+{% include "textfield-floating-numeric.html" %}
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-numeric.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-numeric.html
new file mode 100644
index 0000000..a08e55a
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-numeric.html
@@ -0,0 +1,8 @@
+<!-- Numeric Textfield with Floating Label -->
+<form action="#">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
+ <label class="mdl-textfield__label" for="sample4">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+</form>
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-text-demo.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-text-demo.html
new file mode 100644
index 0000000..b85cadf
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-text-demo.html
@@ -0,0 +1,7 @@
+<style>
+ .demo-textfield__textfield-floating-text .mdl-textfield {
+ width: 100px;
+ }
+</style>
+
+{% include "textfield-floating-text.html" %}
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-text.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-text.html
new file mode 100644
index 0000000..c2708b9
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-floating-text.html
@@ -0,0 +1,8 @@
+<!-- Textfield with Floating Label -->
+
+<form action="#">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" id="sample3">
+ <label class="mdl-textfield__label" for="sample3">Text...</label>
+ </div>
+</form>
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-multi-line-demo.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-multi-line-demo.html
new file mode 100644
index 0000000..2771004
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-multi-line-demo.html
@@ -0,0 +1,7 @@
+<style>
+ .demo-textfield__textfield-multi-line .mdl-textfield {
+ width: 100px;
+ }
+</style>
+
+{% include "textfield-multi-line.html" %}
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-multi-line.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-multi-line.html
new file mode 100644
index 0000000..97acdfb
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-multi-line.html
@@ -0,0 +1,7 @@
+<!-- Floating Multiline Textfield -->
+<form action="#">
+ <div class="mdl-textfield mdl-js-textfield">
+ <textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
+ <label class="mdl-textfield__label" for="sample5">Text lines...</label>
+ </div>
+</form>
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-numeric-demo.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-numeric-demo.html
new file mode 100644
index 0000000..b66bedb
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-numeric-demo.html
@@ -0,0 +1,7 @@
+<style>
+ .demo-textfield__textfield-numeric .mdl-textfield {
+ width: 100px;
+ }
+</style>
+
+{% include "textfield-numeric.html" %}
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-numeric.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-numeric.html
new file mode 100644
index 0000000..2c87b7e
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-numeric.html
@@ -0,0 +1,8 @@
+<!-- Numeric Textfield -->
+<form action="#">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
+ <label class="mdl-textfield__label" for="sample2">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+</form>
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-text-demo.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-text-demo.html
new file mode 100644
index 0000000..da0ccd7
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-text-demo.html
@@ -0,0 +1,7 @@
+<style>
+ .demo-textfield__textfield-text .mdl-textfield {
+ width: 100px;
+ }
+</style>
+
+{% include "textfield-text.html" %}
diff --git a/node_modules/material-design-lite/src/textfield/snippets/textfield-text.html b/node_modules/material-design-lite/src/textfield/snippets/textfield-text.html
new file mode 100644
index 0000000..e93667e
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/snippets/textfield-text.html
@@ -0,0 +1,7 @@
+<!-- Simple Textfield -->
+<form action="#">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" id="sample1">
+ <label class="mdl-textfield__label" for="sample1">Text...</label>
+ </div>
+</form>
diff --git a/node_modules/material-design-lite/src/textfield/textfield.js b/node_modules/material-design-lite/src/textfield/textfield.js
new file mode 100644
index 0000000..23883f3
--- /dev/null
+++ b/node_modules/material-design-lite/src/textfield/textfield.js
@@ -0,0 +1,284 @@
+/**
+ * @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 Textfield 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 MaterialTextfield = function MaterialTextfield(element) {
+ this.element_ = element;
+ this.maxRows = this.Constant_.NO_MAX_ROWS;
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialTextfield'] = MaterialTextfield;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string | number}
+ * @private
+ */
+ MaterialTextfield.prototype.Constant_ = {
+ NO_MAX_ROWS: -1,
+ MAX_ROWS_ATTRIBUTE: 'maxrows'
+ };
+
+ /**
+ * 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
+ */
+ MaterialTextfield.prototype.CssClasses_ = {
+ LABEL: 'mdl-textfield__label',
+ INPUT: 'mdl-textfield__input',
+ IS_DIRTY: 'is-dirty',
+ IS_FOCUSED: 'is-focused',
+ IS_DISABLED: 'is-disabled',
+ IS_INVALID: 'is-invalid',
+ IS_UPGRADED: 'is-upgraded',
+ HAS_PLACEHOLDER: 'has-placeholder'
+ };
+
+ /**
+ * Handle input being entered.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialTextfield.prototype.onKeyDown_ = function(event) {
+ var currentRowCount = event.target.value.split('\n').length;
+ if (event.keyCode === 13) {
+ if (currentRowCount >= this.maxRows) {
+ event.preventDefault();
+ }
+ }
+ };
+
+ /**
+ * Handle focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialTextfield.prototype.onFocus_ = function(event) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+ };
+
+ /**
+ * Handle lost focus.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialTextfield.prototype.onBlur_ = function(event) {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+ };
+
+ /**
+ * Handle reset event from out side.
+ *
+ * @param {Event} event The event that fired.
+ * @private
+ */
+ MaterialTextfield.prototype.onReset_ = function(event) {
+ this.updateClasses_();
+ };
+
+ /**
+ * Handle class updates.
+ *
+ * @private
+ */
+ MaterialTextfield.prototype.updateClasses_ = function() {
+ this.checkDisabled();
+ this.checkValidity();
+ this.checkDirty();
+ this.checkFocus();
+ };
+
+ // Public methods.
+
+ /**
+ * Check the disabled state and update field accordingly.
+ *
+ * @public
+ */
+ MaterialTextfield.prototype.checkDisabled = function() {
+ if (this.input_.disabled) {
+ this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+ }
+ };
+ MaterialTextfield.prototype['checkDisabled'] =
+ MaterialTextfield.prototype.checkDisabled;
+
+ /**
+ * Check the focus state and update field accordingly.
+ *
+ * @public
+ */
+ MaterialTextfield.prototype.checkFocus = function() {
+ if (Boolean(this.element_.querySelector(':focus'))) {
+ this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+ }
+ };
+ MaterialTextfield.prototype['checkFocus'] =
+ MaterialTextfield.prototype.checkFocus;
+
+ /**
+ * Check the validity state and update field accordingly.
+ *
+ * @public
+ */
+ MaterialTextfield.prototype.checkValidity = function() {
+ if (this.input_.validity) {
+ if (this.input_.validity.valid) {
+ this.element_.classList.remove(this.CssClasses_.IS_INVALID);
+ } else {
+ this.element_.classList.add(this.CssClasses_.IS_INVALID);
+ }
+ }
+ };
+ MaterialTextfield.prototype['checkValidity'] =
+ MaterialTextfield.prototype.checkValidity;
+
+ /**
+ * Check the dirty state and update field accordingly.
+ *
+ * @public
+ */
+ MaterialTextfield.prototype.checkDirty = function() {
+ if (this.input_.value && this.input_.value.length > 0) {
+ this.element_.classList.add(this.CssClasses_.IS_DIRTY);
+ } else {
+ this.element_.classList.remove(this.CssClasses_.IS_DIRTY);
+ }
+ };
+ MaterialTextfield.prototype['checkDirty'] =
+ MaterialTextfield.prototype.checkDirty;
+
+ /**
+ * Disable text field.
+ *
+ * @public
+ */
+ MaterialTextfield.prototype.disable = function() {
+ this.input_.disabled = true;
+ this.updateClasses_();
+ };
+ MaterialTextfield.prototype['disable'] = MaterialTextfield.prototype.disable;
+
+ /**
+ * Enable text field.
+ *
+ * @public
+ */
+ MaterialTextfield.prototype.enable = function() {
+ this.input_.disabled = false;
+ this.updateClasses_();
+ };
+ MaterialTextfield.prototype['enable'] = MaterialTextfield.prototype.enable;
+
+ /**
+ * Update text field value.
+ *
+ * @param {string} value The value to which to set the control (optional).
+ * @public
+ */
+ MaterialTextfield.prototype.change = function(value) {
+
+ this.input_.value = value || '';
+ this.updateClasses_();
+ };
+ MaterialTextfield.prototype['change'] = MaterialTextfield.prototype.change;
+
+ /**
+ * Initialize element.
+ */
+ MaterialTextfield.prototype.init = function() {
+
+ if (this.element_) {
+ this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);
+ this.input_ = this.element_.querySelector('.' + this.CssClasses_.INPUT);
+
+ if (this.input_) {
+ if (this.input_.hasAttribute(
+ /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE))) {
+ this.maxRows = parseInt(this.input_.getAttribute(
+ /** @type {string} */ (this.Constant_.MAX_ROWS_ATTRIBUTE)), 10);
+ if (isNaN(this.maxRows)) {
+ this.maxRows = this.Constant_.NO_MAX_ROWS;
+ }
+ }
+
+ if (this.input_.hasAttribute('placeholder')) {
+ this.element_.classList.add(this.CssClasses_.HAS_PLACEHOLDER);
+ }
+
+ this.boundUpdateClassesHandler = this.updateClasses_.bind(this);
+ this.boundFocusHandler = this.onFocus_.bind(this);
+ this.boundBlurHandler = this.onBlur_.bind(this);
+ this.boundResetHandler = this.onReset_.bind(this);
+ this.input_.addEventListener('input', this.boundUpdateClassesHandler);
+ this.input_.addEventListener('focus', this.boundFocusHandler);
+ this.input_.addEventListener('blur', this.boundBlurHandler);
+ this.input_.addEventListener('reset', this.boundResetHandler);
+
+ if (this.maxRows !== this.Constant_.NO_MAX_ROWS) {
+ // TODO: This should handle pasting multi line text.
+ // Currently doesn't.
+ this.boundKeyDownHandler = this.onKeyDown_.bind(this);
+ this.input_.addEventListener('keydown', this.boundKeyDownHandler);
+ }
+ var invalid = this.element_.classList
+ .contains(this.CssClasses_.IS_INVALID);
+ this.updateClasses_();
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ if (invalid) {
+ this.element_.classList.add(this.CssClasses_.IS_INVALID);
+ }
+ if (this.input_.hasAttribute('autofocus')) {
+ this.element_.focus();
+ this.checkFocus();
+ }
+ }
+ }
+ };
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ componentHandler.register({
+ constructor: MaterialTextfield,
+ classAsString: 'MaterialTextfield',
+ cssClass: 'mdl-js-textfield',
+ widget: true
+ });
+})();