@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/mixins/InputMixin.js

@@ -0,0 +1,335 @@
+import ControlMixin from './ControlMixin.js';
+
+/** @typedef {'align'|'useMap'} DeprecatedHTMLInputElementProperties */
+
+/** @typedef {import('../core/CustomElement.js').default} CustomElement */
+
+const IMPLICIT_SUBMISSION_BLOCKING_TYPES = new Set([
+  'text',
+  'search',
+  'url',
+  'tel',
+  'email',
+  'password',
+  'date',
+  'month',
+  'week',
+  'time',
+  'datetime-local',
+  'number',
+]);
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default>} Base
+ */
+export default function InputMixin(Base) {
+  class Input extends Base.mixin(ControlMixin) {
+    static inputTagName = 'input';
+
+    static FORM_IPC_EVENT = 'mdw-input-changed';
+
+    static GlobalListener = new EventTarget();
+
+    static clonedContentAttributes = [
+      ...super.clonedContentAttributes,
+      'aria-controls',
+      'accept', 'alt',
+      // 'autocomplete',
+      'checked', 'dirname',
+      // 'disabled',
+      // 'form',
+      'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formTarget',
+      'height',
+      // 'list',
+      'max', 'maxlength', 'min', 'minlength',
+      'multiple',
+      // 'name',
+      'pattern', 'placeholder',
+      // 'readonly',
+      // 'required',
+      'size', 'src', 'step',
+      // 'type',
+      'value',
+      'width',
+    // 'align', 'usemap',
+    ];
+
+    static valueChangingContentAttributes = [
+      ...super.valueChangingContentAttributes,
+      'checked', 'max', 'maxlength', 'min', 'maxlength',
+      'multiple', 'pattern', 'step', 'type', 'value',
+    ];
+
+    /** @type {InstanceType<typeof CustomElement>['propChangedCallback']} */
+    propChangedCallback(name, oldValue, newValue) {
+      super.propChangedCallback(name, oldValue, newValue);
+      switch (name) {
+        case 'indeterminate':
+          this.#input.indeterminate = newValue;
+          break;
+        case 'type':
+          this.#input.type = newValue;
+          break;
+        case '_formAction':
+          this.formAction = newValue;
+          break;
+        case '_height':
+          this.height = newValue;
+          break;
+        case '_width':
+          this.width = newValue;
+          break;
+        case 'checked':
+          if (!this.type) {
+            console.warn('unknown type?', this);
+          }
+          switch (this.type) {
+            case 'checkbox':
+            case 'radio':
+              if (newValue) {
+                this.elementInternals.setFormValue(this.value ?? 'on');
+                if (this.type === 'radio') {
+                  this._notifyRadioChange(this.name, this.value ?? 'on');
+                }
+              } else {
+                this.elementInternals.setFormValue(null);
+              }
+              break;
+            default:
+          }
+          // Reinvoke change event for components tracking 'checked';
+          // this.propChangedCallback('checked', oldValue, newValue);
+          break;
+        default:
+      }
+    }
+
+    /** @type {CustomElement['attributeChangedCallback']} */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+      switch (name) {
+        case 'aria-label':
+          if (newValue == null) {
+            this.#input.removeAttribute(name);
+            if (!this.hasAttribute('aria-labelledby')) {
+              this.#input.setAttribute('aria-labelledby', 'slot');
+            }
+          } else {
+            this.#input.setAttribute(name, newValue);
+            if (!this.hasAttribute('aria-labelledby')) {
+              this.#input.removeAttribute('aria-labelledby');
+            }
+          }
+          break;
+        default:
+      }
+    }
+
+    get #input() { return /** @type {HTMLInputElement} */ (this.refs.control); }
+
+    static {
+      this.on({
+        composed() {
+          const { label } = this.refs;
+          // Expose [selected] to .checked
+          label.setAttribute('selected', '{checked}');
+          label.setAttribute('invalid', '{_invalid}');
+          label.setAttribute('indeterminate', '{indeterminate}');
+        },
+      });
+      this.childEvents({
+        control: {
+          keydown(event) {
+            if (event.defaultPrevented) return;
+            if (event.key !== 'Enter') return;
+            if (/** @type {HTMLInputElement} */ (event.currentTarget).type === 'submit') return;
+            this.performImplicitSubmission(event);
+          },
+          change(event) {
+            if (this.disabledState) {
+              event.preventDefault();
+              event.stopImmediatePropagation();
+              return;
+            }
+            const input = /** @type {HTMLInputElement} */ (event.currentTarget);
+            this.checked = input.checked;
+          },
+        },
+      });
+    }
+
+    /**
+     * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission
+     * @param {Event} event
+     * @return {void}
+     */
+    performImplicitSubmission(event) {
+      const form = this.form;
+      if (!form) return;
+      /** @type {HTMLInputElement} */
+      let defaultButton;
+      const submissionBlockers = new Set();
+      for (const element of /** @type {HTMLCollectionOf<HTMLInputElement>} */ (form.elements)) {
+        if (element.type === 'submit' && !element.disabled && !element.matches(':disabled')) {
+          defaultButton ??= element;
+          break;
+        }
+
+        if (IMPLICIT_SUBMISSION_BLOCKING_TYPES.has(element.type)) {
+          submissionBlockers.add(element);
+        }
+      }
+      if (defaultButton) {
+        defaultButton.click();
+        return;
+      }
+      if (submissionBlockers.size > 1) return;
+      this.form.submit();
+    }
+
+    /** @param {CustomEvent<[string, string]>} event */
+    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) {
+      // console.log('Control.formIPCEvent: Continue match', this.name, this.value);
+      } else {
+        this.checked = false;
+      }
+    }
+
+    formResetCallback() {
+      this.#input.value = this.defaultValue;
+      this.#input.checked = this.defaultChecked;
+      this._value = this.#input.value;
+      this._checked = this.#input.checked;
+      this._checkedDirty = false;
+
+      super.formResetCallback();
+    }
+
+    get files() { return this.#input.files; }
+
+    get select() { return this.#input.select; }
+
+    get selectionDirection() { return this.#input.selectionDirection; }
+
+    set selectionDirection(value) { this.#input.selectionDirection = value; }
+
+    get selectionEnd() { return this.#input.selectionEnd; }
+
+    set selectionEnd(value) { this.#input.selectionEnd = value; }
+
+    get selectionStart() { return this.#input.selectionStart; }
+
+    set selectionStart(value) { this.#input.selectionStart = value; }
+
+    get setRangeText() { return this.#input.setRangeText; }
+
+    get setSelectionRange() { return this.#input.setSelectionRange; }
+
+    get showPicker() { return this.#input.showPicker; }
+
+    get stepDown() { return this.#input.stepDown; }
+
+    get stepUp() { return this.#input.stepUp; }
+
+    get valueAsDate() { return this.#input.valueAsDate; }
+
+    set valueAsDate(value) {
+      this.#input.valueAsDate = value;
+      this.value = this.#input.value;
+    }
+
+    get valueAsNumber() { return this.#input.valueAsNumber; }
+
+    set valueAsNumber(value) {
+      this.#input.valueAsNumber = value;
+      this.value = this.#input.value;
+    }
+
+    get height() { return this.#input.height; }
+
+    set height(value) {
+      this.#input.height = value;
+      this._height = value;
+    }
+
+    get formAction() { return this.#input.formAction; }
+
+    set formAction(value) {
+      this.#input.formAction = value;
+      this._formAction = value;
+    }
+
+    get width() { return this.#input.width; }
+
+    set width(value) {
+      this.#input.width = value;
+      this._width = value;
+    }
+  }
+
+  Input.prototype.ariaControls = Input.prop('ariaControls');
+
+  // https://html.spec.whatwg.org/multipage/input.html#htmlinputelement
+
+  const DOMString = { nullParser: String, value: '' };
+
+  Input.prototype.accept = Input.prop('accept', DOMString);
+  Input.prototype.alt = Input.prop('alt', DOMString);
+  Input.prototype.defaultChecked = Input.prop('defaultChecked', { attr: 'checked', type: 'boolean' });
+  Input.prototype._checkedDirty = Input.prop('_checkedDirty', 'boolean');
+  //  attribute boolean checked;
+  Input.prototype._checked = Input.prop('_checked', 'boolean');
+
+  // Exposed property based other watched properties
+  Input.prototype.checked = Input.prop('checked', {
+    reflect: false,
+    type: 'boolean',
+    get({ _checkedDirty, defaultChecked, _checked }) {
+      if (!_checkedDirty) return defaultChecked;
+      return _checked;
+    },
+    set(value) {
+      this._checked = value;
+      this._checkedDirty = true;
+    },
+    changedCallback(oldValue, newValue) {
+      this.shadowRoot.getElementById('control').checked = newValue;
+    },
+  });
+
+  Input.prototype.dirName = Input.prop('dirName', { attr: 'dirname', ...DOMString });
+  Input.prototype._formAction = Input.prop('_formAction', { attr: 'formaction' });
+  Input.prototype.formEnctype = Input.prop('formEnctype', { attr: 'formenctype', ...DOMString });
+  Input.prototype.formMethod = Input.prop('formMethod', { attr: 'formmethod', ...DOMString });
+  Input.prototype.formNoValidate = Input.prop('formnovalidate', { attr: 'formNoValidate', type: 'boolean' });
+  Input.prototype.formTarget = Input.prop('formTarget', { attr: 'formtarget', ...DOMString });
+  Input.prototype._height = Input.prop('_height', { attr: 'height', type: 'integer' });
+  Input.prototype.indeterminate = Input.prop('indeterminate', { type: 'boolean', reflect: false });
+  Input.prototype.max = Input.prop('max', DOMString);
+  Input.prototype.maxLength = Input.prop('maxLength', { attr: 'maxlength', type: 'integer', empty: -1 });
+  Input.prototype.min = Input.prop('min', DOMString);
+  Input.prototype.minLength = Input.prop('minLength', { attr: 'minlength', type: 'integer', empty: -1 });
+  Input.prototype.multiple = Input.prop('multiple', 'boolean');
+  Input.prototype.pattern = Input.prop('pattern', DOMString);
+  Input.prototype.placeholder = Input.prop('placeholder', DOMString);
+  Input.prototype.size = Input.prop('size', { type: 'integer', empty: 20 });
+  Input.prototype.src = Input.prop('src', DOMString);
+  Input.prototype.step = Input.prop('step', DOMString);
+  Input.prototype.type = Input.prop('type', DOMString);
+  Input.prototype.defaultValue = Input.prop('defaultValue', { attr: 'value', ...DOMString });
+  //  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
+  Input.prototype._width = Input.prop('_width', { attr: 'width', type: 'integer' });
+
+  return Input.tsClassFix();
+}

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;
+}