@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/tab/list.js

@@ -0,0 +1,210 @@
+// 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 {
+  getPassiveEventListenerOption, iterateArrayLike, iterateSomeOfArrayLike, scrollToElement,
+} from '../../core/dom.js';
+
+import * as TabItem from './item.js';
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
+  /** @type {HTMLElement} */
+  const tabListElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const currentItem = (event.target);
+  RovingTabIndex.removeTabIndex(tabListElement.querySelectorAll('[role="tab"]'), [currentItem]);
+}
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+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 {CustomEvent} event
+ * @return {void}
+ */
+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"]'));
+}
+
+/**
+ * @param {Element} tabListElement
+ * @return {void}
+ */
+export function setupARIA(tabListElement) {
+  if (tabListElement.hasAttribute('mdw-no-aria')) {
+    return;
+  }
+  tabListElement.setAttribute('role', 'tablist');
+  tabListElement.setAttribute('aria-multiselectable', 'false');
+  tabListElement.setAttribute('aria-orientation', 'horizontal');
+  const indicatorElement = tabListElement.getElementsByClassName('mdw-tab__indicator')[0];
+  if (indicatorElement) {
+    indicatorElement.setAttribute('role', 'presentation');
+  }
+}
+
+/**
+ * @param {Element} tabListElement
+ * @param {Element|number} item element or index
+ * @param {number} [percentage=0]
+ * @param {boolean} [animate=false]
+ * @return {void}
+ */
+export function setIndicatorPosition(tabListElement, item, percentage, animate = false) {
+  /** @type {HTMLElement} */
+  const indicatorElement = (tabListElement.getElementsByClassName('mdw-tab__indicator')[0]);
+  if (!indicatorElement) {
+    return;
+  }
+  const items = (tabListElement.getElementsByClassName('mdw-tab__item'));
+  /** @type {HTMLElement} */
+  const leftItem = (item instanceof Element ? item : items.item(item));
+  let left = leftItem.offsetLeft;
+  let right = left + leftItem.offsetWidth;
+
+  if (percentage > 0) {
+    left += (percentage * leftItem.offsetWidth);
+    /** @type {HTMLElement} */
+    let nextItem = (leftItem.nextElementSibling);
+    if (!nextItem.classList.contains('mdw-tab__item')) {
+      // RTL
+      /** @type {HTMLElement} */
+      nextItem = (leftItem.previousElementSibling);
+    }
+    right = nextItem.offsetLeft + (percentage * nextItem.offsetWidth);
+  }
+
+  // RTL is inversed
+  const width = Math.abs(right - left);
+  indicatorElement.style.setProperty('transform', `translateX(${left}px) scaleX(${width / 1000})`);
+  if (animate) {
+    indicatorElement.setAttribute('mdw-animate', '');
+  } else {
+    indicatorElement.removeAttribute('mdw-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} [dispatchEvents=false]
+ * @return {void}
+ */
+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.setSelected(item, true, true);
+    }
+    return;
+  }
+  iterateArrayLike(items, (el, index) => {
+    if (tabItemIndex === index) {
+      TabItem.setSelected(el, true, false);
+      if (tabListElement.hasAttribute('mdw-scrollable')) {
+        scrollToElement(el, true);
+      }
+    } else {
+      TabItem.setSelected(el, false, false);
+    }
+  });
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onSelectedChangeEvent(event) {
+  if (event.detail.value !== 'true') {
+    return;
+  }
+  /** @type {HTMLElement} */
+  const itemElement = (event.target);
+  /** @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);
+  }
+
+  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

@@ -0,0 +1,54 @@
+// 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}
+ */
+export function attach(tabPanelElement) {
+  tabPanelElement.setAttribute('role', 'tabpanel');
+  if (!tabPanelElement.hasAttribute('aria-expanded')) {
+    tabPanelElement.setAttribute('aria-expanded', 'false');
+    tabPanelElement.setAttribute('aria-hidden', 'true');
+  } else if (!tabPanelElement.hasAttribute('aria-hidden')) {
+    tabPanelElement.setAttribute('aria-hidden', isExpanded(tabPanelElement) ? 'false' : 'true');
+  }
+}
+
+/**
+ * @param {Element} tabPanelElement
+ * @return {void}
+ */
+export function detach(tabPanelElement) {
+  if (!tabPanelElement.hasAttribute('aria-expanded')) {
+    tabPanelElement.setAttribute('aria-expanded', 'false');
+    tabPanelElement.setAttribute('aria-hidden', 'true');
+  } else if (!tabPanelElement.hasAttribute('aria-hidden')) {
+    tabPanelElement.setAttribute('aria-hidden', isExpanded(tabPanelElement) ? 'false' : 'true');
+  }
+}
+
+/**
+ * @param {Element} element
+ * @param {string|boolean} value
+ * @param {boolean} [dispatchEvent=true]
+ * @return {boolean} successful
+ */
+export function setExpanded(element, value, dispatchEvent = true) {
+  return Attributes.setExpanded(element, value, dispatchEvent ? EXPANDED_CHANGE_EVENT : null);
+}
+
+/**
+ * Hide element to avoid tabbing into next panel
+ * @param {Element} tabPanelElement
+ * @param {boolean} value
+ * @return {void}
+ */
+export function setHidden(tabPanelElement, value) {
+  tabPanelElement.setAttribute('aria-hidden', value ? 'true' : 'false');
+}

package/components/template/_theme.scss

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

package/components/{core/textfield → textfield}/README.md

@@ -5,16 +5,18 @@
 ```
 label.mdw-textfield
   input.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Title
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
 ```
 
 ## Pre-filled
 ```
 label.mdw-textfield
   input.mdw-textfield__input(value="Vintage 50" placeholder=" ")
-  .mdw-textfield__label Title
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
 ```
 
 ## Custom font size
@@ -22,16 +24,18 @@ label.mdw-textfield
 label.mdw-textfield(style="font-size: 2.125rem")
   // Do not apply font changes to the input element
   input.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Title
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
 ```
 
 ## Helper Text
 ```
 label.mdw-textfield
   input.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Title
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
   .mdw-textfield__helper-text Helper Text
 ```
 
@@ -39,8 +43,9 @@ label.mdw-textfield
 ```
 label.mdw-textfield
   input.mdw-textfield__input(placeholder=" " required)
-  .mdw-textfield__label Title
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
   .mdw-textfield__error-text Helper Text
 ```
 
@@ -48,8 +53,9 @@ label.mdw-textfield
 ```
 label.mdw-textfield
   input.mdw-textfield__input(placeholder=" " required)
-  .mdw-textfield__label Title
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
   .mdw-textfield__helper-text Helper Text
   .mdw-textfield__error-text Helper Text
 ```
@@ -58,35 +64,39 @@ label.mdw-textfield
 ```
 label.mdw-textfield
   input.mdw-textfield__input(type="text" placeholder=" ")
-  .mdw-textfield__label Amount
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Amount
   .mdw-textfield__prefix $
-  .mdw-textfield__border-line
 ```
 
 ## Suffixed text
 ```
 label.mdw-textfield
   input.mdw-textfield__input(type="email" placeholder=" ")
-  .mdw-textfield__label Email
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Email
   .mdw-textfield__suffix @gmail.com
-  .mdw-textfield__border-line
 ```
 
 ## Icon
 ```
 label.mdw-textfield
-  .mdw-textfield__icon.material-icons person
   input.mdw-textfield__input(type="text" placeholder=" " value="Ali Connors")
-  .mdw-textfield__label Name
-  .mdw-textfield__border-line
+  .mdw-textfield__icon.material-icons person
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Name
 ```
 
-## Accented
+## Secondary Color
 ```
-label.mdw-textfield(mdw-theme-color="accent")
+label.mdw-textfield.mdw-theme(mdw-ink="secondary")
   input.mdw-textfield__input(type="text" placeholder=" ")
-  .mdw-textfield__label Phone number
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Phone number
 ```
 
 ## Multiline
@@ -94,66 +104,76 @@ label.mdw-textfield(mdw-theme-color="accent")
 ```
 label.mdw-textfield
   textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Description
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Description
 ```
 
-## Text Area
+## Mutiline with row count
 
 ```
-label.mdw-textfield(mdw-textarea)
+label.mdw-textfield(mdw-autosize)
   textarea.mdw-textfield__input(placeholder=" " rows="5")
-  .mdw-textfield__label Message
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Message
 ```
 
-## Boxed
+## Solo
 ```
-label.mdw-textfield(mdw-box)
+label.mdw-textfield(mdw-solo)
   input.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Title
 ```
 
-## Boxed Text Area
+## Outlined
 ```
-label.mdw-textfield(mdw-textarea mdw-box)
-  textarea.mdw-textfield__input(placeholder=" " rows="5")
-  .mdw-textfield__label Title
+label.mdw-textfield(mdw-outlined)
+  input.mdw-textfield__input(placeholder=" ")
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
 ```
 
-## Multiline with Auto-Expand (requires-JS)
+## Outlined Multiline
 ```
-label.mdw-textfield(mdw-multiline)
+label.mdw-textfield
   textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Description
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Title
 ```
 
-## Multiline Text Area with Auto-Expand (requires-JS)
+## Multiline with Auto-Size (requires-JS)
 ```
-label.mdw-textfield(mdw-multiline mdw-textarea)
+label.mdw-textfield(mdw-autosize)
   textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Description
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Description
 ```
 
-## Boxed Multiline Text Area with Auto-Expand (requires-JS)
+
+## Outlined Multiline with Auto-Size (requires-JS)
 ```
-label.mdw-textfield(mdw-multiline mdw-textarea mdw-box)
+label.mdw-textfield(mdw-autosize mdw-outlined)
   textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__label Description
-  .mdw-textfield__border-line
+  .mdw-textfield__border
+    .mdw-textfield__outline-gap
+      .mdw-textfield__label Description
 ```
 
 # Javascript
 
 ```
-  document.querySelectorAll(".mdw-textfield").forEach((element) => {
-    new TextField(element);
+  document.getElementsByClassName("mdw-textfield").forEach((element) => {
+    TextField.attach(element);
   });
 ```
 
 # Notes
 
-Use `rows` attribute to define minimum size of multiline or textarea fields. `.mdw-textfield__border-line` is not needed with textarea or boxed fields, but the element does not need to be removed since it is automatically hidden.
+Use `rows` attribute to define minimum size of multiline or textarea fields. 
+
+`.mdw-textfield__outline-gap` is **always** needed.
 
 Detection as to whether the input value is filled is based on `:placeholder-shown`. The `placeholder` attribute needs to be present and not blank. Use an empty space (`placeholder=" "`) to appear blank instead of a blank or non-existant attribute. As a fallback, browsers that don't support support `:placeholder-shown` will have their labels permanently floated above the input box. Initializing the element with Javascript will ensure the label acts according to spec.

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%;
+    }
+  }
+}