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

package/src/chips/mdc-chip/mdc-chip.html

@@ -0,0 +1,24 @@
+<template class="
+    mdc-evolution-chip
+    ${filter ? 'mdc-evolution-chip--selectable' : ''}
+    ${disabled ? 'mdc-evolution-chip--disabled' : ''}
+    ${icon ? 'mdc-evolution-chip--with-primary-icon' : ''}
+  " role="row" mdcchipaction:interaction.trigger="handleActionInteraction($event)"
+  mdcchipaction:navigation.trigger="handleActionNavigation($event)" animationend.trigger="handleAnimationEnd($event)"
+  transitionend.trigger="handleTransitionEnd()">
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
+    <au-slot name="primary-action">
+      <button mdc-chip-action selectable.bind="filter" disabled.bind="disabled"
+        icon.bind="icon">
+        <au-slot></au-slot>
+      </button>
+    </au-slot>
+  </span>
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing" role="gridcell">
+    <au-slot name="trailing-action"></au-slot>
+  </span>
+
+  <au-slot name="non-navigable-trailing-action"></au-slot>
+</template>

package/src/chips/mdc-chip/mdc-chip.ts

@@ -0,0 +1,290 @@
+import { inject, customElement, INode, IPlatform, bindable } from 'aurelia';
+import { MdcComponent, booleanAttr } from '../../base';
+import { processContent, CustomElement } from '@aurelia/runtime-html';
+import { MdcChipAction } from '../mdc-chip-action/mdc-chip-action';
+import { MDCChipFoundation } from '@material/chips/chip/foundation';
+import { MDCChipEvents, MDCChipAdapter, MDCChipActionType, MDCChipActionFocusBehavior, MDCChipAnimation } from '@material/chips';
+import { ActionInteractionEvent, ActionNavigationEvent } from '@material/chips/chip/types';
+import template from './mdc-chip.html?raw';
+
+(MDCChipEvents as Record<string, string>).INTERACTION = MDCChipEvents.INTERACTION.toLowerCase();
+(MDCChipEvents as Record<string, string>).ANIMATION = MDCChipEvents.ANIMATION.toLowerCase();
+(MDCChipEvents as Record<string, string>).NAVIGATION = MDCChipEvents.NAVIGATION.toLowerCase();
+
+let chipId = 0;
+
+/**
+ * @selector mdc-chip
+ * @emits mdcchip:interaction | Indicates the chip was interacted with (via click/tap or Enter key)
+ * @emits mdcchip:removal | Indicates the chip removal event from a chip set
+ * @emits mdcchip:selection | Indicates a selection event has occurred on a chip
+ */
+@inject(Element)
+@customElement({ name: 'mdc-chip', template })
+@processContent(function processContent(node: INode, platform: IPlatform) {
+  const element = node as HTMLElement;
+
+  const primaryAction = element.querySelector('[as-element="mdc-chip-action"]:not([trailing])');
+  if (primaryAction) {
+    primaryAction.setAttribute('au-slot', 'primary-action');
+    primaryAction.remove();
+  }
+
+  const trailingAction = element.querySelector('[as-element="mdc-chip-action"][trailing]');
+  if (trailingAction) {
+    trailingAction.setAttribute('au-slot', trailingAction.hasAttribute('non-navigable') ? 'non-navigable-trailing-action' : 'trailing-action');
+    trailingAction.remove();
+  }
+
+  const template = platform.document.createElement('template');
+  template.setAttribute('au-slot', '');
+  template.innerHTML = element.innerHTML;
+  element.innerHTML = '';
+  element.appendChild(template);
+
+  if (primaryAction) {
+    element.appendChild(primaryAction);
+  }
+  if (trailingAction) {
+    element.appendChild(trailingAction);
+  }
+}
+)
+export class MdcChip extends MdcComponent<MDCChipFoundation> {
+  constructor(root: IMdcChipElement) {
+    super(root);
+    defineMdcChipElementApis(this.root);
+    this.root.id = `mdc-chip-${++chipId}`;
+  }
+
+  _selected: boolean;
+  /**
+   * @return Whether the chip is selected.
+   */
+  get selected(): boolean {
+    return this.foundation?.isActionSelected(MDCChipActionType.PRIMARY) ?? this._selected;
+  }
+
+  /** Sets selected state on the chip. */
+  set selected(selected: boolean) {
+    this._selected = selected;
+    this.foundation?.setActionSelected(MDCChipActionType.PRIMARY, selected);
+  }
+
+  /** Marks the chip as disabled. */
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+
+  /** Marks the chip as a filter chip. */
+  @bindable({ set: booleanAttr })
+  filter: boolean;
+  filterChanged() {
+    if (this.filter) {
+      this.root.setAttribute('role', 'presentation');
+    } else {
+      this.root.setAttribute('role', 'row');
+    }
+  }
+
+  @bindable()
+  icon: string;
+
+  actions: Map<MDCChipActionType, MdcChipAction>;
+
+  beforeFoundationCreated() {
+    this.actions = new Map();
+    const primaryAction = CustomElement.for<MdcChipAction>(this.root.querySelector('.mdc-evolution-chip__action--primary')!).viewModel;
+    this.actions.set(MDCChipActionType.PRIMARY, primaryAction);
+    const trailingAction = this.root.querySelector('.mdc-evolution-chip__action--trailing');
+    if (trailingAction) {
+      this.actions.set(MDCChipActionType.TRAILING, CustomElement.for<MdcChipAction>(trailingAction).viewModel);
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.filterChanged();
+    if (this._selected !== undefined) {
+      this.selected = this._selected;
+    }
+  }
+
+  /** Set focus to the chip. */
+  focus() {
+    this.root.focus();
+  }
+
+  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: MDCChipAdapter = {
+      addClass: (className) => {
+        this.root.classList.add(className);
+      },
+      emitEvent: (eventName, eventDetail) => {
+        this.emit(eventName, eventDetail, true /* shouldBubble */);
+      },
+      getActions: () => {
+        const actions: MDCChipActionType[] = [];
+        for (const [key] of this.actions) {
+          actions.push(key);
+        }
+        return actions;
+      },
+      getAttribute: (attrName) => this.root.getAttribute(attrName),
+      getElementID: () => this.root.id,
+      getOffsetWidth: () => {
+        return this.root.offsetWidth;
+      },
+      hasClass: (className) => this.root.classList.contains(className),
+      isActionSelectable: (actionType: MDCChipActionType) => {
+        const action = this.actions.get(actionType);
+        if (action) {
+          return action.selectable;
+        }
+        return false;
+      },
+      isActionSelected: (actionType: MDCChipActionType) => {
+        const action = this.actions.get(actionType);
+        if (action) {
+          return action.selected;
+        }
+        return false;
+      },
+      isActionFocusable: (actionType: MDCChipActionType) => {
+        const action = this.actions.get(actionType);
+        if (action) {
+          return action.isFocusable();
+        }
+        return false;
+      },
+      isActionDisabled: (actionType: MDCChipActionType) => {
+        const action = this.actions.get(actionType);
+        if (action) {
+          return action.disabled;
+        }
+        return false;
+      },
+      isRTL: () => window.getComputedStyle(this.root).getPropertyValue(
+        'direction') === 'rtl',
+      removeClass: (className) => {
+        this.root.classList.remove(className);
+      },
+      setActionDisabled: (actionType: MDCChipActionType, isDisabled: boolean) => {
+        const action = this.actions.get(actionType);
+        if (action) {
+          action.disabled = isDisabled;
+        }
+      },
+      setActionFocus: (actionType: MDCChipActionType, behavior: MDCChipActionFocusBehavior) => {
+        const action = this.actions.get(actionType);
+        if (action) {
+          action.setFocus(behavior);
+        }
+      },
+      setActionSelected: (actionType: MDCChipActionType, isSelected: boolean) => {
+        const action = this.actions.get(actionType);
+        if (action) {
+          if (action.selected !== isSelected) {
+            action.selected = isSelected;
+          }
+        }
+      },
+      setStyleProperty: (prop: string, value: string) => {
+        this.root.style.setProperty(prop, value);
+      },
+    };
+
+    // Default to the primary foundation
+    return new MDCChipFoundation(adapter);
+  }
+
+  handleActionInteraction(event: ActionInteractionEvent): void {
+    this.foundation?.handleActionInteraction(event);
+    this.emit('change', {}, true);
+  }
+
+  handleActionNavigation(event: ActionNavigationEvent): void {
+    this.foundation?.handleActionNavigation(event);
+  }
+
+  handleAnimationEnd(event: AnimationEvent) {
+    this.foundation?.handleAnimationEnd(event);
+  }
+
+  handleTransitionEnd() {
+    this.foundation?.handleTransitionEnd();
+  }
+
+  getActions(): MDCChipActionType[] {
+    return this.foundation?.getActions() ?? [];
+  }
+
+  getElementID(): string {
+    return this.foundation?.getElementID() ?? '';
+  }
+
+  isActionFocusable(action: MDCChipActionType): boolean {
+    return this.foundation!.isActionFocusable(action);
+  }
+
+  isActionSelectable(action: MDCChipActionType): boolean {
+    return this.foundation!.isActionSelectable(action);
+  }
+
+  isActionSelected(action: MDCChipActionType): boolean {
+    return this.foundation!.isActionSelected(action);
+  }
+
+  setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior) {
+    this.foundation!.setActionFocus(action, focus);
+  }
+
+  setActionSelected(action: MDCChipActionType, isSelected: boolean) {
+    this.foundation!.setActionSelected(action, isSelected);
+  }
+
+  startAnimation(animation: MDCChipAnimation) {
+    this.foundation!.startAnimation(animation);
+  }
+
+  remove() {
+    const parent = this.root.parentNode;
+    if (parent !== null) {
+      parent.removeChild(this.root);
+    }
+  }
+}
+
+/** @hidden */
+export interface IMdcChipElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcChip;
+    };
+  };
+}
+
+function defineMdcChipElementApis(element: HTMLElement) {
+  Object.defineProperties(element, {
+    type: {
+      value: 'checkbox',
+    },
+    checked: {
+      get(this: IMdcChipElement) {
+        const chip = CustomElement.for<MdcChip>(this).viewModel;
+        return chip.selected;
+      },
+      set(this: IMdcChipElement, value: boolean) {
+        CustomElement.for<MdcChip>(this).viewModel.selected = value;
+      },
+      configurable: true
+    },
+    focus: {
+      value(this: IMdcChipElement) {
+        CustomElement.for<MdcChip>(this).viewModel.focus();
+      },
+      configurable: true
+    }
+  });
+}

