@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/ListSelect.js

@@ -1,220 +0,0 @@
-import { constructHTMLOptionsCollectionProxy } from '../dom/HTMLOptionsCollectionProxy.js';
-import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
-import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
-import StateMixin from '../mixins/StateMixin.js';
-
-import List from './List.js';
-import ListOption from './ListOption.js';
-
-/** @implements {HTMLSelectElement} */
-export default class ListSelect extends List
-  .mixin(StateMixin)
-  .mixin(FormAssociatedMixin)
-  .mixin(KeyboardNavMixin) {
-  static {
-    this.autoRegister('mdw-list-select');
-    // eslint-disable-next-line no-unused-expressions
-    this.css`
-      :host(:disabled) {
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-      
-      :host([internals-disabled]) {
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-    `;
-    this.on({
-      disabledStateChanged(oldValue, newValue) {
-        this._kbdFocusable = !newValue;
-        this.tabIndex = newValue ? -1 : 0;
-      },
-      multipleChanged(oldValue, newValue) {
-        this.updateAriaProperty('ariaMultiSelectable', newValue ? 'true' : 'false');
-      },
-    });
-  }
-
-  /** @type {HTMLCollectionOf<ListOption> & HTMLOptionsCollection} */
-  _optionsCollection = null;
-
-  constructor() {
-    super();
-    this.refs.slot.addEventListener('slotchange', this.onSlotChange);
-    this.addEventListener('keydown', this.onControlKeydown);
-    this.addEventListener('click', this.onListSelectClick);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute('tabindex')) {
-      this.tabIndex = 0;
-    }
-  }
-
-  * _selectedOptionsGenerator() {
-    for (const el of this.options) {
-      if (!el.selected) continue;
-      yield el;
-    }
-  }
-
-  /**
-   * @param {Event} event
-   * @this {HTMLSlotElement}
-   * @return {void}
-   */
-  onSlotChange(event) {
-    /** @type {{host:ListSelect}} */ // @ts-ignore Coerce
-    const { host } = this.getRootNode();
-    host.refreshTabIndexes();
-    let index = 0;
-    for (const el of host.options) {
-      el._index = index++;
-    }
-  }
-
-  /**
-   * @param {KeyboardEvent} event
-   * @this {ListSelect}
-   * @return {void}
-   */
-  onControlKeydown(event) {
-    if (event.key === 'Spacebar' || event.key === ' ') {
-      const target = event.target;
-      if (!(target instanceof ListOption)) return;
-      event.stopPropagation();
-      event.preventDefault();
-      this.onListSelectClick.call(this, event);
-    }
-  }
-
-  /**
-   * @param {MouseEvent|KeyboardEvent} event
-   * @this {ListSelect}
-   * @return {void}
-   */
-  onListSelectClick(event) {
-    console.log('onListSelectClick');
-    const target = event.target;
-    if (!(target instanceof ListOption)) return;
-    event.stopPropagation();
-    if (target.disabledState) return;
-
-    // Perform unselect
-    if (target.selected) {
-      if (this.multiple) {
-        const selections = [...this.selectedOptions];
-        if (this.required && selections.length === 1) return;
-        if (selections.length === 0) {
-          console.warn('impossible??');
-        }
-        target.selected = false;
-        let firstSelection = selections.shift();
-        if (firstSelection === target) {
-          // Get new first selection (or undefined)
-          firstSelection = selections.shift();
-        }
-        this._value = firstSelection?.value ?? '';
-        return;
-      }
-      if (this.required) return;
-      target.selected = false;
-      this._value = '';
-      return;
-    }
-
-    if (this.multiple) {
-      // Skip ctrlKey requirement
-      target.selected = true;
-      this._value = this.selectedOptions.next().value;
-      return;
-    }
-
-    for (const el of this.options) {
-      el.selected = el === target;
-    }
-    this._value = target.value;
-  }
-
-  formResetCallback() {
-    // TODO: Reset dirty on options
-    super.formResetCallback();
-  }
-
-  get options() {
-    if (!this._optionsCollection) {
-      this._optionsCollection = constructHTMLOptionsCollectionProxy({
-        host: this,
-        collection: this.getElementsByTagName(ListOption.elementName),
-        OptionConstructor: ListOption,
-        GroupConstructor: ListOption,
-      });
-    }
-    return this._optionsCollection;
-  }
-
-  get selectedOptions() {
-    return this._selectedOptionsGenerator();
-  }
-
-  // @ts-ignore @override
-  get type() { return 'select'; }
-
-  /** @override */
-  get kbdNavQuery() { return ListOption.elementName; }
-
-  // @ts-ignore @override
-  get length() {
-    return this.options.length;
-  }
-
-  get selectedIndex() {
-    return this.options.selectedIndex;
-  }
-
-  set selectedIndex(value) {
-    this.options.selectedIndex = value;
-    this._value = (this.options.item(value)?.value) ?? '';
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  /** @param {string} v */
-  set value(v) {
-    for (const el of this.options) {
-      el.selected = (el.value === v);
-    }
-    this._value = v;
-  }
-
-  get add() { return this.options.add; }
-
-  get item() { return this.options.item; }
-
-  get namedItem() { return this.options.namedItem; }
-
-  * [Symbol.iterator]() {
-    for (const el of this.options) {
-      yield el;
-    }
-  }
-
-  get kbdNavFocusableWhenDisabled() { return true; }
-}
-
-// https://html.spec.whatwg.org/multipage/form-elements.html#htmlselectelement
-
-// [CEReactions] attribute DOMString autocomplete;
-// ListSelect.prototype.disabled = ListSelect.prop('disabled', { type: 'boolean' });
-// readonly attribute HTMLFormElement? form;
-ListSelect.prototype.multiple = ListSelect.prop('multiple', { type: 'boolean' });
-// [CEReactions] attribute boolean multiple;
-// [CEReactions] attribute DOMString name;
-// [CEReactions] attribute boolean required;
-ListSelect.prototype.size = ListSelect.prop('size', { type: 'integer', empty: 0 });
-ListSelect.prototype._ariaRole = 'listbox';
-ListSelect.prototype.delegatesFocus = true;

