@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/mixins/KeyboardNavMixin.js

@@ -0,0 +1,244 @@
+import { attemptFocus, isRtl } from '../core/dom.js';
+
+const DEFAULT_ELEMENT_QUERY = [
+  'button',
+  '[href]',
+  'input',
+  'select',
+  'textarea',
+  '[tabindex]',
+].join(', ');
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function KeyboardNavMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      /** Keyboard navigation attribute */
+      kbdNav: { empty: 'true' },
+      _kbdFocusable: { empty: true },
+
+    })
+    .define({
+      /**
+       * Query used to find roving tab index children
+       */
+      kbdNavQuery() {
+        return DEFAULT_ELEMENT_QUERY;
+      },
+      /**
+       * Flag whether disabled elements participating in roving tab index
+       * should be focusable.
+       */
+      kbdNavFocusableWhenDisabled() { return true; },
+      /** @return {'horizontal'|'vertical'} */
+      ariaOrientationDefault() { return 'vertical'; },
+    })
+    .define({
+      /**
+       * List of roving tab index participating children
+       * @return {NodeListOf<HTMLElement>}
+       */
+      kbdNavChildren() {
+        return this.querySelectorAll(this.kbdNavQuery);
+      },
+    })
+    .methods({
+      _ariaOrientationIsVertical() {
+        return (this.ariaOrientation
+          ?? this.getAttribute('aria-orientation')
+          ?? this.ariaOrientationDefault) === 'vertical';
+      },
+      /**
+       * Focuses next element participating in roving tab index list
+       * @param {HTMLElement} [current]
+       * @param {boolean} [loop=true]
+       * @param {boolean} [reverse]
+       * @return {HTMLElement} focusedElement
+       */
+      focusNext(current = null, loop = true, reverse = false) {
+        let foundCurrent = false;
+        const array = reverse ? [...this.kbdNavChildren].reverse() : this.kbdNavChildren;
+        for (const candidate of array) {
+          if (!foundCurrent) {
+            foundCurrent = (current
+              ? (candidate === current)
+              : (candidate.getAttribute('tabindex') === '0'));
+            continue;
+          }
+          if (!candidate.hasAttribute('tabindex')) {
+            continue;
+          }
+          if (candidate.getAttribute('aria-hidden') === 'true') {
+            continue;
+          }
+          if (attemptFocus(candidate)) {
+            this.ariaActiveDescendantElement = candidate;
+            return candidate;
+          }
+        }
+
+        if (!loop) {
+          if (document.activeElement !== current && current instanceof HTMLElement) {
+            current.focus();
+          }
+          return current;
+        }
+        // Loop
+        for (const candidate of array) {
+          if (!candidate.hasAttribute('tabindex')) {
+            continue;
+          }
+          if (candidate.getAttribute('aria-hidden') === 'true') {
+            continue;
+          }
+          // Abort if we've looped all the way back to original element
+          // Abort if candidate received focus
+          if (attemptFocus(candidate)) {
+            return candidate;
+          }
+          if (candidate === current) {
+            return candidate;
+          }
+        }
+        return null;
+      },
+
+      /**
+       * Alias for focusNext(list, current, true).
+       * Selects previous element
+       * @param {HTMLElement} [current]
+       * @param {boolean} [loop=true]
+       * @return {HTMLElement}
+       */
+      focusPrevious(current, loop = true) {
+        return this.focusNext(current, loop, true);
+      },
+
+      /** @type {HTMLElement['focus']} */
+      focus(...options) {
+        // super.focus(...options);
+        if (attemptFocus(this.ariaActiveDescendantElement, ...options)) {
+          return;
+        }
+        for (const candidate of this.kbdNavChildren) {
+          if (candidate.getAttribute('tabindex') === '0' && candidate instanceof HTMLElement) {
+            this.ariaActiveDescendantElement = candidate;
+            candidate.focus(...options);
+            return;
+          }
+        }
+        this.focusNext();
+      },
+
+      /**
+       * Refreshes roving tab index attributes based on kbdNavChildren
+       */
+      refreshTabIndexes() {
+        if (this.kbdNav !== 'true') return;
+        /** @type {HTMLElement} */
+        let currentlyFocusedChild = null;
+        /** @type {HTMLElement} */
+        let currentTabIndexChild = null;
+        /** @type {HTMLElement} */
+        let firstFocusableChild = null;
+        for (const child of this.kbdNavChildren) {
+          if (!currentlyFocusedChild && document.activeElement === child) {
+            currentlyFocusedChild = child;
+          } else if (!currentTabIndexChild && child.getAttribute('tabindex') === '0') {
+            currentTabIndexChild = child;
+          } else {
+            if (!firstFocusableChild && child.getAttribute('aria-hidden') !== 'true'
+        && (this.kbdNavFocusableWhenDisabled || child.getAttribute('aria-disabled') !== 'true')) {
+              firstFocusableChild = child;
+            }
+            child.tabIndex = -1;
+          // child.setAttribute('tabindex', '-1');
+          }
+          // Bind
+          if (!child.hasAttribute('tabindex')) {
+            child.tabIndex = (document.activeElement === child) ? 0 : -1;
+          }
+        // this.rtiBindChild(child);
+        }
+        if (currentlyFocusedChild) {
+          currentlyFocusedChild.tabIndex = 0;
+        // currentlyFocusedChild.setAttribute('tabindex', '0');
+        } else if (currentTabIndexChild) {
+          if (currentlyFocusedChild) {
+            currentTabIndexChild.tabIndex = -1;
+          // currentTabIndexChild.setAttribute('tabindex', '-1');
+          }
+        } else if (firstFocusableChild) {
+          firstFocusableChild.tabIndex = 0;
+        // firstFocusableChild.setAttribute('tabindex', '0');
+        }
+      },
+    })
+    .events({
+      focusin(event) {
+        if (this.kbdNav !== 'true') return;
+        const currentItem = /** @type {HTMLElement} */ (event.target);
+        const participates = currentItem.matches(this.kbdNavQuery);
+        if (!participates) return;
+        this.ariaActiveDescendantElement = currentItem;
+        if (currentItem.getAttribute('tabindex') !== '0') {
+          currentItem.tabIndex = 0;
+        }
+        for (const item of this.kbdNavChildren) {
+          if (item !== currentItem && item.hasAttribute('tabindex')) {
+            item.tabIndex = -1;
+          // item.setAttribute('tabindex', '-1');
+          }
+        }
+      },
+      keydown(event) {
+        if (event.ctrlKey || event.altKey || event.shiftKey || event.metaKey) return;
+        if (this.kbdNav !== 'true') return;
+
+        switch (event.key) {
+          case 'ArrowUp':
+          case 'Up':
+            if (this._ariaOrientationIsVertical()) {
+              this.focusPrevious();
+            }
+            break;
+          case 'ArrowDown':
+          case 'Down':
+            if (this._ariaOrientationIsVertical()) {
+              this.focusNext();
+            }
+            break;
+          case 'ArrowLeft':
+          case 'Left':
+            if (this._ariaOrientationIsVertical()) return;
+            if (isRtl(this)) {
+              this.focusNext();
+            } else {
+              this.focusPrevious();
+            }
+            break;
+          case 'ArrowRight':
+          case 'Right':
+            if (this._ariaOrientationIsVertical()) return;
+            if (isRtl(this)) {
+              this.focusPrevious();
+            } else {
+              this.focusNext();
+            }
+            break;
+          default:
+            return;
+        }
+        event.stopPropagation(); // Avoid kbd within kbd (sub menus)
+        event.preventDefault();
+      },
+    })
+    .on({
+      connected() {
+        this.refreshTabIndexes();
+      },
+    });
+}

