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

package/src/base/next-element.ts

@@ -1,39 +1,39 @@
-export function nextElement(element?: HTMLElement, reverse?: boolean) {
-  /*check if an element is defined or use activeElement*/
-  const activeElem = element instanceof HTMLElement ? element : document.activeElement as HTMLElement;
-  if (!activeElem) {
-    return;
-  }
-
-  let queryString = [
-    'a:not([disabled]):not([tabindex="-1"])',
-    'button:not([disabled]):not([tabindex="-1"])',
-    'input:not([disabled]):not([tabindex="-1"]):not(.mdc-text-field__input)',
-    '.mdc-text-field',
-    'select:not([disabled]):not([tabindex="-1"])',
-    '[tabindex]:not([disabled]):not([tabindex="-1"])'
-    /* add custom queries here */
-  ].join(','),
-    queryResult = Array.from(document.querySelectorAll<HTMLElement>(queryString)).filter(elem => {
-      /*check for visibility while always include the current activeElement*/
-      return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem === activeElem;
-    }),
-    indexedList = queryResult.slice().filter(elem => {
-      /* filter out all indexes not greater than 0 */
-      return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true;
-    }).sort((a, b) => {
-      /* sort the array by index from smallest to largest */
-      return a.tabIndex != 0 && b.tabIndex != 0
-        ? (a.tabIndex < b.tabIndex ? -1 : b.tabIndex < a.tabIndex ? 1 : 0)
-        : a.tabIndex != 0 ? -1 : b.tabIndex != 0 ? 1 : 0;
-    }),
-    focusable = [...indexedList, ...queryResult.filter(elem => {
-      /* filter out all indexes above 0 */
-      return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false;
-    })];
-
-  /* if reverse is true return the previous focusable element
-     if reverse is false return the next focusable element */
-  return reverse ? (focusable[focusable.indexOf(activeElem) - 1] || focusable[focusable.length - 1])
-    : (focusable[focusable.indexOf(activeElem) + 1] || focusable[0]);
-}
+export function nextElement(element?: HTMLElement, reverse?: boolean) {
+  /*check if an element is defined or use activeElement*/
+  const activeElem = element instanceof HTMLElement ? element : document.activeElement as HTMLElement;
+  if (!activeElem) {
+    return;
+  }
+
+  let queryString = [
+    'a:not([disabled]):not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([tabindex="-1"]):not(.mdc-text-field__input)',
+    '.mdc-text-field',
+    'select:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([disabled]):not([tabindex="-1"])'
+    /* add custom queries here */
+  ].join(','),
+    queryResult = Array.from(document.querySelectorAll<HTMLElement>(queryString)).filter(elem => {
+      /*check for visibility while always include the current activeElement*/
+      return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem === activeElem;
+    }),
+    indexedList = queryResult.slice().filter(elem => {
+      /* filter out all indexes not greater than 0 */
+      return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true;
+    }).sort((a, b) => {
+      /* sort the array by index from smallest to largest */
+      return a.tabIndex != 0 && b.tabIndex != 0
+        ? (a.tabIndex < b.tabIndex ? -1 : b.tabIndex < a.tabIndex ? 1 : 0)
+        : a.tabIndex != 0 ? -1 : b.tabIndex != 0 ? 1 : 0;
+    }),
+    focusable = [...indexedList, ...queryResult.filter(elem => {
+      /* filter out all indexes above 0 */
+      return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false;
+    })];
+
+  /* if reverse is true return the previous focusable element
+     if reverse is false return the next focusable element */
+  return reverse ? (focusable[focusable.indexOf(activeElem) - 1] || focusable[focusable.length - 1])
+    : (focusable[focusable.indexOf(activeElem) + 1] || focusable[0]);
+}

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

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

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

