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

package/src/icon-button/enhance-mdc-icon-button.ts

@@ -0,0 +1,8 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceMdcIconButton {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replaceAll('mdc-icon-button=""','as-element="mdc-icon-button"');
+  }
+}

package/src/icon-button/mdc-icon-button-icon/mdc-icon-button-icon.html

@@ -0,0 +1,4 @@
+<template class="mdc-icon-button__icon ${on ? 'mdc-icon-button__icon--on' : ''} material-icons">
+  <au-slot></au-slot>
+  <span class="material-icons" if.bind="icon">${icon}</span>
+</template>

package/src/icon-button/mdc-icon-button-icon/mdc-icon-button-icon.ts

@@ -0,0 +1,29 @@
+import { customElement, bindable } from 'aurelia';
+import { booleanAttr } from '../../base';
+import template from './mdc-icon-button-icon.html?raw';
+
+/**
+ * Optional. Used as a toggle icon button element.
+ * @selector mdc-icon-button-icon
+ */
+@customElement({ name: 'mdc-icon-button-icon', template })
+export class MdcIconButtonIcon {
+  /** Indicates an "on" toggle element */
+  @bindable({ set: booleanAttr })
+  on: boolean;
+
+  /** Optional. Set a Material icon. */
+  @bindable()
+  icon: string;
+}
+
+/** @hidden */
+export interface IMdcIconButtonIconElement extends HTMLElement {
+  checked: boolean;
+  indeterminate: boolean;
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcIconButtonIcon;
+    };
+  };
+}

package/src/icon-button/mdc-icon-button.html

@@ -0,0 +1,11 @@
+<template class="
+    mdc-icon-button mdc-icon-button--display-flex
+    ${on ? 'mdc-icon-button--on' : ''}
+    ${icon ? 'material-icons' : ''}
+    ${touch ? 'mdc-icon-button--touch' : ''}
+  " mdc-ripple="no-class.bind: true; unbounded.bind: true" click.trigger="handleClick()">
+  <div class="mdc-icon-button__ripple"></div>
+  <au-slot></au-slot>
+  <span if.bind="icon">${icon}</span>
+  <div class="mdc-icon-button__touch" if.bind="touch"></div>
+</template>

package/src/icon-button/mdc-icon-button.ts

@@ -0,0 +1,69 @@
+import { customElement, inject, BindingMode, bindable } from 'aurelia';
+import { MDCIconButtonToggleFoundation, MDCIconButtonToggleAdapter, MDCIconButtonToggleEventDetail, strings } from '@material/icon-button';
+import { MdcComponent, booleanAttr } from '../base';
+import template from './mdc-icon-button.html?raw';
+
+/**
+ * @selector button[mdc-icon-button]
+ * @selector a[mdc-icon-button]
+ * @selector mdc-icon-button
+ */
+@inject(Element)
+@customElement({ name: 'mdc-icon-button', template })
+export class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {
+  /** Sets the toggle state to the provided value */
+  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
+  on: boolean;
+
+  /** Optional. Set a Material icon as a non-toggle icon. */
+  @bindable()
+  icon: string;
+
+  // this is necessary for the route-href to work
+  @bindable()
+  href: string;
+  hrefChanged() {
+    if (this.href) {
+      this.root.setAttribute('href', this.href);
+    } else {
+      this.root.removeAttribute('href');
+    }
+  }
+
+  /**
+   * Set the component touch target to 48 x 48 px
+   */
+  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
+  touch: boolean;
+
+  attached() {
+    this.hrefChanged();
+    if (this.root.querySelector('mdc-icon-button-icon')) {
+      this.foundation = this.getDefaultFoundation();
+      this.foundation.init();
+    }
+  }
+
+  handleClick() {
+    this.foundation?.handleClick();
+    return true;
+  }
+
+  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: MDCIconButtonToggleAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      notifyChange: (evtData) => {
+        this.emit<MDCIconButtonToggleEventDetail>(strings.CHANGE_EVENT, evtData);
+        this.on = evtData.isOn;
+      },
+      removeClass: (className) => this.root.classList.remove(className),
+      getAttr: (attrName) => this.root.getAttribute(attrName),
+      setAttr: (attrName, attrValue) => this.root.setAttribute(attrName, attrValue),
+    };
+    return new MDCIconButtonToggleFoundation(adapter);
+  }
+
+}

package/src/image-list/doc/api.json

