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

package/src/banner/mdc-banner.ts

@@ -1,116 +1,116 @@
-import { booleanAttr, MdcComponent, MdcFocusTrap } from '../base';
-import { CloseReason, events, MDCBannerActionEventDetail, MDCBannerAdapter, MDCBannerCloseEventDetail, MDCBannerFoundation } from '@material/banner';
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-banner.html?raw';
-
-events.CLOSED = events.CLOSED.toLowerCase();
-events.CLOSING = events.CLOSING.toLowerCase();
-events.OPENED = events.OPENED.toLowerCase();
-events.OPENING = events.OPENING.toLowerCase();
-
-/**
- * @selector mdc-banner
- */
-@inject(Element)
-@customElement({ name: 'mdc-banner', template })
-export class MdcBanner extends MdcComponent<MDCBannerFoundation> {
-  private contentEl: HTMLElement;
-  private mdcFocusTrap: MdcFocusTrap;
-
-  /** When used below top app bars, banners should remain fixed at the top of the screen */
-  @bindable({ set: booleanAttr })
-  fixed: boolean;
-
-  /** Displayed banner centered, optional */
-  @bindable({ set: booleanAttr })
-  centered: boolean;
-
-  /** Sets banner icon */
-  @bindable()
-  icon: string;
-
-  /** Sets the banner primary action text */
-  @bindable()
-  primaryAction: string;
-
-  /** Sets the banner secondary action text */
-  @bindable()
-  secondaryAction: string;
-
-  @bindable({ set: booleanAttr })
-  disablePrimaryAutoClose: boolean;
-
-  @bindable({ set: booleanAttr })
-  disableSecondaryAutoClose: boolean;
-
-  handlePrimaryActionClick() {
-    this.foundation?.handlePrimaryActionClick(this.disablePrimaryAutoClose);
-  }
-
-  handleSecondaryActionClick() {
-    this.foundation?.handleSecondaryActionClick(this.disableSecondaryAutoClose);
-  }
-
-  /**
-   * Opens the banner and fires events.OPENING to indicate the beginning of its
-   * opening animation and then events.OPENED once the animation finishes.
-   */
-  open() {
-    this.foundation?.open();
-  }
-
-  /**
-   * Closes the banner and fires events.CLOSING to indicate the beginning of its
-   * closing animation and then events.CLOSED once the animation finishes.
-   * @param reason Why the banner was closed. Value will be passed to
-   *     events.CLOSING and events.CLOSED via the `event.detail.reason`
-   *     property. Standard values are CloseReason.PRIMARY and
-   *     CloseReason.SECONDARY, but CloseReason.UNSPECIFIED is provided for
-   *     custom handling of programmatic closing of the banner.
-   */
-  close(reason: CloseReason) {
-    this.foundation?.close(reason);
-  }
-
-  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: MDCBannerAdapter = {
-      addClass: (className) => {
-        this.root.classList.add(className);
-      },
-      getContentHeight: () => {
-        return this.contentEl.offsetHeight;
-      },
-      notifyClosed: (reason) => {
-        this.emit<MDCBannerCloseEventDetail>(events.CLOSED, { reason });
-      },
-      notifyClosing: (reason) => {
-        this.emit<MDCBannerCloseEventDetail>(events.CLOSING, { reason });
-      },
-      notifyOpened: () => {
-        this.emit(events.OPENED, {});
-      },
-      notifyOpening: () => {
-        this.emit(events.OPENING, {});
-      },
-      notifyActionClicked: (action) => {
-        this.emit<MDCBannerActionEventDetail>(events.ACTION_CLICKED, { action });
-      },
-      releaseFocus: () => {
-        this.mdcFocusTrap?.releaseFocus();
-      },
-      removeClass: (className) => {
-        this.root.classList.remove(className);
-      },
-      setStyleProperty: (propertyName, value) => {
-        this.root.style.setProperty(propertyName, value);
-      },
-      trapFocus: () => {
-        this.mdcFocusTrap?.trapFocus();
-      },
-    };
-    return new MDCBannerFoundation(adapter);
-  }
-}
+import { booleanAttr, MdcComponent, MdcFocusTrap } from '../base';
+import { CloseReason, events, MDCBannerActionEventDetail, MDCBannerAdapter, MDCBannerCloseEventDetail, MDCBannerFoundation } from '@material/banner';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-banner.html?raw';
+
+events.CLOSED = events.CLOSED.toLowerCase();
+events.CLOSING = events.CLOSING.toLowerCase();
+events.OPENED = events.OPENED.toLowerCase();
+events.OPENING = events.OPENING.toLowerCase();
+
+/**
+ * @selector mdc-banner
+ */
+@inject(Element)
+@customElement({ name: 'mdc-banner', template })
+export class MdcBanner extends MdcComponent<MDCBannerFoundation> {
+  private contentEl: HTMLElement;
+  private mdcFocusTrap: MdcFocusTrap;
+
+  /** When used below top app bars, banners should remain fixed at the top of the screen */
+  @bindable({ set: booleanAttr })
+  fixed: boolean;
+
+  /** Displayed banner centered, optional */
+  @bindable({ set: booleanAttr })
+  centered: boolean;
+
+  /** Sets banner icon */
+  @bindable()
+  icon: string;
+
+  /** Sets the banner primary action text */
+  @bindable()
+  primaryAction: string;
+
+  /** Sets the banner secondary action text */
+  @bindable()
+  secondaryAction: string;
+
+  @bindable({ set: booleanAttr })
+  disablePrimaryAutoClose: boolean;
+
+  @bindable({ set: booleanAttr })
+  disableSecondaryAutoClose: boolean;
+
+  handlePrimaryActionClick() {
+    this.foundation?.handlePrimaryActionClick(this.disablePrimaryAutoClose);
+  }
+
+  handleSecondaryActionClick() {
+    this.foundation?.handleSecondaryActionClick(this.disableSecondaryAutoClose);
+  }
+
+  /**
+   * Opens the banner and fires events.OPENING to indicate the beginning of its
+   * opening animation and then events.OPENED once the animation finishes.
+   */
+  open() {
+    this.foundation?.open();
+  }
+
+  /**
+   * Closes the banner and fires events.CLOSING to indicate the beginning of its
+   * closing animation and then events.CLOSED once the animation finishes.
+   * @param reason Why the banner was closed. Value will be passed to
+   *     events.CLOSING and events.CLOSED via the `event.detail.reason`
+   *     property. Standard values are CloseReason.PRIMARY and
+   *     CloseReason.SECONDARY, but CloseReason.UNSPECIFIED is provided for
+   *     custom handling of programmatic closing of the banner.
+   */
+  close(reason: CloseReason) {
+    this.foundation?.close(reason);
+  }
+
+  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: MDCBannerAdapter = {
+      addClass: (className) => {
+        this.root.classList.add(className);
+      },
+      getContentHeight: () => {
+        return this.contentEl.offsetHeight;
+      },
+      notifyClosed: (reason) => {
+        this.emit<MDCBannerCloseEventDetail>(events.CLOSED, { reason });
+      },
+      notifyClosing: (reason) => {
+        this.emit<MDCBannerCloseEventDetail>(events.CLOSING, { reason });
+      },
+      notifyOpened: () => {
+        this.emit(events.OPENED, {});
+      },
+      notifyOpening: () => {
+        this.emit(events.OPENING, {});
+      },
+      notifyActionClicked: (action) => {
+        this.emit<MDCBannerActionEventDetail>(events.ACTION_CLICKED, { action });
+      },
+      releaseFocus: () => {
+        this.mdcFocusTrap?.releaseFocus();
+      },
+      removeClass: (className) => {
+        this.root.classList.remove(className);
+      },
+      setStyleProperty: (propertyName, value) => {
+        this.root.style.setProperty(propertyName, value);
+      },
+      trapFocus: () => {
+        this.mdcFocusTrap?.trapFocus();
+      },
+    };
+    return new MDCBannerFoundation(adapter);
+  }
+}

