@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/docs/pages/datatable.js

@@ -1,160 +0,0 @@
-import DataTableAdapter from '../../adapters/datatable/index.js';
-import * as Button from '../../components/button/index.js';
-import * as DataTable from '../../components/datatable/index.js';
-import * as Menu from '../../components/menu/index.js';
-import * as MenuItem from '../../components/menu/item.js';
-import * as Selection from '../../components/selection/index.js';
-
-/** @return {void} */
-function initializeMdwComponents() {
-  for (const element of document.querySelectorAll('.mdw-datatable.js')) { DataTable.attach(element); }
-  for (const element of document.getElementsByClassName('mdw-button')) { Button.attach(element); }
-  for (const element of document.getElementsByClassName('mdw-selection')) { Selection.attach(element); }
-  for (const element of document.getElementsByClassName('mdw-menu')) { Menu.attach(element); }
-}
-
-/**
- * @typedef {Object} CustomData
- * @prop {boolean} selected
- * @prop {string} text
- * @prop {string} text2
- * @prop {boolean} check1
- * @prop {number} increment
- * @prop {number} random
- */
-
-/** @type {DataTableAdapter<CustomData>} */
-let dynamicTableAdapter = null;
-/** @return {void} */
-function buildDynamicTable() {
-  /** @type {CustomData[]} */
-  const datasource = [];
-  let count = 1;
-  const addDatasourceObject = () => {
-    datasource.push({
-      selected: false,
-      text: Math.random().toString(36).slice(2),
-      text2: Math.random().toString(36).slice(2),
-      check1: Math.random() > 0.5,
-      increment: count,
-      random: Math.floor(Math.random() * 99_999),
-    });
-    count += 1;
-  };
-  for (let i = 0; i < 256; i += 1) {
-    addDatasourceObject();
-  }
-
-  const datatable = document.getElementById('dynamic-table');
-  dynamicTableAdapter = new DataTableAdapter({ datatable, datasource });
-  dynamicTableAdapter.addColumn({
-    key: 'selected',
-    type: 'checkbox',
-    rowSelector: true,
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'text',
-    name: 'Primary Column (full-width)',
-    primaryColumn: true,
-    sortable: true,
-    type: 'text',
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'text2',
-    name: 'Text field',
-    sortable: true,
-    type: 'text',
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'check1',
-    name: 'bool',
-    type: 'checkbox',
-    tooltip: 'Non-selection boolean value',
-    sortable: true,
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'increment',
-    name: 'Increment',
-    type: 'number',
-    sortable: true,
-  });
-  dynamicTableAdapter.addColumn({
-    key: 'random',
-    name: 'Random',
-    sortable: true,
-    type: 'number',
-  });
-  dynamicTableAdapter.setUseLazyRendering(true);
-  dynamicTableAdapter.setPagination();
-  dynamicTableAdapter.refresh();
-  const buttons = dynamicTableAdapter.element.querySelectorAll('.mdw-datatable__header-controls .mdw-button');
-  const filterButton = buttons[0];
-  const optionsButton = buttons[1];
-  const menus = dynamicTableAdapter.element.querySelectorAll('.mdw-datatable__header-controls .mdw-menu');
-  const filterMenu = menus[0];
-  const optionsMenu = menus[1];
-  Menu.attach(filterMenu);
-  Menu.attach(optionsMenu);
-
-  filterButton.addEventListener('click', (/** @type {MouseEvent} */ event) => Menu.show(filterMenu, event));
-  optionsButton.addEventListener('click', (/** @type {MouseEvent} */ event) => Menu.show(optionsMenu, event));
-
-  filterMenu.addEventListener(MenuItem.CHECK_EVENT, (event) => {
-    const menuItem = /** @type {HTMLElement} */ (event.target);
-    switch (menuItem.dataset.filter) {
-      default:
-      case 'none':
-        dynamicTableAdapter.setFilter(null);
-        break;
-      case 'md':
-        dynamicTableAdapter.setFilter((data) => data.text.includes('md') || data.text2.includes('md'));
-        break;
-      case 'div9':
-        dynamicTableAdapter.setFilter((data) => data.random % 9 === 0);
-        break;
-      case 'bool':
-        dynamicTableAdapter.setFilter((data) => data.check1);
-        break;
-    }
-    dynamicTableAdapter.refresh();
-    if (dynamicTableAdapter.filter) {
-      filterButton.setAttribute('aria-pressed', 'true');
-    } else {
-      filterButton.setAttribute('aria-pressed', 'false');
-    }
-  });
-  filterMenu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(filterMenu));
-
-  optionsMenu.addEventListener(MenuItem.CHECK_EVENT, (event) => {
-    const menuItem = /** @type {HTMLElement} */ (event.target);
-    switch (menuItem.dataset.option) {
-      default:
-        break;
-      case 'throttle':
-        dynamicTableAdapter.setUseLazyRendering(true);
-        break;
-      case 'paginate':
-        dynamicTableAdapter.setPagination();
-        break;
-    }
-    dynamicTableAdapter.refresh();
-  });
-  optionsMenu.addEventListener(MenuItem.UNCHECK_EVENT, (event) => {
-    const menuItem = /** @type {HTMLElement} */ (event.target);
-    switch (menuItem.dataset.option) {
-      default:
-        break;
-      case 'throttle':
-        dynamicTableAdapter.setUseLazyRendering(false);
-        break;
-      case 'paginate':
-        dynamicTableAdapter.setPagination({ disabled: true });
-        break;
-    }
-    dynamicTableAdapter.refresh();
-  });
-  optionsMenu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(optionsMenu));
-}
-
-initializeMdwComponents();
-buildDynamicTable();