package/mixins/RTLObserverMixin.js

@@ -0,0 +1,35 @@
+const registeredElements = new Set();
+
+/** @type {MutationObserver} */
+let rtlObserver;
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function RTLObserverMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      pageIsRTL: {
+        type: 'boolean',
+        value: document.documentElement.dir === 'rtl',
+      },
+    })
+    .on({
+      connected() {
+        if (!rtlObserver) {
+          rtlObserver = new MutationObserver(() => {
+            const isRTL = document.documentElement.dir === 'rtl';
+            for (const el of registeredElements) {
+              el.pageIsRTL = isRTL;
+            }
+          });
+          rtlObserver.observe(document.documentElement, { attributeFilter: ['dir'] });
+        }
+        registeredElements.add(this);
+      },
+      disconnected() {
+        registeredElements.delete(this);
+      },
+    });
+}

package/mixins/ResizeObserverMixin.js

@@ -0,0 +1,38 @@
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    // @ts-ignore Skip cast
+    entry.target.onResizeObserved(entry);
+  }
+});
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function ResizeObserverMixin(Base) {
+  return Base
+    .extend()
+    .set({
+      observeResizeOnConnected: true,
+    })
+    .methods({
+      /** @param {ResizeObserverEntry} entry */
+      onResizeObserved(entry) {
+        // Virtual function
+      },
+      observeResize() {
+        resizeObserver.observe(this);
+      },
+      unobserveResize() {
+        resizeObserver.unobserve(this);
+      },
+    })
+    .on({
+      connected() {
+        if (!this.observeResizeOnConnected) return;
+        this.observeResize();
+      },
+      disconnected() {
+        this.unobserveResize();
+      },
+    });
+}