package/src/chips/mdc-chip-action/enhance-mdc-chip-action.ts

@@ -0,0 +1,8 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceMdcChipAction {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replaceAll('mdc-chip-action=""','as-element="mdc-chip-action"');
+  }
+}

package/src/chips/mdc-chip-action/mdc-chip-action.html

@@ -0,0 +1,25 @@
+<template class="
+    mdc-evolution-chip__action
+    ${trailing ? 'mdc-evolution-chip__action--trailing' : 'mdc-evolution-chip__action--primary'}
+  " click.trigger="handleClick()" keydown.trigger="handleKeydown($event)"
+  mdc-ripple="no-class.bind: true; compute-bounding-rect.bind: computeRippleClientRect">
+  <span class="
+      mdc-evolution-chip__ripple
+      ${trailing ? 'mdc-evolution-chip__ripple--trailing' : 'mdc-evolution-chip__ripple--primary'}
+    "></span>
+  <span class="mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing material-icons"
+    if.bind="trailing && icon">${icon}</span>
+  <span class="mdc-evolution-chip__graphic" if.bind="!trailing && (icon || selectable)">
+    <span if.bind="icon"
+      class="mdc-evolution-chip__icon ${trailing ? '' : 'mdc-evolution-chip__icon--primary'} material-icons">${icon}</span>
+    <span class="mdc-evolution-chip__checkmark" if.bind="selectable">
+      <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30">
+        <path class="mdc-evolution-chip__checkmark-path" fill="none" stroke="black"
+          d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+      </svg>
+    </span>
+  </span>
+  <span class="mdc-evolution-chip__text-label">
+    <au-slot></au-slot>
+  </span>
+</template>

