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

package/src/tree-view/i-tree-node.ts

@@ -0,0 +1,8 @@
+import { MdcTreeView } from './mdc-tree-view';
+
+export interface ITreeNode {
+  children?: ITreeNode[];
+  expanded?: boolean;
+  selected?: boolean;
+  childTreeViewPromise?: Promise<MdcTreeView>;
+}

package/src/tree-view/mdc-tree-node-meta.ts

@@ -0,0 +1,11 @@
+import { customAttribute, inject } from 'aurelia';
+
+@inject(Element)
+@customAttribute('mdc-tree-node-meta')
+export class MdcTreeViewNodeMeta {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-tree-node__meta');
+  }
+}

package/src/tree-view/mdc-tree-node.ts

@@ -0,0 +1,4 @@
+import { customElement } from 'aurelia';
+
+@customElement({ name: 'mdc-tree-node', template: '<au-slot></au-slot>' })
+export class MdcTreeNode { }

package/src/tree-view/mdc-tree-view.html

@@ -0,0 +1,30 @@
+<template class="mdc-tree-view">
+  <import from="./node-filter"></import>
+  <ul class="mdc-tree-view__list">
+    <li repeat.for="$node of nodes | nodeFilter:filter" class="mdc-tree-view__list-item">
+      <let $tree.bind="element"></let>
+      <let $tree-vm.bind="$parent"></let>
+      <div class="mdc-tree-view__node ${$node.selected ? 'mdc-tree-view__node--selected' : ''}"
+        click.trigger="nodeClicked($node)" mdc-ripple="no-class.bind: true;">
+        <div class="mdc-tree-view__node__ripple"></div>
+        <let filtered-children.bind="$node.children | nodeFilter:filter"></let>
+        <button mdc-icon-button if.bind="filteredChildren.length" type="fab" size="small"
+          class="mdc-tree-view__expander" on.bind="$node.expanded">
+          <mdc-icon-button-icon class="material-icons">chevron_right</mdc-icon-button-icon>
+          <mdc-icon-button-icon class="material-icons" on>expand_more</mdc-icon-button-icon>
+        </button>
+        <div else class="mdc-tree-view__leaf-padding"></div>
+        <div class="mdc-tree-node">
+          <au-compose containerless template.bind="nodeTemplate" model.bind="$node"></au-compose>
+        </div>
+      </div>
+      <mdc-promisify-reference if.bind="$node.children" reference.bind="treeView"
+        promise-ref.bind="$node.childTreeViewPromise">
+      </mdc-promisify-reference>
+      <mdc-tree-view if.bind="filteredChildren.length && $node.expanded" nodes.bind="filteredChildren"
+        root-binding-context.bind="rootBindingContext" component.ref="treeView" filter.bind="filter"
+        mdctree:node-selected.trigger="childNodeSelected($event.detail.node)" node-template.bind="nodeTemplate">
+      </mdc-tree-view>
+    </li>
+  </ul>
+</template>

package/src/tree-view/mdc-tree-view.ts

