@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/textfield.js

@@ -0,0 +1,254 @@
+import * as TextField from '../../components/textfield/index.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @return {void} */
+function initializeSampleComponents() {
+  iterateArrayLike(document.querySelectorAll('.js .mdw-textfield'), TextField.attach);
+}
+
+/** @type {HTMLElement} */
+let sampleComponent;
+
+/** @return {void} */
+function updateSampleCode() {
+  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
+  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
+  const useAutoSize = document.querySelector('input[name="autosize"]').checked;
+  const isTextArea = document.querySelector('input[name="field-type"][value="text-area"]').checked;
+  const useJS = jsRequired || jsOptional;
+  if (useAutoSize && useJS && isTextArea) {
+    sampleComponent.setAttribute('mdw-autosize', '');
+  } else {
+    sampleComponent.removeAttribute('mdw-autosize');
+  }
+  // Remove resize values
+  sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('style');
+
+  // Strip JS related elements and attributes
+  TextField.detach(sampleComponent);
+
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  htmlCodeElement.textContent = convertElementToCode(sampleComponent);
+
+  // Reattach JS if requested
+  if (useJS) {
+    TextField.attach(sampleComponent);
+  }
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = 'mdw.TextField.attach(element);';
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const { name, value, checked } = event.target;
+  let inputElement = sampleComponent.getElementsByClassName('mdw-textfield__input')[0];
+  let desiredTagName = inputElement.tagName.toLowerCase();
+  let helperText;
+  let errorText;
+  let prefixText;
+  let suffixText;
+  let signifierElement;
+  switch (name) {
+    case 'field-type':
+      switch (value) {
+        default:
+        case 'single-type':
+          sampleComponent.removeAttribute('mdw-autosize');
+          desiredTagName = 'input';
+          break;
+        case 'text-area':
+          desiredTagName = 'textarea';
+          break;
+        case 'dropdown':
+          sampleComponent.removeAttribute('mdw-autosize');
+          desiredTagName = 'select';
+          break;
+      }
+      break;
+    case 'style':
+      switch (value) {
+        default:
+        case 'filled':
+          sampleComponent.removeAttribute('mdw-outlined');
+          sampleComponent.removeAttribute('mdw-solo');
+          break;
+        case 'outlined':
+          sampleComponent.setAttribute('mdw-outlined', '');
+          sampleComponent.removeAttribute('mdw-solo');
+          break;
+        case 'solo':
+          sampleComponent.removeAttribute('mdw-outlined');
+          sampleComponent.setAttribute('mdw-solo', '');
+          break;
+      }
+      break;
+    case 'box':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-box', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-box');
+      }
+      break;
+    case 'outlined':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-outlined', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-outlined');
+      }
+      break;
+    case 'disabled':
+      if (checked) {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('disabled', '');
+      } else {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('disabled');
+      }
+      break;
+    case '4minlength':
+      if (checked) {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('minlength', '4');
+      } else {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('minlength');
+      }
+      break;
+    case 'required':
+      if (checked) {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].setAttribute('required', '');
+      } else {
+        sampleComponent.getElementsByClassName('mdw-textfield__input')[0].removeAttribute('required');
+      }
+      break;
+    case 'prefix':
+      prefixText = sampleComponent.getElementsByClassName('mdw-textfield__prefix')[0];
+      if (checked) {
+        if (!prefixText) {
+          prefixText = document.createElement('div');
+          prefixText.classList.add('mdw-textfield__prefix');
+          prefixText.textContent = '$';
+          sampleComponent.appendChild(prefixText);
+        }
+      } else if (prefixText) {
+        prefixText.parentElement.removeChild(prefixText);
+      }
+      break;
+    case 'suffix':
+      suffixText = sampleComponent.getElementsByClassName('mdw-textfield__suffix')[0];
+      if (checked) {
+        if (!suffixText) {
+          suffixText = document.createElement('div');
+          suffixText.classList.add('mdw-textfield__suffix');
+          suffixText.textContent = 'lbs';
+          sampleComponent.appendChild(suffixText);
+        }
+      } else if (suffixText) {
+        suffixText.parentElement.removeChild(suffixText);
+      }
+      break;
+    case 'signifier':
+      signifierElement = sampleComponent.getElementsByClassName('mdw-textfield__signifier')[0];
+      if (checked) {
+        if (!signifierElement) {
+          signifierElement = document.createElement('div');
+          signifierElement.classList.add('mdw-textfield__signifier');
+          signifierElement.classList.add('material-icons');
+          signifierElement.textContent = 'security';
+          if (inputElement.nextElementSibling) {
+            sampleComponent.insertBefore(signifierElement, inputElement.nextElementSibling);
+          } else {
+            sampleComponent.appendChild(signifierElement);
+          }
+        }
+      } else if (signifierElement) {
+        signifierElement.parentElement.removeChild(signifierElement);
+      }
+      break;
+    case 'helper-text':
+      helperText = sampleComponent.getElementsByClassName('mdw-textfield__helper-text')[0];
+      if (checked) {
+        if (!helperText) {
+          helperText = document.createElement('div');
+          helperText.classList.add('mdw-textfield__helper-text');
+          helperText.textContent = 'Helper text.';
+          sampleComponent.appendChild(helperText);
+        }
+      } else if (helperText) {
+        helperText.parentElement.removeChild(helperText);
+      }
+      break;
+    case 'error-text':
+      errorText = sampleComponent.getElementsByClassName('mdw-textfield__error-text')[0];
+      if (checked) {
+        if (!errorText) {
+          errorText = document.createElement('div');
+          errorText.classList.add('mdw-textfield__error-text');
+          errorText.textContent = 'Error text.';
+          sampleComponent.appendChild(errorText);
+        }
+      } else if (errorText) {
+        errorText.parentElement.removeChild(errorText);
+      }
+      break;
+    case 'ink':
+      switch (value) {
+        case 'none':
+          sampleComponent.removeAttribute('mdw-ink');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-ink', value);
+          break;
+      }
+      break;
+    default:
+  }
+
+  if (inputElement.tagName.toLowerCase() !== desiredTagName) {
+    const newElement = document.createElement(desiredTagName);
+    for (let i = inputElement.attributes.length - 1; i >= 0; i -= 1) {
+      const attr = inputElement.attributes.item(i);
+      newElement.attributes.setNamedItem(attr.cloneNode());
+    }
+    inputElement.parentElement.replaceChild(newElement, inputElement);
+    inputElement = newElement;
+    let dropdown = sampleComponent.getElementsByClassName('mdw-textfield__icon')[0];
+    if (desiredTagName === 'select') {
+      const option1 = document.createElement('option');
+      option1.setAttribute('value', '');
+      option1.textContent = 'Empty';
+      const option2 = document.createElement('option');
+      option2.setAttribute('value', 'option1');
+      option2.textContent = 'Option 1';
+      const option3 = document.createElement('option');
+      option3.setAttribute('value', 'option2');
+      option3.textContent = 'Option 2';
+      inputElement.appendChild(option1);
+      inputElement.appendChild(option2);
+      inputElement.appendChild(option3);
+      if (!dropdown) {
+        dropdown = document.createElement('div');
+        dropdown.classList.add('mdw-textfield__icon');
+        dropdown.setAttribute('mdw-dropdown', '');
+        sampleComponent.appendChild(dropdown);
+      }
+    } else if (dropdown) {
+      dropdown.parentElement.removeChild(dropdown);
+    }
+  }
+  inputElement.removeAttribute('rows');
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.component-sample .mdw-textfield');
+  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+updateSampleCode();

