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

package/src/tab-bar/tab/mdc-tab.ts

@@ -1,118 +1,118 @@
-import { MdcComponent, booleanAttr } from '../../base';
-import { MDCTabFoundation, MDCTabAdapter, MDCTabInteractionEventDetail, MDCTabDimensions } from '@material/tab';
-import { MdcTabIndicator } from '../indicator/mdc-tab-indicator';
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-tab.html?raw';
-
-let tabId = 0;
-
-MDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();
-
-@inject(Element)
-@customElement({ name: 'mdc-tab', template })
-export class MdcTab extends MdcComponent<MDCTabFoundation> {
-  private tabIndicator_: MdcTabIndicator; // assigned in initialize();
-  private content_: HTMLElement; // assigned in initialize();
-
-  @bindable()
-  id: string = `mdc-tab-${++tabId}`;
-
-  @bindable({ set: booleanAttr })
-  fixed: boolean;
-
-  @bindable({ set: booleanAttr })
-  active: boolean;
-
-  @bindable()
-  icon: string;
-
-  @bindable()
-  label: string;
-
-  @bindable({ set: booleanAttr })
-  minWidth: boolean;
-
-  @bindable({ set: booleanAttr })
-  fade: boolean;
-
-  @bindable({ set: booleanAttr })
-  stacked: boolean;
-
-  @bindable()
-  indicatorIcon: string;
-
-  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: MDCTabAdapter = {
-      setAttr: (attr, value) => this.root.setAttribute(attr, value),
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      hasClass: (className) => this.root.classList.contains(className),
-      activateIndicator: (previousIndicatorClientRect) => this.tabIndicator_.activate(previousIndicatorClientRect),
-      deactivateIndicator: () => this.tabIndicator_.deactivate(),
-      notifyInteracted: () => this.emit<MDCTabInteractionEventDetail>(MDCTabFoundation.strings.INTERACTED_EVENT, { tabId: this.id }, true /* bubble */),
-      getOffsetLeft: () => this.root.offsetLeft,
-      getOffsetWidth: () => this.root.offsetWidth,
-      getContentOffsetLeft: () => this.content_.offsetLeft,
-      getContentOffsetWidth: () => this.content_.offsetWidth,
-      focus: () => this.root.focus(),
-    };
-    return new MDCTabFoundation(adapter);
-  }
-
-  isActive(): boolean {
-    return this.foundation!.isActive();
-  }
-
-  set focusOnActivate(focusOnActivate: boolean) {
-    this.foundation?.setFocusOnActivate(focusOnActivate);
-  }
-
-  /**
-   * Activates the tab
-   */
-  activate(computeIndicatorClientRect?: ClientRect) {
-    this.foundation?.activate(computeIndicatorClientRect);
-  }
-
-  /**
-   * Deactivates the tab
-   */
-  deactivate() {
-    this.foundation?.deactivate();
-  }
-
-  /**
-   * Returns the indicator's client rect
-   */
-  computeIndicatorClientRect(): ClientRect {
-    return this.tabIndicator_.computeContentClientRect();
-  }
-
-  computeDimensions(): MDCTabDimensions {
-    return this.foundation!.computeDimensions();
-  }
-
-  /**
-   * Focuses the tab
-   */
-  focus() {
-    this.root.focus();
-  }
-
-}
-
-/** @hidden */
-export interface IMdcTabElement extends HTMLElement {
-  au: {
-    controller: {
-      viewModel: MdcTab;
-    };
-  };
-}
+import { MdcComponent, booleanAttr } from '../../base';
+import { MDCTabFoundation, MDCTabAdapter, MDCTabInteractionEventDetail, MDCTabDimensions } from '@material/tab';
+import { MdcTabIndicator } from '../indicator/mdc-tab-indicator';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab.html?raw';
+
+let tabId = 0;
+
+MDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();
+
+@inject(Element)
+@customElement({ name: 'mdc-tab', template })
+export class MdcTab extends MdcComponent<MDCTabFoundation> {
+  private tabIndicator_: MdcTabIndicator; // assigned in initialize();
+  private content_: HTMLElement; // assigned in initialize();
+
+  @bindable()
+  id: string = `mdc-tab-${++tabId}`;
+
+  @bindable({ set: booleanAttr })
+  fixed: boolean;
+
+  @bindable({ set: booleanAttr })
+  active: boolean;
+
+  @bindable()
+  icon: string;
+
+  @bindable()
+  label: string;
+
+  @bindable({ set: booleanAttr })
+  minWidth: boolean;
+
+  @bindable({ set: booleanAttr })
+  fade: boolean;
+
+  @bindable({ set: booleanAttr })
+  stacked: boolean;
+
+  @bindable()
+  indicatorIcon: string;
+
+  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: MDCTabAdapter = {
+      setAttr: (attr, value) => this.root.setAttribute(attr, value),
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      activateIndicator: (previousIndicatorClientRect) => this.tabIndicator_.activate(previousIndicatorClientRect),
+      deactivateIndicator: () => this.tabIndicator_.deactivate(),
+      notifyInteracted: () => this.emit<MDCTabInteractionEventDetail>(MDCTabFoundation.strings.INTERACTED_EVENT, { tabId: this.id }, true /* bubble */),
+      getOffsetLeft: () => this.root.offsetLeft,
+      getOffsetWidth: () => this.root.offsetWidth,
+      getContentOffsetLeft: () => this.content_.offsetLeft,
+      getContentOffsetWidth: () => this.content_.offsetWidth,
+      focus: () => this.root.focus(),
+    };
+    return new MDCTabFoundation(adapter);
+  }
+
+  isActive(): boolean {
+    return this.foundation!.isActive();
+  }
+
+  set focusOnActivate(focusOnActivate: boolean) {
+    this.foundation?.setFocusOnActivate(focusOnActivate);
+  }
+
+  /**
+   * Activates the tab
+   */
+  activate(computeIndicatorClientRect?: ClientRect) {
+    this.foundation?.activate(computeIndicatorClientRect);
+  }
+
+  /**
+   * Deactivates the tab
+   */
+  deactivate() {
+    this.foundation?.deactivate();
+  }
+
+  /**
+   * Returns the indicator's client rect
+   */
+  computeIndicatorClientRect(): ClientRect {
+    return this.tabIndicator_.computeContentClientRect();
+  }
+
+  computeDimensions(): MDCTabDimensions {
+    return this.foundation!.computeDimensions();
+  }
+
+  /**
+   * Focuses the tab
+   */
+  focus() {
+    this.root.focus();
+  }
+
+}
+
+/** @hidden */
+export interface IMdcTabElement extends HTMLElement {
+  au: {
+    controller: {
+      viewModel: MdcTab;
+    };
+  };
+}

