@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/MenuItem.js

@@ -0,0 +1,215 @@
+// https://www.w3.org/TR/wai-aria-practices/#menu
+
+import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
+
+import './Icon.js';
+import ListOption from './ListOption.js';
+import styles from './MenuItem.css' assert { type: 'css' };
+
+export default class MenuItem extends ListOption
+  .mixin(FormAssociatedMixin)
+  .extend()
+  .set({
+    _cascadeTimeout: null,
+    CASCADE_TIMEOUT: 500,
+    _cascading: false,
+  })
+  .define({
+    type() {
+      if (this.radio != null) return 'radio';
+      if (this.checkbox != null) return 'checkbox';
+      return null;
+    },
+  })
+  .observe({
+    /** ID of menu to cascade */
+    cascades: 'string',
+    /** Can be null */
+    _defaultValue: {
+      attr: 'value',
+      reflect: true,
+      nullParser: String,
+      empty: null,
+    },
+  })
+  .observe({
+    /** Never returns null */
+    defaultValue: {
+      reflect: false,
+      get() {
+        return this._defaultValue ?? '';
+      },
+      /** @param {string} value */
+      set(value) {
+        this._defaultValue = value;
+      },
+    },
+    value: {
+      reflect: false,
+      get() {
+        return this._defaultValue ?? 'on';
+      },
+      /**
+       * @param {string} value
+       * @return {void}
+       */
+      set(value) {
+        this._defaultValue = value;
+      },
+    },
+  })
+  .overrides({
+    formIPCEvent(event) {
+      if (event.target instanceof HTMLFormElement && event.target !== this.form) {
+        console.warn('Control.formIPCEvent: Abort from wrong form');
+        return;
+      }
+      if (this.type !== 'radio') {
+        console.warn('Control.formIPCEvent: Abort from not radio');
+        return;
+      }
+      const [name, value] = event.detail;
+      if (this.name !== name) return;
+      if (value === this.value) return;
+      if (this.value === '1') {
+        console.log('unchecking', this.name, this.value);
+        this.selected = false;
+      } else {
+        this.selected = false;
+      }
+    },
+  })
+  .expressions({
+    computeTrailingIcon({ trailingIcon, cascades }) {
+      if (!trailingIcon && cascades) return 'arrow_right';
+      return trailingIcon;
+    },
+  })
+  .methods({
+    unscheduleCascade() {
+      clearTimeout(this._cascadeTimeout);
+      this._cascadeTimeout = null;
+    },
+    scheduleCascade() {
+      if (this._cascadeTimeout) return;
+      this._cascadeTimeout = setTimeout(this.cascade.bind(this), this.CASCADE_TIMEOUT);
+    },
+    cascade() {
+      this.unscheduleCascade();
+      this._cascading = true;
+      document.getElementById(this.cascades)?.cascade?.(this);
+      this._cascading = false;
+    },
+  })
+  .css(styles)
+  .on({
+    _selectedChanged(oldValue, newValue) {
+      console.log('_selectedChanged', oldValue, newValue);
+      if (newValue) {
+        this.elementInternals.setFormValue(this.value);
+        if (this.type === 'radio') {
+          this._notifyRadioChange(this.name, this.value);
+        }
+      } else {
+        this.elementInternals.setFormValue(null);
+      }
+      if (this._selectedDirty) {
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    },
+  })
+  .events({
+    mouseenter() {
+      if (this.disabledState) return;
+      if (document.activeElement !== this) {
+        this.focus();
+      }
+      if (!this.cascades) return;
+      this.scheduleCascade();
+    },
+    mouseout: 'unscheduleCascade',
+    '~click'() {
+      if (this.disabledState) return;
+      if (this.type === 'radio') {
+        if (this.required) return;
+        this.selected = true;
+      } else if (this.type === 'checkbox') {
+        if (this.required) return;
+        this.selected = !this.selected;
+        return;
+      }
+
+      if (this.cascades) {
+        this.cascade();
+      }
+    },
+    keydown(event) {
+      if (this.disabledState) return;
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          event.stopPropagation();
+          event.preventDefault();
+          this.click();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          if (!this.cascades) break;
+          if (getComputedStyle(this).direction === 'rtl') {
+            if (event.key === 'ArrowRight') break;
+          } else if (event.key === 'ArrowLeft') break;
+          event.stopPropagation();
+          event.preventDefault();
+          this.cascade();
+          break;
+        default:
+      }
+    },
+    /**
+     * Closes submenu if focus leaves cascader to something else (sibling menu item)
+     * RelatedTarget is unreliable on Webkit
+     */
+    blur() {
+      if (!this.cascades) return;
+      if (this._cascading) return;
+      const submenuElement = document.getElementById(this.cascades);
+      if (submenuElement.matches(':focus-within')) return;
+      console.debug('closing submenu via cascader blur');
+      submenuElement.close(false);
+    },
+  })
+  .on({
+    composed({ inline, html }) {
+      const { checkbox: checkboxRef, radio: radioRef, anchor, trailing, trailingIcon } = this.refs;
+      checkboxRef.remove();
+      radioRef.remove();
+
+      anchor.setAttribute('role', inline(({ checkbox, radio }) => {
+        if (checkbox != null) return 'menuitemcheckbox';
+        if (radio != null) return 'menuitemradio';
+        return 'menuitem';
+      }));
+
+      // MenuItems use checked instead of selected as in list items.
+      anchor.setAttribute('ariaChecked', anchor.getAttribute('aria-selected'));
+
+      anchor.after(html`
+        <mdw-icon id=selection
+          _if=${({ checkbox, radio }) => checkbox ?? radio ?? false}
+          class=${({ checkbox, radio }) => checkbox || radio || 'leading'}
+          selected={selected}>check</mdw-icon>
+      `);
+
+      trailing.setAttribute('type-style', 'label-large');
+
+      trailingIcon.setAttribute('_if', '{computeTrailingIcon}');
+      trailingIcon.textContent = '{computeTrailingIcon}';
+    },
+  })
+  .autoRegister('mdw-menu-item')
+  .tsClassFix() {
+  formResetCallback() {
+    this._selected = this.defaultSelected;
+    super.formResetCallback();
+  }
+}