@@ -1,15 +1,15 @@
-import { customAttribute, inject } from 'aurelia';
-
-/**
- * The mdc-button-label attribute is required in order for the trailing icon to be styled appropriately.
- * @selector [mdc-button-label]
- */
-@inject(Element)
-@customAttribute('mdc-button-label')
-export class MdcButtonLabel {
-  constructor(private root: HTMLElement) { }
-
-  attached() {
-    this.root.classList.add('mdc-button__label');
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * The mdc-button-label attribute is required in order for the trailing icon to be styled appropriately.
+ * @selector [mdc-button-label]
+ */
+@inject(Element)
+@customAttribute('mdc-button-label')
+export class MdcButtonLabel {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-button__label');
+  }
+}

package/src/button/mdc-button.html

@@ -1,12 +1,12 @@
-<template class="
-    mdc-button
-    ${touch ? 'mdc-button--touch' : ''}
-    ${raised ? 'mdc-button--raised' : ''}
-    ${unelevated ? 'mdc-button--unelevated' : ''}
-    ${outlined ? 'mdc-button--outlined' : ''}
-  " tabindex.bind="disabled ? -1 : 0" mdc-ripple="no-class.bind: true">
-  <div class="mdc-button__ripple"></div>
-  <span class="mdc-button__label" if.bind="label">${label}</span>
-  <div class="mdc-button__touch" if.bind="touch"></div>
-  <au-slot></au-slot>
-</template>
+<template class="
+    mdc-button
+    ${touch ? 'mdc-button--touch' : ''}
+    ${raised ? 'mdc-button--raised' : ''}
+    ${unelevated ? 'mdc-button--unelevated' : ''}
+    ${outlined ? 'mdc-button--outlined' : ''}
+  " tabindex.bind="disabled ? -1 : 0" mdc-ripple="no-class.bind: true">
+  <div class="mdc-button__ripple"></div>
+  <span class="mdc-button__label" if.bind="label">${label}</span>
+  <div class="mdc-button__touch" if.bind="touch"></div>
+  <au-slot></au-slot>
+</template>

package/src/button/mdc-button.ts

@@ -1,62 +1,62 @@
-import { bindable, customElement, inject } from 'aurelia';
-import { booleanAttr } from '../base';
-import template from './mdc-button.html?raw';
-
-/**
- * @selector button[mdc-button]
- * @selector a[mdc-button]
- * @selector mdc-button
- */
-@inject(Element)
-@customElement({ name: 'mdc-button', template })
-export class MdcButton {
-  constructor(public root: HTMLElement) { }
-
-  /**
-   * Set the component label
-   */
-  @bindable()
-  label: string;
-
-  /**
-   * Set the component touch target to 48 x 48 px
-   */
-  @bindable({ set: booleanAttr })
-  touch: boolean;
-
-  /**
-   * A contained button that is elevated upon the surface
-   */
-  @bindable({ set: booleanAttr })
-  raised: boolean;
-
-  /**
-   * A contained button that is flush with the surface
-   */
-  @bindable({ set: booleanAttr })
-  unelevated: boolean;
-
-  /**
-   * A contained button that is flush with the surface and has a visible border
-   */
-  @bindable({ set: booleanAttr })
-  outlined: boolean;
-
-  /**
-   * Set the button disabled
-   */
-  @bindable({ set: booleanAttr })
-  disabled: boolean;
-  disabledChanged() {
-    if (this.disabled) {
-      this.root.setAttribute('disabled', '');
-    } else {
-      this.root.removeAttribute('disabled');
-    }
-  }
-
-  attached() {
-    const icons = this.root.querySelectorAll('mdc-icon');
-    Array.from(icons).forEach(x => x.classList.add('mdc-button__icon'));
-  }
-}
+import { bindable, customElement, inject } from 'aurelia';
+import { booleanAttr } from '../base';
+import template from './mdc-button.html?raw';
+
+/**
+ * @selector button[mdc-button]
+ * @selector a[mdc-button]
+ * @selector mdc-button
+ */
+@inject(Element)
+@customElement({ name: 'mdc-button', template })
+export class MdcButton {
+  constructor(public root: HTMLElement) { }
+
+  /**
+   * Set the component label
+   */
+  @bindable()
+  label: string;
+
+  /**
+   * Set the component touch target to 48 x 48 px
+   */
+  @bindable({ set: booleanAttr })
+  touch: boolean;
+
+  /**
+   * A contained button that is elevated upon the surface
+   */
+  @bindable({ set: booleanAttr })
+  raised: boolean;
+
+  /**
+   * A contained button that is flush with the surface
+   */
+  @bindable({ set: booleanAttr })
+  unelevated: boolean;
+
+  /**
+   * A contained button that is flush with the surface and has a visible border
+   */
+  @bindable({ set: booleanAttr })
+  outlined: boolean;
+
+  /**
+   * Set the button disabled
+   */
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+  disabledChanged() {
+    if (this.disabled) {
+      this.root.setAttribute('disabled', '');
+    } else {
+      this.root.removeAttribute('disabled');
+    }
+  }
+
+  attached() {
+    const icons = this.root.querySelectorAll('mdc-icon');
+    Array.from(icons).forEach(x => x.classList.add('mdc-button__icon'));
+  }
+}

package/src/card/mdc-card-action-buttons.ts

@@ -1,19 +1,19 @@
-import { customElement, inject } from 'aurelia';
-
-/**
- * Optional. A group of action buttons, displayed on the left side of the card (in LTR).
- * @selector mdc-card-action-buttons
- */
-@inject(Element)
-@customElement({ name: 'mdc-card-action-buttons', template: '<template class="mdc-card__action-buttons"><au-slot></au-slot></template>' })
-export class MdcCardActionButtons {
-  constructor(private root: HTMLElement) { }
-
-  attached() {
-    const children = this.root.querySelectorAll('.mdc-button');
-    for (let i = 0; i < children.length; ++i) {
-      const child = children[i];
-      child.classList.add('mdc-card__action', 'mdc-card__action--button');
-    }
-  }
-}
+import { customElement, inject } from 'aurelia';
+
+/**
+ * Optional. A group of action buttons, displayed on the left side of the card (in LTR).
+ * @selector mdc-card-action-buttons
+ */
+@inject(Element)
+@customElement({ name: 'mdc-card-action-buttons', template: '<template class="mdc-card__action-buttons"><au-slot></au-slot></template>' })
+export class MdcCardActionButtons {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    const children = this.root.querySelectorAll('.mdc-button');
+    for (let i = 0; i < children.length; ++i) {
+      const child = children[i];
+      child.classList.add('mdc-card__action', 'mdc-card__action--button');
+    }
+  }
+}

