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

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

@@ -0,0 +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;
+}

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

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

package/src/base/index.ts

@@ -0,0 +1,23 @@
+import { IContainer } from 'aurelia';
+import { MdcFocusTrap } from './attributes/mdc-focus-trap';
+import { MdcPromisifyReference } from './elements/mdc-promisify-reference';
+
+export { MdcComponent } from './mdc-component';
+export type { IValidatedElement, IError } from './elements/i-validated-element';
+export { MATERIAL_PALETTE } from './material-palette';
+export { boolean, booleanAttr, date, number, string } from './interceptors';
+export { MdcFocusTrap } from './attributes/mdc-focus-trap';
+export { nextElement } from './next-element';
+
+let registered = false;
+
+export const BaseConfiguration = {
+  register(container: IContainer): IContainer {
+    if (registered) {
+      return container;
+    } else {
+      registered = true;
+      return container.register(MdcPromisifyReference, MdcFocusTrap);
+    }
+  }
+};

package/src/base/interceptors.ts

@@ -0,0 +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;
+}

package/src/base/material-palette.md

@@ -0,0 +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

package/src/base/material-palette.ts

@@ -0,0 +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' }
+};

package/src/base/mdc-component.ts

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

package/src/base/next-element.ts

@@ -0,0 +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]);
+}