@shortfuse/materialdesignweb 0.7.2 → 0.7.4

package/components/ListSelect.js

@@ -1,4 +1,4 @@
-import { constructHTMLOptionsCollectionProxy } from '../dom/ HTMLOptionsCollectionProxy.js';
+import { constructHTMLOptionsCollectionProxy } from '../dom/HTMLOptionsCollectionProxy.js';
 import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
 import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
 import StateMixin from '../mixins/StateMixin.js';

package/components/Select.js

@@ -4,20 +4,20 @@ import StateMixin from '../mixins/StateMixin.js';
 import TextFieldMixin from '../mixins/TextFieldMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-
 /* @implements {HTMLSelectElement} */
-
-export default class Select extends CustomElement
+export default CustomElement
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(ControlMixin)
   .mixin(TextFieldMixin)
   .extend()
   .observe({
-    autocomplete: 'string',
-    trailingIcon: {
-      empty: 'arrow_drop_down',
-    },
+    trailingIcon: { empty: 'arrow_drop_down' },
+  })
+  .overrides({
+    controlTagName: 'select',
+    controlVoidElement: false,
+    type: 'select-one',
   })
   .define({
     _select() {
@@ -26,7 +26,6 @@ export default class Select extends CustomElement
     /** Readonly values */
     multiple: { value: false },
     size: { value: 1 },
-    type: { value: 'select-one' },
   })
   .html/* html */`<slot id=slot></slot>`
   .childEvents({
@@ -50,6 +49,10 @@ export default class Select extends CustomElement
       prefix.remove();
       suffix.remove();
     },
+    _formResetChanged(oldValue, newValue) {
+      if (!newValue) return;
+      this._select.value = this.querySelector('option[selected]')?.value ?? '';
+    },
   })
   .css`
     #slot {
@@ -105,19 +108,4 @@ export default class Select extends CustomElement
       letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
     }
   `
-  .setStatic({
-    controlTagName: 'select',
-    controlVoidElement: false,
-  })
-  .autoRegister('mdw-select') {
-  /* Overrides */
-  static clonedContentAttributes = [
-    ...super.clonedContentAttributes,
-    'autocomplete', // Hint for form autofill feature
-  ];
-
-  formResetCallback() {
-    this._select.value = this.querySelector('option[selected]')?.value ?? '';
-    super.formResetCallback();
-  }
-}
+  .autoRegister('mdw-select');

package/components/Slider.js

@@ -207,7 +207,7 @@ export default CustomElement
       --mdw-ink: var(--mdw-color__on-primary);
       --mdw-bg: var(--mdw-color__primary);
 
-      display: inline-block;
+      display: block;
       vertical-align: middle;
 
       min-block-size: 40px;

package/components/TextArea.js

@@ -1,22 +1,218 @@
-import CustomElement from '../core/CustomElement.js';
+import CustomElement, { cloneAttributeCallback } from '../core/CustomElement.js';
 import ControlMixin from '../mixins/ControlMixin.js';
 import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import TextFieldMixin from '../mixins/TextFieldMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-/** @implements {HTMLTextAreaElement} */
-export default class TextArea extends CustomElement
+const DOMString = { nullParser: String, value: '' };
+
+/**
+ * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
+ * -implements {HTMLTextAreaElement}
+ */
+export default CustomElement
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(ControlMixin)
   .mixin(TextFieldMixin)