@@ -0,0 +1,147 @@
+import { MdcComponent } from '../base';
+import { MDCFoundation } from '@material/base';
+import { customElement, bindable, inject, ViewFactory, INode } from 'aurelia';
+import { ITreeNode } from './i-tree-node';
+import { processContent } from '@aurelia/runtime-html';
+import template from './mdc-tree-view.html?raw';
+
+let id = 0;
+const templateLookup: Record<string, string> = {};
+const getNextNodeTemplateId = () => ++id;
+const NODE_SELECTED_EVENT = 'mdctree:node-selected';
+
+export class MDCTreeViewFoundation extends MDCFoundation { }
+
+@inject(Element)
+@customElement({ name: 'mdc-tree-view', template })
+@processContent(function processContent(node: INode) {
+  const element = node as Element;
+  const treeNode = element.querySelector('mdc-tree-node');
+  if (treeNode) {
+    const nodeTemplateId = getNextNodeTemplateId();
+    element.setAttribute('data-template-id', nodeTemplateId.toString());
+    templateLookup[nodeTemplateId] = treeNode.innerHTML;
+  }
+  element.innerHTML = '';
+  return false;
+}
+)
+export class MdcTreeView extends MdcComponent<MDCTreeViewFoundation> {
+  getDefaultFoundation(): MDCTreeViewFoundation {
+    return new MDCTreeViewFoundation();
+  }
+
+  constructor(root: HTMLElement) {
+    super(root);
+    const templateId = root.getAttribute('data-template-id');
+    if (templateId !== null) {
+      this.nodeTemplate = templateLookup[templateId];
+    }
+  }
+
+  nodeViewFactory: ViewFactory;
+  selectedNode?: ITreeNode;
+
+  @bindable()
+  nodeTemplate: string;
+
+  @bindable()
+  nodes: ITreeNode[];
+
+  /**
+   * Allows for filtering tree nodes
+   */
+  @bindable()
+  filter: (n: ITreeNode) => boolean = () => true;
+
+  @bindable()
+  rootBindingContext: Record<string, unknown>;
+
+  bind(bindingContext: Record<string, unknown>) {
+    this.rootBindingContext = this.rootBindingContext ?? bindingContext;
+  }
+
+  toggleExpanded(n: ITreeNode, e: Event): boolean {
+    n.expanded = !n.expanded;
+    e.stopPropagation();
+    return false;
+  }
+
+  nodeClicked(n?: ITreeNode) {
+    if (this.selectedNode) {
+      this.selectedNode.selected = false;
+    }
+    if (n) {
+      n.selected = true;
+    }
+    this.selectedNode = n;
+    this.root.dispatchEvent(new CustomEvent(NODE_SELECTED_EVENT,
+      { detail: { node: n }, bubbles: true })
+    );
+    return true;
+  }
+
+  childNodeSelected(n: ITreeNode) {
+    if (this.selectedNode && this.selectedNode !== n) {
+      this.selectedNode.selected = false;
+    }
+    this.selectedNode = n;
+  }
+
+  findPath<T extends ITreeNode>(nodes: T[], predicate: (node: T) => boolean): number[] {
+    const path: number[] = [];
+    for (let i = 0; i < nodes.length; ++i) {
+      if (predicate(nodes[i])) {
+        return [i];
+      }
+      if (!nodes[i].children) {
+        continue;
+      }
+      const childPath = this.findPath(nodes[i].children!, predicate);
+      if (childPath.length) {
+        return [i, ...childPath];
+      }
+    }
+    return path;
+  }
+
+  async expandPath(path: number[]) {
+    const filteredNodes = this.nodes.filter(x => this.filter(x));
+    if (path.length === 1) {
+      this.nodeClicked(filteredNodes[path[0]]);
+      this.root.querySelectorAll('.mdc-tree-view__node')[path[0]].scrollIntoView();
+    } else {
+      filteredNodes[path[0]].expanded = true;
+      // child tree views are hidden with 'if.bind'
+      // promises are created by a helper element `mdc-promisify-reference`
+      // this lets dependent code to wait till a view model reference is assigned
+      await this.initialised;
+      const childTreeView = await (filteredNodes[path[0]].childTreeViewPromise);
+      await childTreeView?.expandPath(path.slice(1));
+    }
+  }
+
+  async find<T extends ITreeNode>(predicate: (node: T) => boolean) {
+    // to avoid rendering the whole tree finding a node is a 2-step process
+    // firstly, find the path - nodes which need to be expanded to display the target node
+    const filteredNodes = this.nodes.filter(x => this.filter(x));
+    const path = this.findPath(filteredNodes, predicate);
+    if (path.length) {
+      // secondly, expand the path
+      await this.expandPath(path);
+    }
+  }
+
+  dispatchEvent(type: string, node: ITreeNode) {
+    this.root.dispatchEvent(new CustomEvent(type, { bubbles: true, detail: { node } }));
+  }
+}
+
+/** @hidden */
+export interface IMdcTreeElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcTreeView;
+    };
+  };
+}

package/src/tree-view/node-filter.ts

@@ -0,0 +1,12 @@
+import { valueConverter } from 'aurelia';
+import { ITreeNode } from './i-tree-node';
+
+@valueConverter('nodeFilter')
+export class NodeFilterValueConverter {
+  toView(nodes: ITreeNode[], filter: (n: ITreeNode) => boolean) {
+    if (!filter) {
+      return nodes;
+    }
+    return nodes?.filter(x => filter(x));
+  }
+}

package/src/tree-view/styles/_index.scss

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

package/src/tree-view/styles/_mixins.scss

