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

package/src/notched-outline/mdc-notched-outline.ts

@@ -1,60 +1,60 @@
-import { MdcComponent } from '../base';
-import { MDCNotchedOutlineFoundation, MDCNotchedOutlineAdapter, cssClasses } from '@material/notched-outline';
-import { MDCFloatingLabelFoundation } from '@material/floating-label';
-import { inject, customElement, slotted } from 'aurelia';
-import template from './mdc-notched-outline.html?raw';
-
-@inject(Element)
-@customElement({ name: 'mdc-notched-outline', template })
-export class MdcNotchedOutline extends MdcComponent<MDCNotchedOutlineFoundation> {
-  private notchElement_!: HTMLElement; // assigned in html
-
-  label?: HTMLElement;
-
-  @slotted({ query: `.${MDCFloatingLabelFoundation.cssClasses.ROOT}` })
-  labels: HTMLElement[];
-  labelsChanged() {
-    if (this.labels.length) {
-      this.label = this.labels[0];
-      this.label.style.transitionDuration = '0s';
-      this.root.classList.add(cssClasses.OUTLINE_UPGRADED);
-      requestAnimationFrame(() => {
-        this.label!.style.transitionDuration = '';
-      });
-    } else {
-      this.label = undefined;
-    }
-  }
-
-  initialSyncWithDOM() {
-    this.labelsChanged();
-  }
-
-  /**
-   * Updates classes and styles to open the notch to the specified width.
-   * @param notchWidth The notch width in the outline.
-   */
-  notch(notchWidth: number) {
-    this.foundation?.notch(notchWidth);
-  }
-
-  /**
-   * Updates classes and styles to close the notch.
-   */
-  closeNotch() {
-    this.foundation?.closeNotch();
-  }
-
-  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: MDCNotchedOutlineAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', `${width}px`),
-      removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'),
-    };
-    return new MDCNotchedOutlineFoundation(adapter);
-  }
-
-}
+import { MdcComponent } from '../base';
+import { MDCNotchedOutlineFoundation, MDCNotchedOutlineAdapter, cssClasses } from '@material/notched-outline';
+import { MDCFloatingLabelFoundation } from '@material/floating-label';
+import { inject, customElement, slotted } from 'aurelia';
+import template from './mdc-notched-outline.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-notched-outline', template })
+export class MdcNotchedOutline extends MdcComponent<MDCNotchedOutlineFoundation> {
+  private notchElement_!: HTMLElement; // assigned in html
+
+  label?: HTMLElement;
+
+  @slotted({ query: `.${MDCFloatingLabelFoundation.cssClasses.ROOT}` })
+  labels: HTMLElement[];
+  labelsChanged() {
+    if (this.labels.length) {
+      this.label = this.labels[0];
+      this.label.style.transitionDuration = '0s';
+      this.root.classList.add(cssClasses.OUTLINE_UPGRADED);
+      requestAnimationFrame(() => {
+        this.label!.style.transitionDuration = '';
+      });
+    } else {
+      this.label = undefined;
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.labelsChanged();
+  }
+
+  /**
+   * Updates classes and styles to open the notch to the specified width.
+   * @param notchWidth The notch width in the outline.
+   */
+  notch(notchWidth: number) {
+    this.foundation?.notch(notchWidth);
+  }
+
+  /**
+   * Updates classes and styles to close the notch.
+   */
+  closeNotch() {
+    this.foundation?.closeNotch();
+  }
+
+  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: MDCNotchedOutlineAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', `${width}px`),
+      removeNotchWidthProperty: () => this.notchElement_.style.removeProperty('width'),
+    };
+    return new MDCNotchedOutlineFoundation(adapter);
+  }
+
+}

package/src/radio/mdc-radio.html

@@ -1,9 +1,9 @@
-<template class="mdc-radio ${touch ? 'mdc-radio--touch' : ''}"
-  mdc-ripple="no-class.bind: true; input.bind: nativeControl_; unbounded.bind: true; active-surface.bind: false">
-  <input type="radio" class="mdc-radio__native-control" id="${id}" ref="nativeControl_" />
-  <div class="mdc-radio__background">
-    <div class="mdc-radio__outer-circle"></div>
-    <div class="mdc-radio__inner-circle"></div>
-  </div>
-  <div class="mdc-radio__ripple"></div>
-</template>
+<template class="mdc-radio ${touch ? 'mdc-radio--touch' : ''}"
+  mdc-ripple="no-class.bind: true; input.bind: nativeControl_; unbounded.bind: true; active-surface.bind: false">
+  <input type="radio" class="mdc-radio__native-control" id="${id}" ref="nativeControl_" />
+  <div class="mdc-radio__background">
+    <div class="mdc-radio__outer-circle"></div>
+    <div class="mdc-radio__inner-circle"></div>
+  </div>
+  <div class="mdc-radio__ripple"></div>
+</template>

