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

package/src/base/elements/i-validated-element.ts

@@ -1,12 +1,12 @@
-/** @hidden */
-export interface IError {
-  message: string | undefined;
-}
-
-/** @hidden */
-export interface IValidatedElement extends HTMLElement {
-  addError(error: IError): void;
-  removeError(error: IError): void;
-  renderErrors(): void;
-  valid: boolean;
-}
+/** @hidden */
+export interface IError {
+  message: string | undefined;
+}
+
+/** @hidden */
+export interface IValidatedElement extends HTMLElement {
+  addError(error: IError): void;
+  removeError(error: IError): void;
+  renderErrors(): void;
+  valid: boolean;
+}

package/src/base/elements/mdc-promisify-reference.ts

@@ -1,21 +1,21 @@
-import { bindable, customElement, BindingMode } from 'aurelia';
-
-@customElement({ name: 'mdc-promisify-reference' })
-export class MdcPromisifyReference {
-  resolve: (value: unknown | PromiseLike<unknown>) => void;
-
-  @bindable({ mode: BindingMode.fromView })
-  promiseRef: Promise<unknown>;
-
-  @bindable({ mode: BindingMode.toView })
-  reference: unknown;
-  referenceChanged() {
-    if (this.reference) {
-      this.resolve(this.reference);
-    }
-  }
-
-  attached() {
-    this.promiseRef = new Promise(r => this.resolve = r);
-  }
-}
+import { bindable, customElement, BindingMode } from 'aurelia';
+
+@customElement({ name: 'mdc-promisify-reference' })
+export class MdcPromisifyReference {
+  resolve: (value: unknown | PromiseLike<unknown>) => void;
+
+  @bindable({ mode: BindingMode.fromView })
+  promiseRef: Promise<unknown>;
+
+  @bindable({ mode: BindingMode.toView })
+  reference: unknown;
+  referenceChanged() {
+    if (this.reference) {
+      this.resolve(this.reference);
+    }
+  }
+
+  attached() {
+    this.promiseRef = new Promise(r => this.resolve = r);
+  }
+}

package/src/base/interceptors.ts

@@ -1,25 +1,25 @@
-export function number(a: unknown): number {
-  return Number(a);
-}
-
-export function string(a: unknown): string {
-  return `${a}`;
-}
-
-export function boolean(a: unknown): boolean {
-  return !!a;
-}
-
-export function date(val: string | number | undefined | null): Date | null {
-  // Invalid date instances are quite problematic
-  // so we need to deal with it properly by default
-  if (val === null || val === undefined) {
-    return null;
-  }
-  const d = new Date(val);
-  return isNaN(d.getTime()) ? null : d;
-}
-
-export function booleanAttr(val: unknown): boolean {
-  return val || val === '' ? true : false;
-}
+export function number(a: unknown): number {
+  return Number(a);
+}
+
+export function string(a: unknown): string {
+  return `${a}`;
+}
+
+export function boolean(a: unknown): boolean {
+  return !!a;
+}
+
+export function date(val: string | number | undefined | null): Date | null {
+  // Invalid date instances are quite problematic
+  // so we need to deal with it properly by default
+  if (val === null || val === undefined) {
+    return null;
+  }
+  const d = new Date(val);
+  return isNaN(d.getTime()) ? null : d;
+}
+
+export function booleanAttr(val: unknown): boolean {
+  return val || val === '' ? true : false;
+}

package/src/base/material-palette.md

