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

package/src/fab/mdc-fab.html

@@ -1,13 +1,13 @@
-<template class="
-    mdc-fab
-    ${mini ? 'mdc-fab--mini' : ''}
-    ${extended ? 'mdc-fab--extended' : ''}
-    ${exited ? 'mdc-fab--exited' : ''}
-    ${touch ? 'mdc-fab--touch' : ''}
-  " tabindex.bind="disabled ? -1 : 0" mdc-ripple="no-class.bind: true;">
-  <div class="mdc-fab__ripple"></div>
-  <au-slot></au-slot>
-  <span class="material-icons mdc-fab__icon" if.bind="icon">${icon}</span>
-  <span class="mdc-fab__label" if.bind="label">${label}</span>
-  <div class="mdc-fab__touch" if.bind="touch"></div>
-</template>
+<template class="
+    mdc-fab
+    ${mini ? 'mdc-fab--mini' : ''}
+    ${extended ? 'mdc-fab--extended' : ''}
+    ${exited ? 'mdc-fab--exited' : ''}
+    ${touch ? 'mdc-fab--touch' : ''}
+  " tabindex.bind="disabled ? -1 : 0" mdc-ripple="no-class.bind: true;">
+  <div class="mdc-fab__ripple"></div>
+  <au-slot></au-slot>
+  <span class="material-icons mdc-fab__icon" if.bind="icon">${icon}</span>
+  <span class="mdc-fab__label" if.bind="label">${label}</span>
+  <div class="mdc-fab__touch" if.bind="touch"></div>
+</template>

package/src/fab/mdc-fab.ts

@@ -1,50 +1,50 @@
-import { customElement, bindable, inject } from 'aurelia';
-import { booleanAttr } from '../base';
-import template from './mdc-fab.html?raw';
-
-/**
- * @selector mdc-fab
- * @selector a[mdc-fab]
- * @selector button[mdc-fab]
- */
-@inject(Element)
-@customElement({ name: 'mdc-fab', template })
-export class MdcFab {
-  constructor(private root: HTMLElement) { }
-
-  /** Make the fab smaller (40 x 40 pixels) */
-  @bindable({ set: booleanAttr })
-  mini: boolean;
-
-  /** Modifies the FAB to wider size which includes a text label */
-  @bindable({ set: booleanAttr })
-  extended: boolean;
-
-  /** Set the mini fab touch target to 48 x 48 px. Only applies if FAB is set to mini as well. */
-  @bindable({ set: booleanAttr })
-  touch: boolean;
-
-  /** Animates the FAB in or out of view */
-  @bindable({ set: booleanAttr })
-  exited: boolean;
-
-  /** Optional. Apply a Material Icon. */
-  @bindable()
-  icon: string;
-
-  /** Optional, for the text label. Applicable only for Extended FAB. */
-  @bindable()
-  label: string;
-
-
-  /** Set the button disabled */
-  @bindable({ set: booleanAttr })
-  disabled: boolean;
-  disabledChanged() {
-    if (this.disabled) {
-      this.root.setAttribute('disabled', '');
-    } else {
-      this.root.removeAttribute('disabled');
-    }
-  }
-}
+import { customElement, bindable, inject } from 'aurelia';
+import { booleanAttr } from '../base';
+import template from './mdc-fab.html?raw';
+
+/**
+ * @selector mdc-fab
+ * @selector a[mdc-fab]
+ * @selector button[mdc-fab]
+ */
+@inject(Element)
+@customElement({ name: 'mdc-fab', template })
+export class MdcFab {
+  constructor(private root: HTMLElement) { }
+
+  /** Make the fab smaller (40 x 40 pixels) */
+  @bindable({ set: booleanAttr })
+  mini: boolean;
+
+  /** Modifies the FAB to wider size which includes a text label */
+  @bindable({ set: booleanAttr })
+  extended: boolean;
+
+  /** Set the mini fab touch target to 48 x 48 px. Only applies if FAB is set to mini as well. */
+  @bindable({ set: booleanAttr })
+  touch: boolean;
+
+  /** Animates the FAB in or out of view */
+  @bindable({ set: booleanAttr })
+  exited: boolean;
+
+  /** Optional. Apply a Material Icon. */
+  @bindable()
+  icon: string;
+
+  /** Optional, for the text label. Applicable only for Extended FAB. */
+  @bindable()
+  label: string;
+
+
+  /** Set the button disabled */
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+  disabledChanged() {
+    if (this.disabled) {
+      this.root.setAttribute('disabled', '');
+    } else {
+      this.root.removeAttribute('disabled');
+    }
+  }
+}

