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

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

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

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

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

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

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

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

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

package/src/drawer/mdc-drawer.html

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

package/src/drawer/mdc-drawer.ts

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

package/src/drawer/styles/_index.scss

@@ -0,0 +1 @@
+@forward './mdc-drawer.scss';

package/src/drawer/styles/mdc-drawer.import.scss

@@ -0,0 +1 @@
+@forward './mdc-drawer.scss';

package/src/elevation/doc/api.json

@@ -0,0 +1,317 @@
+{
+	"id": 0,
+	"name": "aurelia-mdc-web-docs",
+	"kind": 1,
+	"kindString": "Project",
+	"flags": {},
+	"children": [
+		{
+			"id": 6,
+			"name": "MdcElevation",
+			"kind": 128,
+			"kindString": "Class",
+			"flags": {},
+			"comment": {
+				"tags": [
+					{
+						"tag": "selector",
+						"text": "[mdc-elevation]\n"
+					}
+				]
+			},
+			"decorators": [
+				{
+					"name": "inject",
+					"type": {
+						"type": "reference",
+						"name": "inject"
+					},
+					"arguments": {
+						"dependencies": "Element"
+					}
+				},
+				{
+					"name": "customAttribute",
+					"type": {
+						"type": "reference",
+						"name": "customAttribute"
+					},
+					"arguments": {
+						"name": "'mdc-elevation'"
+					}
+				}
+			],
+			"children": [
+				{
+					"id": 7,
+					"name": "constructor",
+					"kind": 512,
+					"kindString": "Constructor",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-elevation.ts",
+							"line": 9,
+							"character": 2
+						}
+					],
+					"signatures": [
+						{
+							"id": 8,
+							"name": "new MdcElevation",
+							"kind": 16384,
+							"kindString": "Constructor signature",
+							"flags": {},
+							"parameters": [
+								{
+									"id": 9,
+									"name": "root",
+									"kind": 32768,
+									"kindString": "Parameter",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "HTMLElement"
+									}
+								}
+							],
+							"type": {
+								"type": "reference",
+								"id": 6,
+								"name": "MdcElevation"
+							}
+						}
+					]
+				},
+				{
+					"id": 10,
+					"name": "value",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-elevation.ts",
+							"line": 11,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "string"
+					}
+				},
+				{
+					"id": 15,
+					"name": "attached",
+					"kind": 2048,
+					"kindString": "Method",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-elevation.ts",
+							"line": 20,
+							"character": 2
+						}
+					],
+					"signatures": [
+						{
+							"id": 16,
+							"name": "attached",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "void"
+							}
+						}
+					]
+				},
+				{
+					"id": 11,
+					"name": "valueChanged",
+					"kind": 2048,
+					"kindString": "Method",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-elevation.ts",
+							"line": 12,
+							"character": 2
+						}
+					],
+					"signatures": [
+						{
+							"id": 12,
+							"name": "valueChanged",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {},
+							"parameters": [
+								{
+									"id": 13,
+									"name": "newValue",
+									"kind": 32768,
+									"kindString": "Parameter",
+									"flags": {},
+									"type": {
+										"type": "intrinsic",
+										"name": "string"
+									}
+								},
+								{
+									"id": 14,
+									"name": "oldValue",
+									"kind": 32768,
+									"kindString": "Parameter",
+									"flags": {
+										"isOptional": true
+									},
+									"type": {
+										"type": "intrinsic",
+										"name": "string"
+									}
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "void"
+							}
+						}
+					]
+				}
+			],
+			"groups": [
+				{
+					"title": "Constructors",
+					"kind": 512,
+					"children": [
+						7
+					]
+				},
+				{
+					"title": "Properties",
+					"kind": 1024,
+					"children": [
+						10
+					]
+				},
+				{
+					"title": "Methods",
+					"kind": 2048,
+					"children": [
+						15,
+						11
+					]
+				}
+			],
+			"sources": [
+				{
+					"fileName": "mdc-elevation.ts",
+					"line": 8,
+					"character": 13
+				}
+			]
+		},
+		{
+			"id": 1,
+			"name": "ElevationConfiguration",
+			"kind": 32,
+			"kindString": "Variable",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "index.ts",
+					"line": 6,
+					"character": 13
+				}
+			],
+			"type": {
+				"type": "reflection",
+				"declaration": {
+					"id": 2,
+					"name": "__type",
+					"kind": 65536,
+					"kindString": "Type literal",
+					"flags": {},
+					"children": [
+						{
+							"id": 3,
+							"name": "register",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 7,
+									"character": 2
+								}
+							],
+							"signatures": [
+								{
+									"id": 4,
+									"name": "register",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 5,
+											"name": "container",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "IContainer"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "IContainer"
+									}
+								}
+							]
+						}
+					],
+					"groups": [
+						{
+							"title": "Methods",
+							"kind": 2048,
+							"children": [
+								3
+							]
+						}
+					]
+				}
+			},
+			"defaultValue": "..."
+		}
+	],
+	"groups": [
+		{
+			"title": "Classes",
+			"kind": 128,
+			"children": [
+				6
+			]
+		},
+		{
+			"title": "Variables",
+			"kind": 32,
+			"children": [
+				1
+			]
+		}
+	],
+	"sources": [
+		{
+			"fileName": "index.ts",
+			"line": 1,
+			"character": 0
+		}
+	]
+}

package/src/elevation/mdc-elevation.ts

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