@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/list/_spec.scss

@@ -1,397 +0,0 @@
-// https://material.io/guidelines/components/lists.html
-// https://material.io/guidelines/components/lists-controls.html
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_platform.scss' as platform;
-@use '../../core/_type.scss' as type;
-
-$dividerHeight: dp(1) !default;
-
-.mdw-list {
-  margin: 0;
-  padding: 0;
-
-  list-style-type: none;
-
-  &[mdw-margin-top] {
-    margin-top: dp(8);
-  }
-
-  &[mdw-margin-bottom] {
-    margin-bottom: dp(8);
-  }
-}
-
-
-li.mdw-list__item {
-  position: relative;
-
-  margin: 0;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  
-  text-align: start;
-  text-decoration: none;
-  text-transform: none;
-}
-
-a.mdw-list__content {
-  text-decoration: none;
-}
-
-.mdw-list__content > .mdw-divider__vertical {
-  height: dp(40);
-}
-
-.mdw-list__subheader,
-.mdw-list__content {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: stretch;
-  overflow: hidden;
-  
-  min-height: dp(48);
-  flex: 1;
-  padding: 0 dp(24);
-  @include breakpoint.has16DPMargin() {
-    padding: 0 dp(16);
-  }
-}
-
-.mdw-list__subheader {
-  @include type.addRules('body-2');
-}
-
-.mdw-list__content {
-  @include type.addRules('subtitle');
-  cursor: pointer;
-
-  text-align: start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &[aria-hidden="true"] {
-    display: none;
-  }
-}
-
-.mdw-list__avatar,
-.mdw-list__icon {
-  display: flex;
-  align-self: flex-start;
-  flex-direction: row;
-  justify-content: flex-start;
-  order: -1;
-  
-  min-width: dp(72 - 16);
-  max-width: dp(72 - 16);
-  margin: dp(16) 0;
-}
-
-
-.mdw-list__avatar {
-  min-height: dp(40);
-}
-
-.mdw-list__item {
-  display: flex;
-  flex-direction: column;
-
-  outline: none;
-}
-
-.mdw-list__item[aria-expanded] {
-  position: relative;
-
-  &::before,
-  &::after {
-    position: absolute;
-
-    right: 0;
-    left: 0;
-
-    height: dp(1);
-
-    transition-duration: motion.$shapeChangeDuration;
-
-    transition-property: background-color;
-    transition-timing-function: motion.$standardEasing;
-
-    background-color: transparent;
-    content: '';
-  }
-
-  &::before {
-    top: dp(-1);
-  }
-
-  &::after {
-    bottom: 0;
-  }
-
-  & > .mdw-list__content .mdw-list__secondary {
-    min-height: dp(48);
-
-    transition-duration: motion.$shapeChangeDuration;
-    transition-property: transform;
-    transition-timing-function: motion.$standardEasing;
-
-    pointer-events: none;
-    transform: rotate(0deg);
-  }
-
-  & > .mdw-list {
-    display: flex;
-    flex-direction: column;
-
-    & > .mdw-list__item {
-      overflow: hidden;
-
-      flex-basis: 0;
-
-      animation-duration: motion.$collapseDuration;
-      animation-timing-function: motion.$accelerateEasing;
-      animation-fill-mode: forwards;
-    }
-  }
-
-  &[aria-expanded="false"] {
-    & > .mdw-list > .mdw-list__item {
-      animation-name: collapseRow;
-    }
-  }
-
-  &[aria-expanded="true"] {
-    & > .mdw-list__content .mdw-list__secondary {
-      transform: rotate(180deg);
-    }
-
-    & > .mdw-list > .mdw-list__item {
-      animation-name: expandRow;
-      animation-duration: motion.$expandDuration;
-      animation-timing-function: motion.$decelerateEasing;
-    }
-
-    & + .mdw-list__list-item[aria-expanded="true"]::before {
-      display: none;
-    }
-  }
-
-  &:not([mdw-expander-js]) > .mdw-list .mdw-list__item {
-    animation-duration: 0s;
-  }
-}
-
-@keyframes expandRow {
-  0% {
-    min-height: 0;
-    flex-basis: 0;
-  }
-
-  99.99% {
-    min-height: dp(48);
-    flex-basis: 0;
-  }
-
-  100% {
-    min-height: dp(48);
-    flex-basis: 100%;
-  }
-}
-
-@keyframes collapseRow {
-  0% {
-    min-height: dp(48);
-    flex-basis: 0;
-  }
-
-  100% {
-    min-height: 0;
-    flex-basis: 0;
-  }
-}
-
-.mdw-list__expand-checkbox {
-  display: none;
-
-  max-height: 0;
-  max-width: 0;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  pointer-events: none;
-
-}
-
-.mdw-list__secondary {
-  display: flex;
-  position: relative;
-  align-items: center;
-  align-self: stretch;
-  flex-direction: row;
-  justify-content: center;
-  order: 1;
-  
-  min-width: dp(24);
-  margin-right: dp(-24);
-  margin-left: 0;
-  border-width: dp(1);
-  padding: 0 dp(24);
-
-  pointer-events: none;
-
-  z-index: 1;
-  @include breakpoint.has16DPMargin() {
-    margin-right: dp(-16);
-    margin-left: 0;
-    padding: 0 dp(16);
-  }
-
-  :root[dir="rtl"] & {
-    margin-right: 0;
-    margin-left: dp(-24);
-    @include breakpoint.has16DPMargin() {
-      margin-right: 0;
-      margin-left: dp(-16);
-    }
-  }
-
-  &[mdw-action] {
-    pointer-events: auto;
-  }
-}
-
-
-@include platform.ifIE() {
-  .mdw-list__icon::after,
-  .mdw-list__secondary::after {
-    // Fix IE min-height flexbug
-    content: '';
-    
-    min-height: inherit;
-    width: 0;
-  }
-}
-
-// In order to render 48px, 64px, 72px and 88px heights, lines are rendered bottom-up
-
-.mdw-list__text {
-  position: static;
-  overflow-x: hidden;
-
-  flex-grow: 1;
-  
-  pointer-events: none;
-
-  text-overflow: ellipsis;
-}
-
-.mdw-list[mdw-divider] .mdw-list__item:not(:last-child) {
-  .mdw-list__text::after {
-    content: '';
-
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    height: $dividerHeight;
-    width: 100%;
-  }
-}
-
-.mdw-list__avatar ~ .mdw-list__text::after,
-.mdw-list[mdw-divider] > .mdw-list__item:not(:last-child) .mdw-list__icon ~ .mdw-list__text::after {
-  margin-left: dp(72);
-}
-
-.mdw-list__text-line {
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  text-overflow: ellipsis;
-}
-
-// First line and meta baseline alignment
-.mdw-list__text-line:first-child,
-.mdw-list__text-block:first-child,
-.mdw-list__meta {
-  @include type.baselineToTop(28);
-}
-
-.mdw-list__meta {
-  @include type.addRules('caption');
-  align-self: flex-start;
-
-  margin-right: 0;
-  margin-left: dp(28);
-
-  :root[dir="rtl"] & {
-    margin-right: dp(28);
-    margin-left: 0;
-  }
-}
-
-
-// First line is pushed up 20dp
-.mdw-list__text-line:first-child {
-  @include type.baselineToBottom(20);
-}
-
-// Second and third lines are pushed up 20dp and its above element is pushed 20dp
-.mdw-list__text-line:not(:first-child),
-.mdw-list__text-block:not(:first-child) {
-  @include type.addRules('body-2');
-  @include type.baselineToTop(20);
-  margin-top: dp(-20);
-}
-
-// Second line is pushed up 16dp from baseline
-.mdw-list__text-line:last-child {
-  @include type.baselineToBottom(16);
-}
-
-
-// When 3-lines, 2nd and 3rd lines are pushed up 20dp
-.mdw-list__text-line:nth-child(3),
-.mdw-list__text-line:not(:first-child):not(:last-child) {
-  @include type.baselineToBottom(20);
-}
-
-
-.mdw-list__text-block {
-  display: block;
-  display: -webkit-box;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  
-  
-  pointer-events: none;
-
-  text-align: start;
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: normal;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-
-  word-break: break-word;
-
-  &:not(:only-child) {
-    max-height: sp(20 * 2);
-    height: sp(20 * 2);
-    margin-bottom: dp(16);
-    padding-bottom: dp(4);
-  }
-  
-  &:only-child {
-    @include type.baselineToBottom(16);
-  }
-}

