@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/src/components/search.js

@@ -1,206 +0,0 @@
-import { setupMenuOptions } from '../menuoptions';
-import { List, ListItem } from '../../../components/list/index';
-import { TextField } from '../../../components/textfield/index';
-import { SearchAdapter } from '../../../adapters/search/index';
-
-/** @return {void} */
-function buildCustomSearch1() {
-  const textfield = document.getElementById('search-textfield-custom1');
-  const list = document.getElementById('search-list-custom1');
-  /** @type {HTMLElement} */
-  const busyIndicator = (textfield.getElementsByClassName('custom-busy-indicator')[0]);
-  /** @type {WeakMap<HTMLLIElement, Object>} */
-  const myListItemMap = new WeakMap();
-  let resultsCache;
-  let listUpdated = false;
-  const customPerformSearch = (input, resolve) => {
-    if (listUpdated) {
-      resolve();
-      return;
-    }
-    if (resultsCache != null) {
-      resolve(resultsCache);
-      return;
-    }
-    busyIndicator.style.setProperty('display', '');
-    const myData = [];
-    for (const key in window.navigator) {
-      myData.push({ line1: key, line2: navigator[key] });
-    }
-    setTimeout(() => {
-      resultsCache = myData;
-      resolve(myData);
-    }, 2000);
-  };
-  const customUpdateList = (items, resolve) => {
-    if (listUpdated) {
-      resolve();
-      return;
-    }
-    while (list.lastChild) {
-      list.removeChild(list.lastChild);
-    }
-    busyIndicator.style.setProperty('display', 'none');
-    const markup = `
-    <div class="mdw-list__text">
-      <div class="mdw-list__text-line"></div>
-      <div class="mdw-list__text-line"></div>
-    </div>
-    `.trim();
-    items.forEach((item) => {
-      const listItem = document.createElement('li');
-      listItem.classList.add('mdw-list__item');
-      listItem.innerHTML = markup;
-      const lines = listItem.querySelectorAll('.mdw-list__text-line');
-      lines[0].textContent = item.line1;
-      lines[1].textContent = item.line2;
-      myListItemMap.set(listItem, item);
-      ListItem.attach(listItem);
-      list.appendChild(listItem);
-    });
-    listUpdated = true;
-    resolve();
-  };
-
-  const searchDocsCustom = new SearchAdapter({
-    textfield,
-    list,
-    searchOnFocus: false,
-    dropdown: true,
-    textFilter: 'startsWith',
-    suggestionMethod: 'append',
-    performSearch: customPerformSearch,
-    updateList: customUpdateList,
-  });
-  searchDocsCustom.list.addEventListener('mdw:itemactivated', (event) => {
-    const el = /** @type {HTMLLIElement} */ (event.target);
-    const selectedItem = myListItemMap.get(el);
-    const text = `${selectedItem.line1}:${selectedItem.line2}`;
-    document.getElementById('search-result-custom1').textContent = text;
-  });
-}
-
-
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-function hideElement(element) {
-  element.style.setProperty('display', 'none');
-}
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-function showElement(element) {
-  element.style.setProperty('display', '');
-}
-
-/** @return {void} */
-function buildCustomSearch2() {
-  const textfield = document.getElementById('search-textfield-custom2');
-  const list = document.getElementById('search-list-custom2');
-  /** @type {HTMLElement} */
-  const busyIndicator = (textfield.getElementsByClassName('custom-busy-indicator')[0]);
-  /** @type {HTMLElement} */
-  const noResultsIndicator = (textfield.getElementsByClassName('custom-no-results-indicator')[0]);
-  /** @type {WeakMap<HTMLLIElement, Object>} */
-  const myListItemMap = new WeakMap();
-  const customPerformSearch = (searchTerm, resolve) => {
-    while (list.lastChild) {
-      list.removeChild(list.lastChild);
-    }
-    showElement(busyIndicator);
-    hideElement(noResultsIndicator);
-    const myData = [];
-    for (const key in window.navigator) {
-      const value = navigator[key] && navigator[key].toString();
-      if (key.indexOf(searchTerm) !== -1 || (value && value.indexOf(searchTerm) !== -1)) {
-        myData.push({ line1: key, line2: navigator[key] });
-      }
-    }
-    setTimeout(() => {
-      resolve(myData);
-    }, 1000);
-  };
-  const customUpdateList = (items, resolve) => {
-    hideElement(busyIndicator);
-    if (!items.length) {
-      showElement(noResultsIndicator);
-      resolve();
-      return;
-    }
-    const markup = `
-    <div class="mdw-list__text">
-      <div class="mdw-list__text-line"></div>
-      <div class="mdw-list__text-line"></div>
-    </div>
-    `.trim();
-    items.forEach((item) => {
-      const listItem = document.createElement('li');
-      listItem.classList.add('mdw-list__item');
-      listItem.innerHTML = markup;
-      const lines = listItem.querySelectorAll('.mdw-list__text-line');
-      lines[0].textContent = item.line1;
-      lines[1].textContent = item.line2;
-      myListItemMap.set(listItem, item);
-      ListItem.attach(listItem);
-      list.appendChild(listItem);
-    });
-    resolve();
-  };
-  const searchDocsCustom = new SearchAdapter({
-    textfield,
-    list,
-    debounce: 300,
-    dropdown: true,
-    filterItems: false,
-    performSearch: customPerformSearch,
-    updateList: customUpdateList,
-  });
-  searchDocsCustom.list.addEventListener('mdw:itemactivated', (event) => {
-    const selectedItem = myListItemMap.get(event.target);
-    const text = `${selectedItem.line1}:${selectedItem.line2}`;
-    document.getElementById('search-result-custom2').textContent = text;
-  });
-}
-
-/** @return {void} */
-function setupSearches() {
-  const searchDocsSimple = new SearchAdapter({
-    textfield: document.getElementById('search-textfield-simple'),
-    list: document.getElementById('search-list-simple'),
-  });
-  const searchDocsMultiline = new SearchAdapter({
-    textfield: document.getElementById('search-textfield-multiline'),
-    list: document.getElementById('search-list-multiline'),
-    suggestionMethod: 'none',
-  });
-
-  buildCustomSearch1();
-  buildCustomSearch2();
-}
-
-/** @return {void} */
-function initializeMdwComponents() {
-  let components;
-
-  components = document.querySelectorAll('.js .mdw-textfield');
-  for (let i = 0; i < components.length; i += 1) {
-    TextField.attach(components.item(i));
-  }
-
-  components = document.querySelectorAll('.js .mdw-list');
-  for (let i = 0; i < components.length; i += 1) {
-    List.attach(components.item(i));
-  }
-
-  components = document.querySelectorAll('.js .mdw-list__item');
-  for (let i = 0; i < components.length; i += 1) {
-    ListItem.attach(components.item(i));
-  }
-}
-
-initializeMdwComponents();
-setupMenuOptions();
-setupSearches();

