@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/mixins/FormAssociatedMixin.js

@@ -1,5 +1,7 @@
 /* https://html.spec.whatwg.org/multipage/form-control-infrastructure.html */
 
+import { CHROME_VERSION } from '../core/dom.js';
+
 /** @typedef {HTMLElement & {value:string}} HTMLControlElement */
 
 /** @typedef {import('../core/CustomElement.js').default} CustomElement */
@@ -13,7 +15,6 @@ const DOMString = { nullParser: String, value: '' };
  */
 export default function FormAssociatedMixin(Base) {
   return Base
-    .extend()
     .setStatic({
       formAssociated: true,
     })
@@ -22,12 +23,15 @@ export default function FormAssociatedMixin(Base) {
       _ipcListener: null,
       /** @type {EventTarget} */
       _ipcTarget: null,
+      /** @type {FileList} */
+      _files: null,
     })
     .observe({
       ariaControls: 'string',
       autocomplete: DOMString,
       name: DOMString,
       readOnly: { attr: 'readonly', type: 'boolean' },
+      formNoValidate: { attr: 'formnovalidate', type: 'boolean' },
       defaultChecked: { attr: 'checked', type: 'boolean' },
       _checkedDirty: 'boolean',
       /* "Checkedness" */
@@ -38,6 +42,7 @@ export default function FormAssociatedMixin(Base) {
       _defaultValue: { reflect: true, attr: 'value' },
       _value: { empty: '' },
       _valueDirty: 'boolean',
+      _userInteracted: 'boolean',
       _invalid: 'boolean',
       _badInput: 'boolean',
       _validationMessage: 'string',
@@ -45,7 +50,7 @@ export default function FormAssociatedMixin(Base) {
       _formReset: 'boolean',
     })
     .observe({
-      erroredState({ _invalid }) { return _invalid; },
+      erroredState({ _invalid, _userInteracted }) { return _userInteracted && _invalid; },
       defaultValue: {
         reflect: false,
         get({ _defaultValue }) {
@@ -92,14 +97,13 @@ export default function FormAssociatedMixin(Base) {
         reflect: false,
         get({ _valueBehavior, _defaultValue, _value }) {
           switch (_valueBehavior) {
+            case 'filename':
             default:
               return _value;
             case 'default':
               return _defaultValue ?? '';
             case 'default/on':
               return _defaultValue ?? 'on';
-            case 'filename':
-              throw new Error('Not supported!');
           }
         },
         /** @param {string} v */
@@ -109,6 +113,14 @@ export default function FormAssociatedMixin(Base) {
               this._valueDirty = true;
               this._onSetValue(v);
               break;
+            case 'filename':
+              if (v == null || v === '') {
+                this._files = null;
+                // Presume overriding class will interpet null as empty
+              } else {
+                throw new DOMException('InvalidStateError');
+              }
+              break;
             default:
               this.defaultValue = v;
           }
@@ -121,8 +133,9 @@ export default function FormAssociatedMixin(Base) {
       checked: {
         reflect: false,
         type: 'boolean',
-        get({ _checked }) {
-          return _checked;
+        get({ _checkedDirty, defaultChecked, _checked }) {
+          if (_checkedDirty) return _checked;
+          return defaultChecked;
         },
         /** @param {boolean} checked */
         set(checked) {
@@ -135,7 +148,11 @@ export default function FormAssociatedMixin(Base) {
       form() { return this.elementInternals.form; },
       validity() { return this.elementInternals.validity; },
       validationMessage() { return this.elementInternals.validationMessage; },
-      willValidate() { return this.elementInternals.willValidate; },
+      willValidate() {
+        if (this.type === 'submit') return !this.formNoValidate;
+        if (this.type === 'button' || this.type === 'reset') return false;
+        return this.elementInternals.willValidate;
+      },
       labels() { return this.elementInternals.labels; },
     })
     .observe({
@@ -195,8 +212,7 @@ export default function FormAssociatedMixin(Base) {
        */
       formAssociatedCallback(form) {
         this.refreshFormAssociation();
-        console.debug('FormAssociatedMixin: formAssociatedCallback', this);
-        // Set value on association (not done by default?)
+        this.checkValidity();
       },
 
       /**
@@ -231,6 +247,7 @@ export default function FormAssociatedMixin(Base) {
         this._formReset = true; // Fires Change Event
         this._valueDirty = false;
         this.checkValidity();
+        this._userInteracted = false; // Reset error states
         this._formReset = false;
       },
 
@@ -239,9 +256,8 @@ export default function FormAssociatedMixin(Base) {
        * @param {'autocomplete'|'restore'} mode
        */
       formStateRestoreCallback(state, mode) {
-        if (navigator.userAgent.includes('Edg/')) {
-          console.warn('Chromium Bug: 1429585 - Ignoring formStateRestoreCallback on Edge', { state, mode });
-          // formStateRestoreCallback is broken on Edge
+        if (CHROME_VERSION < 115) {
+          // formStateRestoreCallback is broken on Chromium
           // https://bugs.chromium.org/p/chromium/issues/detail?id=1429585
           return;
         }
@@ -275,21 +291,52 @@ export default function FormAssociatedMixin(Base) {
             // Fallthrough
           case 'checkbox':
             if (this.checked) {
-              console.log('FormAssociatedMixin: setFormValue', this.name, `(${this.value}, 'checked')`, this);
+              // console.debug('FormAssociatedMixin: setFormValue', this.name, `(${this.value}, 'checked')`, this);
               this.elementInternals.setFormValue(this.value, 'checked');
             } else {
-              console.log('FormAssociatedMixin: setFormValue', this.name, "(null, 'unchecked')", this);
+              // console.debug('FormAssociatedMixin: setFormValue', this.name, "(null, 'unchecked')", this);
               this.elementInternals.setFormValue(null, 'unchecked');
             }
             break;
+          case 'button':
+          case 'reset':
+            this.elementInternals.setFormValue(null);
+            break;
+          case 'file': {
+            const { elementInternals, _files, name } = this;
+            if (!_files || _files.length) {
+              elementInternals.setFormValue(null);
+            } else {
+              const fd = new FormData();
+              for (const entry of _files) {
+                fd.append(name, entry);
+              }
+              elementInternals.setFormValue(fd);
+            }
+            break;
+          }
+          case 'select-multiple': {
+            const formData = new FormData();
+            if (this.name) {
+              for (const option of this.selectedOptions) {
+                formData.append(this.name, option.value);
+              }
+            }
+            this.elementInternals.setFormValue(formData);
+            break;
+          }
+          // case 'select-one':
           default:
-            console.log('FormAssociatedMixin: updating form value', this.name, this.value);
+            // console.debug('FormAssociatedMixin: setFormValue', this.name, this.value, this);
             this.elementInternals.setFormValue(this.value);
         }
       },
     })
     .events({
-      blur() { this.checkValidity(); },
+      blur() {
+        this._userInteracted = true;
+        this.checkValidity();
+      },
     })
     .on({
       connected() {
@@ -302,5 +349,13 @@ export default function FormAssociatedMixin(Base) {
       valueChanged() {
         this._updateFormAssociatedValue();
       },
+      _valueBehaviorChanged(previous, current) {
+        if (previous !== 'filename' && current === 'filename') {
+          this.value = '';
+        }
+      },
+      typeChanged() {
+        this._updateFormAssociatedValue();
+      },
     });
 }

package/mixins/HyperlinkMixin.js

@@ -0,0 +1,66 @@
+import NavigationListenerMixin from './NavigationListenerMixin.js';
+
+// https://html.spec.whatwg.org/multipage/links.html#dom-hyperlink-protocol-dev
+
+/**
+ * @template {keyof URL} T
+ * @param {T} name
+ * @return {ThisType<URL> & TypedPropertyDescriptor<URL[T]>}
+ */
+function buildHyperlinkDefinition(name) {
+  return {
+    get() {
+      return new URL(this.href, window.location.href)[name];
+    },
+    set(value) {
+      const { href } = this;
+      if (!href) return;
+      const url = new URL(href, window.location.href);
+      url[name] = value;
+      this.href = url.href;
+    },
+  };
+}
+
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function HyperlinkMixin(Base) {
+  return Base
+    .mixin(NavigationListenerMixin)
+    .observe({
+      href: 'string',
+      target: 'string',
+      download: 'string',
+      ping: 'string',
+      rel: 'string',
+      hreflang: 'string',
+      referrerPolicy: { type: 'string', attr: 'referrerpolicy' },
+    })
+    .define({
+      origin() { return new URL(this.href).origin; },
+      protocol: buildHyperlinkDefinition('protocol'),
+      username: buildHyperlinkDefinition('username'),
+      password: buildHyperlinkDefinition('password'),
+      host: buildHyperlinkDefinition('host'),
+      hostname: buildHyperlinkDefinition('hostname'),
+      port: buildHyperlinkDefinition('port'),
+      pathname: buildHyperlinkDefinition('pathname'),
+      search: buildHyperlinkDefinition('search'),
+      hash: buildHyperlinkDefinition('hash'),
+    })
+    .html`
+      <a id=anchor
+      href={href}
+      target={target}
+      download={download}
+      ping={ping}
+      rel={rel}
+      hreflang={hreflang}
+      referrerpolicy={referrerPolicy}
+      ></a>
+    `
+    .methods({
+      toString() {
+        return this.href;
+      },
+    });
+}

package/mixins/InputMixin.js

@@ -23,6 +23,11 @@ const IMPLICIT_SUBMISSION_BLOCKING_TYPES = new Set([
 
 const DOMString = { nullParser: String, empty: '' };
 
+/** Flag redispatched click events to know not to block them */
+const redispatchedClickEvents = new WeakSet();
+/** Flag root click events to know not to block them */
+const rootClickEvents = new WeakSet();
+
 /**
  * @see https://html.spec.whatwg.org/multipage/input.html#htmlinputelement
  * @param {ReturnType<import('./StateMixin.js').default>} Base
@@ -30,7 +35,6 @@ const DOMString = { nullParser: String, empty: '' };
 export default function InputMixin(Base) {
   return Base
     .mixin(ControlMixin)
-    .extend()
     .observe({
       accept: DOMString,
       alt: DOMString,
@@ -38,10 +42,9 @@ export default function InputMixin(Base) {
       _formAction: { attr: 'formaction' },
       formEnctype: { attr: 'formenctype', ...DOMString },
       formMethod: { attr: 'formmethod', ...DOMString },
-      formNoValidate: { attr: 'formNoValidate', type: 'boolean' },
       formTarget: { attr: 'formtarget', ...DOMString },
       _height: { attr: 'height', type: 'integer' },
-      indeterminate: { type: 'boolean', reflect: false },
+      _indeterminate: 'boolean',
       max: DOMString,
       maxLength: { attr: 'maxlength', type: 'integer', empty: -1 },
       min: DOMString,
@@ -55,31 +58,44 @@ export default function InputMixin(Base) {
       //  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
       _width: { attr: 'width', type: 'integer' },
     })
+    .set({
+      _useFormImplicitSubmission: true,
+    })
     .define({
       // Alias for typescript
       _input() { return /** @type {HTMLInputElement} */ (this.refs.control); },
     })
+    .observe({
+      indeterminate: {
+        type: 'boolean',
+        get({ _indeterminate }) {
+          return _indeterminate;
+        },
+        /** @param {boolean} value */
+        set(value) {
+          this._input.indeterminate = value;
+          this._indeterminate = this._input.indeterminate;
+        },
+      },
+    })
     .overrides({
       controlTagName: 'input',
     })
+    .recompose(({ refs: { control } }) => {
+      control.setAttribute('checked', '{defaultChecked}');
+      control.setAttribute('height', '{_height}');
+      control.setAttribute('width', '{_width}');
+      control.setAttribute('value', '{_defaultValue}');
+    })
     .on({
-      composed({ inline }) {
-        const { label, control } = this.refs;
-        // Expose [selected] to .checked
-        label.setAttribute('selected', '{checked}');
-        label.setAttribute('invalid', '{_invalid}');
-        label.setAttribute('indeterminate', '{indeterminate}');
-
-        control.setAttribute('checked', '{defaultChecked}');
-        control.setAttribute('height', '{_height}');
-        control.setAttribute('width', '{_width}');
-        control.setAttribute('value', '{_defaultValue}');
-      },
-
       // TODO: Bind multiple
       typeChanged() { this.onValueChangingContentAttribute(); },
-      defaultCheckedChanged() {
-        this._checked = this._input.checked;
+      checkedChanged() {
+        this._input.checked = this.checked;
+        this._input.indeterminate = this._indeterminate;
+      },
+      _indeterminateChanged(previous, current) {
+        this._input.indeterminate = current;
       },
       minChanged() { this.onValueChangingContentAttribute(); },
       minLengthChanged() { this.onValueChangingContentAttribute(); },
@@ -91,11 +107,9 @@ export default function InputMixin(Base) {
       defaultValueChanged() { this.onValueChangingContentAttribute(); },
       _formResetChanged(oldValue, newValue) {
         if (!newValue) return;
-        console.log('form reset');
+        this._onSetValue(this.defaultValue);
         const input = this._input;
-        input.value = this.defaultValue;
         input.checked = this.defaultChecked;
-        this._value = input.value;
         this._checked = input.checked;
         this._checkedDirty = false;
       },
@@ -124,6 +138,7 @@ export default function InputMixin(Base) {
         // Apply user value to input and read back result to apply control to parse
         this._input.checked = checked;
         this._checked = this._input.checked;
+        this.indeterminate = false;
       },
       _onSetValue(value) {
         // Apply user value to input and read back result to apply control to parse
@@ -138,6 +153,7 @@ export default function InputMixin(Base) {
        * @return {void}
        */
       performImplicitSubmission(event) {
+        if (!this._useFormImplicitSubmission) return;
         const form = this.form;
         if (!form) return;
         /** @type {HTMLInputElement} */
@@ -154,13 +170,123 @@ export default function InputMixin(Base) {
           }
         }
         if (defaultButton) {
-          defaultButton.click();
+          defaultButton.dispatchEvent(new PointerEvent(
+            'click',
+            { bubbles: true, cancelable: true, composed: true },
+          ));
           return;
         }
         if (submissionBlockers.size > 1) return;
         this.form.submit();
       },
+      /** @param {Event} event */
+      _redispatchControlClickEvent(event) {
+        event.stopPropagation();
+        // Use constructor to match mouse/pointer properties
+        /**  @type {Event} */
+        // @ts-ignore skip-cast
+        const newEvent = (new event.constructor(event.type, event));
+        redispatchedClickEvents.add(newEvent);
+        return this.dispatchEvent(newEvent);
+      },
+      /** @param {MouseEvent} event */
+      _handleInputClick(event) {
+        if (this.disabledState) return;
+        const input = this._input;
+        switch (input.type) {
+          case 'checkbox':
+          case 'radio': {
+            const { _checkedDirty, _checked, _indeterminate } = this;
+            this.checked = input.checked;
+            // Event needs to be rethrown and preventDefault inspected
+            if (this._redispatchControlClickEvent(event)) return;
+            event.preventDefault();
+            this._checkedDirty = _checkedDirty;
+            this._checked = _checked;
+            this._indeterminate = _indeterminate;
+            break;
+          }
+          case 'button':
+          case 'submit':
+          case 'reset': {
+            if (!this._redispatchControlClickEvent(event)) {
+              event.preventDefault();
+              return;
+            }
+            const { type } = input;
+            if (type !== 'submit' && type !== 'reset') return;
+            // If in the composed path is another submit/reset button,
+            // Let that button take preference and ignore click.
+
+            for (const target of event.composedPath()) {
+              if (target === input || target === this) break;
+              if ((target instanceof HTMLInputElement || target instanceof HTMLButtonElement)
+                  && (target.type === 'submit' || target.type === 'reset')) {
+                // Inner Native Button
+                return;
+              }
+              if ((target instanceof HTMLElement && target.form instanceof HTMLFormElement
+                  && (target.type === 'submit' || target.type === 'reset'))) {
+                // Inner FACE Button
+                return;
+              }
+              if ((target instanceof HTMLAnchorElement && target.href)) {
+                // Inner Anchor Button
+                return;
+              }
+            }
 
+            const form = this.elementInternals?.form;
+            if (!form) return;
+
+            if (type === 'submit') {
+              const duplicatedButton = /** @type {HTMLInputElement} */ (input.cloneNode());
+              duplicatedButton.hidden = true;
+              form.append(duplicatedButton);
+              if ('requestSubmit' in form) {
+                form.requestSubmit(duplicatedButton);
+              } else {
+                duplicatedButton.click();
+              }
+              duplicatedButton.remove();
+            } else if (type === 'reset') {
+              form.reset();
+            }
+          }
+            break;
+          default:
+        }
+      },
+    })
+    .rootEvents({
+      click(event) {
+        rootClickEvents.add(event);
+        const { control } = this.refs;
+        if (event.target === control) return;
+        // Label-like click
+        if (!event.bubbles) return;
+        const { disabledState, type } = this;
+        if (disabledState) return;
+        if (type === 'checkbox' || type === 'radio') {
+          event.stopPropagation();
+          control.click();
+        } else {
+          this._handleInputClick(event);
+        }
+      },
+    })
+    .events({
+      click(event) {
+        // If click event came from own shadowRoot, let it through
+        if (rootClickEvents.has(event)) return;
+        // If click event is a redispatch, let it through
+        if (redispatchedClickEvents.has(event)) return;
+        if (event.target === this) {
+          // Support custom host.dispatchEvent(new Event('click'))
+          event.stopImmediatePropagation();
+          this.refs.control.click();
+        }
+      },
     })
     .childEvents({
       control: {
@@ -170,6 +296,16 @@ export default function InputMixin(Base) {
           if (/** @type {HTMLInputElement} */ (event.currentTarget).type === 'submit') return;
           this.performImplicitSubmission(event);
         },
+        click: '_handleInputClick',
+        input(event) {
+          if (this.disabledState) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+          }
+          const input = /** @type {HTMLInputElement} */ (event.currentTarget);
+          this.checked = input.checked;
+        },
         change(event) {
           if (this.disabledState) {
             event.preventDefault();
@@ -177,16 +313,51 @@ export default function InputMixin(Base) {
             return;
           }
           const input = /** @type {HTMLInputElement} */ (event.currentTarget);
-          console.debug('InputMixin: Will fire checked via change event');
-          this._checkedDirty = true;
-          this._checked = input.checked;
+          this.checked = input.checked;
         },
       },
     })
-    .define({
-      files() { return this._input.files; },
+    .methods({
+      /** @type {HTMLInputElement['setRangeText']} */
+      // @ts-ignore Can't cast?
+      setRangeText(...args) { this._input.setRangeText(...args); },
+
+      /** @type {HTMLInputElement['setSelectionRange']} */
+      setSelectionRange(...args) { this._input.setSelectionRange(...args); },
+
+      /** @type {HTMLInputElement['showPicker']} */
+      showPicker(...args) { this._input.showPicker(...args); },
+
+      /** @type {HTMLInputElement['stepDown']} */
+      stepDown(...args) {
+        this._input.stepDown(...args);
+        this._value = this._input.value;
+      },
+
+      /** @type {HTMLInputElement['stepUp']} */
+      stepUp(...args) {
+        this._input.stepUp(...args);
+        this._value = this._input.value;
+      },
 
-      select() { return this._input.select; },
+      /** @type {HTMLInputElement['select']} */
+      select(...args) {
+        this._input.select(...args);
+      },
+    })
+    .define({
+      files: {
+        get() { return this._input.files; },
+        set(value) {
+          if (value == null && this.type === 'file') {
+            // TODO: Clean up single-loop recursion
+            this._input.value = ''; // Clears files
+            this.value = '';
+          } else {
+            this._input.files = value;
+          }
+        },
+      },
 
       selectionDirection: {
         get() { return this._input.selectionDirection; },
@@ -203,16 +374,6 @@ export default function InputMixin(Base) {
         set(value) { this._input.selectionStart = value; },
       },
 
-      setRangeText() { return this._input.setRangeText; },
-
-      setSelectionRange() { return this._input.setSelectionRange; },
-
-      showPicker() { return this._input.showPicker; },
-
-      stepDown() { return this._input.stepDown; },
-
-      stepUp() { return this._input.stepUp; },
-
       valueAsDate: {
         get() { return this._input.valueAsDate; },
         set(value) {
@@ -252,5 +413,10 @@ export default function InputMixin(Base) {
           this._width = value;
         },
       },
-    });
+    })
+    .css`
+      #control::-webkit-file-upload-button {
+        display: none;
+      }
+    `;
 }

package/mixins/KeyboardNavMixin.js

@@ -1,4 +1,6 @@
-import { attemptFocus, isRtl } from '../core/dom.js';
+import { attemptFocus, isFocused, isRtl } from '../core/dom.js';
+
+import AriaReflectorMixin from './AriaReflectorMixin.js';
 
 const DEFAULT_ELEMENT_QUERY = [
   'button',
@@ -14,7 +16,7 @@ const DEFAULT_ELEMENT_QUERY = [
  */
 export default function KeyboardNavMixin(Base) {
   return Base
-    .extend()
+    .mixin(AriaReflectorMixin)
     .observe({
       /** Keyboard navigation attribute */
       kbdNav: { empty: 'true' },
@@ -47,10 +49,23 @@ export default function KeyboardNavMixin(Base) {
     })
     .methods({
       _ariaOrientationIsVertical() {
-        return (this.ariaOrientation
-          ?? this.getAttribute('aria-orientation')
+        return (this.readAriaProperty('ariaOrientation')
           ?? this.ariaOrientationDefault) === 'vertical';
       },
+      focusCurrentOrFirst() {
+        let current;
+        let first;
+        for (const candidate of this.kbdNavChildren) {
+          first = candidate;
+          if (candidate.tabIndex === 0) {
+            current = candidate;
+            break;
+          }
+        }
+        if (attemptFocus(current)) return current;
+        if (attemptFocus(first)) return first;
+        return null;
+      },
       /**
        * Focuses next element participating in roving tab index list
        * @param {HTMLElement} [current]
@@ -81,7 +96,7 @@ export default function KeyboardNavMixin(Base) {
         }
 
         if (!loop) {
-          if (document.activeElement !== current && current instanceof HTMLElement) {
+          if (!isFocused(current) && current instanceof HTMLElement) {
             current.focus();
           }
           return current;
@@ -145,7 +160,7 @@ export default function KeyboardNavMixin(Base) {
         /** @type {HTMLElement} */
         let firstFocusableChild = null;
         for (const child of this.kbdNavChildren) {
-          if (!currentlyFocusedChild && document.activeElement === child) {
+          if (!currentlyFocusedChild && isFocused(child)) {
             currentlyFocusedChild = child;
           } else if (!currentTabIndexChild && child.getAttribute('tabindex') === '0') {
             currentTabIndexChild = child;
@@ -159,7 +174,7 @@ export default function KeyboardNavMixin(Base) {
           }
           // Bind
           if (!child.hasAttribute('tabindex')) {
-            child.tabIndex = (document.activeElement === child) ? 0 : -1;
+            child.tabIndex = isFocused(child) ? 0 : -1;
           }
         // this.rtiBindChild(child);
         }