@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/docs/pages/menu.eta

@@ -119,26 +119,24 @@
       <div class="render-fill">
         <%~ 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 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 class="mdw-appbar__end">
-              <div class="mdw-tooltip__wrapper mdw-menu__wrapper">
-                <%~ includeFile(T, { button: { icon:true, class:'mdw-tooltip__target material-icons', href:"#moremenu", text:'more_vert' }}) %>
-                <div class="mdw-tooltip mdw-theme mdw-tooltip" mdw-surface="background 700" mdw-dark>Options</div>
-                <div class="mdw-menu" id="moremenu" mdw-direction="reverse" mdw-position="end" mdw-width-units="3">
-                  <a class="mdw-menu__close" href="#"></a>
-                  <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
-                    <div class="mdw-menu__text">Refresh</div>
-                    <div class="mdw-menu__text">Settings</div>
-                    <div class="mdw-menu__text">Send feedback</div>
-                    <div class="mdw-menu__text">Help</div>
-                    <div class="mdw-menu__text">Signout</div>
-                  </div>
+          </div>
+          <div class="mdw-appbar__end">
+            <div class="mdw-tooltip__wrapper mdw-menu__wrapper">
+              <%~ includeFile(T, { button: { icon:true, class:'mdw-tooltip__target material-icons', href:"#moremenu", text:'more_vert' }}) %>
+              <div class="mdw-tooltip mdw-theme mdw-tooltip" mdw-surface="background 700" mdw-dark>Options</div>
+              <div class="mdw-menu" id="moremenu" mdw-direction="reverse" mdw-position="end" mdw-width-units="3">
+                <a class="mdw-menu__close" href="#"></a>
+                <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+                  <div class="mdw-menu__text">Refresh</div>
+                  <div class="mdw-menu__text">Settings</div>
+                  <div class="mdw-menu__text">Send feedback</div>
+                  <div class="mdw-menu__text">Help</div>
+                  <div class="mdw-menu__text">Signout</div>
                 </div>
               </div>
             </div>

package/docs/pages/menu.js

@@ -1,6 +1,5 @@
 import * as Menu from '../../components/menu/index.js';
 import * as MenuItem from '../../components/menu/item.js';