package/src/base/attributes/mdc-focus-trap.ts

@@ -1,42 +1,42 @@
-import { FocusTrap } from '@material/dom/focus-trap';
-import { customAttribute, inject, bindable } from 'aurelia';
-import { booleanAttr } from '../interceptors';
-
-@customAttribute('mdc-focus-trap')
-@inject(Element)
-export class MdcFocusTrap {
-  constructor(private root: HTMLElement) { }
-
-  focusTrap?: FocusTrap;
-
-  @bindable({ set: booleanAttr })
-  delay: boolean;
-
-  @bindable()
-  initialFocusEl?: HTMLElement | (() => HTMLElement);
-
-  @bindable({ set: booleanAttr })
-  skipInitialFocus: boolean;
-
-  @bindable({ set: booleanAttr })
-  skipRestoreFocus: boolean;
-
-  attached() {
-    if (!this.delay) {
-      this.create();
-    }
-  }
-
-  create() {
-    const el = this.initialFocusEl instanceof HTMLElement || this.initialFocusEl === undefined ? this.initialFocusEl : this.initialFocusEl();
-    this.focusTrap = new FocusTrap(this.root, { initialFocusEl: el, skipInitialFocus: this.skipInitialFocus, skipRestoreFocus: this.skipRestoreFocus });
-  }
-
-  trapFocus() {
-    this.focusTrap?.trapFocus();
-  }
-
-  releaseFocus() {
-    this.focusTrap?.releaseFocus();
-  }
-}
+import { FocusTrap } from '@material/dom/focus-trap';
+import { customAttribute, inject, bindable } from 'aurelia';
+import { booleanAttr } from '../interceptors';
+
+@customAttribute('mdc-focus-trap')
+@inject(Element)
+export class MdcFocusTrap {
+  constructor(private root: HTMLElement) { }
+
+  focusTrap?: FocusTrap;
+
+  @bindable({ set: booleanAttr })
+  delay: boolean;
+
+  @bindable()
+  initialFocusEl?: HTMLElement | (() => HTMLElement);
+
+  @bindable({ set: booleanAttr })
+  skipInitialFocus: boolean;
+
+  @bindable({ set: booleanAttr })
+  skipRestoreFocus: boolean;
+
+  attached() {
+    if (!this.delay) {
+      this.create();
+    }
+  }
+
+  create() {
+    const el = this.initialFocusEl instanceof HTMLElement || this.initialFocusEl === undefined ? this.initialFocusEl : this.initialFocusEl();
+    this.focusTrap = new FocusTrap(this.root, { initialFocusEl: el, skipInitialFocus: this.skipInitialFocus, skipRestoreFocus: this.skipRestoreFocus });
+  }
+
+  trapFocus() {
+    this.focusTrap?.trapFocus();
+  }
+
+  releaseFocus() {
+    this.focusTrap?.releaseFocus();
+  }
+}

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