@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/list/_spec.scss

@@ -0,0 +1,363 @@
+// 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: 1px !default;
+
+:root {
+  --mdw-list__inline-padding: 24px;
+  @include breakpoint.has16DPMargin() {
+    --mdw-list__inline-padding: 16px;
+  }
+
+}
+
+.mdw-list {
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+
+  &[mdw-margin-top] {
+    margin-block-start: 8px;
+  }
+
+  &[mdw-margin-bottom] {
+    margin-block-end: 8px;
+  }
+}
+
+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[mdw-vertical] {
+  inline-size: 40px;
+}
+
+.mdw-list__subheader,
+.mdw-list__content {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: stretch;
+  overflow: hidden;
+
+  min-block-size: 48px;
+  flex: 1;
+  padding: 0 var(--mdw-list__inline-padding);
+}
+
+.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-inline-size: 56px; /* 72 - 16 */
+  max-inline-size: 56px; /* 72 - 16 */
+  margin: 16px 0;
+}
+
+.mdw-list__avatar {
+  min-block-size: 40px;
+}
+
+.mdw-list__item {
+  display: flex;
+  flex-direction: column;
+
+  outline: none;
+}
+
+.mdw-list__item[aria-expanded] {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+
+    position: absolute;
+
+    inset-inline: 0;
+
+    block-size: 1px;
+
+    transition-duration: motion.$shapeChangeDuration;
+
+    transition-property: background-color;
+    transition-timing-function: motion.$standardEasing;
+
+    background-color: transparent;
+  }
+
+  &::before {
+    inset-block-start: -1px;
+  }
+
+  &::after {
+    inset-block-end: 0;
+  }
+
+  & > .mdw-list__content .mdw-list__secondary {
+    min-block-size: 48px;
+
+    pointer-events: none;
+
+    transition-duration: motion.$shapeChangeDuration;
+    transition-property: transform;
+    transition-timing-function: motion.$standardEasing;
+
+    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-block-size: 0;
+    flex-basis: 0;
+  }
+
+  99.99% {
+    min-block-size: 48px;
+    flex-basis: 0;
+  }
+
+  100% {
+    min-block-size: 48px;
+    flex-basis: 100%;
+  }
+}
+
+@keyframes collapseRow {
+  0% {
+    min-block-size: 48px;
+    flex-basis: 0;
+  }
+
+  100% {
+    min-block-size: 0;
+    flex-basis: 0;
+  }
+}
+
+.mdw-list__expand-checkbox {
+  display: none;
+
+  max-block-size: 0;
+  max-inline-size: 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-inline-size: var(--mdw-list__inline-padding);
+  margin-inline: 0 calc(-1 * var(--mdw-list__inline-padding));
+  border-width: 1px;
+  padding: 0 var(--mdw-list__inline-padding);
+
+  pointer-events: none;
+
+  z-index: 1;
+
+  &[mdw-action] {
+    pointer-events: auto;
+  }
+}
+
+// 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;
+    inset-block-end: 0;
+    inset-inline: 0;
+
+    block-size: $dividerHeight;
+    inline-size: 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-inline-start: 72px;
+}
+
+.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-inline: 28px 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-block-start: -20px;
+}
+
+// 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-block-size: sp(20 * 2);
+    block-size: sp(20 * 2);
+    margin-block-end: 16px;
+    padding-block-end: 4px;
+  }
+
+  &:only-child {
+    @include type.baselineToBottom(16);
+  }
+}

package/components/list/_theme.scss

@@ -0,0 +1,102 @@
+.mdw-theme {
+  --mdw-list__divider-color: var(--mdw-divider-color);
+  --mdw-list__focus-opacity: var(--mdw-list__focus-opacity-value);
+  --mdw-list__focus-selected-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__selected-opacity-value));
+  --mdw-list__focus-activated-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__activated-opacity-value));
+  --mdw-list__focus-hover-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__hover-opacity-value));
+  --mdw-list__focus-hover-selected-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__hover-opacity-value) + var(--mdw-list__selected-opacity-value));
+  --mdw-list__focus-hover-activated-opacity: calc(var(--mdw-list__focus-opacity-value) + var(--mdw-list__hover-opacity-value) + var(--mdw-list__activated-opacity-value));
+}
+
+.mdw-theme[mdw-light] {
+  --mdw-list__focus-opacity-value: 0.12;
+  --mdw-list__hover-opacity-value: 0.04;
+  --mdw-list__selected-opacity-value: 0.08;
+  --mdw-list__activated-opacity-value: 0.12;
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-list__focus-opacity-value: 0.24;
+  --mdw-list__hover-opacity-value: 0.08;
+  --mdw-list__selected-opacity-value: 0.16;
+  --mdw-list__activated-opacity-value: 0.24;
+}
+
+
+
+.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: var(--mdw-list__divider-color);
+  }
+}
+
+.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: var(--mdw-list__focus-opacity);
+      }
+
+      &:not([aria-disabled="true"]):not([mdw-overlay-touch="true"]) {
+        &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+          opacity: var(--mdw-list__focus-hover-opacity);
+        }
+      }
+    }
+
+    // Selected
+    &[aria-selected="true"]:not([mdw-overlay-off~="selected"]) {
+      &:not([mdw-overlay-touch="true"]) {
+        &:focus:not([mdw-overlay-off~="focus"])::before {
+          opacity: var(--mdw-list__focus-selected-opacity);
+        }
+
+        &:not([aria-disabled="true"]) {
+          &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+            opacity: var(--mdw-list__focus-hover-selected-opacity);
+          }
+        }
+      }
+    }
+
+    // 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: var(--mdw-list__focus-activated-opacity);
+        }
+
+        &:not([aria-disabled="true"]) {
+          &:hover:not([mdw-overlay-off~="hover"]):not([mdw-overlay-off~="focus"])::before {
+            opacity: var(--mdw-list__focus-hover-activated-opacity);
+          }
+        }
+      }
+    }
+  }
+}
+
+.mdw-list__item[aria-expanded="true"] {
+  &::before,
+  &::after {
+    background-color: var(--mdw-list__divider-color);
+  }
+
+  &[mdw-ink][aria-expanded="true"] {
+    & > .mdw-list__content,
+    & > .mdw-list__content::before,
+    & > .mdw-list__content > .mdw-list__text {
+      color: inherit;
+    }
+  }
+}

package/components/list/content.js

@@ -0,0 +1,106 @@
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import { dispatchDomEvent } 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;
+  }
+  const listContentElement = /** @type {HTMLElement} */ (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();
+  const listContentElement = /** @type {HTMLElement} */ (event.currentTarget);
+  if (Attributes.isDisabled(listContentElement)) {
+    return;
+  }
+  dispatchDomEvent(listContentElement, ACTIVATE_EVENT);
+}
+
+/**
+ * @param {Element} listContentElement
+ * @return {void}
+ */
+export function attach(listContentElement) {
+  if (!listContentElement.hasAttribute('role') && listContentElement.parentElement.getAttribute('role') === 'none') {
+    listContentElement.setAttribute('role', 'option');
+  }
+  for (const el of listContentElement.getElementsByClassName('mdw-list__icon')) {
+    el.setAttribute('aria-hidden', 'true');
+  }
+  for (const el of listContentElement.getElementsByClassName('mdw-list__avatar')) {
+    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);
+}