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

package/src/top-app-bar/mdc-top-app-bar-title.ts

@@ -1,7 +1,7 @@
-import { customElement } from 'aurelia';
-
-@customElement({
-  name: 'mdc-top-app-bar-title',
-  template: '<template class="mdc-top-app-bar__title"><au-slot></au-slot></template>'
-})
-export class MdcTopAppBarTitle { }
+import { customElement } from 'aurelia';
+
+@customElement({
+  name: 'mdc-top-app-bar-title',
+  template: '<template class="mdc-top-app-bar__title"><au-slot></au-slot></template>'
+})
+export class MdcTopAppBarTitle { }

package/src/top-app-bar/mdc-top-app-bar.html

@@ -1,9 +1,9 @@
-<template class="mdc-top-app-bar
-  ${short ? 'mdc-top-app-bar--short' : ''}
-  ${short && collapsed ? 'mdc-top-app-bar--short-collapsed' : ''}
-  ${fixed ? 'mdc-top-app-bar--fixed' : ''}
-  ${prominent ? 'mdc-top-app-bar--prominent' : ''}
-  ${dense ? 'mdc-top-app-bar--dense' : ''}
-  ${hasActionItems ? 'mdc-top-app-bar--short-has-action-item' : ''}">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-top-app-bar
+  ${short ? 'mdc-top-app-bar--short' : ''}
+  ${short && collapsed ? 'mdc-top-app-bar--short-collapsed' : ''}
+  ${fixed ? 'mdc-top-app-bar--fixed' : ''}
+  ${prominent ? 'mdc-top-app-bar--prominent' : ''}
+  ${dense ? 'mdc-top-app-bar--dense' : ''}
+  ${hasActionItems ? 'mdc-top-app-bar--short-has-action-item' : ''}">
+  <au-slot></au-slot>
+</template>

package/src/top-app-bar/mdc-top-app-bar.ts

