@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/mixins/FlexableMixin.css

@@ -0,0 +1,79 @@
+/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
+
+:host{
+  box-sizing: border-box;
+}
+
+:host([flex]) {
+  display:flex;
+}
+
+:host([flex="column"]) {
+  flex-direction: column;
+}
+
+:host(:where([flex][y="start"], [flex="column"][x="start"])) {
+  align-items: flex-start;
+}
+
+:host(:where([flex][y="end"], [flex="column"][x="end"])) {
+  align-items: flex-end;
+}
+
+:host(:where([flex][y="center"], [flex="column"][x="center"])) {
+  align-items: center;
+}
+
+:host(:where([flex][y="between"], [flex="column"][x="between"])) {
+  align-items: space-between;
+}
+
+:host(:where([flex][y="around"], [flex="column"][x="around"])) {
+  align-items: space-around;
+}
+
+:host(:where([flex][y="stretch"], [flex="column"][x="stretch"])) {
+  align-items: stretch;
+}
+
+:host(:where([flex][x="start"], [flex="column"][y="start"])) {
+  justify-content: flex-start;
+}
+
+:host(:where([flex][x="end"], [flex="column"][y="end"])) {
+  justify-content: flex-end;
+}
+
+:host(:where([flex][x="center"], [flex="column"][y="center"])) {
+  justify-content: center;
+}
+
+:host(:where([flex][x="between"], [flex="column"][y="between"])) {
+  justify-content: space-between;
+}
+
+:host(:where([flex][x="stretch"], [flex="column"][y="stretch"])) {
+  justify-content: space-around;
+}
+
+:host([wrap]) {
+  flex-wrap: wrap;
+}
+
+:host([wrap="reverse"]) {
+  flex-wrap: wrap-reverse;
+}
+
+:host([gap="4"]) {gap: 4px;}
+:host([gap="8"]) {gap: 8px;}
+:host([gap="12"]) {gap: 12px;}
+:host([gap="16"]) {gap: 16px;}
+:host([gap="20"]) {gap: 20px;}
+:host([gap="24"]) {gap: 24px;}
+
+:host([padding="4"]) {padding: 4px;}
+:host([padding="8"]) {padding: 8px;}
+:host([padding="12"]) {padding: 12px;}
+:host([padding="16"]) {padding: 16px;}
+:host([padding="20"]) {padding: 20px;}
+:host([padding="24"]) {padding: 24px;}

package/mixins/FlexableMixin.js

@@ -0,0 +1,32 @@
+import styles from './FlexableMixin.css' assert {type: 'css'};
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function FlexableMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      flex: {
+        type: 'string',
+        empty: 'row',
+        /** @type {'row'|'column'} */
+        value: 'row',
+      },
+      x: {
+        type: 'string',
+        empty: 'start',
+        /** @type {'start'|'center'|'end'|'between'|'around'|'stretch'} */
+        value: 'start',
+      },
+      y: {
+        type: 'string',
+        empty: 'start',
+        /** @type {'start'|'center'|'end'|'between'|'around'|'stretch'} */
+        value: 'start',
+      },
+      gap: 'float',
+      padding: 'float',
+    })
+    .css(styles);
+}

package/mixins/FormAssociatedMixin.js