package/src/card/mdc-card-action-icons.ts

@@ -1,19 +1,19 @@
-import { customElement, inject } from 'aurelia';
-
-/**
- * Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR).
- * @selector mdc-card-action-icons
- */
-@inject(Element)
-@customElement({ name: 'mdc-card-action-icons', template: '<template class="mdc-card__action-icons"><au-slot></au-slot></template>' })
-export class MdcCardActionIcons {
-  constructor(private root: HTMLElement) { }
-
-  attached() {
-    const children = this.root.querySelectorAll('.mdc-icon-button');
-    for (let i = 0; i < children.length; ++i) {
-      const child = children[i];
-      child.classList.add('mdc-card__action', 'mdc-card__action--icon');
-    }
-  }
-}
+import { customElement, inject } from 'aurelia';
+
+/**
+ * Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR).
+ * @selector mdc-card-action-icons
+ */
+@inject(Element)
+@customElement({ name: 'mdc-card-action-icons', template: '<template class="mdc-card__action-icons"><au-slot></au-slot></template>' })
+export class MdcCardActionIcons {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    const children = this.root.querySelectorAll('.mdc-icon-button');
+    for (let i = 0; i < children.length; ++i) {
+      const child = children[i];
+      child.classList.add('mdc-card__action', 'mdc-card__action--icon');
+    }
+  }
+}