package/components/Nav.css

@@ -0,0 +1,17 @@
+/* https://m3.material.io/components/navigation-bar/specs */
+/* https://m3.material.io/components/navigation-drawer/specs */
+/* https://m3.material.io/components/navigation-rail/specs */
+
+:host {
+  --mdw-surface__tint: var(--mdw-surface__tint__2);
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+  --mdw-ink: var(--mdw-color__on-surface);
+  --mdw-bg: var(--mdw-color__surface);
+
+  z-index:2;
+
+  color: rgb(var(--mdw-ink));
+
+  font: var(--mdw-typescale__label-medium__font);
+  letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+}

package/components/Nav.js

@@ -0,0 +1,23 @@
+import styles from './Nav.css' assert { type: 'css' };
+import NavItem from './NavItem.js';
+import Surface from './Surface.js';
+
+export default Surface
+  .extend()
+  .css(styles)
+  .set({
+    elevated: true,
+    color: 'surface',
+  })
+  .events({
+    '~click'(event) {
+      // Abort if not child
+      if (event.target === this) return;
+      if (event.target instanceof NavItem === false) return;
+      for (const el of this.querySelectorAll('*')) {
+        if (el instanceof NavItem === false) continue;
+        el.active = (el === event.target);
+      }
+    },
+  })
+  .autoRegister('mdw-nav');

package/components/NavBar.css