package/src/text-field/enhance-mdc-text-field.ts

@@ -1,12 +1,12 @@
-import { templateCompilerHooks } from 'aurelia';
-
-@templateCompilerHooks
-export class EnhanceMdcTextfield {
-  compiling(template: HTMLElement | HTMLTemplateElement) {
-    if (template.innerHTML.includes('<mdc-text-field')) {
-      template.innerHTML = template.innerHTML
-        .replaceAll('<mdc-text-field ', '<label as-element="mdc-text-field" mdc-text-field-element ')
-        .replaceAll('</mdc-text-field>', '</label>');
-    }
-  }
-}
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceMdcTextfield {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    if (template.innerHTML.includes('<mdc-text-field')) {
+      template.innerHTML = template.innerHTML
+        .replaceAll('<mdc-text-field ', '<label as-element="mdc-text-field" mdc-text-field-element ')
+        .replaceAll('</mdc-text-field>', '</label>');
+    }
+  }
+}

package/src/text-field/mdc-default-text-field-configuration.ts

@@ -1,3 +1,3 @@
-export class MdcDefaultTextFieldConfiguration {
-  outlined?: boolean;
-}
+export class MdcDefaultTextFieldConfiguration {
+  outlined?: boolean;
+}

package/src/text-field/mdc-inputmask.ts

@@ -0,0 +1,45 @@
+import { CustomAttribute, CustomElement, customAttribute, inject, templateCompilerHooks } from 'aurelia';
+
+// mdc-text-field needs to know when inputmask updates internal input element
+@inject(Element)
+@customAttribute('mdc-inputmask')
+export class MdcInputmaskCustomAttribute {
+  constructor(private element: Element) { }
+
+  attached() {
+    this.element.addEventListener('inputmask-change', this);
+    this.inputmaskChangeHandler();
+  }
+
+  detached() {
+    this.element.removeEventListener('inputmask-change', this);
+  }
+
+  handleEvent(e: Event) {
+    if (e.type === 'inputmask-change') {
+      this.inputmaskChangeHandler();
+    }
+  }
+
+  inputmaskChangeHandler() {
+    const inputmask = CustomAttribute.for<{ input: HTMLInputElement }>(this.element, 'inputmask')?.viewModel;
+    const input = CustomElement.for<{ value: string; foundation?: { setValue(value: string): void } }>(this.element)?.viewModel;
+    if (inputmask && input) {
+      input.value = inputmask.input.value;
+      input.foundation?.setValue(inputmask.input.value);
+    }
+  }
+}
+
+@templateCompilerHooks
+export class EnhanceMask {
+  compiling(template: HTMLTemplateElement) {
+    if (!template.content) {
+      return;
+    }
+    const inputs = template.content.querySelectorAll('[inputmask]');
+    for (const i of Array.from(inputs)) {
+      i.setAttribute('mdc-inputmask', '');
+    }
+  }
+}

