@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/textfield.js

@@ -1,254 +0,0 @@
-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

@@ -1,360 +0,0 @@
-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')