@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/docs/pages/dialog.pug

@@ -1,132 +0,0 @@
-include ../../templates/index.pug
-include ../_mixins.pug
-
-+header("dialog")
-  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
-    .mdw-grid__item(mdw-colspan="100%")
-      h5.mdw-type(mdw-baseline-next="36") Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
-      p.mdw-type Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.
-    .mdw-grid__item(mdw-colspan="4")
-      .mdw-grid__content
-        .component-sample
-          .component-sample__container
-            +mdwButton()(href="#sample-dialog") Open
-            .mdw-dialog#sample-dialog
-              a.mdw-dialog__close(href="#")
-              .mdw-dialog__popup.mdw-theme(mdw-surface="card")
-                .mdw-dialog__title Sample title
-                .mdw-dialog__body.mdw-theme(mdw-ink="medium") Sample body text
-                .mdw-dialog__button-area
-                  +mdwButton({ ink:'secondary' })(href="#") Agree
-                  +mdwButton({ ink:'secondary' })(href="#") Disagree
-    .mdw-grid__item(mdw-colspan="8")
-      .mdw-type(mdw-style="subtitle") Javascript
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required'}) 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") Options
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'stacked-buttons'}) Stacked Buttons
-      .mdw-type(mdw-style="subtitle") Width Units
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'auto', checked:true}) Auto
-        +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'3'}) 3
-        +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'4'}) 4
-        +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'5'}) 5
-        +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'6'}) 6
-        +mdwSelection({ink:'secondary', name:'width', type:'radio', value:'7'}) 7
-    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
-    .mdw-grid__item(mdw-colspan="100%")
-      h6.mdw-type HTML Code
-      .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
-    .mdw-grid__item(mdw-colspan="100%")
-      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.display-flex(mdw-colspan="4" flex-justify-content="center")
-      .render
-        .display-flex.flex-1(flex-column style="position:relative")
-          +androidstatusbar('primary 700', 'dark')
-          .mdw-appbar.mdw-theme(mdw-surface="primary 500" mdw-dark)
-            .mdw-appbar__action
-              .mdw-appbar__start
-                .mdw-tooltip__wrapper
-                  +mdwButton({ icon:true }).mdw-tooltip__target.material-icons menu
-                  .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark) Menu
-              .mdw-appbar__end
-                .mdw-tooltip__wrapper
-                  +mdwButton({ icon:true }).mdw-tooltip__target.material-icons(mdw-more-button) more_vert
-                  .mdw-tooltip.mdw-theme(mdw-surface="background 700" mdw-dark) Options
-          .content(style="padding:16px 8px;")
-            h6.mdw-type Javascript
-            .display-flex(style="padding:16px 0").js
-              +mdwButton({ surface:'primary 500', dark:true, raised:true }) Chained
-              +mdwButton({ surface:'primary 500', dark:true, raised:true }) Input Autofocus
-            h6.mdw-type CSS-Only
-            .display-flex(style="padding:16px 0").js
-              +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#confirmdialog-titled")#titled-button Titled
-              +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#confirmdialog-text")#text-button Text
-              +mdwButton({ surface:'primary 500', dark:true, raised:true })(href="#dialog-scrolling")#scrolling-button Scrolling
-          .mdw-dialog#confirmdialog-titled
-            a.mdw-dialog__close(href="#titled-button")
-            .mdw-dialog__popup.mdw-theme(mdw-surface="card")
-              .mdw-dialog__title Use Google's location service?
-              .mdw-dialog__body.mdw-theme(mdw-ink="medium") Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
-              .mdw-dialog__button-area
-                +mdwButton({ ink:'secondary' })(href="#titled-button") Agree
-                +mdwButton({ ink:'secondary' })(href="#titled-button") Disagree
-          .mdw-dialog#dialog-scrolling
-            a.mdw-dialog__close(href="#scrolling-button")
-            .mdw-dialog__popup.mdw-theme(mdw-surface="card")
-              .mdw-dialog__header
-                .mdw-dialog__title Dialog header
-              .mdw-divider.mdw-theme(mdw-border-ink="divider")
-              .mdw-dialog__scrolling
-                ul.mdw-list
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 1
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 2
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 3
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 4
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 5
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 6
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 7
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 8
-                  li.mdw-list__item
-                    a.mdw-list__content.mdw-overlay.mdw-ripple.mdw-theme(href='#scrolling-button' mdw-ink="default") Item 9
-              .mdw-divider.mdw-theme(mdw-border-ink="divider")
-              .mdw-dialog__button-area
-                +mdwButton({ ink:'secondary' })(href="#scrolling-button") Agree
-                +mdwButton({ ink:'secondary' })(href="#scrolling-button") Disagree
-          .mdw-dialog#confirmdialog-text
-            a.mdw-dialog__close(href="#text-button")
-            .mdw-dialog__popup.mdw-theme(mdw-surface="card")
-              .mdw-dialog__body.mdw-theme(mdw-ink="medium") Discard draft?
-              .mdw-dialog__button-area
-                +mdwButton({ ink:'secondary' })(href="#text-button") Discard
-                +mdwButton({ ink:'secondary' })(href="#text-button") Cancel
-          #dialog-textfield.mdw-dialog(mdw-width-units="5")
-            form.mdw-dialog__popup.mdw-theme(mdw-surface="card")
-              .mdw-dialog__header
-                .mdw-dialog__title Dialog Title
-              label.mdw-textfield.mdw-theme(mdw-ink="secondary" style="padding:0 24px")
-                .mdw-textfield__signifier.material-icons security
-                input.mdw-textfield__input(placeholder=" " name="input" mdw-autofocus)
-                .mdw-textfield__border
-                  .mdw-textfield__outline-gap
-                    .mdw-textfield__label Text Field Label
-                .mdw-textfield__error-text This field is required
-              .mdw-dialog__button-area
-                button.mdw-button.mdw-theme(mdw-ink="secondary" tabindex="0" type="submit") Change
-                button.mdw-button.mdw-theme(mdw-ink="secondary" tabindex="0" type="button") Cancel
-        +androidnavbar
-  script(src='dialog.min.js')