-import { iterateArrayLike } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
@@ -37,13 +36,11 @@ function updateSampleCode() {
   const button = document.querySelector('.component-sample .mdw-button');
   let closer = document.querySelector('.component-sample .mdw-menu__close');
   button.removeEventListener('click', onSampleButtonClick);
-  iterateArrayLike(sampleComponent.querySelectorAll('[tabindex]'), (el) => el.removeAttribute('tabindex'));
+  for (const el of sampleComponent.querySelectorAll('[tabindex]')) el.removeAttribute('tabindex');
 
-  if (closer) {
-    if (jsRequired || (closer instanceof HTMLAnchorElement === false)) {
-      closer.parentElement.removeChild(closer);
-      closer = null;
-    }
+  if (closer && (jsRequired || !(closer instanceof HTMLAnchorElement))) {
+    closer.remove();
+    closer = null;
   }
 
   if (jsRequired) {
@@ -113,8 +110,7 @@ function initializeSampleComponents() {
  * @return {void}
  */
 function onOptionChange(event) {
-  /** @type {HTMLInputElement} */
-  const { name, value } = (event.target);
+  const { name, value } = /** @type {HTMLInputElement} */ (event.target);
   let mdwDirection = sampleComponent.getAttribute('mdw-direction') || '';
   let mdwPosition = sampleComponent.getAttribute('mdw-position') || '';
 
@@ -207,9 +203,9 @@ function onOptionChange(event) {
 /** @return {void} */
 function setupComponentOptions() {
   sampleComponent = document.querySelector('.component-sample .mdw-menu');
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 initializeSampleComponents();

package/docs/pages/overlay.js

@@ -1,4 +1,3 @@
-import { iterateArrayLike } from '../../core/dom.js';
 import * as Overlay from '../../core/overlay/index.js';
 
-iterateArrayLike(document.querySelectorAll('.js .mdw-overlay'), Overlay.attach);
+for (const element of document.querySelectorAll('.js .mdw-overlay')) { Overlay.attach(element); }

package/docs/pages/progress.eta

@@ -4,13 +4,13 @@
   <div class="render">
     <div class="content display-flex">
       <div class="flex-1 display-flex" flex-justify-content="center" flex-align-items="center">
-        <div class="mdw-progress-circle mdw-theme" mdw-ink="primary">
+        <div class="mdw-progress__circle mdw-theme" mdw-ink="primary">
           <svg viewBox="0 0 24 24">
             <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
             <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
           </svg>
         </div>
-        <div class="mdw-progress-circle mdw-theme" mdw-ink="secondary" mdw-determinate>
+        <div class="mdw-progress__circle mdw-theme" mdw-ink="secondary" mdw-determinate>
           <svg viewBox="0 0 24 24">
             <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
             <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>

package/docs/pages/progress.js

@@ -2,7 +2,7 @@ import * as ProgressCircle from '../../components/progress/index.js';
 
 /** @return {void} */
 function setupProgressCircleInterval() {
-  const progressCircleElement = document.querySelector('.mdw-progress-circle[mdw-determinate]');
+  const progressCircleElement = document.querySelector('.mdw-progress__circle[mdw-determinate]');
   ProgressCircle.setValue(progressCircleElement, Math.random() * 100);
   setInterval(() => {
     ProgressCircle.setValue(progressCircleElement, Math.random() * 100);

package/docs/pages/ripple.js

@@ -1,4 +1,3 @@
-import { iterateArrayLike } from '../../core/dom.js';
 import * as Ripple from '../../core/ripple/index.js';
 
-iterateArrayLike(document.querySelectorAll('.js .mdw-ripple'), Ripple.attach);
+for (const element of document.querySelectorAll('.js .mdw-ripple')) Ripple.attach(element);

package/docs/pages/search.eta

@@ -20,7 +20,7 @@
             </div>
             <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
               <div class="custom-busy-indicator display-flex" flex-align-items="center">
-                <div class="mdw-progress-circle">
+                <div class="mdw-progress__circle">
                   <svg viewBox="0 0 24 24">
                     <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
                     <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
@@ -50,7 +50,7 @@
             </div>
             <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
               <div class="custom-busy-indicator display-flex" flex-align-items="center">
-                <div class="mdw-progress-circle">
+                <div class="mdw-progress__circle">
                   <svg viewBox="0 0 24 24">
                     <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
                     <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
@@ -75,19 +75,17 @@
       <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
     </div>
     <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
-      <div class="mdw-appbar__action">
-        <div class="mdw-appbar__start">
-          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
-        </div>
-        <div class="mdw-appbar__title" mdw-custom>
-          <div class="mdw-textfield mdw-theme" id="search-textfield-simple" mdw-solo mdw-ink="secondary">
-            <input class="mdw-textfield__input" placeholder="Search" />
-          </div>
-        </div>
-        <div class="mdw-appbar__end">
-          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+      <div class="mdw-appbar__start">
+        <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
+      </div>
+      <div class="mdw-appbar__title" mdw-custom>
+        <div class="mdw-textfield mdw-theme" id="search-textfield-simple" mdw-solo mdw-ink="secondary">
+          <input class="mdw-textfield__input" placeholder="Search" />
         </div>
       </div>
+      <div class="mdw-appbar__end">
+        <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+      </div>
     </div>
     <div class="content">
       <ul class="mdw-list" id="search-list-simple">
@@ -140,19 +138,17 @@
       <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
     </div>
     <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
-      <div class="mdw-appbar__action">
-        <div class="mdw-appbar__start">
-          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
-        </div>
-        <div class="mdw-appbar__title" mdw-custom>
-          <div class="mdw-textfield mdw-theme" id="search-textfield-multiline" mdw-solo mdw-ink="secondary">
-            <input class="mdw-textfield__input" placeholder="Search" />
-          </div>
-        </div>
-        <div class="mdw-appbar__end">
-          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+      <div class="mdw-appbar__start">
+        <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
+      </div>
+      <div class="mdw-appbar__title" mdw-custom>
+        <div class="mdw-textfield mdw-theme" id="search-textfield-multiline" mdw-solo mdw-ink="secondary">
+          <input class="mdw-textfield__input" placeholder="Search" />
         </div>
       </div>
+      <div class="mdw-appbar__end">
+        <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+      </div>
     </div>
     <div class="content">
       <ul class="mdw-list" id="search-list-multiline">

package/docs/pages/search.js

@@ -3,7 +3,7 @@ import SearchAdapter from '../../adapters/search/index.js';
 import * as ListContent from '../../components/list/content.js';
 import * as ListItem from '../../components/list/item.js';
 import * as TextField from '../../components/textfield/index.js';
-import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { setTextNode } from '../../core/dom.js';
 
 /** @typedef {{line1:string, line2:string}} CustomSearchResult */
 
@@ -18,12 +18,11 @@ let searchDocsMultiline;
  */
 function performFakeSearch(filter) {
   const results = [];
-  // eslint-disable-next-line guard-for-in, no-restricted-syntax
+  // eslint-disable-next-line guard-for-in
   for (const key in navigator) {
-    /** @type {keyof Navigator} */
-    const navKey = (key);
+    const navKey = /** @type {keyof Navigator} */ (key);
     const value = navigator[navKey] && navigator[navKey].toString();
-    if (!filter || key.indexOf(filter) !== -1 || (value && value.indexOf(filter) !== -1)) {
+    if (!filter || key.includes(filter) || (value && value.includes(filter))) {
       results.push({ line1: key, line2: value });
     }
   }
@@ -51,7 +50,7 @@ function showElement(element) {
  * @return {void}
  */
 function searchResultRenderer(listItemElement, result) {
-  if (!listItemElement.children.length) {
+  if (!listItemElement.hasChildNodes()) {
     const markup = `
     <div class="mdw-list__content mdw-theme" mdw-ink="secondary" aria-selected="false">
       <div class="mdw-list__text">
@@ -59,7 +58,6 @@ function searchResultRenderer(listItemElement, result) {
         <div class="mdw-list__text-line"></div>
       </div>
     </div>`;
-    // eslint-disable-next-line no-param-reassign
     listItemElement.innerHTML = markup;
     ListItem.attach(listItemElement);
   }
@@ -72,8 +70,7 @@ function searchResultRenderer(listItemElement, result) {
 function buildCustomSearch1() {
   const textfield = document.getElementById('search-textfield-custom1');
   const list = document.getElementById('search-list-custom1');
-  /** @type {HTMLElement} */
-  const busyIndicator = (textfield.getElementsByClassName('custom-busy-indicator')[0]);
+  const busyIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-busy-indicator')[0]);
 
   // For purpose of this demo results are cached.
   // Actual filter is performed by SearchAdapter
@@ -96,11 +93,10 @@ function buildCustomSearch1() {
     dropdown: true,
     textFilter: 'startsWith',
     suggestionMethod: 'append',
-    performSearch(input, resolve) {
+    performSearch: async (input) => {
       // Use precached results
       if (myCachedResults != null) {
-        resolve(myCachedResults);
-        return;
+        return myCachedResults;
       }
 
       // Display a busy indicator
@@ -110,18 +106,15 @@ function buildCustomSearch1() {
       myCachedResults = performFakeSearch();
 
       // Let busy indicator spin to illustrate loading
-      setTimeout(() => {
-        // Send back the search results
-        resolve(myCachedResults);
-      }, 2000);
+      await setTimeout(() => { /* noop */ }, 2000);
+      return myCachedResults;
     },
-    updateList(searchResults, resolve) {
+    updateList: (searchResults) => {
       // SearchAdapter signaling the UI is ready to update with search results
 
       if (customListAdapter.datasource === searchResults) {
         // Search results have already been mapped. Nothing to do.
         // SearchAdapter handles item filtering.
-        resolve();
         return;
       }
 
@@ -133,16 +126,14 @@ function buildCustomSearch1() {
 
       // Tell ListAdapter to perform a full refresh
       customListAdapter.refresh();
-      resolve();
     },
   });
 
   searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const listContentElement = (event.target);
-    /** @type {HTMLLIElement} */
-    const listItemElement = (listContentElement.parentElement);
+    const listContentElement = /** @type {HTMLElement} */ (event.target);
+    const listItemElement = /** @type {HTMLLIElement} */ (listContentElement.parentElement);
     const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
+    if (!selectedItem) throw new Error('Missing item!');
     const text = `${selectedItem.line1}:${selectedItem.line2}`;
     document.getElementById('search-result-custom1').textContent = text;
   });
@@ -152,10 +143,8 @@ function buildCustomSearch1() {
 function buildCustomSearch2() {
   const textfield = document.getElementById('search-textfield-custom2');
   const list = document.getElementById('search-list-custom2');
-  /** @type {HTMLElement} */
-  const busyIndicator = (textfield.getElementsByClassName('custom-busy-indicator')[0]);
-  /** @type {HTMLElement} */
-  const noResultsIndicator = (textfield.getElementsByClassName('custom-no-results-indicator')[0]);
+  const busyIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-busy-indicator')[0]);
+  const noResultsIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-no-results-indicator')[0]);
 
   /** @type {ListAdapter<CustomSearchResult>} */
   const customListAdapter = new ListAdapter({
@@ -174,7 +163,7 @@ function buildCustomSearch2() {
     debounce: 300,
     dropdown: true,
     filterItems: false,
-    performSearch(searchTerm, resolve) {
+    performSearch: async (searchTerm) => {
       // Clear ListAdapter
       customListAdapter.clear();
 
@@ -182,32 +171,26 @@ function buildCustomSearch2() {
       hideElement(noResultsIndicator);
 
       const myData = performFakeSearch(searchTerm);
-      setTimeout(() => {
-        // Spin for 1000ms
-        resolve(myData);
-      }, 1000);
+      // Spin for 1000ms
+      await setTimeout(() => { /* noop */ }, 1000);
+      return myData;
     },
-    updateList(items, resolve) {
+    updateList: (items) => {
       hideElement(busyIndicator);
 
       if (!items.length) {
         showElement(noResultsIndicator);
-        resolve();
         return;
       }
 
       // Assign results to ListAdapter
       customListAdapter.datasource = items;
       customListAdapter.refresh();
-
-      resolve();
     },
   });
   searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
-    /** @type {HTMLElement} */
-    const listContentElement = (event.target);
-    /** @type {HTMLLIElement} */
-    const listItemElement = (listContentElement.parentElement);
+    const listContentElement = /** @type {HTMLElement} */ (event.target);
+    const listItemElement = /** @type {HTMLLIElement} */ (listContentElement.parentElement);
     const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
     const text = `${selectedItem.line1}:${selectedItem.line2}`;
     document.getElementById('search-result-custom2').textContent = text;
@@ -236,7 +219,7 @@ function setupSearches() {
 
 /** @return {void} */
 function initializeMdwComponents() {
-  iterateArrayLike(document.querySelectorAll('.js .mdw-textfield'), TextField.attach);
+  for (const element of document.querySelectorAll('.js .mdw-textfield')) { TextField.attach(element); }
 }
 
 initializeMdwComponents();

package/docs/pages/selection.eta

@@ -6,9 +6,7 @@
       <div class="render-fill">
         <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
         <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
-          <div class="mdw-appbar__action">
-            <div class="mdw-appbar__title">Styled HTMLInputElement</div>
-          </div>
+          <div class="mdw-appbar__title">Styled HTMLInputElement</div>
         </div>
         <div class="content">
           <div class="display-flex" style="padding:16px;">
@@ -41,9 +39,7 @@
       <div class="render-fill">
         <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
         <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
-          <div class="mdw-appbar__action">
-            <div class="mdw-appbar__title">aria-checked (JS)</div>
-          </div>
+          <div class="mdw-appbar__title">aria-checked (JS)</div>
         </div>
         <div class="content">
           <div class="mdw-list__subheader mdw-theme" id="docs-selection-subheader1" mdw-ink="medium">Switch</div>

package/docs/pages/selection.js

@@ -1,13 +1,12 @@
 import * as List from '../../components/list/index.js';
 import * as Selection from '../../components/selection/index.js';
 import * as SelectionRadioGroup from '../../components/selection/radiogroup.js';
-import { iterateArrayLike } from '../../core/dom.js';
 
 /** @return {void} */
 function initializeMdwComponents() {
-  iterateArrayLike(document.getElementsByClassName('mdw-selection'), Selection.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-selection__radio-group'), SelectionRadioGroup.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-list'), List.attach);
+  for (const element of document.getElementsByClassName('mdw-selection')) Selection.attach(element);
+  for (const element of document.getElementsByClassName('mdw-selection__radio-group')) SelectionRadioGroup.attach(element);
+  for (const element of document.getElementsByClassName('mdw-list')) List.attach(element);
 }
 
 initializeMdwComponents();

package/docs/pages/snackbar.js

@@ -1,5 +1,4 @@
 import * as Snackbar from '../../components/snackbar/index.js';
-import { iterateArrayLike } from '../../core/dom.js';
 import { convertElementToCode } from '../_sample-utils.js';
 
 /** @type {HTMLElement} */
@@ -112,7 +111,7 @@ function onOptionChange(event) {
     case 'button':
       if (value === 'none') {
         if (buttonElement) {
-          buttonElement.parentElement.removeChild(buttonElement);
+          buttonElement.remove();
         }
         break;
       }
@@ -149,9 +148,9 @@ function setupComponentOptions() {
       parent: jsSnackbarContainer,
     });
   });
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+  for (const el of document.querySelectorAll('input[name]')) {
     el.addEventListener('change', onOptionChange);
-  });
+  }
 }
 
 setupComponentOptions();