@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/chip/_theme.scss

@@ -1,105 +0,0 @@
-/* https://material.io/design/interaction/states.html */
-/* https://material.io/design/components/chips.html */
-/* https://material.io/design/iconography/system-icons.html#color */
-
-.mdw-theme {
-  --mdw-chip__text-color: var(--mdw-text-color);
-  --mdw-chip__background-color: var(--mdw-divider-color);
-  --mdw-chip__active-icon-color__focus: var(--mdw-text-color);
-  --mdw-chip__active-icon-color: var(--mdw-medium-color);
-  --mdw-chip__inactive-icon-color: var(--mdw-inactive-color);
-  --mdw-chip__overlay-color: RGBA(var(--mdw-ink-default), 1.00);
-
-  --mdw-chip__disabled-background-color: RGBA(var(--mdw-ink-default), 0.12);
-  --mdw-chip__outline-color: RGBA(var(--mdw-ink-default), 0.12);
-
-  --mdw-chip__default-opacity: var(--mdw-chip__default-opacity-value);
-  --mdw-chip__hover-opacity: var(--mdw-chip__hover-opacity-value);
-  --mdw-chip__focus-opacity: var(--mdw-chip__focus-opacity-value);
-  --mdw-chip__selected-opacity: var(--mdw-chip__selected-opacity-value);
-  --mdw-chip__outlined-opacity: var(--mdw-chip__outlined-opacity-value);
-  --mdw-chip__activated-opacity: var(--mdw-chip__activated-opacity-value);
-}
-
-.mdw-theme[mdw-light] {
-  --mdw-chip__default-opacity-value: 0.12;
-  --mdw-chip__hover-opacity-value: 0.04;
-  --mdw-chip__focus-opacity-value: 0.12;
-  --mdw-chip__selected-opacity-value: 0.08;
-  --mdw-chip__outlined-opacity-value: 0.00;
-  --mdw-chip__activated-opacity-value: 0.12;
-  --mdw-chip__activated-text-color: inherit;
-
-  --mdw-chip__pressed-opacity: 0.16;
-
-  --mdw-chip__disabled-text-color: RGBA(var(--mdw-ink-default-light), 0.26);
-}
-
-.mdw-theme[mdw-dark] {
-  --mdw-chip__default-opacity-value: 0.24;
-  --mdw-chip__hover-opacity-value: 0.08;
-  --mdw-chip__focus-opacity-value: 0.24;
-  --mdw-chip__selected-opacity-value: 0.16;
-  --mdw-chip__outlined-opacity-value: 0.00;
-  --mdw-chip__activated-opacity-value: 0.24;
-  --mdw-chip__activated-text-color: var(--mdw-text-color);
-
-  --mdw-chip__pressed-opacity: 0.32;
-
-  --mdw-chip__disabled-text-color: RGBA(var(--mdw-ink-default-dark), 0.30);
-}
-
-.mdw-chip {
-  --mdw-chip__base-opacity: var(--mdw-chip__default-opacity);
-  --mdw-chip__border-color: transparent;
-
-  &[mdw-outlined] {
-    --mdw-chip__base-opacity: var(--mdw-chip__outlined-opacity);
-    --mdw-chip__border-color: var(--mdw-chip__outline-color);
-  }
-}
-
-.mdw-chip__thumbnail,
-.mdw-chip__remove,
-.mdw-chip__text {
-  color: var(--mdw-chip__text-color);
-}
-
-.mdw-chip__input {
-  border-color: var(--mdw-chip__border-color);
-  color: inherit;
-
-  &:not(:hover) {
-    --mdw-chip__hover-opacity: 0;
-  }
-
-  &:not(:focus) {
-    --mdw-chip__focus-opacity: 0;
-  }
-
-  &:not(:checked) {
-    --mdw-chip__selected-opacity: 0;
-  }
-
-  &::before {
-    opacity: calc(var(--mdw-chip__base-opacity) + var(--mdw-chip__hover-opacity) + var(--mdw-chip__focus-opacity) + var(--mdw-chip__selected-opacity));
-
-    background-color: var(--mdw-chip__overlay-color);
-  }
-
-  &:checked::before {
-    color: inherit;
-  }
-
-  &:checked {
-    & ~ .mdw-chip__text {
-      color: var(--mdw-chip__activated-text-color);
-    }
-
-    &[type="radio"] {
-      &::before {
-        background: currentColor;
-      }
-    }
-  }
-}

package/components/chip/index.js