package/src/chips/mdc-chip-action/mdc-chip-action.ts

@@ -0,0 +1,143 @@
+import { closest } from '@material/dom/ponyfill';
+import { booleanAttr, MdcComponent } from '../../base';
+import { MDCChipActionAdapter, MDCChipActionFoundation, MDCChipActionCssClasses, MDCChipActionEvents, MDCChipActionFocusBehavior } from '@material/chips';
+import { MDCRippleCapableSurface } from '@material/ripple';
+import { MDCChipTrailingActionFoundation } from '@material/chips/action/trailing-foundation';
+import { MDCChipPrimaryActionFoundation } from '@material/chips/action/primary-foundation';
+import { GRAPHIC_SELECTED_WIDTH_STYLE_PROP, computePrimaryActionRippleClientRect } from '@material/chips/action/component-ripple';
+import { bindable, customElement, inject } from 'aurelia';
+import template from './mdc-chip-action.html?raw';
+
+(MDCChipActionEvents as Record<string, string>).INTERACTION = MDCChipActionEvents.INTERACTION.toLowerCase();
+(MDCChipActionEvents as Record<string, string>).NAVIGATION = MDCChipActionEvents.NAVIGATION.toLowerCase();
+
+let actionId = 0;
+
+/**
+ * @hidden
+ * @selector mdc-chip-action
+ */
+@inject(Element)
+@customElement({ name: 'mdc-chip-action', template })
+export class MdcChipAction extends MdcComponent<MDCChipActionFoundation> implements MDCRippleCapableSurface {
+  constructor(public root: HTMLElement) {
+    super(root);
+    this.root.id = `mdc-chip-action-${++actionId}`;
+  }
+
+  @bindable({ set: booleanAttr })
+  selectable: boolean;
+  selectableChanged() {
+    if (this.selectable) {
+      this.root.setAttribute('role', 'option');
+    } else {
+      this.root.removeAttribute('role');
+    }
+  }
+
+  _selected: boolean;
+
+  get selected(): boolean {
+    return this.foundation?.isSelected() ?? this._selected;
+  }
+  set selected(value: boolean) {
+    this._selected = value;
+    this.foundation?.setSelected(value);
+  }
+
+  @bindable({ set: booleanAttr })
+  trailing: boolean;
+
+  @bindable()
+  icon: string;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+  async disabledChanged() {
+    await this.initialised;
+    this.foundation?.setDisabled(this.disabled);
+    if (this.disabled) {
+      this.root.setAttribute('disabled', 'true');
+    } else {
+      this.root.removeAttribute('disabled');
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.selectableChanged();
+    this.disabledChanged();
+    if (this._selected !== undefined) {
+      this.selected = this._selected;
+    }
+  }
+
+  handleClick() {
+    this.foundation?.handleClick();
+  }
+
+  handleKeydown(event: KeyboardEvent) {
+    this.foundation?.handleKeydown(event);
+  }
+
+  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: MDCChipActionAdapter = {
+      emitEvent: (eventName, eventDetail) => {
+        this.emit(eventName, eventDetail, true /* shouldBubble */);
+      },
+      focus: () => {
+        this.root.focus();
+      },
+      getAttribute: (attrName) => this.root.getAttribute(attrName),
+      getElementID: () => this.root.id,
+      removeAttribute: (name) => {
+        this.root.removeAttribute(name);
+      },
+      setAttribute: (name, value) => {
+        this.root.setAttribute(name, value);
+      },
+    };
+
+    if (this.root.classList.contains(MDCChipActionCssClasses.TRAILING_ACTION)) {
+      return new MDCChipTrailingActionFoundation(adapter);
+    }
+
+    // Default to the primary foundation
+    return new MDCChipPrimaryActionFoundation(adapter);
+  }
+
+  isFocusable(): boolean {
+    return this.foundation?.isFocusable() ?? false;
+  }
+
+  setFocus(behavior: MDCChipActionFocusBehavior) {
+    this.foundation?.setFocus(behavior);
+  }
+
+  computeRippleClientRect = () => {
+    if (this.root.classList.contains(MDCChipActionCssClasses.PRIMARY_ACTION)) {
+      const chipRoot = closest(this.root, `.${MDCChipActionCssClasses.CHIP_ROOT}`);
+      // Return the root client rect since it's better than nothing
+      if (!chipRoot) {
+        return this.root.getBoundingClientRect();
+      }
+      const graphicWidth = window.getComputedStyle(chipRoot).getPropertyValue(
+        GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
+      return computePrimaryActionRippleClientRect(
+        chipRoot.getBoundingClientRect(), graphicWidth);
+    }
+
+    return this.root.getBoundingClientRect();
+  };
+}
+
+/** @hidden */
+export interface IMdcChipActionElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcChipAction;
+    };
+  };
+}

