@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/{docs-src/components → docs/pages}/datatable.js

@@ -1,26 +1,39 @@
-import { iterateArrayLike } from '../../core/dom';
-import * as Button from '../../components/button/index';
-import * as DataTable from '../../components/datatable/index';
-import * as Menu from '../../components/menu/index';
-import * as MenuItem from '../../components/menu/item';
-import DataTableAdapter from '../../adapters/datatable/index';
+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';
+import { iterateArrayLike } from '../../core/dom.js';
 
 /** @return {void} */
 function initializeMdwComponents() {
   iterateArrayLike(document.querySelectorAll('.mdw-datatable.js'), DataTable.attach);
   iterateArrayLike(document.getElementsByClassName('mdw-button'), Button.attach);
+  iterateArrayLike(document.getElementsByClassName('mdw-selection'), Selection.attach);
   iterateArrayLike(document.getElementsByClassName('mdw-menu'), Menu.attach);
 }
 
+/**
+ * @typedef {Object} CustomData
+ * @prop {boolean} selected
+ * @prop {string} text
+ * @prop {string} text2
+ * @prop {boolean} check1
+ * @prop {number} increment
+ * @prop {number} random
+ */
 
-/** @type {DataTableAdapter} */
+/** @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).substring(2),
       text2: Math.random().toString(36).substring(2),
       check1: Math.random() > 0.5,
@@ -84,8 +97,8 @@ function buildDynamicTable() {
   Menu.attach(filterMenu);
   Menu.attach(optionsMenu);
 
-  filterButton.addEventListener('click', event => Menu.show(filterMenu, event));
-  optionsButton.addEventListener('click', event => Menu.show(optionsMenu, event));
+  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) => {
     /** @type {HTMLElement} */
@@ -96,13 +109,13 @@ function buildDynamicTable() {
         dynamicTableAdapter.setFilter(null);
         break;
       case 'md':
-        dynamicTableAdapter.setFilter(data => data.text.indexOf('md') !== -1 || data.text2.indexOf('md') !== -1);
+        dynamicTableAdapter.setFilter((data) => data.text.indexOf('md') !== -1 || data.text2.indexOf('md') !== -1);
         break;
       case 'div9':
-        dynamicTableAdapter.setFilter(data => data.random % 9 === 0);
+        dynamicTableAdapter.setFilter((data) => data.random % 9 === 0);
         break;
       case 'bool':
-        dynamicTableAdapter.setFilter(data => data.check1);
+        dynamicTableAdapter.setFilter((data) => data.check1);
         break;
     }
     dynamicTableAdapter.refresh();
@@ -113,7 +126,7 @@ function buildDynamicTable() {
     }
   });
   filterMenu.addEventListener(MenuItem.ACTIVATE_EVENT, () => Menu.hide(filterMenu));
-  
+
   optionsMenu.addEventListener(MenuItem.CHECK_EVENT, (event) => {
     /** @type {HTMLElement} */
     const menuItem = (event.target);

package/docs/pages/datatable.pug

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

package/docs/pages/dialog.eta

@@ -0,0 +1,186 @@
+<% 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__action">
+            <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>
+        <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-src/components → docs/pages}/dialog.js

@@ -1,8 +1,7 @@
-import * as Button from '../../components/button/index';
-import * as Dialog from '../../components/dialog/index';
-import { iterateArrayLike } from '../../core/dom';
-import { changeElementTagName, convertElementToCode } from '../_sample-utils';
-
+import * as Button from '../../components/button/index.js';
+import * as Dialog from '../../components/dialog/index.js';
+import { iterateArrayLike } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
 let sampleComponent;
@@ -17,19 +16,19 @@ function onSampleButtonClick(event) {
 
 /** @return {void} */
 function updateSampleCode() {
-  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
-  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
+  const 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);
-  let button = document.querySelector('.component-sample .mdw-button');
+  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]');
-  iterateArrayLike(tabIndexElements, el => el.removeAttribute('tabindex'));
+  iterateArrayLike(tabIndexElements, (el) => el.removeAttribute('tabindex'));
 
   if (closer) {
     if (jsRequired || (closer instanceof HTMLAnchorElement === false)) {
@@ -50,7 +49,7 @@ function updateSampleCode() {
     dialogButtons[0].removeAttribute('href');
     dialogButtons[1].removeAttribute('href');
   } else {
-    sampleComponent.setAttribute('id', 'sample-dialog');
+    sampleComponent.id = 'sample-dialog';
     button.setAttribute('href', '#sample-dialog');
     dialogButtons[0].setAttribute('href', '#');
     dialogButtons[1].setAttribute('href', '#');
@@ -62,7 +61,6 @@ function updateSampleCode() {
     }
   }
 
-
   const htmlCodeElement = document.getElementsByClassName('component-html')[0];
   const sampleContainer = document.querySelector('.component-sample__container');
   const htmlCodeBlocks = [];
@@ -96,7 +94,7 @@ function updateSampleCode() {
  * @return {void}
  */
 function onOptionChange(event) {
-  const { name, value, checked } = event.target;
+  const { name, value, checked } = /** @type {HTMLInputElement} */ (event.target);
   const buttonArea = sampleComponent.getElementsByClassName('mdw-dialog__button-area')[0];
   switch (name) {
     case 'stacked-buttons':
@@ -130,7 +128,7 @@ function setupComponentOptions() {
 }
 
 /** @return {void} */
-function initializeSampleComponents() {
+function setupJSSample1() {
   const button = document.querySelector('.js .mdw-button');
   Button.attach(button);
   const confirmDialogElement = Dialog.create({
@@ -159,6 +157,21 @@ function initializeSampleComponents() {
   });
 }
 
+/** @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();