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

package/src/checkbox/mdc-checkbox.ts

@@ -1,217 +1,217 @@
-import { MdcComponent, booleanAttr } from '../base';
-import { MDCCheckboxFoundation, MDCCheckboxAdapter } from '@material/checkbox';
-import { getCorrectEventName } from '@material/animation/util';
-import { customElement, inject, bindable, BindingMode, CustomElement } from 'aurelia';
-import template from './mdc-checkbox.html?raw';
-
-let checkboxId = 0;
-
-/**
- * @selector mdc-checkbox
- * @emits change | Event dispatched on checked change.
- */
-@inject(Element)
-@customElement({ name: 'mdc-checkbox', template })
-export class MdcCheckbox extends MdcComponent<MDCCheckboxFoundation> {
-  constructor(root: IMdcCheckboxElement) {
-    super(root);
-    defineMdcCheckboxElementApis(this.root);
-  }
-
-  nativeControl_: HTMLInputElement;
-
-  id = `mdc-checkbox-${++checkboxId}-input`;
-
-  /**
-   * Disables the component.
-   */
-  @bindable({ set: booleanAttr })
-  disabled: boolean;
-  disabledChanged() {
-    if (this.nativeControl_) {
-      this.nativeControl_.disabled = this.disabled;
-    }
-  }
-
-  /**
-   * Set the component touch target to 48 x 48 px.
-   */
-  @bindable({ set: booleanAttr })
-  touch: boolean;
-
-  /**
-   * Whether ripple ink is disabled.
-   */
-  @bindable({ set: booleanAttr })
-  disableRipple: boolean;
-
-  /**
-   * Whether the checkbox should go to checked state or unchecked when toggled from indeterminate state.
-   */
-  @bindable({ set: booleanAttr })
-  indeterminateToChecked: boolean = true;
-
-  initialChecked?: boolean;
-
-  get checked(): boolean {
-    if (this.nativeControl_) {
-      return this.nativeControl_.checked;
-    } else {
-      return this.initialChecked ?? false;
-    }
-  }
-
-  /**
-   * Whether the checkbox is checked.
-   */
-  set checked(checked: boolean) {
-    if (this.nativeControl_) {
-      this.nativeControl_.checked = checked;
-    } else {
-      this.initialChecked = checked;
-    }
-  }
-
-  /**
-   * Represent a checkbox with three states (e.g. a nested list of checkable items).
-   */
-  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
-  indeterminate: boolean;
-  indeterminateChanged() {
-    if (this.nativeControl_) {
-      this.nativeControl_.indeterminate = this.indeterminate;
-    }
-    this.foundation?.handleChange();
-  }
-
-  get value(): string {
-    return this.nativeControl_.value;
-  }
-
-  set value(value: string) {
-    this.nativeControl_.value = value;
-  }
-
-  attaching() {
-    this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
-
-    if (this.root.hasAttribute('checked')) {
-      const attributeValue = this.root.getAttribute('checked');
-
-      if (attributeValue || attributeValue === '') {
-        (this.root as IMdcCheckboxElement).checked = true;
-      }
-    }
-
-    if (this.root.hasAttribute('indeterminate')) {
-      const attributeValue = this.root.getAttribute('indeterminate');
-
-      if (attributeValue || attributeValue === '') {
-        (this.root as IMdcCheckboxElement).indeterminate = true;
-      }
-    }
-  }
-
-  initialSyncWithDOM() {
-    this.disabledChanged();
-    if (this.initialChecked !== undefined) {
-      this.checked = this.initialChecked;
-    }
-  }
-
-  destroy() {
-    this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
-  }
-
-  handleChange_() {
-    if (this.indeterminate) {
-      this.indeterminate = false;
-      this.checked = this.indeterminateToChecked;
-    }
-    this.foundation?.handleChange();
-  }
-
-  handleAnimationEnd_() {
-    this.foundation?.handleAnimationEnd();
-  }
-
-  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: MDCCheckboxAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      forceLayout: () => (this.root).offsetWidth,
-      hasNativeControl: () => !!this.nativeControl_,
-      isAttachedToDOM: () => Boolean(this.root.parentNode),
-      isChecked: () => this.checked,
-      isIndeterminate: () => this.indeterminate,
-      removeClass: (className) => {
-        this.root.classList.remove(className);
-      },
-      removeNativeControlAttr: (attr) => {
-        this.nativeControl_.removeAttribute(attr);
-      },
-      setNativeControlAttr: (attr, value) => {
-        this.nativeControl_.setAttribute(attr, value);
-      },
-      setNativeControlDisabled: (disabled) => {
-        this.nativeControl_.disabled = disabled;
-      },
-    };
-    return new MDCCheckboxFoundation(adapter);
-  }
-
-  /**
-   * Set focus to the checkbox.
-   */
-  focus() {
-    this.nativeControl_.focus();
-  }
-
-  /**
-   * Moves focus from the checkbox.
-   */
-  blur() {
-    this.nativeControl_.blur();
-  }
-}
-
-/** @hidden */
-export interface IMdcCheckboxElement extends HTMLElement {
-  checked: boolean;
-  indeterminate: boolean;
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcCheckbox;
-    };
-  };
-}
-
-function defineMdcCheckboxElementApis(element: HTMLElement) {
-  Object.defineProperties(element, {
-    type: {
-      value: 'checkbox',
-    },
-    checked: {
-      get(this: IMdcCheckboxElement) {
-        return CustomElement.for<MdcCheckbox>(this).viewModel.checked;
-      },
-      set(this: IMdcCheckboxElement, value: boolean) {
-        CustomElement.for<MdcCheckbox>(this).viewModel.checked = value;
-      },
-      configurable: true
-    },
-    focus: {
-      value(this: IMdcCheckboxElement) {
-        CustomElement.for<MdcCheckbox>(this).viewModel.focus();
-      },
-      configurable: true
-    },
-    blur: {
-      value(this: IMdcCheckboxElement) {
-        CustomElement.for<MdcCheckbox>(this).viewModel.blur();
-      },
-      configurable: true
-    }
-  });
-}
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCCheckboxFoundation, MDCCheckboxAdapter } from '@material/checkbox';
+import { getCorrectEventName } from '@material/animation/util';
+import { customElement, inject, bindable, BindingMode, CustomElement } from 'aurelia';
+import template from './mdc-checkbox.html?raw';
+
+let checkboxId = 0;
+
+/**
+ * @selector mdc-checkbox
+ * @emits change | Event dispatched on checked change.
+ */
+@inject(Element)
+@customElement({ name: 'mdc-checkbox', template })
+export class MdcCheckbox extends MdcComponent<MDCCheckboxFoundation> {
+  constructor(root: IMdcCheckboxElement) {
+    super(root);
+    defineMdcCheckboxElementApis(this.root);
+  }
+
+  nativeControl_: HTMLInputElement;
+
+  id = `mdc-checkbox-${++checkboxId}-input`;
+
+  /**
+   * Disables the component.
+   */
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+  disabledChanged() {
+    if (this.nativeControl_) {
+      this.nativeControl_.disabled = this.disabled;
+    }
+  }
+
+  /**
+   * Set the component touch target to 48 x 48 px.
+   */
+  @bindable({ set: booleanAttr })
+  touch: boolean;
+
+  /**
+   * Whether ripple ink is disabled.
+   */
+  @bindable({ set: booleanAttr })
+  disableRipple: boolean;
+
+  /**
+   * Whether the checkbox should go to checked state or unchecked when toggled from indeterminate state.
+   */
+  @bindable({ set: booleanAttr })
+  indeterminateToChecked: boolean = true;
+
+  initialChecked?: boolean;
+
+  get checked(): boolean {
+    if (this.nativeControl_) {
+      return this.nativeControl_.checked;
+    } else {
+      return this.initialChecked ?? false;
+    }
+  }
+
+  /**
+   * Whether the checkbox is checked.
+   */
+  set checked(checked: boolean) {
+    if (this.nativeControl_) {
+      this.nativeControl_.checked = checked;
+    } else {
+      this.initialChecked = checked;
+    }
+  }
+
+  /**
+   * Represent a checkbox with three states (e.g. a nested list of checkable items).
+   */
+  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })
+  indeterminate: boolean;
+  indeterminateChanged() {
+    if (this.nativeControl_) {
+      this.nativeControl_.indeterminate = this.indeterminate;
+    }
+    this.foundation?.handleChange();
+  }
+
+  get value(): string {
+    return this.nativeControl_.value;
+  }
+
+  set value(value: string) {
+    this.nativeControl_.value = value;
+  }
+
+  attaching() {
+    this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
+
+    if (this.root.hasAttribute('checked')) {
+      const attributeValue = this.root.getAttribute('checked');
+
+      if (attributeValue || attributeValue === '') {
+        (this.root as IMdcCheckboxElement).checked = true;
+      }
+    }
+
+    if (this.root.hasAttribute('indeterminate')) {
+      const attributeValue = this.root.getAttribute('indeterminate');
+
+      if (attributeValue || attributeValue === '') {
+        (this.root as IMdcCheckboxElement).indeterminate = true;
+      }
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.disabledChanged();
+    if (this.initialChecked !== undefined) {
+      this.checked = this.initialChecked;
+    }
+  }
+
+  destroy() {
+    this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
+  }
+
+  handleChange_() {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+      this.checked = this.indeterminateToChecked;
+    }
+    this.foundation?.handleChange();
+  }
+
+  handleAnimationEnd_() {
+    this.foundation?.handleAnimationEnd();
+  }
+
+  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: MDCCheckboxAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      forceLayout: () => (this.root).offsetWidth,
+      hasNativeControl: () => !!this.nativeControl_,
+      isAttachedToDOM: () => Boolean(this.root.parentNode),
+      isChecked: () => this.checked,
+      isIndeterminate: () => this.indeterminate,
+      removeClass: (className) => {
+        this.root.classList.remove(className);
+      },
+      removeNativeControlAttr: (attr) => {
+        this.nativeControl_.removeAttribute(attr);
+      },
+      setNativeControlAttr: (attr, value) => {
+        this.nativeControl_.setAttribute(attr, value);
+      },
+      setNativeControlDisabled: (disabled) => {
+        this.nativeControl_.disabled = disabled;
+      },
+    };
+    return new MDCCheckboxFoundation(adapter);
+  }
+
+  /**
+   * Set focus to the checkbox.
+   */
+  focus() {
+    this.nativeControl_.focus();
+  }
+
+  /**
+   * Moves focus from the checkbox.
+   */
+  blur() {
+    this.nativeControl_.blur();
+  }
+}
+
+/** @hidden */
+export interface IMdcCheckboxElement extends HTMLElement {
+  checked: boolean;
+  indeterminate: boolean;
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcCheckbox;
+    };
+  };
+}
+
+function defineMdcCheckboxElementApis(element: HTMLElement) {
+  Object.defineProperties(element, {
+    type: {
+      value: 'checkbox',
+    },
+    checked: {
+      get(this: IMdcCheckboxElement) {
+        return CustomElement.for<MdcCheckbox>(this).viewModel.checked;
+      },
+      set(this: IMdcCheckboxElement, value: boolean) {
+        CustomElement.for<MdcCheckbox>(this).viewModel.checked = value;
+      },
+      configurable: true
+    },
+    focus: {
+      value(this: IMdcCheckboxElement) {
+        CustomElement.for<MdcCheckbox>(this).viewModel.focus();
+      },
+      configurable: true
+    },
+    blur: {
+      value(this: IMdcCheckboxElement) {
+        CustomElement.for<MdcCheckbox>(this).viewModel.blur();
+      },
+      configurable: true
+    }
+  });
+}