package/docs/src/components/search.pug

@@ -1,149 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("search")
-    .comparison.js
-      .render
-        +androidstatusbar('primary-700 dark')
-        .mdw-toolbar(mdw-theme-fill="primary-500 dark")
-          .mdw-toolbar__action
-            .mdw-toolbar__start
-              .mdw-button(mdw-icon).material-icons arrow_back
-            .mdw-toolbar__title(mdw-custom)
-              .mdw-textfield#search-textfield-simple(mdw-solo mdw-theme-color="accent")
-                input.mdw-textfield__input(placeholder="Search")
-            .mdw-toolbar__end
-              .mdw-button(mdw-icon).material-icons clear
-        .content
-          ul.mdw-list#search-list-simple
-            li.mdw-list__item Attractions
-            li.mdw-list__item Dining
-            li.mdw-list__item Education
-            li.mdw-list__item Family
-            li.mdw-list__item Health
-            li.mdw-list__item Office
-            li.mdw-list__item Promotions
-            li.mdw-list__item Radio
-            li.mdw-list__item Recipes
-            li.mdw-list__item Sports
-            li.mdw-list__item Travel
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B5ZSepuCX1xObnc4ZFYybVRWY2s/single-action4.png')
-
-    .comparison.js
-      .render
-        +androidstatusbar('primary-700 dark')
-        .mdw-toolbar(mdw-theme-fill="primary-500 dark")
-          .mdw-toolbar__action
-            .mdw-toolbar__start
-              .mdw-button(mdw-icon).material-icons arrow_back
-            .mdw-toolbar__title(mdw-custom)
-              .mdw-textfield#search-textfield-multiline(mdw-solo mdw-theme-color="accent")
-                input.mdw-textfield__input(placeholder="Search")
-            .mdw-toolbar__end
-              .mdw-button(mdw-icon).material-icons clear
-        .content
-          ul.mdw-list#search-list-multiline
-            li.mdw-list__subheader Today
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Brunch this weekend?
-                .mdw-list__text-block Ali Connors 
-                  span  — I'll be in your neighborhood doing errands this weekend. Do you want to meet?
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Summer BBQ
-                  span  4
-                .mdw-list__text-block to Alex, Scott, Jennifer
-                  span  — Wish I could come. but I'm out of town this weekend.
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Oui oui
-                .mdw-list__text-block Sandra Adams
-                  span  — Do you have Paris recommendations? Have you ever been?
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Birthday gift
-                .mdw-list__text-block Trevor Hansen
-                  span  — Have any ideas about what we should get Heidi for her birthday?
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Recipe to try
-                .mdw-list__text-block Britta Holt
-                  span  — We should eat this: Grated Squash, Corn, and tomatillo Tacos J
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Giants game
-                .mdw-list__text-block David Park
-                  span  — Any interest in seeing
-            li.mdw-list__item
-              .mdw-list__avatar
-                i.material-icons(style="font-size:40px") 
-              .mdw-list__text
-                .mdw-list__text-line Montauk weekend
-                .mdw-list__text-block -----
-        +androidnavbar
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B5ZSepuCX1xObnc4ZFYybVRWY2s/single-action4.png')
-
-    .comparison.js
-      .render
-        .content.display-flex(style="padding:8px")
-          .flex-1.display-flex(flex-column)
-            p Text field dropdown with:
-            ul
-              li one-time search on first input
-              li startsWith text filter
-              li append input on selection
-            div
-              label.mdw-textfield#search-textfield-custom1(mdw-theme-color="accent")
-                input.mdw-textfield__input(placeholder=" ")
-                .mdw-textfield__border
-                  .mdw-textfield__outline-gap
-                    .mdw-textfield__label Property
-                .mdw-textfield__dropdown(mdw-type="list" mdw-hide)
-                  .custom-busy-indicator.display-flex(flex-align-items="center")
-                    .mdw-progress-circle
-                      svg(viewBox="0 0 24 24")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
-                    span Searching...
-                  .mdw-list#search-list-custom1
-            p Current Selection: 
-              span#search-result-custom1
-            p Text field dropdown with:
-            ul
-              li input-based search
-              li 300ms debounce
-              li replace input on selection
-              li disabled item filter
-            div
-              label.mdw-textfield#search-textfield-custom2(mdw-outlined)
-                input.mdw-textfield__input(placeholder=" ")
-                .mdw-textfield__border
-                  .mdw-textfield__outline-gap
-                    .mdw-textfield__label Property
-                .mdw-textfield__dropdown(mdw-type="list" mdw-hide)
-                  .custom-busy-indicator.display-flex(flex-align-items="center")
-                    .mdw-progress-circle
-                      svg(viewBox="0 0 24 24")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
-                        path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
-                    span Searching...
-                  .custom-no-results-indicator.display-flex(flex-align-items="center" style="display:none")
-                    span No results found.
-                  .mdw-list#search-list-custom2
-            p Current Selection: 
-              span#search-result-custom2
-  script(src='search.min.js')