package/src/card/mdc-card-actions/mdc-card-actions.html

@@ -1,3 +1,3 @@
-<template class="mdc-card__actions ${fullBleed ? 'mdc-card__actions--full-bleed' : ''}">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-card__actions ${fullBleed ? 'mdc-card__actions--full-bleed' : ''}">
+  <au-slot></au-slot>
+</template>

package/src/card/mdc-card-actions/mdc-card-actions.ts

@@ -1,15 +1,15 @@
-import { customElement, bindable } from 'aurelia';
-import { booleanAttr } from '../../base';
-import template from './mdc-card-actions.html?raw';
-
-/**
- * @selector mdc-card-actions
- */
-@customElement({ name: 'mdc-card-actions', template })
-export class MdcCardActions {
-  /**
-   * Removes the action area's padding and causes its only child (an mdc-card__action element) to consume 100% of the action area's width.
-   */
-  @bindable({ set: booleanAttr })
-  fullBleed: boolean;
-}
+import { customElement, bindable } from 'aurelia';
+import { booleanAttr } from '../../base';
+import template from './mdc-card-actions.html?raw';
+
+/**
+ * @selector mdc-card-actions
+ */
+@customElement({ name: 'mdc-card-actions', template })
+export class MdcCardActions {
+  /**
+   * Removes the action area's padding and causes its only child (an mdc-card__action element) to consume 100% of the action area's width.
+   */
+  @bindable({ set: booleanAttr })
+  fullBleed: boolean;
+}

package/src/card/mdc-card-media/mdc-card-media.html

@@ -1,5 +1,5 @@
-<template class="mdc-card__media ${square ? 'mdc-card__media--square' : ''} ${wide ? 'mdc-card__media--16-9' : ''}">
-  <div class="mdc-card__media-content">
-    <au-slot></au-slot>
-  </div>
-</template>
+<template class="mdc-card__media ${square ? 'mdc-card__media--square' : ''} ${wide ? 'mdc-card__media--16-9' : ''}">
+  <div class="mdc-card__media-content">
+    <au-slot></au-slot>
+  </div>
+</template>

package/src/card/mdc-card-media/mdc-card-media.ts

@@ -1,21 +1,21 @@
-import { customElement, bindable } from 'aurelia';
-import { booleanAttr } from '../../base';
-import template from './mdc-card-media.html?raw';
-
-/**
- * @selector mdc-card-media
- */
-@customElement({ name: 'mdc-card-media', template })
-export class MdcCardMedia {
-  /**
-   * Automatically scales the media area's height to equal its width.
-   */
-  @bindable({ set: booleanAttr })
-  square: boolean;
-
-  /**
-   * Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio.
-   */
-  @bindable({ set: booleanAttr })
-  wide: boolean;
-}
+import { customElement, bindable } from 'aurelia';
+import { booleanAttr } from '../../base';
+import template from './mdc-card-media.html?raw';
+
+/**
+ * @selector mdc-card-media
+ */
+@customElement({ name: 'mdc-card-media', template })
+export class MdcCardMedia {
+  /**
+   * Automatically scales the media area's height to equal its width.
+   */
+  @bindable({ set: booleanAttr })
+  square: boolean;
+
+  /**
+   * Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio.
+   */
+  @bindable({ set: booleanAttr })
+  wide: boolean;
+}

package/src/card/mdc-card-primary-action.html

@@ -1,5 +1,5 @@
-<template class="mdc-card__primary-action" tabindex=0
-  mdc-ripple="disabled.bind: disableRipple; surface.bind: rippleElement">
-  <div class="mdc-card__ripple" ref="rippleElement"></div>
-  <au-slot></au-slot>
-</template>
+<template class="mdc-card__primary-action" tabindex=0
+  mdc-ripple="disabled.bind: disableRipple; surface.bind: rippleElement">
+  <div class="mdc-card__ripple" ref="rippleElement"></div>
+  <au-slot></au-slot>
+</template>