package/docs/pages/textfield.pug

@@ -0,0 +1,360 @@
+include ../_mixins.pug
+
++header("textfield")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      h5.mdw-type(mdw-baseline-next="36") Text fields allow users to input, edit, and select text.
+      p.mdw-type Text fields typically reside in forms but can appear in other places, like dialog boxes and search.
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content
+        .component-sample
+          .component-sample__container
+            label.mdw-textfield.mdw-theme(mdw-ink="primary")
+              input.mdw-textfield__input(placeholder="Placeholder")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Label
+    .mdw-grid__item(mdw-colspan="8")
+      .mdw-type(mdw-style="subtitle") Javascript
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) Required
+        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true}) Optional
+        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none'}) None
+      .mdw-type(mdw-style="subtitle") Field type
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'field-type', type:'radio', value:'single-line', checked:true}) Single-line
+        +mdwSelection({ink:'secondary', name:'field-type', type:'radio', value:'text-area'}) Text area
+        +mdwSelection({ink:'secondary', name:'field-type', type:'radio', value:'dropdown'}) Dropdown
+      .mdw-type(mdw-style="subtitle") Style
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'style', type:'radio', value:'filled', checked:true}) Filled
+        +mdwSelection({ink:'secondary', name:'style', type:'radio', value:'outlined'}) Outlined
+        +mdwSelection({ink:'secondary', name:'style', type:'radio', value:'solo'}) Solo
+      .mdw-type(mdw-style="subtitle") Options
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'signifier'}) Signifier
+        +mdwSelection({ink:'secondary', name:'prefix'}) Prefix
+        +mdwSelection({ink:'secondary', name:'suffix'}) Suffix
+        +mdwSelection({ink:'secondary', name:'helper-text'}) Helper Text
+        +mdwSelection({ink:'secondary', name:'error-text'}) Error Text
+      .mdw-type(mdw-style="subtitle") Ink
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'none'}) Default
+        +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'primary', checked:true}) Primary
+        +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'secondary'}) Secondary
+        +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'green'}) Green
+      .mdw-type(mdw-style="subtitle") Attributes
+      .docs-option-list
+        +mdwSelection({ink:'secondary', name:'autosize', checked:true}) Autosize
+        +mdwSelection({ink:'secondary', name:'disabled'}) Disabled
+        +mdwSelection({ink:'secondary', name:'4minlength'}) 4 Min Length
+        +mdwSelection({ink:'secondary', name:'required'}) Required
+    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
+    .mdw-grid__item(mdw-colspan="6")
+      h6.mdw-type HTML Code
+      .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="6")
+      h6.mdw-type Javascript Code
+      .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="100%")
+      h6.mdw-type Samples
+    .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
+      .render-fill
+        +androidstatusbar('primary 700', 'dark')
+        +appbar('primary 500', 'dark', ['arrow_back'], ['more_vert']) Application
+        .content(style="padding:0px 16px")
+          label.mdw-textfield.mdw-type.mdw-theme(mdw-ink="primary" mdw-style="h4")
+            input.mdw-textfield__input(value="Vintage 50" placeholder=" ")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Title
+          .horizontal-controls
+            label.mdw-textfield.mdw-theme(mdw-ink="primary" style="width:88px")
+              input.mdw-textfield__input(type="text" placeholder=" ")
+              .mdw-textfield__prefix $
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Price
+            label.mdw-textfield.flex-1.mdw-theme(mdw-ink="primary")
+              input.mdw-textfield__input(type="text" placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Location (optional)
+          +mdwTextField({ink:'primary', placeholder:'text'}) Description
+          +mdwTextField({ink:'primary', placeholder:'••••••••', required:true, minlength:8,
+          signifier:'security', signifierClass:'material-icons', type:'password',
+          helperText: 'At least 8 characters', errorText: 'Error: Password of at least 8 characters required.'})
+            | Password text field with signifier and overflowing label *
+          +mdwTextField({ink:'primary', disabled:true, value:'filled', suffix:'lbs', helperText:'Disabled Helper Text'}) Disabled Filled with Suffix
+        +androidnavbar
+    .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
+      .render-fill
+        +androidstatusbar('secondary 300', 'light')
+        +appbar('secondary 100', 'light', ['arrow_back'], ['search']) Auto-fill styling
+        form.content(style="padding:0px 16px")
+          +mdwTextField({ink:'secondary', required:true})(name="name") Name *
+          +mdwTextField({ink:'secondary'})(name="address") Address
+          +mdwTextField({ink:'secondary'})(name="city") City
+          .horizontal-controls
+            label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:88px;")
+              select.mdw-textfield__input(name="state")
+                option.mdw-theme(mdw-surface="card" value="") --
+                option.mdw-theme(mdw-surface="card" value="AL") AL
+                option.mdw-theme(mdw-surface="card" value="AK") AK
+                option.mdw-theme(mdw-surface="card" value="AZ") AZ
+                option.mdw-theme(mdw-surface="card" value="AR") AR
+                option.mdw-theme(mdw-surface="card" value="CA") CA
+                option.mdw-theme(mdw-surface="card" value="CO") CO
+                option.mdw-theme(mdw-surface="card" value="CT") CT
+                option.mdw-theme(mdw-surface="card" value="DE") DE
+                option.mdw-theme(mdw-surface="card" value="FL") FL
+                option.mdw-theme(mdw-surface="card" value="GA") GA
+                option.mdw-theme(mdw-surface="card" value="HI") HI
+                option.mdw-theme(mdw-surface="card" value="ID") ID
+                option.mdw-theme(mdw-surface="card" value="IL") IL
+                option.mdw-theme(mdw-surface="card" value="IN") IN
+                option.mdw-theme(mdw-surface="card" value="IA") IA
+                option.mdw-theme(mdw-surface="card" value="KS") KS
+                option.mdw-theme(mdw-surface="card" value="KY") KY
+                option.mdw-theme(mdw-surface="card" value="LA") LA
+                option.mdw-theme(mdw-surface="card" value="ME") ME
+                option.mdw-theme(mdw-surface="card" value="MD") MD
+                option.mdw-theme(mdw-surface="card" value="MA") MA
+                option.mdw-theme(mdw-surface="card" value="MI") MI
+                option.mdw-theme(mdw-surface="card" value="MN") MN
+                option.mdw-theme(mdw-surface="card" value="MS") MS
+                option.mdw-theme(mdw-surface="card" value="MO") MO
+                option.mdw-theme(mdw-surface="card" value="MT") MT
+                option.mdw-theme(mdw-surface="card" value="NE") NE
+                option.mdw-theme(mdw-surface="card" value="NV") NV
+                option.mdw-theme(mdw-surface="card" value="NH") NH
+                option.mdw-theme(mdw-surface="card" value="NJ") NJ
+                option.mdw-theme(mdw-surface="card" value="NM") NM
+                option.mdw-theme(mdw-surface="card" value="NY") NY
+                option.mdw-theme(mdw-surface="card" value="NC") NC
+                option.mdw-theme(mdw-surface="card" value="ND") ND
+                option.mdw-theme(mdw-surface="card" value="OH") OH
+                option.mdw-theme(mdw-surface="card" value="OK") OK
+                option.mdw-theme(mdw-surface="card" value="OR") OR
+                option.mdw-theme(mdw-surface="card" value="PA") PA
+                option.mdw-theme(mdw-surface="card" value="RI") RI
+                option.mdw-theme(mdw-surface="card" value="SC") SC
+                option.mdw-theme(mdw-surface="card" value="SD") SD
+                option.mdw-theme(mdw-surface="card" value="TN") TN
+                option.mdw-theme(mdw-surface="card" value="TX") TX
+                option.mdw-theme(mdw-surface="card" value="UT") UT
+                option.mdw-theme(mdw-surface="card" value="VT") VT
+                option.mdw-theme(mdw-surface="card" value="VA") VA
+                option.mdw-theme(mdw-surface="card" value="WA") WA
+                option.mdw-theme(mdw-surface="card" value="WV") WV
+                option.mdw-theme(mdw-surface="card" value="WI") WI
+                option.mdw-theme(mdw-surface="card" value="WY") WY
+              .mdw-textfield__icon(mdw-dropdown)
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label State
+            label.mdw-textfield.flex-1.mdw-theme(mdw-ink="primary")
+              input.mdw-textfield__input(type="text" placeholder=" " name="zip" required)
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Zip code *
+          +mdwTextField({ink:'secondary'})(name="phone") Phone number
+          p.mdw-type * Required fields
+        +androidnavbar
+
+    .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
+      .render-fill
+        +androidstatusbar('secondary 800', 'dark')
+        +appbar('secondary 700', 'dark', ['arrow_back'], ['search'])
+        form.content(style="padding:8px 16px")
+          .display-flex(style="margin-bottom:-32px;margin-top:-24px;" flex-justify-content="center")
+            i.material-icons(style="color:#ccc;font-size:256px") person
+          .horizontal-controls
+            label.mdw-textfield.flex-1.mdw-theme(mdw-ink="secondary")
+              .mdw-textfield__signifier.material-icons person
+              input.mdw-textfield__input(type="text" placeholder=" " value="Ali Connors")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Name
+          .horizontal-controls
+            +mdwTextField({ink:'secondary', value:'65', type:'phone', signifier:'phone', signifierClass:'material-icons'})
+              | Phone number
+            label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px;")
+              select.mdw-textfield__input(type="phone")
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="Mobile") Mobile
+                option.mdw-theme(mdw-surface="card" value="Home") Home
+                option.mdw-theme(mdw-surface="card" value="Work") Work
+              .mdw-textfield__icon(mdw-dropdown)
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Phone Type
+          .horizontal-controls
+            +mdwTextField({ink:'secondary', type:'email', signifier:'email', signifierClass:'material-icons'}) Email
+            label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px;")
+              select.mdw-textfield__input(type="phone")
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="Personal") Personal
+                option.mdw-theme(mdw-surface="card" value="Business") Business
+              .mdw-textfield__icon(mdw-dropdown)
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Email type
+          .horizontal-controls
+            +mdwTextField({ink:'secondary', type:'address', signifier:'place', signifierClass:'material-icons'}) Address
+            label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px")
+              select.mdw-textfield__input(type="phone")
+                option.mdw-theme(mdw-surface="card" value="Home") Home
+                option.mdw-theme(mdw-surface="card" value="Work") Work
+              .mdw-textfield__icon(mdw-dropdown)
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Address type
+        +androidnavbar
+    .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
+      .render-fill
+        +androidstatusbar('primary 700', 'dark')
+        +appbar('primary 500', 'dark', ['arrow_back'], ['done'])
+        .content(style="padding:8px 16px")
+          +mdwTextField({ink:'primary', value:"Vintage 50's Dress", outlined:true, helperText:'Helper'}) Title
+          .horizontal-controls
+            label.mdw-textfield.mdw-theme(mdw-ink="primary" mdw-outlined style="width:88px")
+              input.mdw-textfield__input(value="10.00" placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Price
+              .mdw-textfield__prefix $
+              .mdw-textfield__helper-text Helper
+            label.mdw-textfield.flex-1.mdw-theme(mdw-ink="primary" mdw-outlined)
+              input.mdw-textfield__input(value="Hanover" placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Location (optional)
+              .mdw-textfield__helper-text Helper
+          label.mdw-textfield.mdw-theme(mdw-ink="primary" mdw-outlined)
+            textarea.mdw-textfield__input(placeholder=" " rows=3)
+              | Unique and rare dress from 1952. Made out of washed cotton with front pockets. Sleeveless with button closures.
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Description
+          label.mdw-textfield.mdw-theme(mdw-ink="primary" mdw-outlined)
+            .mdw-textfield__signifier.material-icons security
+            input.mdw-textfield__input(type="password" placeholder="••••••••" required minlength="8")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Password text field with signifier and overflowing label *
+            .mdw-textfield__helper-text At least 8 characters
+            .mdw-textfield__error-text Error: Password of at least 8 characters required.
+          label.mdw-textfield.mdw-theme(mdw-ink="primary" mdw-outlined style="max-width:150px")
+            input.mdw-textfield__input(type="text" placeholder=" " disabled value="filled")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Disabled Filled with Suffix
+            .mdw-textfield__suffix lbs
+            .mdw-textfield__helper-text Disabled Helper Text
+        +androidnavbar
+    .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
+      .render-fill
+        +androidstatusbar('amber 600', 'dark')
+        +appbar('amber 400', 'dark', ['arrow_back'], ['done'])
+        .content(style="padding:0 16px")
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
+            input.mdw-textfield__input(placeholder=" ")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Name
+            .mdw-textfield__error-text spacer
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
+            textarea.mdw-textfield__input(placeholder=" " rows="5")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Message
+          label.mdw-textfield.mdw-theme(mdw-ink="deeppurple" mdw-outlined)
+            textarea.mdw-textfield__input(placeholder=" " rows="5")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Message
+        +androidnavbar
+    .mdw-grid__item(mdw-colspan="4" flex-justify-content="center")
+      .render-fill
+        +androidstatusbar('amber 700', 'dark')
+        +appbar('amber 400', 'dark', ['arrow_back'], ['done'])
+        .content(style="padding:0 16px")
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
+            input.mdw-textfield__input(placeholder=" ")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Name
+            .mdw-textfield__error-text spacer
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
+            textarea.mdw-textfield__input(placeholder=" " rows="5" required)
+              | Just wanted to let you kn
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Message *
+            .mdw-textfield__helper-text Helper text.
+            .mdw-textfield__error-text Error: Required.
+          label.mdw-textfield.mdw-theme(mdw-ink="amber")
+            textarea.mdw-textfield__input(placeholder=" " rows="5" disabled)
+              | This textarea is disabled.
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Message *
+            .mdw-textfield__helper-text Helper text.
+            .mdw-textfield__error-text Error: Required.
+        +androidnavbar
+
+    .mdw-grid__item(mdw-colspan="4").js
+      .render-fill
+        +androidstatusbar('primary 700', 'dark')
+        +appbar('primary 500', 'dark', ['arrow_back'], ['done']) With Javascript
+        .content(style="padding:8px 16px")
+          label.mdw-textfield.mdw-theme(mdw-ink="primary" mdw-outlined)
+            input.mdw-textfield__input(placeholder=" ")
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Title
+            .mdw-textfield__helper-text Helper
+          .horizontal-controls
+            label.mdw-textfield.mdw-theme(mdw-ink="primary" style="width:88px")
+              input.mdw-textfield__input(value="10.00" placeholder=" ")
+              .mdw-textfield__prefix $
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Price
+              .mdw-textfield__helper-text Helper
+            label.mdw-textfield.flex-1.mdw-theme(mdw-ink="primary")
+              input.mdw-textfield__input(placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Location (optional)
+              .mdw-textfield__helper-text Helper
+          label.mdw-textfield.mdw-theme(mdw-ink="primary" mdw-autosize)
+            textarea.mdw-textfield__input(placeholder=" " rows=4)
+              | Unique and rare dress from 1952. Made out of washed cotton with front pockets. Sleeveless with button closures.
+              | (Erase Me)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Description
+          .horizontal-controls
+            label.mdw-textfield.mdw-theme(mdw-ink="secondary")
+              input.mdw-textfield__input(type="phone" placeholder=" " value="65")
+              .mdw-textfield__signifier.material-icons phone
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Name
+            label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="width:150px")
+              select.mdw-textfield__input(type="phone")
+                option.mdw-theme(mdw-surface="card" value="") Unknown
+                option.mdw-theme(mdw-surface="card" value="Mobile") Mobile
+                option.mdw-theme(mdw-surface="card" value="Home") Home
+                option.mdw-theme(mdw-surface="card" value="Work") Work
+              .mdw-textfield__icon(mdw-dropdown)
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Phone Type
+        +androidnavbar
+    .mdw-grid__item(mdw-colspan="4")
+    .mdw-grid__item(mdw-colspan="4")
+  script(src='textfield.min.js')