@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/selection/index.pug

@@ -1,30 +0,0 @@
-mixin mdwSelection(options={})
-  label.mdw-selection
-    input.mdw-selection__input.mdw-overlay(
-    mdw-overlay-disabled="none"
-    class=(options.ink ? 'mdw-theme' : false)
-    mdw-ink=(options.ink)
-    role=(options.type === 'switch' ? 'switch' : false)
-    type=(options.type === 'radio' ? 'radio' : 'checkbox')
-    checked=(options.checked ? '' : false)
-    disabled=(options.disabled ? '' : false)
-    aria-disabled=(options.disabled ? 'true' : false)
-    name=(options.name)
-    value=(options.value)
-    )&attributes(attributes)
-    if (options.prefix)
-      .mdw-selection__label
-        block
-      .mdw-selection__icon(class=(options.ink ? 'mdw-theme' : false)
-      mdw-ink=(options.ink)
-      mdw-radio=(options.type === 'radio' ? '' : false)
-      mdw-switch=(options.type === 'switch' ? '' : false)
-      mdw-checkbox=(options.type !== 'radio' && options.type !== 'switch' ? '' : false))
-    else
-      .mdw-selection__icon(class=(options.ink ? 'mdw-theme' : false)
-      mdw-ink=(options.ink)
-      mdw-radio=(options.type === 'radio' ? '' : false)
-      mdw-switch=(options.type === 'switch' ? '' : false)
-      mdw-checkbox=(options.type !== 'radio' && options.type !== 'switch' ? '' : false))
-      .mdw-selection__label
-        block

package/components/selection/index.scss

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

package/components/selection/input.js

@@ -1,56 +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) {
-    if (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,47 +0,0 @@
-import { iterateArrayLike } from '../../core/dom.js';
-
-import * as Selection from './index.js';
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onCheckedChange(event) {
-  const { detail } = event;
-  if (detail.value === 'false') {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const radiogroupElement = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const itemElement = (event.target);
-  setTimeout(() => {
-    // Wait to see if event is cancelled
-    if (event.defaultPrevented) {
-      return;
-    }
-    iterateArrayLike(radiogroupElement.querySelectorAll('[role="radio"][aria-checked="true"]'),
-      (item) => {
-        if (item === itemElement) {
-          return;
-        }
-        item.setAttribute('aria-checked', 'false');
-      });
-  });
-}
-
-/**
- * @param {HTMLElement} 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,64 +0,0 @@
-// https://material.io/design/components/sliders.html#spec
-
-@use '../../core/_length.scss' as *;
-
-@mixin track {
-  width: 100%;
-  height: dp(2);
-  background-color: currentColor;
-  border-color: transparent;
-  color: inherit;
-}
-
-@mixin thumb {
-  height: dp(12);
-  width: dp(12);
-  border-radius: 50%;
-  background-color: currentColor;
-  color: inherit;
-  cursor: pointer;
-}
-
-.mdw-slider__input {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  color: inherit;
-  background: transparent;
-  
-  
-  &:focus {
-    outline: none;
-  }
-  
-  &::-ms-track {
-    width: 100%;
-    cursor: pointer;
-  
-    background: transparent; 
-    border-color: transparent;
-    color: transparent;
-  }
-  
-  &::-moz-range-track {
-    @include track;
-  }
-  &::-ms-track {
-    @include track;
-  }
-  &::-webkit-slider-runnable-track {
-    @include track;
-  }
-  &::-ms-thumb {
-    @include thumb;
-  }
-  &::-moz-range-thumb {
-    @include thumb;
-  }
-  &::-webkit-slider-thumb {
-    @include thumb;
-    -webkit-appearance: none;
-    margin-top: dp(-5);
-  }
-}
-

package/components/slider/index.scss

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

package/components/snackbar/_spec.scss

@@ -1,195 +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;
-  right: 0;
-  bottom: 0;
-  left: 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;
-  bottom: 0;
-  align-items: center;
-  justify-content: space-between;
-
-  min-height: dp(48);
-  max-width: 100%;
-  padding-right: dp(8);
-  padding-left: dp(8);
-
-  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;
-
-  // Default state is hidden
-  pointer-events: auto;
-  transform: scale($scale-initial);
-  visibility: hidden;
-
-  border-radius: dp(4);
-  
-  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: dp(6) 0;
-}
-
-.mdw-snackbar > span {
-  @include type.textTopToTop(16);
-  @include type.baselineToBottom(48 - 30);
-  box-sizing: border-box;
-  padding: 0 dp(8);
-
-  white-space: pre-line;
-}
-
-@include breakpoint.isXSmallWindow() {
-  .mdw-snackbar {
-    right: 0;
-    left: 0;
-
-    &[mdw-stacked] {
-      align-items: flex-end;
-      flex-direction: column;
-      justify-content: center;
-
-      > span {
-        width: 100%;
-      }
-
-      .mdw-button {
-        margin-top: dp(2);
-        margin-bottom: dp(8);
-      }
-    }
-  }
-}
-
-@include platform.ifIE() {
-  // Fix IE flexbug
-  .mdw-snackbar {
-    &::after {
-      min-height: inherit;
-      min-width: 0;
-      content: '';
-    }
-  }
-
-  .mdw-snackbar__container[mdw-position="center"] {
-    .mdw-snackbar {
-      transform: translateX(-50%);
-
-      html[dir="rtl"] & {
-        transform: translateX(50%);
-
-        &[mdw-hide] {
-          transform: translateX(50%) scale($scale-initial);
-        }
-      }
-
-      &[mdw-hide] {
-        transform: translateX(-50%) scale($scale-initial);
-      }
-    }
-  }
-
-  .mdw-snackbar__container[mdw-position="end"] {
-    .mdw-snackbar {
-      right: 0;
-
-      html[dir="rtl"] & {
-        right: auto;
-        left: 0;
-      }
-    }
-  }
-  
-}