package/mixins/RippleMixin.css

@@ -0,0 +1,12 @@
+:host {
+  --mdw-state__pressed-opacity: 0;
+}
+
+#ripple-container {
+  position: absolute;
+  inset: 0;
+
+  overflow: hidden;
+
+  pointer-events: none;
+}

package/mixins/RippleMixin.js

@@ -0,0 +1,115 @@
+import Ripple from '../components/Ripple.js';
+
+/** @typedef {import('../components/Ripple.js').default} Ripple */
+
+import styles from './RippleMixin.css' assert { type: 'css' };
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default>} Base
+ */
+export default function RippleMixin(Base) {
+  return Base
+    .extend()
+    .css(styles)
+    .set({
+      /** @type {WeakRef<InstanceType<Ripple>>} */
+      _lastRippleWeakRef: null,
+      /** Flag set if ripple was added this event loop. */
+      _rippleAdded: false,
+    })
+    .define({
+      _lastRipple: {
+        get() {
+          const element = this._lastRippleWeakRef?.deref();
+          if (element?.isConnected) return element;
+          return null;
+        },
+        set(ripple) {
+          this._lastRippleWeakRef = ripple ? new WeakRef(ripple) : null;
+        },
+      },
+    })
+    .methods({
+      /**
+       * @param {number} [x]
+       * @param {number} [y]
+       * @param {boolean} [hold]
+       * @return {InstanceType<Ripple>}
+       */
+      addRipple(x, y, hold) {
+        const { rippleContainer } = this.refs;
+        if (!rippleContainer.isConnected) return null; // Detached?
+        const ripple = new Ripple();
+        this._rippleAdded = true;
+        queueMicrotask(() => {
+          // Reset before next event loop;
+          this._rippleAdded = false;
+        });
+        rippleContainer.appendChild(ripple);
+        if (hold) {
+          ripple.holdRipple = true;
+        }
+        ripple.updatePosition(x, y);
+        this._lastRipple = ripple;
+        return ripple;
+      },
+    })
+    .html/* html */`
+      <div id=ripple-container _if={!disabledState} aria-hidden=true></div>
+    `
+    .events({
+      '~pointerdown'(event) {
+        if (event.button) return;
+        if (this.disabledState) return;
+
+        const { rippleContainer } = this.refs;
+        if (!rippleContainer.isConnected) return; // Detached?
+        const rect = rippleContainer.getBoundingClientRect();
+        const x = event.pageX - rect.left - window.pageXOffset;
+        const y = event.pageY - rect.top - window.pageYOffset;
+        const lastRipple = this._lastRipple;
+        if (lastRipple) {
+          lastRipple.holdRipple = false;
+        }
+        console.debug('ripple from pointerdown');
+        this.addRipple(x, y);
+      },
+      '~click'(e) {
+        if (this._rippleAdded) {
+          // Avoid double event
+          return;
+        }
+        if (e.pointerType || e.detail) return;
+        if (this.disabledState) return;
+        if (this._pressed) return;
+        const lastRipple = this._lastRipple;
+        if (lastRipple) {
+          lastRipple.holdRipple = false;
+        }
+        console.debug('ripple from programmatic click');
+        this.addRipple();
+      },
+    })
+    .on({
+      _pressedChanged(oldValue, pressed) {
+        const ripple = this._lastRipple;
+        if (!pressed) {
+          if (ripple) {
+            ripple.holdRipple = false;
+          }
+          return;
+        }
+        if (!ripple || ripple.hadRippleReleased) {
+          if (this._lastInteraction !== 'key') {
+            // Sometimes pointer events may be out of order
+            return;
+          }
+          console.debug('ripple from press state');
+          this.addRipple(null, null, true);
+          return;
+        }
+        if (ripple.hadRippleHeld) return;
+        ripple.holdRipple = true;
+      },
+    });
+}