package/docs/pages/dialog.eta

@@ -1,184 +0,0 @@
-<% var T = '../../templates/index.eta' %>
-<% layout('../_partials/_header.eta', {page: 'dialog'}) %>
-<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h5 class="mdw-type" mdw-baseline-next="36">Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.</h5>
-    <p class="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.</p>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="4">
-    <div class="mdw-grid__content">
-      <div class="component-sample">
-        <div class="component-sample__container">
-          <%~ includeFile(T, {button: { href: "#sample-dialog", text:'Open' }}) %>
-          <div class="mdw-dialog" id="sample-dialog">
-            <a class="mdw-dialog__close" href="#"></a>
-            <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
-              <div class="mdw-dialog__title">Sample title</div>
-              <div class="mdw-dialog__body mdw-theme" mdw-ink="medium">Sample body text</div>
-              <div class="mdw-dialog__button-area">
-                <%~ includeFile(T, { button: { href:'#', ink:'secondary', text:'Agree' }}) %>
-                <%~ includeFile(T, { button: { href:'#', ink:'secondary', text:'Disagree' }}) %>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="8">
-    <div class="mdw-type" mdw-style="subtitle">Javascript</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'required', text:'Required' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true, text:'Optional' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', text:'None' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Options</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'stacked-buttons', text:'Stacked Buttons' }}) %>
-    </div>
-    <div class="mdw-type" mdw-style="subtitle">Width Units</div>
-    <div class="docs-option-list">
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'3', text:'3' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'4', text:'4' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'5', text:'5' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'6', text:'6' }}) %>
-      <%~ includeFile(T, { selection: { ink:'secondary', name:'width', type:'radio', value:'7', text:'7' }}) %>
-    </div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h6 class="mdw-type">HTML Code</h6>
-    <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card" mdw-border-ink></div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h6 class="mdw-type">Javascript Code</h6>
-    <div class="mdw-card mdw-theme component-code component-js" mdw-surface="card" mdw-border-ink></div>
-  </div>
-  <div class="mdw-grid__item" mdw-colspan="100%">
-    <h6 class="mdw-type">Samples</h6>
-  </div>
-  <div class="mdw-grid__item display-flex" mdw-colspan="4" flex-justify-content="center">
-    <div class="render">
-      <div class="display-flex flex-1" flex-column style="position:relative;">
-        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface: 'primary 700', dark: true }) %>
-        <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
-          <div class="mdw-appbar__start">
-            <div class="mdw-tooltip__wrapper">
-              <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'menu' }}) %>
-              <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Menu</div>
-            </div>
-          </div>
-          <div class="mdw-appbar__end">
-            <div class="mdw-tooltip__wrapper">
-              <%~ includeFile(T, {button: { icon:true, class:"mdw-tooltip__target material-icons", text:'more_vert' }}) %>
-              <div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>Options</div>
-            </div>
-          </div>
-        </div>
-        <div class="content" style="padding:16px 8px;">
-          <h6 class="mdw-type">Javascript</h6>
-          <div class="display-flex js" style="padding:16px 0;">
-            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, text:'Chained' }}) %>
-            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, text:'Input Autofocus' }}) %>
-          </div>
-          <h6 class="mdw-type">CSS-Only</h6>
-          <div class="display-flex js" style="padding:16px 0;">
-            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, attributes: {href:"#confirmdialog-titled"}, id:'titled-button', text: 'Titled' }}) %>
-            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, attributes: {href:"#confirmdialog-text"}, id:'text-button', text: 'Text' }}) %>
-            <%~ includeFile(T, { button: { surface:'primary 500', dark:true, raised:true, attributes: {href:"#dialog-scrolling"}, id:'scrolling-button', text: 'Scrolling' }}) %>
-          </div>
-        </div>
-        <div class="mdw-dialog" id="confirmdialog-titled">
-          <a class="mdw-dialog__close" href="#titled-button"></a>
-          <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
-            <div class="mdw-dialog__title">Use Google's location service?</div>
-            <div class="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.</div>
-            <div class="mdw-dialog__button-area">
-              <%~ includeFile(T, { button: { ink:'secondary', attributes: {href:"#titled-button"}, text:'Agree' }}) %>
-              <%~ includeFile(T, { button: { ink:'secondary', attributes: {href:"#titled-button"}, text:'Disagree' }}) %>
-            </div>
-          </div>
-        </div>
-        <div class="mdw-dialog" id="dialog-scrolling">
-          <a class="mdw-dialog__close" href="#scrolling-button"></a>
-          <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
-            <div class="mdw-dialog__header">
-              <div class="mdw-dialog__title">Dialog header</div>
-            </div>
-            <div class="mdw-divider mdw-theme" mdw-border-ink="divider"></div>
-            <div class="mdw-dialog__scrolling">
-              <ul class="mdw-list">
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 1</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 2</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 3</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 4</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 5</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 6</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 7</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 8</a>
-                </li>
-                <li class="mdw-list__item">
-                  <a class="mdw-list__content mdw-overlay mdw-ripple mdw-theme" href="#scrolling-button" mdw-ink="default">Item 9</a>
-                </li>
-              </ul>
-            </div>
-            <div class="mdw-divider mdw-theme" mdw-border-ink="divider"></div>
-            <div class="mdw-dialog__button-area">
-              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#scrolling-button" }, text:'Agree' }}) %>
-              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#scrolling-button" }, text:'Disagree' }}) %>
-            </div>
-          </div>
-        </div>
-        <div class="mdw-dialog" id="confirmdialog-text">
-          <a class="mdw-dialog__close" href="#text-button"></a>
-          <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
-            <div class="mdw-dialog__body mdw-theme" mdw-ink="medium">Discard draft?</div>
-            <div class="mdw-dialog__button-area">
-              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#text-button" }, text:'Discard' }}) %>
-              <%~ includeFile(T, { button: { ink:'secondary', attributes: { href:"#text-button" }, text:'Cancel' }}) %>
-            </div>
-          </div>
-        </div>
-        <div class="mdw-dialog" id="dialog-textfield" mdw-width-units="5">
-          <form class="mdw-dialog__popup mdw-theme" mdw-surface="card">
-            <div class="mdw-dialog__header">
-              <div class="mdw-dialog__title">Dialog Title</div>
-            </div>
-            <label class="mdw-textfield mdw-theme" mdw-ink="secondary" style="padding:0 24px;">
-              <div class="mdw-textfield__signifier material-icons">security</div>
-              <input class="mdw-textfield__input" placeholder=" " name="input" mdw-autofocus/>
-              <div class="mdw-textfield__border">
-                <div class="mdw-textfield__outline-gap">
-                  <div class="mdw-textfield__label">Text Field Label</div>
-                </div>
-              </div>
-              <div class="mdw-textfield__error-text">This field is required</div>
-            </label>
-            <div class="mdw-dialog__button-area">
-              <button class="mdw-button mdw-theme" mdw-ink="secondary" tabindex="0" type="submit">Change</button>
-              <button class="mdw-button mdw-theme" mdw-ink="secondary" tabindex="0" type="button">Cancel</button>
-            </div>
-          </form>
-        </div>
-      </div>
-      <%~ includeFile('../_partials/_androidnavbar.eta') %>
-    </div>
-  </div>
-</div>
-<script src="dialog.min.js"></script>

