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

package/src/linear-progress/mdc-linear-progress.ts

@@ -1,103 +1,103 @@
-import { MdcComponent, number, booleanAttr } from '../base';
-import { MDCLinearProgressFoundation, MDCLinearProgressAdapter, WithMDCResizeObserver } from '@material/linear-progress';
-import { inject, customElement, bindable } from 'aurelia';
-import template from './mdc-linear-progress.html?raw';
-
-/**
- * @selector mdc-linear-progress
- */
-@inject(Element)
-@customElement({ name: 'mdc-linear-progress', template })
-export class MdcLinearProgress extends MdcComponent<MDCLinearProgressFoundation> {
-
-  /** Sets the progress bar to this value. Value should be between [0, 1] or undefined for indeterminate progress indicator. */
-  @bindable({ set: number })
-  progress?: number;
-  progressChanged() {
-    const determinate = this.progress !== undefined && !isNaN(this.progress);
-    this.foundation?.setDeterminate(determinate);
-    if (determinate) {
-      this.foundation?.setProgress(this.progress!);
-    }
-  }
-
-  /** Sets the buffer bar to this value. Value should be between [0, 1] or undefined. */
-  @bindable({ set: number })
-  buffer?: number;
-  bufferChanged() {
-    if (this.buffer !== undefined && !isNaN(this.buffer)) {
-      this.foundation?.setBuffer(this.buffer);
-    }
-  }
-
-  /** Sets the component open state */
-  @bindable({ set: booleanAttr })
-  open: boolean;
-  openChanged() {
-    if (this.open) {
-      this.foundation?.open();
-    } else {
-      this.foundation?.close();
-    }
-  }
-
-  initialSyncWithDOM() {
-    this.progressChanged();
-    if (this.open !== undefined) {
-      this.openChanged();
-    }
-    this.bufferChanged();
-  }
-
-  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: MDCLinearProgressAdapter = {
-      addClass: (className: string) => {
-        this.root.classList.add(className);
-      },
-      forceLayout: () => {
-        this.root.getBoundingClientRect();
-      },
-      setBufferBarStyle: (styleProperty: string, value: string) => {
-        const bufferBar = this.root.querySelector<HTMLElement>(
-          MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR);
-        if (bufferBar) {
-          bufferBar.style.setProperty(styleProperty, value);
-        }
-      },
-      setPrimaryBarStyle: (styleProperty: string, value: string) => {
-        const primaryBar = this.root.querySelector<HTMLElement>(
-          MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR);
-        if (primaryBar) {
-          primaryBar.style.setProperty(styleProperty, value);
-        }
-      },
-      hasClass: (className: string) => this.root.classList.contains(className),
-      removeAttribute: (attributeName: string) => {
-        this.root.removeAttribute(attributeName);
-      },
-      removeClass: (className: string) => {
-        this.root.classList.remove(className);
-      },
-      setAttribute: (attributeName: string, value: string) => {
-        this.root.setAttribute(attributeName, value);
-      },
-      setStyle: (name: string, value: string) => {
-        this.root.style.setProperty(name, value);
-      },
-      attachResizeObserver: (callback) => {
-        const RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;
-        if (RO) {
-          const ro = new RO(callback);
-          ro.observe(this.root);
-          return ro;
-        }
-
-        return null;
-      },
-      getWidth: () => this.root.offsetWidth
-    };
-    return new MDCLinearProgressFoundation(adapter);
-  }
-}
+import { MdcComponent, number, booleanAttr } from '../base';
+import { MDCLinearProgressFoundation, MDCLinearProgressAdapter, WithMDCResizeObserver } from '@material/linear-progress';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-linear-progress.html?raw';
+
+/**
+ * @selector mdc-linear-progress
+ */
+@inject(Element)
+@customElement({ name: 'mdc-linear-progress', template })
+export class MdcLinearProgress extends MdcComponent<MDCLinearProgressFoundation> {
+
+  /** Sets the progress bar to this value. Value should be between [0, 1] or undefined for indeterminate progress indicator. */
+  @bindable({ set: number })
+  progress?: number;
+  progressChanged() {
+    const determinate = this.progress !== undefined && !isNaN(this.progress);
+    this.foundation?.setDeterminate(determinate);
+    if (determinate) {
+      this.foundation?.setProgress(this.progress!);
+    }
+  }
+
+  /** Sets the buffer bar to this value. Value should be between [0, 1] or undefined. */
+  @bindable({ set: number })
+  buffer?: number;
+  bufferChanged() {
+    if (this.buffer !== undefined && !isNaN(this.buffer)) {
+      this.foundation?.setBuffer(this.buffer);
+    }
+  }
+
+  /** Sets the component open state */
+  @bindable({ set: booleanAttr })
+  open: boolean;
+  openChanged() {
+    if (this.open) {
+      this.foundation?.open();
+    } else {
+      this.foundation?.close();
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.progressChanged();
+    if (this.open !== undefined) {
+      this.openChanged();
+    }
+    this.bufferChanged();
+  }
+
+  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: MDCLinearProgressAdapter = {
+      addClass: (className: string) => {
+        this.root.classList.add(className);
+      },
+      forceLayout: () => {
+        this.root.getBoundingClientRect();
+      },
+      setBufferBarStyle: (styleProperty: string, value: string) => {
+        const bufferBar = this.root.querySelector<HTMLElement>(
+          MDCLinearProgressFoundation.strings.BUFFER_BAR_SELECTOR);
+        if (bufferBar) {
+          bufferBar.style.setProperty(styleProperty, value);
+        }
+      },
+      setPrimaryBarStyle: (styleProperty: string, value: string) => {
+        const primaryBar = this.root.querySelector<HTMLElement>(
+          MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR);
+        if (primaryBar) {
+          primaryBar.style.setProperty(styleProperty, value);
+        }
+      },
+      hasClass: (className: string) => this.root.classList.contains(className),
+      removeAttribute: (attributeName: string) => {
+        this.root.removeAttribute(attributeName);
+      },
+      removeClass: (className: string) => {
+        this.root.classList.remove(className);
+      },
+      setAttribute: (attributeName: string, value: string) => {
+        this.root.setAttribute(attributeName, value);
+      },
+      setStyle: (name: string, value: string) => {
+        this.root.style.setProperty(name, value);
+      },
+      attachResizeObserver: (callback) => {
+        const RO = (window as unknown as WithMDCResizeObserver).ResizeObserver;
+        if (RO) {
+          const ro = new RO(callback);
+          ro.observe(this.root);
+          return ro;
+        }
+
+        return null;
+      },
+      getWidth: () => this.root.offsetWidth
+    };
+    return new MDCLinearProgressFoundation(adapter);
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-divider/mdc-deprecated-list-divider.html

@@ -1,4 +1,4 @@
-<template role="separator"
-  class="mdc-deprecated-list-divider ${padded ? 'mdc-deprecated-list-divider--padded' : ''} ${inset ? 'mdc-deprecated-list-divider--inset' : ''}">
-  <au-slot></au-slot>
-</template>
+<template role="separator"
+  class="mdc-deprecated-list-divider ${padded ? 'mdc-deprecated-list-divider--padded' : ''} ${inset ? 'mdc-deprecated-list-divider--inset' : ''}">
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-deprecated-list/mdc-deprecated-list-divider/mdc-deprecated-list-divider.ts

@@ -1,18 +1,18 @@
-import { booleanAttr } from '../../../base';
-import { customElement, bindable } from 'aurelia';
-import template from './mdc-deprecated-list-divider.html?raw';
-
-/**
- * Optional, for list divider element
- * @selector mdc-list-divider
- */
-@customElement({ name: 'mdc-deprecated-list-divider', template })
-export class MdcDeprecatedListDivider {
-  /** To make a divider match the padding of list items */
-  @bindable({ set: booleanAttr })
-  padded: boolean;
-
-  /** Increases the leading margin of the divider so that it does not intersect the avatar column */
-  @bindable({ set: booleanAttr })
-  inset: boolean;
-}
+import { booleanAttr } from '../../../base';
+import { customElement, bindable } from 'aurelia';
+import template from './mdc-deprecated-list-divider.html?raw';
+
+/**
+ * Optional, for list divider element
+ * @selector mdc-list-divider
+ */
+@customElement({ name: 'mdc-deprecated-list-divider', template })
+export class MdcDeprecatedListDivider {
+  /** To make a divider match the padding of list items */
+  @bindable({ set: booleanAttr })
+  padded: boolean;
+
+  /** Increases the leading margin of the divider so that it does not intersect the avatar column */
+  @bindable({ set: booleanAttr })
+  inset: boolean;
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-group.ts

@@ -1,27 +1,27 @@
-import { customElement, customAttribute, slotted, inject } from 'aurelia';
-
-/**
- * Optional. Wrapper around two or more mdc-list elements to be grouped together.
- * @selector mdc-deprecated-list-group
- */
-@customElement({
-  name: 'mdc-deprecated-list-group',
-  template: '<template class="mdc-deprecated-list-group"><au-slot></au-slot></template>'
-})
-export class MdcDeprecatedListGroup {
-  @slotted({ query: 'h1,h2,h3,h4,h5,h6' })
-  headers: HTMLElement[];
-  headersChanged() {
-    this.headers.forEach(x => x.classList.add('mdc-deprecated-list-group__subheader'));
-  }
-}
-
-@inject(Element)
-@customAttribute('mdc-deprecated-list-group-subheader')
-export class MdcDeprecatedListGroupSubheader {
-  constructor(private root: HTMLElement) { }
-
-  attached() {
-    this.root.classList.add('mdc-deprecated-list-group__subheader');
-  }
-}
+import { customElement, customAttribute, slotted, inject } from 'aurelia';
+
+/**
+ * Optional. Wrapper around two or more mdc-list elements to be grouped together.
+ * @selector mdc-deprecated-list-group
+ */
+@customElement({
+  name: 'mdc-deprecated-list-group',
+  template: '<template class="mdc-deprecated-list-group"><au-slot></au-slot></template>'
+})
+export class MdcDeprecatedListGroup {
+  @slotted({ query: 'h1,h2,h3,h4,h5,h6' })
+  headers: HTMLElement[];
+  headersChanged() {
+    this.headers.forEach(x => x.classList.add('mdc-deprecated-list-group__subheader'));
+  }
+}
+
+@inject(Element)
+@customAttribute('mdc-deprecated-list-group-subheader')
+export class MdcDeprecatedListGroupSubheader {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-deprecated-list-group__subheader');
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/enhance-mdc-deprecated-list-item.ts

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

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item-graphic.ts

@@ -1,15 +1,15 @@
-import { customAttribute, inject } from 'aurelia';
-
-/**
- * Optional. The first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.
- * @selector [mdc-deprecated-list-item-graphic]
- */
-@inject(Element)
-@customAttribute('mdc-deprecated-list-item-graphic')
-export class MdcDeprecatedListItemGraphic {
-  constructor(private root: Element) { }
-
-  attached() {
-    this.root.classList.add('mdc-deprecated-list-item__graphic');
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional. The first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.
+ * @selector [mdc-deprecated-list-item-graphic]
+ */
+@inject(Element)
+@customAttribute('mdc-deprecated-list-item-graphic')
+export class MdcDeprecatedListItemGraphic {
+  constructor(private root: Element) { }
+
+  attached() {
+    this.root.classList.add('mdc-deprecated-list-item__graphic');
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item-meta.ts

@@ -1,15 +1,15 @@
-import { customAttribute, inject } from 'aurelia';
-
-/**
- * Optional. The last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.
- * @selector [mdc-deprecated-list-item-meta]
- */
-@inject(Element)
-@customAttribute('mdc-deprecated-list-item-meta')
-export class MdcDeprecatedListItemMeta {
-  constructor(private root: HTMLElement) { }
-
-  attached() {
-    this.root.classList.add('mdc-deprecated-list-item__meta');
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional. The last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.
+ * @selector [mdc-deprecated-list-item-meta]
+ */
+@inject(Element)
+@customAttribute('mdc-deprecated-list-item-meta')
+export class MdcDeprecatedListItemMeta {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.classList.add('mdc-deprecated-list-item__meta');
+  }
+}

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.html

@@ -1,8 +1,8 @@
-<template class="mdc-deprecated-list-item
-    ${disabled ? 'mdc-deprecated-list-item--disabled' : ''}
-    ${activated ? 'mdc-deprecated-list-item--activated' : ''}
-  " mdc-ripple="disabled.bind: disabled || disableRipple"
-  keydown.trigger="onKeydown($event)" click.trigger="onClick()" tabindex="-1">
-  <div class="mdc-deprecated-list-item__ripple"></div>
-  <au-slot></au-slot>
-</template>
+<template class="mdc-deprecated-list-item
+    ${disabled ? 'mdc-deprecated-list-item--disabled' : ''}
+    ${activated ? 'mdc-deprecated-list-item--activated' : ''}
+  " mdc-ripple="disabled.bind: disabled || disableRipple"
+  keydown.trigger="onKeydown($event)" click.trigger="onClick()" tabindex="-1">
+  <div class="mdc-deprecated-list-item__ripple"></div>
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item-primary-text.ts

@@ -1,11 +1,11 @@
-import { customElement } from 'aurelia';
-
-/**
- * Optional, primary text for the list item
- * @selector mdc-deprecated-list-item-primary-text
- */
-@customElement({
-  name: 'mdc-deprecated-list-item-primary-text',
-  template: '<template class="mdc-deprecated-list-item__primary-text"><au-slot></au-slot></template>'
-})
-export class MdcDeprecatedListItemPrimaryText { }
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, primary text for the list item
+ * @selector mdc-deprecated-list-item-primary-text
+ */
+@customElement({
+  name: 'mdc-deprecated-list-item-primary-text',
+  template: '<template class="mdc-deprecated-list-item__primary-text"><au-slot></au-slot></template>'
+})
+export class MdcDeprecatedListItemPrimaryText { }

package/src/list/mdc-deprecated-list/mdc-deprecated-list-item-secondary-text.ts

@@ -1,11 +1,11 @@
-import { customElement } from 'aurelia';
-
-/**
- * Optional, secondary text for the list item. Displayed below the primary text.
- * @selector mdc-deprecated-list-item-secondary-text
- */
-@customElement({
-  name: 'mdc-deprecated-list-item-secondary-text',
-  template: '<template class="mdc-deprecated-list-item__secondary-text"><au-slot></au-slot></template>'
-})
-export class MdcDeprecatedListItemSecondaryText { }
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, secondary text for the list item. Displayed below the primary text.
+ * @selector mdc-deprecated-list-item-secondary-text
+ */
+@customElement({
+  name: 'mdc-deprecated-list-item-secondary-text',
+  template: '<template class="mdc-deprecated-list-item__secondary-text"><au-slot></au-slot></template>'
+})
+export class MdcDeprecatedListItemSecondaryText { }

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

@@ -1,15 +1,15 @@
-<template class="
-    mdc-deprecated-list
-    ${twoLine ? 'mdc-deprecated-list--two-line' : ''}
-    ${dense ? 'mdc-deprecated-list--dense' : ''}
-    ${textual ? 'mdc-deprecated-list--textual-list' : ''}
-    ${avatar ? 'mdc-deprecated-list--avatar-list' : ''}
-    ${icon ? 'mdc-deprecated-list--icon-list' : ''}
-    ${image ? 'mdc-deprecated-list--image-list' : ''}
-    ${thumbnail ? 'mdc-deprecated-list--thumbnail-list' : ''}
-    ${video ? 'mdc-deprecated-list--video-list' : ''}
-  " keydown.trigger="handleKeydownEvent_($event)" click.trigger="handleClickEvent_($event)"
-  focusin.trigger="handleFocusInEvent_($event)" focusout.trigger="handleFocusOutEvent_($event)"
-  aria-orientation="${vertical ? 'vertical' : 'horizontal' }">
-  <au-slot></au-slot>
-</template>
+<template class="
+    mdc-deprecated-list
+    ${twoLine ? 'mdc-deprecated-list--two-line' : ''}
+    ${dense ? 'mdc-deprecated-list--dense' : ''}
+    ${textual ? 'mdc-deprecated-list--textual-list' : ''}
+    ${avatar ? 'mdc-deprecated-list--avatar-list' : ''}
+    ${icon ? 'mdc-deprecated-list--icon-list' : ''}
+    ${image ? 'mdc-deprecated-list--image-list' : ''}
+    ${thumbnail ? 'mdc-deprecated-list--thumbnail-list' : ''}
+    ${video ? 'mdc-deprecated-list--video-list' : ''}
+  " keydown.trigger="handleKeydownEvent_($event)" click.trigger="handleClickEvent_($event)"
+  focusin.trigger="handleFocusInEvent_($event)" focusout.trigger="handleFocusOutEvent_($event)"
+  aria-orientation="${vertical ? 'vertical' : 'horizontal' }">
+  <au-slot></au-slot>
+</template>