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

package/src/dialog/mdc-dialog.ts

@@ -1,224 +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;
-  });
-};
+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, button[${strings.INITIAL_FOCUS_ATTRIBUTE}], .mdc-button[${strings.INITIAL_FOCUS_ATTRIBUTE}]`);
+  };
+}
+
+/** @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;
+  });
+};

package/src/drawer/mdc-drawer-app-content.ts

@@ -1,11 +1,11 @@
-import { customElement } from 'aurelia';
-
-/**
- * Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.
- * @selector mdc-drawer-app-content
- */
-@customElement({
-  name: 'mdc-drawer-app-content',
-  template: '<template class="mdc-drawer-app-content"><au-slot></au-slot></template>'
-})
-export class MdcDrawerAppContent { }
+import { customElement } from 'aurelia';
+
+/**
+ * Mandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.
+ * @selector mdc-drawer-app-content
+ */
+@customElement({
+  name: 'mdc-drawer-app-content',
+  template: '<template class="mdc-drawer-app-content"><au-slot></au-slot></template>'
+})
+export class MdcDrawerAppContent { }

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

@@ -1,11 +1,11 @@
-import { customElement } from 'aurelia';
-
-/**
- * Scrollable content area of the drawer
- * @selector mdc-drawer-content
- */
-@customElement({
-  name: 'mdc-drawer-content',
-  template: '<template class="mdc-drawer__content"><au-slot></au-slot></template>'
-})
-export class MdcDrawerContent { }
+import { customElement } from 'aurelia';
+
+/**
+ * Scrollable content area of the drawer
+ * @selector mdc-drawer-content
+ */
+@customElement({
+  name: 'mdc-drawer-content',
+  template: '<template class="mdc-drawer__content"><au-slot></au-slot></template>'
+})
+export class MdcDrawerContent { }

package/src/drawer/mdc-drawer-header/mdc-drawer-header.html

@@ -1,5 +1,5 @@
-<template class="mdc-drawer__header">
-  <h3 class="mdc-drawer__title" if.bind="title">${title}</h3>
-  <h6 class="mdc-drawer__subtitle" if.bind="subtitle">${subtitle}</h6>
-  <au-slot></au-slot>
-</template>
+<template class="mdc-drawer__header">
+  <h3 class="mdc-drawer__title" if.bind="title">${title}</h3>
+  <h6 class="mdc-drawer__subtitle" if.bind="subtitle">${subtitle}</h6>
+  <au-slot></au-slot>
+</template>

package/src/drawer/mdc-drawer-header/mdc-drawer-header.ts

@@ -1,18 +1,18 @@
-import { customElement, bindable } from 'aurelia';
-import template from './mdc-drawer-header.html?raw';
-
-/**
- * Optional. Non-scrollable element that exists at the top of the drawer.
- * @selector mdc-drawer-header
- */
-@customElement({ name: 'mdc-drawer-header', template })
-export class MdcDrawerHeader {
-
-  /** Optional. Title text element of the drawer. */
-  @bindable()
-  title: string;
-
-  /** Optional. Subtitle text element of the drawer. */
-  @bindable()
-  subtitle: string;
-}
+import { customElement, bindable } from 'aurelia';
+import template from './mdc-drawer-header.html?raw';
+
+/**
+ * Optional. Non-scrollable element that exists at the top of the drawer.
+ * @selector mdc-drawer-header
+ */
+@customElement({ name: 'mdc-drawer-header', template })
+export class MdcDrawerHeader {
+
+  /** Optional. Title text element of the drawer. */
+  @bindable()
+  title: string;
+
+  /** Optional. Subtitle text element of the drawer. */
+  @bindable()
+  subtitle: string;
+}

package/src/drawer/mdc-drawer.html

@@ -1,6 +1,6 @@
-<template class="mdc-drawer
-  ${type === 'dismissible' ? 'mdc-drawer--dismissible' : ''}
-  ${ type === 'modal' ? 'mdc-drawer--modal' : ''}" transitionend.trigger="handleTransitionEnd_($event)"
-  keydown.trigger="handleKeydown_($event)" mdc-focus-trap mdc-focus-trap.ref="mdcFocusTrap">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-drawer
+  ${type === 'dismissible' ? 'mdc-drawer--dismissible' : ''}
+  ${ type === 'modal' ? 'mdc-drawer--modal' : ''}" transitionend.trigger="handleTransitionEnd_($event)"
+  keydown.trigger="handleKeydown_($event)" mdc-focus-trap mdc-focus-trap.ref="mdcFocusTrap">
+  <au-slot></au-slot>
+</template>