@aurelia-mdc-web/all 9.2.3-au2 → 9.3.1-au2

package/src/select/mdc-select-helper-text/mdc-select-helper-text.ts

@@ -0,0 +1,55 @@
+import { MdcComponent, booleanAttr } from '../../base';
+import { helperTextCssClasses, MDCSelectHelperTextFoundation, MDCSelectHelperTextAdapter } from '@material/select';
+import { customElement, inject, bindable } from 'aurelia';
+import template from './mdc-select-helper-text.html?raw';
+
+export const mdcHelperTextCssClasses = {
+  ROOT: 'mdc-select-helper-text'
+};
+
+@inject(Element)
+@customElement({ name: 'mdc-select-helper-text', template })
+export class MdcSelectHelperText extends MdcComponent<MDCSelectHelperTextFoundation> {
+  helperTextCssClasses = helperTextCssClasses;
+  ROOT = mdcHelperTextCssClasses.ROOT;
+
+  @bindable({ set: booleanAttr })
+  persistent: boolean;
+
+  @bindable({ set: booleanAttr })
+  validation: boolean;
+
+  @bindable()
+  errors: string[];
+
+  // Provided for access by MDCTextField component
+  get foundationForTextField(): MDCSelectHelperTextFoundation {
+    return this.foundation!;
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCSelectHelperTextAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      getAttr: (attr) => this.root.getAttribute(attr),
+      setAttr: (attr, value) => this.root.setAttribute(attr, value),
+      removeAttr: (attr) => this.root.removeAttribute(attr),
+      setContent: (content) => {
+        this.root.textContent = content;
+      },
+    };
+    return new MDCSelectHelperTextFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcSelectHelperTextElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcSelectHelperText;
+    };
+  };
+}

package/src/select/mdc-select-icon.ts

@@ -0,0 +1,41 @@
+import { MdcComponent } from '../base';
+import { MDCSelectIconFoundation, MDCSelectIconAdapter, strings } from '@material/select';
+import { inject, customAttribute } from 'aurelia';
+
+export const mdcIconStrings = {
+  ATTRIBUTE: 'mdc-select-icon'
+};
+
+@inject(Element)
+@customAttribute(mdcIconStrings.ATTRIBUTE)
+export class MdcSelectIcon extends MdcComponent<MDCSelectIconFoundation> {
+  attaching() {
+    this.root.classList.add(strings.LEADING_ICON_SELECTOR.replace('.', ''));
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCSelectIconAdapter = {
+      getAttr: (attr) => this.root.getAttribute(attr),
+      setAttr: (attr, value) => this.root.setAttribute(attr, value),
+      removeAttr: (attr) => this.root.removeAttribute(attr),
+      setContent: (content) => {
+        this.root.textContent = content;
+      },
+      registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),
+      notifyIconAction: () => this.emit(MDCSelectIconFoundation.strings.ICON_EVENT, {} /* evtData */, true /* shouldBubble */),
+    };
+    return new MDCSelectIconFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcSelectIconElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-attribute:mdc-select-icon': {
+      viewModel: MdcSelectIcon;
+    };
+  };
+}

package/src/select/mdc-select-value-observer.ts