package/src/radio/mdc-radio.ts

@@ -1,162 +1,162 @@
-import { MdcComponent, booleanAttr } from '../base';
-import { MDCRadioFoundation, MDCRadioAdapter } from '@material/radio';
-import { inject, customElement, CustomElement, bindable } from 'aurelia';
-import template from './mdc-radio.html?raw';
-
-let radioId = 0;
-
-/**
- * @selector mdc-radio
- */
-@inject(Element)
-@customElement({ name: 'mdc-radio', template })
-export class MdcRadio extends MdcComponent<MDCRadioFoundation> {
-  constructor(root: IMdcRadioElement) {
-    super(root);
-    defineMdcRadioElementApis(this.root);
-  }
-
-  nativeControl_: HTMLInputElement;
-
-  id = `mdc-radio-${++radioId}-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;
-
-  _checked?: boolean;
-  /** Use to verify the checked value */
-  get checked(): boolean {
-    if (this.nativeControl_) {
-      return this.nativeControl_.checked;
-    } else {
-      return this._checked ?? false;
-    }
-  }
-
-  set checked(checked: boolean) {
-    this._checked = checked;
-    if (this.nativeControl_) {
-      this.nativeControl_.checked = checked;
-    }
-  }
-
-  _value?: string;
-  /** Value of the radio button */
-  get value(): string {
-    if (this.nativeControl_) {
-      return this.nativeControl_.value;
-    } else {
-      return this._value ?? '';
-    }
-  }
-
-  set value(value: string) {
-    this._value = value;
-    if (this.nativeControl_) {
-      this.nativeControl_.value = value;
-    }
-  }
-
-  attaching() {
-    if (this.root.hasAttribute('checked')) {
-      const attributeValue = this.root.getAttribute('checked');
-
-      if (attributeValue || attributeValue === '') {
-        (this.root as IMdcRadioElement).checked = true;
-      }
-    }
-  }
-
-  initialSyncWithDOM() {
-    this.disabledChanged();
-    if (this._checked !== undefined) {
-      this.checked = this._checked;
-    }
-    if (this._value !== undefined) {
-      this.value = this._value;
-    }
-  }
-
-  destroy() {
-    this._checked = undefined;
-  }
-
-  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: MDCRadioAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      setNativeControlDisabled: (disabled) => this.nativeControl_.disabled =
-        disabled,
-    };
-    return new MDCRadioFoundation(adapter);
-  }
-
-  /** Set focus to the radio button */
-  focus() {
-    this.nativeControl_.focus();
-  }
-
-  /** Set focus away from the radio button */
-  blur() {
-    this.nativeControl_.blur();
-  }
-}
-
-/** @hidden */
-export interface IMdcRadioElement extends HTMLElement {
-  checked: boolean;
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcRadio;
-    };
-  };
-}
-
-function defineMdcRadioElementApis(element: HTMLElement) {
-  Object.defineProperties(element, {
-    type: {
-      value: 'radio',
-    },
-    checked: {
-      get(this: IMdcRadioElement) {
-        return CustomElement.for<MdcRadio>(this).viewModel.checked;
-      },
-      set(this: IMdcRadioElement, value: boolean) {
-        CustomElement.for<MdcRadio>(this).viewModel.checked = value;
-      },
-      configurable: true
-    },
-    value: {
-      get(this: IMdcRadioElement) {
-        return CustomElement.for<MdcRadio>(this).viewModel.value;
-      },
-      set(this: IMdcRadioElement, value: string) {
-        CustomElement.for<MdcRadio>(this).viewModel.value = value;
-      }
-    },
-    focus: {
-      value(this: IMdcRadioElement) {
-        CustomElement.for<MdcRadio>(this).viewModel.focus();
-      },
-      configurable: true
-    },
-    blur: {
-      value(this: IMdcRadioElement) {
-        CustomElement.for<MdcRadio>(this).viewModel.blur();
-      },
-      configurable: true
-    }
-  });
-}
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCRadioFoundation, MDCRadioAdapter } from '@material/radio';
+import { inject, customElement, CustomElement, bindable } from 'aurelia';
+import template from './mdc-radio.html?raw';
+
+let radioId = 0;
+
+/**
+ * @selector mdc-radio
+ */
+@inject(Element)
+@customElement({ name: 'mdc-radio', template })
+export class MdcRadio extends MdcComponent<MDCRadioFoundation> {
+  constructor(root: IMdcRadioElement) {
+    super(root);
+    defineMdcRadioElementApis(this.root);
+  }
+
+  nativeControl_: HTMLInputElement;
+
+  id = `mdc-radio-${++radioId}-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;
+
+  _checked?: boolean;
+  /** Use to verify the checked value */
+  get checked(): boolean {
+    if (this.nativeControl_) {
+      return this.nativeControl_.checked;
+    } else {
+      return this._checked ?? false;
+    }
+  }
+
+  set checked(checked: boolean) {
+    this._checked = checked;
+    if (this.nativeControl_) {
+      this.nativeControl_.checked = checked;
+    }
+  }
+
+  _value?: string;
+  /** Value of the radio button */
+  get value(): string {
+    if (this.nativeControl_) {
+      return this.nativeControl_.value;
+    } else {
+      return this._value ?? '';
+    }
+  }
+
+  set value(value: string) {
+    this._value = value;
+    if (this.nativeControl_) {
+      this.nativeControl_.value = value;
+    }
+  }
+
+  attaching() {
+    if (this.root.hasAttribute('checked')) {
+      const attributeValue = this.root.getAttribute('checked');
+
+      if (attributeValue || attributeValue === '') {
+        (this.root as IMdcRadioElement).checked = true;
+      }
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.disabledChanged();
+    if (this._checked !== undefined) {
+      this.checked = this._checked;
+    }
+    if (this._value !== undefined) {
+      this.value = this._value;
+    }
+  }
+
+  destroy() {
+    this._checked = undefined;
+  }
+
+  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: MDCRadioAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      setNativeControlDisabled: (disabled) => this.nativeControl_.disabled =
+        disabled,
+    };
+    return new MDCRadioFoundation(adapter);
+  }
+
+  /** Set focus to the radio button */
+  focus() {
+    this.nativeControl_.focus();
+  }
+
+  /** Set focus away from the radio button */
+  blur() {
+    this.nativeControl_.blur();
+  }
+}
+
+/** @hidden */
+export interface IMdcRadioElement extends HTMLElement {
+  checked: boolean;
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcRadio;
+    };
+  };
+}
+
+function defineMdcRadioElementApis(element: HTMLElement) {
+  Object.defineProperties(element, {
+    type: {
+      value: 'radio',
+    },
+    checked: {
+      get(this: IMdcRadioElement) {
+        return CustomElement.for<MdcRadio>(this).viewModel.checked;
+      },
+      set(this: IMdcRadioElement, value: boolean) {
+        CustomElement.for<MdcRadio>(this).viewModel.checked = value;
+      },
+      configurable: true
+    },
+    value: {
+      get(this: IMdcRadioElement) {
+        return CustomElement.for<MdcRadio>(this).viewModel.value;
+      },
+      set(this: IMdcRadioElement, value: string) {
+        CustomElement.for<MdcRadio>(this).viewModel.value = value;
+      }
+    },
+    focus: {
+      value(this: IMdcRadioElement) {
+        CustomElement.for<MdcRadio>(this).viewModel.focus();
+      },
+      configurable: true
+    },
+    blur: {
+      value(this: IMdcRadioElement) {
+        CustomElement.for<MdcRadio>(this).viewModel.blur();
+      },
+      configurable: true
+    }
+  });
+}

