@shortfuse/materialdesignweb 0.7.2 → 0.7.5

package/mixins/InputMixin.js

@@ -1,3 +1,5 @@
+import { cloneAttributeCallback } from '../core/CustomElement.js';
+
 import ControlMixin from './ControlMixin.js';
 
 /** @typedef {'align'|'useMap'} DeprecatedHTMLInputElementProperties */
@@ -19,317 +21,236 @@ const IMPLICIT_SUBMISSION_BLOCKING_TYPES = new Set([
   'number',
 ]);
 
+const DOMString = { nullParser: String, empty: '' };
+
 /**
+ * @see https://html.spec.whatwg.org/multipage/input.html#htmlinputelement
  * @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:
+  return Base
+    .mixin(ControlMixin)
+    .extend()
+    .observe({
+      accept: DOMString,
+      alt: DOMString,
+      dirName: { attr: 'dirname', ...DOMString },
+      _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 },
+      max: DOMString,
+      maxLength: { attr: 'maxlength', type: 'integer', empty: -1 },
+      min: DOMString,
+      minLength: { attr: 'minlength', type: 'integer', empty: -1 },
+      multiple: 'boolean',
+      pattern: DOMString,
+      placeholder: DOMString,
+      size: { type: 'integer', empty: 20 },
+      src: DOMString,
+      step: DOMString,
+      //  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
+      _width: { attr: 'width', type: 'integer' },
+    })
+    .define({
+      // Alias for typescript
+      _input() { return /** @type {HTMLInputElement} */ (this.refs.control); },
+    })
+    .overrides({
+      controlTagName: 'input',
+    })
+    .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;
+      },
+      minChanged() { this.onValueChangingContentAttribute(); },
+      minLengthChanged() { this.onValueChangingContentAttribute(); },
+      maxChanged() { this.onValueChangingContentAttribute(); },
+      maxLengthChanged() { this.onValueChangingContentAttribute(); },
+      multipleChanged() { this.onValueChangingContentAttribute(); },
+      patternChanged() { this.onValueChangingContentAttribute(); },
+      stepChanged() { this.onValueChangingContentAttribute(); },
+      defaultValueChanged() { this.onValueChangingContentAttribute(); },
+      _formResetChanged(oldValue, newValue) {
+        if (!newValue) return;
+        console.log('form reset');
+        const input = this._input;
+        input.value = this.defaultValue;
+        input.checked = this.defaultChecked;
+        this._value = input.value;
+        this._checked = input.checked;
+        this._checkedDirty = false;
+      },
+      attrs: {
+        accept: cloneAttributeCallback('accept', 'control'),
+        alt: cloneAttributeCallback('alt', 'control'),
+        dirname: cloneAttributeCallback('dirname', 'control'),
+        formenctype: cloneAttributeCallback('formenctype', 'control'),
+        formmethod: cloneAttributeCallback('formmethod', 'control'),
+        formnovalidate: cloneAttributeCallback('formnovalidate', 'control'),
+        formTarget: cloneAttributeCallback('formTarget', 'control'),
+        max: cloneAttributeCallback('max', 'control'),
+        maxlength: cloneAttributeCallback('maxlength', 'control'),
+        min: cloneAttributeCallback('min', 'control'),
+        minlength: cloneAttributeCallback('minlength', 'control'),
+        multiple: cloneAttributeCallback('multiple', 'control'),
+        pattern: cloneAttributeCallback('pattern', 'control'),
+        placeholder: cloneAttributeCallback('placeholder', 'control'),
+        size: cloneAttributeCallback('size', 'control'),
+        src: cloneAttributeCallback('src', 'control'),
+        step: cloneAttributeCallback('step', 'control'),
+      },
+    })
+    .overrides({
+      _onSetChecked(checked) {
+        // Apply user value to input and read back result to apply control to parse
+        this._input.checked = checked;
+        this._checked = this._input.checked;
+      },
+      _onSetValue(value) {
+        // Apply user value to input and read back result to apply control to parse
+        this._input.value = value;
+        this._value = this._input.value;
+      },
+    })
+    .methods({
+      /**
+       * @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;
           }
-          // 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');
-            }
+          if (IMPLICIT_SUBMISSION_BLOCKING_TYPES.has(element.type)) {
+            submissionBlockers.add(element);
           }
-          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 (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; }
+        if (submissionBlockers.size > 1) return;
+        this.form.submit();
+      },
+
+    })
+    .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);
+          console.debug('InputMixin: Will fire checked via change event');
+          this._checkedDirty = true;
+          this._checked = input.checked;
+        },
+      },
+    })
+    .define({
+      files() { return this._input.files; },
 
-    set valueAsNumber(value) {
-      this.#input.valueAsNumber = value;
-      this.value = this.#input.value;
-    }
+      select() { return this._input.select; },
 
-    get height() { return this.#input.height; }
+      selectionDirection: {
+        get() { return this._input.selectionDirection; },
+        set(value) { this._input.selectionDirection = value; },
+      },
 
-    set height(value) {
-      this.#input.height = value;
-      this._height = value;
-    }
+      selectionEnd: {
+        get() { return this._input.selectionEnd; },
+        set(value) { this._input.selectionEnd = value; },
+      },
 
-    get formAction() { return this.#input.formAction; }
+      selectionStart: {
+        get() { return this._input.selectionStart; },
+        set(value) { this._input.selectionStart = value; },
+      },
 
-    set formAction(value) {
-      this.#input.formAction = value;
-      this._formAction = value;
-    }
+      setRangeText() { return this._input.setRangeText; },
 
-    get width() { return this.#input.width; }
+      setSelectionRange() { return this._input.setSelectionRange; },
 
-    set width(value) {
-      this.#input.width = value;
-      this._width = value;
-    }
-  }
+      showPicker() { return this._input.showPicker; },
 
-  Input.prototype.ariaControls = Input.prop('ariaControls');
+      stepDown() { return this._input.stepDown; },
 
-  // https://html.spec.whatwg.org/multipage/input.html#htmlinputelement
+      stepUp() { return this._input.stepUp; },
 
-  const DOMString = { nullParser: String, value: '' };
+      valueAsDate: {
+        get() { return this._input.valueAsDate; },
+        set(value) {
+          this._input.valueAsDate = value;
+          this.value = this._input.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');
+      valueAsNumber: {
+        get() { return this._input.valueAsNumber; },
+        set(value) {
+          this._input.valueAsNumber = value;
+          this.value = this._input.value;
+        },
+      },
 
-  // 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;
-    },
-  });
+      height: {
+        get() { return this._input.height; },
+        set(value) {
+          this._input.height = value;
+          this._height = value;
+        },
+      },
 
-  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' });
+      formAction: {
+        get() { return this._input.formAction; },
+        set(value) {
+          this._input.formAction = value;
+          this._formAction = value;
+        },
+      },
 
-  return Input.tsClassFix();
+      width: {
+        get() { return this._input.width; },
+        set(value) {
+          this._input.width = value;
+          this._width = value;
+        },
+      },
+    });
 }

package/mixins/TextFieldMixin.js

@@ -56,7 +56,6 @@ export default function TextFieldMixin(Base) {
     .on({
       composed({ template, html, inline }) {
         const { control, label: labelElement, outline, shape, outlineLeft, outlineRight, state } = this.refs;
-        control.setAttribute('type', 'text');
         control.setAttribute('placeholder', '{computePlaceholder}');
         control.setAttribute('aria-label', '{label}');
         control.setAttribute('input-suffix', '{inputSuffix}');
@@ -87,6 +86,7 @@ export default function TextFieldMixin(Base) {
           `,
         );
 
+        outline.setAttribute('label', '{label}');
         outline.setAttribute('invalid', '{invalid}');
         outline.setAttribute('errored', '{erroredState}');
         outlineLeft.after(html`
@@ -189,6 +189,18 @@ export default function TextFieldMixin(Base) {
         color: rgb(var(--mdw-color__on-surface));
       }
 
+      /** Guard against bleed */
+      :host([label][outlined]) {
+        --mdw-shape__size__top-start-size: min(var(--mdw-shape__size), 12px);
+        --mdw-shape__size__bottom-start-size: min(var(--mdw-shape__size), 12px);
+        --mdw-shape__size__top-end-size: min(var(--mdw-shape__size), 12px);
+        --mdw-shape__size__bottom-end-size: min(var(--mdw-shape__size), 12px);
+      }
+
+      #label[label][outlined] {
+        -webkit-mask-box-image-width: min(var(--mdw-shape__size), 12px);
+      }
+
       #label {
         position: relative;
 
@@ -324,7 +336,7 @@ export default function TextFieldMixin(Base) {
       }
 
       #state {
-        --mdw-state__focus-opacity: 0;
+        --mdw-state__focused-opacity: 0;
         --mdw-state__pressed-opacity: 0;
       }
 
