@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/list/_theme.scss

@@ -1,111 +1,102 @@
-@use '../../core/theme/_mixins.scss' as theme;
+.mdw-theme {
+  --mdw-list__divider-color: var(--mdw-divider-color);
+  --mdw-list__focus-opacity: var(--mdw-list__focus-opacity-value);
+  --mdw-list__focus-selected-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__selected-opacity-value));
+  --mdw-list__focus-activated-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__activated-opacity-value));
+  --mdw-list__focus-hover-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__hover-opacity-value));
+  --mdw-list__focus-hover-selected-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__hover-opacity-value) + var(--mdw-list__selected-opacity-value));
+  --mdw-list__focus-hover-activated-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__hover-opacity-value) + var(--mdw-list__activated-opacity-value));
+}
 
-$themeValues: (
-  divider-color:                 theme.$foreground,
-  divider-opacity:               theme.$divider-opacity,
+.mdw-theme[mdw-light] {
+  --mdw-list__focus-opacity-value: 0.12;
+  --mdw-list__hover-opacity-value: 0.04;
+  --mdw-list__selected-opacity-value: 0.08;
+  --mdw-list__activated-opacity-value: 0.12;
+}
 
-  focus-opacity:                 (0.12, 0.24),
-  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
-  selected-focus-opacity:        (0.08 + 0.12, 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
+.mdw-theme[mdw-dark] {
+  --mdw-list__focus-opacity-value: 0.24;
+  --mdw-list__hover-opacity-value: 0.08;
+  --mdw-list__selected-opacity-value: 0.16;
+  --mdw-list__activated-opacity-value: 0.24;
+}
 
-  activated-focus-opacity:       (0.12 + 0.12, 0.24 + 0.24),
-  activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
 
-) !default;
 
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('list', $themeValues, $key, $type);
+.mdw-list__content {
+  &[mdw-ink][aria-current] {
+    .mdw-list__icon,
+    .mdw-list__text {
+      color: inherit;
+    }
+  }
 }
 
-@mixin addThemeRules($type: 'var') {
-  .mdw-list__content {
-    &[mdw-ink][aria-current] {
-      .mdw-list__icon,
-      .mdw-list__text {
-        color: inherit;
-      }
-    }
+.mdw-list[mdw-divider] {
+  & > .mdw-list__item:not(:last-child) .mdw-list__text::after {
+    background-color: var(--mdw-list__divider-color);
   }
+}
 
-  .mdw-list[mdw-divider] {
-    & > .mdw-list__item:not(:last-child) .mdw-list__text::after {
-      background-color: RGBA(getThemeValue("divider-color", $type), getThemeValue("divider-opacity", $type));
+.mdw-list__item[aria-expanded]:focus {
+  & > .mdw-list__content {
+    &:not([mdw-overlay-touch="true"]) {
+      &:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
+        opacity: var(--mdw-list__focus-opacity);
+      }
+
+      &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
+        &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+          opacity: var(--mdw-list__focus-hover-opacity);
+        }
+      }
     }
-  }
 
-  .mdw-list__item[aria-expanded]:focus {
-    & > .mdw-list__content {
+    // Selected
+    &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
       &:not([mdw-overlay-touch="true"]) {
-        &:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
-          opacity: getThemeValue("focus-opacity", $type);
+        &:focus:not([mdw-overlay-off~="focus"])::before {
+          opacity: var(--mdw-list__focus-selected-opacity);
         }
-  
-        &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
+
+        &:not([aria-disabled="true"]) {
           &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("hover-focus-opacity", $type);
+            opacity: var(--mdw-list__focus-hover-selected-opacity);
           }
         }
       }
-  
-      // Selected
-      &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
-        &:not([mdw-overlay-touch="true"]) {
-          &:focus:not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("selected-focus-opacity", $type);
-          }
-  
-          &:not([aria-disabled="true"]) {
-            &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-              opacity: getThemeValue("selected-hover-focus-opacity", $type);
-            }
-          }
+    }
+
+    // Activated
+    &[aria-current]:not([mdw-overlay-off~="current"]),
+    &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
+      &:not([mdw-overlay-touch="true"]) {
+        &:not([mdw-overlay-off~="focus"])::before {
+          opacity: var(--mdw-list__focus-activated-opacity);
         }
-      }
-  
-      // Activated
-      &[aria-current]:not([mdw-overlay-off~="current"]),
-      &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
-        &:not([mdw-overlay-touch="true"]) {
-          &:not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("activated-focus-opacity", $type);
-          }
-  
-          &:not([aria-disabled="true"]) {
-            &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-              opacity: getThemeValue("activated-hover-focus-opacity", $type);
-            }
+
+        &:not([aria-disabled="true"]) {
+          &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+            opacity: var(--mdw-list__focus-hover-activated-opacity);
           }
         }
       }
     }
   }