package/components/Nav.js

@@ -1,40 +0,0 @@
-import NavItem from './NavItem.js';
-import Surface from './Surface.js';
-
-export default Surface
-  .extend()
-  .css`
-    /* https://m3.material.io/components/navigation-bar/specs */
-    /* https://m3.material.io/components/navigation-drawer/specs */
-    /* https://m3.material.io/components/navigation-rail/specs */
-
-    :host {
-      --mdw-surface__tint: var(--mdw-surface__tint__2);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-      --mdw-ink: var(--mdw-color__on-surface);
-      --mdw-bg: var(--mdw-color__surface);
-
-      z-index:2;
-
-      color: rgb(var(--mdw-ink));
-
-      font: var(--mdw-typescale__label-medium__font);
-      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
-    }
-  `
-  .set({
-    elevated: true,
-    color: 'surface',
-  })
-  .events({
-    '~click'(event) {
-      // Abort if not child
-      if (event.target === this) return;
-      if (event.target instanceof NavItem === false) return;
-      for (const el of this.querySelectorAll('*')) {
-        if (el instanceof NavItem === false) continue;
-        el.active = (el === event.target);
-      }
-    },
-  })
-  .autoRegister('mdw-nav');

package/components/Option.js

@@ -1,91 +0,0 @@
-// https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
-
-import MenuItem from './MenuItem.js';
-
-// https://html.spec.whatwg.org/multipage/form-elements.html#htmloptionelement
-
-/** @implements {HTMLOptionElement} */
-export default class Option extends MenuItem
-  .extend()
-  .set({
-    disabled: undefined, // Remove observer
-    _index: -1,
-  })
-  .observe({
-    // ListOption.prototype._form = ListOption.prop('_form');
-    _label: { attr: 'label', nullParser: String },
-    defaultSelected: { attr: 'selected', type: 'boolean' },
-    _selected: 'boolean',
-    _value: { attr: 'value', reflect: true },
-  })
-  .define({
-    index() { return this._index; },
-    form() { return /** @type {import('./ListSelect.js').default} */ (this.parentElement)?.form; },
-
-    label: {
-      get() { return this._label; },
-      /** @param {string} value */
-      set(value) {
-        this._label = value;
-      },
-    },
-    value: {
-      get() { return this._value || this.text; },
-      /** @param {string} value */
-      set(value) { this._label = value; },
-    },
-    selected: {
-      get() { return this._selected; },
-      /** @param {boolean} value */
-      set(value) { this._selected = value; },
-    },
-    disabled: {
-      get() {
-        return this.getAttribute('aria-disabled') === 'true' || this._disabled;
-      },
-      /** @param {boolean} value */
-      set(value) {
-        this._disabled = value;
-      },
-    },
-
-  })
-  .on('composed', ({ $ }) => {
-    // $('#state').setAttribute('state-disabled', 'focus hover');
-  })
-  .onPropChanged({
-    checkbox(oldValue, newValue) {
-      if (newValue) {
-        this.setAttribute('aria-selected', String(this.hasAttribute('selected')));
-      } else {
-        this.removeAttribute('aria-selected');
-      }
-    },
-    _selected(oldValue, newValue) {
-      this.setAttribute('aria-selected', String(newValue));
-    },
-  }) {
-  static { this.autoRegister('mdw-option'); }
-
-  /**
-   * @param {string} [text]
-   * @param {string} [value]
-   * @param {boolean} [defaultSelected]
-   * @param {boolean} [selected]
-   */
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    if (text !== undefined) {
-      this.text = text;
-    }
-    if (value !== undefined) {
-      this._value = value;
-    }
-    if (defaultSelected !== undefined) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected !== undefined) {
-      this._selected = selected;
-    }
-  }
-}