@@ -0,0 +1,438 @@
+{
+	"id": 0,
+	"name": "aurelia-mdc-web-docs",
+	"kind": 1,
+	"kindString": "Project",
+	"flags": {},
+	"children": [
+		{
+			"id": 6,
+			"name": "MdcImageList",
+			"kind": 128,
+			"kindString": "Class",
+			"flags": {},
+			"comment": {
+				"tags": [
+					{
+						"tag": "selector",
+						"text": "mdc-image-list\n"
+					}
+				]
+			},
+			"decorators": [
+				{
+					"name": "inject",
+					"type": {
+						"type": "reference",
+						"name": "inject"
+					},
+					"arguments": {
+						"dependencies": "Element"
+					}
+				},
+				{
+					"name": "customElement",
+					"type": {
+						"type": "reference",
+						"name": "customElement"
+					},
+					"arguments": {
+						"name": "'mdc-image-list'"
+					}
+				},
+				{
+					"name": "processContent",
+					"type": {
+						"type": "reference",
+						"name": "processContent"
+					},
+					"arguments": {
+						"hook": "defaultSlotProcessContent"
+					}
+				}
+			],
+			"children": [
+				{
+					"id": 7,
+					"name": "constructor",
+					"kind": 512,
+					"kindString": "Constructor",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 20,
+							"character": 2
+						}
+					],
+					"signatures": [
+						{
+							"id": 8,
+							"name": "new MdcImageList",
+							"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": "MdcImageList"
+							}
+						}
+					]
+				},
+				{
+					"id": 14,
+					"name": "columns",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Number of columns in the list"
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 38,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "union",
+						"types": [
+							{
+								"type": "intrinsic",
+								"name": "string"
+							},
+							{
+								"type": "array",
+								"elementType": {
+									"type": "reference",
+									"typeArguments": [
+										{
+											"type": "reference",
+											"name": "IColumnsOptions"
+										}
+									],
+									"name": "Partial"
+								}
+							}
+						]
+					}
+				},
+				{
+					"id": 11,
+					"name": "id",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 26,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "string"
+					},
+					"defaultValue": "..."
+				},
+				{
+					"id": 12,
+					"name": "masonry",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Indicates that this Image List should use the Masonry variant"
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							},
+							"arguments": {
+								"config": "{ set: booleanAttr }"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 30,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 10,
+					"name": "style",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 24,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "reference",
+						"name": "HTMLStyleElement"
+					}
+				},
+				{
+					"id": 13,
+					"name": "textProtection",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image)"
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							},
+							"arguments": {
+								"config": "{ set: booleanAttr }"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 34,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 17,
+					"name": "bound",
+					"kind": 2048,
+					"kindString": "Method",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 71,
+							"character": 2
+						}
+					],
+					"signatures": [
+						{
+							"id": 18,
+							"name": "bound",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "void"
+							}
+						}
+					]
+				},
+				{
+					"id": 15,
+					"name": "columnsChanged",
+					"kind": 2048,
+					"kindString": "Method",
+					"flags": {},
+					"sources": [
+						{
+							"fileName": "mdc-image-list.ts",
+							"line": 39,
+							"character": 2
+						}
+					],
+					"signatures": [
+						{
+							"id": 16,
+							"name": "columnsChanged",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {},
+							"type": {
+								"type": "intrinsic",
+								"name": "void"
+							}
+						}
+					]
+				}
+			],
+			"groups": [
+				{
+					"title": "Constructors",
+					"kind": 512,
+					"children": [
+						7
+					]
+				},
+				{
+					"title": "Properties",
+					"kind": 1024,
+					"children": [
+						14,
+						11,
+						12,
+						10,
+						13
+					]
+				},
+				{
+					"title": "Methods",
+					"kind": 2048,
+					"children": [
+						17,
+						15
+					]
+				}
+			],
+			"sources": [
+				{
+					"fileName": "mdc-image-list.ts",
+					"line": 19,
+					"character": 13
+				}
+			]
+		},
+		{
+			"id": 1,
+			"name": "ImageListConfiguration",
+			"kind": 32,
+			"kindString": "Variable",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "index.ts",
+					"line": 7,
+					"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": 8,
+									"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/image-list/mdc-image-list-item/mdc-image-list-item.html

@@ -0,0 +1,9 @@
+<template class="mdc-image-list__item">
+  <div class="mdc-image-list__image-aspect-container" if.bind="hasAspect">
+    <img class="mdc-image-list__image" src.bind="src">
+  </div>
+  <img class="mdc-image-list__image" src.bind="src" if.bind="!hasAspect">
+  <div class="mdc-image-list__supporting" if.bind="label">
+    <span class="mdc-image-list__label">${label}</span>
+  </div>
+</template>

package/src/image-list/mdc-image-list-item/mdc-image-list-item.ts

@@ -0,0 +1,31 @@
+import { customElement, inject, bindable } from 'aurelia';
+import { number } from '../../base';
+import template from './mdc-image-list-item.html?raw';
+
+/**
+ * Mandatory. Indicates each item in an Image List.
+ * @selector mdc-image-list-item
+ */
+@inject(Element)
+@customElement({ name: 'mdc-image-list-item', template })
+export class MdcImageListItem {
+  constructor(private root: HTMLElement) { }
+
+  /** Image url */
+  @bindable()
+  src: string;
+
+  /** Image label */
+  @bindable()
+  label: string;
+
+  hasAspect: boolean;
+
+  /** Sets image aspect ratio */
+  @bindable({ set: number })
+  aspect: number;
+  aspectChanged() {
+    this.hasAspect = !isNaN(this.aspect);
+    this.root.style.setProperty('--mdc-image-list-item-aspect', isNaN(this.aspect) ? '1' : `${this.aspect}`);
+  }
+}

package/src/image-list/mdc-image-list.html

@@ -0,0 +1,7 @@
+<template class="mdc-image-list
+  ${masonry ? 'mdc-image-list--masonry' : ''}
+  ${textProtection ? 'mdc-image-list--with-text-protection' : ''}
+  ${columns ? 'mdc-image-list--columns-set' : ''}">
+  <style ref="style"></style>
+  <au-slot></au-slot>
+</template>

package/src/image-list/mdc-image-list.ts

@@ -0,0 +1,73 @@
+import { customElement, bindable, inject } from 'aurelia';
+import { booleanAttr } from '../base';
+import template from './mdc-image-list.html?raw';
+
+export interface IColumnsOptions {
+  media: string;
+  count: number;
+  gutterSize: number;
+}
+
+let id = 0;
+
+/**
+ * @selector mdc-image-list
+ */
+@inject(Element)
+@customElement({ name: 'mdc-image-list', template })
+export class MdcImageList {
+  constructor(private root: HTMLElement) {
+    this.root.setAttribute('id', this.id);
+  }
+
+  style: HTMLStyleElement;
+
+  id = `mdc-image-list-${++id}`;
+
+  /** Indicates that this Image List should use the Masonry variant */
+  @bindable({ set: booleanAttr })
+  masonry: boolean;
+
+  /** Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image) */
+  @bindable({ set: booleanAttr })
+  textProtection: boolean;
+
+  /** Number of columns in the list */
+  @bindable()
+  columns: string | Partial<IColumnsOptions>[];
+  columnsChanged() {
+    if (!this.columns) {
+      return;
+    }
+    const columns = typeof this.columns === 'string' ? [{ count: parseInt(this.columns) }] : this.columns;
+    if (this.masonry) {
+      this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
+        p += `${c.media ? `@media (${c.media}) {` : ''}
+  #${this.id} {
+    column-count: ${c.count};
+    column-gap: ${c.gutterSize ?? 4}px;
+  }
+
+  #${this.id} .mdc-image-list__item {
+    margin-bottom: ${c.gutterSize ?? 4}px;
+  }
+${c.media ? '}' : ''}`;
+        return p;
+      }, '');
+    } else {
+      this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
+        p += `${c.media ? `@media (${c.media}) {` : ''}
+  #${this.id} .mdc-image-list__item {
+    width: calc(100% / ${c.count} - ${(c.gutterSize ?? 4) + 1 / c.count!}px);
+    margin: ${c.gutterSize ?? 4 / 2}px;
+  }
+${c.media ? '}' : ''}`;
+        return p;
+      }, '');
+    }
+  }
+
+  bound() {
+    this.columnsChanged();
+  }
+}

package/src/image-list/styles/_index.scss

@@ -0,0 +1 @@
+@forward "mdc-image-list";

package/src/image-list/styles/mdc-image-list.import.scss

@@ -0,0 +1 @@
+@forward "mdc-image-list";

package/src/image-list/styles/mdc-image-list.scss

@@ -0,0 +1,7 @@
+.mdc-image-list__image-aspect-container {
+  padding-bottom: calc(100% / var(--mdc-image-list-item-aspect, 1));
+}
+
+.mdc-image-list__item {
+  display: block;
+}