package/src/floating-label/mdc-floating-label.html

@@ -1 +1 @@
-<template class="mdc-floating-label"><au-slot></au-slot></template>
+<template class="mdc-floating-label"><au-slot></au-slot></template>

package/src/floating-label/mdc-floating-label.ts

@@ -1,44 +1,44 @@
-import { inject, customElement } from 'aurelia';
-import { MDCFloatingLabelFoundation, MDCFloatingLabelAdapter } from '@material/floating-label';
-import { MdcComponent } from '../base';
-import { estimateScrollWidth } from '@material/dom/ponyfill';
-import template from './mdc-floating-label.html?raw';
-
-@inject(Element)
-@customElement({ name: 'mdc-floating-label', template })
-export class MdcFloatingLabel extends MdcComponent<MDCFloatingLabelFoundation> {
-  shake(shouldShake: boolean) {
-    this.foundation?.shake(shouldShake);
-  }
-
-  /**
-   * Styles the label to float/dock.
-   * @param shouldFloat If true, floats the label by adding a CSS class; otherwise, docks it by removing the class.
-   */
-  float(shouldFloat: boolean) {
-    this.foundation?.float(shouldFloat);
-  }
-
-  /**
-   * Styles the label as required.
-   * @param isRequired If true, adds an asterisk to the label, indicating that it is required.
-   */
-  setRequired(isRequired: boolean) {
-    this.foundation?.setRequired(isRequired);
-  }
-
-  getWidth(): number {
-    return this.foundation!.getWidth();
-  }
-
-  getDefaultFoundation() {
-    const adapter: MDCFloatingLabelAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      getWidth: () => estimateScrollWidth(this.root),
-      registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),
-      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),
-    };
-    return new MDCFloatingLabelFoundation(adapter);
-  }
-}
+import { inject, customElement } from 'aurelia';
+import { MDCFloatingLabelFoundation, MDCFloatingLabelAdapter } from '@material/floating-label';
+import { MdcComponent } from '../base';
+import { estimateScrollWidth } from '@material/dom/ponyfill';
+import template from './mdc-floating-label.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-floating-label', template })
+export class MdcFloatingLabel extends MdcComponent<MDCFloatingLabelFoundation> {
+  shake(shouldShake: boolean) {
+    this.foundation?.shake(shouldShake);
+  }
+
+  /**
+   * Styles the label to float/dock.
+   * @param shouldFloat If true, floats the label by adding a CSS class; otherwise, docks it by removing the class.
+   */
+  float(shouldFloat: boolean) {
+    this.foundation?.float(shouldFloat);
+  }
+
+  /**
+   * Styles the label as required.
+   * @param isRequired If true, adds an asterisk to the label, indicating that it is required.
+   */
+  setRequired(isRequired: boolean) {
+    this.foundation?.setRequired(isRequired);
+  }
+
+  getWidth(): number {
+    return this.foundation!.getWidth();
+  }
+
+  getDefaultFoundation() {
+    const adapter: MDCFloatingLabelAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      getWidth: () => estimateScrollWidth(this.root),
+      registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),
+    };
+    return new MDCFloatingLabelFoundation(adapter);
+  }
+}

package/src/form-field/mdc-form-field.html

@@ -1,6 +1,6 @@
-<template class="mdc-form-field
-    ${cssClasses.ROOT}--au ${nowrap ? cssClasses.ROOT + '--nowrap' : ''}
-    ${alignEnd ? cssClasses.ROOT + '--align-end' : ''}
-    ${spaceBetween ? cssClasses.ROOT + '--space-between' : ''}">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-form-field
+    ${cssClasses.ROOT}--au ${nowrap ? cssClasses.ROOT + '--nowrap' : ''}
+    ${alignEnd ? cssClasses.ROOT + '--align-end' : ''}
+    ${spaceBetween ? cssClasses.ROOT + '--space-between' : ''}">
+  <au-slot></au-slot>
+</template>

