Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/selectfield/snippets/selectfield.html b/node_modules/mdl-ext/src/selectfield/snippets/selectfield.html
new file mode 100644
index 0000000..d9bc5cd
--- /dev/null
+++ b/node_modules/mdl-ext/src/selectfield/snippets/selectfield.html
@@ -0,0 +1,113 @@
+<p>The<a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/select" target="_blank">
+ HTML select</a> (<select>) element represents a control that presents a menu of options.
+ The options within the menu are represented by <option> elements, which can be grouped by
+ <optgroup> elements. Options can be pre-selected for the user.</p>
+
+<p>The Material Design Lite Ext (MDLEXT) <strong>select field</strong> component is an enhanced version of the standard
+ HTML <select> element. A select field consists of a horizontal line indicating where keyboard input
+ can occur and, typically, text that clearly communicates the intended contents of the select field.
+ An icon (at the right hand side) indicates that the select field has user selectable options.</p>
+
+<p><strong>Note: </strong>
+ The select field can for some browser and OS combinations, e.g. FireFox and OSX, be off by 2 pixels compared to the
+ input field. There is no way to fix this, as far as I know, without setting an explicit height on both field types.
+ Since MDL does not set a specific height of the text field, it can not be done for the select field either.
+ If alignment is required, the user must in his/hers design set a specific height both for textfields and selectfields.
+</p>
+
+<style scoped>
+ .selectelement-demo-container {
+ }
+ .selectelement-demo-container .mdl-cell {
+ padding: 0 4px 16px 0;
+ }
+ .selectelement-demo-container .mdl-cell p {
+ margin-bottom: 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+</style>
+
+<div class = "selectelement-demo-container">
+
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--3-col">
+ <p>Selectfield component</p>
+ <div class="mdlext-selectfield mdlext-js-selectfield">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--3-col">
+ <p>Textfield component</p>
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">... to check alignment</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--3-col">
+ <p>Selectfield component with floating label</p>
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--3-col">
+ <p>Disabled selectfield component</p>
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--3-col">
+ <p>Unstyled select element</p>
+ <select style="width: 100%;">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+ </select>
+ <label>Profession</label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--3-col">
+ <p>Unstyled input element</p>
+ <input type="text" style="width: 100%;">
+ <label>... to check alignment</label>
+ </div>
+
+ </div>
+</div>