package/docs/pages/dom.eta

@@ -1,26 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'dom'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="6">
-    <div class="mdw-grid__content component-sample">
-      <div class="display-flex" style="flex:1;height:400px;max-height:400px;overflow-y:auto;">
-        <ul class="mdw-list mdw-theme" style="flex:1;width:100%;" mdw-surface="primary alt"></ul>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <div class="mdw-type" mdw-style="subtitle">Optimizations</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'fastMeasure', checked:true, text:'Fast Measure' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'block', checked:true, text:'Block-level' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'deferRender', checked:true, text:'Defer Render' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'equalSize', checked:false, text:'Equal Size' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Test Options</div>
-    <%~ includeFile(T, { button: { text:'Reset' }}) %>
-    <%~ includeFile(T, { button: { text:'Remove #10' }}) %>
-    <%~ includeFile(T, { button: { text:'Increment #50' }}) %>
-    <%~ includeFile(T, { button: { text:'Resize #80' }}) %>
-  </div>
-</div>
-<script src="dom.min.js"></script>

package/docs/pages/dom.js

@@ -1,143 +0,0 @@
-import DomAdapter from '../../adapters/dom/index.js';
-import * as ListContent from '../../components/list/content.js';
-import * as ListItem from '../../components/list/item.js';
-import { iterateArrayLike } from '../../core/dom.js';
-
-class CustomDataSourceItem {
-  /** @param {number} i */
-  constructor(i) {
-    this.itemnumber = i;
-    this.clickCount = 0;
-    this.expanded = false;
-  }
-}
-
-/** @type {CustomDataSourceItem[]} */
-const datasource = [];
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/** @type {DomAdapter<CustomDataSourceItem, HTMLLIElement>} */
-let domAdapter;
-
-/** @return {void} */
-function resetDatasource() {
-  datasource.splice(0, datasource.length);
-  for (let i = 0; i < 500; i += 1) {
-    datasource.push(new CustomDataSourceItem(i));
-  }
-}
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, checked } = /** @type {HTMLInputElement} */ (event.target);
-  // @ts-ignore: Optimization
-  domAdapter.recycle[name] = checked;
-  domAdapter.refresh();
-}
-/** @return {void} */
-function setupComponentOptions() {
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
-    el.addEventListener('change', onOptionChange);
-  });
-  sampleComponent = document.querySelector('.component-sample .mdw-list');
-  resetDatasource();
-  domAdapter = new DomAdapter({
-    element: sampleComponent,
-    datasource,
-    recycle: {
-      scroller: sampleComponent.parentElement,
-      fastMeasure: true,
-      block: true,
-      deferRender: true,
-      equalSize: false,
-    },
-    render(child, data, index) {
-      const textLines = child.getElementsByClassName('mdw-list__text-line');
-      textLines[0].textContent = `Item ${data.itemnumber}`;
-      textLines[1].textContent = `Click count: #${data.clickCount}`;
-      if (data.expanded) {
-        child.style.setProperty('height', '128px');
-        child.style.setProperty('background-color', 'red');
-      } else {
-        child.style.setProperty('height', '64px');
-        child.style.removeProperty('background-color');
-      }
-      child.firstElementChild.setAttribute('aria-posinset', index.toString(10));
-    },
-    create(data) {
-      // Create placeholder UI
-      const listItem = document.createElement('li');
-      if (!domAdapter.recycle.block) {
-        listItem.style.setProperty('display', 'inline-flex');
-        listItem.style.setProperty('width', '33.333%');
-      }
-      if (domAdapter.recycle.deferRender) {
-        listItem.style.setProperty('min-height', '64px');
-        if (data.expanded) {
-          listItem.style.setProperty('height', '128px');
-        }
-      }
-      listItem.className = 'mdw-list__item';
-      listItem.innerHTML = `
-        <a class="mdw-list__content">
-          <div class="mdw-list__text">
-            <div class="mdw-list__text-line">Item ${data.itemnumber}</div>
-            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Waiting for idle...</div>
-          </div>
-        </a>
-      `;
-      ListItem.attach(listItem);
-      return listItem;
-    },
-  });
-  domAdapter.refresh();
-  const buttons = document.querySelectorAll('.mdw-layout__content-page .mdw-button');
-  buttons[0].addEventListener('click', () => {
-    buttons[1].removeAttribute('aria-disabled');
-    resetDatasource();
-    domAdapter.refresh();
-  });
-  buttons[1].addEventListener('click', () => {
-    if (buttons[1].getAttribute('aria-disabled') === 'true') {
-      return;
-    }
-    const item = datasource[10];
-    domAdapter.removeItem(item);
-    datasource.splice(10, 1);
-
-    // Alternatively, we can remove from datasource first and call invalidateAll()
-
-    domAdapter.drawViewport();
-    buttons[1].setAttribute('aria-disabled', 'true');
-  });
-  buttons[2].addEventListener('click', () => {
-    const item = datasource.filter((d) => d.itemnumber === 50)[0];
-    item.clickCount += 1;
-    // Element will not change size, therefore avoid possible invalidation
-    // (When element is refreshed and not in DOM, adapter may assume sized change)
-    domAdapter.refreshItem(item, { invalidate: false });
-    domAdapter.drawViewport();
-  });
-  buttons[3].addEventListener('click', () => {
-    const item = datasource.filter((d) => d.itemnumber === 80)[0];
-    item.expanded = !item.expanded;
-    // Force invalidation from height change
-    domAdapter.refreshItem(item, { invalidate: true });
-    domAdapter.drawViewport();
-  });
-  sampleComponent.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const listContent = (event.target);
-    /** @type {HTMLLIElement} */
-    const listItem = (listContent.parentElement);
-    const dataItem = domAdapter.elementDataMap.get(listItem);
-    dataItem.clickCount += 1;
-    domAdapter.refreshItem(dataItem);
-  });
-}
-
-setupComponentOptions();