@@ -1,23 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#Listbox
-
-import * as ChipItem from './item.js';
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  for (const el of element.getElementsByClassName('mdw-chip__item')) {
-    ChipItem.attach(el);
-  }
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  for (const el of element.getElementsByClassName('mdw-chip__item')) {
-    ChipItem.detach(el);
-  }
-}

package/components/chip/index.scss

@@ -1,2 +0,0 @@
-@forward './_spec.scss';
-@forward './_theme.scss';

package/components/chip/item.js

@@ -1,20 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#Listbox
-
-import * as Ripple from '../../core/ripple/index.js';
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.classList.add('mdw-ripple');
-  Ripple.attach(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  Ripple.detach(element);
-}

package/components/datatable/_spec.scss

@@ -1,225 +0,0 @@
-// https://material.io/guidelines/components/data-tables.html
-// https://material.io/guidelines/patterns/selection.html#selection-item-selection
-
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_platform.scss' as platform;
-@use '../../core/_type.scss' as type;
-
-$iconSize: 16px !default;
-
-:root {
-  --mdw-datatable__footer-controls-transform: scaleX(1);
-
-  &[dir="rtl"] {
-    --mdw-datatable__footer-controls-transform: scaleX(-1);
-  }
-}
-
-.mdw-datatable {
-  display: flex;
-  flex-direction: column;
-}
-
-.mdw-datatable table {
-  display: table;
-
-  border-collapse: collapse;
-
-  inline-size: 100%;
-}
-
-.mdw-datatable caption,
-.mdw-datatable__header {
-  @include type.addRules('h6');
-  min-block-size: 64px;
-}
-
-.mdw-datatable caption {
-  caption-side: top;
-
-  padding: 0 16px;
-
-  line-height: 64px;
-  text-align: start;
-}
-
-.mdw-datatable__header {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-
-  flex: none;
-}
-
-.mdw-datatable__header-text,
-.mdw-datatable__header-actions {
-  flex-grow: 1;
-}
-
-.mdw-datatable__header-text,
-.mdw-datatable__header-actions,
-.mdw-datatable__header-controls {
-  display: flex;
-}
-
-.mdw-datatable__header-text {
-  padding-inline: 16px 0;
-}
-
-.mdw-datatable tr {
-  block-size: 48px;
-  border-block-end-style: solid;
-  border-block-end-width: 1px;
-
-  outline: none;
-}
-
-.mdw-datatable thead > tr {
-  block-size: 48px;
-}
-
-.mdw-datatable td {
-  @include type.addRules('body-2');
-  // text-align: left;
-  // Expected line-height is 20dp. Support two lines within 48dp
-  padding-block: 4px 3px; // Remove 1px bottom border width
-
-  outline: none;
-
-}
-
-.mdw-datatable th {
-  @include type.addRules('caption');
-  white-space: nowrap;
-}
-
-.mdw-datatable th,
-.mdw-datatable td {
-  padding-inline: 16px;
-
-  text-align: center;
-
-  &[mdw-checkbox] {
-    line-height: 0;
-  }
-
-  &[mdw-text] {
-    text-align: start;
-  }
-
-  &[mdw-number] {
-    text-align: end;
-  }
-
-  &[mdw-primary-column] {
-    inline-size: 100%;
-    border-width: 1px;
-    border-inline-end-style: solid;
-  }
-}
-
-.mdw-datatable th[mdw-selector] {
-  inline-size: 24px;
-  padding-inline: 16px 0;
-
-  & + td,
-  & + th {
-    padding-inline: 12px 16px;
-  }
-}
-
-.mdw-datatable__sort-icon {
-  display: inline-block;
-  vertical-align: text-bottom;
-
-  max-inline-size: 0;
-
-  transition-duration: motion.$shapeChangeDuration;
-  transition-property: transform;
-  transition-timing-function: motion.$standardEasing;
-
-  transform: translateX(-$iconSize) rotate(180deg);
-  transform-origin: ($iconSize * 0.5) ($iconSize * 0.5);
-
-  color: transparent;
-
-  /* stylelint-disable-next-line selector-class-pattern */
-  &.material-icons {
-    font-size: $iconSize;
-  }
-}
-
-.mdw-datatable th[aria-sort] {
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  &:hover,
-  &[aria-sort="ascending"] {
-    .mdw-datatable__sort-icon {
-      transform: translateX(-$iconSize) rotate(180deg);
-
-      color: inherit;
-    }
-  }
-
-  &[aria-sort="descending"] {
-    .mdw-datatable__sort-icon {
-      transform: translateX(-$iconSize) rotate(0deg);
-
-      color: inherit;
-    }
-  }
-}
-
-.mdw-datatable__scroller {
-  overflow: auto;
-}
-
-.mdw-datatable__footer {
-  @include type.addRules('caption');
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: flex-end;
-
-  min-block-size: 56px;
-  flex: none;
-}
-
-.mdw-datatable__footer-options,
-.mdw-datatable__footer-details {
-  margin-inline: 2px 28px;
-}
-
-.mdw-datatable__header-controls,
-.mdw-datatable__footer-controls {
-  display: inline-flex;
-
-  margin-inline: 4px;
-
-  .mdw-button {
-    margin: 0 4px;
-  }
-}
-
-.mdw-datatable__footer-controls {
-  .mdw-button {
-    transform: var(--mdw-datatable__footer-controls-transform);
-  }
-}
-
-.mdw-datatable__footer-options {
-  display: flex;
-  align-items: center;
-
-  select.mdw-textfield__input {
-    min-inline-size: 64px; // 40 + 24;
-
-    text-align: end;
-  }
-}

