@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/tab/list.js

@@ -1,210 +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 {
-  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

@@ -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/template/_theme.scss

@@ -1,27 +0,0 @@
-@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/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
-
-```
-  document.getElementsByClassName("mdw-textfield").forEach((element) => {
-    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.

package/components/textfield/_mixins.scss

@@ -1,52 +0,0 @@
-@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%;
-    }
-  }
-}