package/src/icon/mdc-icon.html

@@ -1,3 +1,3 @@
-<template class="material-icons">
-  <au-slot></au-slot>
-</template>
+<template class="material-icons">
+  <au-slot></au-slot>
+</template>

package/src/icon/mdc-icon.ts

@@ -1,11 +1,11 @@
-import { customElement, inject } from 'aurelia';
-import template from './mdc-icon.html?raw';
-
-/**
- * @selector mdc-icon
- */
-@inject(Element)
-@customElement({ name: 'mdc-icon', template })
-export class MdcIcon {
-  constructor(public root: HTMLElement) { }
-}
+import { customElement, inject } from 'aurelia';
+import template from './mdc-icon.html?raw';
+
+/**
+ * @selector mdc-icon
+ */
+@inject(Element)
+@customElement({ name: 'mdc-icon', template })
+export class MdcIcon {
+  constructor(public root: HTMLElement) { }
+}

package/src/icon-button/enhance-mdc-icon-button.ts

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

package/src/icon-button/mdc-icon-button-icon/mdc-icon-button-icon.html

@@ -1,4 +1,4 @@
-<template class="mdc-icon-button__icon ${on ? 'mdc-icon-button__icon--on' : ''} material-icons">
-  <au-slot></au-slot>
-  <span class="material-icons" if.bind="icon">${icon}</span>
-</template>
+<template class="mdc-icon-button__icon ${on ? 'mdc-icon-button__icon--on' : ''} material-icons">
+  <au-slot></au-slot>
+  <span class="material-icons" if.bind="icon">${icon}</span>
+</template>

package/src/icon-button/mdc-icon-button-icon/mdc-icon-button-icon.ts

@@ -1,29 +1,29 @@
-import { customElement, bindable } from 'aurelia';
-import { booleanAttr } from '../../base';
-import template from './mdc-icon-button-icon.html?raw';
-
-/**
- * Optional. Used as a toggle icon button element.
- * @selector mdc-icon-button-icon
- */
-@customElement({ name: 'mdc-icon-button-icon', template })
-export class MdcIconButtonIcon {
-  /** Indicates an "on" toggle element */
-  @bindable({ set: booleanAttr })
-  on: boolean;
-
-  /** Optional. Set a Material icon. */
-  @bindable()
-  icon: string;
-}
-
-/** @hidden */
-export interface IMdcIconButtonIconElement extends HTMLElement {
-  checked: boolean;
-  indeterminate: boolean;
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcIconButtonIcon;
-    };
-  };
-}
+import { customElement, bindable } from 'aurelia';
+import { booleanAttr } from '../../base';
+import template from './mdc-icon-button-icon.html?raw';
+
+/**
+ * Optional. Used as a toggle icon button element.
+ * @selector mdc-icon-button-icon
+ */
+@customElement({ name: 'mdc-icon-button-icon', template })
+export class MdcIconButtonIcon {
+  /** Indicates an "on" toggle element */
+  @bindable({ set: booleanAttr })
+  on: boolean;
+
+  /** Optional. Set a Material icon. */
+  @bindable()
+  icon: string;
+}
+
+/** @hidden */
+export interface IMdcIconButtonIconElement extends HTMLElement {
+  checked: boolean;
+  indeterminate: boolean;
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcIconButtonIcon;
+    };
+  };
+}

package/src/icon-button/mdc-icon-button.html

@@ -1,11 +1,11 @@
-<template class="
-    mdc-icon-button mdc-icon-button--display-flex
-    ${on ? 'mdc-icon-button--on' : ''}
-    ${icon ? 'material-icons' : ''}
-    ${touch ? 'mdc-icon-button--touch' : ''}
-  " mdc-ripple="no-class.bind: true; unbounded.bind: true" click.trigger="handleClick()">
-  <div class="mdc-icon-button__ripple"></div>
-  <au-slot></au-slot>
-  <span if.bind="icon">${icon}</span>
-  <div class="mdc-icon-button__touch" if.bind="touch"></div>
-</template>
+<template class="
+    mdc-icon-button mdc-icon-button--display-flex
+    ${on ? 'mdc-icon-button--on' : ''}
+    ${icon ? 'material-icons' : ''}
+    ${touch ? 'mdc-icon-button--touch' : ''}
+  " mdc-ripple="no-class.bind: true; unbounded.bind: true" click.trigger="handleClick()">
+  <div class="mdc-icon-button__ripple"></div>
+  <au-slot></au-slot>
+  <span if.bind="icon">${icon}</span>
+  <div class="mdc-icon-button__touch" if.bind="touch"></div>
+</template>

