@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/selection/_spec.scss

@@ -1,386 +0,0 @@
-// https://material.io/guidelines/components/selection-controls.html#
-// https://material.io/guidelines/patterns/selection.html#selection-item-selection
-
-@use "sass:math";
-
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-
-$ripple-size: dp(40) !default;
-$icon-size: dp(24) !default;
-$scale-size: math.div($ripple-size, $icon-size) !default;
-$radio-size: dp(20) !default;
-$checkbox-size: dp(18) !default;
-$border-size: dp(2) !default;
-$horizontal-margin: dp(2) !default;
-// from ic_check_black_18px.svg
-// rotated 45°
-$checkbox-icon-height: dp(12.73) !default;
-$checkbox-icon-width: dp(5.93) !default;
-$checkbox-icon-thickness: dp(1.5) !default;
-$checkbox-icon-offset-y: dp(2.64) - $checkbox-icon-thickness - $border-size !default;
-$checkbox-icon-offset-x: dp(6.04) - $border-size !default;
-
-.mdw-selection {
-  display: inline-flex;
-  position: relative;
-  flex-direction: row;
-}
-
-.mdw-selection__input {
-  display: inline-flex;
-  align-self: center;
-  order: 1;
-
-  min-height: $icon-size;
-  min-width: $icon-size;
-  margin: 0 auto;
-  padding: 0;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-
-  transition-property: transform, color, opacity;
-
-  opacity: 0;
-  transform: scale($scale-size);
-
-  background-color: currentColor;
-  // background-color: var(--button__ripple-color);
-  border-radius: 50%;
-
-  color: inherit;
-
-  &::-ms-check {
-    background-color: transparent;
-    border-color: transparent;
-    // IE11
-    border-radius: 50%;
-    color: transparent;
-  }
-
-  .mdw-selection[aria-disabled="true"] &,
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  // HTMLInputElement should not have psuedos
-  &.mdw-overlay::before {
-    display: none;
-    content: none;
-  }
-
-  &[role="switch"] {
-    margin-right: dp(12);
-  
-    transform: translateX(#{dp(-2)}) scale($scale-size);
-  
-    &:checked {
-      transform: translateX(#{dp(14)}) scale($scale-size);
-    }
-  
-    label.mdw-selection:active &:not(:disabled),
-    label.mdw-selection:hover &:not(:disabled),
-    &:active:not(:disabled),
-    &:hover:not(:disabled),
-    &:focus {
-      transform: translateX(#{dp(-2)}) scale($scale-size);
-  
-      &:checked {
-        transform: translateX(#{dp(14)}) scale($scale-size);
-      }
-    }
-  }
-}
-
-.mdw-selection__icon {
-  display: inline-flex;
-  position: relative;
-  
-  box-sizing: border-box;
-  height: $icon-size;
-  width: $icon-size;
-  flex: none;
-  margin: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-  padding: 0;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-
-  transition-property: background-color, border-color;
-
-  pointer-events: none;
-  
-  z-index: 1;
-
-  background-color: transparent;
-
-  :root[dir="rtl"] & {
-    order: 1;
-  }
-
-  .mdw-selection__input ~ & {
-    // width is represented by input element
-    max-width: 0;
-  }
-
-
-  &::before {
-    content: "";
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    box-sizing: border-box;
-    border-style: solid;
-    border-width: dp(2);
-
-    transition-property: border-width, border-color, background-color, color;
-
-    background-color: transparent;
-    border-color: currentColor;
-  }
-
-  &::after {
-    content: "";
-
-    position: absolute;
-  }
-
-  .mdw-selection[aria-disabled="true"] &,
-  .mdw-selection__input:disabled ~ & {
-    cursor: not-allowed;
-  }
-
-  &[mdw-checkbox] {
-    // Box outline
-    &::before {
-      top: ($icon-size - $checkbox-size) * 0.5;
-      left: ($icon-size - $checkbox-size) * 0.5;
-  
-      height: $checkbox-size;
-      width: $checkbox-size;
-  
-      border-radius: dp(2);
-  
-      // Checked or Active
-      .mdw-selection[aria-checked="true"] &,
-      .mdw-selection[aria-checked]:not([aria-disabled="true"]):active &,
-      .mdw-selection__input[type="checkbox"]:checked ~ &,
-      .mdw-selection__input[type="checkbox"]:not(:disabled):active ~ & {
-        border-width: $checkbox-size * 0.5;
-      }
-  
-      // Checked not
-      .mdw-selection[aria-checked="true"]:not(:active):not([aria-disabled="true"]) &,
-      .mdw-selection__input[type="checkbox"]:checked:not(:active):not(:disabled) ~ & {
-        background-color: currentColor;
-      }
-    }
-  
-    // Check stencil
-    &::after {
-      top: $border-size + (($icon-size - $checkbox-size) * 0.5);
-      left: $border-size + (($icon-size - $checkbox-size) * 0.5);
-      
-      height: $checkbox-icon-height;
-      width: $checkbox-icon-width;
-      margin-top: $checkbox-icon-offset-y;
-      margin-left: $checkbox-icon-offset-x;
-  
-      .mdw-selection[aria-checked="true"] &,
-      .mdw-selection__input[type="checkbox"]:checked ~ & {
-        box-sizing: border-box;
-        border-right-style: solid;
-        border-bottom-style: solid;
-        // border-width: $checkbox-icon-thickness;
-        // Increase visibility
-        border-width: dp(2);
-  
-        animation-name: showCheck;
-        animation-direction: normal;
-        animation-fill-mode: forwards;
-  
-        transition: none;
-        
-        transform: rotate(45deg);
-        
-        background-color: transparent;
-      }
-    }
-  }
-
-  &[mdw-radio] {
-    // Outer ring
-    &::before {
-      top: ($icon-size - $radio-size) * 0.5;
-      left: ($icon-size - $radio-size) * 0.5;
-  
-      height: $radio-size;
-      width: $radio-size;
-  
-      border-color: currentColor;
-      border-radius: 50%;
-  
-      // Active, not disabled
-      .mdw-selection:active:not([aria-disabled="true"]) &,
-      .mdw-selection__input:active:not(:disabled) ~ & {
-        border-width: $radio-size * 0.5;
-      }
-    }
-  
-    // Center dot
-    &::after {
-      top: ($icon-size - $radio-size) * 0.5;
-      left: ($icon-size - $radio-size) * 0.5;
-  
-      height: $radio-size;
-      width: $radio-size;
-  
-      transition-property: transform, background-color;
-  
-      transform: scale(0);
-  
-      background-color: currentColor;
-      border-radius: 50%;
-  
-      .mdw-selection[aria-checked="true"] &,
-      .mdw-selection__input:checked ~ & {
-        transform: scale(0.5);
-      }
-    }
-  }
-
-  &[mdw-switch] {
-    width: dp(36);
-
-    &::before {
-      top: dp(2);
-      left: 0;
-  
-      height: dp(20);
-      width: dp(20);
-      border-style: none;
-  
-      transition-property: background-color, transform;
-  
-      transform: translateX(0);
-      z-index: 1;
-  
-      background-color: currentColor;
-  
-      border-radius: 50%;
-      box-shadow: elevation.boxShadow(1);
-  
-      .mdw-selection[aria-checked="true"] &,
-      .mdw-selection__input:checked ~ & {
-        transform: translateX(#{dp(16)});
-      }
-    }
-  
-    &::after {
-      top: dp(5);
-      bottom: dp(5);
-      left: 0;
-  
-      height: dp(14);
-      width: dp(36);
-      margin: 0;
-      border-style: none;
-  
-      animation-name: none;
-  
-      transform: none;
-
-      background-color: currentColor;
-  
-      border-radius: dp(7);
-    }
-  
-    .mdw-selection:active:not([aria-disabled="true"]) &,
-    .mdw-selection__input:active:not(:disabled) ~ & {
-      // color: inherit;
-    }
-  }
-}
-
-.mdw-selection__label {
-  order: -1;
-
-  padding-right: dp(8);
-  padding-left: 0;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  z-index: 1;
-
-  :root[dir="rtl"] & {
-    padding-right: 0;
-    padding-left: dp(8);
-  }
-
-  // Label as suffix
-  .mdw-selection__icon ~ & {
-    order: 1;
-
-    padding-right: 0;
-    padding-left: dp(8);
-
-    :root[dir="rtl"] & {
-      padding-right: dp(8);
-      padding-left: 0;
-    }
-  }
-
-  .mdw-selection[aria-disabled="true"] &,
-  .mdw-selection__input:disabled ~ & {
-    cursor: not-allowed;
-  }
-}
-
-.mdw-selection__input,
-.mdw-selection__icon,
-.mdw-selection__icon::before,
-.mdw-selection__icon::after {
-  animation-duration: motion.$simpleDuration;
-  animation-timing-function: motion.$standardEasing;
-  animation-delay: 0s;
-
-  transition-delay: 0s;
-  transition-duration: motion.$simpleDuration;
-  transition-timing-function: motion.$standardEasing;
-}
-
-@keyframes showCheck {
-  // Animation is applied to pre-rotated box;
-  // Clip box completely horizontally and vertically upto bottom border
-  0% {
-    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, 0, auto, auto);
-  }
-  // Remove horizontal clip
-  // % = stroke length upto corner
-  #{math.div($checkbox-icon-width, $checkbox-icon-width + $checkbox-icon-height) * 100%} {
-    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, $checkbox-icon-width, auto, auto);
-  }
-  // Remove vertical clip
-  100% {
-    clip: rect(0, $checkbox-icon-width, auto, auto);
-  }
-}

package/components/selection/_theme.scss

@@ -1,166 +0,0 @@
-// https://material.io/archive/guidelines/components/selection-controls.html#selection-controls-switch
-
-@use '../../core/_platform.scss' as platform;
-@use '../../core/theme/_mixins.scss' as theme;
-
-$themeValues: (
-  icon-color:              theme.$foreground,
-  icon-opacity:            theme.$medium-opacity,
-  
-  fallback-check-color:    (('background', '50', 1.00), ('background','900',1.0)),
-  ripple-color:            (('foreground-light', 1.00), ('foreground-dark', 1.00)),
-
-  track-on-opacity:        (0.50, 0.50),
-  track-off-color:         (('foreground-light', 1.00), ('foreground-dark', 1.00)),
-  track-off-opacity:       (0.38, 0.30),
-
-  thumb-off-color:         (('background', '50', 1.00), ('background','400',1.0)),
-  thumb-disabled-color:    (('background', '400', 1.00), ('background','800',1.00)),
-
-  disabled-opacity:              (0.38, 0.50),
-
-  hover-opacity:                 (0.04, 0.08),
-  focus-opacity:                 (0.12, 0.24),
-  selected-opacity:              (0.08, 0.16),
-  
-  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
-
-  selected-hover-opacity:        (0.08 + 0.04, 0.16 + 0.08),
-  selected-focus-opacity:        (0.08 + 0.12, 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
-
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('selection', $themeValues, $key, $type);
-}
-
-@mixin addThemeRules($type: 'var') {
-  .mdw-selection__input {
-    opacity: 0;
-  }
-
-  // Unchecked
-  .mdw-selection:not([aria-checked="true"]) .mdw-selection__input:not(:checked) {
-    color: RGBA(getThemeValue("icon-color", $type), getThemeValue("icon-opacity", $type));
-  }
-
-  // Default Focus
-  .mdw-selection__input:not([mdw-overlay-touch="true"]):focus:not([mdw-overlay-off~="focus"]) {
-    opacity: getThemeValue("focus-opacity", $type);
-  }
-
-  // Checked Focus
-  .mdw-selection[aria-checked="true"] .mdw-selection__input,
-  .mdw-selection__input:checked {
-    &:not([mdw-overlay-touch="true"]):focus:not([mdw-overlay-off~="focus"]):not([mdw-overlay-off~="selected"]) {
-      opacity: getThemeValue("selected-focus-opacity", $type);
-    }
-  }
-
-  // Default Hover (only when not disabled)
-  .mdw-selection:not([aria-disabled="true"]) .mdw-selection__input:not(:disabled) {
-    &:not([mdw-overlay-touch="true"]) {
-      &:hover:not([mdw-overlay-off~="hover"]) {
-        opacity: getThemeValue("hover-opacity", $type);
-
-        &:focus:not([mdw-overlay-off~="focus"]) {
-          opacity: getThemeValue("hover-focus-opacity", $type);
-        }
-      }
-    }
-  }
-
-  // Checked Hover (only when not disabled)
-  .mdw-selection:not([aria-disabled="true"])[aria-checked="true"] .mdw-selection__input:not(:disabled),
-  .mdw-selection__input:not(:disabled):checked {
-    &:not([mdw-overlay-touch="true"]) {
-      &:not([mdw-overlay-off~="selected"]) {
-        &:hover:not([mdw-overlay-off~="hover"]) {
-          opacity: getThemeValue("selected-hover-opacity", $type);
-
-          &:focus:not([mdw-overlay-off~="focus"]) {
-            opacity: getThemeValue("selected-hover-focus-opacity", $type);
-          }
-        }
-      }
-    }
-  }
-
-
-  // Checkbox check default
-  .mdw-selection__icon[mdw-checkbox]::after {
-    // Checkbox color is based on currently filled background-color
-    @if($type == 'var') {
-      @include platform.ifEdge() {
-        // Edge will not inherit css variables for border in psuedos
-        border-color: RGBA(getThemeValue("fallback-check-color", $type));
-      }
-      border-color: RGB(var(--mdw-surface));
-    } @else {
-      border-color: RGBA(getThemeValue("fallback-check-color", $type));
-    }
-  }
-
-  // Switch track default
-  .mdw-selection__icon[mdw-switch]::after {
-    opacity: getThemeValue("track-on-opacity", $type);
-  }
-
-  // Unchecked or disabled HTMLInputElement
-  .mdw-selection[aria-checked="false"] .mdw-selection__icon,
-  .mdw-selection[aria-disabled="true"] .mdw-selection__icon,
-  input.mdw-selection__input:not(:checked) ~ .mdw-selection__icon,
-  .mdw-selection__input:disabled ~ .mdw-selection__icon {
-    &[mdw-checkbox],
-    &[mdw-radio] {
-      color: RGBA(getThemeValue("icon-color", $type), getThemeValue("icon-opacity", $type));
-    }
-
-    &[mdw-switch] {
-      // Thumb
-      &::before {
-        background-color: RGBA(getThemeValue("thumb-off-color", $type));
-      }
-      // Track
-      &::after {
-        opacity: getThemeValue("track-off-opacity", $type);
-
-        background-color: RGBA(getThemeValue("track-off-color", $type));
-      }
-    }
-  }
-
-  // Disabled HTMLInputElement
-  .mdw-selection[aria-disabled="true"] .mdw-selection__label,
-  .mdw-selection[aria-disabled="true"] .mdw-selection__icon,
-  .mdw-selection__input:disabled ~ .mdw-selection__label,
-  .mdw-selection__input:disabled ~ .mdw-selection__icon {
-    opacity: getThemeValue("disabled-opacity", $type);
-  }
-
-  // Disabled switch colors
-  .mdw-selection[aria-disabled="true"] .mdw-selection__icon[mdw-switch],
-  .mdw-selection__input:disabled ~ .mdw-selection__icon[mdw-switch] {
-    // Thumb
-    &::before {
-      background-color: RGBA(getThemeValue("thumb-disabled-color", $type));
-    }
-    // Track
-    &::after {
-      background-color: RGBA(getThemeValue("track-off-color", $type));
-    }
-  }
-}
-
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('selection', $themeValues) {
-  @include addThemeRules();
-}

package/components/selection/index.eta

@@ -1,60 +0,0 @@
-<label <%~ Object.entries({
-  'class': [
-    'mdw-selection',
-    it?.labelClass,
-  ].filter(v=>v).join(' '),
-  ...it?.labelAttributes,
-  }).map(([key, value]) => {
-    if (value === true) return key;
-    if (value === false || value == null) return false;
-    return `${key}="${value}"`
-  }).filter(v=>v).join(' ')-%>>
-
-  <%_ _%>
-
-  <input <%~ Object.entries({
-    class: [
-      'mdw-selection__input',
-      'mdw-overlay',
-      it?.ink || it?.theme ? 'mdw-theme': '',
-    ].filter(v=>v).join(' '),
-    'mdw-overlay-disabled': 'none',
-    'mdw-ink': it?.ink,
-    'role': it?.type === 'switch' ? 'switch' : false,
-    'type': it?.type === 'radio' ? 'radio' : 'checkbox',
-    'checked': it?.checked,
-    'disabled': it?.disabled && it?.disabled !== 'false',
-    'aria-disabled': it?.disabled === true ? 'true' : it?.disabled,
-    'name': it?.name,
-    'value': it?.value,
-    ...it?.attributes,
-  }).map(([key, value]) => {
-    if (value === true) return key;
-    if (value === false || value == null) return false;
-    return `${key}="${value}"`;
-  }).filter(v=>v).join(' ')-%> />
-
-  <%_ if (it?.prefix) { _%>
-  <div class="mdw-selection__label"><%~ it?.body ?? '' %><%= it?.text ?? '' %></div>
-  <%_ } _%>
-
-  <div <%~ Object.entries({
-    'class': [
-      'mdw-selection__icon',
-      it?.ink || it?.theme ? 'mdw-theme' : false,
-    ].filter(v=>v).join(' '),
-    'mdw-ink': it?.ink,
-    'mdw-radio': it?.type === 'radio',
-    'mdw-switch': it?.type === 'switch',
-    'mdw-checkbox': it?.type !== 'radio' && it?.type !== 'switch',
-  }).map(([key, value]) => {
-    if (value === true) return key;
-    if (value === false || value == null) return false;
-    return `${key}="${value}"`;
-  }).filter(v=>v).join(' ')-%>></div>
-
-  <%_ if (!it?.prefix) { _%>
-  <div class="mdw-selection__label"><%~ it?.body ?? '' %><%= it?.text ?? '' %></div>
-  <%_ } _%>
-
-</label>

package/components/selection/index.js

@@ -1,76 +0,0 @@
-import * as Attributes from '../../core/aria/attributes.js';
-import * as Keyboard from '../../core/aria/keyboard.js';
-
-import * as SelectionInput from './input.js';
-
-export const CHECKED_CHANGE_EVENT = 'mdw:selection-checkedchange';
-
-/**
- * @param {Element} selectionElement
- * @param {boolean|string} newValue
- * @param {boolean} [dispatchEvent=false]
- * @return {boolean} successful
- */
-export function setChecked(selectionElement, newValue, dispatchEvent) {
-  return Attributes.setChecked(
-    selectionElement,
-    newValue,
-    dispatchEvent ? CHECKED_CHANGE_EVENT : null,
-  );
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onActivateEvent(event) {
-  if (event.target instanceof HTMLInputElement) {
-    return;
-  }
-  if (event.type === Keyboard.SPACEBAR_KEY) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-  /** @type {HTMLElement} */
-  const selectionElement = (event.currentTarget);
-  if (Attributes.isDisabled(selectionElement)) {
-    return;
-  }
-  if (Attributes.isReadonly(selectionElement)) {
-    return;
-  }
-  if (!selectionElement.hasAttribute('aria-checked')) {
-    return;
-  }
-  if (event.type === 'click' || event.type === SelectionInput.CLICK_EVENT) {
-    if (selectionElement.hasAttribute('mdw-no-autocheck')) {
-      return;
-    }
-  }
-  const role = selectionElement.getAttribute('role');
-  if (event.type === 'focus' || event.type === SelectionInput.FOCUS_EVENT) {
-    if (role !== 'radio') {
-      return;
-    }
-  }
-  const newValue = (role === 'radio' ? true : !Attributes.isChecked(selectionElement));
-  setChecked(selectionElement, newValue, true);
-}
-
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-export function attach(element) {
-  /** @type {HTMLElement} */
-  const inputElement = (element.getElementsByClassName('mdw-selection__input')[0]);
-  if (inputElement) {
-    SelectionInput.attach(inputElement);
-  }
-  Keyboard.attach(element);
-  element.addEventListener('focus', onActivateEvent);
-  element.addEventListener('click', onActivateEvent);
-  element.addEventListener(Keyboard.SPACEBAR_KEY, onActivateEvent);
-  element.addEventListener(SelectionInput.FOCUS_EVENT, onActivateEvent);
-  element.addEventListener(SelectionInput.CLICK_EVENT, onActivateEvent);
-}