package/src/chips/mdc-chip/mdc-chip.html

@@ -1,24 +1,24 @@
-<template class="
-    mdc-evolution-chip
-    ${filter ? 'mdc-evolution-chip--selectable' : ''}
-    ${disabled ? 'mdc-evolution-chip--disabled' : ''}
-    ${icon ? 'mdc-evolution-chip--with-primary-icon' : ''}
-  " role="row" mdcchipaction:interaction.trigger="handleActionInteraction($event)"
-  mdcchipaction:navigation.trigger="handleActionNavigation($event)" animationend.trigger="handleAnimationEnd($event)"
-  transitionend.trigger="handleTransitionEnd()">
-
-  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
-    <au-slot name="primary-action">
-      <button mdc-chip-action selectable.bind="filter" disabled.bind="disabled"
-        icon.bind="icon">
-        <au-slot></au-slot>
-      </button>
-    </au-slot>
-  </span>
-
-  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing" role="gridcell">
-    <au-slot name="trailing-action"></au-slot>
-  </span>
-
-  <au-slot name="non-navigable-trailing-action"></au-slot>
-</template>
+<template class="
+    mdc-evolution-chip
+    ${filter ? 'mdc-evolution-chip--selectable' : ''}
+    ${disabled ? 'mdc-evolution-chip--disabled' : ''}
+    ${icon ? 'mdc-evolution-chip--with-primary-icon' : ''}
+  " role="row" mdcchipaction:interaction.trigger="handleActionInteraction($event)"
+  mdcchipaction:navigation.trigger="handleActionNavigation($event)" animationend.trigger="handleAnimationEnd($event)"
+  transitionend.trigger="handleTransitionEnd()">
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
+    <au-slot name="primary-action">
+      <button mdc-chip-action selectable.bind="filter" disabled.bind="disabled"
+        icon.bind="icon">
+        <au-slot></au-slot>
+      </button>
+    </au-slot>
+  </span>
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing" role="gridcell">
+    <au-slot name="trailing-action"></au-slot>
+  </span>
+
+  <au-slot name="non-navigable-trailing-action"></au-slot>
+</template>

