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

package/src/dialog/mdc-dialog-service.ts

@@ -1,80 +1,80 @@
-import { MdcDialog } from './mdc-dialog';
-import Aurelia, { CustomAttribute, IAurelia, resolve } from 'aurelia';
-import { MDCDialogCloseEvent, strings } from '@material/dialog';
-import { CustomElement } from '@aurelia/runtime-html';
-import { Constructable } from '@aurelia/kernel';
-import { IMdcRippleElement, MdcRipple } from '../ripple/mdc-ripple';
-
-/** Dialog service open method options */
-export interface IMdcDialogOptions<T extends { loading: (params: any) => any }> {
-  /** A class represeting the dialog content view model */
-  viewModel: Constructable<T>;
-
-  /** Data to pass to the view model's loading method */
-  model?: unknown;
-}
-
-interface IMdcDialogBindingContext {
-  handleClosed(evt: MDCDialogCloseEvent): void;
-  handleOpened(): void;
-}
-
-/** Service to open MDC dialogs */
-export class MdcDialogService {
-  constructor(private readonly au: Aurelia = resolve(IAurelia)) { }
-
-  /** Opens the dialog specified in the options */
-  async open<T extends { loading: (params: any) => any }>(options: IMdcDialogOptions<T>) {
-    let closedResolver: (action?: string | PromiseLike<string> | undefined) => void;
-    const closedPromise = new Promise<string>(r => closedResolver = r);
-    let openedResolver: (value?: unknown) => void;
-    const openedPromise = new Promise(r => openedResolver = r);
-    let opened = false;
-    const bindingContext: IMdcDialogBindingContext = {
-      handleOpened: () => {
-        opened = true;
-        openedResolver();
-      },
-      handleClosed: (evt: MDCDialogCloseEvent) => {
-        if (!opened) {
-          // The dialog was closed before it was opened, need to prevent an unresolved open promise.
-          openedResolver();
-        }
-        closedResolver(evt.detail.action);
-        controller.deactivate();
-        dialogVm.root.removeEventListener(strings.CLOSED_EVENT, bindingContext.handleClosed);
-        dialogVm.root.removeEventListener(strings.OPENED_EVENT, bindingContext.handleOpened);
-        dialogContainer.remove();
-      }
-    };
-
-    const dialogContainer = document.createElement('div');
-    const def = CustomElement.getDefinition(options.viewModel);
-    dialogContainer.innerHTML = `<${def.name}></${def.name}>`;
-    document.body.appendChild(dialogContainer);
-
-    const controller = await this.au.enhance({ host: dialogContainer, component: {} });
-    const dialogVm = CustomElement.for<MdcDialog>(dialogContainer.querySelector('mdc-dialog') as HTMLElement).viewModel;
-    dialogVm.root.addEventListener(strings.CLOSED_EVENT, bindingContext.handleClosed);
-    dialogVm.root.addEventListener(strings.OPENED_EVENT, bindingContext.handleOpened);
-    const vm = CustomElement.for<T>(dialogContainer.firstChild as HTMLElement).viewModel;
-    if (vm.loading) {
-      const loadingResult = vm.loading(options.model);
-      if (loadingResult instanceof Promise) {
-        await loadingResult;
-      }
-    }
-    await dialogVm.initialised;
-    dialogVm.open();
-
-    await openedPromise;
-    // re-layout ripple elements because dialogs use `transform: scale(.8)` and initial layout is incorrect
-    const ripples = Array.from(dialogVm.root.querySelectorAll<IMdcRippleElement>('.mdc-ripple-upgraded'));
-    await Promise.all(ripples.map(async x => {
-      const ripple = CustomAttribute.for<MdcRipple>(x, 'mdc-ripple');
-      await ripple?.viewModel.initialised;
-      ripple?.viewModel.foundation?.layout();
-    }));
-    return await closedPromise;
-  }
-}
+import { MdcDialog } from './mdc-dialog';
+import Aurelia, { CustomAttribute, IAurelia, resolve } from 'aurelia';
+import { MDCDialogCloseEvent, strings } from '@material/dialog';
+import { CustomElement } from '@aurelia/runtime-html';
+import { Constructable } from '@aurelia/kernel';
+import { IMdcRippleElement, MdcRipple } from '../ripple/mdc-ripple';
+
+/** Dialog service open method options */
+export interface IMdcDialogOptions<T extends { loading: (params: any) => any }> {
+  /** A class represeting the dialog content view model */
+  viewModel: Constructable<T>;
+
+  /** Data to pass to the view model's loading method */
+  model?: unknown;
+}
+
+interface IMdcDialogBindingContext {
+  handleClosed(evt: MDCDialogCloseEvent): void;
+  handleOpened(): void;
+}
+
+/** Service to open MDC dialogs */
+export class MdcDialogService {
+  constructor(private readonly au: Aurelia = resolve(IAurelia)) { }
+
+  /** Opens the dialog specified in the options */
+  async open<T extends { loading: (params: any) => any }>(options: IMdcDialogOptions<T>) {
+    let closedResolver: (action?: string | PromiseLike<string> | undefined) => void;
+    const closedPromise = new Promise<string>(r => closedResolver = r);
+    let openedResolver: (value?: unknown) => void;
+    const openedPromise = new Promise(r => openedResolver = r);
+    let opened = false;
+    const bindingContext: IMdcDialogBindingContext = {
+      handleOpened: () => {
+        opened = true;
+        openedResolver();
+      },
+      handleClosed: (evt: MDCDialogCloseEvent) => {
+        if (!opened) {
+          // The dialog was closed before it was opened, need to prevent an unresolved open promise.
+          openedResolver();
+        }
+        closedResolver(evt.detail.action);
+        controller.deactivate();
+        dialogVm.root.removeEventListener(strings.CLOSED_EVENT, bindingContext.handleClosed);
+        dialogVm.root.removeEventListener(strings.OPENED_EVENT, bindingContext.handleOpened);
+        dialogContainer.remove();
+      }
+    };
+
+    const dialogContainer = document.createElement('div');
+    const def = CustomElement.getDefinition(options.viewModel);
+    dialogContainer.innerHTML = `<${def.name}></${def.name}>`;
+    document.body.appendChild(dialogContainer);
+
+    const controller = await this.au.enhance({ host: dialogContainer, component: {} });
+    const dialogVm = CustomElement.for<MdcDialog>(dialogContainer.querySelector('mdc-dialog') as HTMLElement).viewModel;
+    dialogVm.root.addEventListener(strings.CLOSED_EVENT, bindingContext.handleClosed);
+    dialogVm.root.addEventListener(strings.OPENED_EVENT, bindingContext.handleOpened);
+    const vm = CustomElement.for<T>(dialogContainer.firstChild as HTMLElement).viewModel;
+    if (vm.loading) {
+      const loadingResult = vm.loading(options.model);
+      if (loadingResult instanceof Promise) {
+        await loadingResult;
+      }
+    }
+    await dialogVm.initialised;
+    dialogVm.open();
+
+    await openedPromise;
+    // re-layout ripple elements because dialogs use `transform: scale(.8)` and initial layout is incorrect
+    const ripples = Array.from(dialogVm.root.querySelectorAll<IMdcRippleElement>('.mdc-ripple-upgraded'));
+    await Promise.all(ripples.map(async x => {
+      const ripple = CustomAttribute.for<MdcRipple>(x, 'mdc-ripple');
+      await ripple?.viewModel.initialised;
+      ripple?.viewModel.foundation?.layout();
+    }));
+    return await closedPromise;
+  }
+}

