@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/list/_spec.scss

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

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

@@ -0,0 +1,110 @@
+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);
+}