package/components/list/_theme.scss

@@ -1,111 +0,0 @@
-@use '../../core/theme/_mixins.scss' as theme;
-
-$themeValues: (
-  divider-color:                 theme.$foreground,
-  divider-opacity:               theme.$divider-opacity,
-
-  focus-opacity:                 (0.12, 0.24),
-  hover-focus-opacity:           (0.04 + 0.12, 0.08 + 0.24),
-  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),
-
-  activated-focus-opacity:       (0.12 + 0.12, 0.24 + 0.24),
-  activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
-
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('list', $themeValues, $key, $type);
-}
-
-@mixin addThemeRules($type: 'var') {
-  .mdw-list__content {
-    &[mdw-ink][aria-current] {
-      .mdw-list__icon,
-      .mdw-list__text {
-        color: inherit;
-      }
-    }
-  }
-
-  .mdw-list[mdw-divider] {
-    & > .mdw-list__item:not(:last-child) .mdw-list__text::after {
-      background-color: RGBA(getThemeValue("divider-color", $type), getThemeValue("divider-opacity", $type));
-    }
-  }
-
-  .mdw-list__item[aria-expanded]:focus {
-    & > .mdw-list__content {
-      &:not([mdw-overlay-touch="true"]) {
-        &:not([mdw-overlay-off~="focus"]):not([mdw-overlay-touch="true"])::before {
-          opacity: getThemeValue("focus-opacity", $type);
-        }
-  
-        &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
-          &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("hover-focus-opacity", $type);
-          }
-        }
-      }
-  
-      // Selected
-      &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
-        &:not([mdw-overlay-touch="true"]) {
-          &:focus:not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("selected-focus-opacity", $type);
-          }
-  
-          &:not([aria-disabled="true"]) {
-            &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-              opacity: getThemeValue("selected-hover-focus-opacity", $type);
-            }
-          }
-        }
-      }
-  
-      // Activated
-      &[aria-current]:not([mdw-overlay-off~="current"]),
-      &[aria-pressed="true"]:not([mdw-overlay-off~="activated"]) {
-        &:not([mdw-overlay-touch="true"]) {
-          &:not([mdw-overlay-off~="focus"])::before {
-            opacity: getThemeValue("activated-focus-opacity", $type);
-          }
-  
-          &:not([aria-disabled="true"]) {
-            &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
-              opacity: getThemeValue("activated-hover-focus-opacity", $type);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .mdw-list__item[aria-expanded="true"] {
-    &::before,
-    &::after {
-      background-color: RGBA(getThemeValue("divider-color", $type), getThemeValue("divider-opacity", $type));
-    }
-
-    &[mdw-ink][aria-expanded="true"] {
-      & > .mdw-list__content,
-      & > .mdw-list__content::before,
-      & > .mdw-list__content > .mdw-list__text {
-        color: inherit;
-      }
-    }
-  }
-  
-}
-
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('list', $themeValues) {
-  @include addThemeRules();
-}

package/components/list/content.js

@@ -1,110 +0,0 @@
-import * as Attributes from '../../core/aria/attributes.js';
-import * as Keyboard from '../../core/aria/keyboard.js';
-import { dispatchDomEvent, iterateArrayLike } from '../../core/dom.js';
-import * as Overlay from '../../core/overlay/index.js';
-import * as Ripple from '../../core/ripple/index.js';
-
-import * as ListSecondary from './secondary.js';
-
-export const ACTIVATE_EVENT = 'mdw:listcontent-activate';
-export const SELECTED_CHANGE_EVENT = 'mdw:listcontent-selectedchange';
-export const FOCUS_EVENT = 'mdw:listcontent-focus';
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onEnterKey(event) {
-  if (event.detail.ctrlKey || event.detail.shiftKey
-    || event.detail.altKey || event.detail.metaKey) {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const listContentElement = (event.currentTarget);
-  if (!listContentElement) {
-    return;
-  }
-  event.stopPropagation();
-  event.preventDefault();
-
-  // Slightly redundant, but performs ripple
-  const newEvent = document.createEvent('Event');
-  newEvent.initEvent('click', true, true);
-  listContentElement.dispatchEvent(newEvent);
-}
-
-/**
- * @param {MouseEvent|KeyboardEvent|PointerEvent} event
- * @return {void}
- */
-export function onClick(event) {
-  event.preventDefault();
-  /** @type {HTMLElement} */
-  const listContentElement = (event.currentTarget);
-  if (Attributes.isDisabled(listContentElement)) {
-    return;
-  }
-  dispatchDomEvent(listContentElement, ACTIVATE_EVENT);
-}
-
-/**
- * @param {Element} listContentElement
- * @return {void}
- */
-export function attach(listContentElement) {
-  if (!listContentElement.hasAttribute('role')) {
-    if (listContentElement.parentElement.getAttribute('role') === 'none') {
-      listContentElement.setAttribute('role', 'option');
-    }
-  }
-  iterateArrayLike(listContentElement.getElementsByClassName('mdw-list__icon'), (el) => {
-    el.setAttribute('aria-hidden', 'true');
-  });
-  iterateArrayLike(listContentElement.getElementsByClassName('mdw-list__avatar'), (el) => {
-    el.setAttribute('aria-hidden', 'true');
-  });
-  listContentElement.addEventListener('click', onClick);
-
-  if (!listContentElement.hasAttribute('mdw-no-overlay')) {
-    listContentElement.classList.add('mdw-overlay');
-    Overlay.attach(listContentElement);
-  }
-  if (!listContentElement.hasAttribute('mdw-no-ripple')) {
-    listContentElement.classList.add('mdw-ripple');
-    Ripple.attach(listContentElement);
-  }
-  if (listContentElement.getAttribute('role') === 'radio'
-  && listContentElement.getAttribute('aria-checked') === 'true'
-  && listContentElement.getAttribute('tabindex') !== '0') {
-    listContentElement.setAttribute('tabindex', '0');
-  }
-  const secondaryElement = listContentElement.getElementsByClassName('mdw-list__secondary')[0];
-  if (secondaryElement) {
-    ListSecondary.attach(secondaryElement);
-  }
-  Keyboard.attach(listContentElement);
-  listContentElement.addEventListener(Keyboard.ENTER_KEY, onEnterKey);
-}
-/**
- * @param {Element} listContentElement
- * @return {void}
- */
-export function detach(listContentElement) {
-  Keyboard.detach(listContentElement);
-  const secondaryElement = listContentElement.getElementsByClassName('mdw-list__secondary')[0];
-  if (secondaryElement) {
-    ListSecondary.detach(secondaryElement);
-  }
-  Ripple.detach(listContentElement);
-  Overlay.detach(listContentElement);
-}
-
-/**
- * @param {Element} element
- * @param {string|boolean} value
- * @param {boolean} [dispatchEvent=true]
- * @return {boolean} successful
- */
-export function setSelected(element, value, dispatchEvent = true) {
-  return Attributes.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
-}