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

package/src/list/mdc-list-item/mdc-list-item-leading.ts

@@ -0,0 +1,34 @@
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional, marks the leading control or media element
+ * @selector [mdc-list-item-leading]
+ */
+@customAttribute('mdc-list-item-leading')
+@inject(Element)
+export class MdcListItemLeading {
+  constructor(private root: Element) { }
+
+  /** Optional leading element type. In most cases you don't need to supply it.
+   * Only when the element is ambiguous, e.g. <img> or a generic <span>
+  */
+  value: 'checkbox' | 'radio' | 'switch' | 'icon' | 'image' | 'thumbnail' | 'video' | 'avatar';
+
+  attached() {
+    let value = this.value;
+    if (!value) {
+      if (this.root.classList.contains('mdc-checkbox')) {
+        value = 'checkbox';
+      } else if (this.root.classList.contains('mdc-radio')) {
+        value = 'radio';
+      } else if (this.root.classList.contains('mdc-switch')) {
+        value = 'switch';
+      } else if (this.root.classList.contains('material-icons')) {
+        value = 'icon';
+      } else if (this.root.tagName === 'IMG') {
+        value = 'image';
+      }
+    }
+    this.root.parentElement?.parentElement?.classList.add(`mdc-list-item--with-leading-${value}`);
+  }
+}

package/src/list/mdc-list-item/mdc-list-item-trailing.ts

@@ -0,0 +1,36 @@
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional, marks the trailing control element
+ * @selector [mdc-list-item-trailing]
+ */
+@inject(Element)
+@customAttribute('mdc-list-item-trailing')
+export class MdcListItemTrailing {
+  constructor(private root: Element) { }
+
+  /** Optional leading element type. In most cases you don't need to supply it.
+   * Only when the element is ambiguous, e.g. <img> or a generic <span>
+  */
+  value: 'meta' | 'checkbox' | 'radio' | 'switch' | 'icon' | undefined;
+
+  attached() {
+    let value = this.value;
+    if (!value) {
+      if (this.root.classList.contains('mdc-checkbox')) {
+        value = 'checkbox';
+      } else if (this.root.classList.contains('mdc-radio')) {
+        value = 'radio';
+      } else if (this.root.classList.contains('mdc-switch')) {
+        value = 'switch';
+      } else if (this.root.classList.contains('mdc-icon-button')) {
+        value = undefined;
+      } else if (this.root.classList.contains('material-icons')) {
+        value = 'icon';
+      }
+    }
+    if (value !== undefined) {
+      this.root.parentElement?.parentElement?.classList.add(`mdc-list-item--with-trailing-${value}`);
+    }
+  }
+}

package/src/list/mdc-list-item/mdc-list-item.html

@@ -0,0 +1,13 @@
+<template class="
+    ${cssClasses.LIST_ITEM_CLASS}
+    ${disabled ? 'mdc-list-item--disabled' : ''}
+    ${activated ? 'mdc-list-item--activated' : ''}
+    ${selected ? 'mdc-list-item--selected' : ''}
+    ${nonInteractive ? 'non-interactive' : ''}
+    ${twoLine ? 'mdc-list-item--with-two-lines' : (threeLine ? 'mdc-list-item--with-three-lines' : 'mdc-list-item--with-one-line')}
+    ${trailingType ? 'mdc-list-item--with-trailing-' + trailingType : ''}
+  " id1="mdc-list-item-${id}" mdc-ripple="disabled.bind: disabled || disableRipple" keydown.trigger="onKeydown($event)"
+  click.trigger="onClick()" tabindex="-1">
+  <span class="mdc-list-item__ripple"></span>
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-list-item/mdc-list-item.ts