package/src/icon-button/mdc-icon-button.ts

@@ -1,69 +1,69 @@
-import { customElement, inject, BindingMode, bindable } from 'aurelia';
-import { MDCIconButtonToggleFoundation, MDCIconButtonToggleAdapter, MDCIconButtonToggleEventDetail, strings } from '@material/icon-button';
-import { MdcComponent, booleanAttr } from '../base';
-import template from './mdc-icon-button.html?raw';
-
-/**
- * @selector button[mdc-icon-button]
- * @selector a[mdc-icon-button]
- * @selector mdc-icon-button
- */
-@inject(Element)
-@customElement({ name: 'mdc-icon-button', template })
-export class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {
-  /** Sets the toggle state to the provided value */
-  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
-  on: boolean;
-
-  /** Optional. Set a Material icon as a non-toggle icon. */
-  @bindable()
-  icon: string;
-
-  // this is necessary for the route-href to work
-  @bindable()
-  href: string;
-  hrefChanged() {
-    if (this.href) {
-      this.root.setAttribute('href', this.href);
-    } else {
-      this.root.removeAttribute('href');
-    }
-  }
-
-  /**
-   * Set the component touch target to 48 x 48 px
-   */
-  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
-  touch: boolean;
-
-  attached() {
-    this.hrefChanged();
-    if (this.root.querySelector('mdc-icon-button-icon')) {
-      this.foundation = this.getDefaultFoundation();
-      this.foundation.init();
-    }
-  }
-
-  handleClick() {
-    this.foundation?.handleClick();
-    return true;
-  }
-
-  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: MDCIconButtonToggleAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      hasClass: (className) => this.root.classList.contains(className),
-      notifyChange: (evtData) => {
-        this.emit<MDCIconButtonToggleEventDetail>(strings.CHANGE_EVENT, evtData);
-        this.on = evtData.isOn;
-      },
-      removeClass: (className) => this.root.classList.remove(className),
-      getAttr: (attrName) => this.root.getAttribute(attrName),
-      setAttr: (attrName, attrValue) => this.root.setAttribute(attrName, attrValue),
-    };
-    return new MDCIconButtonToggleFoundation(adapter);
-  }
-
-}
+import { customElement, inject, BindingMode, bindable } from 'aurelia';
+import { MDCIconButtonToggleFoundation, MDCIconButtonToggleAdapter, MDCIconButtonToggleEventDetail, strings } from '@material/icon-button';
+import { MdcComponent, booleanAttr } from '../base';
+import template from './mdc-icon-button.html?raw';
+
+/**
+ * @selector button[mdc-icon-button]
+ * @selector a[mdc-icon-button]
+ * @selector mdc-icon-button
+ */
+@inject(Element)
+@customElement({ name: 'mdc-icon-button', template })
+export class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {
+  /** Sets the toggle state to the provided value */
+  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
+  on: boolean;
+
+  /** Optional. Set a Material icon as a non-toggle icon. */
+  @bindable()
+  icon: string;
+
+  // this is necessary for the route-href to work
+  @bindable()
+  href: string;
+  hrefChanged() {
+    if (this.href) {
+      this.root.setAttribute('href', this.href);
+    } else {
+      this.root.removeAttribute('href');
+    }
+  }
+
+  /**
+   * Set the component touch target to 48 x 48 px
+   */
+  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
+  touch: boolean;
+
+  attached() {
+    this.hrefChanged();
+    if (this.root.querySelector('mdc-icon-button-icon')) {
+      this.foundation = this.getDefaultFoundation();
+      this.foundation.init();
+    }
+  }
+
+  handleClick() {
+    this.foundation?.handleClick();
+    return true;
+  }
+
+  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: MDCIconButtonToggleAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      notifyChange: (evtData) => {
+        this.emit<MDCIconButtonToggleEventDetail>(strings.CHANGE_EVENT, evtData);
+        this.on = evtData.isOn;
+      },
+      removeClass: (className) => this.root.classList.remove(className),
+      getAttr: (attrName) => this.root.getAttribute(attrName),
+      setAttr: (attrName, attrValue) => this.root.setAttribute(attrName, attrValue),
+    };
+    return new MDCIconButtonToggleFoundation(adapter);
+  }
+
+}

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

