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

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

@@ -0,0 +1,48 @@
+import Aurelia, { IAurelia, CustomElement, resolve } from 'aurelia';
+import { MdcSnackbar } from './mdc-snackbar';
+import { MDCSnackbarCloseEvent } from '@material/snackbar';
+
+interface IMdcSnackbarBindingContext {
+  label: string;
+  actions: string[] | undefined;
+  options?: Partial<ISnackbarOptions>;
+  handleClosed(evt: MDCSnackbarCloseEvent): void;
+}
+
+export interface ISnackbarOptions {
+  timeout: number;
+  closeOnEscape: boolean;
+  dismissible: boolean;
+  stacked: boolean;
+  leading: boolean;
+  classes: string;
+  actionClasses: string;
+  dismissClasses: string;
+}
+
+export class MdcSnackbarService {
+  constructor(private readonly au: Aurelia = resolve(IAurelia)) { }
+
+  async open(label: string, actions?: string | string[], options?: Partial<ISnackbarOptions>) {
+    // const props = { 'mdcsnackbar:closed.trigger': 'handleClosed($event)' };
+    let closedResolver: (reason?: string | PromiseLike<string> | undefined) => void;
+    const closedPromise = new Promise<string>(r => closedResolver = r);
+    const bindingContext: IMdcSnackbarBindingContext = {
+      label,
+      actions: typeof actions === 'string' ? [actions] : actions,
+      options,
+      handleClosed: (evt: MDCSnackbarCloseEvent) => {
+        closedResolver(evt.detail.reason);
+        controller.deactivate();
+        snackbar.remove();
+      }
+    };
+
+    const snackbar = document.createElement('div');
+    snackbar.innerHTML = '<mdc-snackbar mdcsnackbar:closed.trigger="handleClosed($event)" label.bind="label" actions.bind="actions" dismissible.bind="options.dismissible" stacked.bind="options.stacked" timeout.bind="options.timeout" close-on-escape.bind="options.closeOnEscape" classes.bind="options.classes" action-classes.bind="options.actionClasses" dismiss-classes.bind="options.dismissClasses" leading.bind="options.leading"></mdc-snackbar>';
+    const controller = await this.au.enhance({ host: snackbar, component: bindingContext });
+    document.body.appendChild(snackbar);
+    CustomElement.for<MdcSnackbar>(snackbar.firstElementChild as HTMLElement).viewModel.open();
+    return closedPromise;
+  }
+}

package/src/snackbar/mdc-snackbar.html

@@ -0,0 +1,14 @@
+<template class="mdc-snackbar ${classes}
+  ${stacked ? 'mdc-snackbar--stacked' : ''}
+  ${leading ? 'mdc-snackbar--leading' : ''}
+" keydown.trigger="handleKeyDown($event)">
+  <div class="mdc-snackbar__surface" ref="surfaceEl_">
+    <div class="mdc-snackbar__label" role="status" aria-live="polite" ref="labelEl_">${label}</div>
+    <div class="mdc-snackbar__actions">
+      <button repeat.for="a of actions" class="mdc-button mdc-snackbar__action ${actionClasses}"
+        click.trigger="handleAction(a)">${a}</button>
+      <button if.bind="dismissible" class="mdc-icon-button mdc-snackbar__dismiss material-icons ${dismissClasses}"
+        click.trigger="handleDismiss()">close</button>
+    </div>
+  </div>
+</template>

package/src/snackbar/mdc-snackbar.ts

@@ -0,0 +1,109 @@
+import { customElement, inject, bindable } from 'aurelia';
+import { MdcComponent, booleanAttr, number } from '../base';
+import { MDCSnackbarFoundation, MDCSnackbarAdapter, util, MDCSnackbarCloseEventDetail, strings } from '@material/snackbar';
+import template from './mdc-snackbar.html?raw';
+
+strings.OPENING_EVENT = strings.OPENING_EVENT.toLowerCase();
+strings.OPENED_EVENT = strings.OPENED_EVENT.toLowerCase();
+strings.CLOSING_EVENT = strings.CLOSING_EVENT.toLowerCase();
+strings.CLOSED_EVENT = strings.CLOSED_EVENT.toLowerCase();
+
+@inject(Element)
+@customElement({ name: 'mdc-snackbar', template })
+export class MdcSnackbar extends MdcComponent<MDCSnackbarFoundation> {
+
+  private labelEl_!: Element; // assigned in html
+
+  @bindable()
+  label: string;
+
+  @bindable()
+  actions: string[];
+
+  @bindable({ set: booleanAttr })
+  dismissible: boolean;
+
+  @bindable({ set: booleanAttr })
+  stacked: boolean;
+
+  @bindable({ set: number })
+  timeout?: number;
+  timeoutChanged() {
+    if (this.timeout !== undefined && !isNaN(this.timeout)) {
+      this.foundation?.setTimeoutMs(this.timeout);
+    }
+  }
+
+  @bindable({ set: booleanAttr })
+  closeOnEscape: boolean = true;
+  closeOnEscapeChanged() {
+    this.foundation?.setCloseOnEscape(this.closeOnEscape);
+  }
+
+  @bindable()
+  classes: string;
+
+  @bindable()
+  actionClasses: string;
+
+  @bindable()
+  dismissClasses: string;
+
+  @bindable({ set: booleanAttr })
+  leading: boolean;
+
+  initialSyncWithDOM() {
+    this.timeoutChanged();
+    this.closeOnEscapeChanged();
+  }
+
+  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: MDCSnackbarAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      announce: () => util.announce(this.labelEl_),
+      notifyClosed: (reason) => this.emit<MDCSnackbarCloseEventDetail>(strings.CLOSED_EVENT, reason ? { reason } : {}),
+      notifyClosing: (reason) => this.emit<MDCSnackbarCloseEventDetail>(strings.CLOSING_EVENT, reason ? { reason } : {}),
+      notifyOpened: () => this.emit(strings.OPENED_EVENT, {}),
+      notifyOpening: () => this.emit(strings.OPENING_EVENT, {}),
+      removeClass: (className) => this.root.classList.remove(className),
+    };
+    return new MDCSnackbarFoundation(adapter);
+  }
+
+  open() {
+    this.foundation?.open();
+  }
+
+  /**
+   * @param reason Why the snackbar was closed. Value will be passed to CLOSING_EVENT and CLOSED_EVENT via the
+   *     `event.detail.reason` property. Standard values are REASON_ACTION and REASON_DISMISS, but custom
+   *     client-specific values may also be used if desired.
+   */
+  close(reason = '') {
+    this.foundation?.close(reason);
+  }
+
+  handleAction(action: string) {
+    this.foundation?.close(action);
+  }
+
+  handleDismiss() {
+    this.close(strings.REASON_DISMISS);
+  }
+
+  handleKeyDown(evt: KeyboardEvent) {
+    this.foundation?.handleKeyDown(evt);
+    return true;
+  }
+}
+
+/** @hidden */
+export interface IMdcSnackbarElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcSnackbar;
+    };
+  };
+}