@shortfuse/materialdesignweb 0.8.0 → 0.9.1

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 */
@@ -9,6 +11,7 @@ const FORM_IPC_EVENT = 'mdw-form-associated-changed';
 const DOMString = { nullParser: String, value: '' };
 
 /**
+ * Implements form-associated element behavior (internals, validity, files, value handling).
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
 export default function FormAssociatedMixin(Base) {
@@ -21,22 +24,36 @@ export default function FormAssociatedMixin(Base) {
       _ipcListener: null,
       /** @type {EventTarget} */
       _ipcTarget: null,
+      /** @type {FileList} */
+      _files: null,
     })
     .observe({
+      /** ARIA 'controls' attribute (string). */
       ariaControls: 'string',
+      /** Autocomplete token for the associated control (string). */
       autocomplete: DOMString,
+      /** Name attribute for the control used in forms. */
       name: DOMString,
+      /** Read-only state reflected to control via 'readonly' attribute. */
       readOnly: { attr: 'readonly', type: 'boolean' },
+      /** When true, form validation is skipped for this control (formnovalidate). */
+      formNoValidate: { attr: 'formnovalidate', type: 'boolean' },
+      /** Default checked state for checkable controls (checkbox/radio). */
       defaultChecked: { attr: 'checked', type: 'boolean' },
       _checkedDirty: 'boolean',
       /* "Checkedness" */
       _checked: 'boolean',
+      /** Whether the control is required for form submission. */
       required: 'boolean',
+      /** Control type token (e.g. 'text','checkbox','radio','file'). */
       type: DOMString,
       //  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
+      /** Reflected default value backing field (attr: value). */
       _defaultValue: { reflect: true, attr: 'value' },
+      /** Internal value storage. */
       _value: { empty: '' },
       _valueDirty: 'boolean',
+      /** Whether the user has interacted with the control (used for validation UX). */
       _userInteracted: 'boolean',
       _invalid: 'boolean',
       _badInput: 'boolean',
@@ -73,14 +90,14 @@ export default function FormAssociatedMixin(Base) {
     })
     .methods({
       /**
-       * Default behavior can should likely be overridden
+       * Default behavior should likely be overridden
        * @param {string} value
        */
       _onSetValue(value) {
         this._value = value;
       },
       /**
-       * Default behavior can should likely be overridden
+       * Default behavior should likely be overridden
        * @param {boolean} checked
        */
       _onSetChecked(checked) {
@@ -92,14 +109,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 +125,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 +145,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 +160,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,7 +224,6 @@ export default function FormAssociatedMixin(Base) {
        */
       formAssociatedCallback(form) {
         this.refreshFormAssociation();
-        console.debug('FormAssociatedMixin: formAssociatedCallback', this);
         this.checkValidity();
       },
 
@@ -231,6 +259,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,8 +268,7 @@ export default function FormAssociatedMixin(Base) {
        * @param {'autocomplete'|'restore'} mode
        */
       formStateRestoreCallback(state, mode) {
-        if (navigator.userAgent.includes('Chrome/')) {
-          // console.warn('Chromium Bug: 1429585 - Ignoring formStateRestoreCallback on Chromium', { state, mode });
+        if (CHROME_VERSION < 115) {
           // formStateRestoreCallback is broken on Chromium
           // https://bugs.chromium.org/p/chromium/issues/detail?id=1429585
           return;
@@ -282,6 +310,36 @@ export default function FormAssociatedMixin(Base) {
               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();
+            // eslint-disable-next-line unicorn/no-this-assignment, @typescript-eslint/no-this-alias
+            const selectElement = /** @type {HTMLSelectElement} */ (/** @type {unknown} */ (this));
+            if (selectElement.name) {
+              for (const option of selectElement.selectedOptions) {
+                formData.append(selectElement.name, option.value);
+              }
+            }
+            this.elementInternals.setFormValue(formData);
+            break;
+          }
+          // case 'select-one':
           default:
             // console.debug('FormAssociatedMixin: setFormValue', this.name, this.value, this);
             this.elementInternals.setFormValue(this.value);
@@ -305,5 +363,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,76 @@
+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;
+    },
+  };
+}
+
+/**
+ * Adds hyperlink-related properties and URL helpers (href, target, rel, etc.).
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function HyperlinkMixin(Base) {
+  return Base
+    .mixin(NavigationListenerMixin)
+    .observe({
+      /** The URL that the hyperlink points to. */
+      href: 'string',
+      /** The browsing context in which to open the linked resource (e.g. '_blank'). */
+      target: 'string',
+      /** Suggested filename for download. */
+      download: 'string',
+      /** URLs to be pinged when the link is followed. */
+      ping: 'string',
+      /** Link relationship tokens (e.g. 'noopener', 'noreferrer'). */
+      rel: 'string',
+      /** Language of the linked resource. */
+      hreflang: 'string',
+      /** Referrer policy for the link (serialized to 'referrerpolicy' attribute). */
+      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,7 +23,13 @@ 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();
+
 /**
+ * Enhances a component with input-like attributes and behaviors (value, step, min/max, etc.).
  * @see https://html.spec.whatwg.org/multipage/input.html#htmlinputelement
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
@@ -31,49 +37,85 @@ export default function InputMixin(Base) {
   return Base
     .mixin(ControlMixin)
     .observe({
+      /** Accepted file types for file input (e.g. '.png,.jpg'). */
       accept: DOMString,
+      /** Alternate text for images (for `type='image'`). */
       alt: DOMString,
+      /** Directionality for form submission name (dirname attribute). */
       dirName: { attr: 'dirname', ...DOMString },
+      /** Form action URL when this input is used as a submit button. */
       _formAction: { attr: 'formaction' },
+      /** Form encoding type (formenctype). */
       formEnctype: { attr: 'formenctype', ...DOMString },
+      /** Form method when associated with a submit input (formmethod). */
       formMethod: { attr: 'formmethod', ...DOMString },
-      formNoValidate: { attr: 'formNoValidate', type: 'boolean' },
+      /** Target browsing context for form submission (formtarget). */
       formTarget: { attr: 'formtarget', ...DOMString },
+      /** Rendered height hint for certain input types (integer). */
       _height: { attr: 'height', type: 'integer' },
-      indeterminate: { type: 'boolean', reflect: false },
+      _indeterminate: 'boolean',
+      /** Max value or token for the input. */
       max: DOMString,
+      /** Maximum length for text-like inputs. */
       maxLength: { attr: 'maxlength', type: 'integer', empty: -1 },
+      /** Min value or token for the input. */
       min: DOMString,
+      /** Minimum length for text-like inputs. */
       minLength: { attr: 'minlength', type: 'integer', empty: -1 },
+      /** When true, multiple values are allowed (e.g. file inputs). */
       multiple: 'boolean',
+      /** Pattern used for validation (RegExp as string). */
       pattern: DOMString,
+      /** Placeholder text shown when no value is present. */
       placeholder: DOMString,
+      /** Suggested control size (number of characters). */
       size: { type: 'integer', empty: 20 },
+      /** Source URL for image-type inputs. */
       src: DOMString,
+      /** Step interval for numeric inputs. */
       step: DOMString,
       //  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
+      /** Rendered width hint for certain input types (integer). */
       _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() {
-        const { control } = this.refs;
-        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(); },
@@ -85,11 +127,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;
       },
@@ -118,6 +158,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
@@ -132,6 +173,7 @@ export default function InputMixin(Base) {
        * @return {void}
        */
       performImplicitSubmission(event) {
+        if (!this._useFormImplicitSubmission) return;
         const form = this.form;
         if (!form) return;
         /** @type {HTMLInputElement} */
@@ -148,13 +190,125 @@ 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;
+              }
+              // @ts-expect-error Verified in runtime
+              if ((target instanceof HTMLElement && target.form instanceof HTMLFormElement
+                  // @ts-expect-error Verified in runtime
+                  && (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: {
@@ -164,6 +318,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();
@@ -171,15 +335,51 @@ export default function InputMixin(Base) {
             return;
           }
           const input = /** @type {HTMLInputElement} */ (event.currentTarget);
-          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); },
 
-      select() { return this._input.select; },
+      /** @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;
+      },
+
+      /** @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; },
@@ -196,16 +396,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) {
@@ -245,5 +435,10 @@ export default function InputMixin(Base) {
           this._width = value;
         },
       },
-    });
+    })
+    .css`
+      #control::-webkit-file-upload-button {
+        display: none;
+      }
+    `;
 }