package/src/expandable/mdc-expandable.ts

@@ -1,104 +1,104 @@
-import { customElement, inject, bindable, IPlatform } from 'aurelia';
-import { booleanAttr } from '../base';
-import { CustomElement } from '@aurelia/runtime-html';
-import template from './mdc-expandable.html?raw';
-
-const OPEN_CHANGED_EVENT = 'mdcexpandable:open-changed';
-const ENTER = 13;
-const SPACE = 32;
-
-/** @selector mdc-expandable */
-@inject(Element, IPlatform)
-@customElement({ name: 'mdc-expandable', template })
-export class MdcExpandable {
-  constructor(public element: HTMLElement, private platform: IPlatform) { }
-
-  header?: HTMLElement = undefined;
-  content?: HTMLElement = undefined;
-  contentContainer?: HTMLElement = undefined;
-  focused: boolean;
-
-  /** Toggles the expandable open and closed */
-  @bindable({ set: booleanAttr })
-  open: boolean;
-  openChanged() {
-    this.updateContainerHeight();
-    this.element.dispatchEvent(new CustomEvent(
-      OPEN_CHANGED_EVENT,
-      { detail: { component: this, open: this.open } }
-    ));
-  }
-
-  /** Set the expandable to be in an accordion group */
-  @bindable()
-  accordion?: string;
-
-  handleEvent(e: Event) {
-    switch (e.type) {
-      case 'transitionend':
-        this.setContentContainerHeightToAuto();
-        break;
-    }
-  }
-
-  setContentContainerHeightToAuto() {
-    this.contentContainer!.style.overflow = 'visible';
-    this.contentContainer!.style.height = 'auto';
-    this.contentContainer!.removeEventListener('transitionend', this);
-  }
-
-  attached() {
-    this.openChanged();
-  }
-
-  updateContainerHeight() {
-    if (this.open) {
-      // after transition set body height to auto so that expandable children are visible
-      this.contentContainer!.addEventListener('transitionend', this);
-      this.contentContainer!.style.height = `${this.content!.clientHeight}px`;
-    } else {
-      // the following line is needed because height has been restored to auto'
-      this.contentContainer!.style.height = `${this.content!.clientHeight}px`;
-      this.platform.taskQueue.queueTask(() => {
-        this.contentContainer!.style.overflow = 'hidden';
-        this.contentContainer!.style.height = '0';
-      });
-    }
-  }
-
-  /** Toggles the expandable open and closed */
-  toggle() {
-    if (!this.open && this.accordion !== undefined) {
-      const otherAccordions = Array.from(this.element.parentElement!.querySelectorAll(`.mdc-expandable--accordion__${this.accordion}.mdc-expandable--open`));
-      otherAccordions.filter(x => x !== this.element)
-        .map(x => CustomElement.for<MdcExpandable>(x).viewModel)
-        .forEach(x => x.toggle());
-    }
-    this.open = !this.open;
-  }
-
-  handleFocus() {
-    this.focused = true;
-  }
-
-  handleBlur() {
-    this.focused = false;
-  }
-
-  handleKeydown(evt: KeyboardEvent) {
-    if ((evt.keyCode === ENTER || evt.keyCode === SPACE)) {
-      this.toggle();
-    }
-    return true;
-  }
-}
-
-/** @hidden */
-export interface IMdcExpandableElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcExpandable;
-    };
-  };
-}
-
+import { customElement, inject, bindable, IPlatform } from 'aurelia';
+import { booleanAttr } from '../base';
+import { CustomElement } from '@aurelia/runtime-html';
+import template from './mdc-expandable.html?raw';
+
+const OPEN_CHANGED_EVENT = 'mdcexpandable:open-changed';
+const ENTER = 13;
+const SPACE = 32;
+
+/** @selector mdc-expandable */
+@inject(Element, IPlatform)
+@customElement({ name: 'mdc-expandable', template })
+export class MdcExpandable {
+  constructor(public element: HTMLElement, private platform: IPlatform) { }
+
+  header?: HTMLElement = undefined;
+  content?: HTMLElement = undefined;
+  contentContainer?: HTMLElement = undefined;
+  focused: boolean;
+
+  /** Toggles the expandable open and closed */
+  @bindable({ set: booleanAttr })
+  open: boolean;
+  openChanged() {
+    this.updateContainerHeight();
+    this.element.dispatchEvent(new CustomEvent(
+      OPEN_CHANGED_EVENT,
+      { detail: { component: this, open: this.open } }
+    ));
+  }
+
+  /** Set the expandable to be in an accordion group */
+  @bindable()
+  accordion?: string;
+
+  handleEvent(e: Event) {
+    switch (e.type) {
+      case 'transitionend':
+        this.setContentContainerHeightToAuto();
+        break;
+    }
+  }
+
+  setContentContainerHeightToAuto() {
+    this.contentContainer!.style.overflow = 'visible';
+    this.contentContainer!.style.height = 'auto';
+    this.contentContainer!.removeEventListener('transitionend', this);
+  }
+
+  attached() {
+    this.openChanged();
+  }
+
+  updateContainerHeight() {
+    if (this.open) {
+      // after transition set body height to auto so that expandable children are visible
+      this.contentContainer!.addEventListener('transitionend', this);
+      this.contentContainer!.style.height = `${this.content!.clientHeight}px`;
+    } else {
+      // the following line is needed because height has been restored to auto'
+      this.contentContainer!.style.height = `${this.content!.clientHeight}px`;
+      this.platform.taskQueue.queueTask(() => {
+        this.contentContainer!.style.overflow = 'hidden';
+        this.contentContainer!.style.height = '0';
+      });
+    }
+  }
+
+  /** Toggles the expandable open and closed */
+  toggle() {
+    if (!this.open && this.accordion !== undefined) {
+      const otherAccordions = Array.from(this.element.parentElement!.querySelectorAll(`.mdc-expandable--accordion__${this.accordion}.mdc-expandable--open`));
+      otherAccordions.filter(x => x !== this.element)
+        .map(x => CustomElement.for<MdcExpandable>(x).viewModel)
+        .forEach(x => x.toggle());
+    }
+    this.open = !this.open;
+  }
+
+  handleFocus() {
+    this.focused = true;
+  }
+
+  handleBlur() {
+    this.focused = false;
+  }
+
+  handleKeydown(evt: KeyboardEvent) {
+    if ((evt.keyCode === ENTER || evt.keyCode === SPACE)) {
+      this.toggle();
+    }
+    return true;
+  }
+}
+
+/** @hidden */
+export interface IMdcExpandableElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcExpandable;
+    };
+  };
+}
+

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

