@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/core/template.js

@@ -0,0 +1,121 @@
+import { generateUID } from './identify.js';
+
+/**
+ * Property are bound to an ID+Node
+ * Values are either getter or via an function
+ * @template {any} T
+ * @typedef {Object} InlineFunctionEntry
+ * @prop {(data:T) => any} fn
+ * @prop {Set<keyof T & string>} [props]
+ * @prop {T} [defaultValue]
+ */
+
+/** @type {Document} */
+let _inactiveDocument;
+
+/** @type {boolean} */
+let _cssStyleSheetConstructable;
+
+/**
+ * @param {string} [fromString]
+ * @return {DocumentFragment}
+ */
+export function generateFragment(fromString) {
+  _inactiveDocument ??= document.implementation.createHTMLDocument();
+  if (fromString == null) {
+    return _inactiveDocument.createDocumentFragment();
+  }
+  return _inactiveDocument.createRange().createContextualFragment(fromString);
+}
+
+/** @type {Map<string, InlineFunctionEntry<?>>} */
+export const inlineFunctions = new Map();
+
+/**
+ * @template T
+ * @typedef {Object} RenderOptions
+ * @prop {Object} context
+ * @prop {ParentNode} root
+ * @prop {Object<string, HTMLElement>} refs
+ */
+
+/**
+ * @param {(data: Partial<any>) => any} fn
+ * @return {string}
+ */
+export function addInlineFunction(fn) {
+  const internalName = `#${generateUID()}`;
+  inlineFunctions.set(internalName, { fn });
+  return `{${internalName}}`;
+}
+
+/**
+ * @param {TemplateStringsArray} array
+ * @param  {...(string)} substitutions
+ * @return {HTMLStyleElement|CSSStyleSheet}
+ */
+export function css(array, ...substitutions) {
+  const content = String.raw({ raw: array }, ...substitutions);
+  if (_cssStyleSheetConstructable == null) {
+    try {
+      const sheet = new CSSStyleSheet();
+      _cssStyleSheetConstructable = true;
+      sheet.replaceSync(content);
+      return sheet;
+    } catch {
+      _cssStyleSheetConstructable = false;
+    }
+  }
+  if (_cssStyleSheetConstructable) {
+    const sheet = new CSSStyleSheet();
+    _cssStyleSheetConstructable = true;
+    sheet.replaceSync(content);
+    return sheet;
+  }
+
+  _inactiveDocument ??= document.implementation.createHTMLDocument();
+  const style = _inactiveDocument.createElement('style');
+  style.textContent = content;
+  return style;
+}
+
+/**
+ * @template T1
+ * @template T2
+ * @param {TemplateStringsArray} strings
+ * @param  {...(string|DocumentFragment|Element|((this:T1, data:T2) => any))} substitutions
+ * @return {DocumentFragment}
+ */
+export function html(strings, ...substitutions) {
+  /** @type {Map<string, DocumentFragment|Element>} */
+  let tempSlots;
+  const replacements = substitutions.map((sub) => {
+    switch (typeof sub) {
+      case 'string': return sub;
+      case 'function': return addInlineFunction(sub);
+      case 'object': {
+        if (sub == null) {
+          console.warn(sub, 'is null', strings);
+          return '';
+        }
+        // Assume Element
+        const tempId = generateUID();
+        tempSlots ??= new Map();
+        tempSlots.set(tempId, sub);
+        return `<div id="${tempId}"></div>`;
+      }
+      default:
+        throw new Error(`Unexpected substitution: ${sub}`);
+    }
+  });
+  const compiledString = String.raw({ raw: strings }, ...replacements);
+  const fragment = generateFragment(compiledString);
+  if (tempSlots) {
+    for (const [id, element] of tempSlots) {
+      const slot = fragment.getElementById(id);
+      slot.replaceWith(element);
+    }
+  }
+
+  return fragment;
+}

package/core/typings.d.ts