-  .mixin(ResizeObserverMixin) {
-  static { this.autoRegister('mdw-textarea'); }
+  .mixin(ResizeObserverMixin)
+  .extend()
+  .set({
+    supportsCSSLineHeightUnit: CSS.supports('height', '1lh'),
+    type: 'textarea',
+  })
+  .overrides({
+    controlTagName: 'textarea',
+    controlVoidElement: false,
+  })
+  .observe({
+    fixed: { type: 'boolean' },
+    minRows: { attr: 'minrows', type: 'integer', nullable: false },
+    maxRows: { attr: 'maxrows', type: 'integer', nullable: false },
+    _lineHeight: 'string',
+    cols: { type: 'integer', empty: 0 },
+    dirName: { attr: 'dirname', ...DOMString },
+    maxLength: { attr: 'maxlength', type: 'integer', empty: 0 },
+    minLength: { attr: 'minlength', type: 'integer', empty: 0 },
+    placeholder: DOMString,
+    rows: { type: 'integer', empty: 1 },
+    wrap: DOMString,
+    // Not in spec, but plays nice with HTML linters
+    defaultValueAttr: { attr: 'value', ...DOMString },
+  })
+  .define({
+    _textarea() { return /** @type {HTMLTextAreaElement} */ (this.refs.control); },
+  })
+  .define({
+    defaultValue: {
+      get() { return this._textarea.defaultValue; },
+      set(value) {
+        const previousValue = this._textarea.defaultValue;
+        this._textarea.defaultValue = value;
+        const newValue = this._textarea.defaultValue;
+        if (previousValue !== newValue) {
+          this.propChangedCallback('defaultValue', previousValue, newValue);
+        }
+        this.textContent = this._textarea.defaultValue;
+      },
+    },
+    textLength() { return this._textarea.textLength; },
+    select() { return this._textarea.select; },
+
+    selectionDirection: {
+      get() { return this._textarea.selectionDirection; },
+      set(value) { this._textarea.selectionDirection = value; },
+    },
+
+    selectionStart: {
+      get() { return this._textarea.selectionStart; },
+      set(value) { this._textarea.selectionStart = value; },
+    },
+
+    selectionEnd: {
+      get() { return this._textarea.selectionEnd; },
+      set(value) { this._textarea.selectionEnd = value; },
+    },
+
+    setRangeText() { return this._textarea.setRangeText; },
+
+    setSelectionRange() { return this._textarea.setSelectionRange; },
+
+  })
+  .methods({
+
+    /** @return {number} */
+    resize() {
+      const textarea = this._textarea;
+      textarea.style.removeProperty('height');
 
-  static {
-    // eslint-disable-next-line no-unused-expressions
-    this.css`
+      // if (this.placeholder) textarea.removeAttribute('placeholder');
+
+      if (!this.supportsCSSLineHeightUnit) {
+        const { lineHeight } = window.getComputedStyle(textarea);
+        this._lineHeight = lineHeight;
+      }
+
+      if (this.minRows > 1 && textarea.rows < this.minRows) {
+        textarea.rows = this.minRows;
+      } else if (this.maxRows && textarea.rows > this.maxRows) {
+        textarea.rows = this.maxRows;
+      }
+      if (!this.fixed) {
+        while (textarea.scrollHeight > textarea.clientHeight) {
+          if (this.maxRows && textarea.rows === this.maxRows) break;
+          const lastClientHeight = textarea.clientHeight;
+          textarea.rows++;
+          if (lastClientHeight === textarea.clientHeight) {
+            textarea.rows--;
+            break;
+          }
+        }
+        while (textarea.scrollHeight === textarea.clientHeight) {
+          if (textarea.rows === 1) break;
+          if (this.minRows > 1 && textarea.rows === this.minRows) break;
+          const lastClientHeight = textarea.clientHeight;
+          textarea.rows--;
+          if ((lastClientHeight === textarea.clientHeight)
+        || (textarea.scrollHeight > textarea.clientHeight)) {
+            textarea.rows++;
+            break;
+          }
+        }
+      }
+
+      if (textarea.selectionEnd === textarea.value.length) {
+        textarea.scrollTop = textarea.scrollHeight;
+      }
+
+      this.rows = textarea.rows;
+      // if (this.placeholder) textarea.setAttribute('placeholder', this.placeholder);
+      return this.rows;
+    },
+
+    /** @param {ResizeObserverEntry} entry */
+    onResizeObserved(entry) {
+      super.onResizeObserved(entry);
+      if (this.matches(':active')) return;
+      this.resize();
+    },
+  })
+  .childEvents({
+    slot: {
+      /**
+       * @param {Event & {currentTarget:HTMLSlotElement}} event
+       * @return {void}
+       */
+      slotchange({ currentTarget }) {
+        const textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
+        const previousValue = textarea.defaultValue;
+        textarea.replaceChildren(
+          ...currentTarget.assignedNodes().map((child) => child.cloneNode(true)),
+        );
+
+        const newValue = textarea.defaultValue;
+        if (previousValue !== newValue) {
+          this.propChangedCallback('defaultValue', previousValue, newValue);
+        }
+      },
+    },
+    control: {
+      input() {
+        this.resize();
+      },
+    },
+  })
+  .on({
+    composed() {
+      const { control } = this.refs;
+      // Spec
+      control.removeAttribute('placeholder');
+      control.setAttribute('rows', '{rows}');
+
+      // Custom
+      control.setAttribute('input-prefix', '{inputPrefix}');
+      control.setAttribute('input-suffix', '{inputSuffix}');
+      control.setAttribute('minrows', '{minRows}');
+      control.setAttribute('fixed', '{fixed}');
+      control.setAttribute('icon', '{icon}');
+      control.setAttribute('maxrows', '{maxRows}');
+    },
+    defaultValueAttrChanged(oldValue, newValue) {
+      this.defaultValue = newValue;
+    },
+    defaultValueChanged() {
+      this._value = this._textarea.value;
+      this.resize();
+    },
+    _lineHeightChanged(oldValue, newValue) {
+      this.refs.label.style.setProperty('--line-height', newValue);
+    },
+    minRowsChanged(oldValue, newValue) {
+      this.refs.label.style.setProperty('--min-rows', `${newValue || 'none'}`);
+      this.resize();
+    },
+    maxRowsChanged(oldValue, newValue) {
+      this.refs.label.style.setProperty('--max-rows', `${newValue || 'none'}`);
+      this.resize();
+    },
+    rowsChanged() {
+      this.resize();
+    },
+    _formResetChanged(oldValue, newValue) {
+      if (!newValue) return;
+      this._textarea.value = this.defaultValue;
+      this._value = this._textarea.value;
+    },
+    attrs: {
+      cols: cloneAttributeCallback('cols', 'control'),
+      dirname: cloneAttributeCallback('dirname', 'control'),
+      minlength: cloneAttributeCallback('minlength', 'control'),
+      maxlength: cloneAttributeCallback('maxlength', 'control'),
+      placeholder: cloneAttributeCallback('placeholder', 'control'),
+    },
+  })
+  .css`
       /* https://m3.material.io/components/text-fields/specs */
 
       :host {
@@ -110,214 +306,5 @@ export default class TextArea extends CustomElement
         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
         resize: none;
       }
-
-    `;
-    this.childEvents({ slot: { slotchange: 'onSlotChange' } });
-    this.on({
-      composed() {
-        const { control } = this.refs;
-        control.setAttribute('input-prefix', '{input-prefix}');
-        control.setAttribute('input-suffix', '{input-suffix}');
-        control.setAttribute('minrows', '{minrows}');
-        control.setAttribute('fixed', '{fixed}');
-        control.setAttribute('icon', '{icon}');
-        control.setAttribute('maxrows', '{maxrows}');
-      },
-      defaultValueAttrChanged(oldValue, newValue) {
-        this.defaultValue = newValue;
-      },
-      defaultValueChanged() {
-        this._value = this.#textarea.value;
-        this.resize();
-      },
-      _maxHeightChanged(oldValue, newValue) {
-        this.#textarea.style.setProperty('max-height', newValue);
-      },
-      _lineHeightChanged(oldValue, newValue) {
-        this.refs.label.style.setProperty('--line-height', newValue);
-      },
-      minRowsChanged(oldValue, newValue) {
-        this.refs.label.style.setProperty('--min-rows', `${newValue || 'none'}`);
-        this.resize();
-      },
-      maxRowsChanged(oldValue, newValue) {
-        this.refs.label.style.setProperty('--max-rows', `${newValue || 'none'}`);
-        this.resize();
-      },
-      rowsChanged() {
-        this.resize();
-      },
-    });
-  }
-
-  static supportsCSSLineHeightUnit = CSS.supports('height', '1lh');
-
-  static controlTagName = 'textarea';
-
-  static controlVoidElement = false;
-
-  static clonedContentAttributes = [
-    ...super.clonedContentAttributes,
-    'cols',
-    'dirname',
-    'maxlength',
-    'minlength',
-    'placeholder',
-    'rows',
-  ];
-
-  #updatingSlot = false;
-
-  #textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
-
-  static {
-    if (TextArea.supportsCSSLineHeightUnit) {
-      this.childEvents({
-        control: {
-          input() {
-            this.resize();
-          },
-        },
-      });
-    }
-  }
-
-  /**
-   * @param {Event & {currentTarget:HTMLSlotElement}} event
-   * @return {void}
-   */
-  onSlotChange({ currentTarget }) {
-    const textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
-    const previousValue = textarea.defaultValue;
-    textarea.replaceChildren(
-      ...currentTarget.assignedNodes().map((child) => child.cloneNode(true)),
-    );
-
-    const newValue = textarea.defaultValue;
-    if (previousValue !== newValue) {
-      this.propChangedCallback('defaultValue', previousValue, newValue);
-    }
-  }
-
-  /** @return {number} */
-  resize() {
-    const textarea = this.#textarea;
-    textarea.style.removeProperty('height');
-
-    // if (this.placeholder) textarea.removeAttribute('placeholder');
-
-    if (!TextArea.supportsCSSLineHeightUnit) {
-      const { lineHeight } = window.getComputedStyle(textarea);
-      this._lineHeight = lineHeight;
-    }
-
-    if (this.minRows > 1 && textarea.rows < this.minRows) {
-      textarea.rows = this.minRows;
-    } else if (this.maxRows && textarea.rows > this.maxRows) {
-      textarea.rows = this.maxRows;
-    }
-    if (!this.fixed) {
-      while (textarea.scrollHeight > textarea.clientHeight) {
-        if (this.maxRows && textarea.rows === this.maxRows) break;
-        const lastClientHeight = textarea.clientHeight;
-        textarea.rows++;
-        if (lastClientHeight === textarea.clientHeight) {
-          textarea.rows--;
-          break;
-        }
-      }
-      while (textarea.scrollHeight === textarea.clientHeight) {
-        if (textarea.rows === 1) break;
-        if (this.minRows > 1 && textarea.rows === this.minRows) break;
-        const lastClientHeight = textarea.clientHeight;
-        textarea.rows--;
-        if ((lastClientHeight === textarea.clientHeight)
-        || (textarea.scrollHeight > textarea.clientHeight)) {
-          textarea.rows++;
-          break;
-        }
-      }
-    }
-
-    if (textarea.selectionEnd === textarea.value.length) {
-      textarea.scrollTop = textarea.scrollHeight;
-    }
-
-    this.rows = textarea.rows;
-    // if (this.placeholder) textarea.setAttribute('placeholder', this.placeholder);
-    return this.rows;
-  }
-
-  formResetCallback() {
-    this.#textarea.value = this.defaultValue;
-    this._value = this.#textarea.value;
-    super.formResetCallback();
-  }
-
-  get updatingSlot() { return this.#updatingSlot; }
-
-  get defaultValue() {
-    return this.#textarea.defaultValue;
-  }
-
-  set defaultValue(value) {
-    const previousValue = this.#textarea.defaultValue;
-    this.#textarea.defaultValue = value;
-    if (previousValue !== this.#textarea.defaultValue) {
-      this.propChangedCallback('defaultValue', previousValue, this.defaultValue);
-    }
-    this.textContent = this.#textarea.defaultValue;
-  }
-
-  // @ts-ignore @override
-
-  get type() { return 'textarea'; }
-
-  get textLength() { return this.#textarea.textLength; }
-
-  get select() { return this.#textarea.select; }
-
-  get selectionDirection() { return this.#textarea.selectionDirection; }
-
-  set selectionDirection(value) { this.#textarea.selectionDirection = value; }
-
-  get selectionStart() { return this.#textarea.selectionStart; }
-
-  set selectionStart(value) { this.#textarea.selectionStart = value; }
-
-  get selectionEnd() { return this.#textarea.selectionEnd; }
-
-  set selectionEnd(value) { this.#textarea.selectionEnd = value; }
-
-  get setRangeText() { return this.#textarea.setRangeText; }
-
-  get setSelectionRange() { return this.#textarea.setSelectionRange; }
-
-  /** @param {ResizeObserverEntry} entry */
-  onResizeObserved(entry) {
-    super.onResizeObserved(entry);
-    this.resize();
-  }
-}
-
-TextArea.propList.delete('type');
-
-TextArea.prototype._maxHeight = TextArea.prop('_maxHeight');
-TextArea.prototype.fixed = TextArea.prop('fixed', { type: 'boolean' });
-TextArea.prototype.minRows = TextArea.prop('minRows', { attr: 'minrows', type: 'integer', empty: 0 });
-TextArea.prototype.maxRows = TextArea.prop('maxRows', { attr: 'maxrows', type: 'integer', empty: 0 });
-TextArea.prototype._lineHeight = TextArea.prop('_lineHeight');
-
-// https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
-
-const DOMString = { nullParser: String };
-TextArea.prototype.cols = TextArea.prop('cols', { type: 'integer', empty: 0 });
-TextArea.prototype.dirName = TextArea.prop('dirName', { attr: 'dirname', ...DOMString });
-TextArea.prototype.maxLength = TextArea.prop('maxLength', { attr: 'maxlength', type: 'integer', empty: 0 });
-TextArea.prototype.minLength = TextArea.prop('minLength', { attr: 'minlength', type: 'integer', empty: 0 });
-TextArea.prototype.placeholder = TextArea.prop('placeholder', DOMString);
-TextArea.prototype.rows = TextArea.prop('rows', { type: 'integer', empty: 1 });
-TextArea.prototype.wrap = TextArea.prop('wrap', DOMString);
-
-// Not in spec, but plays nice with HTML linters
-TextArea.prototype.defaultValueAttr = TextArea.prop('defaultValueAttr', { attr: 'value', ...DOMString });
+  `
+  .autoRegister('mdw-textarea');

package/core/CustomElement.js

@@ -16,6 +16,22 @@ function superOf(instance) {
   return superOfStatic.prototype;
 }
 
+/**
+ * Clone attribute
+ * @param {string} name
+ * @param {string} target
+ * @return {(oldValue:string, newValue:string, element: CustomElement) => void}
+ */
+export function cloneAttributeCallback(name, target) {
+  return (oldValue, newValue, element) => {
+    if (newValue == null) {
+      element.refs[target].removeAttribute(name);
+    } else {
+      element.refs[target].setAttribute(name, newValue);
+    }
+  };
+}
+
 const EVENT_PREFIX_REGEX = /^([*1~]+)?(.*)$/;
 
 /**
@@ -365,6 +381,7 @@ export default class CustomElement extends ICustomElement {
   /**
    * Define properties on instances via Object.defineProperties().
    * Automatically sets property non-enumerable if name begins with `_`.
+   * Functions will be remapped as getters
    * @type {typeof ICustomElement.define}
    */
   static define(props) {
@@ -546,10 +563,11 @@ export default class CustomElement extends ICustomElement {
   /** @type {typeof ICustomElement['onAttributeChanged']} */
   static onAttributeChanged(options) {
     for (const [name, callback] of Object.entries(options)) {
-      let array = this.attributeChangedCallbacks.get(name);
+      const lcName = name.toLowerCase();
+      let array = this.attributeChangedCallbacks.get(lcName);
       if (!array) {
         array = [];
-        this.attributeChangedCallbacks.set(name, array);
+        this.attributeChangedCallbacks.set(lcName, array);
       }
       array.push(callback);
     }
@@ -608,14 +626,14 @@ export default class CustomElement extends ICustomElement {
 
   /** @type {InstanceType<typeof ICustomElement>['propChangedCallback']} */
   propChangedCallback(name, oldValue, newValue, changes = newValue) {
+    this.render({ [name]: changes });
+
     const callbacks = this.static.propChangedCallbacks.get(name);
     if (callbacks) {
       for (const callback of callbacks) {
         callback.call(this, oldValue, newValue, changes, this);
       }
     }
-
-    this.render({ [name]: changes });
   }
 
   /**
@@ -624,7 +642,7 @@ export default class CustomElement extends ICustomElement {
    * @param {string|null} newValue
    */
   attributeChangedCallback(name, oldValue, newValue) {
-    const callbacks = this.static.attributeChangedCallbacks.get(name);
+    const callbacks = this.static.attributeChangedCallbacks.get(name.toLowerCase());
     if (callbacks) {
       for (const callback of callbacks) {
         callback.call(this, oldValue, newValue, this);

package/core/ICustomElement.d.ts

@@ -272,17 +272,20 @@ export declare const ICustomElement: {
       },
     ): T1;
 
-  onAttributeChanged<T extends typeof ICustomElement>
+  onAttributeChanged<
+    T1 extends typeof ICustomElement,
+    T2 extends InstanceType<T1>
+    >
     (
-      this: T,
+      this: T1,
       options: {
         [x:string]: (
         // eslint-disable-next-line no-shadow
-        this: InstanceType<T>,
+        this: T2,
         oldValue: string,
         newValue: string,
-        element: InstanceType<T>
+        element: T2
         ) => void
       },
-    ): T;
+    ): T1;
 };