@@ -1,60 +1,60 @@
-import { cssClasses, MDCFormFieldFoundation, MDCFormFieldAdapter } from '@material/form-field';
-import { MdcComponent, booleanAttr } from '../base';
-import { customElement, inject, bindable } from 'aurelia';
-import { CustomAttribute } from '@aurelia/runtime-html';
-import template from './mdc-form-field.html?raw';
-import { MdcRipple, IMdcRippleElement } from '../ripple/mdc-ripple';
-
-/**
- * @selector mdc-form-field
- */
-@inject(Element)
-@customElement({ name: 'mdc-form-field', template })
-export class MdcFormField extends MdcComponent<MDCFormFieldFoundation> {
-  cssClasses = cssClasses;
-
-  ripple?: MdcRipple;
-
-  label?: HTMLLabelElement | null;
-
-  /** Force label text to stay on a single line and ellipse the overflow text */
-  @bindable({ set: booleanAttr })
-  nowrap: boolean;
-
-  /** Position the input after the label */
-  @bindable({ set: booleanAttr })
-  alignEnd: boolean;
-
-  /** Distributes space between label text and control */
-  @bindable({ set: booleanAttr })
-  spaceBetween: boolean;
-
-  initialSyncWithDOM() {
-    let rippleUpgraded = this.root.querySelector<IMdcRippleElement>('mdc-checkbox');
-    if (!rippleUpgraded) {
-      rippleUpgraded = this.root.querySelector<IMdcRippleElement>('mdc-radio');
-    }
-    this.ripple = rippleUpgraded ? CustomAttribute.for<MdcRipple>(rippleUpgraded, 'mdc-ripple')?.viewModel : undefined;
-
-    const input = this.root.querySelector('input, button');
-    if (input?.hasAttribute('id')) {
-      this.label = this.root.querySelector('label');
-      if (this.label) {
-        this.label.setAttribute('for', input.getAttribute('id')!);
-      }
-    }
-  }
-
-  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: MDCFormFieldAdapter = {
-      activateInputRipple: () => this.ripple?.activate(),
-      deactivateInputRipple: () => this.ripple?.deactivate(),
-      deregisterInteractionHandler: (evtType, handler) => this.label?.removeEventListener(evtType, handler),
-      registerInteractionHandler: (evtType, handler) => this.label?.addEventListener(evtType, handler),
-    };
-    return new MDCFormFieldFoundation(adapter);
-  }
-
-}
+import { cssClasses, MDCFormFieldFoundation, MDCFormFieldAdapter } from '@material/form-field';
+import { MdcComponent, booleanAttr } from '../base';
+import { customElement, inject, bindable } from 'aurelia';
+import { CustomAttribute } from '@aurelia/runtime-html';
+import template from './mdc-form-field.html?raw';
+import { MdcRipple, IMdcRippleElement } from '../ripple/mdc-ripple';
+
+/**
+ * @selector mdc-form-field
+ */
+@inject(Element)
+@customElement({ name: 'mdc-form-field', template })
+export class MdcFormField extends MdcComponent<MDCFormFieldFoundation> {
+  cssClasses = cssClasses;
+
+  ripple?: MdcRipple;
+
+  label?: HTMLLabelElement | null;
+
+  /** Force label text to stay on a single line and ellipse the overflow text */
+  @bindable({ set: booleanAttr })
+  nowrap: boolean;
+
+  /** Position the input after the label */
+  @bindable({ set: booleanAttr })
+  alignEnd: boolean;
+
+  /** Distributes space between label text and control */
+  @bindable({ set: booleanAttr })
+  spaceBetween: boolean;
+
+  initialSyncWithDOM() {
+    let rippleUpgraded = this.root.querySelector<IMdcRippleElement>('mdc-checkbox');
+    if (!rippleUpgraded) {
+      rippleUpgraded = this.root.querySelector<IMdcRippleElement>('mdc-radio');
+    }
+    this.ripple = rippleUpgraded ? CustomAttribute.for<MdcRipple>(rippleUpgraded, 'mdc-ripple')?.viewModel : undefined;
+
+    const input = this.root.querySelector('input, button');
+    if (input?.hasAttribute('id')) {
+      this.label = this.root.querySelector('label');
+      if (this.label) {
+        this.label.setAttribute('for', input.getAttribute('id')!);
+      }
+    }
+  }
+
+  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: MDCFormFieldAdapter = {
+      activateInputRipple: () => this.ripple?.activate(),
+      deactivateInputRipple: () => this.ripple?.deactivate(),
+      deregisterInteractionHandler: (evtType, handler) => this.label?.removeEventListener(evtType, handler),
+      registerInteractionHandler: (evtType, handler) => this.label?.addEventListener(evtType, handler),
+    };
+    return new MDCFormFieldFoundation(adapter);
+  }
+
+}