@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/tab/list.js

@@ -1,37 +1,12 @@
 // https://www.w3.org/TR/wai-aria-practices/#tabpanel
 
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
 import {
-  iterateArrayLike, dispatchDomEvent, getPassiveEventListenerOption, scrollToElement,
-} from '../../core/dom';
+  getPassiveEventListenerOption, iterateArrayLike, iterateSomeOfArrayLike, scrollToElement,
+} from '../../core/dom.js';
 
-import * as AriaAttributes from '../../core/aria/attributes';
-import * as RovingTabIndex from '../../core/aria/rovingtabindex';
-import * as TabItem from './item';
-
-export const SELECTION_CHANGED_EVENT = 'mdw:tablistselectionchanged';
-
-/**
- * @param {Element} tabListElement
- * @return {void}
- */
-export function attach(tabListElement) {
-  let indicatorElement = tabListElement.getElementsByClassName('mdw-tab__indicator')[0];
-  if (!indicatorElement) {
-    indicatorElement = document.createElement('div');
-    indicatorElement.classList.add('mdw-tab__indicator');
-    tabListElement.appendChild(indicatorElement);
-  }
-
-  tabListElement.classList.add('mdw-overlay__group');
-  iterateArrayLike(tabListElement.getElementsByClassName('mdw-tab__item'), TabItem.attach);
-  tabListElement.addEventListener(AriaAttributes.SELECTED_CHANGED_EVENT, onSelectedChangedEvent, getPassiveEventListenerOption());
-  setupARIA(tabListElement);
-  RovingTabIndex.setupTabIndexes(tabListElement, '[role="tab"]');
-  RovingTabIndex.setupTabIndexes(tabListElement, '[role="tab"]');
-  tabListElement.addEventListener(RovingTabIndex.FORWARDS_REQUESTED, onForwardsRequested);
-  tabListElement.addEventListener(RovingTabIndex.BACKWARDS_REQUESTED, onBackwardsRequested);
-  tabListElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-}
+import * as TabItem from './item.js';
 
 /**
  * @param {Event} event
@@ -45,20 +20,32 @@ function onTabIndexZeroed(event) {
   RovingTabIndex.removeTabIndex(tabListElement.querySelectorAll('[role="tab"]'), [currentItem]);
 }
 /**
- * @param {Event} event
+ * @param {CustomEvent} event
  * @return {void}
  */
