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

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/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';

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

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

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

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

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

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