package/docs/pages/dom.pug

@@ -1,22 +0,0 @@
-include ../_mixins.pug
-
-+header("dom")
-  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
-    .mdw-grid__item(mdw-colspan="6")
-      .mdw-grid__content.component-sample
-        .display-flex(style="flex:1;height:400px;max-height:400px;overflow-y:auto")
-          ul.mdw-list.mdw-theme(style="flex:1;width:100%;" mdw-surface="primary alt")
-
-    .mdw-grid__item(mdw-colspan="100%")
-      .mdw-type(mdw-style="subtitle") Optimizations
-      .docs-option-list
-        +mdwSelection({ink:'secondary', name:'fastMeasure', checked:true}) Fast Measure
-        +mdwSelection({ink:'secondary', name:'block', checked:true}) Block-level
-        +mdwSelection({ink:'secondary', name:'deferRender', checked:true}) Defer Render
-        +mdwSelection({ink:'secondary', name:'equalSize', checked:false}) Equal Size
-      .mdw-type(mdw-style="subtitle") Test Options
-      +mdwButton() Reset
-      +mdwButton() Remove #10
-      +mdwButton() Increment #50
-      +mdwButton() Resize #80
-  script(src='dom.min.js')

package/docs/pages/elevation.eta

@@ -1,35 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'elevation'}) %>
-<div class="docs-grid mdw-grid" mdw-margin-top mdw-margin-bottom mdw-columns="4" mdw-margin-4col="40" mdw-gutter-4col="40">
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="1">1dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="2">2dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="3">3dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="4">4dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="6">6dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="8">8dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="9">9dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="12">12dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="16">16dp</div>
-  </div>
-  <div class="mdw-grid__item">
-    <div class="docs-elevation__item mdw-elevation" mdw-elevation="24">24dp</div>
-  </div>
-</div>
-<script src="elevation.min.js"></script>