package/src/text-field/mdc-text-field-character-counter.ts

@@ -1,32 +1,32 @@
-import { inject, customElement } from 'aurelia';
-import { MDCTextFieldCharacterCounterFoundation, MDCTextFieldCharacterCounterAdapter, characterCountCssClasses } from '@material/textfield';
-import { MdcComponent } from '../base';
-
-@inject(Element)
-@customElement({ name: 'mdc-text-field-character-counter', template: `<template class="${characterCountCssClasses.ROOT}"></template>` })
-export class MdcTextFieldCharacterCounter extends MdcComponent<MDCTextFieldCharacterCounterFoundation> {
-  // Provided for access by MDCTextField component
-  get foundationForTextField(): MDCTextFieldCharacterCounterFoundation {
-    return this.foundation!;
-  }
-
-  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: MDCTextFieldCharacterCounterAdapter = {
-      setContent: (content) => {
-        this.root.textContent = content;
-      },
-    };
-    return new MDCTextFieldCharacterCounterFoundation(adapter);
-  }
-}
-
-/** @hidden */
-export interface IMdcTextFieldCharacterCounterElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcTextFieldCharacterCounter;
-    };
-  };
-}
+import { inject, customElement } from 'aurelia';
+import { MDCTextFieldCharacterCounterFoundation, MDCTextFieldCharacterCounterAdapter, characterCountCssClasses } from '@material/textfield';
+import { MdcComponent } from '../base';
+
+@inject(Element)
+@customElement({ name: 'mdc-text-field-character-counter', template: `<template class="${characterCountCssClasses.ROOT}"></template>` })
+export class MdcTextFieldCharacterCounter extends MdcComponent<MDCTextFieldCharacterCounterFoundation> {
+  // Provided for access by MDCTextField component
+  get foundationForTextField(): MDCTextFieldCharacterCounterFoundation {
+    return this.foundation!;
+  }
+
+  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: MDCTextFieldCharacterCounterAdapter = {
+      setContent: (content) => {
+        this.root.textContent = content;
+      },
+    };
+    return new MDCTextFieldCharacterCounterFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcTextFieldCharacterCounterElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcTextFieldCharacterCounter;
+    };
+  };
+}

package/src/text-field/mdc-text-field-helper-line/mdc-text-field-helper-line.html

@@ -1,7 +1,7 @@
-<template class="mdc-text-field-helper-line ${errors.length ? 'mdc-text-field-helper-line--with-errors' : ''}">
-  <au-slot></au-slot>
-  <!-- DO NOT FORMAT THIS FILE! ANY SPACE BEFORE <SLOT> BREAKS HELPER TEXT ALIGNMENT! -->
-  <!-- beautify ignore:start -->
-  <mdc-text-field-helper-text if.bind="errors.length" validation class="mdc-text-field-helper-text--errors"><span class="mdc-text-field-helper-text__error" repeat.for="e of errors">${e}<br/></span></mdc-text-field-helper-text>
-  <!-- beautify ignore:end -->
-</template>
+<template class="mdc-text-field-helper-line ${errors.length ? 'mdc-text-field-helper-line--with-errors' : ''}">
+  <au-slot></au-slot>
+  <!-- DO NOT FORMAT THIS FILE! ANY SPACE BEFORE <SLOT> BREAKS HELPER TEXT ALIGNMENT! -->
+  <!-- beautify ignore:start -->
+  <mdc-text-field-helper-text if.bind="errors.length" validation class="mdc-text-field-helper-text--errors"><span class="mdc-text-field-helper-text__error" repeat.for="e of errors">${e}<br/></span></mdc-text-field-helper-text>
+  <!-- beautify ignore:end -->
+</template>

package/src/text-field/mdc-text-field-helper-line/mdc-text-field-helper-line.ts

@@ -1,37 +1,37 @@
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-text-field-helper-line.html?raw';
-
-@inject(Element)
-@customElement({ name: 'mdc-text-field-helper-line', template })
-export class MdcTextFieldHelperLine {
-  constructor() {
-    this.attachedPromise = this.createAttachedPromise();
-  }
-
-  @bindable()
-  errors: string[];
-
-  attachedPromise: Promise<unknown>
-  protected attachedPromiseResolve: (value?: unknown) => void;
-
-  private async createAttachedPromise() {
-    return new Promise(r => this.attachedPromiseResolve = r);
-  }
-
-  attached() {
-    this.attachedPromiseResolve();
-  }
-
-  detached() {
-    this.attachedPromise = this.createAttachedPromise();
-  }
-}
-
-/** @hidden */
-export interface IMdcTextFieldHelperLineElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcTextFieldHelperLine;
-    };
-  };
-}
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-text-field-helper-line.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-text-field-helper-line', template })
+export class MdcTextFieldHelperLine {
+  constructor() {
+    this.attachedPromise = this.createAttachedPromise();
+  }
+
+  @bindable()
+  errors: string[];
+
+  attachedPromise: Promise<unknown>
+  protected attachedPromiseResolve: (value?: unknown) => void;
+
+  private async createAttachedPromise() {
+    return new Promise(r => this.attachedPromiseResolve = r);
+  }
+
+  attached() {
+    this.attachedPromiseResolve();
+  }
+
+  detached() {
+    this.attachedPromise = this.createAttachedPromise();
+  }
+}
+
+/** @hidden */
+export interface IMdcTextFieldHelperLineElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcTextFieldHelperLine;
+    };
+  };
+}