@@ -0,0 +1,136 @@
+import { cssClasses, strings } from '@material/list';
+import { customElement, bindable, inject, INode } from 'aurelia';
+import { booleanAttr } from '../../base';
+import { processContent } from '@aurelia/runtime-html';
+import template from './mdc-list-item.html?raw';
+
+const ENTER = 13;
+const SPACE = 32;
+const LIST_ITEM_ACTION = 'mdclistitem:action';
+let id = 0;
+
+/**
+ * @selector mdc-list-item
+ */
+@inject(Element)
+@customElement({ name: 'mdc-list-item', template })
+@processContent(function processContent(node: INode) {
+  const element = node as HTMLElement;
+  const leading = element.querySelector('[mdc-list-item-leading]');
+  if (leading) {
+    element.removeChild(leading);
+  }
+  const trailing = element.querySelector('[mdc-list-item-trailing]');
+  if (trailing) {
+    element.removeChild(trailing);
+  }
+  const content = document.createElement('span');
+  content.classList.add('mdc-list-item__content');
+  const texts = element.querySelectorAll('mdc-list-item-overline-text, mdc-list-item-primary-text, mdc-list-item-secondary-text, au-slot');
+  const children = Array.from(element.childNodes);
+  if (!texts.length) {
+    const primary = document.createElement('span');
+    primary.classList.add('mdc-list-item__primary-text');
+    for (let i = 0; i < children.length; ++i) {
+      primary.appendChild(children[i]);
+    }
+    content.appendChild(primary);
+  } else {
+    for (let i = 0; i < children.length; ++i) {
+      content.appendChild(children[i]);
+    }
+  }
+  if (leading) {
+    const start = document.createElement('span');
+    start.classList.add('mdc-list-item__start');
+    start.appendChild(leading);
+    element.appendChild(start);
+  }
+  element.appendChild(content);
+  if (trailing) {
+    const end = document.createElement('span');
+    end.classList.add('mdc-list-item__end');
+    end.appendChild(trailing);
+    element.appendChild(end);
+  }
+}
+)
+export class MdcListItem {
+  constructor(public root: HTMLElement) { }
+
+  cssClasses = cssClasses;
+
+  id = `mdc-list-item-${++id}`;
+
+  /** Disables the list item */
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+
+  /** Styles the row in an activated state */
+  @bindable({ set: booleanAttr })
+  activated: boolean;
+
+  /** Styles the row in an selected state */
+  @bindable({ set: booleanAttr })
+  selected: boolean;
+
+  /** Indicates a non-interactive item */
+  @bindable({ set: booleanAttr })
+  nonInteractive: boolean;
+
+  /** Indicates a two-line item */
+  @bindable({ set: booleanAttr })
+  twoLine: boolean;
+
+  /** Indicates a three-line item */
+  @bindable({ set: booleanAttr })
+  threeLine: boolean;
+
+  /** Random data associated with the list item. Passed in events payload. */
+  @bindable()
+  value: unknown;
+
+  /** Disables ripple effect */
+  @bindable({ set: booleanAttr })
+  disableRipple: boolean;
+
+  attached() {
+    // Child button/a elements are not tabbable until the list item is focused.
+    Array.from(this.root.querySelectorAll(strings.FOCUSABLE_CHILD_ELEMENTS))
+      .forEach(el => el.setAttribute('tabindex', '-1'));
+  }
+
+  onKeydown(evt: KeyboardEvent) {
+    if ((evt.keyCode === ENTER || evt.keyCode === SPACE) && !this.disabled) {
+      this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true }));
+    }
+    return true;
+  }
+
+  onClick() {
+    if (!this.disabled) {
+      this.root.dispatchEvent(new CustomEvent(LIST_ITEM_ACTION, { detail: { item: this, data: this.value }, bubbles: true }));
+    }
+    return true;
+  }
+
+}
+
+/** @hidden */
+export interface IMdcListItemElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcListItem;
+    };
+  };
+}
+
+export interface IMdcListActionEventDetail {
+  index: number;
+  data: unknown;
+}
+
+/** @hidden */
+export interface IMdcListActionEvent extends Event {
+  detail: IMdcListActionEventDetail;
+}

package/src/list/mdc-list-item-overline-text.ts

@@ -0,0 +1,8 @@
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, overline text for the list item
+ * @selector mdc-list-item-overline-text
+ */
+@customElement({ name: 'mdc-list-item-overline-text', template: '<template class="mdc-list-item__overline-text"><au-slot></au-slot></template>' })
+export class MdcListItemOverlineText { }

package/src/list/mdc-list-item-primary-text.ts

@@ -0,0 +1,11 @@
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, primary text for the list item
+ * @selector mdc-list-item-primary-text
+ */
+@customElement({
+  name: 'mdc-list-item-primary-text',
+  template: '<template class="mdc-list-item__primary-text"><au-slot></au-slot></template>'
+})
+export class MdcListItemPrimaryText { }

package/src/list/mdc-list-item-secondary-text.ts

