@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/selection/input.js

@@ -1,54 +0,0 @@
-import {
-  dispatchDomEvent,
-} from '../../core/dom.js';
-
-export const CLICK_EVENT = 'mdw:selectioninput-click';
-export const FOCUS_EVENT = 'mdw:selectioninput-focus';
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-function onKeyDown(event) {
-  if (event.target instanceof HTMLInputElement && (event.key === ' ' || event.key === 'Spacebar')) {
-    // Don't pass up Spacebar on native input elements
-    event.stopPropagation();
-  }
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-function onClick(event) {
-  event.stopPropagation();
-  dispatchDomEvent(/** @type {HTMLElement} */ (event.target), CLICK_EVENT);
-}
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-function onFocus(event) {
-  dispatchDomEvent(/** @type {HTMLElement} */ (event.target), FOCUS_EVENT);
-}
-
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-export function attach(element) {
-  element.addEventListener('keydown', onKeyDown);
-  element.addEventListener('click', onClick);
-  element.addEventListener('focus', onFocus);
-}
-
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeEventListener('keydown', onKeyDown);
-  element.removeEventListener('click', onClick);
-  element.removeEventListener('focus', onFocus);
-}

package/components/selection/radiogroup.js

@@ -1,40 +0,0 @@
-import * as Selection from './index.js';
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onCheckedChange(event) {
-  if (event.detail.value === 'false') {
-    return;
-  }
-  const radiogroupElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const itemElement = /** @type {HTMLElement} */ (event.target);
-  setTimeout(() => {
-    // Wait to see if event is cancelled
-    if (event.defaultPrevented) {
-      return;
-    }
-    for (const item of radiogroupElement.querySelectorAll('[role="radio"][aria-checked="true"]')) {
-      if (item !== itemElement) {
-        item.setAttribute('aria-checked', 'false');
-      }
-    }
-  });
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.addEventListener(Selection.CHECKED_CHANGE_EVENT, onCheckedChange);
-}
-
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeEventListener(Selection.CHECKED_CHANGE_EVENT, onCheckedChange);
-}

package/components/slider/_spec.scss

@@ -1,59 +0,0 @@
-// https://material.io/design/components/sliders.html#spec
-
-@use '../../core/_length.scss' as *;
-
-@mixin track {
-  block-size: 2px;
-  inline-size: 100%;
-
-  background-color: currentColor;
-  border-color: transparent;
-  color: inherit;
-}
-
-@mixin thumb {
-  block-size: 12px;
-  inline-size: 12px;
-
-  cursor: pointer;
-
-  background-color: currentColor;
-  border-radius: 50%;
-  color: inherit;
-}
-
-.mdw-slider__input {
-  inline-size: 100%;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  background: transparent;
-  color: inherit;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::-moz-range-track {
-    @include track;
-  }
-
-  &::-webkit-slider-runnable-track {
-    @include track;
-  }
-
-  &::-moz-range-thumb {
-    @include thumb;
-    border: none;
-  }
-
-  &::-webkit-slider-thumb {
-    @include thumb;
-    margin-block-start: -5px;
-
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-    -webkit-appearance: none;
-  }
-}

package/components/slider/index.scss

@@ -1,2 +0,0 @@
-@forward './_spec.scss';
-@forward './_theme.scss';

package/components/snackbar/_spec.scss