package/src/chips/mdc-chip-set/mdc-chip-set.html

@@ -0,0 +1,10 @@
+<template class="
+    mdc-evolution-chip-set
+    ${overflow ? 'mdc-evolution-chip-set--overflow' : ''}
+  " role="grid" mdcchip:interaction.trigger="handleChipInteraction($event)"
+  mdcchip:animation.trigger="handleChipAnimation($event)"
+  mdcchip:navigation.trigger="handleChipNavigation($event)">
+  <span class="mdc-evolution-chip-set__chips" role="presentation">
+    <au-slot></au-slot>
+  </span>
+</template>

package/src/chips/mdc-chip-set/mdc-chip-set.ts

@@ -0,0 +1,117 @@
+import { inject, customElement, bindable, slotted, CustomElement } from 'aurelia';
+import { MDCChipSetFoundation, MDCChipSetAdapter, MDCChipSetEvents } from '@material/chips';
+import { announce } from '@material/dom/announce';
+import { MdcComponent, booleanAttr } from '../../base';
+import { MdcChip } from '../mdc-chip/mdc-chip';
+import { ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent } from '@material/chips/chip-set/types';
+import template from './mdc-chip-set.html?raw';
+
+(MDCChipSetEvents as Record<string, string>).INTERACTION = MDCChipSetEvents.INTERACTION.toLowerCase();
+(MDCChipSetEvents as Record<string, string>).REMOVAL = MDCChipSetEvents.REMOVAL.toLowerCase();
+(MDCChipSetEvents as Record<string, string>).SELECTION = MDCChipSetEvents.SELECTION.toLowerCase();
+
+let chipSetId = 0;
+
+@inject(Element)
+@customElement({ name: 'mdc-chip-set', template })
+export class MdcChipSet extends MdcComponent<MDCChipSetFoundation> {
+
+  id: string = `mdc-chip-set-${++chipSetId}`;
+
+  /**
+   * Causes the chips to overflow instead of wrap (their default behavior).
+   */
+  @bindable({ set: booleanAttr })
+  overflow: boolean;
+
+  @slotted({ query: 'mdc-chip' })
+  chipElements: HTMLElement[];
+
+  get chips(): MdcChip[] {
+    return (this.chipElements ?? []).map(x => CustomElement.for<MdcChip>(x).viewModel);
+  }
+
+  handleChipInteraction(event: ChipInteractionEvent) {
+    this.foundation?.handleChipInteraction(event);
+  }
+
+  handleChipAnimation(event: ChipAnimationEvent) {
+    this.foundation?.handleChipAnimation(event);
+  }
+
+  handleChipNavigation(event: ChipNavigationEvent) {
+    this.foundation?.handleChipNavigation(event);
+  }
+
+  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: MDCChipSetAdapter = {
+      announceMessage: (message) => {
+        announce(message);
+      },
+      emitEvent: (eventName, eventDetail) => {
+        this.emit(eventName, eventDetail, true /* shouldBubble */);
+      },
+      getAttribute: (attrName) => this.root.getAttribute(attrName),
+      getChipActionsAtIndex: (index) => {
+        if (!this.isIndexValid(index)) { return []; }
+        return this.chips[index].getActions();
+      },
+      getChipCount: () => this.chips.length,
+      getChipIdAtIndex: (index) => {
+        if (!this.isIndexValid(index)) { return ''; }
+        return this.chips[index].getElementID();
+      },
+      getChipIndexById: (id) =>
+        this.chips.findIndex((chip) => chip.getElementID() === id),
+      isChipFocusableAtIndex: (index, action) => {
+        if (!this.isIndexValid(index)) { return false; }
+        return this.chips[index].isActionFocusable(action);
+      },
+      isChipSelectableAtIndex: (index, action) => {
+        if (!this.isIndexValid(index)) { return false; }
+        return this.chips[index].isActionSelectable(action);
+      },
+      isChipSelectedAtIndex: (index, action) => {
+        if (!this.isIndexValid(index)) { return false; }
+        return this.chips[index].isActionSelected(action);
+      },
+      removeChipAtIndex: (index) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].destroy();
+        this.chips[index].remove();
+        this.chips.splice(index, 1);
+      },
+      setChipFocusAtIndex: (index, action, focus) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].setActionFocus(action, focus);
+      },
+      setChipSelectedAtIndex: (index, action, selected) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].setActionSelected(action, selected);
+      },
+      startChipAnimationAtIndex: (index, animation) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].startAnimation(animation);
+      },
+    };
+
+    // Default to the primary foundation
+    return new MDCChipSetFoundation(adapter);
+  }
+
+  private isIndexValid(index: number): boolean {
+    return index > -1 && index < this.chips.length;
+  }
+}
+
+/** @hidden */
+export interface IMdcChipSetElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcChipSet;
+    };
+  };
+}

package/src/chips/styles/_index.scss

@@ -0,0 +1 @@
+@forward "./mdc-chips";

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

@@ -0,0 +1 @@
+@forward "./mdc-chips";

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

@@ -0,0 +1,11 @@
+.mdc-chip-set {
+
+  .mdc-chip__text:focus,
+  .mdc-chip__action--primary:focus {
+    outline: none;
+  }
+
+  .mdc-chip-trailing-action {
+    margin-top: 6px;
+  }
+}