package/mixins/ScrollListenerMixin.js

@@ -0,0 +1,100 @@
+const IDLE_TIMEOUT_MS = 500;
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function ScrollListenerMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      scrollListenerPositionX: { type: 'float', empty: 0, reflect: false },
+      scrollListenerPositionY: { type: 'float', empty: 0, reflect: false },
+    })
+    .set({
+      /** @type {WeakRef<EventTarget>} */
+      _scroller: null,
+      /** @type {EventListener} */
+      _scrollerScrollListener: null,
+      /** @type {EventListener} */
+      _scrollerResizeListener: null,
+      _scrollDebounce: null,
+    })
+    .methods({
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onScrollIdle() {},
+
+      /** @param {Event} event */
+      onScrollerScroll(event) {
+        this.scrollListenerPositionY = (event.currentTarget === window)
+          ? window.scrollY
+          : /** @type {HTMLElement} */ (event.currentTarget).scrollTop;
+
+        this.scrollListenerPositionX = (event.currentTarget === window)
+          ? window.scrollX
+          : /** @type {HTMLElement} */ (event.currentTarget).scrollLeft;
+
+        clearTimeout(this._scrollDebounce);
+        this._scrollDebounce = setTimeout(() => this.onScrollIdle(), IDLE_TIMEOUT_MS);
+      },
+
+      /** @param {Event} event */
+      onScrollerResize(event) {},
+
+      /**
+       * @param {EventTarget} [scroller]
+       * @return {boolean}
+       */
+      startScrollListener(scroller) {
+        scroller ??= this.offsetParent;
+        if (!scroller) return false;
+
+        if (scroller === document.body) {
+          // console.log('scroller is body, attaching to window');
+          scroller = window;
+        }
+
+        this._scroller = new WeakRef(scroller);
+        this._scrollerScrollListener = this.onScrollerScroll.bind(this);
+        this._scrollerResizeListener = this.onScrollerResize.bind(this);
+        scroller.addEventListener('scroll', this._scrollerScrollListener);
+        scroller.addEventListener('resize', this._scrollerResizeListener);
+        this.scrollListenerPositionX = 0;
+        this.scrollListenerPositionY = 0;
+        return true;
+      },
+
+      getScrollingElementScrollHeight() {
+        const element = this.getScroller();
+        if (element === window) {
+          return document.documentElement.scrollHeight;
+        }
+        // @ts-expect-error Skip Element cast
+        return element.scrollHeight;
+      },
+
+      getScrollingElementClientHeight() {
+        const element = this.getScroller();
+        if (element === window) {
+          return window.innerHeight;
+        }
+        // @ts-expect-error Skip Element cast
+        return element.clientHeight;
+      },
+
+      getScroller() {
+        return this._scroller.deref();
+      },
+
+      /**
+       * @param {EventTarget} [scroller]
+       * @return {boolean}
+       */
+      clearScrollListener(scroller) {
+        scroller ??= this._scroller?.deref();
+        if (!scroller) return false;
+        if (!this._scrollerScrollListener) return false;
+        scroller.removeEventListener('scroll', this._scrollerScrollListener);
+        return true;
+      },
+    });
+}