@@ -0,0 +1,346 @@
+import {
+  subscriberCollection,
+  AccessorType,
+} from '@aurelia/runtime';
+
+import type {
+  ICollectionObserver,
+  IndexMap,
+  IObserver,
+  IObserverLocator,
+  ISubscriber,
+  ISubscriberCollection,
+} from '@aurelia/runtime';
+
+import { INode, CustomElement } from '@aurelia/runtime-html';
+import { IMdcSelectElement, MdcSelect } from './mdc-select';
+
+// const hasOwn = Object.prototype.hasOwnProperty;
+const childObserverOptions = {
+  childList: true,
+  subtree: true,
+  characterData: true
+};
+
+// function defaultMatcher(a: unknown, b: unknown): boolean {
+//   return a === b;
+// }
+
+export interface IOptionElement extends HTMLOptionElement {
+  model?: unknown;
+}
+
+export interface MdcSelectValueObserver extends
+  ISubscriberCollection { }
+
+export interface INodeObserverConfigBase {
+  /**
+   * Indicates the list of events can be used to observe a particular property
+   */
+  readonly events: string[];
+  /**
+   * Indicates whether this property is readonly, so observer wont attempt to assign value
+   * example: input.files
+   */
+  readonly readonly?: boolean;
+  /**
+   * A default value to assign to the corresponding property if the incoming value is null/undefined
+   */
+  readonly default?: unknown;
+}
+
+
+export interface INodeObserver extends IObserver {
+  /**
+   * Instruct this node observer event observation behavior
+   */
+  useConfig(config: INodeObserverConfigBase): void;
+}
+
+@subscriberCollection()
+export class MdcSelectValueObserver implements INodeObserver {
+  public currentValue: unknown = void 0;
+  public oldValue: unknown = void 0;
+
+  public readonly obj: IMdcSelectElement;
+  public config: INodeObserverConfigBase;
+
+  public hasChanges: boolean = false;
+  // ObserverType.Layout is not always true
+  // but for simplicity, always treat as such
+  public type: AccessorType = (AccessorType.Node | AccessorType.Observer | AccessorType.Layout) as AccessorType;
+
+  public arrayObserver?: ICollectionObserver<'array'> = void 0;
+  public nodeObserver?: MutationObserver = void 0;
+
+  private observing: boolean = false;
+  private listened: boolean = false;
+
+  public constructor(
+    obj: INode,
+    // deepscan-disable-next-line
+    _key: PropertyKey,
+    config: INodeObserverConfigBase,
+    _: IObserverLocator
+  ) {
+    this.obj = obj as unknown as IMdcSelectElement;
+    this.config = config;
+  }
+
+  optionsWereSet: boolean;
+
+  setElementValue(skipNotify: boolean) {
+    // do not pass the value to the element if options has never been set
+    // the value will be passed on when options do arrive
+    if (this.optionsWereSet) {
+      CustomElement.for<MdcSelect>(this.obj).viewModel.setValue(this.currentValue, skipNotify);
+    }
+  }
+
+  public getValue(): unknown {
+    // is it safe to assume the observer has the latest value?
+    // todo: ability to turn on/off cache based on type
+    return this.observing
+      ? this.currentValue
+      // : this.obj.multiple
+      //   ? Array.from(this.obj.options).map(o => o.value)
+      : this.obj.value;
+  }
+
+  public setValue(newValue: unknown): void {
+    this.currentValue = newValue;
+    this.hasChanges = newValue !== this.oldValue;
+    // this.observeArray(newValue instanceof Array ? newValue : null);
+    if (this.optionsWereSet) {
+      this.flushChanges();
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public flushChanges(): void {
+    if (this.hasChanges) {
+      this.hasChanges = false;
+      this.synchronizeOptions();
+    }
+  }
+
+  public handleCollectionChange(): void {
+    // always sync "selected" property of <options/>
+    // immediately whenever the array notifies its mutation
+    this.synchronizeOptions();
+  }
+
+  public notify(): void {
+    const oldValue = this.oldValue;
+    const newValue = this.currentValue;
+    if (newValue === oldValue) {
+      return;
+    }
+    this.subs.notify(newValue, oldValue);
+  }
+
+  public handleEvent(): void {
+    const shouldNotify = this.synchronizeValue();
+    if (shouldNotify) {
+      this.subs.notify(this.currentValue, this.oldValue);
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public synchronizeOptions(_indexMap?: IndexMap): void {
+    this.setElementValue(true);
+    // const { currentValue, obj } = this;
+    //   // const isArray = Array.isArray(currentValue);
+    //   // const matcher = obj.matcher !== void 0 ? obj.matcher : defaultMatcher;
+    //   // const matcher = defaultMatcher;
+    //   const options = CustomElement.for<MdcSelect>(obj).viewModel.items;
+    //   let i = options.length;
+
+    //   while (i-- > 0) {
+    //     // const option = options[i];
+    //     // const optionValue = hasOwn.call(option, 'model') ? option.model : option.value;
+    //     // const optionValue = option.value;
+    //     // if (isArray) {
+    //     //   option.selected = (currentValue as unknown[]).findIndex(item => !!matcher(optionValue, item)) !== -1;
+    //     //   continue;
+    //     // }
+    //     if (!this.optionsWereSet) {
+    //       this.optionsWereSet = true;
+    //       this.setElementValue(true);
+    //     }
+    //     // option.selected = !!matcher(optionValue, currentValue);
+    //   }
+  }
+
+  public synchronizeValue(): boolean {
+    // Spec for synchronizing value from `<select/>`  to `SelectObserver`
+    // When synchronizing value to observed <select/> element, do the following steps:
+    // A. If `<select/>` is multiple
+    //    1. Check if current value, called `currentValue` is an array
+    //      a. If not an array, return true to signal value has changed
+    //      b. If is an array:
+    //        i. gather all current selected <option/>, in to array called `values`
+    //        ii. loop through the `currentValue` array and remove items that are nolonger selected based on matcher
+    //        iii. loop through the `values` array and add items that are selected based on matcher
+    //        iv. Return false to signal value hasn't changed
+    // B. If the select is single
+    //    1. Let `value` equal the first selected option, if no option selected, then `value` is `null`
+    //    2. assign `this.currentValue` to `this.oldValue`
+    //    3. assign `value` to `this.currentValue`
+    //    4. return `true` to signal value has changed
+    const obj = this.obj;
+    const options = CustomElement.for<MdcSelect>(obj).viewModel.items ?? [];
+    const len = options.length;
+    // const currentValue = this.currentValue;
+    let i = 0;
+
+    /*
+    if (obj.multiple) {
+      // A.
+      if (!(currentValue instanceof Array)) {
+        // A.1.a
+        return true;
+      }
+      // A.1.b
+      // multi select
+      let option: IOptionElement;
+      const matcher = obj.matcher ?? defaultMatcher;
+      // A.1.b.i
+      const values: unknown[] = [];
+      while (i < len) {
+        option = options[i];
+        if (option.selected) {
+          values.push(hasOwn.call(option, 'model')
+            ? option.model
+            : option.value
+          );
+        }
+        ++i;
+      }
+      // A.1.b.ii
+      i = 0;
+      while (i < currentValue.length) {
+        const a = currentValue[i];
+        // Todo: remove arrow fn
+        if (values.findIndex(b => !!matcher(a, b)) === -1) {
+          currentValue.splice(i, 1);
+        } else {
+          ++i;
+        }
+      }
+      // A.1.b.iii
+      i = 0;
+      while (i < values.length) {
+        const a = values[i];
+        // Todo: remove arrow fn
+        if (currentValue.findIndex(b => !!matcher(a, b)) === -1) {
+          currentValue.push(a);
+        }
+        ++i;
+      }
+      // A.1.b.iv
+      return false;
+    }
+    */
+    // B. single select
+    // B.1
+    let value: unknown = null;
+    while (i < len) {
+      const option = options[i];
+      if (option.value === this.obj.value) {
+        // value = hasOwn.call(option, 'model') ? option.model : option.value;
+        value = option.value;
+        break;
+      }
+      ++i;
+    }
+    // B.2
+    this.oldValue = this.currentValue;
+    // B.3
+    this.currentValue = value;
+    // B.4
+    return true;
+  }
+
+  private start(): void {
+    const vm = CustomElement.for<MdcSelect>(this.obj).viewModel;
+    vm.initialised.then(() => {
+      (this.nodeObserver = new this.obj.ownerDocument.defaultView!.MutationObserver(records => this.handleNodeChange(records)))
+        .observe(vm.menu.root, childObserverOptions);
+      // this.observeArray(this.currentValue instanceof Array ? this.currentValue : null);
+      this.observing = true;
+      if (vm.items?.length) {
+        this.optionsWereSet = true;
+        this.synchronizeOptions();
+      }
+    });
+  }
+
+  private stop(): void {
+    this.optionsWereSet = false;
+    this.nodeObserver?.disconnect();
+    this.arrayObserver?.unsubscribe(this);
+    this.nodeObserver
+      = this.arrayObserver
+      = void 0;
+    this.observing = false;
+  }
+
+  // todo: observe all kind of collection
+  // private observeArray(array: unknown[] | null): void {
+  //   this.arrayObserver?.unsubscribe(this);
+  //   this.arrayObserver = void 0;
+  //   if (array !== null) {
+  //     if (!this.obj.multiple) {
+  //       throw new Error('Only null or Array instances can be bound to a multi-select.');
+  //     }
+  //     (this.arrayObserver = this.observerLocator.getArrayObserver(array)).subscribe(this);
+  //   }
+  // }
+
+  public handleNodeChange(records: MutationRecord[]): void {
+    if (records.find(x => x.type === 'childList'
+      && (Array.from(x.addedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM')
+        || Array.from(x.removedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM'))
+    )) {
+      this.optionsWereSet = true;
+      this.synchronizeOptions();
+      const shouldNotify = this.synchronizeValue();
+      if (shouldNotify) {
+        this.notify();
+      }
+    }
+  }
+
+  public subscribe(subscriber: ISubscriber): void {
+    if (this.subs.add(subscriber) && this.subs.count === 1) {
+      for (const e of this.config.events) {
+        this.obj.addEventListener(e, this);
+      }
+      this.listened = true;
+      this.start();
+    }
+  }
+
+  public unsubscribe(subscriber: ISubscriber): void {
+    if (this.subs.remove(subscriber) && this.subs.count === 0) {
+      for (const e of this.config.events) {
+        this.obj.removeEventListener(e, this);
+      }
+      this.listened = false;
+      this.stop();
+    }
+  }
+
+  useConfig(config: INodeObserverConfigBase): void {
+    this.config = config;
+    if (this.listened) {
+      for (const e of this.config.events) {
+        this.obj.removeEventListener(e, this);
+      }
+      for (const e of this.config.events) {
+        this.obj.addEventListener(e, this);
+      }
+    }
+  }
+}

package/src/select/mdc-select.html

@@ -0,0 +1,38 @@
+<template class="
+    mdc-select
+    mdc-select--${outlined ? 'outlined' : 'filled'}
+    ${leadingIcon ? 'mdc-select--with-leading-icon' : ''}
+    ${required ? 'mdc-select--required' : ''}
+  " role="button" aria-haspopup="listbox">
+  <div class="mdc-select__anchor" ref="selectAnchor" mdc-ripple="no-class.bind: true;" change.trigger="handleChange()"
+    focus.trigger="handleFocus()" blur.trigger="handleBlur()" keydown.trigger="handleKeydown($event)"
+    click.trigger="handleClick($event)">
+    <span class="mdc-select__ripple" if.bind="!outlined"></span>
+    <au-slot name="leading-icon"></au-slot>
+    <span class="mdc-select__selected-text-container">
+      <span class="mdc-select__selected-text" ref="selectedText"></span>
+    </span>
+    <span class="mdc-select__dropdown-icon">
+      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
+        <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10">
+        </polygon>
+        <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15">
+        </polygon>
+      </svg>
+    </span>
+    <mdc-floating-label if.bind="label && !outlined" for="${id}" component.ref="mdcLabel">${label}
+    </mdc-floating-label>
+    <mdc-line-ripple if.bind="!outlined" component.ref="lineRipple"></mdc-line-ripple>
+    <mdc-notched-outline if.bind="outlined" component.ref="outline">
+      <mdc-floating-label if.bind="label" for="${id}" component.ref="mdcLabel">${label}</mdc-floating-label>
+    </mdc-notched-outline>
+  </div>
+
+  <mdc-menu class="mdc-select__menu ${naturalWidth || hoistToBody || fixed ? '' : 'mdc-menu-surface--fullwidth'}"
+    component.ref="menu" ref="menuElement" typeahead mdcmenusurface:closed.trigger="handleMenuClosed()"
+    anchor-margin.bind="anchorMargin" mdcmenusurface:opened.trigger="handleMenuOpened()"
+    mdcmenu:selected.trigger="handleMenuItemAction($event)" mdclist:itemschanged.trigger="handleItemsChanged($event)"
+    hoist-to-body.bind="hoistToBody" fixed.bind="fixed">
+    <au-slot></au-slot>
+  </mdc-menu>
+</template>