@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/Slider.js

@@ -0,0 +1,206 @@
+import CustomElement from '../core/CustomElement.js';
+import InputMixin from '../mixins/InputMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Slider.css' assert { type: 'css' };
+
+/**
+ * @param {string} value
+ * @param {number} onNaN
+ * @return {number}
+ */
+function parseFloat(value, onNaN = 0) {
+  const number = Number.parseFloat(value);
+  if (Number.isNaN(number)) return onNaN;
+  return number;
+}
+
+/**
+ * @param {string} value
+ * @param {string} min
+ * @param {string} max
+ * @return {?number}
+ */
+function valueAsFraction(value, min, max) {
+  const nValue = parseFloat(value);
+  const nMin = parseFloat(min);
+  const nMax = parseFloat(max, 100);
+
+  return (nValue - nMin) / (nMax - nMin);
+}
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(StateMixin)
+  .mixin(InputMixin)
+  .extend()
+  .set({
+    stateLayer: true,
+    type: 'range',
+  })
+  .observe({
+    ticks: 'string',
+    showLabel: { type: 'boolean', reflect: false },
+    _previewValue: { nullable: false },
+    _roundedValue: 'float',
+    _isHoveringThumb: 'boolean',
+  })
+  .methods({
+    /**
+     * @param {(MouseEvent|TouchEvent) & {currentTarget:HTMLInputElement}} event
+     * @return {void}
+     */
+    onControlMouseOrTouch(event) {
+      const input = event.currentTarget;
+      if (input.disabled) return;
+
+      if (this.disabledState) return;
+
+      if (event.type === 'touchend') {
+        this._isHoveringThumb = false;
+        return;
+      }
+
+      let offsetX;
+      let clientX;
+      let pageX;
+      let isActive;
+
+      const isTouch = 'touches' in event;
+      if (isTouch) {
+        if (event.touches.length) {
+          const [touch] = event.touches;
+          isActive = true;
+          // @ts-ignore Might exist
+          ({ offsetX, clientX, pageX } = touch);
+        }
+      } else {
+        // Ignore mouse drag-over
+        // Firefox doesn't report `:active`
+        // eslint-disable-next-line no-bitwise
+        isActive = (event.buttons & 1) === 1
+       && (event.type === 'mousedown' || input.matches(':active'));
+        ({ offsetX, clientX, pageX } = event);
+      }
+
+      if (offsetX == null) {
+        clientX ??= pageX - window.scrollX; // Safari
+        offsetX = clientX - input.getBoundingClientRect().left;
+      }
+
+      const { clientWidth } = input;
+      let position = (offsetX / clientWidth);
+      if (position > 1) {
+        position = 1;
+      } else if (position < 0) {
+        position = 0;
+      }
+
+      if (isActive) {
+        this._isHoveringThumb = true;
+        const { min, max, step } = this;
+
+        const nMin = parseFloat(min);
+        const nMax = parseFloat(max, 100);
+        const nStep = parseFloat(step, 1);
+
+        const currentValue = position * (nMax - nMin) + nMin;
+        let roundedValue = Math.round(currentValue / nStep) * nStep;
+
+        if (nStep < 1) {
+          // Floating Point Numbers need to be rounded off based on step
+          // eg: 3.4 / 10 with step of 0.1 yields 0.33999999999999997
+          const log10 = Math.floor(Math.log10(nStep)); // e value in scientific notation
+          const scale = 10 ** (-1 * log10); // multiplier to scale up to integer
+          roundedValue = Math.round(roundedValue * scale) / scale;
+        }
+
+        this._roundedValue = roundedValue;
+        this._previewValue = roundedValue.toString(10);
+        return;
+      }
+
+      if (isTouch) return;
+
+      const fractionalValue = valueAsFraction(this.value, this.min, this.max);
+      const thumbOffset = fractionalValue * clientWidth;
+      const thumbMin = thumbOffset - 20;
+      const thumbMax = thumbOffset + 20;
+      this._isHoveringThumb = offsetX >= thumbMin && offsetX <= thumbMax;
+    },
+
+    /** @param {Event} event */
+    onLeaveEvent({ currentTarget }) {
+      if (document.activeElement === currentTarget) return;
+      this._isHoveringThumb = false;
+    },
+
+    /**
+     * @param {(MouseEvent|TouchEvent) & {currentTarget:HTMLInputElement}} event
+     * @return {void}
+     */
+    onControlFinish(event) {
+      const input = event.currentTarget;
+      if (input.disabled) return;
+      event.preventDefault();
+      input.valueAsNumber = this._roundedValue;
+      if (this._value !== input.value) {
+        this._value = input.value;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    },
+  })
+  .events({
+    blur: 'onLeaveEvent',
+    mouseout: 'onLeaveEvent',
+  })
+  .childEvents({
+    control: {
+      '~mousedown': 'onControlMouseOrTouch',
+      '~mousemove': 'onControlMouseOrTouch',
+      '~mouseout': 'onControlMouseOrTouch',
+      '~touchmove': 'onControlMouseOrTouch',
+      '~touchstart': 'onControlMouseOrTouch',
+      // @ts-expect-error Old spec
+      '~touchleave': 'onControlMouseOrTouch',
+      '~touchcancel': 'onControlMouseOrTouch',
+      '~touchend': 'onControlMouseOrTouch',
+      touchend: 'onControlFinish',
+      click: 'onControlFinish',
+    },
+  })
+  .css(styles)
+  .expressions({
+    computeTrackStyle({ ticks, _previewValue, min, max }) {
+      return [
+        ticks ? `--ticks:${ticks}` : null,
+        `--value:${valueAsFraction(_previewValue, min, max)}`,
+      ].filter(Boolean).join(';') || null;
+    },
+  })
+  .on({
+    composed({ template, html }) {
+      const { state, label, control } = this.refs;
+      template.append(html`
+        <div id=track style={computeTrackStyle} aria-hidden=true disabled={disabledState}>
+          <div _if={ticks} id=ticks></div>
+          <div id=track-active></div>
+          <div id=thumb-anchor>
+            <div id=thumb>
+              ${state}
+            </div>
+            <div id=thumb-label
+              hidden=${({ _isHoveringThumb, focusedState }) => (!_isHoveringThumb && !focusedState)} 
+              text={_previewValue}></div>
+          </div>
+        </div>
+      `);
+      label.removeAttribute('aria-labelledby');
+      control.setAttribute('type', 'range');
+    },
+    valueChanged(oldValue, newValue) {
+      this._previewValue = newValue;
+    },
+  })
+  .autoRegister('mdw-slider');

package/components/Snackbar.css

@@ -0,0 +1,80 @@
+/* https://m3.material.io/components/snackbar/specs */
+
+:host {
+  --mdw-shape__size: var(--mdw-shape__small);
+  --mdw-surface__shadow: var(--mdw-surface__shadow__3);
+  --mdw-surface__tint: var(--mdw-surface__tint__3);
+  --mdw-shape__bg: rgb(var(--mdw-color__inverse-surface));
+  --mdw-ink: var(--mdw-color__inverse-on-surface);
+
+  --mdw-type__line-height: var(--mdw-typescale__body-medium__line-height);
+  display: flex;
+  align-items: center;
+
+  padding-inline: 16px;
+
+  opacity: 0;
+  transform: translateY(25%) scaleY(0.25);
+  transform-origin: bottom center;
+  visibility: hidden; /* Remove from tab order */
+  z-index: 24;
+
+  font: var(--mdw-typescale__body-medium__font);
+  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+
+  transition: transform 200ms, opacity 200ms, visibility 200ms;
+}
+
+:host([action]) {
+  gap: 8px;
+
+  padding-inline-end: 8px;
+}
+
+:host([close-button]) {
+  gap: 4px;
+
+  padding-inline-end: 4px;
+}
+
+:host([open]) {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
+}
+
+#content {
+  display: flex;
+  align-items: center;
+
+  flex: 1;
+  padding-block: max(2px, calc(14px + (var(--mdw-density) * 2px)));
+}
+
+#slot {
+  display: block;
+  overflow-x: hidden;
+  overflow-y: hidden;
+
+  max-block-size: calc(var(--mdw-type__line-height) * 2);
+
+  text-align: start;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: normal;
+  word-break: break-word;
+}
+
+@supports(width: 1lh) {
+  #slot {
+    max-block-size: 2lh;
+  }
+}
+
+@supports(-webkit-line-clamp:1) {
+  #slot {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}

package/components/Snackbar.js

@@ -0,0 +1,75 @@
+// https://w3c.github.io/aria/#status
+
+import { EVENT_HANDLER_TYPE } from '../core/customTypes.js';
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import DensityMixin from '../mixins/DensityMixin.js';
+
+import './Button.js';
+import './IconButton.js';
+
+import styles from './Snackbar.css' assert { type: 'css' };
+import Surface from './Surface.js';
+
+export default Surface
+  .mixin(DensityMixin)
+  .mixin(AriaReflectorMixin)
+  .extend()
+  .set({
+    _ariaRole: 'status',
+    elevated: true,
+  })
+  .observe({
+    open: 'boolean',
+    persistent: 'boolean',
+    action: 'string',
+    actionInk: { empty: 'inverse-primary' },
+    actionTypeStyle: { empty: 'label-large' },
+    closeButton: 'boolean',
+    closeIcon: { empty: 'close' },
+    closeInk: { empty: 'inherit' },
+    onaction: EVENT_HANDLER_TYPE,
+  })
+  .methods({
+    async close() {
+      if (!this.dispatchEvent(new Event('close', { cancelable: true }))) return;
+      if (!this.open) return;
+      this.open = false;
+      if (window.getComputedStyle(this).transitionDuration === '0s') return;
+      await new Promise((resolve) => {
+        this.addEventListener('transitionend', resolve, { once: true });
+      });
+    },
+    show() {
+      this.open = true;
+    },
+    /** @param {string} text */
+    update(text) {
+      this.textContent = text;
+    },
+  })
+  .html/* html */`
+    <div id=content></div>
+    <mdw-button _if={action} id=action class=button ink={actionInk} type-style={actionTypeStyle}>{action}</mdw-button>
+    <mdw-icon-button _if={closeButton} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-button>
+  `
+  .on({
+    composed() {
+      const { content, slot } = this.refs;
+      content.append(slot);
+    },
+  })
+  .childEvents({
+    action: {
+      '~click'() {
+        if (!this.dispatchEvent(new Event('action', { cancelable: true }))) return;
+        this.close();
+      },
+    },
+    close: {
+      '~click'() {
+        this.close();
+      },
+    },
+  })
+  .css(styles)
+  .autoRegister('mdw-snackbar');

package/components/Surface.css

@@ -0,0 +1,10 @@
+:host {
+  --mdw-shape__bg: rgb(var(--mdw-color__surface));
+  --mdw-ink: var(--mdw-color__on-surface);
+  position: relative;
+
+  color: rgb(var(--mdw-ink));
+
+  font: var(--mdw-type__font);
+  letter-spacing: var(--mdw-type__letter-spacing);
+}

package/components/Surface.js

@@ -0,0 +1,23 @@
+import CustomElement from '../core/CustomElement.js';
+import FlexableMixin from '../mixins/FlexableMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import SurfaceMixin from '../mixins/SurfaceMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Surface.css' assert {type:'css'};
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(FlexableMixin)
+  .mixin(SurfaceMixin)
+  .mixin(ShapeMixin)
+  .css(styles)
+  .on({
+    composed() {
+      const { surface, shape, surfaceTint } = this.refs;
+      shape.append(surfaceTint);
+      surface.append(shape);
+    },
+  })
+  .html/* html */`<slot id=slot></slot>`
+  .autoRegister('mdw-surface');

package/components/Switch.css

@@ -0,0 +1,63 @@
+/* https://m3.material.io/components/switch/specs */
+
+:host {
+  --mdw-ink: var(--mdw-color__on-primary);
+  --mdw-bg: var(--mdw-color__primary);
+  position: relative;
+
+  display: inline-flex;
+  align-items: center;
+
+  gap: 12px;
+
+}
+
+#touch-target {
+  z-index: 0;
+}
+
+#label {
+  display: contents;
+
+  cursor: pointer;
+
+  /* border-radius: 50%; */
+}
+
+/** Switch **/
+
+#switch {
+  --mdw-bg: inherit;
+  --mdw-ink: inherit;
+  flex:1;
+
+  pointer-events: none;
+}
+
+/** State **/
+
+#state {
+  position: absolute;
+  inset: 50%;
+
+  block-size: 100%;
+  min-block-size: 40px;
+  inline-size: 100%;
+  min-inline-size: 40px;
+
+  pointer-events: none;
+
+  transform: translateX(-50%) translateY(-50%);
+
+  border-radius: 50%;
+}
+
+/** Disabled **/
+
+#label[disabled] {
+  --mdw-ink: var(--mdw-color__on-surface); /* selected icon */
+  --mdw-bg: var(--mdw-color__surface);
+  cursor: not-allowed;
+
+  opacity: 0.38;
+}

