Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/formatfield/snippets/formatfield.html b/node_modules/mdl-ext/src/formatfield/snippets/formatfield.html
new file mode 100644
index 0000000..177a367
--- /dev/null
+++ b/node_modules/mdl-ext/src/formatfield/snippets/formatfield.html
@@ -0,0 +1,114 @@
+<p>The formatfield component formats an input field using
+ language sensitive number formatting. It acts as a "pluggable"
+ component. It can be added to a <code>mdl-textfield</code> component or to
+ a <code><input></code> element.
+</p>
+
+<style>
+ .mdl-data-table .mdl-textfield {
+ width: auto;
+ }
+</style>
+<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="margin-top: 16px;">
+<thead>
+<tr>
+ <th class="mdl-data-table__cell--non-numeric">Language</th>
+ <th class="mdl-data-table__cell--non-numeric">Input</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+ <td class="mdl-data-table__cell--non-numeric" id="browser-lang">Browser language</td>
+ <td class="mdl-data-table__cell--non-numeric">
+ <div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield" id="sample2-component">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9, ]*([\.,][0-9]+)?"
+ id="sample2-input" value="1234.5">
+ <label class="mdl-textfield__label" for="sample2-input">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ <div id="sample2-unformatted"></div>
+ </td>
+</tr>
+<tr>
+ <td class="mdl-data-table__cell--non-numeric">nb-NO</td>
+ <td class="mdl-data-table__cell--non-numeric">
+ <div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield"
+ data-formatfield-options="{'locales': 'nb-NO'}">
+
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9 ]*([\.,][0-9]+)?" value="1234.5">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </td>
+</tr>
+<tr>
+ <td class="mdl-data-table__cell--non-numeric">en-GB</td>
+ <td class="mdl-data-table__cell--non-numeric">
+ <div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield" data-formatfield-options="{'locales': 'en-GB'}">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="1234.5">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </td>
+</tr>
+<tr>
+ <td class="mdl-data-table__cell--non-numeric">nb-NO, integer</td>
+ <td class="mdl-data-table__cell--non-numeric">
+ <div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"
+ data-formatfield-options="{'locales': 'nb-NO', 'minimumFractionDigits': 0,'maximumFractionDigits': 0}" value="1234.5">
+
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </td>
+</tr>
+<tr>
+ <td class="mdl-data-table__cell--non-numeric">Percent. Input not supported</td>
+ <td class="mdl-data-table__cell--non-numeric">
+ <div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield">
+ <input class="mdl-textfield__input" type="text" readonly
+ data-formatfield-options="{'locales': 'en-GB', 'style': 'percent'}" value="0.20">
+ <label class="mdl-textfield__label">Number...</label>
+ </div>
+ </td>
+</tr>
+<tr>
+ <td class="mdl-data-table__cell--non-numeric">Currency. Input not supported</td>
+ <td class="mdl-data-table__cell--non-numeric">
+ <div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield">
+ <input class="mdl-textfield__input" type="text" readonly
+ data-formatfield-options="{'locales': 'nb-NO', 'style': 'currency', 'currency': 'NOK'}" value="1234.5">
+ <label class="mdl-textfield__label">Number...</label>
+ </div>
+ </td>
+</tr>
+<tr>
+ <td class="mdl-data-table__cell--non-numeric">Input</td>
+ <td class="mdl-data-table__cell--non-numeric">
+ <input class=" mdlext-js-formatfield" type="text"
+ data-formatfield-options="{'locales': 'nb-NO'}" value="1234.5">
+ </td>
+</tr>
+</tbody>
+</table>
+
+<script>
+ (function() {
+ 'use strict';
+ window.addEventListener('load', function() {
+ var lang = navigator.languages
+ ? navigator.languages[0]
+ : navigator.language || navigator.userLanguage;
+
+ document.querySelector('#browser-lang').innerText = 'Browser language (' + lang + ')';
+
+ var formatfieldComponent = document.querySelector('#sample2-component');
+ formatfieldComponent.querySelector('input').addEventListener('blur', function () {
+ var unformatted = document.querySelector('#sample2-unformatted');
+ unformatted.innerText = 'Unformatted: ' + formatfieldComponent.MaterialExtFormatfield.getUnformattedValue();
+ });
+ });
+ }());
+</script>
+