@@ -0,0 +1,170 @@
+/* https://html.spec.whatwg.org/multipage/form-control-infrastructure.html */
+
+/** @typedef {HTMLElement & {value:string}} HTMLControlElement */
+
+/** @typedef {import('../core/CustomElement.js').default} CustomElement */
+
+const DOMString = { nullParser: String };
+
+const FORM_IPC_EVENT = 'mdw-form-associated-changed';
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default>} Base
+ */
+export default function FormAssociatedMixin(Base) {
+  return Base
+    .extend()
+    .setStatic({
+      formAssociated: true,
+    })
+    .set({
+      _valueDirty: false,
+      /** @type {EventListener} */
+      _ipcListener: null,
+      /** @type {EventTarget} */
+      _ipcTarget: null,
+    })
+    .observe({
+      ariaControls: 'string',
+      autocomplete: DOMString,
+      name: DOMString,
+      readOnly: { attr: 'readonly', type: 'boolean' },
+      required: 'boolean',
+      type: DOMString,
+      //  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
+      _value: {
+        empty: '',
+        /**
+         * @param {string} oldValue
+         * @param {string} newValue
+         */
+        changedCallback(oldValue, newValue) {
+          this.propChangedCallback('value', oldValue, newValue);
+        },
+      },
+      _invalid: 'boolean',
+      _badInput: 'boolean',
+      _validationMessage: 'string',
+      _formDisabled: 'boolean',
+    })
+    .observe({
+      erroredState({ _invalid }) { return _invalid; },
+    })
+    .define({
+      form() { return this.elementInternals.form; },
+      validity() { return this.elementInternals.validity; },
+      validationMessage() { return this.elementInternals.validationMessage; },
+      willValidate() { return this.elementInternals.willValidate; },
+      labels() { return this.elementInternals.labels; },
+      value: {
+        get() {
+          return this._value;
+        },
+        /** @param {string} v */
+        set(v) {
+          this._valueDirty = true;
+          this._value = v;
+        },
+      },
+    })
+    .observe({
+      disabledState({ _formDisabled, disabled }) {
+        if (_formDisabled) return true;
+        return !!disabled;
+      },
+    })
+    .methods({
+      checkValidity() { return this.elementInternals.checkValidity(); },
+
+      reportValidity() { return this.elementInternals.reportValidity(); },
+
+      /**
+       * @param {string} error
+       * @return {void}
+       */
+      setCustomValidity(error) {
+        this.elementInternals.setValidity({
+          ...this.elementInternals.validity,
+          customError: !!error,
+        }, this.elementInternals.validationMessage || error);
+      },
+
+      /**
+       * @param {string} key
+       * @param {string} value
+       * @return {void}
+       */
+      _notifyRadioChange(key, value) {
+        this._ipcTarget?.dispatchEvent(
+          new CustomEvent(FORM_IPC_EVENT, { detail: [key, value] }),
+        );
+      },
+
+      refreshFormAssociation() {
+        const newTarget = this.elementInternals.form ?? this.getRootNode();
+        if (newTarget === this._ipcTarget) {
+          // console.warn('Already associated?', newTarget);
+          return;
+        }
+        if (this._ipcTarget) {
+          this._ipcTarget.removeEventListener(FORM_IPC_EVENT, this._ipcListener);
+        }
+        if (this.type !== 'radio') return;
+
+        this._ipcTarget = newTarget;
+        this._ipcListener ??= this.formIPCEvent.bind(this);
+        this._ipcTarget.addEventListener(FORM_IPC_EVENT, this._ipcListener);
+      },
+
+      /**
+       * New lifecycle callback. This is called when association with
+       * <form> is changed.
+       * @param {HTMLFormElement?} form
+       * @return {void}
+       */
+      formAssociatedCallback(form) {
+        this.refreshFormAssociation();
+      },
+
+      /**
+       * @param {CustomEvent<[string, string]>} event
+       * @return {void}
+       */
+
+      formIPCEvent(event) {
+        console.warn('Virtual formIPCEvent invoked.');
+        // virtual
+      },
+
+      /** @param {boolean} disabled */
+      formDisabledCallback(disabled) {
+        this._formDisabled = disabled;
+      },
+
+      formResetCallback() {
+        this._valueDirty = false;
+        this.checkValidity();
+      },
+
+      /**
+       * @param {string|FormData} state
+       * @param {'autocomplete'|'restore'} mode
+       */
+      formStateRestoreCallback(state, mode) {
+        if (typeof state === 'string') {
+          this.value = state;
+        } else {
+          console.warn('Could not restore', state);
+        }
+      },
+    })
+    .events({
+      blur() { this.checkValidity(); },
+    })
+    .on({
+      connected() {
+        // Bind to global if no form is present (used by radio)
+        this.refreshFormAssociation();
+      },
+    });
+}

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