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

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

@@ -1,23 +1,23 @@
-import { customElement, inject, slotted } from 'aurelia';
-
-/**
- * Optional. Footer area containing the dialog's action buttons.
- * @selector mdc-dialog-actions
- */
-@inject(Element)
-@customElement({ name: 'mdc-dialog-actions', template: '<template class="mdc-dialog__actions"><au-slot></au-slot></template>' })
-export class MdcDialogActions {
-  @slotted({ query: '.mdc-button' })
-  buttons: HTMLElement[];
-  buttonsChanged() {
-    for (let i = 0; i < this.buttons.length; ++i) {
-      this.buttons[i].classList.add('mdc-dialog__button');
-    }
-  }
-
-  attached() {
-    if (this.buttons) {
-      this.buttonsChanged();
-    }
-  }
-}
+import { customElement, inject, slotted } from 'aurelia';
+
+/**
+ * Optional. Footer area containing the dialog's action buttons.
+ * @selector mdc-dialog-actions
+ */
+@inject(Element)
+@customElement({ name: 'mdc-dialog-actions', template: '<template class="mdc-dialog__actions"><au-slot></au-slot></template>' })
+export class MdcDialogActions {
+  @slotted({ query: '.mdc-button' })
+  buttons: HTMLElement[];
+  buttonsChanged() {
+    for (let i = 0; i < this.buttons.length; ++i) {
+      this.buttons[i].classList.add('mdc-dialog__button');
+    }
+  }
+
+  attached() {
+    if (this.buttons) {
+      this.buttonsChanged();
+    }
+  }
+}

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

@@ -1,11 +1,11 @@
-import { customElement, inject } from 'aurelia';
-
-/**
- * Optional. Primary content area. May contain a list, a form, or prose.
- * @selector mdc-dialog-content
- */
-@inject(Element)
-@customElement({ name: 'mdc-dialog-content', template: '<template class="mdc-dialog__content"><au-slot></au-slot></template>' })
-export class MdcDialogContent {
-  constructor(public root: HTMLElement) { }
-}
+import { customElement, inject } from 'aurelia';
+
+/**
+ * Optional. Primary content area. May contain a list, a form, or prose.
+ * @selector mdc-dialog-content
+ */
+@inject(Element)
+@customElement({ name: 'mdc-dialog-content', template: '<template class="mdc-dialog__content"><au-slot></au-slot></template>' })
+export class MdcDialogContent {
+  constructor(public root: HTMLElement) { }
+}

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

@@ -1,80 +1,83 @@
-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');
+    if (!this.au.container.has(options.viewModel, false)) {
+      this.au.container.register(options.viewModel);
+    }
+    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/dialog/mdc-dialog-title.ts

@@ -1,8 +1,8 @@
-import { customElement } from 'aurelia';
-
-/**
- * Optional. The area containing the dialog's title.
- * @selector mdc-dialog-title
- */
-@customElement({ name: 'mdc-dialog-title', template: '<template class="mdc-dialog__title"><au-slot></au-slot></template>' })
-export class MdcDialogTitle { }
+import { customElement } from 'aurelia';
+
+/**
+ * Optional. The area containing the dialog's title.
+ * @selector mdc-dialog-title
+ */
+@customElement({ name: 'mdc-dialog-title', template: '<template class="mdc-dialog__title"><au-slot></au-slot></template>' })
+export class MdcDialogTitle { }

package/src/dialog/mdc-dialog.html

@@ -1,14 +1,14 @@
-<template class="mdc-dialog ${fullscreen ? 'mdc-dialog--fullscreen' : ''} ${sheet ? 'mdc-dialog--sheet' : ''}"
-  click.trigger="handleClick_($event)" keydown.trigger="handleKeydown_($event)"
-  mdcdialog:opening.trigger="handleOpening_()" mdcdialog:closing.trigger="handleClosing_()" aria-modal="true"
-  mdc-focus-trap="initial-focus-el.bind: getInitialFocusEl" mdc-focus-trap.ref="mdcFocusTrap">
-  <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="${titleId}"
-      aria-describedby="${contentId}">
-      <button if.bind="sheet" class="mdc-icon-button material-icons mdc-dialog__close"
-        data-mdc-dialog-action="close">close</button>
-      <au-slot></au-slot>
-    </div>
-  </div>
-  <div class="mdc-dialog__scrim"></div>
-</template>
+<template class="mdc-dialog ${fullscreen ? 'mdc-dialog--fullscreen' : ''} ${sheet ? 'mdc-dialog--sheet' : ''}"
+  click.trigger="handleClick_($event)" keydown.trigger="handleKeydown_($event)"
+  mdcdialog:opening.trigger="handleOpening_()" mdcdialog:closing.trigger="handleClosing_()" aria-modal="true"
+  mdc-focus-trap="initial-focus-el.bind: getInitialFocusEl" mdc-focus-trap.ref="mdcFocusTrap">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="${titleId}"
+      aria-describedby="${contentId}">
+      <button if.bind="sheet" class="mdc-icon-button material-icons mdc-dialog__close"
+        data-mdc-dialog-action="close">close</button>
+      <au-slot></au-slot>
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</template>