@@ -1,93 +1,93 @@
-import { MdcComponent, booleanAttr } from '../base';
-import { MDCTopAppBarFoundation, MDCTopAppBarAdapter, MDCTopAppBarBaseFoundation, cssClasses, strings, MDCShortTopAppBarFoundation, MDCFixedTopAppBarFoundation } from '@material/top-app-bar';
-import { SpecificEventListener } from '@material/base';
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-top-app-bar.html?raw';
-
-@inject(Element)
-@customElement({ name: 'mdc-top-app-bar', template })
-export class MdcTopAppBar extends MdcComponent<MDCTopAppBarBaseFoundation> {
-
-  private handleNavigationClick_!: SpecificEventListener<'click'>; // assigned in initialSyncWithDOM()
-  private handleWindowResize_!: SpecificEventListener<'resize'>; // assigned in initialSyncWithDOM()
-  private handleTargetScroll_!: SpecificEventListener<'scroll'>; // assigned in initialSyncWithDOM()
-  private navIcon_!: Element | null;
-  hasActionItems: boolean;
-
-  @bindable({ set: booleanAttr })
-  short: boolean;
-
-  @bindable({ set: booleanAttr })
-  collapsed: boolean;
-
-  @bindable({ set: booleanAttr })
-  fixed: boolean;
-
-  @bindable({ set: booleanAttr })
-  prominent: boolean;
-
-  @bindable({ set: booleanAttr })
-  dense: boolean;
-
-  @bindable()
-  scrollTarget: EventTarget = window;
-  scrollTargetChanged(newValue: EventTarget, oldValue: EventTarget) {
-    // Remove scroll handler from the previous scroll target
-    oldValue?.removeEventListener('scroll', this.handleTargetScroll_ as EventListener);
-
-    // Initialize scroll handler on the new scroll target
-    newValue?.addEventListener('scroll', this.handleTargetScroll_ as EventListener);
-  }
-
-  initialSyncWithDOM() {
-    this.handleNavigationClick_ = this.foundation?.handleNavigationClick.bind(this.foundation);
-    this.handleWindowResize_ = this.foundation?.handleWindowResize.bind(this.foundation);
-    this.handleTargetScroll_ = this.foundation?.handleTargetScroll.bind(this.foundation);
-
-    this.hasActionItems = !!this.root.querySelector(strings.ACTION_ITEM_SELECTOR);
-
-    this.scrollTargetChanged(this.scrollTarget, window);
-
-    this.navIcon_ = this.root.querySelector(strings.NAVIGATION_ICON_SELECTOR);
-    if (this.navIcon_) {
-      this.navIcon_.addEventListener('click', this.handleNavigationClick_ as EventListener);
-    }
-
-    const isFixed = this.root.classList.contains(cssClasses.FIXED_CLASS);
-    const isShort = this.root.classList.contains(cssClasses.SHORT_CLASS);
-    if (!isShort && !isFixed) {
-      window.addEventListener('resize', this.handleWindowResize_ as EventListener);
-    }
-  }
-
-  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: MDCTopAppBarAdapter = {
-      hasClass: (className) => this.root.classList.contains(className),
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      setStyle: (property, value) => this.root.style.setProperty(property, value),
-      getTopAppBarHeight: () => this.root.clientHeight,
-      notifyNavigationIconClicked: () => this.emit(strings.NAVIGATION_EVENT, {}),
-      getViewportScrollY: () => {
-        const win = this.scrollTarget as Window;
-        const el = this.scrollTarget as Element;
-        return win.pageYOffset !== undefined ? win.pageYOffset : el.scrollTop;
-      },
-      getTotalActionItems: () => this.root.querySelectorAll(strings.ACTION_ITEM_SELECTOR).length,
-    };
-
-    let foundation: MDCTopAppBarBaseFoundation;
-    if (this.root.classList.contains(cssClasses.SHORT_CLASS)) {
-      foundation = new MDCShortTopAppBarFoundation(adapter);
-    } else if (this.root.classList.contains(cssClasses.FIXED_CLASS)) {
-      foundation = new MDCFixedTopAppBarFoundation(adapter);
-    } else {
-      foundation = new MDCTopAppBarFoundation(adapter);
-    }
-
-    return foundation;
-  }
-
-}
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCTopAppBarFoundation, MDCTopAppBarAdapter, MDCTopAppBarBaseFoundation, cssClasses, strings, MDCShortTopAppBarFoundation, MDCFixedTopAppBarFoundation } from '@material/top-app-bar';
+import { SpecificEventListener } from '@material/base';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-top-app-bar.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-top-app-bar', template })
+export class MdcTopAppBar extends MdcComponent<MDCTopAppBarBaseFoundation> {
+
+  private handleNavigationClick_!: SpecificEventListener<'click'>; // assigned in initialSyncWithDOM()
+  private handleWindowResize_!: SpecificEventListener<'resize'>; // assigned in initialSyncWithDOM()
+  private handleTargetScroll_!: SpecificEventListener<'scroll'>; // assigned in initialSyncWithDOM()
+  private navIcon_!: Element | null;
+  hasActionItems: boolean;
+
+  @bindable({ set: booleanAttr })
+  short: boolean;
+
+  @bindable({ set: booleanAttr })
+  collapsed: boolean;
+
+  @bindable({ set: booleanAttr })
+  fixed: boolean;
+
+  @bindable({ set: booleanAttr })
+  prominent: boolean;
+
+  @bindable({ set: booleanAttr })
+  dense: boolean;
+
+  @bindable()
+  scrollTarget: EventTarget = window;
+  scrollTargetChanged(newValue: EventTarget, oldValue: EventTarget) {
+    // Remove scroll handler from the previous scroll target
+    oldValue?.removeEventListener('scroll', this.handleTargetScroll_ as EventListener);
+
+    // Initialize scroll handler on the new scroll target
+    newValue?.addEventListener('scroll', this.handleTargetScroll_ as EventListener);
+  }
+
+  initialSyncWithDOM() {
+    this.handleNavigationClick_ = this.foundation?.handleNavigationClick.bind(this.foundation);
+    this.handleWindowResize_ = this.foundation?.handleWindowResize.bind(this.foundation);
+    this.handleTargetScroll_ = this.foundation?.handleTargetScroll.bind(this.foundation);
+
+    this.hasActionItems = !!this.root.querySelector(strings.ACTION_ITEM_SELECTOR);
+
+    this.scrollTargetChanged(this.scrollTarget, window);
+
+    this.navIcon_ = this.root.querySelector(strings.NAVIGATION_ICON_SELECTOR);
+    if (this.navIcon_) {
+      this.navIcon_.addEventListener('click', this.handleNavigationClick_ as EventListener);
+    }
+
+    const isFixed = this.root.classList.contains(cssClasses.FIXED_CLASS);
+    const isShort = this.root.classList.contains(cssClasses.SHORT_CLASS);
+    if (!isShort && !isFixed) {
+      window.addEventListener('resize', this.handleWindowResize_ as EventListener);
+    }
+  }
+
+  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: MDCTopAppBarAdapter = {
+      hasClass: (className) => this.root.classList.contains(className),
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      setStyle: (property, value) => this.root.style.setProperty(property, value),
+      getTopAppBarHeight: () => this.root.clientHeight,
+      notifyNavigationIconClicked: () => this.emit(strings.NAVIGATION_EVENT, {}),
+      getViewportScrollY: () => {
+        const win = this.scrollTarget as Window;
+        const el = this.scrollTarget as Element;
+        return win.pageYOffset !== undefined ? win.pageYOffset : el.scrollTop;
+      },
+      getTotalActionItems: () => this.root.querySelectorAll(strings.ACTION_ITEM_SELECTOR).length,
+    };
+
+    let foundation: MDCTopAppBarBaseFoundation;
+    if (this.root.classList.contains(cssClasses.SHORT_CLASS)) {
+      foundation = new MDCShortTopAppBarFoundation(adapter);
+    } else if (this.root.classList.contains(cssClasses.FIXED_CLASS)) {
+      foundation = new MDCFixedTopAppBarFoundation(adapter);
+    } else {
+      foundation = new MDCTopAppBarFoundation(adapter);
+    }
+
+    return foundation;
+  }
+
+}

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

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

@@ -1,11 +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');
-  }
-}
+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

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

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

@@ -1,147 +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;
-    };
-  };
-}
+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

@@ -1,12 +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));
-  }
-}
+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

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