package/docs/pages/elevation.pug

@@ -1,25 +0,0 @@
-include ../_mixins.pug
-
-+header("elevation")
-  .docs-grid.mdw-grid(mdw-margin-top mdw-margin-botttom mdw-columns=4 mdw-margin-4col="40" mdw-gutter-4col="40")
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=1) 1dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=2) 2dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=3) 3dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=4) 4dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=6) 6dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=8) 8dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=9) 9dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=12) 12dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=16) 16dp
-    .mdw-grid__item
-      .docs-elevation__item.mdw-elevation(mdw-elevation=24) 24dp
-  script(src='elevation.min.js')

package/docs/pages/fab.eta

@@ -1,99 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'fab'}) %>
-<div class="comparison js">
-  <div class="render">
-    <div class="display-flex flex-1" flex-column style="position:relative;">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface: 'primary 500', dark: true, start: ['menu'], end: ['search'], body: 'JS' }) %>
-      <div class="content" style="padding:16px 8px;">
-        <div class="mdw-type" mdw-style="subtitle">Hover</div>
-        <div class="docs-option-list">
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'hover', text:'Open on Hover' }}) %>
-        </div>
-        <div class="mdw-type" mdw-style="subtitle">Type</div>
-        <div class="docs-option-list">
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'regular', text:'Regular (Default)', checked:true }}) %>
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'mini', text:'Mini' }}) %>
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'extended', text:'Extended' }}) %>
-          <%~ includeFile(T, { selection: { ink:'secondary', name:'type', type:'radio', value:'extended-hover', text:'Extended on Hover' }}) %>
-        </div>
-        <div class="mdw-grid docs-render-overlay" mdw-margin-bottom mdw-columns="4">
-          <div class="mdw-grid__item">
-            <div class="mdw-grid__content">
-              <div class="mdw-fab">
-                <%~ includeFile(T, { button: { surface: 'secondary 500', dark:true, class:"mdw-fab__button", body: /* html */ `
-                  <div class="mdw-fab__icon">
-                    <div class="mdw-fab__hidden-icon material-icons">add</div>
-                    <div class="mdw-fab__shown-icon material-icons">clear</div>
-                  </div>
-                  <div class="mdw-fab__text">Add</div>
-                `}}) %>
-                <div class="mdw-fab__speed-dial">
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_1</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_2</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_3</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_4</div>
-                  `}}) %>
-                  <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                    <div class="mdw-fab__icon material-icons">filter_5</div>
-                  `}}) %>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <%~ includeFile('../_partials/_androidnavbar.eta') %>
-  </div>
-</div>
-<div class="comparison">
-  <div class="render">
-    <div class="display-flex flex-1" flex-column style="position:relative;">
-      <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'primary 700', dark:true }) %>
-      <%~ includeFile('../_partials/_appbar.eta', { surface:'primary 500', dark:true, start: ['menu'], end: ['search'], body:'CSS Only' }) %>
-      <div class="content" style="padding:16px 8px;">
-        <div class="mdw-grid docs-render-overlay" mdw-margin-bottom>
-          <div class="mdw-grid__item">
-            <div class="mdw-fab" id="my-fab">
-              <a class="mdw-fab__close" href="#my-fab-button"></a>
-              <%~ includeFile(T, { button: { surface: 'secondary 500', dark:true, id:'my-fab-button', href:'#my-fab', class:"mdw-fab__button", body: /* html */ `
-                <div class="mdw-fab__icon">
-                  <div class="mdw-fab__hidden-icon material-icons">add</div>
-                  <div class="mdw-fab__shown-icon material-icons">clear</div>
-                </div>
-                <div class="mdw-fab__text">Add</div>
-              `}}) %>
-              <div class="mdw-fab__speed-dial">
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_1</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_2</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_3</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_4</div>
-                `}}) %>
-                <%~ includeFile(T, { button: { class:'mdw-fab__button', attributes: {'mdw-mini': true},body: /* html */ `
-                  <div class="mdw-fab__icon material-icons">filter_5</div>
-                `}}) %>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <%~ includeFile('../_partials/_androidnavbar.eta') %>
-  </div>
-</div>
-<script src="fab.min.js"></script>

package/docs/pages/fab.js

@@ -1,44 +0,0 @@
-import * as Button from '../../components/button/index.js';
-import * as Fab from '../../components/fab/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
-
-/** @return {void} */
-function initializeMdwComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-fab'), Fab.attach);
-
-  iterateArrayLike(document.querySelectorAll('.js .mdw-button'), Button.attach);
-
-  document.querySelector('input[name="hover"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__speed-dial').setAttribute('mdw-hover', '');
-    } else {
-      document.querySelector('.js .mdw-fab__speed-dial').removeAttribute('mdw-hover');
-    }
-  });
-  document.querySelector('input[name="type"][value="regular"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-mini');
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-extended');
-    }
-  });
-  document.querySelector('input[name="type"][value="mini"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').setAttribute('mdw-mini', '');
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-extended');
-    }
-  });
-  document.querySelector('input[name="type"][value="extended"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-mini');
-      document.querySelector('.js .mdw-fab__button').setAttribute('mdw-extended', '');
-    }
-  });
-  document.querySelector('input[name="type"][value="extended-hover"]').addEventListener('change', (event) => {
-    if (event.currentTarget.checked) {
-      document.querySelector('.js .mdw-fab__button').removeAttribute('mdw-mini');
-      document.querySelector('.js .mdw-fab__button').setAttribute('mdw-extended', 'hover');
-    }
-  });
-}
-
-initializeMdwComponents();

package/docs/pages/fab.pug

@@ -1,66 +0,0 @@
-include ../_mixins.pug
-
-+header("fab")
-  .comparison.js
-    .render
-      .display-flex.flex-1(flex-column style="position:relative")
-        +androidstatusbar('primary 700', 'dark')
-        +appbar('primary 500', 'dark', ['menu'], ['search']) JS
-        .content(style="padding:16px 8px;")
-          .mdw-type(mdw-style="subtitle") Hover
-          .docs-option-list
-            +mdwSelection({ink:'secondary', name:'hover'}) Open on Hover
-          .mdw-type(mdw-style="subtitle") Type
-          .docs-option-list
-            +mdwSelection({ink:'secondary', name:'type', type:'radio', value:'regular'}) Regular (Default)
-            +mdwSelection({ink:'secondary', name:'type', type:'radio', value:'mini'}) Mini
-            +mdwSelection({ink:'secondary', name:'type', type:'radio', value:'extended'}) Extended
-            +mdwSelection({ink:'secondary', name:'type', type:'radio', value:'extended-hover'}) Extended on Hover
-          .mdw-grid(mdw-margin-bottom mdw-columns="4").docs-render-overlay
-            .mdw-grid__item
-              .mdw-grid__content
-                .mdw-fab
-                  +mdwButton({ surface:'secondary 500', dark:true }).mdw-fab__button
-                    .mdw-fab__icon
-                      .mdw-fab__hidden-icon.material-icons add
-                      .mdw-fab__shown-icon.material-icons clear
-                    .mdw-fab__text Add
-                  .mdw-fab__speed-dial
-                    +mdwButton().mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_1
-                    +mdwButton().mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_2
-                    +mdwButton().mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_3
-                    +mdwButton().mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_4
-                    +mdwButton().mdw-fab__button(mdw-mini)
-                      .mdw-fab__icon.material-icons filter_5
-      +androidnavbar
-  .comparison
-    .render
-      .display-flex.flex-1(flex-column style="position:relative")
-        +androidstatusbar('primary 700', 'dark')
-        +appbar('primary 500', 'dark', ['menu'], ['search']) CSS Only
-        .content(style="padding:16px 8px;") 
-          .mdw-grid(mdw-margin-bottom).docs-render-overlay
-            .mdw-grid__item
-              .mdw-fab#my-fab
-                a.mdw-fab__close(href="#my-fab-button")
-                +mdwButton({ icon:true, surface:'secondary 500', dark:true})#my-fab-button.mdw-fab__button(href="#my-fab")
-                  .mdw-fab__icon
-                    .mdw-fab__hidden-icon.material-icons add
-                    .mdw-fab__shown-icon.material-icons clear
-                .mdw-fab__speed-dial
-                  +mdwButton().mdw-fab__button(mdw-mini)
-                    .mdw-fab__icon.material-icons filter_1
-                  +mdwButton().mdw-fab__button(mdw-mini)
-                    .mdw-fab__icon.material-icons filter_2
-                  +mdwButton().mdw-fab__button(mdw-mini)
-                    .mdw-fab__icon.material-icons filter_3
-                  +mdwButton().mdw-fab__button(mdw-mini)
-                    .mdw-fab__icon.material-icons filter_4
-                  +mdwButton().mdw-fab__button(mdw-mini)
-                    .mdw-fab__icon.material-icons filter_5
-      +androidnavbar
-  script(src='fab.min.js')