@@ -0,0 +1,11 @@
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, secondary text for the list item. Displayed below the primary text.
+ * @selector mdc-list-item-secondary-text
+ */
+@customElement({
+  name: 'mdc-list-item-secondary-text',
+  template: '<template class="mdc-list-item__secondary-text"><au-slot></au-slot></template>'
+})
+export class MdcListItemSecondaryText { }

package/src/list/mdc-list.html

@@ -0,0 +1,5 @@
+<template class="${cssClasses.ROOT}" keydown.trigger="handleKeydownEvent_($event)"
+  click.trigger="handleClickEvent_($event)" focusin.trigger="handleFocusInEvent_($event)"
+  focusout.trigger="handleFocusOutEvent_($event)" aria-orientation="${vertical ? 'vertical' : 'horizontal' }">
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-list.ts

@@ -0,0 +1,300 @@
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCListFoundation, MDCListAdapter, strings, cssClasses, MDCListIndex, MDCListSelectionChangeDetail } from '@material/list';
+import { closest, matches } from '@material/dom/ponyfill';
+import { MdcListItem, IMdcListActionEventDetail } from './mdc-list-item/mdc-list-item';
+import { customElement, bindable, inject, CustomElement, slotted } from 'aurelia';
+import template from './mdc-list.html?raw';
+
+strings.ACTION_EVENT = strings.ACTION_EVENT.toLowerCase();
+strings.SELECTION_CHANGE_EVENT = strings.SELECTION_CHANGE_EVENT.toLowerCase();
+
+export const mdcListStrings = {
+  ITEMS_CHANGED: 'mdclist:itemschanged'
+};
+
+/**
+ * @selector mdc-list
+ * @emits mdclist:action | Indicates that a list item with the specified index has been activated
+ * @emits mdclist:itemschanged | Indicates that the list of items has changed
+ */
+@inject(Element)
+@customElement({ name: 'mdc-list', template })
+export class MdcList extends MdcComponent<MDCListFoundation> {
+
+  cssClasses = cssClasses;
+
+  /** When enabled, the space and enter keys (or click event) will trigger an single list item to become selected and any other previous selected element to become deselected */
+  @bindable({ set: booleanAttr })
+  singleSelection: boolean;
+  singleSelectionChanged() {
+    this.foundation?.setSingleSelection(this.singleSelection);
+  }
+
+  /** Sets the selection logic to apply/remove the mdc-list-item--activated class */
+  @bindable({ set: booleanAttr })
+  activated: boolean;
+  activatedChanged() {
+    this.foundation?.setUseActivatedClass(this.activated);
+  }
+
+  @slotted({ query: 'mdc-list-item' })
+  itemElements: HTMLElement[];
+  itemsChanged() {
+    this.emit(mdcListStrings.ITEMS_CHANGED, { items: this.itemElements }, true);
+  }
+
+  get items(): MdcListItem[] {
+    return (this.itemElements ?? []).map(x => CustomElement.for<MdcListItem>(x).viewModel);
+  }
+
+  @bindable({ set: booleanAttr })
+  typeahead: boolean;
+  typeaheadChanged(hasTypeahead: boolean) {
+    this.foundation?.setHasTypeahead(hasTypeahead);
+  }
+
+  /** Prevent list items receive styles for hover, focus, and press states (including the ripple) */
+  @bindable({ set: booleanAttr })
+  nonInteractive: boolean;
+
+  /** Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa */
+  @bindable({ set: booleanAttr })
+  wrapFocus: boolean;
+  wrapFocusChanged() {
+    this.foundation?.setWrapFocus(this.wrapFocus);
+  }
+
+  initialSyncWithDOM() {
+    this.singleSelectionChanged();
+    this.activatedChanged();
+    this.typeaheadChanged(this.typeahead);
+    this.wrapFocusChanged();
+    this.layout();
+    this.initializeListType();
+  }
+
+  get listElements(): Element[] {
+    return Array.from(this.root.querySelectorAll(`.${cssClasses.LIST_ITEM_CLASS}`));
+  }
+
+  /**
+   * Extracts the primary text from a list item.
+   * @param item The list item element.
+   * @return The primary text in the element.
+   */
+  getPrimaryText(item: Element): string {
+    const primaryText = item.querySelector(`.${cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS}`);
+    if (primaryText) {
+      return primaryText.textContent ?? '';
+    }
+
+    const singleLineText = item.querySelector(`.${cssClasses.LIST_ITEM_TEXT_CLASS}`);
+    return singleLineText?.textContent ?? '';
+  }
+
+  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: MDCListAdapter = {
+      addClassForElementIndex: (index, className) => {
+        const element = this.listElements[index];
+        if (element) {
+          element.classList.add(className);
+        }
+      },
+      focusItemAtIndex: (index) => {
+        const element = this.listElements[index] as HTMLElement | undefined;
+        if (element) {
+          element.focus();
+        }
+      },
+      getAttributeForElementIndex: (index, attr) => this.listElements[index].getAttribute(attr),
+      getFocusedElementIndex: () => this.listElements.indexOf(document.activeElement!),
+      getListItemCount: () => this.listElements.length,
+      getPrimaryTextAtIndex: (index) => this.getPrimaryText(this.listElements[index]),
+      hasCheckboxAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        return !!listItem.querySelector(strings.CHECKBOX_SELECTOR);
+      },
+      hasRadioAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        return !!listItem.querySelector(strings.RADIO_SELECTOR);
+      },
+      isCheckboxCheckedAtIndex: (index) => {
+        const listItem = this.listElements[index];
+        const toggleEl = listItem.querySelector<HTMLInputElement>(strings.CHECKBOX_SELECTOR);
+        return toggleEl!.checked;
+      },
+      isFocusInsideList: () => {
+        return this.root !== document.activeElement && this.root.contains(document.activeElement);
+      },
+      isRootFocused: () => document.activeElement === this.root,
+      listItemAtIndexHasClass: (index, className) => this.listElements[index].classList.contains(className),
+      notifyAction: (index) => {
+        const listItem = this.listElements[index];
+        if (!listItem.hasAttribute('no-list-action')) {
+          const data = CustomElement.for<MdcListItem>(listItem).viewModel.value;
+          this.emit<IMdcListActionEventDetail>(strings.ACTION_EVENT, { index, data }, /** shouldBubble */ true);
+        }
+      },
+      notifySelectionChange: (changedIndices: number[]) => {
+        this.emit<MDCListSelectionChangeDetail>(strings.SELECTION_CHANGE_EVENT,
+          { changedIndices }, /** shouldBubble */ true);
+      },
+      removeClassForElementIndex: (index, className) => {
+        const element = this.listElements[index];
+        if (element) {
+          element.classList.remove(className);
+        }
+      },
+      setAttributeForElementIndex: (index, attr, value) => {
+        const element = this.listElements[index];
+        if (element) {
+          element.setAttribute(attr, value);
+        }
+      },
+      setCheckedCheckboxOrRadioAtIndex: (index, isChecked) => {
+        const listItem = this.listElements[index];
+        const toggleEl = listItem.querySelector<HTMLInputElement>(strings.CHECKBOX_RADIO_SELECTOR);
+        if (toggleEl?.disabled) {
+          return;
+        }
+        toggleEl!.checked = isChecked;
+
+        const event = document.createEvent('Event');
+        event.initEvent('change', true, true);
+        toggleEl!.dispatchEvent(event);
+      },
+      setTabIndexForListItemChildren: (listItemIndex, tabIndexValue) => {
+        const element = this.listElements[listItemIndex];
+        const listItemChildren: Element[] =
+          [].slice.call(element.querySelectorAll(strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
+        listItemChildren.forEach((el) => el.setAttribute('tabindex', tabIndexValue));
+      },
+    };
+    return new MDCListFoundation(adapter);
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which list item this event is targetting. Or returns -1 if
+   * there is no list item
+   */
+  private getListItemIndex_(evt: Event) {
+    const eventTarget = evt.target as Element;
+    const nearestParent = closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);
+
+    // Get the index of the element if it is a list item.
+    if (nearestParent && matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {
+      return this.listElements.indexOf(nearestParent);
+    }
+
+    return -1;
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   */
+  handleFocusInEvent_(evt: FocusEvent) {
+    const index = this.getListItemIndex_(evt);
+    this.foundation?.handleFocusIn(index);
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   */
+  handleFocusOutEvent_(evt: FocusEvent) {
+    const index = this.getListItemIndex_(evt);
+    this.foundation?.handleFocusOut(index);
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was focused when keydown event occurred before sending the event to the
+   * foundation.
+   */
+  handleKeydownEvent_(evt: KeyboardEvent) {
+    const index = this.getListItemIndex_(evt);
+    const target = evt.target as Element;
+    if (!target.hasAttribute('not-selectable')) {
+      this.foundation?.handleKeydown(evt, target.classList.contains(cssClasses.LIST_ITEM_CLASS), index);
+    }
+    return true;
+  }
+
+  /**
+   * @hidden
+   * Used to figure out which element was clicked before sending the event to the foundation.
+   */
+  handleClickEvent_(evt: MouseEvent) {
+    const index = this.getListItemIndex_(evt);
+    const target = evt.target as Element;
+    // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
+    const isCheckboxAlreadyUpdatedInAdapter = matches(target, strings.CHECKBOX_RADIO_SELECTOR);
+    this.foundation?.handleClick(index, isCheckboxAlreadyUpdatedInAdapter, evt);
+    return true;
+  }
+
+  /**
+   * @hidden
+   * @return Whether typeahead is currently matching a user-specified prefix.
+   */
+  get typeaheadInProgress(): boolean {
+    return this.foundation!.isTypeaheadInProgress();
+  }
+
+  /**
+   * @hidden
+   * Given the next desired character from the user, adds it to the typeahead
+   * buffer. Then, attempts to find the next option matching the buffer. Wraps
+   * around if at the end of options.
+   *
+   * @param nextChar The next character to add to the prefix buffer.
+   * @param startingIndex The index from which to start matching. Defaults to
+   *     the currently focused index.
+   * @return The index of the matched item.
+   */
+  typeaheadMatchItem(nextChar: string, startingIndex?: number): number {
+    return this.foundation!.typeaheadMatchItem(nextChar, startingIndex, /** skipFocus */ true);
+  }
+
+  layout() {
+    this.foundation?.layout();
+  }
+
+  get selectedIndex(): MDCListIndex {
+    return this.foundation!.getSelectedIndex();
+  }
+
+  set selectedIndex(index: MDCListIndex) {
+    this.foundation?.setSelectedIndex(index);
+  }
+
+  /**
+   * @hidden
+   * Initialize selectedIndex value based on pre-selected checkbox list items, single selection or radio.
+   */
+  initializeListType() {
+    const checkboxListItems = this.root.querySelectorAll(strings.ARIA_ROLE_CHECKBOX_SELECTOR);
+    const radioSelectedListItem = this.root.querySelector(strings.ARIA_CHECKED_RADIO_SELECTOR);
+
+    if (checkboxListItems.length) {
+      const preselectedItems = this.root.querySelectorAll(strings.ARIA_CHECKED_CHECKBOX_SELECTOR);
+      this.selectedIndex = [].map.call(preselectedItems, (listItem: Element) => this.listElements.indexOf(listItem)) as number[];
+    } else if (radioSelectedListItem) {
+      this.selectedIndex = this.listElements.indexOf(radioSelectedListItem);
+    }
+  }
+}
+
+/** @hidden */
+export interface IMdcListElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcList;
+    };
+  };
+}
+

