@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/{docs-src/core → docs/pages}/color.js

@@ -1,6 +1,6 @@
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
-import { iterateArrayLike, nextTick } from '../../core/dom';
+import { iterateArrayLike, nextTick } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
 
 iterateArrayLike(document.getElementsByClassName('mdw-overlay'), Overlay.attach);
 iterateArrayLike(document.getElementsByClassName('mdw-ripple'), Ripple.attach);
@@ -16,7 +16,6 @@ const sampleContrastText = document.getElementById('sample-contrast__text');
 const sampleContrastSelected = document.getElementById('sample-contrast__selected');
 const sampleContrastActivated = document.getElementById('sample-contrast__activated');
 
-
 /** @typedef {{r:number,g:number,b:number,a:number}} Color */
 
 /**
@@ -40,7 +39,7 @@ function parseColor(colorString) {
   return colorString
     .match(/\(([^)]+)\)/)[1]
     .split(',')
-    .map(value => (value == null ? 1.0 : parseFloat(value)))
+    .map((value) => (value == null ? 1.0 : parseFloat(value)))
     .reduce((prev, curr, index) => {
       if (index > 3) {
         throw new Error('Unexpected 5th value');
@@ -76,13 +75,20 @@ function overlayColor(color, overlay) {
  * @return {number}
  */
 function getLuminance(color) {
-  // L = 0.2126 * R + 0.7152 * G + 0.0722 * B
-  return 0.2126
-    * (color.r <= (0.03928 * 255) ? color.r / 255 / 12.92 : ((color.r / 255 + 0.055) / 1.055) ** 2.4)
-    + 0.7152
-    * (color.g <= (0.03928 * 255) ? color.g / 255 / 12.92 : ((color.g / 255 + 0.055) / 1.055) ** 2.4)
-    + 0.0722
-    * (color.b <= (0.03928 * 255) ? color.b / 255 / 12.92 : ((color.b / 255 + 0.055) / 1.055) ** 2.4);
+  /**
+   * @param {number} colorValue
+   * @return {number}
+   */
+  function sRGBMapping(colorValue) {
+    if (colorValue <= (0.03928 * 255)) {
+      return colorValue / 255 / 12.92;
+    }
+    return ((colorValue / 255 + 0.055) / 1.055) ** 2.4;
+  }
+  const R = 0.2126 * sRGBMapping(color.r);
+  const G = 0.7152 * sRGBMapping(color.g);
+  const B = 0.0722 * sRGBMapping(color.b);
+  return (R + G + B);
 }
 
 /**
@@ -126,10 +132,10 @@ function calculateContrast() {
     const style = window.getComputedStyle(sampleButton);
     const surfaceColor = parseColor(style.backgroundColor);
     const inkColor = parseColor(style.color);
-    sampleSurface.textContent = ` ${colorToString(surfaceColor)}`;
-    sampleInk.textContent = ` ${colorToString(inkColor)}`;
+    sampleSurface.textContent = colorToString(surfaceColor);
+    sampleInk.textContent = colorToString(inkColor);
     const flattenedInk = overlayColor(surfaceColor, inkColor);
-    sampleContrastText.textContent = ` ${getContrastRatio(surfaceColor, flattenedInk).toFixed(2)}`;
+    sampleContrastText.textContent = getContrastRatio(surfaceColor, flattenedInk).toFixed(2);
 
     let selectedOpacity = 0.08;
     let activatedOpacity = 0.12;
@@ -146,12 +152,12 @@ function calculateContrast() {
     const selectedOverlay = parseColor(`rgba(${overlayInkColor.r},${overlayInkColor.g},${overlayInkColor.b},${selectedOpacity})`);
     const selectedBackground = overlayColor(surfaceColor, selectedOverlay);
     const selectedColor = overlayColor(selectedFlattenedInk, selectedOverlay);
-    sampleContrastSelected.textContent = ` ${getContrastRatio(selectedBackground, selectedColor).toFixed(2)}`;
+    sampleContrastSelected.textContent = getContrastRatio(selectedBackground, selectedColor).toFixed(2);
 
     const activatedOverlay = parseColor(`rgba(${overlayInkColor.r},${overlayInkColor.g},${overlayInkColor.b},${activatedOpacity})`);
     const activatedBackground = overlayColor(surfaceColor, activatedOverlay);
     const activatedColor = overlayColor(flattenedInk, activatedOverlay);
-    sampleContrastActivated.textContent = ` ${getContrastRatio(activatedBackground, activatedColor).toFixed(2)}`;
+    sampleContrastActivated.textContent = getContrastRatio(activatedBackground, activatedColor).toFixed(2);
   });
 }
 
@@ -174,14 +180,83 @@ function onItemClick(event) {
   calculateContrast();
 }
 
+const currentInkOptions = {
+  color: 'secondary',
+  tone: 'contrast',
+  opacity: '',
+};
+
+const currentSurfaceOptions = {
+  color: 'binary',
+  tone: '',
+};
+
+/** @return {void} */
+function refresh() {
+  const inkProperties = [
+    currentInkOptions.color,
+    currentInkOptions.tone,
+    currentInkOptions.opacity,
+  ].filter((v) => v).join(' ');
+  const surfaceProperties = [
+    currentSurfaceOptions.color,
+    currentSurfaceOptions.tone,
+  ].filter((v) => v).join(' ');
+  iterateArrayLike(document.querySelectorAll('#color-sample-area .demo-core-item'), (el) => {
+    el.setAttribute('mdw-ink', inkProperties);
+    el.setAttribute('mdw-surface', surfaceProperties);
+  });
+  calculateContrast();
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  /** @type {HTMLSelectElement} */
+  const selectElement = (event.target);
+  const { name, value } = selectElement;
+  switch (name) {
+    case 'ink-color':
+      currentInkOptions.color = value;
+      break;
+    case 'ink-tone':
+      currentInkOptions.tone = value;
+      break;
+    case 'ink-opacity':
+      currentInkOptions.opacity = value;
+      break;
+    case 'surface-color':
+      currentSurfaceOptions.color = value;
+      break;
+    case 'surface-tone':
+      currentSurfaceOptions.tone = value;
+      break;
+    default:
+      return;
+  }
+  refresh();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  // sampleComponent = document.querySelector('.component-sample .mdw-button');
+  // Button.attach(sampleComponent);
+  iterateArrayLike(document.querySelectorAll('#color-page-options [name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
 iterateArrayLike(
   document.getElementsByClassName('demo-core-item'),
-  item => item.addEventListener('click', onItemClick)
+  (item) => item.addEventListener('click', onItemClick),
 );
 
 [
   document.getElementById('darkModeButton'),
   document.getElementById('altThemeButton'),
-].forEach(button => button.addEventListener('click', calculateContrast));
+].forEach((button) => button.addEventListener('click', calculateContrast));
 
-calculateContrast();
+setupComponentOptions();
+refresh();

package/docs/pages/color.pug

@@ -0,0 +1,121 @@
+include ../_mixins.pug
+
++header("color")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-columns="4")#color-page-options
+    .mdw-grid__item(mdw-colspan="4")
+      .mdw-grid__content.mdw-theme(mdw-elevation="8")
+        #color-sample-area
+          a#sample-button.demo-core-item.mdw-overlay.mdw-elevation.mdw-ripple.mdw-theme(tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast") Enabled
+          a#sample-button__selected.demo-core-item.mdw-overlay.mdw-elevation.mdw-ripple.mdw-theme(tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-selected="true") Selected
+          a#sample-button__activated.demo-core-item.mdw-overlay.mdw-elevation.mdw-ripple.mdw-theme(tabindex="0" mdw-elevation="1" mdw-surface="binary" mdw-ink="secondary contrast" aria-pressed="true") Activated
+          div(style="margin:8px")
+            p.mdw-type Surface:
+              span#sample-surface.mdw-theme(mdw-ink="medium")   test
+            p.mdw-type Ink:
+              span#sample-ink.mdw-theme(mdw-ink="medium")   test
+          div(style="margin:8px")
+            p.mdw-type Text Contrast:
+              span#sample-contrast__text.mdw-theme(mdw-ink="medium")   test
+              span  / 4.5
+            p.mdw-type Selected Contrast:
+              span#sample-contrast__selected.mdw-theme(mdw-ink="medium")   test
+              span  / 4.5
+            p.mdw-type Activated Contrast:
+              span#sample-contrast__activated.mdw-theme(mdw-ink="medium")   test
+              span  / 4.5
+    .mdw-grid__item(mdw-colspan="2")
+      .mdw-grid__content
+        .mdw-type(mdw-style="subtitle") Ink
+        div
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="ink-color")
+              option.mdw-theme(mdw-surface="card" value="default") Default
+              option.mdw-theme(mdw-surface="card" value="black") Black
+              option.mdw-theme(mdw-surface="card" value="white") White
+              option.mdw-theme(mdw-surface="card" value="primary") Primary
+              option.mdw-theme(mdw-surface="card" value="secondary" selected) Secondary
+              option.mdw-theme(mdw-surface="card" value="warn") Warn
+              option.mdw-theme(mdw-surface="card" value="amber") Amber
+              option.mdw-theme(mdw-surface="card" value="blue") Blue
+              option.mdw-theme(mdw-surface="card" value="cyan") Cyan
+              option.mdw-theme(mdw-surface="card" value="red") Red
+              option.mdw-theme(mdw-surface="card" value="green") Green
+              option.mdw-theme(mdw-surface="card" value="deeppurple") Deeppurple
+              option.mdw-theme(mdw-surface="card" value="purple") Purple
+              option.mdw-theme(mdw-surface="card" value="yellow") Yellow
+              option.mdw-theme(mdw-surface="card" value="teal") Teal
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Color
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="ink-tone")
+              option.mdw-theme(mdw-surface="card" value="" selected) Auto
+              option.mdw-theme(mdw-surface="card" value="light") Light
+              option.mdw-theme(mdw-surface="card" value="contrast" selected) Contrast
+              option.mdw-theme(mdw-surface="card" value="A100") A100
+              option.mdw-theme(mdw-surface="card" value="A200") A200
+              option.mdw-theme(mdw-surface="card" value="A400") A400
+              option.mdw-theme(mdw-surface="card" value="A700") A700
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Tone
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="ink-opacity")
+              option.mdw-theme(mdw-surface="card" value="" selected) Auto
+              option.mdw-theme(mdw-surface="card" value="solid") Solid
+              option.mdw-theme(mdw-surface="card" value="high") High
+              option.mdw-theme(mdw-surface="card" value="medium") Medium
+              option.mdw-theme(mdw-surface="card" value="inactive") Inactive
+              option.mdw-theme(mdw-surface="card" value="divider") Divider
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Opacity
+    .mdw-grid__item(mdw-colspan="2")
+      .mdw-grid__content
+        .mdw-type(mdw-style="subtitle") Surface
+        #color-page-options
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="surface-color")
+              option.mdw-theme(mdw-surface="card" value="card") Card
+              option.mdw-theme(mdw-surface="card" value="binary" selected) Binary
+              option.mdw-theme(mdw-surface="card" value="black") Black
+              option.mdw-theme(mdw-surface="card" value="white") White
+              option.mdw-theme(mdw-surface="card" value="background") Background
+              option.mdw-theme(mdw-surface="card" value="primary") Primary
+              option.mdw-theme(mdw-surface="card" value="secondary") Secondary
+              option.mdw-theme(mdw-surface="card" value="warn") Warn
+              option.mdw-theme(mdw-surface="card" value="amber") Amber
+              option.mdw-theme(mdw-surface="card" value="blue") Blue
+              option.mdw-theme(mdw-surface="card" value="cyan") Cyan
+              option.mdw-theme(mdw-surface="card" value="red") Red
+              option.mdw-theme(mdw-surface="card" value="green") Green
+              option.mdw-theme(mdw-surface="card" value="deeppurple") Deeppurple
+              option.mdw-theme(mdw-surface="card" value="purple") Purple
+              option.mdw-theme(mdw-surface="card" value="yellow") Yellow
+              option.mdw-theme(mdw-surface="card" value="teal") Teal
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Color
+          label.mdw-textfield.mdw-theme(mdw-ink="secondary" mdw-outlined)
+            select.mdw-textfield__input(name="surface-tone")
+              option.mdw-theme(mdw-surface="card" value="" selected) Default
+              option.mdw-theme(mdw-surface="card" value="alt") Alternate
+              option.mdw-theme(mdw-surface="card" value="50") 50
+              option.mdw-theme(mdw-surface="card" value="100") 100
+              option.mdw-theme(mdw-surface="card" value="200") 200
+              option.mdw-theme(mdw-surface="card" value="300") 300
+              option.mdw-theme(mdw-surface="card" value="400") 400
+              option.mdw-theme(mdw-surface="card" value="500") 500
+              option.mdw-theme(mdw-surface="card" value="600") 600
+              option.mdw-theme(mdw-surface="card" value="700") 700
+              option.mdw-theme(mdw-surface="card" value="800") 800
+              option.mdw-theme(mdw-surface="card" value="900") 900
+            .mdw-textfield__icon(mdw-dropdown)
+            .mdw-textfield__border
+              .mdw-textfield__outline-gap
+                .mdw-textfield__label Tone
+  script(src='color.min.js')

