@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/list/_spec.scss

@@ -1,363 +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: 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

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

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