package/src/list/styles/_index.scss

@@ -0,0 +1 @@
+@forward './mdc-list.scss';

package/src/list/styles/mdc-list.import.scss

@@ -0,0 +1 @@
+@forward './mdc-list.scss';

package/src/list/styles/mdc-list.scss

@@ -0,0 +1,6 @@
+.mdc-list,
+.mdc-list-divider,
+.mdc-deprecated-list,
+.mdc-deprecated-list-divider {
+  display: block;
+}

package/src/lookup/discardable-promise.ts

@@ -0,0 +1,24 @@
+/**
+ * A wrapper-promise which rejects when discarded
+ */
+export class DiscardablePromise<T> implements PromiseLike<T> {
+  constructor(private promise: Promise<T>) { }
+
+  static discarded = Symbol('discarded');
+
+  isDiscarded: boolean;
+
+  then<TResult1 = T, TResult2 = never>(onfulfilled?: (value: T) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: unknown) => TResult2 | PromiseLike<TResult2>): PromiseLike<TResult1 | TResult2> {
+    return this.promise.then(async x => {
+      if (this.isDiscarded) {
+        return Promise.reject(DiscardablePromise.discarded);
+      } else {
+        return Promise.resolve(x);
+      }
+    }).then(onfulfilled, onrejected);
+  }
+
+  discard() {
+    this.isDiscarded = true;
+  }
+}