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

package/src/drawer/mdc-drawer.ts

@@ -1,125 +1,125 @@
-import { MdcComponent, MdcFocusTrap } from '../base';
-import { MDCDismissibleDrawerFoundation, cssClasses, strings, MDCModalDrawerFoundation, MDCDrawerAdapter } from '@material/drawer';
-import { customElement, bindable, inject } from 'aurelia';
-import template from './mdc-drawer.html?raw';
-
-strings.CLOSE_EVENT = strings.CLOSE_EVENT.toLowerCase();
-strings.OPEN_EVENT = strings.OPEN_EVENT.toLowerCase();
-
-/**
- * @selector mdc-drawer
- * @emits mdcdrawer:closed | Event dispatched on drawer close
- * @emits mdcdrawer:opened | Event dispatched on drawer open
- */
-@inject(Element)
-@customElement({ name: 'mdc-drawer', template })
-export class MdcDrawer extends MdcComponent<MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation> {
-
-  /** Set the drawer implementation */
-  @bindable()
-  type: 'standard' | 'dismissible' | 'modal' = 'standard';
-
-  /**
-   * @return boolean Proxies to the foundation's `open`/`close` methods.
-   * Also returns true if drawer is in the open position.
-   */
-  get open(): boolean {
-    return this.foundation!.isOpen();
-  }
-
-  /**
-   * Toggles the drawer open and closed.
-   */
-  set open(isOpen: boolean) {
-    if (isOpen) {
-      this.foundation?.open();
-    } else {
-      this.foundation?.close();
-    }
-  }
-
-  private previousFocus_?: Element | null;
-  private scrim_?: HTMLElement | null; // assigned in initialSyncWithDOM()
-
-  mdcFocusTrap: MdcFocusTrap;
-
-  attaching() {
-    if (this.root.parentElement!.clientWidth < 900) {
-      this.type = 'modal';
-    }
-  }
-
-  initialSyncWithDOM() {
-    if (this.type === 'modal') {
-      this.scrim_ = document.createElement('div');
-      this.scrim_.classList.add('mdc-drawer-scrim');
-      this.root.insertAdjacentElement('afterend', this.scrim_);
-
-      if (this.scrim_) {
-        this.scrim_.addEventListener('click', this.handleScrimClick_);
-      }
-    }
-  }
-
-  handleScrimClick_ = () => {
-    this.open = false;
-    return (this.foundation as MDCModalDrawerFoundation).handleScrimClick();
-  };
-
-  handleKeydown_(evt: KeyboardEvent) {
-    this.foundation?.handleKeydown(evt);
-    return true;
-  }
-
-  handleTransitionEnd_(evt: TransitionEvent) {
-    this.foundation?.handleTransitionEnd(evt);
-    return true;
-  }
-
-  destroy() {
-    const { MODAL } = cssClasses;
-    if (this.scrim_ && this.handleScrimClick_ && this.root.classList.contains(MODAL)) {
-      this.scrim_.removeEventListener('click', this.handleScrimClick_);
-      // Ensure drawer is closed to hide scrim and release focus
-      this.open = false;
-    }
-  }
-
-  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: MDCDrawerAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      hasClass: (className) => this.root.classList.contains(className),
-      elementHasClass: (element, className) => element.classList.contains(className),
-      saveFocus: () => this.previousFocus_ = document.activeElement,
-      restoreFocus: () => {
-        const previousFocus = this.previousFocus_ as HTMLOrSVGElement | null;
-        if (previousFocus?.focus && this.root.contains(document.activeElement)) {
-          previousFocus.focus();
-        }
-      },
-      focusActiveNavigationItem: () => {
-        const activeNavItemEl = this.root.querySelector<HTMLElement>('.mdc-deprecated-list-item--activated');
-        if (activeNavItemEl) {
-          activeNavItemEl.focus();
-        }
-      },
-      notifyClose: () => this.emit(strings.CLOSE_EVENT, {}, true /* shouldBubble */),
-      notifyOpen: () => this.emit(strings.OPEN_EVENT, {}, true /* shouldBubble */),
-      trapFocus: () => this.mdcFocusTrap.trapFocus(),
-      releaseFocus: () => this.mdcFocusTrap.releaseFocus(),
-    };
-
-    if (this.type === 'modal') {
-      return new MDCModalDrawerFoundation(adapter);
-    } else {
-      return new MDCDismissibleDrawerFoundation(adapter);
-    }
-  }
-
-  toggle() {
-    this.open = !this.open;
-  }
-}
+import { MdcComponent, MdcFocusTrap } from '../base';
+import { MDCDismissibleDrawerFoundation, cssClasses, strings, MDCModalDrawerFoundation, MDCDrawerAdapter } from '@material/drawer';
+import { customElement, bindable, inject } from 'aurelia';
+import template from './mdc-drawer.html?raw';
+
+strings.CLOSE_EVENT = strings.CLOSE_EVENT.toLowerCase();
+strings.OPEN_EVENT = strings.OPEN_EVENT.toLowerCase();
+
+/**
+ * @selector mdc-drawer
+ * @emits mdcdrawer:closed | Event dispatched on drawer close
+ * @emits mdcdrawer:opened | Event dispatched on drawer open
+ */
+@inject(Element)
+@customElement({ name: 'mdc-drawer', template })
+export class MdcDrawer extends MdcComponent<MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation> {
+
+  /** Set the drawer implementation */
+  @bindable()
+  type: 'standard' | 'dismissible' | 'modal' = 'standard';
+
+  /**
+   * @return boolean Proxies to the foundation's `open`/`close` methods.
+   * Also returns true if drawer is in the open position.
+   */
+  get open(): boolean {
+    return this.foundation!.isOpen();
+  }
+
+  /**
+   * Toggles the drawer open and closed.
+   */
+  set open(isOpen: boolean) {
+    if (isOpen) {
+      this.foundation?.open();
+    } else {
+      this.foundation?.close();
+    }
+  }
+
+  private previousFocus_?: Element | null;
+  private scrim_?: HTMLElement | null; // assigned in initialSyncWithDOM()
+
+  mdcFocusTrap: MdcFocusTrap;
+
+  attaching() {
+    if (this.root.parentElement!.clientWidth < 900) {
+      this.type = 'modal';
+    }
+  }
+
+  initialSyncWithDOM() {
+    if (this.type === 'modal') {
+      this.scrim_ = document.createElement('div');
+      this.scrim_.classList.add('mdc-drawer-scrim');
+      this.root.insertAdjacentElement('afterend', this.scrim_);
+
+      if (this.scrim_) {
+        this.scrim_.addEventListener('click', this.handleScrimClick_);
+      }
+    }
+  }
+
+  handleScrimClick_ = () => {
+    this.open = false;
+    return (this.foundation as MDCModalDrawerFoundation).handleScrimClick();
+  };
+
+  handleKeydown_(evt: KeyboardEvent) {
+    this.foundation?.handleKeydown(evt);
+    return true;
+  }
+
+  handleTransitionEnd_(evt: TransitionEvent) {
+    this.foundation?.handleTransitionEnd(evt);
+    return true;
+  }
+
+  destroy() {
+    const { MODAL } = cssClasses;
+    if (this.scrim_ && this.handleScrimClick_ && this.root.classList.contains(MODAL)) {
+      this.scrim_.removeEventListener('click', this.handleScrimClick_);
+      // Ensure drawer is closed to hide scrim and release focus
+      this.open = false;
+    }
+  }
+
+  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: MDCDrawerAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      elementHasClass: (element, className) => element.classList.contains(className),
+      saveFocus: () => this.previousFocus_ = document.activeElement,
+      restoreFocus: () => {
+        const previousFocus = this.previousFocus_ as HTMLOrSVGElement | null;
+        if (previousFocus?.focus && this.root.contains(document.activeElement)) {
+          previousFocus.focus();
+        }
+      },
+      focusActiveNavigationItem: () => {
+        const activeNavItemEl = this.root.querySelector<HTMLElement>('.mdc-deprecated-list-item--activated');
+        if (activeNavItemEl) {
+          activeNavItemEl.focus();
+        }
+      },
+      notifyClose: () => this.emit(strings.CLOSE_EVENT, {}, true /* shouldBubble */),
+      notifyOpen: () => this.emit(strings.OPEN_EVENT, {}, true /* shouldBubble */),
+      trapFocus: () => this.mdcFocusTrap.trapFocus(),
+      releaseFocus: () => this.mdcFocusTrap.releaseFocus(),
+    };
+
+    if (this.type === 'modal') {
+      return new MDCModalDrawerFoundation(adapter);
+    } else {
+      return new MDCDismissibleDrawerFoundation(adapter);
+    }
+  }
+
+  toggle() {
+    this.open = !this.open;
+  }
+}