package/components/Switch.js

@@ -0,0 +1,127 @@
+import './SwitchIcon.js';
+import CustomElement from '../core/CustomElement.js';
+import InputMixin from '../mixins/InputMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
+
+import styles from './Switch.css' assert { type: 'css' };
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(InputMixin) // Label as root
+  .mixin(StateMixin)
+  .mixin(TouchTargetMixin)
+  // Switches have their own pressed animation (No ripple)
+  .extend()
+  .set({
+    type: 'checkbox',
+    stateLayer: true,
+  })
+  .observe({
+    icon: 'string',
+    selectedIcon: 'string',
+    unselectedIcon: 'string',
+    src: 'string',
+    selectedSrc: 'string',
+    unselectedSrc: 'string',
+  })
+  .css(styles)
+
+  .on({
+    composed({ html }) {
+      const { state, label, control, touchTarget } = this.refs;
+      label.append(html`
+        ${touchTarget}
+        <mdw-switch-icon id=switch
+          color={color} ink={ink} selected={checked} hovered={hoveredState} focused={focusedState} pressed={pressedState} disabled={disabledState}
+          icon={icon}
+          selected-icon={selectedIcon}
+          unselected-icon={unselectedIcon}
+          src={src}
+          selected-src={selectedSrc}
+          unselected-src={unselectedSrc}
+          >
+          ${state}
+          ${control}
+        </mdw-switch-icon>
+        <slot id=slot></slot>
+      `);
+      control.setAttribute('type', 'checkbox');
+      control.setAttribute('role', 'switch');
+    },
+  })
+  .methods({
+    /**
+     * @param {(MouseEvent|TouchEvent) & {currentTarget:HTMLInputElement}} event
+     * @return {void}
+     */
+    onControlMouseOrTouch(event) {
+      const input = event.currentTarget;
+      if (input.disabled) return;
+
+      if (this.disabledState) return;
+
+      if (event.type === 'touchend') {
+        // this._isHoveringThumb = false;
+        return;
+      }
+
+      let offsetX;
+      let clientX;
+      let pageX;
+      let isActive;
+
+      const isTouch = 'touches' in event;
+      if (isTouch) {
+        if (event.touches.length) {
+          const [touch] = event.touches;
+          isActive = true;
+          // @ts-ignore Might exist
+          ({ offsetX, clientX, pageX } = touch);
+        }
+      } else {
+        // Ignore mouse drag-over
+        // Firefox doesn't report `:active`
+        // eslint-disable-next-line no-bitwise
+        isActive = (event.buttons & 1) === 1
+       && (event.type === 'mousedown' || input.matches(':active'));
+        ({ offsetX, clientX, pageX } = event);
+      }
+
+      if (!isActive) return;
+
+      if (offsetX == null) {
+        clientX ??= pageX - window.scrollX; // Safari
+        offsetX = clientX - input.getBoundingClientRect().left;
+      }
+
+      const { clientWidth } = input;
+      let position = (offsetX / clientWidth);
+      if (position > 1) {
+        position = 1;
+      } else if (position < 0) {
+        position = 0;
+      }
+
+      // this._isHoveringThumb = true;
+
+      let currentValue = this.refs.switch.dragValue;
+      if (currentValue == null) {
+        currentValue = this.checked ? 1 : 0;
+      }
+      const pixels = offsetX - (clientWidth / 2);
+      const currentPixels = this.refs.switch.clientWidth - (this.refs.switch.clientHeight);
+      // console.log(pixels, currentPixels, currentPixels * currentValue, pixels / currentPixels);
+      const newRatio = pixels / currentPixels;
+      const newValue = Math.max(Math.min(currentValue + newRatio, 1), 0);
+      // this.refs.switch.dragValue = newValue;
+      // event.preventDefault();
+    },
+  })
+  .childEvents({
+    control: {
+      '~pointermove': 'onControlMouseOrTouch',
+    },
+  })
+  .autoRegister('mdw-switch');