package/src/card/mdc-card-primary-action.ts

@@ -1,16 +1,16 @@
-import { customElement, bindable } from 'aurelia';
-import { booleanAttr } from '../base';
-import template from './mdc-card-primary-action.html?raw';
-
-/**
- * Optional. The main tappable area of the card. Typically contains most (or all) card content except mdc-card-actions.
- * Only applicable to cards that have a primary action that the main surface should trigger.
- * @selector mdc-card-primary-action
- */
-@customElement({ name: 'mdc-card-primary-action', template })
-export class MdcCardPrimaryAction {
-
-  /** Disables ripple effect */
-  @bindable({ set: booleanAttr })
-  disableRipple: boolean;
-}
+import { customElement, bindable } from 'aurelia';
+import { booleanAttr } from '../base';
+import template from './mdc-card-primary-action.html?raw';
+
+/**
+ * Optional. The main tappable area of the card. Typically contains most (or all) card content except mdc-card-actions.
+ * Only applicable to cards that have a primary action that the main surface should trigger.
+ * @selector mdc-card-primary-action
+ */
+@customElement({ name: 'mdc-card-primary-action', template })
+export class MdcCardPrimaryAction {
+
+  /** Disables ripple effect */
+  @bindable({ set: booleanAttr })
+  disableRipple: boolean;
+}

package/src/card/mdc-card.html

@@ -1,3 +1,3 @@
-<template class="mdc-card ${outlined ? 'mdc-card--outlined' : ''}">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-card ${outlined ? 'mdc-card--outlined' : ''}">
+  <au-slot></au-slot>
+</template>

package/src/card/mdc-card.ts

@@ -1,16 +1,16 @@
-import { customElement, bindable } from 'aurelia';
-import { booleanAttr } from '../base';
-import template from './mdc-card.html?raw';
-
-/**
- * @selector mdc-card
- */
-@customElement({ name: 'mdc-card', template })
-export class MdcCard {
-
-  /**
-   * Removes the shadow and displays a hairline stroke instead.
-   */
-  @bindable({ set: booleanAttr })
-  outlined: boolean;
-}
+import { customElement, bindable } from 'aurelia';
+import { booleanAttr } from '../base';
+import template from './mdc-card.html?raw';
+
+/**
+ * @selector mdc-card
+ */
+@customElement({ name: 'mdc-card', template })
+export class MdcCard {
+
+  /**
+   * Removes the shadow and displays a hairline stroke instead.
+   */
+  @bindable({ set: booleanAttr })
+  outlined: boolean;
+}

package/src/checkbox/mdc-checkbox.html

@@ -1,12 +1,12 @@
-<template class="mdc-checkbox ${touch ? 'mdc-checkbox--touch' : ''}"
-  mdc-ripple="no-class.bind: true; input.bind: nativeControl_; unbounded.bind: true; disabled.bind: disableRipple">
-  <input type="checkbox" class="mdc-checkbox__native-control" id="${id}" ref="nativeControl_"
-    change.trigger="handleChange_()" />
-  <div class="mdc-checkbox__background">
-    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-    </svg>
-    <div class="mdc-checkbox__mixedmark"></div>
-  </div>
-  <div class="mdc-checkbox__ripple"></div>
-</template>
+<template class="mdc-checkbox ${touch ? 'mdc-checkbox--touch' : ''}"
+  mdc-ripple="no-class.bind: true; input.bind: nativeControl_; unbounded.bind: true; disabled.bind: disableRipple">
+  <input type="checkbox" class="mdc-checkbox__native-control" id="${id}" ref="nativeControl_"
+    change.trigger="handleChange_()" />
+  <div class="mdc-checkbox__background">
+    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+    </svg>
+    <div class="mdc-checkbox__mixedmark"></div>
+  </div>
+  <div class="mdc-checkbox__ripple"></div>
+</template>