@@ -446,15 +458,6 @@ export default function TextFieldMixin(Base) {
         transform: translateY(-50%);
       }
 
-      #label[label][outlined] {
-        /** Guard against bleed */
-        --mdw-shape__size__top-start-size: min(var(--mdw-shape__size), 12px);
-        --mdw-shape__size__bottom-start-size: min(var(--mdw-shape__size), 12px);
-        --mdw-shape__size__top-end-size: min(var(--mdw-shape__size), 12px);
-        --mdw-shape__size__bottom-end-size: min(var(--mdw-shape__size), 12px);
-        -webkit-mask-box-image-width: min(var(--mdw-shape__size), 12px);
-      }
-
       :is(#prefix, #suffix):is([focused], [populated]) {
         opacity: 1;
       }
@@ -505,11 +508,13 @@ export default function TextFieldMixin(Base) {
       #outline {
         display: grid;
         grid-auto-flow: column;
-        grid-template-columns: 12px minmax(0,auto) minmax(12px, 1fr);
+        grid-template-columns: 1fr 0 1fr;
 
         color: rgb(var(--mdw-color__outline));
+      }
 
-
+      #outline[label] {
+        grid-template-columns: 12px minmax(0,auto) minmax(12px, 1fr);
       }
 
       #outline[hovered] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.7.2",