@@ -1,7 +1,7 @@
-To rebuild material palette code
-
-* go to https://material.io/resources/color
-* in `scripts/app-*.js` file find the text `t.MaterialPalette = r`
-* copy variable `r` assignment statement and paste it into the console
-* run `JSON.stringify(r.palettes.reduce((p,c)=>{p[c.name]=c.hexes.reduce((p1,c1)=>{p1[r.shades[c.hexes.indexOf(c1)]] = c1; return p1;},{}); return p; }, {}))`
-* clean up property names
+To rebuild material palette code
+
+* go to https://material.io/resources/color
+* in `scripts/app-*.js` file find the text `t.MaterialPalette = r`
+* copy variable `r` assignment statement and paste it into the console
+* run `JSON.stringify(r.palettes.reduce((p,c)=>{p[c.name]=c.hexes.reduce((p1,c1)=>{p1[r.shades[c.hexes.indexOf(c1)]] = c1; return p1;},{}); return p; }, {}))`
+* clean up property names

package/src/base/material-palette.ts

@@ -1,22 +1,22 @@
-/** @hidden */
-export const MATERIAL_PALETTE = {
-  red: { b50: '#FFEBEE', b100: '#FFCDD2', b200: '#EF9A9A', b300: '#E57373', b400: '#EF5350', b500: '#F44336', b600: '#E53935', b700: '#D32F2F', b800: '#C62828', b900: '#B71C1C', a100: '#FF8A80', a200: '#FF5252', a400: '#FF1744', a700: '#D50000' },
-  pink: { b50: '#FCE4EC', b100: '#F8BBD0', b200: '#F48FB1', b300: '#F06292', b400: '#EC407A', b500: '#E91E63', b600: '#D81B60', b700: '#C2185B', b800: '#AD1457', b900: '#880E4F', a100: '#FF80AB', a200: '#FF4081', a400: '#F50057', a700: '#C51162' },
-  purple: { b50: '#F3E5F5', b100: '#E1BEE7', b200: '#CE93D8', b300: '#BA68C8', b400: '#AB47BC', b500: '#9C27B0', b600: '#8E24AA', b700: '#7B1FA2', b800: '#6A1B9A', b900: '#4A148C', a100: '#EA80FC', a200: '#E040FB', a400: '#D500F9', a700: '#AA00FF' },
-  deepPurple: { b50: '#EDE7F6', b100: '#D1C4E9', b200: '#B39DDB', b300: '#9575CD', b400: '#7E57C2', b500: '#673AB7', b600: '#5E35B1', b700: '#512DA8', b800: '#4527A0', b900: '#311B92', a100: '#B388FF', a200: '#7C4DFF', a400: '#651FFF', a700: '#6200EA' },
-  indigo: { b50: '#E8EAF6', b100: '#C5CAE9', b200: '#9FA8DA', b300: '#7986CB', b400: '#5C6BC0', b500: '#3F51B5', b600: '#3949AB', b700: '#303F9F', b800: '#283593', b900: '#1A237E', a100: '#8C9EFF', a200: '#536DFE', a400: '#3D5AFE', a700: '#304FFE' },
-  blue: { b50: '#E3F2FD', b100: '#BBDEFB', b200: '#90CAF9', b300: '#64B5F6', b400: '#42A5F5', b500: '#2196F3', b600: '#1E88E5', b700: '#1976D2', b800: '#1565C0', b900: '#0D47A1', a100: '#82B1FF', a200: '#448AFF', a400: '#2979FF', a700: '#2962FF' },
-  lightBlue: { b50: '#E1F5FE', b100: '#B3E5FC', b200: '#81D4FA', b300: '#4FC3F7', b400: '#29B6F6', b500: '#03A9F4', b600: '#039BE5', b700: '#0288D1', b800: '#0277BD', b900: '#01579B', a100: '#80D8FF', a200: '#40C4FF', a400: '#00B0FF', a700: '#0091EA' },
-  cyan: { b50: '#E0F7FA', b100: '#B2EBF2', b200: '#80DEEA', b300: '#4DD0E1', b400: '#26C6DA', b500: '#00BCD4', b600: '#00ACC1', b700: '#0097A7', b800: '#00838F', b900: '#006064', a100: '#84FFFF', a200: '#18FFFF', a400: '#00E5FF', a700: '#00B8D4' },
-  teal: { b50: '#E0F2F1', b100: '#B2DFDB', b200: '#80CBC4', b300: '#4DB6AC', b400: '#26A69A', b500: '#009688', b600: '#00897B', b700: '#00796B', b800: '#00695C', b900: '#004D40', a100: '#A7FFEB', a200: '#64FFDA', a400: '#1DE9B6', a700: '#00BFA5' },
-  green: { b50: '#E8F5E9', b100: '#C8E6C9', b200: '#A5D6A7', b300: '#81C784', b400: '#66BB6A', b500: '#4CAF50', b600: '#43A047', b700: '#388E3C', b800: '#2E7D32', b900: '#1B5E20', a100: '#B9F6CA', a200: '#69F0AE', a400: '#00E676', a700: '#00C853' },
-  lightGreen: { b50: '#F1F8E9', b100: '#DCEDC8', b200: '#C5E1A5', b300: '#AED581', b400: '#9CCC65', b500: '#8BC34A', b600: '#7CB342', b700: '#689F38', b800: '#558B2F', b900: '#33691E', a100: '#CCFF90', a200: '#B2FF59', a400: '#76FF03', a700: '#64DD17' },
-  lime: { b50: '#F9FBE7', b100: '#F0F4C3', b200: '#E6EE9C', b300: '#DCE775', b400: '#D4E157', b500: '#CDDC39', b600: '#C0CA33', b700: '#AFB42B', b800: '#9E9D24', b900: '#827717', a100: '#F4FF81', a200: '#EEFF41', a400: '#C6FF00', a700: '#AEEA00' },
-  yellow: { b50: '#FFFDE7', b100: '#FFF9C4', b200: '#FFF59D', b300: '#FFF176', b400: '#FFEE58', b500: '#FFEB3B', b600: '#FDD835', b700: '#FBC02D', b800: '#F9A825', b900: '#F57F17', a100: '#FFFF8D', a200: '#FFFF00', a400: '#FFEA00', a700: '#FFD600' },
-  amber: { b50: '#FFF8E1', b100: '#FFECB3', b200: '#FFE082', b300: '#FFD54F', b400: '#FFCA28', b500: '#FFC107', b600: '#FFB300', b700: '#FFA000', b800: '#FF8F00', b900: '#FF6F00', a100: '#FFE57F', a200: '#FFD740', a400: '#FFC400', a700: '#FFAB00' },
-  orange: { b50: '#FFF3E0', b100: '#FFE0B2', b200: '#FFCC80', b300: '#FFB74D', b400: '#FFA726', b500: '#FF9800', b600: '#FB8C00', b700: '#F57C00', b800: '#EF6C00', b900: '#E65100', a100: '#FFD180', a200: '#FFAB40', a400: '#FF9100', a700: '#FF6D00' },
-  deepOrange: { b50: '#FBE9E7', b100: '#FFCCBC', b200: '#FFAB91', b300: '#FF8A65', b400: '#FF7043', b500: '#FF5722', b600: '#F4511E', b700: '#E64A19', b800: '#D84315', b900: '#BF360C', a100: '#FF9E80', a200: '#FF6E40', a400: '#FF3D00', a700: '#DD2C00' },
-  brown: { b50: '#EFEBE9', b100: '#D7CCC8', b200: '#BCAAA4', b300: '#A1887F', b400: '#8D6E63', b500: '#795548', b600: '#6D4C41', b700: '#5D4037', b800: '#4E342E', b900: '#3E2723' },
-  grey: { b50: '#FAFAFA', b100: '#F5F5F5', b200: '#EEEEEE', b300: '#E0E0E0', b400: '#BDBDBD', b500: '#9E9E9E', b600: '#757575', b700: '#616161', b800: '#424242', b900: '#212121' },
-  blueGrey: { b50: '#ECEFF1', b100: '#CFD8DC', b200: '#B0BEC5', b300: '#90A4AE', b400: '#78909C', b500: '#607D8B', b600: '#546E7A', b700: '#455A64', b800: '#37474F', b900: '#263238' }
-};
+/** @hidden */
+export const MATERIAL_PALETTE = {
+  red: { b50: '#FFEBEE', b100: '#FFCDD2', b200: '#EF9A9A', b300: '#E57373', b400: '#EF5350', b500: '#F44336', b600: '#E53935', b700: '#D32F2F', b800: '#C62828', b900: '#B71C1C', a100: '#FF8A80', a200: '#FF5252', a400: '#FF1744', a700: '#D50000' },
+  pink: { b50: '#FCE4EC', b100: '#F8BBD0', b200: '#F48FB1', b300: '#F06292', b400: '#EC407A', b500: '#E91E63', b600: '#D81B60', b700: '#C2185B', b800: '#AD1457', b900: '#880E4F', a100: '#FF80AB', a200: '#FF4081', a400: '#F50057', a700: '#C51162' },
+  purple: { b50: '#F3E5F5', b100: '#E1BEE7', b200: '#CE93D8', b300: '#BA68C8', b400: '#AB47BC', b500: '#9C27B0', b600: '#8E24AA', b700: '#7B1FA2', b800: '#6A1B9A', b900: '#4A148C', a100: '#EA80FC', a200: '#E040FB', a400: '#D500F9', a700: '#AA00FF' },
+  deepPurple: { b50: '#EDE7F6', b100: '#D1C4E9', b200: '#B39DDB', b300: '#9575CD', b400: '#7E57C2', b500: '#673AB7', b600: '#5E35B1', b700: '#512DA8', b800: '#4527A0', b900: '#311B92', a100: '#B388FF', a200: '#7C4DFF', a400: '#651FFF', a700: '#6200EA' },
+  indigo: { b50: '#E8EAF6', b100: '#C5CAE9', b200: '#9FA8DA', b300: '#7986CB', b400: '#5C6BC0', b500: '#3F51B5', b600: '#3949AB', b700: '#303F9F', b800: '#283593', b900: '#1A237E', a100: '#8C9EFF', a200: '#536DFE', a400: '#3D5AFE', a700: '#304FFE' },
+  blue: { b50: '#E3F2FD', b100: '#BBDEFB', b200: '#90CAF9', b300: '#64B5F6', b400: '#42A5F5', b500: '#2196F3', b600: '#1E88E5', b700: '#1976D2', b800: '#1565C0', b900: '#0D47A1', a100: '#82B1FF', a200: '#448AFF', a400: '#2979FF', a700: '#2962FF' },
+  lightBlue: { b50: '#E1F5FE', b100: '#B3E5FC', b200: '#81D4FA', b300: '#4FC3F7', b400: '#29B6F6', b500: '#03A9F4', b600: '#039BE5', b700: '#0288D1', b800: '#0277BD', b900: '#01579B', a100: '#80D8FF', a200: '#40C4FF', a400: '#00B0FF', a700: '#0091EA' },
+  cyan: { b50: '#E0F7FA', b100: '#B2EBF2', b200: '#80DEEA', b300: '#4DD0E1', b400: '#26C6DA', b500: '#00BCD4', b600: '#00ACC1', b700: '#0097A7', b800: '#00838F', b900: '#006064', a100: '#84FFFF', a200: '#18FFFF', a400: '#00E5FF', a700: '#00B8D4' },
+  teal: { b50: '#E0F2F1', b100: '#B2DFDB', b200: '#80CBC4', b300: '#4DB6AC', b400: '#26A69A', b500: '#009688', b600: '#00897B', b700: '#00796B', b800: '#00695C', b900: '#004D40', a100: '#A7FFEB', a200: '#64FFDA', a400: '#1DE9B6', a700: '#00BFA5' },
+  green: { b50: '#E8F5E9', b100: '#C8E6C9', b200: '#A5D6A7', b300: '#81C784', b400: '#66BB6A', b500: '#4CAF50', b600: '#43A047', b700: '#388E3C', b800: '#2E7D32', b900: '#1B5E20', a100: '#B9F6CA', a200: '#69F0AE', a400: '#00E676', a700: '#00C853' },
+  lightGreen: { b50: '#F1F8E9', b100: '#DCEDC8', b200: '#C5E1A5', b300: '#AED581', b400: '#9CCC65', b500: '#8BC34A', b600: '#7CB342', b700: '#689F38', b800: '#558B2F', b900: '#33691E', a100: '#CCFF90', a200: '#B2FF59', a400: '#76FF03', a700: '#64DD17' },
+  lime: { b50: '#F9FBE7', b100: '#F0F4C3', b200: '#E6EE9C', b300: '#DCE775', b400: '#D4E157', b500: '#CDDC39', b600: '#C0CA33', b700: '#AFB42B', b800: '#9E9D24', b900: '#827717', a100: '#F4FF81', a200: '#EEFF41', a400: '#C6FF00', a700: '#AEEA00' },
+  yellow: { b50: '#FFFDE7', b100: '#FFF9C4', b200: '#FFF59D', b300: '#FFF176', b400: '#FFEE58', b500: '#FFEB3B', b600: '#FDD835', b700: '#FBC02D', b800: '#F9A825', b900: '#F57F17', a100: '#FFFF8D', a200: '#FFFF00', a400: '#FFEA00', a700: '#FFD600' },
+  amber: { b50: '#FFF8E1', b100: '#FFECB3', b200: '#FFE082', b300: '#FFD54F', b400: '#FFCA28', b500: '#FFC107', b600: '#FFB300', b700: '#FFA000', b800: '#FF8F00', b900: '#FF6F00', a100: '#FFE57F', a200: '#FFD740', a400: '#FFC400', a700: '#FFAB00' },
+  orange: { b50: '#FFF3E0', b100: '#FFE0B2', b200: '#FFCC80', b300: '#FFB74D', b400: '#FFA726', b500: '#FF9800', b600: '#FB8C00', b700: '#F57C00', b800: '#EF6C00', b900: '#E65100', a100: '#FFD180', a200: '#FFAB40', a400: '#FF9100', a700: '#FF6D00' },
+  deepOrange: { b50: '#FBE9E7', b100: '#FFCCBC', b200: '#FFAB91', b300: '#FF8A65', b400: '#FF7043', b500: '#FF5722', b600: '#F4511E', b700: '#E64A19', b800: '#D84315', b900: '#BF360C', a100: '#FF9E80', a200: '#FF6E40', a400: '#FF3D00', a700: '#DD2C00' },
+  brown: { b50: '#EFEBE9', b100: '#D7CCC8', b200: '#BCAAA4', b300: '#A1887F', b400: '#8D6E63', b500: '#795548', b600: '#6D4C41', b700: '#5D4037', b800: '#4E342E', b900: '#3E2723' },
+  grey: { b50: '#FAFAFA', b100: '#F5F5F5', b200: '#EEEEEE', b300: '#E0E0E0', b400: '#BDBDBD', b500: '#9E9E9E', b600: '#757575', b700: '#616161', b800: '#424242', b900: '#212121' },
+  blueGrey: { b50: '#ECEFF1', b100: '#CFD8DC', b200: '#B0BEC5', b300: '#90A4AE', b400: '#78909C', b500: '#607D8B', b600: '#546E7A', b700: '#455A64', b800: '#37474F', b900: '#263238' }
+};