package/docs/pages/datatable.eta

@@ -0,0 +1,323 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'datatable'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>
+      <div class="mdw-datatable mdw-theme" mdw-ink="primary" style="overflow-x:auto;">
+        <table>
+          <caption>Standard HTML Table (CSS Only)</caption>
+          <thead>
+            <tr>
+              <th>Dessert (100g serving)</th>
+              <th>Calories</th>
+              <th>Fat (g)</th>
+              <th>Carbs (g)</th>
+              <th>Protein (g)</th>
+              <th>Sodium (mg)</th>
+              <th>Calcium (%)</th>
+              <th>Iron (%)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Frozen Yogurt</td>
+              <td>159</td>
+              <td>6.0</td>
+              <td>24</td>
+              <td>4.0</td>
+              <td>87</td>
+              <td>14%</td>
+              <td>1%</td>
+            </tr>
+            <tr>
+              <td>Ice cream sandwich</td>
+              <td>237</td>
+              <td>9.0</td>
+              <td>37</td>
+              <td>4.3</td>
+              <td>129</td>
+              <td>8%</td>
+              <td>1%</td>
+            </tr>
+            <tr>
+              <td>Eclair</td>
+              <td>262</td>
+              <td>16.0</td>
+              <td>24</td>
+              <td>6.0</td>
+              <td>337</td>
+              <td>6%</td>
+              <td>7%</td>
+            </tr>
+            <tr>
+              <td>Cupcake</td>
+              <td>305</td>
+              <td>3.7</td>
+              <td>67</td>
+              <td>4.3</td>
+              <td>413</td>
+              <td>3%</td>
+              <td>8%</td>
+            </tr>
+            <tr>
+              <td>Gingerbread</td>
+              <td>356</td>
+              <td>16.0</td>
+              <td>49</td>
+              <td>3.9</td>
+              <td>327</td>
+              <td>7%</td>
+              <td>16%</td>
+            </tr>
+            <tr>
+              <td>Jelly bean</td>
+              <td>375</td>
+              <td>0.0</td>
+              <td>94</td>
+              <td>0.0</td>
+              <td>50</td>
+              <td>0%</td>
+              <td>0%</td>
+            </tr>
+            <tr>
+              <td>Lollipop</td>
+              <td>392</td>
+              <td>0.2</td>
+              <td>98</td>
+              <td>0</td>
+              <td>38</td>
+              <td>0%</td>
+              <td>2%</td>
+            </tr>
+            <tr>
+              <td>Honeycomb</td>
+              <td>408</td>
+              <td>3.2</td>
+              <td>87</td>
+              <td>6.5</td>
+              <td>562</td>
+              <td>0%</td>
+              <td>45%</td>
+            </tr>
+            <tr>
+              <td>Donut</td>
+              <td>452</td>
+              <td>25.0</td>
+              <td>51</td>
+              <td>4.9</td>
+              <td>326</td>
+              <td>2%</td>
+              <td>22%</td>
+            </tr>
+            <tr>
+              <td>Kitkat</td>
+              <td>518</td>
+              <td>26.0</td>
+              <td>65</td>
+              <td>7</td>
+              <td>54</td>
+              <td>12%</td>
+              <td>6%</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>
+      <div class="mdw-datatable js mdw-theme" mdw-ink="primary" mdw-cell-focusable>
+        <div class="mdw-datatable__header">
+          <div class="mdw-datatable__header-text">Customized HTML Table</div>
+        </div>
+        <div class="mdw-datatable__scroller">
+          <table>
+            <thead>
+              <tr>
+                <th aria-sort="none" mdw-text mdw-primary-column><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Dessert (100g serving)</th>
+                <th aria-sort="ascending" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span><span class="mdw-tooltip__wrapper"><span class="mdw-tooltip__target">Calories</span><div class="mdw-tooltip mdw-theme" mdw-surface="background 700" mdw-dark>The total amount of food energy in the given serving size.</div></span></th>
+                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Fat (g)</th>
+                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Carbs (g)</th>
+                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Protein (g)</th>
+                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Sodium (mg)</th>
+                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Calcium (%)</th>
+                <th aria-sort="none" mdw-number><span class="mdw-datatable__sort-icon material-icons">arrow_downward</span>Iron (%)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td mdw-text mdw-primary-column>Frozen Yogurt</td>
+                <td mdw-number>159</td>
+                <td mdw-number>6.0</td>
+                <td mdw-number>24</td>
+                <td mdw-number>4.0</td>
+                <td mdw-number>87</td>
+                <td mdw-number>14%</td>
+                <td mdw-number>1%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Ice cream sandwich</td>
+                <td mdw-number>237</td>
+                <td mdw-number>9.0</td>
+                <td mdw-number>37</td>
+                <td mdw-number>4.3</td>
+                <td mdw-number>129</td>
+                <td mdw-number>8%</td>
+                <td mdw-number>1%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Eclair</td>
+                <td mdw-number>262</td>
+                <td mdw-number>16.0</td>
+                <td mdw-number>24</td>
+                <td mdw-number>6.0</td>
+                <td mdw-number>337</td>
+                <td mdw-number>6%</td>
+                <td mdw-number>7%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Cupcake</td>
+                <td mdw-number>305</td>
+                <td mdw-number>3.7</td>
+                <td mdw-number>67</td>
+                <td mdw-number>4.3</td>
+                <td mdw-number>413</td>
+                <td mdw-number>3%</td>
+                <td mdw-number>8%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Gingerbread</td>
+                <td mdw-number>356</td>
+                <td mdw-number>16.0</td>
+                <td mdw-number>49</td>
+                <td mdw-number>3.9</td>
+                <td mdw-number>327</td>
+                <td mdw-number>7%</td>
+                <td mdw-number>16%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Jelly bean</td>
+                <td mdw-number>375</td>
+                <td mdw-number>0.0</td>
+                <td mdw-number>94</td>
+                <td mdw-number>0.0</td>
+                <td mdw-number>50</td>
+                <td mdw-number>0%</td>
+                <td mdw-number>0%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Lollipop</td>
+                <td mdw-number>392</td>
+                <td mdw-number>0.2</td>
+                <td mdw-number>98</td>
+                <td mdw-number>0</td>
+                <td mdw-number>38</td>
+                <td mdw-number>0%</td>
+                <td mdw-number>2%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Honeycomb</td>
+                <td mdw-number>408</td>
+                <td mdw-number>3.2</td>
+                <td mdw-number>87</td>
+                <td mdw-number>6.5</td>
+                <td mdw-number>562</td>
+                <td mdw-number>0%</td>
+                <td mdw-number>45%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Donut</td>
+                <td mdw-number>452</td>
+                <td mdw-number>25.0</td>
+                <td mdw-number>51</td>
+                <td mdw-number>4.9</td>
+                <td mdw-number>326</td>
+                <td mdw-number>2%</td>
+                <td mdw-number>22%</td>
+              </tr>
+              <tr>
+                <td mdw-text mdw-primary-column>Kitkat</td>
+                <td mdw-number>518</td>
+                <td mdw-number>26.0</td>
+                <td mdw-number>65</td>
+                <td mdw-number>7</td>
+                <td mdw-number>54</td>
+                <td mdw-number>12%</td>
+                <td mdw-number>6%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="mdw-datatable__footer">
+          <div class="mdw-datatable__footer-options">
+            <div>Rows per page</div>
+            <label class="mdw-textfield" mdw-solo>
+              <select class="mdw-textfield__input">
+                <option class="mdw-theme" mdw-surface="card" value="10">10</option>
+                <option class="mdw-theme" mdw-surface="card" value="25">25</option>
+                <option class="mdw-theme" mdw-surface="card" value="50">50</option>
+                <option class="mdw-theme" mdw-surface="card" value="100">100</option>
+              </select>
+              <div class="mdw-textfield__icon" mdw-dropdown></div>
+            </label>
+          </div>
+          <div class="mdw-datatable__footer-details">1-10 of 10</div>
+          <div class="mdw-datatable__footer-controls">
+            <%~ includeFile(T, { button: {  icon:true, disabled:true , class:'material-icons', text:'chevron_left' }}) %>
+            <%~ includeFile(T, { button: {  icon: true, disabled:true , class:'material-icons', text:'chevron_right' }}) %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <div class="mdw-card mdw-theme" mdw-surface="card" mdw-border-ink>
+      <div class="mdw-datatable js mdw-theme" id="dynamic-table" mdw-ink="primary" mdw-row-focusable style="max-height:80vh;">
+        <div class="mdw-datatable__header">
+          <div class="mdw-datatable__header-text">Data Table Adapter</div>
+          <div class="mdw-datatable__header-controls">
+            <div class="mdw-menu__wrapper">
+              <%~ includeFile(T, { button: {  icon:true, ink:'primary' , class:'material-icons', attributes: {'mdw-overlay-default':"medium", 'aria-pressed':"false"}, text:'filter_list' }}) %>
+              <div class="mdw-menu" mdw-position="end">
+                <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                  <div class="mdw-menu__item" aria-checked="true" data-filter="none">
+                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
+                    <div class="mdw-menu__text">No filter</div>
+                  </div>
+                  <div class="mdw-menu__item" data-filter="md">
+                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
+                    <div class="mdw-menu__text">Contains 'md'</div>
+                  </div>
+                  <div class="mdw-menu__item" data-filter="div9">
+                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
+                    <div class="mdw-menu__text">Random divisible by 9</div>
+                  </div>
+                  <div class="mdw-menu__item" data-filter="bool">
+                    <div class="mdw-menu__radio mdw-theme material-icons" mdw-ink="medium">check</div>
+                    <div class="mdw-menu__text">bool is checked</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="mdw-menu__wrapper">
+              <%~ includeFile(T, { button: {  icon:true, ink:'medium' , class:'material-icons', text:'more_vert' }}) %>
+              <div class="mdw-menu" mdw-position="end">
+                <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                  <div class="mdw-menu__item" aria-checked="true" data-option="throttle">
+                    <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                    <div class="mdw-menu__text">Throttle</div>
+                  </div>
+                  <div class="mdw-menu__item" aria-checked="true" data-option="paginate">
+                    <div class="mdw-menu__check mdw-theme material-icons" mdw-ink="medium">check</div>
+                    <div class="mdw-menu__text">Paginate</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="datatable.min.js"></script>