package/src/text-field/mdc-text-field-helper-text/mdc-text-field-helper-text.html

@@ -1,6 +1,6 @@
-<!-- DO NOT FORMAT THIS FILE! ANY SPACE BETWEEN <TEMPLATE> BREAKS HELPER TEXT ALIGNMENT! -->
-<!-- beautify ignore:start -->
-<template class="
-    ${helperTextCssClasses.ROOT} ${persistent ? helperTextCssClasses.ROOT + '--persistent' : ''}
-    ${validation ? helperTextCssClasses.ROOT + '--validation-msg' : ''}"><au-slot></au-slot></template>
-<!-- beautify ignore:end -->
+<!-- DO NOT FORMAT THIS FILE! ANY SPACE BETWEEN <TEMPLATE> BREAKS HELPER TEXT ALIGNMENT! -->
+<!-- beautify ignore:start -->
+<template class="
+    ${helperTextCssClasses.ROOT} ${persistent ? helperTextCssClasses.ROOT + '--persistent' : ''}
+    ${validation ? helperTextCssClasses.ROOT + '--validation-msg' : ''}"><au-slot></au-slot></template>
+<!-- beautify ignore:end -->

package/src/text-field/mdc-text-field-helper-text/mdc-text-field-helper-text.ts

@@ -1,47 +1,47 @@
-import { MdcComponent, booleanAttr } from '../../base';
-import { MDCTextFieldHelperTextFoundation, MDCTextFieldHelperTextAdapter, helperTextCssClasses } from '@material/textfield';
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-text-field-helper-text.html?raw';
-
-@inject(Element)
-@customElement({ name: 'mdc-text-field-helper-text', template })
-export class MdcTextFieldHelperText extends MdcComponent<MDCTextFieldHelperTextFoundation> {
-  helperTextCssClasses = helperTextCssClasses;
-
-  @bindable({ set: booleanAttr })
-  persistent: boolean;
-
-  @bindable({ set: booleanAttr })
-  validation: boolean;
-
-  // Provided for access by MDCTextField component
-  get foundationForTextField(): MDCTextFieldHelperTextFoundation {
-    return this.foundation!;
-  }
-
-  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: MDCTextFieldHelperTextAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      hasClass: (className) => this.root.classList.contains(className),
-      getAttr: (attr) => this.root.getAttribute(attr),
-      setAttr: (attr, value) => this.root.setAttribute(attr, value),
-      removeAttr: (attr) => this.root.removeAttribute(attr),
-      setContent: (content) => {
-        this.root.textContent = content;
-      },
-    };
-    return new MDCTextFieldHelperTextFoundation(adapter);
-  }
-}
-
-/** @hidden */
-export interface IMdcTextFieldHelperTextElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcTextFieldHelperText;
-    };
-  };
-}
+import { MdcComponent, booleanAttr } from '../../base';
+import { MDCTextFieldHelperTextFoundation, MDCTextFieldHelperTextAdapter, helperTextCssClasses } from '@material/textfield';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-text-field-helper-text.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-text-field-helper-text', template })
+export class MdcTextFieldHelperText extends MdcComponent<MDCTextFieldHelperTextFoundation> {
+  helperTextCssClasses = helperTextCssClasses;
+
+  @bindable({ set: booleanAttr })
+  persistent: boolean;
+
+  @bindable({ set: booleanAttr })
+  validation: boolean;
+
+  // Provided for access by MDCTextField component
+  get foundationForTextField(): MDCTextFieldHelperTextFoundation {
+    return this.foundation!;
+  }
+
+  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: MDCTextFieldHelperTextAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      getAttr: (attr) => this.root.getAttribute(attr),
+      setAttr: (attr, value) => this.root.setAttribute(attr, value),
+      removeAttr: (attr) => this.root.removeAttribute(attr),
+      setContent: (content) => {
+        this.root.textContent = content;
+      },
+    };
+    return new MDCTextFieldHelperTextFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcTextFieldHelperTextElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcTextFieldHelperText;
+    };
+  };
+}