package/src/resource.d.ts

@@ -1,22 +1,22 @@
-declare module '*.html?raw' {
-  import { IContainer } from '@aurelia/kernel';
-  import { IBindableDescription } from '@aurelia/runtime';
-  export const name: string;
-  export const template: string;
-  export default template;
-  export const dependencies: string[];
-  export const containerless: boolean | undefined;
-  export const bindables: Record<string, IBindableDescription>;
-  export const shadowOptions: { mode: 'open' | 'closed'} | undefined;
-  export function register(container: IContainer);
-}
-
-declare module '*.css' {
-  const value: Record<string, string>;
-  export default value;
-}
-
-declare module '*.scss' {
-  const value: Record<string, string>;
-  export default value;
-}
+declare module '*.html?raw' {
+  import { IContainer } from '@aurelia/kernel';
+  import { IBindableDescription } from '@aurelia/runtime';
+  export const name: string;
+  export const template: string;
+  export default template;
+  export const dependencies: string[];
+  export const containerless: boolean | undefined;
+  export const bindables: Record<string, IBindableDescription>;
+  export const shadowOptions: { mode: 'open' | 'closed'} | undefined;
+  export function register(container: IContainer);
+}
+
+declare module '*.css' {
+  const value: Record<string, string>;
+  export default value;
+}
+
+declare module '*.scss' {
+  const value: Record<string, string>;
+  export default value;
+}