package/src/base/mdc-component.ts

@@ -1,69 +1,69 @@
-import { MDCFoundation } from '@material/base';
-
-export abstract class MdcComponent<FoundationType extends MDCFoundation> {
-  constructor(public root: HTMLElement) {
-    this.initialised = this.createInitiliasedPromise();
-  }
-
-  foundation?: FoundationType;
-
-  initialised: Promise<unknown>;
-  protected initialisedResolve: (value?: unknown) => void;
-
-  private async createInitiliasedPromise() {
-    return new Promise(r => this.initialisedResolve = r);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  initialSyncWithDOM() { }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  beforeFoundationCreated() { }
-
-  attached() {
-    this.beforeFoundationCreated();
-    this.foundation = this.getDefaultFoundation();
-    this.foundation.init();
-    this.initialisedResolve?.();
-    this.initialSyncWithDOM();
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  destroy() { }
-
-  detaching() {
-    this.destroy();
-    this.foundation?.destroy();
-    this.foundation = undefined;
-    this.initialised = this.createInitiliasedPromise();
-  }
-
-  abstract getDefaultFoundation(): FoundationType;
-
-  listen(evtType: string, handler: EventListener | EventListenerObject, options?: AddEventListenerOptions | boolean) {
-    this.root.addEventListener(evtType, handler, options);
-  }
-
-  unlisten(evtType: string, handler: EventListener | EventListenerObject, options?: AddEventListenerOptions | boolean) {
-    this.root.removeEventListener(evtType, handler, options);
-  }
-
-  /**
-   * @hidden
-   * Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.
-   */
-  emit<T>(evtType: string, evtData: T, shouldBubble = false) {
-    let evt: CustomEvent<T>;
-    if (typeof CustomEvent === 'function') {
-      evt = new CustomEvent<T>(evtType, {
-        bubbles: shouldBubble,
-        detail: evtData,
-      });
-    } else {
-      evt = document.createEvent('CustomEvent');
-      evt.initCustomEvent(evtType, shouldBubble, false, evtData);
-    }
-
-    this.root.dispatchEvent(evt);
-  }
-}
+import { MDCFoundation } from '@material/base';
+
+export abstract class MdcComponent<FoundationType extends MDCFoundation> {
+  constructor(public root: HTMLElement) {
+    this.initialised = this.createInitiliasedPromise();
+  }
+
+  foundation?: FoundationType;
+
+  initialised: Promise<unknown>;
+  protected initialisedResolve: (value?: unknown) => void;
+
+  private async createInitiliasedPromise() {
+    return new Promise(r => this.initialisedResolve = r);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  initialSyncWithDOM() { }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  beforeFoundationCreated() { }
+
+  attached() {
+    this.beforeFoundationCreated();
+    this.foundation = this.getDefaultFoundation();
+    this.foundation.init();
+    this.initialisedResolve?.();
+    this.initialSyncWithDOM();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  destroy() { }
+
+  detaching() {
+    this.destroy();
+    this.foundation?.destroy();
+    this.foundation = undefined;
+    this.initialised = this.createInitiliasedPromise();
+  }
+
+  abstract getDefaultFoundation(): FoundationType;
+
+  listen(evtType: string, handler: EventListener | EventListenerObject, options?: AddEventListenerOptions | boolean) {
+    this.root.addEventListener(evtType, handler, options);
+  }
+
+  unlisten(evtType: string, handler: EventListener | EventListenerObject, options?: AddEventListenerOptions | boolean) {
+    this.root.removeEventListener(evtType, handler, options);
+  }
+
+  /**
+   * @hidden
+   * Fires a cross-browser-compatible custom event from the component root of the given type, with the given data.
+   */
+  emit<T>(evtType: string, evtData: T, shouldBubble = false) {
+    let evt: CustomEvent<T>;
+    if (typeof CustomEvent === 'function') {
+      evt = new CustomEvent<T>(evtType, {
+        bubbles: shouldBubble,
+        detail: evtData,
+      });
+    } else {
+      evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent(evtType, shouldBubble, false, evtData);
+    }
+
+    this.root.dispatchEvent(evt);
+  }
+}

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'));
+  }
+}