package/components/datatable/_theme.scss

@@ -1,128 +0,0 @@
-.mdw-theme {
-  --mdw-datatable__text-rgb: var(--mdw-ink-default);
-  --mdw-datatable__text-opacity: var(--mdw-high-opacity);
-  --mdw-datatable__secondary-text-opacity: var(--mdw-medium-opacity);
-  --mdw-datatable__divider-opacity: var(--mdw-divider-opacity);
-  --mdw-datatable__hover-opacity: var(--mdw-datatable__hover-opacity-value);
-  --mdw-datatable__focus-opacity: var(--mdw-datatable__focus-opacity-value);
-  --mdw-datatable__selected-opacity: var(--mdw-datatable__selected-opacity-value);
-  --mdw-datatable__disabled-opacity: var(--mdw-inactive-opacity);
-}
-
-.mdw-theme[mdw-light] {
-  --mdw-datatable__hover-opacity-value: 0.04;
-  --mdw-datatable__focus-opacity-value: 0.12;
-  --mdw-datatable__selected-opacity-value: 0.08;
-
-  // Inherit color on light theme.
-  --mdw-datatable__header-fill-text: invalid;
-}
-
-.mdw-theme[mdw-dark] {
-  --mdw-datatable__hover-opacity-value: 0.08;
-  --mdw-datatable__focus-opacity-value: 0.24;
-  --mdw-datatable__selected-opacity-value: 0.16;
-  --mdw-datatable__header-fill-text: rgba(255, 255, 255, 1.00);
-}
-
-.mdw-datatable {
-  --mdw-datatable__cell-focus-opacity: 0;
-  --mdw-datatable__cell-hover-opacity: 0;
-  --mdw-datatable__cell-disabled-opacity: 0;
-  --mdw-datatable__row-background-color: var(--mdw-datatable__text-rgb);
-  --mdw-datatable__row-focus-opacity: var(--mdw-datatable__focus-opacity);
-  --mdw-datatable__row-hover-opacity: var(--mdw-datatable__hover-opacity);
-  --mdw-datatable__row-disabled-opacity: var(--mdw-datatable__disabled-opacity);
-
-  &[mdw-cell-focusable] {
-    --mdw-datatable__cell-focus-opacity: var(--mdw-datatable__focus-opacity);
-    --mdw-datatable__cell-hover-opacity: var(--mdw-datatable__hover-opacity);
-    --mdw-datatable__cell-disabled-opacity: var(--mdw-datatable__disabled-opacity);
-  }
-}
-
-.mdw-datatable tr,
-.mdw-datatable td,
-.mdw-datatable th {
-  border-color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__divider-opacity));
-}
-
-.mdw-datatable th:not([mdw-selector]),
-.mdw-datatable__footer {
-  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__secondary-text-opacity));
-}
-
-.mdw-datatable caption,
-.mdw-datatable__header-text {
-  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
-}
-
-.mdw-datatable__header-controls,
-.mdw-datatable__footer-controls {
-  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
-}
-
-.mdw-datatable td:not([mdw-checkbox]) {
-  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
-}
-
-.mdw-datatable th[aria-sort]:not([aria-sort="none"]) {
-  color: RGBA(var(--mdw-datatable__text-rgb), var(--mdw-datatable__text-opacity));
-}
-
-.mdw-datatable[mdw-has-selection] {
-  caption,
-  .mdw-datatable__header {
-    background-color: RGBA(var(--mdw-ink), var(--mdw-datatable__selected-opacity));
-  }
-
-  caption,
-  .mdw-datatable__header-text {
-    // Inherit color on light theme
-    color: var(--mdw-datatable__header-fill-text, inherit);
-  }
-}
-
-.mdw-datatable tbody tr {
-  background-color: RGBA(var(--mdw-datatable__row-background-color), calc(var(--mdw-datatable__row-hover-opacity) + var(--mdw-datatable__row-focus-opacity) + var(--mdw-datatable__selected-opacity)));
-
-  &[aria-selected="true"] {
-    --mdw-datatable__row-background-color: var(--mdw-ink);
-  }
-
-  &:not([aria-selected="true"]) {
-    --mdw-datatable__selected-opacity: 0;
-  }
-
-  &:not(:hover) {
-    --mdw-datatable__row-hover-opacity: 0;
-  }
-
-  &:not(:focus) {
-    --mdw-datatable__row-focus-opacity: 0;
-  }
-
-  &[aria-disabled="true"] {
-    --mdw-datatable__row-hover-opacity: 0;
-    --mdw-datatable__row-focus-opacity: 0;
-    opacity: var(--mdw-datatable__row-disabled-opacity);
-  }
-}
-
-.mdw-datatable tbody td {
-  background-color: RGBA(var(--mdw-datatable__text-rgb), calc(var(--mdw-datatable__cell-hover-opacity) + var(--mdw-datatable__cell-focus-opacity)));
-
-  &:not(:hover) {
-    --mdw-datatable__cell-hover-opacity: 0;
-  }
-
-  &:not(:focus) {
-    --mdw-datatable__cell-focus-opacity: 0;
-  }
-
-  &[aria-disabled="true"] {
-    --mdw-datatable__cell-hover-opacity: 0;
-    --mdw-datatable__cell-focus-opacity: 0;
-    opacity: var(--mdw-datatable__cell-disabled-opacity);
-  }
-}

