@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/mixins/AriaToolbarMixin.js

@@ -0,0 +1,13 @@
+import KbdNavWidgetMixin from './KeyboardNavMixin.js';
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function AriaToolbarMixin(Base) {
+  return Base
+    .mixin(KbdNavWidgetMixin)
+    .extend()
+    .set({
+      ariaOrientationDefault: 'horizontal',
+    });
+}

package/mixins/ControlMixin.css

@@ -0,0 +1,57 @@
+:host {
+  display: inline-flex;
+}
+
+/* Remove Firefox inner */
+:host(::-moz-focus-inner) {
+  border: 0;
+}
+
+#label {
+  display: contents;
+
+  pointer-events: none;
+}
+
+#control {
+  /* Control is the touch target */
+  /* Firefox requires at least 1px "visible" for screen reading */
+  /* Safari will not allow interaction with 0 opacity */
+  /* Chrome will not focus with visibility:hidden */
+
+  position: absolute;
+  inset: 50%;
+  /* --mdw-device-pixel-ratio: 1; */
+
+  block-size: 100%;
+  min-block-size: 48px;
+  inline-size:100%;
+  min-inline-size: 48px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  cursor: auto;
+  outline: none;
+
+  pointer-events: auto;
+
+  transform: translateX(-50%) translateY(-50%);
+
+  /* Safari and Chrome will emit two click events if not at top of stack */
+  /* Allows up to 3 other layers (eg: ripple, outline) */
+  z-index: 4;
+
+  background-color: transparent;
+
+  border-radius: 0;
+  color: transparent;
+}
+
+#control::-moz-focus-inner {
+  border: 0;
+}

package/mixins/ControlMixin.js

