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

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

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

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

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

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

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

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

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

package/src/dialog/mdc-dialog.html

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

package/src/dialog/mdc-dialog.ts

@@ -0,0 +1,224 @@
+import { MdcComponent, booleanAttr, MdcFocusTrap } from '../base';
+import { MDCDialogFoundation, strings, MDCDialogAdapter, util, MDCDialogCloseEventDetail } from '@material/dialog';
+import { customElement, inject, bindable } from 'aurelia';
+import { closest, matches } from '@material/dom/ponyfill';
+import template from './mdc-dialog.html?raw';
+import { FocusTrap } from '@material/dom/focus-trap';
+
+const LAYOUT_EVENTS = ['resize', 'orientationchange'];
+let dialogId = 0;
+
+strings.OPENING_EVENT = strings.OPENING_EVENT.toLowerCase();
+strings.CLOSING_EVENT = strings.CLOSING_EVENT.toLowerCase();
+strings.OPENED_EVENT = strings.OPENED_EVENT.toLowerCase();
+strings.CLOSED_EVENT = strings.CLOSED_EVENT.toLowerCase();
+
+/**
+ * @selector mdc-dialog
+ */
+@inject(Element)
+@customElement({ name: 'mdc-dialog', template })
+export class MdcDialog extends MdcComponent<MDCDialogFoundation> implements EventListenerObject {
+
+  id = ++dialogId;
+  contentId = `mdc-dialog-content-${this.id}`;
+  titleId = `mdc-dialog-title-${this.id}`;
+  private buttons!: HTMLElement[]; // assigned in initialize()
+  mdcFocusTrap: MdcFocusTrap;
+
+  /** Action returned when the dialog is closed via the scrim click */
+  @bindable()
+  scrimClickAction: string;
+  scrimClickActionChanged() {
+    this.foundation?.setScrimClickAction(this.scrimClickAction);
+  }
+
+  /** Action returned when the dialog is closed via the ESC key */
+  @bindable()
+  escapeKeyAction: string;
+  escapeKeyActionChanged() {
+    this.foundation?.setEscapeKeyAction(this.escapeKeyAction);
+  }
+
+  @bindable({ set: booleanAttr })
+  fullscreen: boolean;
+
+  @bindable({ set: booleanAttr })
+  sheet: boolean;
+
+  get defaultButton(): HTMLElement | null {
+    return this.root.querySelector<HTMLElement>(`[${strings.BUTTON_DEFAULT_ATTRIBUTE}]`);
+  }
+
+  get content(): HTMLElement | null {
+    return this.root.querySelector<HTMLElement>(`${strings.CONTENT_SELECTOR}`);
+  }
+
+  beforeFoundationCreated() {
+    this.buttons = [].slice.call(this.root.querySelectorAll<HTMLElement>(strings.BUTTON_SELECTOR));
+    const content = this.root.querySelector('mdc-dialog-content');
+    content?.setAttribute('id', this.contentId);
+    const title = this.root.querySelector('mdc-dialog-title');
+    title?.setAttribute('id', this.titleId);
+  }
+
+  destroy() {
+    this.handleClosing_();
+    super.destroy();
+  }
+
+  handleClick_(evt: MouseEvent) {
+    this.foundation?.handleClick(evt);
+    return true;
+  }
+
+  handleKeydown_(evt: KeyboardEvent) {
+    this.foundation?.handleKeydown(evt);
+    return true;
+  }
+
+  handleEvent(evt: Event): void {
+    switch (evt.currentTarget) {
+      case window:
+        switch (evt.type) {
+          case 'resize':
+          case 'orientationchange': this.foundation?.layout(); break;
+        }
+        break;
+      case document:
+        switch (evt.type) {
+          case 'keydown': this.foundation?.handleDocumentKeydown(evt as KeyboardEvent); break;
+        }
+        break;
+    }
+  }
+
+  handleOpening_() {
+    LAYOUT_EVENTS.forEach((evtType) => window.addEventListener(evtType, this));
+    document.addEventListener('keydown', this);
+  }
+
+  handleClosing_() {
+    LAYOUT_EVENTS.forEach((evtType) => window.removeEventListener(evtType, this));
+    document.removeEventListener('keydown', this);
+  }
+
+  /** Opens the dialog */
+  open() {
+    this.foundation?.open();
+  }
+
+  /**
+   * Closes the dialog
+   * @param action Action to close the dialog with
+   */
+  close(action = '') {
+    this.foundation?.close(action);
+  }
+
+  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: MDCDialogAdapter = {
+      addBodyClass: (className) => document.body.classList.add(className),
+      addClass: (className) => this.root.classList.add(className),
+      areButtonsStacked: () => util.areTopsMisaligned(this.buttons),
+      clickDefaultButton: () => {
+        if (this.defaultButton) {
+          this.defaultButton.click();
+        }
+      },
+      eventTargetMatches: (target, selector) =>
+        target ? matches(target as Element, selector) : false,
+      getActionFromEvent: (evt: Event) => {
+        if (!evt.target) {
+          return '';
+        }
+        const element = closest(evt.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
+        return element?.getAttribute(strings.ACTION_ATTRIBUTE) ?? null;
+      },
+      getInitialFocusEl: () => this.getInitialFocusEl(),
+      hasClass: (className) => this.root.classList.contains(className),
+      isContentScrollable: () => util.isScrollable(this.content),
+      notifyClosed: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSED_EVENT, action ? { action } : {}),
+      notifyClosing: (action) => this.emit<MDCDialogCloseEventDetail>(strings.CLOSING_EVENT, action ? { action } : {}),
+      notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),
+      notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),
+      releaseFocus: () => {
+        this.mdcFocusTrap?.releaseFocus();
+      },
+      removeBodyClass: (className) => document.body.classList.remove(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      reverseButtons: () => {
+        this.buttons.reverse();
+        this.buttons.forEach((button) => {
+          button.parentElement!.appendChild(button);
+        });
+      },
+      trapFocus: () => {
+        this.mdcFocusTrap?.trapFocus();
+      },
+      registerContentEventHandler: (evt, handler) => {
+        if (this.content instanceof HTMLElement) {
+          this.content.addEventListener(evt, handler);
+        }
+      },
+      deregisterContentEventHandler: (evt, handler) => {
+        if (this.content instanceof HTMLElement) {
+          this.content.removeEventListener(evt, handler);
+        }
+      },
+      isScrollableContentAtTop: () => {
+        return util.isScrollAtTop(this.content);
+      },
+      isScrollableContentAtBottom: () => {
+        return util.isScrollAtBottom(this.content);
+      },
+      registerWindowEventHandler: (evt, handler) => {
+        window.addEventListener(evt, handler);
+      },
+      deregisterWindowEventHandler: (evt, handler) => {
+        window.removeEventListener(evt, handler);
+      },
+    };
+    return new MDCDialogFoundation(adapter);
+  }
+
+  getInitialFocusEl = (): HTMLElement | null => {
+    return this.root.querySelector(`[${strings.INITIAL_FOCUS_ATTRIBUTE}] input, [${strings.INITIAL_FOCUS_ATTRIBUTE}] .mdc-select__anchor`);
+  };
+}
+
+/** @hidden */
+export interface IMdcDialogElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcDialog;
+    };
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(FocusTrap.prototype as any).getFocusableElements = function (root: HTMLElement): HTMLElement[] {
+  const focusableEls =
+    [].slice.call(root.querySelectorAll(
+      '[autofocus], [tabindex], a, input, textarea, select, button, .mdc-select__anchor')) as
+    HTMLElement[];
+  return focusableEls.filter((el) => {
+    const isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||
+      el.getAttribute('disabled') !== null ||
+      el.getAttribute('hidden') !== null ||
+      el.getAttribute('aria-hidden') === 'true';
+    const isTabbableAndVisible = (el.tabIndex >= 0 || el.classList.contains('mdc-select__anchor')) &&
+      el.getBoundingClientRect().width > 0 &&
+      !el.classList.contains('mdc-dom-focus-sentinel') && !isDisabledOrHidden;
+
+    let isProgrammaticallyHidden = false;
+    if (isTabbableAndVisible) {
+      const style = getComputedStyle(el);
+      isProgrammaticallyHidden =
+        style.display === 'none' || style.visibility === 'hidden';
+    }
+    return isTabbableAndVisible && !isProgrammaticallyHidden;
+  });
+};