package/src/chips/mdc-chip-action/enhance-mdc-chip-action.ts

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

package/src/chips/mdc-chip-action/mdc-chip-action.html

@@ -1,25 +1,25 @@
-<template class="
-    mdc-evolution-chip__action
-    ${trailing ? 'mdc-evolution-chip__action--trailing' : 'mdc-evolution-chip__action--primary'}
-  " click.trigger="handleClick()" keydown.trigger="handleKeydown($event)"
-  mdc-ripple="no-class.bind: true; compute-bounding-rect.bind: computeRippleClientRect">
-  <span class="
-      mdc-evolution-chip__ripple
-      ${trailing ? 'mdc-evolution-chip__ripple--trailing' : 'mdc-evolution-chip__ripple--primary'}
-    "></span>
-  <span class="mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing material-icons"
-    if.bind="trailing && icon">${icon}</span>
-  <span class="mdc-evolution-chip__graphic" if.bind="!trailing && (icon || selectable)">
-    <span if.bind="icon"
-      class="mdc-evolution-chip__icon ${trailing ? '' : 'mdc-evolution-chip__icon--primary'} material-icons">${icon}</span>
-    <span class="mdc-evolution-chip__checkmark" if.bind="selectable">
-      <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30">
-        <path class="mdc-evolution-chip__checkmark-path" fill="none" stroke="black"
-          d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-      </svg>
-    </span>
-  </span>
-  <span class="mdc-evolution-chip__text-label">
-    <au-slot></au-slot>
-  </span>
-</template>
+<template class="
+    mdc-evolution-chip__action
+    ${trailing ? 'mdc-evolution-chip__action--trailing' : 'mdc-evolution-chip__action--primary'}
+  " click.trigger="handleClick()" keydown.trigger="handleKeydown($event)"
+  mdc-ripple="no-class.bind: true; compute-bounding-rect.bind: computeRippleClientRect">
+  <span class="
+      mdc-evolution-chip__ripple
+      ${trailing ? 'mdc-evolution-chip__ripple--trailing' : 'mdc-evolution-chip__ripple--primary'}
+    "></span>
+  <span class="mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing material-icons"
+    if.bind="trailing && icon">${icon}</span>
+  <span class="mdc-evolution-chip__graphic" if.bind="!trailing && (icon || selectable)">
+    <span if.bind="icon"
+      class="mdc-evolution-chip__icon ${trailing ? '' : 'mdc-evolution-chip__icon--primary'} material-icons">${icon}</span>
+    <span class="mdc-evolution-chip__checkmark" if.bind="selectable">
+      <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30">
+        <path class="mdc-evolution-chip__checkmark-path" fill="none" stroke="black"
+          d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+      </svg>
+    </span>
+  </span>
+  <span class="mdc-evolution-chip__text-label">
+    <au-slot></au-slot>
+  </span>
+</template>