@@ -0,0 +1,34 @@
+/* https://m3.material.io/components/navigation-bar/specs */
+
+:host {
+  position: sticky;
+  inset-block-end: 0;
+  order:1; /* Nav Bars are at top of tab order, but bottom of page */
+
+  display: grid;
+  align-content: flex-start;
+  align-items: flex-start;
+  gap: 8px;
+  grid-auto-columns: minmax(48px, 1fr);
+  grid-auto-flow: column;
+
+  overflow: hidden; /* Don't expand viewport when contents translates */
+
+  box-sizing: border-box;
+  min-block-size: 80px;
+  inline-size: 100%;
+
+  flex-shrink: 0;
+
+  transform: translateY(0);
+
+  box-shadow: none;
+
+  text-align: center;
+
+  will-change: transform;
+}
+
+#slot {
+  pointer-events: auto;
+}

package/components/NavBar.js

@@ -0,0 +1,88 @@
+import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
+import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
+
+import Nav from './Nav.js';
+import styles from './NavBar.css' assert { type: 'css' };
+
+export default Nav
+  .mixin(ScrollListenerMixin)
+  .observe({
+    hideOnScroll: 'boolean',
+    _translateY: { type: 'float', empty: 0 },
+    _transition: { empty: 'none' },
+  })
+  .observe({
+    _positioningStyle: {
+      ...ELEMENT_STYLER_TYPE,
+      get({ _translateY, _transition }) {
+        return {
+          styles: {
+            transform: `translateY(${_translateY}px)`,
+            transition: _transition,
+          },
+        };
+      },
+    },
+  })
+  .methods({
+    onScrollerResize() {
+      console.log('onScrollerResize');
+      // Chrome Bug: When window resizes bottom sticky needs to be recomputed
+      // Force style recalculation
+      this.style.setProperty('bottom', 'auto');
+      // eslint-disable-next-line no-unused-expressions
+      this.clientHeight;
+      this.style.removeProperty('bottom');
+      this.propChangedCallback('scrollListenerPositionY', this.scrollListenerPositionY, this.scrollListenerPositionY);
+    },
+    onScrollIdle() {
+      const max = this.scrollHeight;
+      const visibility = (max - this._translateY) / max;
+      if (visibility <= 0) return;
+      if (visibility >= 1) return;
+      if (visibility >= 0.5) {
+      // Reveal all
+        this._translateY = 0;
+        this._transition = 'transform 250ms ease-in';
+      } else {
+        this._translateY = max;
+        this._transition = 'transform 200ms ease-out';
+      }
+    },
+  })
+  .css(styles)
+  .on({
+    connected() {
+      if (this.hideOnScroll) {
+        if (this.offsetParent) {
+          this.startScrollListener(this.offsetParent ?? window);
+        } else {
+          const resizeObserver = new ResizeObserver(() => {
+            this.startScrollListener(this.offsetParent ?? window);
+            resizeObserver.disconnect();
+          });
+          resizeObserver.observe(this);
+        }
+      }
+    },
+    disconnected() {
+      this.clearScrollListener();
+    },
+    scrollListenerPositionYChanged(oldValue, newValue) {
+      if (!this.hideOnScroll) return;
+      const delta = newValue - oldValue;
+      const rate = 1;
+      const shift = rate * delta;
+
+      const bottom = this.getScrollingElementScrollHeight() - this.getScrollingElementClientHeight();
+      const breakpoint = bottom - this.scrollHeight;
+      let max = this.scrollHeight;
+      if (newValue >= breakpoint) {
+      // Scrolling to bottom always shows Nav Bar (ensures content isn't occluded)
+        max -= (newValue - breakpoint);
+      }
+      this._transition = 'none';
+      this._translateY = Math.max(0, Math.min(this._translateY + shift, max));
+    },
+  })
+  .autoRegister('mdw-nav-bar');

package/components/NavBarItem.css

