@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/selection/index.pug

@@ -0,0 +1,30 @@
+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

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

package/components/selection/input.js

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,64 @@
+// 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

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

package/components/snackbar/_spec.scss

@@ -0,0 +1,195 @@
+// 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;
+      }
+    }
+  }
+  
+}