package/mixins/ShapeMixin.css

@@ -0,0 +1,135 @@
+:host {
+  --mdw-shape__size: 0px;
+  --mdw-shape__bg: transparent;
+  z-index: 0;
+}
+
+/** Without CSS Mixins, we have to use external attributes to tag hosts **/
+.shape {
+  --mdw-surface__will-change: none;
+  --mdw-shape__size__top-start-size: var(--mdw-shape__size);
+  --mdw-shape__size__top-end-size: var(--mdw-shape__size);
+  --mdw-shape__size__bottom-start-size: var(--mdw-shape__size);
+  --mdw-shape__size__bottom-end-size: var(--mdw-shape__size);
+
+  /* (1/2n + 1/2)L + (-1/2n + 1/2)R  */
+  --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
+  --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
+  --mdw-shape__size__top-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__top-end-size)));
+  --mdw-shape__size__top-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__top-end-size)));
+  --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
+  --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));
+
+  --mdw-shape__rounded: 1;
+  --mdw-shape__mask-border-source: none;
+  --mdw-shape__mask: none;
+  --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
+
+  position: absolute;
+  inset: 0;
+
+  overflow: hidden;
+
+  z-index: -1;
+
+  background-color: var(--mdw-shape__bg, transparent);
+
+  border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
+  border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
+  border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
+  border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
+
+  transition-delay: 1ms;
+  transition-duration: 200ms;
+  transition-property: background-color, color;
+  will-change: background-color, color;
+
+}
+
+.shape[outlined] {
+  background-color: transparent;
+}
+
+.shape[color] {
+  background-color: rgb(var(--mdw-bg));
+  color: rgb(var(--mdw-ink));
+}
+
+.shape:is([color="none"], [color="transparent"]) {
+  background-color: transparent;
+}
+
+.shape[shape-style="none"] {
+  --mdw-shape__size: 0px;
+}
+
+.shape[shape-style="extra-small"] {
+  --mdw-shape__size: var(--mdw-shape__extra-small);
+}
+
+.shape[shape-style="small"] {
+  --mdw-shape__size: var(--mdw-shape__small);
+}
+
+.shape[shape-style="medium"] {
+  --mdw-shape__size: var(--mdw-shape__medium);
+}
+
+.shape[shape-style="large"] {
+  --mdw-shape__size: var(--mdw-shape__large);
+}
+
+.shape[shape-style="extra-large"] {
+  --mdw-shape__size: var(--mdw-shape__extra-large);
+}
+
+.shape[shape-style="full"] {
+  --mdw-shape__size: var(--mdw-shape__full);
+}
+
+.shape[shape-style="inherit"] {
+  --mdw-shape__size: inherit;
+}
+
+.shape[shape-top] {
+  --mdw-shape__size__bottom-start-size: 0px;
+  --mdw-shape__size__bottom-end-size: 0px;
+  --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
+
+}
+
+.shape[shape-bottom] {
+  --mdw-shape__size__top-start-size: 0px;
+  --mdw-shape__size__top-end-size: 0px;
+  --mdw-shape__mask: linear-gradient(black 50%, transparent 50%);
+}
+
+.shape[shape-start] {
+  --mdw-shape__size__top-end-size: 0px;
+  --mdw-shape__size__bottom-end-size: 0px;
+  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), black 50%, transparent 50%);
+}
+
+.shape[shape-end] {
+  --mdw-shape__size__top-start-size: 0px;
+  --mdw-shape__size__bottom-start-size: 0px;
+  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), transparent 50%, black 50%);
+}
+
+@supports(-webkit-mask-box-image: none) {
+  .shape {
+    --mdw-shape__rounded: inherit;
+    --mdw-shape__mask-border-source: inherit;
+
+    -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
+      8 fill /
+      var(--mdw-shape__size)
+      stretch;
+
+    -webkit-mask: var(--mdw-shape__mask);
+
+    transition-duration: 200ms, 200ms, 200ms;
+    transition-property: background-color, color, -webkit-mask-box-image-width;
+    will-change: background-color, color, -webkit-mask-box-image;
+  }
+}