@@ -1,9 +1,9 @@
-<template class="mdc-image-list__item">
-  <div class="mdc-image-list__image-aspect-container" if.bind="hasAspect">
-    <img class="mdc-image-list__image" src.bind="src">
-  </div>
-  <img class="mdc-image-list__image" src.bind="src" if.bind="!hasAspect">
-  <div class="mdc-image-list__supporting" if.bind="label">
-    <span class="mdc-image-list__label">${label}</span>
-  </div>
-</template>
+<template class="mdc-image-list__item">
+  <div class="mdc-image-list__image-aspect-container" if.bind="hasAspect">
+    <img class="mdc-image-list__image" src.bind="src">
+  </div>
+  <img class="mdc-image-list__image" src.bind="src" if.bind="!hasAspect">
+  <div class="mdc-image-list__supporting" if.bind="label">
+    <span class="mdc-image-list__label">${label}</span>
+  </div>
+</template>

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

@@ -1,31 +1,31 @@
-import { customElement, inject, bindable } from 'aurelia';
-import { number } from '../../base';
-import template from './mdc-image-list-item.html?raw';
-
-/**
- * Mandatory. Indicates each item in an Image List.
- * @selector mdc-image-list-item
- */
-@inject(Element)
-@customElement({ name: 'mdc-image-list-item', template })
-export class MdcImageListItem {
-  constructor(private root: HTMLElement) { }
-
-  /** Image url */
-  @bindable()
-  src: string;
-
-  /** Image label */
-  @bindable()
-  label: string;
-
-  hasAspect: boolean;
-
-  /** Sets image aspect ratio */
-  @bindable({ set: number })
-  aspect: number;
-  aspectChanged() {
-    this.hasAspect = !isNaN(this.aspect);
-    this.root.style.setProperty('--mdc-image-list-item-aspect', isNaN(this.aspect) ? '1' : `${this.aspect}`);
-  }
-}
+import { customElement, inject, bindable } from 'aurelia';
+import { number } from '../../base';
+import template from './mdc-image-list-item.html?raw';
+
+/**
+ * Mandatory. Indicates each item in an Image List.
+ * @selector mdc-image-list-item
+ */
+@inject(Element)
+@customElement({ name: 'mdc-image-list-item', template })
+export class MdcImageListItem {
+  constructor(private root: HTMLElement) { }
+
+  /** Image url */
+  @bindable()
+  src: string;
+
+  /** Image label */
+  @bindable()
+  label: string;
+
+  hasAspect: boolean;
+
+  /** Sets image aspect ratio */
+  @bindable({ set: number })
+  aspect: number;
+  aspectChanged() {
+    this.hasAspect = !isNaN(this.aspect);
+    this.root.style.setProperty('--mdc-image-list-item-aspect', isNaN(this.aspect) ? '1' : `${this.aspect}`);
+  }
+}

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

@@ -1,7 +1,7 @@
-<template class="mdc-image-list
-  ${masonry ? 'mdc-image-list--masonry' : ''}
-  ${textProtection ? 'mdc-image-list--with-text-protection' : ''}
-  ${columns ? 'mdc-image-list--columns-set' : ''}">
-  <style ref="style"></style>
-  <au-slot></au-slot>
-</template>
+<template class="mdc-image-list
+  ${masonry ? 'mdc-image-list--masonry' : ''}
+  ${textProtection ? 'mdc-image-list--with-text-protection' : ''}
+  ${columns ? 'mdc-image-list--columns-set' : ''}">
+  <style ref="style"></style>
+  <au-slot></au-slot>
+</template>