package/components/datatable/cell.js

@@ -1,44 +0,0 @@
-import * as Attributes from '../../core/aria/attributes.js';
-import * as Keyboard from '../../core/aria/keyboard.js';
-import { dispatchDomEvent } from '../../core/dom.js';
-
-export const FOCUS_EVENT = 'mdw:datatablecell-focus';
-export const CHECKED_CHANGE_EVENT = 'mdw:datatablecell-checkedchange';
-export const SELECTED_CHANGE_EVENT = 'mdw:datatablecell-selectedchange';
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-export function onFocus(event) {
-  const gridCellElement = /** @type {HTMLElement} */ (event.currentTarget);
-  dispatchDomEvent(gridCellElement, FOCUS_EVENT);
-}
-
-/**
- * @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);
-}
-
-/**
- * @param {HTMLTableCellElement} element
- * @return {void}
- */
-export function attach(element) {
-  Keyboard.attach(element);
-  element.addEventListener('focus', onFocus);
-}
-
-/**
- * @param {HTMLTableCellElement} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeEventListener('focus', onFocus);
-  Keyboard.detach(element);
-}

package/components/datatable/columnheader.js

@@ -1,46 +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 Cell from './cell.js';
-
-export const SORT_EVENT = 'mdw:datatablecolumnheader-sort';
-
-/**
- * @param {FocusEvent} event
- * @return {void}
- */
-export function onClick(event) {
-  const columnHeaderElement = /** @type {HTMLElement} */ (event.currentTarget);
-  if (Attributes.isDisabled(columnHeaderElement)) {
-    return;
-  }
-  const ariaSort = columnHeaderElement.getAttribute('aria-sort');
-  if (!ariaSort) {
-    return;
-  }
-  const sort = (ariaSort === 'ascending' ? 'descending' : 'ascending');
-  const detail = { sort };
-  dispatchDomEvent(columnHeaderElement, SORT_EVENT, detail);
-}
-
-/**
- * @param {HTMLTableHeaderCellElement} element
- * @return {void}
- */
-export function attach(element) {
-  Keyboard.attach(element);
-  element.setAttribute('role', 'columnheader');
-  element.addEventListener('click', onClick);
-  Cell.attach(element);
-}
-
-/**
- * @param {HTMLTableHeaderCellElement} element
- * @return {void}
- */
-export function detach(element) {
-  element.removeEventListener('click', onClick);
-  Keyboard.detach(element);
-  Cell.detach(element);
-}