@@ -0,0 +1,135 @@
+type ObserverPropertyType = 'string' | 'boolean' | 'map' | 'set' | 'float' | 'integer' | 'object' | 'function';
+
+type InlineTemplate<T1, T2=T1> = (fn: (this:T1, data: T2) => any) => string;
+
+type HTMLTemplater<T1, T2=T1> = ((
+  string: TemplateStringsArray, ...substitutions: (string|DocumentFragment|Element|((this:T1, data:T2) => any))[]
+) => DocumentFragment);
+
+type ParsedObserverPropertyType<T extends ObserverPropertyType> =
+  T extends 'boolean' ? boolean
+  : T extends 'string' ? string
+  : T extends 'float' | 'integer' ? number
+  : T extends 'object' ? any
+  : T extends 'function' ? (...args:any) => any
+  : unknown;
+
+type ObserverOptions<
+  T1 extends ObserverPropertyType,
+  T2 = any,
+  C extends object = any
+  > = {
+  type?: T1;
+  attr?: string;
+
+  /** Default true */
+  readonly?: boolean
+  enumerable?: boolean;
+
+  /** Defaults to false if type is boolean */
+  nullable?: boolean;
+
+  /** Empty value when not nullable */
+  empty?: T2;
+  /** Initial value (empty value if not specified) */
+  value?: T2;
+  values?: WeakMap<C, T2>;
+  reflect?: boolean | 'write' | 'read';
+  /** Function used when null passed */
+  changedCallback?: (this:C, oldValue:T2, newValue:T2, changes:any)=>any;
+  nullParser?: (this:C, value:null|undefined)=>T2;
+  parser?: (this:C, value:any)=>T2;
+  /** Function used when comparing */
+  diff?: (this:C, a:T2, b:T2)=> any,
+  is?: (this:C, a:T2, b:T2)=>boolean
+  get?: (this:C, data:Partial<C>, fn?: () => T2) => T2
+  set?: (this:C, value: T2, fn?:(value2: T2) => any) => any,
+  attributeChangedCallback?: (this:C, name:string, oldValue: string, newValue: string) => any;
+  propChangedCallback?: (this:C, name:string, oldValue: T2, newValue: T2, changes:any) => any;
+  validValues?: WeakMap<C, T2>;
+  watchers?: [keyof C, (this:C, ...args:any[]) => any][];
+}
+
+type ObserverConfiguration<
+  T1 extends ObserverPropertyType,
+  T2 = any,
+  K = string,
+  C extends object = any> = ObserverOptions<T1, T2, C> & {
+    key: K,
+    values?: WeakMap<C, T2>;
+    attrValues?: WeakMap<C, string>;
+  };
+
+type ParsedProps<T> = {
+  [P in keyof T]:
+    T[P] extends (...args:any[]) => infer T2 ? T2
+      : T[P] extends ObserverPropertyType
+      ? ParsedObserverPropertyType<T[P]>
+      : T[P] extends {type: ObserverPropertyType}
+      ? ParsedObserverPropertyType<T[P]['type']>
+      : T[P] extends ObserverOptions<null, infer T2>
+      ? unknown extends T2 ? string : T2
+      : never
+};
+
+type HTMLElementCancellableEventMap = Pick<HTMLElementEventMap,
+  'auxclick' |
+  'beforeinput' |
+  // 'cancel' |
+  'click' |
+  'compositionstart' |
+  'contextmenu' |
+  'drag' |
+  'dragenter' |
+  'dragover' |
+  'dragstart' |
+  'drop' |
+  'invalid' |
+  'keydown' |
+  'keypress' |
+  'keyup' |
+  'mousedown' |
+  'mousemove' |
+  'mouseout' |
+  'mouseover' |
+  'mouseup' |
+  'pointerdown' |
+  'pointermove' |
+  'pointerout' |
+  'pointerover' |
+  'pointerup' |
+  'reset' |
+  'selectstart' |
+  'submit' |
+  'touchend' |
+  'touchmove' |
+  'touchstart' |
+  'wheel'
+  >
+
+type CompositionEventMap = HTMLElementEventMap & {
+  [P in keyof HTMLElementCancellableEventMap as `~${P}`]: Omit<HTMLElementCancellableEventMap[P], 'preventDefault'>
+};
+
+type CompositionEventListener<T, K = keyof CompositionEventMap> = {
+  type?: K
+  id?: string,
+  capture?: boolean;
+  once?: boolean;
+  passive?: boolean;
+  signal?: AbortSignal;
+  handleEvent?: (
+      this: T,
+      event: (K extends keyof CompositionEventMap ? CompositionEventMap[K] : Event) & {currentTarget:HTMLElement}
+    ) => any;
+  prop?: keyof T & string;
+ };
+
+type CompositionEventListenerObject<T> =
+  {
+    [P in keyof CompositionEventMap]?: (keyof T & string)
+      | ((this: T, event: CompositionEventMap[P] & {currentTarget:HTMLElement}) => any)
+      | CompositionEventListener<T, P>
+  };
+
+export type dummyObject = {};

package/core/typings.js

@@ -0,0 +1 @@
+export {};

package/mixins/AriaReflectorMixin.js

@@ -0,0 +1,42 @@
+import { attrNameFromPropName } from '../core/dom.js';
+
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function AriaReflectorMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      _ariaRole: 'string',
+    }).methods({
+      /**
+       * @param {keyof HTMLElement & keyof ElementInternals} name
+       * @param {string} value
+       */
+      updateAriaProperty(name, value) {
+        if (this.elementInternals && name in this.elementInternals) {
+          this.elementInternals[name] = value;
+        } else if (name in this) {
+          this[name] = value;
+        } else {
+          console.warn('Unknown ARIA property', name);
+          /** @type {string} */
+          let attrName = name;
+          if (attrName.startsWith('aria')) {
+            attrName = `aria-${attrName.slice(4).toLowerCase()}`;
+          }
+          if (value == null) {
+            this.removeAttribute(name);
+          } else {
+            this.setAttribute(attrName, value);
+          }
+        }
+      },
+    })
+    .on({
+      _ariaRoleChanged(oldValue, newValue) {
+        this.updateAriaProperty('role', newValue);
+      },
+      constructed() {
+        this.updateAriaProperty('role', this._ariaRole);
+      },
+    });
+}

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