@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/tab/item.js

@@ -1,88 +0,0 @@
-// https://www.w3.org/TR/wai-aria-1.1/#tab
-
-import * as AriaTab from '../../core/aria/tab.js';
-import * as Overlay from '../../core/overlay/index.js';
-import * as Ripple from '../../core/ripple/index.js';
-
-export const SELECTED_CHANGE_EVENT = 'mdw:tabitem-selectedchange';
-
-/**
- * @param {Element} element
- * @param {string|boolean} value
- * @param {boolean} [dispatchEvent=true]
- * @return {boolean} successful
- */
-export function setSelected(element, value, dispatchEvent = true) {
-  return AriaTab.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-function onClick(event) {
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  if (element.getAttribute('aria-disabled') === 'true') {
-    return;
-  }
-  setSelected(element, true);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attachAria(element) {
-  AriaTab.attach(element);
-  for (const el of element.getElementsByClassName('mdw-tab__icon')) {
-    el.setAttribute('aria-hidden', 'true');
-  }
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attachCore(element) {
-  attachAria(element);
-  element.addEventListener('click', onClick);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.classList.add('mdw-overlay');
-  if (!element.hasAttribute('mdw-overlay-off')) {
-    element.setAttribute('mdw-overlay-off', 'selected activated');
-  }
-  if (!element.hasAttribute('mdw-overlay-default')) {
-    element.setAttribute('mdw-overlay-default', 'medium');
-  }
-  Overlay.attach(element);
-
-  element.classList.add('mdw-ripple');
-  Ripple.attach(element);
-
-  attachCore(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detachCore(element) {
-  AriaTab.detach(element);
-  element.removeEventListener('click', onClick);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  detachCore(element);
-  Ripple.detach(element);
-  Overlay.detach(element);
-}

package/components/tab/list.js

@@ -1,196 +0,0 @@
-// 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 { scrollToElement } from '../../core/dom.js';
-
-import * as TabItem from './item.js';
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onTabIndexZeroed(event) {
-  const tabListElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const currentItem = /** @type {HTMLElement} */ (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();
-  const tabListElement = /** @type {HTMLElement} */ (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();
-  const tabListElement = /** @type {HTMLElement} */ (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) {
-  const indicatorElement = /** @type {HTMLElement} */ (tabListElement.getElementsByClassName('mdw-tab__indicator')[0]);
-  if (!indicatorElement) {
-    return;
-  }
-  const items = (tabListElement.getElementsByClassName('mdw-tab__item'));
-  const leftItem = /** @type {HTMLElement} */ (item instanceof Element ? item : items.item(item));
-  let left = leftItem.offsetLeft;
-  let right = left + leftItem.offsetWidth;
-
-  if (percentage > 0) {
-    left += (percentage * leftItem.offsetWidth);
-    let nextItem = /** @type {HTMLElement} */ (leftItem.nextElementSibling);
-    if (!nextItem.classList.contains('mdw-tab__item')) {
-      // RTL
-      nextItem = /** @type {HTMLElement} */ (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) {
-  const items = /** @type {HTMLCollectionOf<HTMLElement>} */ (tabListElement.getElementsByClassName('mdw-tab__item'));
-  let tabItemIndex = -1;
-  [...items].some((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) {
-  const items = /** @type {HTMLCollectionOf<HTMLElement>} */ (tabListElement.getElementsByClassName('mdw-tab__item'));
-  if (dispatchEvents) {
-    const item = items.item(tabItemIndex);
-    if (item) {
-      TabItem.setSelected(item, true, true);
-    }
-    return;
-  }
-  // eslint-disable-next-line github/array-foreach
-  [...items].forEach((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;
-  }
-  const itemElement = /** @type {HTMLElement} */ (event.target);
-  const tabListElement = /** @type {HTMLElement} */ (event.currentTarget);
-  for (const item of tabListElement.querySelectorAll('[role="tab"]')) {
-    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);
-  for (const element of tabListElement.getElementsByClassName('mdw-tab__item')) { TabItem.attach(element); }
-  RovingTabIndex.setupTabIndexes(tabListElement.querySelectorAll('[role="tab"]'));
-  tabListElement.addEventListener(TabItem.SELECTED_CHANGE_EVENT, onSelectedChangeEvent, { passive: true });
-  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);
-  for (const el of tabListElement.querySelectorAll('[role="tab"]')) RovingTabIndex.detach(el);
-  for (const el of tabListElement.getElementsByClassName('mdw-tab__item')) TabItem.detach(el);
-}

package/components/tab/panel.js

@@ -1,54 +0,0 @@
-// 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/textfield/README.md

@@ -1,179 +0,0 @@
-# Syntax
-
-
-## Standard
-```
-label.mdw-textfield
-  input.mdw-textfield__input(placeholder=" ")
-  .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__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Title
-```
-
-## Custom font size
-```
-label.mdw-textfield(style="font-size: 2.125rem")
-  // Do not apply font changes to the input element
-  input.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Title
-```
-
-## Helper Text
-```
-label.mdw-textfield
-  input.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Title
-  .mdw-textfield__helper-text Helper Text
-```
-
-## Error Text
-```
-label.mdw-textfield
-  input.mdw-textfield__input(placeholder=" " required)
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Title
-  .mdw-textfield__error-text Helper Text
-```
-
-## Helper and Error Text
-```
-label.mdw-textfield
-  input.mdw-textfield__input(placeholder=" " required)
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Title
-  .mdw-textfield__helper-text Helper Text
-  .mdw-textfield__error-text Helper Text
-```
-
-## Prefixed text
-```
-label.mdw-textfield
-  input.mdw-textfield__input(type="text" placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Amount
-  .mdw-textfield__prefix $
-```
-
-## Suffixed text
-```
-label.mdw-textfield
-  input.mdw-textfield__input(type="email" placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Email
-  .mdw-textfield__suffix @gmail.com
-```
-
-## Icon
-```
-label.mdw-textfield
-  input.mdw-textfield__input(type="text" placeholder=" " value="Ali Connors")
-  .mdw-textfield__icon.material-icons person
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Name
-```
-
-## Secondary Color
-```
-label.mdw-textfield.mdw-theme(mdw-ink="secondary")
-  input.mdw-textfield__input(type="text" placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Phone number
-```
-
-## Multiline
-
-```
-label.mdw-textfield
-  textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Description
-```
-
-## Mutiline with row count
-
-```
-label.mdw-textfield(mdw-autosize)
-  textarea.mdw-textfield__input(placeholder=" " rows="5")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Message
-```
-
-## Solo
-```
-label.mdw-textfield(mdw-solo)
-  input.mdw-textfield__input(placeholder=" ")
-```
-
-## Outlined
-```
-label.mdw-textfield(mdw-outlined)
-  input.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Title
-```
-
-## Outlined Multiline
-```
-label.mdw-textfield
-  textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Title
-```
-
-## Multiline with Auto-Size (requires-JS)
-```
-label.mdw-textfield(mdw-autosize)
-  textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Description
-```
-
-
-## Outlined Multiline with Auto-Size (requires-JS)
-```
-label.mdw-textfield(mdw-autosize mdw-outlined)
-  textarea.mdw-textfield__input(placeholder=" ")
-  .mdw-textfield__border
-    .mdw-textfield__outline-gap
-      .mdw-textfield__label Description
-```
-
-# Javascript
-
-```
-  for (const element of document.getElementsByClassName("mdw-textfield")) {
-    TextField.attach(element);
-  }
-```
-
-# Notes
-
-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.