+  "version": "0.7.5",
   "description": "Material Design for Web",
   "type": "module",
   "bin": {
@@ -14,7 +14,8 @@
     "watch": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile",
     "serve": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile --serve --live",
     "pretest": "eslint --ignore-path .gitignore",
-    "test": "c8 tap --no-coverage"
+    "test": "web-test-runner \"test/**/*.test.js\" --node-resolve",
+    "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch"
   },
   "browser": "dist/index.min.js",
   "repository": {
@@ -59,10 +60,14 @@
   },
   "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
   "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4-fix.0",
     "@types/html-minifier-terser": "^7.0.0",
+    "@types/mocha": "^10.0.1",
     "@types/tap": "^15.0.7",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
+    "@web/test-runner": "^0.15.2",
+    "@web/test-runner-playwright": "^0.9.0",
     "acorn": "^8.8.2",
     "acorn-walk": "^8.2.0",
     "browserslist-to-esbuild": "^1.1.1",
@@ -86,8 +91,6 @@
     "stylelint-no-unsupported-browser-features": "github:clshortfuse/stylelint-no-unsupported-browser-features#0a51157",
     "stylelint-order": "^6.0.2",
     "stylelint-use-logical-spec": "^5.0.0",
-    "tap": "^16.3.0",
-    "typescript": "^5.0.2",
-    "webdriverio": "^7.23.0"
+    "typescript": "^5.0.2"
   }
 }