-function onForwardsRequested(event) {
+function onForwardArrowKey(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
   /** @type {HTMLElement} */
   const tabListElement = (event.currentTarget);
   RovingTabIndex.selectNext(tabListElement.querySelectorAll('[role="tab"]'));
 }
 
 /**
- * @param {Event} event
+ * @param {CustomEvent} event
  * @return {void}
  */
-function onBackwardsRequested(event) {
+function onBackArrowKey(event) {
+  if (event.detail.ctrlKey || event.detail.altKey
+    || event.detail.shiftKey || event.detail.metaKey) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
   /** @type {HTMLElement} */
   const tabListElement = (event.currentTarget);
   RovingTabIndex.selectPrevious(tabListElement.querySelectorAll('[role="tab"]'));
@@ -81,28 +68,6 @@ export function setupARIA(tabListElement) {
   }
 }
 
-/**
- * @param {Element} tabListElement
- * @return {void}
- */
-export function detach(tabListElement) {
-  iterateArrayLike(tabListElement.getElementsByClassName('mdw-tab__item'), TabItem.detach);
-  tabListElement.removeEventListener(AriaAttributes.SELECTED_CHANGED_EVENT, onSelectedChangedEvent);
-  RovingTabIndex.detach(tabListElement, 'mdw-tab__item');
-}
-
-
-/**
- * @param {Element} tabListElement
- * @return {void}
- */
-export function removeSelection(tabListElement) {
-  return iterateArrayLike(
-    tabListElement.querySelectorAll('mdw-tab__item[aria-selected="true"]'),
-    item => item.setAttribute('aria-selected', 'false')
-  );
-}
-
 /**
  * @param {Element} tabListElement
  * @param {Element|number} item element or index
@@ -116,7 +81,7 @@ export function setIndicatorPosition(tabListElement, item, percentage, animate =
   if (!indicatorElement) {
     return;
   }
-  const items = tabListElement.getElementsByClassName('mdw-tab__item');
+  const items = (tabListElement.getElementsByClassName('mdw-tab__item'));
   /** @type {HTMLElement} */
   const leftItem = (item instanceof Element ? item : items.item(item));
   let left = leftItem.offsetLeft;
@@ -124,10 +89,12 @@ export function setIndicatorPosition(tabListElement, item, percentage, animate =
 
   if (percentage > 0) {
     left += (percentage * leftItem.offsetWidth);
+    /** @type {HTMLElement} */
     let nextItem = (leftItem.nextElementSibling);
     if (!nextItem.classList.contains('mdw-tab__item')) {
       // RTL
-      nextItem = leftItem.previousElementSibling;
+      /** @type {HTMLElement} */
+      nextItem = (leftItem.previousElementSibling);
     }
     right = nextItem.offsetLeft + (percentage * nextItem.offsetWidth);
   }
@@ -142,45 +109,102 @@ export function setIndicatorPosition(tabListElement, item, percentage, animate =
   }
 }
 
+/**
+ * @param {HTMLElement} tabListElement
+ * @param {HTMLElement} tabItemElement
+ * @return {number}
+ */
+export function getTabItemIndex(tabListElement, tabItemElement) {
+  /** @type {HTMLCollectionOf<HTMLElement>} */
+  const items = (tabListElement.getElementsByClassName('mdw-tab__item'));
+  let tabItemIndex = -1;
+  iterateSomeOfArrayLike(items, (el, index) => {
+    if (el === tabItemElement) {
+      tabItemIndex = index;
+      return true;
+    }
+    return false;
+  });
+  return tabItemIndex;
+}
+
 /**
  * @param {Element} tabListElement
  * @param {number} tabItemIndex
- * @param {boolean} [deselectSiblings=true]
  * @param {boolean} [dispatchEvents=false]
  * @return {void}
  */
-export function selectItemAtIndex(tabListElement, tabItemIndex, deselectSiblings = true, dispatchEvents = false) {
-  tabListElement.setAttribute('mdw-selected-index', tabItemIndex.toString(10));
-  const items = tabListElement.getElementsByClassName('mdw-tab__item');
-  if (!deselectSiblings) {
+export function selectItemAtIndex(tabListElement, tabItemIndex, dispatchEvents = false) {
+  /** @type {HTMLCollectionOf<HTMLElement>} */
+  const items = (tabListElement.getElementsByClassName('mdw-tab__item'));
+  if (dispatchEvents) {
     const item = items.item(tabItemIndex);
     if (item) {
-      TabItem.selectTabItem(item, false, dispatchEvents);
+      TabItem.setSelected(item, true, true);
     }
     return;
   }
   iterateArrayLike(items, (el, index) => {
     if (tabItemIndex === index) {
-      TabItem.selectTabItem(el, false, dispatchEvents);
+      TabItem.setSelected(el, true, false);
       if (tabListElement.hasAttribute('mdw-scrollable')) {
         scrollToElement(el, true);
       }
     } else {
-      TabItem.deselectTabItem(el, dispatchEvents);
+      TabItem.setSelected(el, false, false);
     }
   });
 }
 
 /**
- * @param {Event} event
+ * @param {CustomEvent} event
  * @return {void}
  */
-export function onSelectedChangedEvent(event) {
+export function onSelectedChangeEvent(event) {
+  if (event.detail.value !== 'true') {
+    return;
+  }
   /** @type {HTMLElement} */
   const itemElement = (event.target);
-  if (itemElement.getAttribute('aria-selected') !== 'true') {
-    return;
+  /** @type {HTMLElement} */
+  const tabListElement = (event.currentTarget);
+  iterateArrayLike(tabListElement.querySelectorAll('[role="tab"]'), (item) => {
+    if (item !== itemElement) {
+      TabItem.setSelected(item, false, false);
+    }
+  });
+}
+
+/**
+ * @param {Element} tabListElement
+ * @return {void}
+ */
+export function attach(tabListElement) {
+  let indicatorElement = tabListElement.getElementsByClassName('mdw-tab__indicator')[0];
+  if (!indicatorElement) {
+    indicatorElement = document.createElement('div');
+    indicatorElement.classList.add('mdw-tab__indicator');
+    tabListElement.appendChild(indicatorElement);
   }
-  TabItem.deselectTabItemSiblings(itemElement, false);
-  dispatchDomEvent(itemElement, SELECTION_CHANGED_EVENT);
+
+  setupARIA(tabListElement);
+  iterateArrayLike(tabListElement.getElementsByClassName('mdw-tab__item'), TabItem.attach);
+  RovingTabIndex.setupTabIndexes(tabListElement.querySelectorAll('[role="tab"]'));
+  tabListElement.addEventListener(TabItem.SELECTED_CHANGE_EVENT, onSelectedChangeEvent,
+    getPassiveEventListenerOption());
+  tabListElement.addEventListener(Keyboard.FORWARD_ARROW_KEY, onForwardArrowKey);
+  tabListElement.addEventListener(Keyboard.BACK_ARROW_KEY, onBackArrowKey);
+  tabListElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+}
+
+/**
+ * @param {Element} tabListElement
+ * @return {void}
+ */
+export function detach(tabListElement) {
+  tabListElement.removeEventListener(TabItem.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
+  tabListElement.removeEventListener(Keyboard.FORWARD_ARROW_KEY, onForwardArrowKey);
+  tabListElement.removeEventListener(Keyboard.BACK_ARROW_KEY, onBackArrowKey);
+  iterateArrayLike(tabListElement.querySelectorAll('[role="tab"]'), RovingTabIndex.detach);
+  iterateArrayLike(tabListElement.getElementsByClassName('mdw-tab__item'), TabItem.detach);
 }

package/components/tab/panel.js

@@ -1,5 +1,11 @@
 // https://www.w3.org/TR/wai-aria-1.1/#tabpanel
 
+import * as Attributes from '../../core/aria/attributes.js';
+
+export const EXPANDED_CHANGE_EVENT = 'mdw:tabpanel-expandedchange';
+
+export const { isExpanded } = Attributes;
+
 /**
  * @param {Element} tabPanelElement
  * @return {void}
@@ -28,20 +34,13 @@ export function detach(tabPanelElement) {
 }
 
 /**
- * @param {Element} tabPanelElement
- * @return {boolean}
- */
-export function isExpanded(tabPanelElement) {
-  return tabPanelElement.getAttribute('aria-expanded') === 'true';
-}
-
-/**
- * @param {Element} tabPanelElement
- * @param {boolean} value
- * @return {void}
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
  */
-export function setExpanded(tabPanelElement, value) {
-  tabPanelElement.setAttribute('aria-expanded', value ? 'true' : 'false');
+export function setExpanded(element, value, dispatchEvent = true) {
+  return Attributes.setExpanded(element, value, dispatchEvent ? EXPANDED_CHANGE_EVENT : null);
 }
 
 /**

package/components/template/_theme.scss

@@ -1,27 +1,27 @@
-@import '../../core/theme/index.scss';
+@use '../../core/theme/_mixins.scss' as theme;
 
-$mdw-template__theme-values: (
+$themeValues: (
   text-color:    (('foreground-light', 0.87), ('foreground-dark', 1.00)),
   border-color:  (('primary', '700', 0.87), ('primary', '200', 1.0)),
 ) !default;
 
-@function mdwTemplateThemeValue($key, $type) {
-  @return mdwGetThemeValue('template', $mdw-template__theme-values, $key, $type);
+@function getThemeValue($key, $type) {
+  @return theme.getThemeValue('template', $themeValues, $key, $type);
 }
 
-@mixin mdw-template__theme-rules($theme: null) {
+@mixin addThemeRules($theme: null) {
   .mdw-template[mdw-surface] {
     border-color: templateThemeValue('border-color', null);
   }
 }
 
-@include mdw-theme__add-component-fallback-rules('light') {
-  @include mdw-template__theme-rules('light');
+@include theme.addComponentFallbackRules('light') {
+  @include addThemeRules('light');
 }
-@include mdw-theme__add-component-fallback-rules('dark') {
-  @include mdw-template__theme-rules('dark');
+@include theme.addComponentFallbackRules('dark') {
+  @include addThemeRules('dark');
 }
 
-@include mdw-theme__add-component-variable-rules('template', $mdw-template__theme-values) {
-  @include mdw-template__theme-rules();
+@include theme.addComponentCSSVariableRules('template', $themeValues) {
+  @include addThemeRules();
 }

package/components/textfield/_mixins.scss

@@ -0,0 +1,52 @@
+@use '../../core/_type.scss' as type;
+
+@mixin centerLabel {
+  .mdw-textfield__label {
+    @include type.addRules('subtitle');
+
+    top: 50%;
+
+    transform: translateY(-50%);
+  }
+
+  .mdw-textfield__outline-gap {
+    &::before,
+    :root[dir="rtl"] &::after {
+      right: 50%;
+      left: 0;
+    }
+
+    &::after,
+    :root[dir="rtl"] &::before {
+      right: 0;
+      left: 50%;
+    }
+  }
+}
+
+@mixin floatLabel {
+  .mdw-textfield__label {
+    @include type.addRules('caption');
+    top: 0;
+    
+    transform: translateY(0);
+    
+    .mdw-textfield[mdw-outlined] & {
+      transform: translateY(-50%);
+    }
+  }
+  
+  .mdw-textfield__outline-gap {
+    &::before,
+    :root[dir="rtl"] &::after {
+      right: 100%;
+      left: 0;
+    }
+
+    &::after,
+    :root[dir="rtl"] &::before {
+      right: 0;
+      left: 100%;
+    }
+  }
+}