package/src/elevation/mdc-elevation.ts

@@ -1,23 +1,23 @@
-import { customAttribute, inject } from 'aurelia';
-
-/**
- * @selector [mdc-elevation]
- */
-@inject(Element)
-@customAttribute('mdc-elevation')
-export class MdcElevation {
-  constructor(private root: HTMLElement) { }
-
-  value: string;
-  valueChanged(newValue: string, oldValue?: string) {
-    if (oldValue) {
-      this.root.classList.add(`mdc-elevation--z${oldValue}`);
-    } else {
-      this.root.classList.add(`mdc-elevation--z${newValue}`);
-    }
-  }
-
-  attached() {
-    this.valueChanged(this.value, undefined);
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * @selector [mdc-elevation]
+ */
+@inject(Element)
+@customAttribute('mdc-elevation')
+export class MdcElevation {
+  constructor(private root: HTMLElement) { }
+
+  value: string;
+  valueChanged(newValue: string, oldValue?: string) {
+    if (oldValue) {
+      this.root.classList.add(`mdc-elevation--z${oldValue}`);
+    } else {
+      this.root.classList.add(`mdc-elevation--z${newValue}`);
+    }
+  }
+
+  attached() {
+    this.valueChanged(this.value, undefined);
+  }
+}

package/src/expandable/mdc-expandable.html

@@ -1,28 +1,28 @@
-<template
-  class="mdc-expandable mdc-expandable--${open ? 'open' : 'closed'} ${accordion === undefined ? '' : 'mdc-expandable--accordion__' + accordion}">
-  <div class="
-      mdc-expandable__header
-      mdc-expandable__header--${open ? 'open' : 'closed'}
-      ${focused ? 'mdc-expandable__header--focused' : ''}
-    " ref="header" click.trigger="toggle()" focus.trigger="handleFocus()" blur.trigger="handleBlur()"
-    mdc-ripple="no-class.bind: true;" tabindex="0" keydown.trigger="handleKeydown($event)">
-    <div class="mdc-expandable__caption">
-      <au-slot name="caption"></au-slot>
-    </div>
-    <span class="mdc-expandable__dropdown-icon">
-      <svg class="mdc-expandable__dropdown-icon-graphic" viewBox="7 10 10 5">
-        <polygon class="mdc-expandable__dropdown-icon-inactive" stroke="none" fill-rule="evenodd"
-          points="7 10 12 15 17 10">
-        </polygon>
-        <polygon class="mdc-expandable__dropdown-icon-active" stroke="none" fill-rule="evenodd"
-          points="7 15 12 10 17 15">
-        </polygon>
-      </svg>
-    </span>
-  </div>
-  <div class="mdc-expandable__content-container" ref="contentContainer">
-    <div class="mdc-expandable__content" ref="content">
-      <au-slot></au-slot>
-    </div>
-  </div>
-</template>
+<template
+  class="mdc-expandable mdc-expandable--${open ? 'open' : 'closed'} ${accordion === undefined ? '' : 'mdc-expandable--accordion__' + accordion}">
+  <div class="
+      mdc-expandable__header
+      mdc-expandable__header--${open ? 'open' : 'closed'}
+      ${focused ? 'mdc-expandable__header--focused' : ''}
+    " ref="header" click.trigger="toggle()" focus.trigger="handleFocus()" blur.trigger="handleBlur()"
+    mdc-ripple="no-class.bind: true;" tabindex="0" keydown.trigger="handleKeydown($event)">
+    <div class="mdc-expandable__caption">
+      <au-slot name="caption"></au-slot>
+    </div>
+    <span class="mdc-expandable__dropdown-icon">
+      <svg class="mdc-expandable__dropdown-icon-graphic" viewBox="7 10 10 5">
+        <polygon class="mdc-expandable__dropdown-icon-inactive" stroke="none" fill-rule="evenodd"
+          points="7 10 12 15 17 10">
+        </polygon>
+        <polygon class="mdc-expandable__dropdown-icon-active" stroke="none" fill-rule="evenodd"
+          points="7 15 12 10 17 15">
+        </polygon>
+      </svg>
+    </span>
+  </div>
+  <div class="mdc-expandable__content-container" ref="contentContainer">
+    <div class="mdc-expandable__content" ref="content">
+      <au-slot></au-slot>
+    </div>
+  </div>
+</template>

package/src/expandable/styles/_icon-variables.scss

@@ -1,3 +1,3 @@
-$icon-size: 24px !default;
-$dense-icon-size: 20px !default;
-$icon-horizontal-margin: 12px !default;
+$icon-size: 24px !default;
+$dense-icon-size: 20px !default;
+$icon-horizontal-margin: 12px !default;

package/src/expandable/styles/_index.scss

@@ -1 +1 @@
-@forward './mdc-expandable.scss';
+@forward './mdc-expandable.scss';