package/docs/pages/dialog.js

@@ -1,174 +0,0 @@
-import * as Button from '../../components/button/index.js';
-import * as Dialog from '../../components/dialog/index.js';
-import { convertElementToCode } from '../_sample-utils.js';
-
-/** @type {HTMLElement} */
-let sampleComponent;
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-function onSampleButtonClick(event) {
-  Dialog.show(sampleComponent, event);
-}
-
-/** @return {void} */
-function updateSampleCode() {
-  const jsRequired = /** @type {HTMLInputElement} */ (document.querySelector('input[name="javascript"][value="required"]')).checked;
-  const jsOptional = /** @type {HTMLInputElement} */ (document.querySelector('input[name="javascript"][value="optional"]')).checked;
-  const useJS = jsRequired || jsOptional;
-
-  // Strip JS related elements and attributes
-  Dialog.detach(sampleComponent);
-  const button = document.querySelector('.component-sample .mdw-button');
-  let closer = document.querySelector('.component-sample .mdw-dialog__close');
-  const dialogButtons = sampleComponent.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-  Button.detach(button);
-  button.removeEventListener('click', onSampleButtonClick);
-  const tabIndexElements = sampleComponent.querySelectorAll('[tabindex]');
-  for (const el of tabIndexElements) el.removeAttribute('tabindex');
-
-  if (closer && (jsRequired || !(closer instanceof HTMLAnchorElement))) {
-    closer.remove();
-    closer = null;
-  }
-
-  if (useJS) {
-    dialogButtons[0].setAttribute('mdw-autofocus', '');
-  } else {
-    dialogButtons[0].removeAttribute('mdw-autofocus');
-  }
-
-  if (jsRequired) {
-    sampleComponent.removeAttribute('id');
-    button.removeAttribute('href');
-    dialogButtons[0].removeAttribute('href');
-    dialogButtons[1].removeAttribute('href');
-  } else {
-    sampleComponent.id = 'sample-dialog';
-    button.setAttribute('href', '#sample-dialog');
-    dialogButtons[0].setAttribute('href', '#');
-    dialogButtons[1].setAttribute('href', '#');
-    if (!closer) {
-      closer = document.createElement('a');
-      closer.classList.add('mdw-dialog__close');
-      closer.setAttribute('href', '#');
-      sampleComponent.insertBefore(closer, sampleComponent.firstElementChild);
-    }
-  }
-
-  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
-  const sampleContainer = document.querySelector('.component-sample__container');
-  const htmlCodeBlocks = [];
-  let el = sampleContainer.firstElementChild;
-  while (el) {
-    const htmlCode = convertElementToCode(el).trim();
-    if (htmlCode) {
-      htmlCodeBlocks.push(htmlCode);
-    }
-    el = el.nextElementSibling;
-  }
-  htmlCodeElement.textContent = htmlCodeBlocks.join('\n');
-
-  // Reattach JS if requested
-  if (useJS) {
-    Dialog.attach(sampleComponent);
-    Button.attach(button);
-    button.addEventListener('click', onSampleButtonClick);
-  }
-
-  const jsCodeElement = document.getElementsByClassName('component-js')[0];
-  jsCodeElement.textContent = [
-    "buttonElement.addEventListener('click', (event) => {",
-    '  mdw.Dialog.show(dialogElement, event);',
-    '});',
-  ].join('\n');
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  const { name, value, checked } = /** @type {HTMLInputElement} */ (event.target);
-  const buttonArea = sampleComponent.getElementsByClassName('mdw-dialog__button-area')[0];
-  switch (name) {
-    case 'stacked-buttons':
-      if (checked) {
-        buttonArea.setAttribute('mdw-stacked', '');
-      } else {
-        buttonArea.removeAttribute('mdw-stacked');
-      }
-      break;
-    case 'width':
-      switch (value) {
-        case 'auto':
-          sampleComponent.removeAttribute('mdw-width-units');
-          break;
-        default:
-          sampleComponent.setAttribute('mdw-width-units', value);
-          break;
-      }
-      break;
-    default:
-  }
-  updateSampleCode();
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  sampleComponent = document.querySelector('.component-sample .mdw-dialog');
-  for (const el of document.querySelectorAll('input[name]')) {
-    el.addEventListener('change', onOptionChange);
-  }
-}
-
-/** @return {void} */
-function setupJSSample1() {
-  const button = document.querySelector('.js .mdw-button');
-  Button.attach(button);
-  const confirmDialogElement = Dialog.create({
-    title: 'Feedback',
-    body: 'Are you enjoying this demo?',
-    buttons: ["It's great!", 'Meh.'],
-    parent: document.querySelector('.render div'),
-  });
-  const alertDialogElement = Dialog.create({
-    body: 'placeholder',
-    buttons: ['K'],
-    parent: document.querySelector('.render div'),
-  });
-  confirmDialogElement.addEventListener(Dialog.CONFIRM_EVENT, () => {
-    Dialog.updateBody(alertDialogElement, 'Thanks!');
-    Dialog.updateButtonText(alertDialogElement, ['K']);
-    Dialog.show(alertDialogElement);
-  });
-  confirmDialogElement.addEventListener(Dialog.CANCEL_EVENT, () => {
-    Dialog.updateBody(alertDialogElement, 'Oh...');
-    Dialog.updateButtonText(alertDialogElement, ['Sorry!']);
-    Dialog.show(alertDialogElement);
-  });
-  button.addEventListener('click', (event) => {
-    Dialog.show(confirmDialogElement, event);
-  });
-}
-
-/** @return {void} */
-function setupJSSample2() {
-  const button = document.querySelectorAll('.js .mdw-button')[1];
-  Button.attach(button);
-  button.addEventListener('click', (event) => {
-    Dialog.show(document.getElementById('dialog-textfield'), event);
-  });
-}
-
-/** @return {void} */
-function initializeSampleComponents() {
-  setupJSSample1();
-  setupJSSample2();
-}
-
-initializeSampleComponents();
-setupComponentOptions();
-updateSampleCode();

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>