@@ -1,150 +0,0 @@
-// https://material.io/design/components/snackbars.html#spec
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_platform.scss' as platform;
-@use '../../core/_type.scss' as type;
-
-$scale-initial: 0.85 !default;
-
-.mdw-snackbar__wrapper {
-  position: relative;
-
-  z-index: 6;
-}
-
-.mdw-snackbar__container {
-  display: flex;
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-  flex-direction: row;
-  justify-content: flex-start;
-
-  z-index: 6;
-
-  &[mdw-position="end"] {
-    justify-content: flex-end;
-  }
-
-  &[mdw-position="center"] {
-    justify-content: center;
-  }
-}
-
-.mdw-snackbar {
-  @include type.addRules('body-2');
-
-  display: flex;
-  position: absolute;
-  inset-block-end: 0;
-  align-items: center;
-  justify-content: space-between;
-
-  min-block-size: 48px;
-  max-inline-size: 100%;
-  padding-inline: 8px;
-
-  // Default state is hidden
-  pointer-events: auto;
-
-  animation-name: none;
-  animation-duration: motion.$fadeInDuration;
-  animation-timing-function: motion.$decelerateEasing;
-  animation-direction: normal;
-  animation-fill-mode: forwards;
-  will-change: opacity, transform, visibility;
-
-  opacity: 0;
-  transform: scale($scale-initial);
-  visibility: hidden;
-
-  border-radius: 4px;
-
-  box-shadow: elevation.boxShadow(6);
-
-  &[aria-hidden="false"] {
-    animation-name: showSnackbar;
-
-    // Fallback if animations are disabled
-    opacity: 1;
-    transform: scale(1.0);
-    visibility: visible;
-  }
-
-  &[aria-hidden="true"] {
-    animation-name: hideSnackbar;
-    animation-duration: motion.$fadeOutDuration;
-    animation-timing-function: motion.$accelerateEasing;
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-@keyframes hideSnackbar {
-  from {
-    opacity: 1;
-    transform: scale(1.0);
-    visibility: visible;
-  }
-
-  to {
-    opacity: 0;
-    transform: scale($scale-initial);
-    visibility: hidden;
-  }
-}
-
-@keyframes showSnackbar {
-  from {
-    opacity: 0;
-    transform: scale($scale-initial);
-    visibility: hidden;
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1.0);
-    visibility: visible;
-  }
-}
-
-.mdw-snackbar .mdw-button {
-  order: 1;
-
-  flex: none;
-  margin: 6px 0;
-}
-
-.mdw-snackbar > span {
-  @include type.textTopToTop(16);
-  @include type.baselineToBottom(48 - 30);
-  box-sizing: border-box;
-  padding: 0 8px;
-
-  white-space: pre-line;
-}
-
-@include breakpoint.isXSmallWindow() {
-  .mdw-snackbar {
-    inset-inline: 0;
-
-    &[mdw-stacked] {
-      align-items: flex-end;
-      flex-direction: column;
-      justify-content: center;
-
-      > span {
-        inline-size: 100%;
-      }
-
-      .mdw-button {
-        margin-block: 2px 8px;
-      }
-    }
-  }
-}

package/components/snackbar/index.js

@@ -1,338 +0,0 @@
-// https://www.w3.org/TR/wai-aria-1.1/#alert
-// https://www.w3.org/TR/wai-aria-practices/#alert
-
-import {
-  dispatchDomEvent,
-  setTextNode,
-} from '../../core/dom.js';
-import * as Button from '../button/index.js';
-
-/**
- * @typedef SnackbarCreateOptions
- * @prop {!string} text
- * @prop {!string} [buttonText]
- * @prop {string} [buttonInk='primary']
- * @prop {boolean} [stacked=false]
- * @prop {number|boolean} [autoHide=4] Auto hide time in seconds
- * @prop {boolean} [autoDestroy=true] Destroy element after hide
- * @prop {Element} [parent] Parent element to which to append
- * @prop {boolean} [show=true] Show element after creation
- * @prop {boolean} [skipQueue=false] Skip queue
- */
-
-class SnackbarQueueItem {
-  /**
-   * @param {Element} element
-   * @param {SnackbarCreateOptions} [options]
-   */
-  constructor(element, options) {
-    this.element = element;
-    this.options = options;
-    this.hideTimeout = null;
-  }
-
-  /** @return {void} */
-  clearHideTimeout() {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
-    }
-  }
-}
-
-/** @type {SnackbarQueueItem[]} */
-const SNACKBAR_QUEUE = [];
-
-export const HIDE_EVENT = 'mdw:snackbar-hide';
-export const SHOW_EVENT = 'mdw:snackbar-show';
-
-/**
- * @param {Element} snackbarElement
- * @return {void}
- */
-export function setupARIA(snackbarElement) {
-  if (snackbarElement.hasAttribute('mdw-no-aria')) {
-    return;
-  }
-  snackbarElement.setAttribute('role', 'alert');
-  snackbarElement.setAttribute('tabindex', '-1');
-}
-
-/**
- * @param {Element} element
- * @return {SnackbarQueueItem}
- */
-export function findNextQueueItem(element) {
-  let queue = null;
-  SNACKBAR_QUEUE.some((q) => {
-    if (q.element === element) {
-      queue = q;
-      return true;
-    }
-    return false;
-  });
-  return queue;
-}
-
-/**
- * @param {Element} snackbarElement
- * @return {void}
- */
-export function handleAnimationChange(snackbarElement) {
-  const showing = snackbarElement.getAttribute('aria-hidden') === 'false';
-  if (showing) {
-    const currentQueueItem = findNextQueueItem(snackbarElement);
-    if (currentQueueItem && currentQueueItem.hideTimeout) {
-      return;
-    }
-    const autoHideString = snackbarElement.getAttribute('mdw-autohide');
-    if (autoHideString == null) {
-      return;
-    }
-    const timeInSeconds = Number.parseFloat(autoHideString) || 4;
-    if (timeInSeconds < 0) {
-      return;
-    }
-    const timeout = setTimeout(() => {
-      // eslint-disable-next-line no-use-before-define
-      hide(snackbarElement);
-    }, timeInSeconds * 1000);
-    if (currentQueueItem) {
-      currentQueueItem.hideTimeout = timeout;
-    }
-    return;
-  }
-
-  const nextQueueItem = findNextQueueItem(snackbarElement);
-  if (nextQueueItem) {
-    // eslint-disable-next-line no-use-before-define
-    update(snackbarElement, nextQueueItem.options);
-    // eslint-disable-next-line no-use-before-define
-    show(snackbarElement);
-    return;
-  }
-  if (snackbarElement.hasAttribute('mdw-autodestroy') && snackbarElement.parentElement) {
-    snackbarElement.remove();
-  }
-}
-
-/**
- * @param {AnimationEvent} event
- * @return {void}
- */
-export function onAnimationEnd(event) {
-  handleAnimationChange(/** @type {Element} */ (event.currentTarget));
-}
-
-/**
- * @param {Element} snackbarElement
- * @return {boolean} changed
- */
-export function hide(snackbarElement) {
-  if (snackbarElement.getAttribute('aria-hidden') === 'true') {
-    return false;
-  }
-  if (!dispatchDomEvent(snackbarElement, HIDE_EVENT)) {
-    return false;
-  }
-  snackbarElement.setAttribute('aria-hidden', 'true');
-  const currentQueueItem = findNextQueueItem(snackbarElement);
-  if (currentQueueItem) {
-    SNACKBAR_QUEUE.splice(SNACKBAR_QUEUE.indexOf(currentQueueItem), 1);
-  }
-  if (window.getComputedStyle(snackbarElement).animationName === 'none') {
-    requestAnimationFrame(() => handleAnimationChange(snackbarElement));
-  }
-  return true;
-}
-
-/**
- * @param {KeyboardEvent} event
- * @return {void}
- */
-export function onKeyDown(event) {
-  if (event.key === 'Escape' || event.key === 'Esc') {
-    // Allow users to close snackbar with escape, for accessibilty reasons
-    event.stopPropagation();
-    event.preventDefault();
-    const snackbarElement = /** @type {Element} */ (event.currentTarget);
-    hide(snackbarElement);
-  }
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-export function onButtonClick(event) {
-  const buttonElement = /** @type {HTMLElement} */ (event.currentTarget);
-  if (buttonElement instanceof HTMLAnchorElement) {
-    event.preventDefault();
-  }
-  const snackbarElement = buttonElement.closest('.mdw-snackbar');
-  hide(snackbarElement);
-}
-
-/**
- * @param {Element} element
- * @param {SnackbarCreateOptions} options
- * @return {void}
- */
-export function update(element, options) {
-  element.classList.add('mdw-snackbar');
-  if (!element.classList.contains('mdw-theme')) {
-    // Guidelines conflict stating a background should be fully opaque
-    // But says spec says to use #000000 with 87% opacity
-    // Calculated against white, opaque value is #212121 (Gray-900)
-    element.classList.add('mdw-theme');
-    element.setAttribute('mdw-surface', 'background 900');
-    element.setAttribute('mdw-dark', '');
-  }
-  let span = element.getElementsByTagName('span')[0];
-  if (span) {
-    // To trigger screen readers, we destroy and create a new span and textnode
-    span.remove();
-  }
-  span = document.createElement('span');
-  if (element.firstChild) {
-    element.prepend(span);
-  } else {
-    element.appendChild(span);
-  }
-  const textNode = document.createTextNode(options.text);
-  span.appendChild(textNode);
-  let button = element.getElementsByClassName('mdw-button')[0];
-  if (options.buttonText) {
-    if (!button) {
-      button = document.createElement('a');
-      element.appendChild(button);
-    }
-    setTextNode(button, options.buttonText);
-    button.classList.add('mdw-button');
-    if (typeof options.buttonInk === 'undefined') {
-      button.classList.add('mdw-theme');
-      button.setAttribute('mdw-ink', 'secondary');
-    } else if (typeof options.buttonInk === 'string') {
-      button.classList.add('mdw-theme');
-      button.setAttribute('mdw-ink', options.buttonInk);
-    } else {
-      // Don't set attribute if null is passed
-    }
-  } else if (button && button.parentElement) {
-    button.remove();
-  }
-  if (options.stacked) {
-    element.setAttribute('mdw-stacked', '');
-  }
-  if (options.autoHide !== false) {
-    let timeInSeconds;
-    if (options.autoHide === true) {
-      timeInSeconds = 4;
-    } else if (options.autoHide == null) {
-      timeInSeconds = 4;
-    } else {
-      timeInSeconds = options.autoHide;
-    }
-    if (timeInSeconds > 0) {
-      element.setAttribute('mdw-autohide', timeInSeconds.toString());
-    }
-  }
-  if (options.autoDestroy !== false) {
-    element.setAttribute('mdw-autodestroy', '');
-  }
-}
-
-/**
- * @param {Element} snackbarElement
- * @return {void}
- */
-export function attach(snackbarElement) {
-  const button = snackbarElement.getElementsByClassName('mdw-button')[0];
-  if (button) {
-    Button.attach(button);
-    button.addEventListener('click', onButtonClick);
-  }
-  snackbarElement.setAttribute('mdw-js', '');
-  snackbarElement.addEventListener('animationend', onAnimationEnd);
-  snackbarElement.addEventListener('keydown', onKeyDown);
-  setupARIA(snackbarElement);
-}
-
-/**
- * @param {Element} snackbarElement
- * @return {void}
- */
-export function detach(snackbarElement) {
-  const button = snackbarElement.getElementsByClassName('mdw-button')[0];
-  if (button) {
-    Button.detach(button);
-    button.removeEventListener('click', onButtonClick);
-  }
-  // Remove timeouts and stacks
-  for (let i = SNACKBAR_QUEUE.length - 1; i >= 0; i--) {
-    const queue = SNACKBAR_QUEUE[i];
-    if (queue.element === snackbarElement) {
-      queue.clearHideTimeout();
-      SNACKBAR_QUEUE.splice(i, 1);
-    }
-  }
-  snackbarElement.removeAttribute('mdw-js');
-}
-
-/**
- * @param {?Element} snackbarElement
- * @return {boolean} changed
- */
-export function show(snackbarElement) {
-  if (snackbarElement.getAttribute('aria-hidden') === 'false') {
-    return false;
-  }
-  if (!dispatchDomEvent(snackbarElement, SHOW_EVENT)) {
-    return false;
-  }
-  snackbarElement.setAttribute('aria-hidden', 'false');
-  attach(snackbarElement);
-  if (window.getComputedStyle(snackbarElement).animationName === 'none') {
-    requestAnimationFrame(() => handleAnimationChange(snackbarElement));
-  }
-  return true;
-}
-
-/**
- * Creates a Snackbar element if required and adds to show queue
- * @param {SnackbarCreateOptions} options
- * @return {HTMLElement}
- */
-export function create(options) {
-  let element;
-  let newlyCreated = false;
-  if (options.parent) {
-    /** @type {HTMLElement} */
-    element = (options.parent.getElementsByClassName('mdw-snackbar')[0]);
-  }
-  if (!element) {
-    element = document.createElement('div');
-    if (options.parent) {
-      options.parent.appendChild(element);
-    }
-    newlyCreated = true;
-  }
-  const queue = new SnackbarQueueItem(element, options);
-  if (options.skipQueue) {
-    SNACKBAR_QUEUE.splice(0, 0, queue);
-  } else {
-    SNACKBAR_QUEUE.push(queue);
-  }
-
-  if (options.show !== false) {
-    if (newlyCreated) {
-      // Update after show to trigger a text change
-      update(element, options);
-      show(element);
-      update(element, options);
-    } else {
-      show(element);
-    }
-  }
-  return element;
-}

package/components/snackbar/index.scss

@@ -1,2 +0,0 @@
-@forward './_spec.scss';
-@forward './_theme.scss';