+}
 
-  .mdw-list__item[aria-expanded="true"] {
-    &::before,
-    &::after {
-      background-color: RGBA(getThemeValue("divider-color", $type), getThemeValue("divider-opacity", $type));
-    }
+.mdw-list__item[aria-expanded="true"] {
+  &::before,
+  &::after {
+    background-color: var(--mdw-list__divider-color);
+  }
 
-    &[mdw-ink][aria-expanded="true"] {
-      & > .mdw-list__content,
-      & > .mdw-list__content::before,
-      & > .mdw-list__content > .mdw-list__text {
-        color: inherit;
-      }
+  &[mdw-ink][aria-expanded="true"] {
+    & > .mdw-list__content,
+    & > .mdw-list__content::before,
+    & > .mdw-list__content > .mdw-list__text {
+      color: inherit;
     }
   }
-  
-}
-
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('list', $themeValues) {
-  @include addThemeRules();
-}
+}

package/components/list/content.js

@@ -1,6 +1,6 @@
 import * as Attributes from '../../core/aria/attributes.js';
 import * as Keyboard from '../../core/aria/keyboard.js';
-import { dispatchDomEvent, iterateArrayLike } from '../../core/dom.js';
+import { dispatchDomEvent } from '../../core/dom.js';
 import * as Overlay from '../../core/overlay/index.js';
 import * as Ripple from '../../core/ripple/index.js';
 
@@ -19,8 +19,7 @@ function onEnterKey(event) {
     || event.detail.altKey || event.detail.metaKey) {
     return;
   }
-  /** @type {HTMLElement} */
-  const listContentElement = (event.currentTarget);
+  const listContentElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (!listContentElement) {
     return;
   }
@@ -39,8 +38,7 @@ function onEnterKey(event) {
  */
 export function onClick(event) {
   event.preventDefault();
-  /** @type {HTMLElement} */
-  const listContentElement = (event.currentTarget);
+  const listContentElement = /** @type {HTMLElement} */ (event.currentTarget);
   if (Attributes.isDisabled(listContentElement)) {
     return;
   }
@@ -52,17 +50,15 @@ export function onClick(event) {
  * @return {void}
  */
 export function attach(listContentElement) {
-  if (!listContentElement.hasAttribute('role')) {
-    if (listContentElement.parentElement.getAttribute('role') === 'none') {
-      listContentElement.setAttribute('role', 'option');
-    }
+  if (!listContentElement.hasAttribute('role') && listContentElement.parentElement.getAttribute('role') === 'none') {
+    listContentElement.setAttribute('role', 'option');
   }
-  iterateArrayLike(listContentElement.getElementsByClassName('mdw-list__icon'), (el) => {
+  for (const el of listContentElement.getElementsByClassName('mdw-list__icon')) {
     el.setAttribute('aria-hidden', 'true');
-  });
-  iterateArrayLike(listContentElement.getElementsByClassName('mdw-list__avatar'), (el) => {
+  }
+  for (const el of listContentElement.getElementsByClassName('mdw-list__avatar')) {
     el.setAttribute('aria-hidden', 'true');
-  });
+  }
   listContentElement.addEventListener('click', onClick);
 
   if (!listContentElement.hasAttribute('mdw-no-overlay')) {

package/components/list/index.js

@@ -5,7 +5,6 @@
 import * as Attributes from '../../core/aria/attributes.js';
 import * as Keyboard from '../../core/aria/keyboard.js';
 import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
-import { iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom.js';
 
 import * as ListContent from './content.js';
 import * as ListItem from './item.js';
@@ -15,25 +14,23 @@ import * as ListItem from './item.js';
  * @return {void}
  */
 function onContentFocusEvent(event) {
-  /** @type {HTMLElement} */
-  const listElement = (event.currentTarget);
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
   const onFocusInteraction = listElement.getAttribute('mdw-on-focus');
   if (!onFocusInteraction) {
     return;
   }
-  /** @type {HTMLElement} */
-  const listContentElement = (event.target);
+  const listContentElement = /** @type {HTMLElement} */ (event.target);
   if (Attributes.isDisabled(listContentElement)) {
     return;
   }
-  onFocusInteraction.split(' ').forEach((interaction) => {
+  for (const interaction of onFocusInteraction.split(' ')) {
     switch (interaction) {
       case 'select':
         ListContent.setSelected(listContentElement, true);
         break;
       default:
     }
-  });
+  }
 }
 
 /**
@@ -41,8 +38,7 @@ function onContentFocusEvent(event) {
  * @return {void}
  */
 function onSelectedChangeEvent(event) {
-  /** @type {HTMLElement} */
-  const listElement = (event.currentTarget);
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
   // List is readonly
   if (listElement.getAttribute('aria-readonly') === 'true') {
     event.stopPropagation();
@@ -54,8 +50,7 @@ function onSelectedChangeEvent(event) {
     // Bubble up
     return;
   }
-  const { detail } = event;
-  if (detail.value === 'false') {
+  if (event.detail.value === 'false') {
     // Item is radio-like and cannot be unselected
     if (listElement.getAttribute('aria-required') === 'true'
       && listElement.getAttribute('aria-multiselectable') !== 'true') {
@@ -64,8 +59,7 @@ function onSelectedChangeEvent(event) {
     }
     return;
   }
-  /** @type {HTMLElement} */
-  const itemElement = (event.target);
+  const itemElement = /** @type {HTMLElement} */ (event.target);
   if (listElement.getAttribute('aria-multiselectable') !== 'true') {
     // Item is radio-like and must uncheck others
     setTimeout(() => {
@@ -74,13 +68,11 @@ function onSelectedChangeEvent(event) {
         return;
       }
       const role = itemElement.getAttribute('role');
-      iterateArrayLike(listElement.querySelectorAll(`[role="${role}"][aria-selected="true"]`),
-        (item) => {
-          if (item === itemElement) {
-            return;
-          }
+      for (const item of listElement.querySelectorAll(`[role="${role}"][aria-selected="true"]`)) {
+        if (item !== itemElement) {
           item.setAttribute('aria-selected', 'false');
-        });
+        }
+      }
     });
   }
 }
@@ -91,10 +83,8 @@ function onSelectedChangeEvent(event) {
  */
 function onTabIndexZeroed(event) {
   event.stopPropagation();
-  /** @type {HTMLElement} */
-  const listElement = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const currentItem = (event.target);
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const currentItem = /** @type {HTMLElement} */ (event.target);
   switch (listElement.getAttribute('role')) {
     case 'tree':
       RovingTabIndex.removeTabIndex(listElement.querySelectorAll('[role="treeitem"]'), [currentItem]);
@@ -119,8 +109,7 @@ function onDownArrowKey(event) {
   }
   event.preventDefault();
   event.stopPropagation();
-  /** @type {HTMLElement} */
-  const listElement = (event.currentTarget);
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
   switch (listElement.getAttribute('role')) {
     case 'tree':
       RovingTabIndex.selectNext(listElement.querySelectorAll('[role="treeitem"]'));
@@ -146,8 +135,7 @@ function onUpArrowKey(event) {
   }
   event.preventDefault();
   event.stopPropagation();
-  /** @type {HTMLElement} */
-  const listElement = (event.currentTarget);
+  const listElement = /** @type {HTMLElement} */ (event.currentTarget);
   switch (listElement.getAttribute('role')) {
     case 'tree':
       RovingTabIndex.selectPrevious(listElement.querySelectorAll('[role="treeitem"]'));
@@ -188,21 +176,27 @@ export function attach(listElement) {
     const parentRole = listElement.parentElement && listElement.parentElement.getAttribute('role');
     if (parentRole === 'treeitem') {
       newRole = 'group';
-    } else if (iterateSomeOfArrayLike(listElement.children,
-      (child) => child.hasAttribute('aria-expanded') && child.classList.contains('mdw-list__item'))) {
-      newRole = 'tree';
+    } else {
+      for (const child of listElement.children) {
+        if (child.hasAttribute('aria-expanded') && child.classList.contains('mdw-list__item')) {
+          newRole = 'tree';
+          break;
+        }
+      }
     }
     listElement.setAttribute('role', newRole);
     role = newRole;
   }
 
   setupAria(listElement, role);
-  iterateArrayLike(listElement.children, (child) => {
+  for (const child of listElement.children) {
     if (child.classList.contains('mdw-list__item')) {
       ListItem.attach(child);
     }
-  });
-  iterateArrayLike(listElement.getElementsByClassName('mdw-list'), attach);
+  }
+  for (const el of listElement.getElementsByClassName('mdw-list')) {
+    attach(el);
+  }
   if (listElement.hasAttribute('mdw-list-js')) {
     return;
   }
@@ -237,7 +231,7 @@ export function attach(listElement) {
  * @return {void}
  */
 export function attachAll(root = document) {
-  iterateArrayLike(root.getElementsByClassName('mdw-list'), attach);
+  for (const el of root.getElementsByClassName('mdw-list')) attach(el);
 }
 
 /**
@@ -245,13 +239,15 @@ export function attachAll(root = document) {
  * @return {void}
  */
 export function detach(listElement) {
-  iterateArrayLike(listElement.children, (child) => {
+  for (const child of listElement.children) {
     if (child.classList.contains('mdw-list__item')) {
       ListItem.detach(child);
     }
-  });
-  iterateArrayLike(listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`),
-    RovingTabIndex.detach);
+  }
+  const elements = listElement.querySelectorAll(`[role="${listElement.getAttribute('role') === 'tree' ? 'treeitem' : 'option'}"]`);
+  for (const element of elements) {
+    RovingTabIndex.detach(element);
+  }
   listElement.removeEventListener(ListContent.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
   listElement.removeEventListener(Keyboard.DOWN_ARROW_KEY, onDownArrowKey);
   listElement.removeEventListener(Keyboard.UP_ARROW_KEY, onUpArrowKey);

package/components/list/item.js

@@ -1,5 +1,5 @@
 import * as Keyboard from '../../core/aria/keyboard.js';
-import { getChildElementByClass, iterateArrayLike } from '../../core/dom.js';
+import { getChildElementByClass } from '../../core/dom.js';
 
 import * as ListContent from './content.js';
 
@@ -18,9 +18,9 @@ export function isExpanded(listItemElement) {
  */
 export function setExpanded(listItemElement, value) {
   listItemElement.setAttribute('aria-expanded', value ? 'true' : 'false');
-  iterateArrayLike(listItemElement.querySelectorAll('[role="treeitem"]'), (treeitem) => {
+  for (const treeitem of listItemElement.querySelectorAll('[role="treeitem"]')) {
     treeitem.setAttribute('mdw-skip-tab', value ? 'false' : 'true');
-  });
+  }
 }
 
 /**
@@ -28,10 +28,8 @@ export function setExpanded(listItemElement, value) {
  * @return {void}
  */
 export function onChildContentActivate(event) {
-  /** @type {HTMLElement} */
-  const activatedElement = (event.target);
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const activatedElement = /** @type {HTMLElement} */ (event.target);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   if (!activatedElement || activatedElement.parentElement !== element) {
     return;
   }
@@ -110,8 +108,7 @@ function onKeyDown(event) {
   if (document.activeElement !== event.currentTarget) {
     return;
   }
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   if (!element) {
     return;
   }
@@ -142,7 +139,7 @@ export function attachCore(listItemElement) {
  */
 export function attach(listItemElement) {
   attachCore(listItemElement);
-  iterateArrayLike(listItemElement.getElementsByClassName('mdw-list__content'), ListContent.attach);
+  for (const element of listItemElement.getElementsByClassName('mdw-list__content')) { ListContent.attach(element); }
   if (listItemElement.hasAttribute('aria-expanded')) {
     if (!listItemElement.hasAttribute('mdw-expander-js')) {
       listItemElement.setAttribute('mdw-pre-expander-js', '');
@@ -166,5 +163,5 @@ export function attach(listItemElement) {
  */
 export function detach(listItemElement) {
   Keyboard.detach(listItemElement);
-  iterateArrayLike(listItemElement.getElementsByClassName('mdw-list__content'), ListContent.detach);
+  for (const element of listItemElement.getElementsByClassName('mdw-list__content')) { ListContent.detach(element); }
 }

package/components/list/secondary.js

@@ -1,4 +1,4 @@
-import { dispatchDomEvent, getPassiveEventListenerOption } from '../../core/dom.js';
+import { dispatchDomEvent } from '../../core/dom.js';
 
 export const SECONDARY_ACTION_EVENT = 'mdw:listsecondary-action';
 
@@ -16,8 +16,7 @@ export function onInteraction(event) {
  */
 export function onClick(event) {
   event.stopPropagation();
-  /** @type {HTMLElement} */
-  const listSecondaryElement = (event.currentTarget);
+  const listSecondaryElement = /** @type {HTMLElement} */ (event.currentTarget);
   dispatchDomEvent(listSecondaryElement, SECONDARY_ACTION_EVENT);
 }
 
@@ -30,9 +29,9 @@ export function attach(listSecondaryElement) {
     return;
   }
   listSecondaryElement.addEventListener('click', onClick);
-  listSecondaryElement.addEventListener('mousedown', onInteraction, getPassiveEventListenerOption());
-  listSecondaryElement.addEventListener('touchstart', onInteraction, getPassiveEventListenerOption());
-  listSecondaryElement.addEventListener('keydown', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.addEventListener('mousedown', onInteraction, { passive: true });
+  listSecondaryElement.addEventListener('touchstart', onInteraction, { passive: true });
+  listSecondaryElement.addEventListener('keydown', onInteraction, { passive: true });
 }
 /**
  * @param {Element} listSecondaryElement
@@ -40,7 +39,7 @@ export function attach(listSecondaryElement) {
  */
 export function detach(listSecondaryElement) {
   listSecondaryElement.removeEventListener('click', onClick);
-  listSecondaryElement.removeEventListener('mousedown', onInteraction, getPassiveEventListenerOption());
-  listSecondaryElement.removeEventListener('touchstart', onInteraction, getPassiveEventListenerOption());
-  listSecondaryElement.removeEventListener('keydown', onInteraction, getPassiveEventListenerOption());
+  listSecondaryElement.removeEventListener('mousedown', onInteraction);
+  listSecondaryElement.removeEventListener('touchstart', onInteraction);
+  listSecondaryElement.removeEventListener('keydown', onInteraction);
 }