@@ -0,0 +1,145 @@
+@use "@material/feature-targeting/functions"as feature-targeting-functions;
+@use "@material/feature-targeting/mixins"as feature-targeting-mixins;
+@use "@material/theme/mixins"as theme-mixins;
+@use "@material/theme/variables"as theme-variables;
+@use "@material/rtl/mixins"as rtl-mixins;
+@use "@material/ripple/mixins"as ripple-mixins;
+@use "@material/ripple/functions"as ripple-functions;
+@use "@material/elevation/mixins"as elevation-mixins;
+@use "@material/shape/mixins"as shape-mixins;
+@use "@material/icon-button/mixins"as icon-button;
+
+@use "./variables";
+
+@mixin core-styles($query: feature-targeting-functions.all()) {
+  @include ripple($query);
+  @include without-ripple($query);
+}
+
+@mixin without-ripple($query: feature-targeting-functions.all()) {
+  $feat-animation: feature-targeting-functions.create-target($query, animation);
+  $feat-color: feature-targeting-functions.create-target($query, color);
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+  @include item-selected-text-color(variables.$text-selected-color, $query);
+
+  .mdc-tree-view {
+    @include fill-color(surface, $query);
+
+    display: block;
+
+    .mdc-tree-view__node {
+      @include list-item-height-variant($query);
+      @include leaf-padding(variables.$leaf-padding, $query);
+
+      display: flex;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+
+      .mdc-tree-view__expander {
+        @include icon-button.density(-3);
+      }
+
+      .mdc-tree-node {
+        width: calc(100% - #{variables.$leaf-padding});
+        display: flex;
+        align-items: center;
+
+        .mdc-tree-node__meta {
+          margin-left: auto;
+          margin-right: 0;
+
+          @include theme-mixins.prop(color, text-hint-on-background);
+        }
+      }
+    }
+
+    >.mdc-tree-view__list {
+      list-style-type: none;
+      padding-left: 0;
+
+      >.mdc-tree-view__list-item {
+        >mdc-tree-view {
+          margin-left: variables.$child-tree-view-margin;
+        }
+      }
+    }
+  }
+}
+
+@mixin list-item-height-variant($query: feature-targeting-functions.all()) {
+  @include list-item-height(variables.$single-line-height, $query);
+}
+
+@mixin list-item-height($height, $query: feature-targeting-functions.all()) {
+  $feat-structure: feature-targeting-functions.create-target($query, structure);
+
+  @include feature-targeting-mixins.targets($feat-structure) {
+    height: $height;
+  }
+}
+
+@mixin leaf-padding($padding, $query: feature-targeting-functions.all()) {
+  .mdc-tree-view__leaf-padding {
+    width: $padding;
+    height: $padding;
+    flex-shrink: 0;
+  }
+}
+
+/// Sets the text color of the list item in selected or activated state.
+/// @param {color} $color - The desired text color.
+@mixin item-selected-text-color($color, $query: feature-targeting-functions.all()) {
+
+  // "Selected" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
+  // "Activated" is more permanent. E.g., the currently highlighted navigation destination in a drawer.
+  .mdc-tree-view__node--selected {
+    @include item-primary-text-ink-color($color, $query: $query);
+  }
+}
+
+@mixin item-primary-text-ink-color($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
+  @include feature-targeting-mixins.targets($feat-color) {
+    @include theme-mixins.prop(color, $color);
+  }
+}
+
+@mixin ripple($query: feature-targeting-functions.all()) {
+  @include ripple-mixins.common($query); // COPYBARA_COMMENT_THIS_LINE
+
+  .mdc-tree-view__node {
+    @include item-interactive-ripple_($query);
+  }
+}
+
+@mixin item-interactive-ripple_($query: feature-targeting-functions.all()) {
+  @include ripple-mixins.surface($ripple-target: variables.$ripple-target, $query: $query);
+  @include ripple-mixins.radius-bounded($ripple-target: variables.$ripple-target, $query: $query);
+  @include ripple-mixins.states(theme-variables.prop-value(on-surface), false, $ripple-target: variables.$ripple-target, $query: $query);
+  @include ripple-mixins.states-selected(primary, false, $ripple-target: variables.$ripple-target, $query: $query);
+
+  #{variables.$ripple-target} {
+    @include ripple-mixins.target-common($query: $query);
+  }
+}
+
+@mixin fill-color($color, $query: functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
+  @include feature-targeting-mixins.targets($feat-color) {
+    @include theme-mixins.prop(background-color, $color);
+  }
+}
+
+@mixin selected-color($color, $query: feature-targeting-functions.all()) {
+  $feat-color: feature-targeting-functions.create-target($query, color);
+
+  @include feature-targeting-mixins.targets($feat-color) {
+    &.mdc-tree-view__node--selected {
+      @include theme-mixins.prop(background-color, $color);
+    }
+  }
+}

package/src/tree-view/styles/_variables.scss

@@ -0,0 +1,8 @@
+@use "@material/theme/variables";
+
+$text-selected-color: primary !default;
+$selected-color: rgba(variables.prop-value(on-surface), 0.54) !default;
+$ripple-target: '.mdc-tree-view__node__ripple';
+$single-line-height: 48px !default;
+$leaf-padding: 36px;
+$child-tree-view-margin: 15px;

package/src/tree-view/styles/mdc-tree-view.import.scss

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

package/src/tree-view/styles/mdc-tree-view.scss

@@ -0,0 +1,3 @@
+@use "./mixins";
+
+@include mixins.core-styles;