@@ -0,0 +1,212 @@
+/* https://html.spec.whatwg.org/multipage/form-control-infrastructure.html */
+
+import styles from './ControlMixin.css' assert { type: 'css' };
+import FormAssociatedMixin from './FormAssociatedMixin.js';
+
+/** @typedef {import('../core/CustomElement.js').default} CustomElement */
+
+/** @typedef {'align'|'useMap'} DeprecatedHTMLInputElementProperties */
+
+/** @typedef {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} HTMLControlElement */
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default>} Base
+ */
+export default function ControlMixin(Base) {
+  class Control extends Base.mixin(FormAssociatedMixin) {
+    /** @return {Iterable<string>} */
+    static get observedAttributes() {
+      return [
+        ...super.observedAttributes,
+        'aria-label',
+        ...this.valueChangingContentAttributes,
+        ...this.clonedContentAttributes,
+      ];
+    }
+
+    static controlTagName = 'input';
+
+    static controlVoidElement = true;
+
+    /** @type {string[]} */
+    static clonedContentAttributes = [
+      'autocomplete', 'name', 'readonly', 'required',
+    ];
+
+    /** @type {string[]} */
+    static valueChangingContentAttributes = [];
+
+    /** @param {any[]} args  */
+    constructor(...args) {
+      super(...args);
+      /** @type {string} */
+      this._value = this._control.value;
+      // Expose this element as focusable
+      if (!this.hasAttribute('tabindex')) {
+        this.tabIndex = 0;
+      }
+    }
+
+    /** @type {CustomElement['attributeChangedCallback']} */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+      if (this.static.clonedContentAttributes.includes(name)) {
+        if (newValue == null) {
+          this._control.removeAttribute(name);
+        } else {
+          this._control.setAttribute(name, newValue);
+        }
+      }
+
+      if (this.static.valueChangingContentAttributes.includes(name)) {
+        if (!this.hasAttribute('value')) {
+          // Force HTMLInputElement to recalculate default
+          // Unintended effect of incrementally changing attributes (eg: range)
+          this._control.setAttribute('value', '');
+        }
+        // Changing control attribute may change the value (eg: min/max)
+        this._value = this._control.value;
+      }
+    }
+
+    /** @type {HTMLControlElement} */
+    get _control() { return this.refs.control; }
+
+    /**
+     * @param {Partial<this>} data
+     * @return {string}
+     */
+    computeAriaLabelledBy({ ariaLabel }) {
+      if (ariaLabel) return null;
+      return '#slot';
+    }
+
+    get stateTargetElement() { return this._control; }
+
+    click() {
+      /** Redirect click requests to control itself */
+      this._control.click();
+    }
+
+    static {
+      this.css(styles);
+      this.on({
+        // Wait until controlTagName is settled before templating
+        composed({ template, html }) {
+          template.append(html`
+            <label id=label disabled={disabledState}>
+              <${this.static.controlTagName} id=control aria-labelledby={computeAriaLabelledBy} aria-label={ariaLabel}
+                >${this.static.controlVoidElement ? '' : `</${this.static.controlTagName}>`}
+            </label>
+          `);
+        },
+        disabledStateChanged(oldValue, newValue) {
+          this._control.setAttribute('aria-disabled', `${newValue}`);
+          if (!this.focusableOnDisabled) {
+            this._control.disabled = newValue;
+            if (newValue) {
+              this.tabIndex = 0;
+            } else {
+              this.removeAttribute('tabindex');
+            }
+          }
+        },
+      });
+      this.childEvents({
+        control: {
+          input({ currentTarget }) {
+            const control = /** @type {HTMLControlElement} */ (currentTarget);
+            if (this.validity.valid) {
+            // Track internally
+              control.checkValidity();
+              this._badInput = control.validity.badInput;
+            } else {
+            // Perform check in case user has validated
+              this.checkValidity();
+            }
+            this._value = control.value;
+          },
+          change({ currentTarget }) {
+            const control = /** @type {HTMLControlElement} */ (currentTarget);
+            this._value = control.value;
+            this.checkValidity();
+            // Change event is NOT composed. Needs to escape shadow DOM
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+          },
+        },
+      });
+    }
+
+    /** @type {HTMLElement['focus']} */
+    focus(...options) {
+      super.focus(...options);
+      this.refs.control.focus(...options);
+    }
+
+    /**
+     * @template {typeof Control & ReturnType<import('./RippleMixin.js').default> & ReturnType<import('./FormAssociatedMixin.js').default>} T
+     * @return {T}
+     */
+    get static() {
+      return /** @type {T} */ (/** @type {unknown} */ (super.static));
+    }
+
+    get form() { return this.elementInternals.form; }
+
+    // get name() { return this.getAttribute('name'); }
+    get value() {
+      return this._value;
+    }
+
+    set value(v) {
+      this._valueDirty = true;
+      this._control.value = v;
+      this._value = this._control.value;
+    }
+
+    get validity() { return this.elementInternals.validity; }
+
+    get validationMessage() { return this.elementInternals.validationMessage; }
+
+    get willValidate() { return this.elementInternals.willValidate; }
+
+    checkValidity() {
+      const validityState = this._control.checkValidity();
+      /** @type {Partial<ValidityState>} */
+      const newValidity = {};
+
+      // eslint-disable-next-line guard-for-in
+      for (const key in this._control.validity) {
+      // @ts-ignore Skip cast
+        newValidity[key] = this._control.validity[key];
+      }
+      this.elementInternals.setValidity(newValidity, this._control.validationMessage);
+      this._invalid = !validityState;
+      this._validationMessage = this._control.validationMessage;
+      this._badInput = this._control.validity.badInput;
+      return validityState;
+    }
+
+    reportValidity() {
+      this.checkValidity();
+      this._control.reportValidity();
+      return this.elementInternals.reportValidity();
+    }
+
+    /**
+     * @param {string} error
+     * @return {void}
+     */
+    setCustomValidity(error) {
+      this._control.setCustomValidity(error);
+      this.checkValidity();
+    }
+
+    get labels() { return this.elementInternals.labels; }
+  }
+  Control.prototype.ariaLabel = Control.prop('ariaLabel');
+  Control.prototype.delegatesFocus = true;
+  Control.prototype.focusableOnDisabled = false;
+
+  return Control;
+}

package/mixins/DensityMixin.css

@@ -0,0 +1,40 @@
+:host {
+  --mdw-density: var(--mdw-density__default, 0);
+}
+
+/* Reset */
+:host([density]) {
+  --mdw-density: 0;
+}
+
+:host([density="-1"]) {
+  --mdw-density: -1;
+}
+
+:host([density="-2"]) {
+  --mdw-density: -2;
+}
+
+:host([density="-3"]) {
+  --mdw-density: -2;
+}
+
+:host([density="-4"]) {
+  --mdw-density: -4;
+}
+
+:host([density="1"]) {
+  --mdw-density: 1;
+}
+
+:host([density="2"]) {
+  --mdw-density: 2;
+}
+
+:host([density="3"]) {
+  --mdw-density: 3;
+}
+
+:host([density="4"]) {
+  --mdw-density: 3;
+}

package/mixins/DensityMixin.js

@@ -0,0 +1,11 @@
+import styles from './DensityMixin.css' assert {type: 'css'};
+
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function DensityMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      density: 'integer',
+    })
+    .css(styles);
+}

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