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

package/src/fab/doc/api.json

@@ -0,0 +1,396 @@
+{
+	"id": 0,
+	"name": "aurelia-mdc-web-docs",
+	"kind": 1,
+	"kindString": "Project",
+	"flags": {},
+	"children": [
+		{
+			"id": 6,
+			"name": "MdcFab",
+			"kind": 128,
+			"kindString": "Class",
+			"flags": {},
+			"comment": {
+				"tags": [
+					{
+						"tag": "selector",
+						"text": "mdc-fab"
+					},
+					{
+						"tag": "selector",
+						"text": "a[mdc-fab]"
+					},
+					{
+						"tag": "selector",
+						"text": "button[mdc-fab]\n"
+					}
+				]
+			},
+			"decorators": [
+				{
+					"name": "customElement",
+					"type": {
+						"type": "reference",
+						"name": "customElement"
+					},
+					"arguments": {
+						"name": "'mdc-fab'"
+					}
+				},
+				{
+					"name": "processContent",
+					"type": {
+						"type": "reference",
+						"name": "processContent"
+					},
+					"arguments": {
+						"hook": "defaultSlotProcessContent"
+					}
+				}
+			],
+			"children": [
+				{
+					"id": 7,
+					"name": "constructor",
+					"kind": 512,
+					"kindString": "Constructor",
+					"flags": {},
+					"signatures": [
+						{
+							"id": 8,
+							"name": "new MdcFab",
+							"kind": 16384,
+							"kindString": "Constructor signature",
+							"flags": {},
+							"type": {
+								"type": "reference",
+								"id": 6,
+								"name": "MdcFab"
+							}
+						}
+					]
+				},
+				{
+					"id": 12,
+					"name": "exited",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Animates the FAB in or out of view"
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							},
+							"arguments": {
+								"config": "{ set: booleanAttr }"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-fab.ts",
+							"line": 27,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 10,
+					"name": "extended",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Modifies the FAB to wider size which includes a text label"
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							},
+							"arguments": {
+								"config": "{ set: booleanAttr }"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-fab.ts",
+							"line": 19,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 13,
+					"name": "icon",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Optional. Apply a Material Icon."
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-fab.ts",
+							"line": 31,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "string"
+					}
+				},
+				{
+					"id": 14,
+					"name": "label",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Optional, for the text label. Applicable only for Extended FAB."
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-fab.ts",
+							"line": 35,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "string"
+					}
+				},
+				{
+					"id": 9,
+					"name": "mini",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Make the fab smaller (40 x 40 pixels)"
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							},
+							"arguments": {
+								"config": "{ set: booleanAttr }"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-fab.ts",
+							"line": 15,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				},
+				{
+					"id": 11,
+					"name": "touch",
+					"kind": 1024,
+					"kindString": "Property",
+					"flags": {},
+					"comment": {
+						"shortText": "Set the mini fab touch target to 48 x 48 px. Only applies if FAB is set to mini as well."
+					},
+					"decorators": [
+						{
+							"name": "bindable",
+							"type": {
+								"type": "reference",
+								"name": "bindable"
+							},
+							"arguments": {
+								"config": "{ set: booleanAttr }"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "mdc-fab.ts",
+							"line": 23,
+							"character": 2
+						}
+					],
+					"type": {
+						"type": "intrinsic",
+						"name": "boolean"
+					}
+				}
+			],
+			"groups": [
+				{
+					"title": "Constructors",
+					"kind": 512,
+					"children": [
+						7
+					]
+				},
+				{
+					"title": "Properties",
+					"kind": 1024,
+					"children": [
+						12,
+						10,
+						13,
+						14,
+						9,
+						11
+					]
+				}
+			],
+			"sources": [
+				{
+					"fileName": "mdc-fab.ts",
+					"line": 12,
+					"character": 13
+				}
+			]
+		},
+		{
+			"id": 1,
+			"name": "FabConfiguration",
+			"kind": 32,
+			"kindString": "Variable",
+			"flags": {},
+			"sources": [
+				{
+					"fileName": "index.ts",
+					"line": 9,
+					"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": 10,
+									"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/fab/enhance-mdc-fab.ts

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

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

@@ -0,0 +1,15 @@
+import { inject, customAttribute } from 'aurelia';
+
+/**
+ * Optional. Can be used with SVG icons, for example.
+ * @selector [mdc-fab-icon]
+ */
+@inject(Element)
+@customAttribute('mdc-fab-icon')
+export class MdcFabIcon {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-fab__icon');
+  }
+}

package/src/fab/mdc-fab.html

@@ -0,0 +1,13 @@
+<template class="
+    mdc-fab
+    ${mini ? 'mdc-fab--mini' : ''}
+    ${extended ? 'mdc-fab--extended' : ''}
+    ${exited ? 'mdc-fab--exited' : ''}
+    ${touch ? 'mdc-fab--touch' : ''}
+  " tabindex.bind="disabled ? -1 : 0" mdc-ripple="no-class.bind: true;">
+  <div class="mdc-fab__ripple"></div>
+  <au-slot></au-slot>
+  <span class="material-icons mdc-fab__icon" if.bind="icon">${icon}</span>
+  <span class="mdc-fab__label" if.bind="label">${label}</span>
+  <div class="mdc-fab__touch" if.bind="touch"></div>
+</template>

package/src/fab/mdc-fab.ts

@@ -0,0 +1,50 @@
+import { customElement, bindable, inject } from 'aurelia';
+import { booleanAttr } from '../base';
+import template from './mdc-fab.html?raw';
+
+/**
+ * @selector mdc-fab
+ * @selector a[mdc-fab]
+ * @selector button[mdc-fab]
+ */
+@inject(Element)
+@customElement({ name: 'mdc-fab', template })
+export class MdcFab {
+  constructor(private root: HTMLElement) { }
+
+  /** Make the fab smaller (40 x 40 pixels) */
+  @bindable({ set: booleanAttr })
+  mini: boolean;
+
+  /** Modifies the FAB to wider size which includes a text label */
+  @bindable({ set: booleanAttr })
+  extended: boolean;
+
+  /** Set the mini fab touch target to 48 x 48 px. Only applies if FAB is set to mini as well. */
+  @bindable({ set: booleanAttr })
+  touch: boolean;
+
+  /** Animates the FAB in or out of view */
+  @bindable({ set: booleanAttr })
+  exited: boolean;
+
+  /** Optional. Apply a Material Icon. */
+  @bindable()
+  icon: string;
+
+  /** Optional, for the text label. Applicable only for Extended FAB. */
+  @bindable()
+  label: string;
+
+
+  /** Set the button disabled */
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+  disabledChanged() {
+    if (this.disabled) {
+      this.root.setAttribute('disabled', '');
+    } else {
+      this.root.removeAttribute('disabled');
+    }
+  }
+}