package/core/ICustomElement.d.ts

@@ -1,291 +0,0 @@
-/* eslint-disable no-use-before-define */
-
-import Composition from './Composition.js';
-import {
-  CompositionEventListener,
-  CompositionEventListenerObject,
-  HTMLTemplater,
-  ObserverOptions,
-  ObserverPropertyType,
-  ParsedObserverPropertyType,
-  ParsedProps,
-} from './typings.js';
-
-type ClassOf<T extends { prototype: unknown; } > = T;
-
-type CallbackArguments<T1 = any, T2 = T1> = {
-  composition: Composition<T1>;
-  html: HTMLTemplater<T1, Partial<T2>>;
-  inline: (fn: (this:T1, data: {[K in keyof T2]?: T2[K]}) => any) => string;
-  template: DocumentFragment;
-  element: T1;
-}
-
-type IDLParameter<C extends object> = {
-  [P in string] :
-    ObserverPropertyType
-    | ObserverOptions<ObserverPropertyType, unknown, C>
-    | ((this:C, data:Partial<C>, fn?: () => any) => any)
-};
-
-type ExtendedClass<T1 extends typeof ICustomElement, T2 extends abstract new (...args: any) => any> =
-  Omit<T1, 'prototype'> & T2;
-
-type ConstructorLess<T1 extends object, T2 extends abstract new (...args: any) => any> = T1 & T2;
-
-declare type DefinedPropertiesOf<T extends ({ prototype: unknown; } & (new (...args: any) => any)), P> =
-  {[K in keyof T]: T[K]}
-  & { new(): (...args: ConstructorParameters<T>) => InstanceType<T> & P}
-  & { prototype: T['prototype'] & P };
-
-type CompositionCallback<T1, T2=T1> = {
-    composed?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    constructed?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    connected?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    disconnected?: (this: T1, options: CallbackArguments<T1, T2>) => any,
-    props?: {
-      [P in keyof T1] : (
-      this: T1,
-      oldValue: T1[P],
-      newValue: T1[P],
-      changes:any,
-      element: T1
-      ) => any
-    },
-    attrs?: {[K in keyof any]: (
-      this: T1,
-      oldValue: string,
-      newValue: string,
-      element: T1
-      ) => unknown
-    },
-  } & {
-    [P in keyof T1 & string as `${P}Changed`]?: (
-      this: T1,
-      oldValue: T1[P],
-      newValue: T1[P],
-      changes:any,
-      element: T1
-      ) => any
-  }
-
-declare interface ICustomElementInstance extends HTMLElement {
-  ariaActiveDescendantElement: Element
-  propChangedCallback<
-    T extends ICustomElementInstance,
-    K extends string = string,
-  >(this:T,
-      name: K,
-      oldValue: K extends keyof T ? T[K] : unknown,
-      newValue: K extends keyof T ? T[K] : unknown,
-      changes?: K extends keyof T ? T[K] extends object ? Partial<T[K]> : T[K] : unknown): void;
-
-}
-
-interface ConstructorOf<T> {
-  new(): T;
-}
-
-export declare const ICustomElement: {
-  new(): ICustomElementInstance;
-  prototype: ICustomElementInstance;
-
-  _onComposeCallbacks: ((callback: CallbackArguments) => any)[];
-
-  _onConnectedCallbacks: ((callback: CallbackArguments) => any)[];
-
-  _onDisconnectedCallbacks: ((callback: CallbackArguments) => any)[];
-
-  _onConstructedCallbacks: ((callback: CallbackArguments) => any)[];
-
-  schema: Record<string, unknown>;
-
-  extend<T extends typeof ICustomElement>(this: T): T;
-
-  tsClassFix<T extends typeof ICustomElement>(this:T): T & (new (...args:any[]) => InstanceType<T>)
-
-  html<T extends typeof ICustomElement>(
-    this: T,
-    string: TemplateStringsArray,
-    // eslint-disable-next-line no-shadow
-    ...substitutions: (string|Element|((this:InstanceType<T>, data:InstanceType<T> & T['schema']) => any))[]
-    ): T
-
-  css<
-    T1 extends typeof ICustomElement,
-    T2 extends TemplateStringsArray|HTMLStyleElement|CSSStyleSheet>(
-    this: T1,
-    array: T2,
-    ...rest: T2 extends TemplateStringsArray ? string[] : (HTMLStyleElement|CSSStyleSheet)[]
-  ): T1
-
-  define<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends {
-        [P in keyof any] :
-          {
-            enumerable?: boolean;
-            configurable?: boolean;
-            writable?: boolean;
-            value?: any;
-            get?: ((this: INSTANCE) => any);
-            set?: (this: INSTANCE, value: any) => void;
-          } | ((this: INSTANCE, ...args:any[]) => any)
-      },
-    VALUE extends {
-      [KEY in keyof PROPS]: PROPS[KEY] extends (...args2:any[]) => infer R ? R
-        : PROPS[KEY] extends TypedPropertyDescriptor<infer R> ? R : never
-    }>
-    (this: CLASS, props: PROPS & ThisType<PROPS & INSTANCE>): CLASS
-      & (new (...args: ARGS) => INSTANCE & VALUE)
-
-  observe<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends IDLParameter<INSTANCE>,
-    VALUE extends {
-      [KEY in keyof PROPS]:
-      PROPS[KEY] extends (...args2:any[]) => infer R ? R
-          : PROPS[KEY] extends ObserverPropertyType ? ParsedObserverPropertyType<PROPS[KEY]>
-          : PROPS[KEY] extends {type: 'object'} & ObserverOptions<any, infer R> ? (unknown extends R ? object : R)
-          : PROPS[KEY] extends {type: ObserverPropertyType} ? ParsedObserverPropertyType<PROPS[KEY]['type']>
-          : PROPS[KEY] extends ObserverOptions<any, infer R> ? (unknown extends R ? string : R)
-          : never
-    },
-    > (this: CLASS, props: PROPS)
-      : CLASS & (new (...args: ARGS) => INSTANCE & VALUE)
-
-  props: typeof ICustomElement.observe;
-
-  set<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends object>
-    (this: CLASS, source: PROPS & ThisType<PROPS & INSTANCE>, options?: Partial<PropertyDescriptor>)
-    : CLASS & (new(...args: ARGS) => INSTANCE & PROPS)
-
-  methods: typeof ICustomElement.set;
-
-  overrides<
-  CLASS extends typeof ICustomElement,
-  ARGS extends ConstructorParameters<CLASS>,
-  INSTANCE extends InstanceType<CLASS>,
-  PROPS extends Partial<INSTANCE>>
-  (this: CLASS, source: PROPS & ThisType<PROPS & INSTANCE>, options?: Partial<PropertyDescriptor>)
-  : CLASS & (new(...args: ARGS) => INSTANCE & PROPS)
-
-  expressions<
-    CLASS extends typeof ICustomElement,
-    ARGS extends ConstructorParameters<CLASS>,
-    INSTANCE extends InstanceType<CLASS>,
-    PROPS extends {
-      [K in keyof any]: ((this: INSTANCE, data?: INSTANCE & CLASS['schema']) => string|boolean|null)
-    }
-    >(this: CLASS, expressions: PROPS & ThisType<INSTANCE & PROPS>):
-    CLASS & (new (...args: ARGS) => INSTANCE & PROPS)
-
-  defineStatic<
-    T1 extends typeof ICustomElement,
-    T2 extends IDLParameter<T1>>
-    (this: T1, props: T2):T1 & ParsedProps<T2>;
-
-  setStatic<
-    T1 extends typeof ICustomElement,
-    T2 extends {
-      [K in keyof any]: (
-        ((this:T1, ...args:any[]) => any)
-        |string|number|boolean|any[]|object)}
-    >
-    (this: T1, source: T2 & ThisType<T1 & T2>):T1 & T2;
-
-  autoRegister<T extends typeof ICustomElement>
-    (this: T, elementName: string): T;
-
-  setSchema<
-    T1 extends typeof ICustomElement,
-    T2 extends {[K in keyof any]: unknown}
-    >
-    (this: T1, schema: T2): T1 & {schema: T2};
-
-  register<T extends typeof ICustomElement>
-    (this: T, elementName?: string, force?: boolean): T;
-
-  append<
-    T extends typeof ICustomElement,
-    >
-    (this: T, ...parts: ConstructorParameters<typeof Composition<InstanceType<T>>>): T;
-
-  mixin<
-    BASE extends typeof ICustomElement,
-    FN extends (...args:any[]) => any,
-    RETURN extends ReturnType<FN>,
-    SUBCLASS extends ClassOf<RETURN>,
-    ARGS extends ConstructorParameters<SUBCLASS>,
-    BASE_INSTANCE extends InstanceType<BASE>,
-    SUBCLASS_INSTANCE extends InstanceType<SUBCLASS>>
-    (this: BASE, mixin: FN): SUBCLASS & BASE
-      & (new (...args: ARGS) => SUBCLASS_INSTANCE & BASE_INSTANCE)
-
-  events<T extends typeof ICustomElement>
-    (
-      this: T,
-      listeners?: CompositionEventListenerObject<InstanceType<T>>,
-      options?: Partial<CompositionEventListener<InstanceType<T>>>,
-    ): T;
-
-  childEvents<T extends typeof ICustomElement>
-    (
-      this: T,
-      listenerMap: {
-        [P in keyof any]: CompositionEventListenerObject<InstanceType<T>>
-      },
-      options?: Partial<CompositionEventListener<InstanceType<T>>>,
-    ): T;
-
-  on<
-    T1 extends typeof ICustomElement,
-    T2 extends InstanceType<T1>,
-    T3 extends CompositionCallback<T2, T2 & T1['schema']>,
-    T4 extends keyof T3,
-    >
-    (this: T1, name: T3|T4, callbacks?: T3[T4] & ThisType<T2>): T1
-
-  onPropChanged<
-    T1 extends typeof ICustomElement,
-    T2 extends InstanceType<T1>
-    >
-    (
-      this: T1,
-      options: {
-        [P in keyof T2]? : (
-        // eslint-disable-next-line no-shadow
-        this: T2,
-        oldValue: T2[P],
-        newValue: T2[P],
-        changes:any,
-        element: T2
-        ) => void
-      },
-    ): T1;
-
-  onAttributeChanged<
-    T1 extends typeof ICustomElement,
-    T2 extends InstanceType<T1>
-    >
-    (
-      this: T1,
-      options: {
-        [x:string]: (
-        // eslint-disable-next-line no-shadow
-        this: T2,
-        oldValue: string,
-        newValue: string,
-        element: T2
-        ) => void
-      },
-    ): T1;
-};

package/core/ICustomElement.js

@@ -1 +0,0 @@
-export class ICustomElement extends HTMLElement {}

package/core/identify.js

@@ -1,40 +0,0 @@
-const PREFIX = '_mdw-';
-
-/** @type {Set<string>} */
-const generatedUIDs = new Set();
-
-/** @return {string} */
-export function generateUID() {
-  const id = Math.random().toString(36).slice(2, 10);
-  if (generatedUIDs.has(id)) {
-    return generateUID();
-  }
-  generatedUIDs.add(id);
-  return id;
-}
-
-/**
- * @param {Element} element
- * @param {boolean} [mutate=false]
- * @return {string}
- */
-export function identifierFromElement(element, mutate) {
-  if (element.id) {
-    return element.id;
-  }
-  if (!mutate) {
-    return null;
-  }
-  const id = PREFIX + generateUID();
-  element.id = id;
-  return id;
-}
-
-/**
- * @param {string} identifier
- * @param {Element} element
- * @return {boolean}
- */
-export function identifierMatchesElement(identifier, element) {
-  return element.id === identifier;
-}