@@ -0,0 +1,41 @@
+/* https://m3.material.io/components/navigation-bar/specs */
+/* https://m3.material.io/components/navigation-drawer/specs */
+/* https://m3.material.io/components/navigation-rail/specs */
+
+:host {
+  grid-auto-rows: minmax(20px, min-content);
+  grid-template-rows: [icon] minmax(32px, 1fr);
+  grid-template-columns: auto [icon] minmax(56px, 1fr) auto;
+
+  padding-block: 12px; /* Spec 16px bottom is based on 1em not 1lh */
+}
+
+#slot {
+  display: block;
+}
+
+:host(:empty) {
+  font-size: 0;
+  line-height: 0;
+}
+
+#slot[show-label] {
+  grid-column: 1 /4;
+
+  grid-row: 2;
+
+  opacity: 0;
+}
+
+#shape {
+  grid-column: 2;
+  grid-row: 1 / 1;
+}
+
+#slot[show-label="never"] {
+  block-size: 0;
+}
+
+#slot[show-label="active"][active] {
+  opacity: 1;
+}

package/components/NavBarItem.js

@@ -0,0 +1,7 @@
+import styles from './NavBarItem.css' assert { type: 'css' };
+import NavItem from './NavItem.js';
+
+export default NavItem
+  .extend()
+  .css(styles)
+  .autoRegister('mdw-nav-bar-item');

package/components/NavDrawer.css

@@ -0,0 +1,31 @@
+/* https://m3.material.io/components/navigation-drawer/specs */
+
+:host([open]) {
+  --mdw-surface__tint: var(--mdw-surface__tint__0);
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
+  --mdw-shape__size: var(--mdw-shape__large, 16px);
+  --mdw-shape__size__top-start-size: 0px;
+  --mdw-shape__size__bottom-start-size: 0px;
+
+  --mdw-nav-item__badge__position: static;
+  --mdw-nav-item__badge__transform: none;
+  --mdw-nav-item__badge__grid-area: badge;
+  --mdw-nav-item__label__padding-block: 18px;
+  --mdw-nav-item__label__padding-inline: 52px 0;
+  --mdw-nav-item__anchor__display: block;
+  --mdw-nav-item__indicator__grid-area: auto;
+
+  display: block;
+  grid-template-rows: min-content;
+  grid-template-columns: minmax(360px, min-content);
+
+  min-inline-size: 360px;
+  padding-inline: 12px;
+
+  box-shadow: none;
+
+}
+
+#slot {
+  gap: 0;
+}

package/components/NavDrawer.js

@@ -0,0 +1,13 @@
+import styles from './NavDrawer.css' assert { type: 'css' };
+import NavRail from './NavRail.js';
+
+export default NavRail
+  .extend()
+  .css(styles)
+  .observe({
+    shapeEnd: {
+      type: 'boolean',
+      empty: true,
+    },
+  })
+  .autoRegister('mdw-nav-drawer');

package/components/NavDrawerItem.css

@@ -0,0 +1,42 @@
+/* https://m3.material.io/components/navigation-bar/specs */
+/* https://m3.material.io/components/navigation-drawer/specs */
+/* https://m3.material.io/components/navigation-rail/specs */
+
+:host {
+  align-self: stretch;
+
+  display: grid;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  grid-template:
+    "icon label badge" minmax(56px, min-content)
+    / 24px 1fr minmax(0, min-content);
+  justify-items: flex-start;
+
+  padding-inline: 16px 24px;
+}
+
+#icon {
+  grid-area: icon;
+}
+
+#slot {
+  display: block;
+
+  text-align: start;
+}
+
+:host([active]) {
+  color: rgb(var(--mdw-ink));
+}
+
+#shape {
+  max-inline-size: none;
+  grid-column: auto;
+  grid-row: 1 / 2;
+}
+
+#badge-text {
+  z-index: 1;
+}

package/components/NavDrawerItem.js

@@ -0,0 +1,12 @@
+import styles from './NavDrawerItem.css' assert { type: 'css' };
+import NavItem from './NavItem.js';
+
+export default NavItem
+  .extend()
+  .css(styles)
+  .on({
+    composed({ html }) {
+      this.refs.badge.replaceWith(html`<span id="badge-text">{badge}</span>`);
+    },
+  })
+  .autoRegister('mdw-nav-drawer-item');