package/docs/src/components/selection.js

@@ -1,6 +0,0 @@
-import setupImageTargets from '../targetHandler';
-import { setupMenuOptions } from '../menuoptions';
-
-setupMenuOptions();
-setupImageTargets();
-

package/docs/src/components/selection.pug

@@ -1,116 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("selection")
-    #horizontalLine
-    #verticalLineLeft
-    #verticalLineRight
-    .comparison.mdw-theme-selection
-      .render
-        +androidstatusbar('accent-700 dark')
-        .mdw-toolbar(mdw-theme-fill="accent-500 dark")
-          .mdw-toolbar__action
-            .mdw-toolbar__title Title
-        .content(style="padding-top:7px")
-          ul.mdw-list
-            li.mdw-list__subheader Switch
-            label.mdw-list__item(mdw-ripple)
-              .mdw-ripple
-                .mdw-ripple__inner
-              .mdw-list__text Android Switch On
-              .mdw-list__secondary
-                .mdw-selection(mdw-theme-color="accent" mdw-switch)
-                  input.mdw-selection__input(type="checkbox" checked)
-                  .mdw-selection__icon
-            label.mdw-list__item(mdw-ripple)
-              .mdw-ripple
-                .mdw-ripple__inner
-              .mdw-list__text Android Switch Off
-              .mdw-list__secondary
-                .mdw-selection(mdw-theme-color="accent-200" mdw-switch)
-                  input.mdw-selection__input(type="checkbox")
-                  .mdw-selection__icon
-          ul.mdw-list
-            li.mdw-list__subheader Single check
-            label.mdw-list__item(mdw-ripple)
-              .mdw-ripple
-                .mdw-ripple__inner
-              .mdw-list__text Option 1
-              .mdw-list__secondary
-                .mdw-selection(mdw-theme-color="accent-700")
-                  input.mdw-selection__input(type="radio" name="selectiontest" checked)
-                  .mdw-selection__icon
-            label.mdw-list__item(mdw-ripple)
-              .mdw-ripple
-                .mdw-ripple__inner
-              .mdw-list__text Option 2
-              .mdw-list__secondary
-                .mdw-selection(mdw-theme-color="primary-700")
-                  input.mdw-selection__input(type="radio" name="selectiontest")
-                  .mdw-selection__icon
-          ul.mdw-list
-            li.mdw-list__subheader Multiple check
-            label.mdw-list__item(mdw-ripple)
-              .mdw-ripple
-                .mdw-ripple__inner
-              .mdw-list__text Option 1
-              .mdw-list__secondary
-                .mdw-selection(mdw-theme-color="accent-A400")
-                  input.mdw-selection__input(type="checkbox" checked)
-                  .mdw-selection__icon
-            label.mdw-list__item(mdw-ripple)
-              .mdw-ripple
-                .mdw-ripple__inner
-              .mdw-list__text Option 2
-              .mdw-list__secondary
-                .mdw-selection(mdw-theme-color="primary-700")
-                  input.mdw-selection__input(type="checkbox" checked)
-                  .mdw-selection__icon
-            label.mdw-list__item(mdw-ripple)
-              .mdw-ripple
-                .mdw-ripple__inner
-              .mdw-list__text Option 3
-              .mdw-list__secondary
-                .mdw-selection(mdw-theme-color="warn")
-                  input.mdw-selection__input(type="checkbox")
-                  .mdw-selection__icon
-      +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B57Y8yNEHsZPQXRHTEpLc0JXVnM/material-design.platform-adaptation-control-1.png')
-
-    .comparison.mdw-theme-selection
-      .render
-        +androidstatusbar('accent-700 dark')
-        .mdw-toolbar(mdw-theme-fill="accent-500 dark")
-          .mdw-toolbar__action
-            .mdw-toolbar__title Title
-        .content
-          div.display-flex(style="padding:16px")
-            label.mdw-selection(mdw-theme-color="primary-700")
-              input.mdw-selection__input(type="checkbox" checked)
-              .mdw-selection__label Prefixed
-              .mdw-selection__icon
-          div.display-flex(style="padding:16px")
-            label.mdw-selection(mdw-theme-color="accent-A700")
-              input.mdw-selection__input(type="checkbox" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Suffixed
-          div.display-flex(style="padding:16px")
-            label.mdw-selection(mdw-theme-color="accent-A700")
-              input.mdw-selection__input(type="checkbox" checked disabled)
-              .mdw-selection__icon
-              .mdw-selection__label Disabled
-          div.display-flex(style="padding:16px")
-            label.mdw-selection(mdw-theme-color="accent-A700")
-              input.mdw-selection__input(type="radio" name="test" checked)
-              .mdw-selection__icon
-              .mdw-selection__label A
-          div.display-flex(style="padding:16px")
-            label.mdw-selection(mdw-theme-color="accent-A700")
-              input.mdw-selection__input(type="radio" name="test")
-              .mdw-selection__icon
-              .mdw-selection__label B
-          div.display-flex(style="padding:16px")
-            label.mdw-selection(mdw-theme-color="accent-A700")
-              input.mdw-selection__input(type="radio" name="test" disabled)
-              .mdw-selection__icon
-              .mdw-selection__label C
-  script(src='selection.min.js')

package/docs/src/components/slider.js

@@ -1,3 +0,0 @@
-import { setupMenuOptions } from '../menuoptions';
-
-setupMenuOptions();

package/docs/src/components/slider.pug

@@ -1,19 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("slider")
-    .mdw-layout(mdw-margin-top mdw-margin-bottom)
-      .mdw-layout__item(mdw-colspan="100%")
-        div
-          h5.mdw-type(mdw-baseline-next="36") Sliders allow users to make selections from a range of values.
-          p.mdw-type Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
-      .mdw-layout__item(mdw-colspan="4")
-        .component-sample
-          .component-sample__container
-            label.mdw-slider(mdw-theme-color="accent")
-              input.mdw-slider__input(type="range" list="sample-list")
-              datalist#sample-list 
-                option(value=0 label="None")
-                option(value=50 label="Half")
-                option(value=100 label="All")
-  script(src='slider.min.js')

package/docs/src/components/snackbar.pug

@@ -1,145 +0,0 @@
-include ../mixins.pug
-
-+header()
-  +navdrawer("snackbar")
-    .mdw-layout(mdw-margin-top mdw-margin-bottom)
-      .mdw-layout__item(mdw-colspan="100%")
-        div
-          h5.mdw-type(mdw-baseline-next="36") Snackbars provide brief messages about app processes at the bottom of the screen.
-          p.mdw-type Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
-      .mdw-layout__item(mdw-colspan="100%")
-        .component-sample(style="padding:0")
-          .mdw-layout(style="width:100%;height:100%")
-            .mdw-layout__item(mdw-colspan="100%")
-              div
-                button.mdw-button(mdw-theme-color="accent") Create New
-            .mdw-layout__item(mdw-colspan="100%")
-              .mdw-snackbar__wrapper
-                .mdw-snackbar__container
-                  .mdw-snackbar
-                    span Short message snackbar.
-            .mdw-layout__item(mdw-colspan="100%")
-              .mdw-snackbar__wrapper
-                .mdw-snackbar__container.js-sample
-      .mdw-layout__item(mdw-colspan="4")
-        div
-          .mdw-type(mdw-style="subtitle") Javascript
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="required" disabled)
-              .mdw-selection__icon
-              .mdw-selection__label Required
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="optional" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Optional
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="javascript" value="none")
-              .mdw-selection__icon
-              .mdw-selection__label None
-          .mdw-type(mdw-style="subtitle") Text
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="text" value="short" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Short
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="text" value="long")
-              .mdw-selection__icon
-              .mdw-selection__label Long
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="text" value="line-break")
-              .mdw-selection__icon
-              .mdw-selection__label Explicit line-break
-          .mdw-type(mdw-style="subtitle") Button
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="button" value="none" checked)
-              .mdw-selection__icon
-              .mdw-selection__label None
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="button" value="short")
-              .mdw-selection__icon
-              .mdw-selection__label Short
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="button" value="long")
-              .mdw-selection__icon
-              .mdw-selection__label Long
-          .mdw-type(mdw-style="subtitle") Visibility
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="visibility" value="auto" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Auto
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="visibility" value="show")
-              .mdw-selection__icon
-              .mdw-selection__label Show
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="visibility" value="hide")
-              .mdw-selection__icon
-              .mdw-selection__label Hide
-          .mdw-type(mdw-style="subtitle") Position
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="position" value="auto" checked)
-              .mdw-selection__icon
-              .mdw-selection__label Start (Default)
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="position" value="center")
-              .mdw-selection__icon
-              .mdw-selection__label Center
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="position" value="end")
-              .mdw-selection__icon
-              .mdw-selection__label End
-          .mdw-type(mdw-style="subtitle") Auto-Hide Time (Seconds)
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="none" checked)
-              .mdw-selection__icon
-              .mdw-selection__label None
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="4")
-              .mdw-selection__icon
-              .mdw-selection__label 4
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="5")
-              .mdw-selection__icon
-              .mdw-selection__label 5
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="6")
-              .mdw-selection__icon
-              .mdw-selection__label 6
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="7")
-              .mdw-selection__icon
-              .mdw-selection__label 7
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="8")
-              .mdw-selection__icon
-              .mdw-selection__label 8
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="9")
-              .mdw-selection__icon
-              .mdw-selection__label 9
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="radio" name="autohide" value="10")
-              .mdw-selection__icon
-              .mdw-selection__label 10
-          .mdw-type(mdw-style="subtitle") Options
-          div
-            label.mdw-selection(mdw-theme-color="accent" style="margin:16px 8px")
-              input.mdw-selection__input(type="checkbox" name="stacked")
-              .mdw-selection__icon
-              .mdw-selection__label Stacked
-      .mdw-layout__item(mdw-colspan="100%" style="max-height:0")
-      .mdw-layout__item(mdw-colspan="6")
-        .display-flex(flex-column)
-          h6.mdw-type HTML Code
-          .mdw-card.component-code.component-html
-      .mdw-layout__item(mdw-colspan="2")
-        .display-flex(flex-column)
-          h6.mdw-type Javascript Code
-          .mdw-card.component-code.component-js
-  script(src='snackbar.min.js')