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

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

@@ -1,7 +1,7 @@
-<template role="separator" class="
-  mdc-list-divider
-  ${leadingType ? 'mdc-list-divider--with-leading-inset mdc-list-divider--with-leading-' + leadingType : ''}
-  ${trailingType ? 'mdc-list-divider--with-trailing-inset mdc-list-divider--with-trailing-' + trailingType : ''}
-  ${padded ? 'mdc-list-divider--with-leading-padding' : ''}
-  ">
-</template>
+<template role="separator" class="
+  mdc-list-divider
+  ${leadingType ? 'mdc-list-divider--with-leading-inset mdc-list-divider--with-leading-' + leadingType : ''}
+  ${trailingType ? 'mdc-list-divider--with-trailing-inset mdc-list-divider--with-trailing-' + trailingType : ''}
+  ${padded ? 'mdc-list-divider--with-leading-padding' : ''}
+  ">
+</template>

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

@@ -1,24 +1,24 @@
-import { booleanAttr } from '../../base';
-import { customElement, bindable } from 'aurelia';
-import { MdcListItemLeading } from '../mdc-list-item/mdc-list-item-leading';
-import { MdcListItemTrailing } from '../mdc-list-item/mdc-list-item-trailing';
-import template from './mdc-list-divider.html?raw';
-
-/**
- * Optional, for list divider element
- * @selector mdc-list-divider
- */
-@customElement({ name: 'mdc-list-divider', template })
-export class MdcListDivider {
-  /** To make a divider match the padding of list items */
-  @bindable({ set: booleanAttr })
-  padded: boolean;
-
-  /** Aligns the divider’s leading edge with the item’s content block */
-  @bindable()
-  leadingType: MdcListItemLeading['value'];
-
-  /** Aligns the divider’s leading edge with the item’s trailing padding */
-  @bindable()
-  trailingType: MdcListItemTrailing['value'];
-}
+import { booleanAttr } from '../../base';
+import { customElement, bindable } from 'aurelia';
+import { MdcListItemLeading } from '../mdc-list-item/mdc-list-item-leading';
+import { MdcListItemTrailing } from '../mdc-list-item/mdc-list-item-trailing';
+import template from './mdc-list-divider.html?raw';
+
+/**
+ * Optional, for list divider element
+ * @selector mdc-list-divider
+ */
+@customElement({ name: 'mdc-list-divider', template })
+export class MdcListDivider {
+  /** To make a divider match the padding of list items */
+  @bindable({ set: booleanAttr })
+  padded: boolean;
+
+  /** Aligns the divider’s leading edge with the item’s content block */
+  @bindable()
+  leadingType: MdcListItemLeading['value'];
+
+  /** Aligns the divider’s leading edge with the item’s trailing padding */
+  @bindable()
+  trailingType: MdcListItemTrailing['value'];
+}

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

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

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

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

package/src/list/mdc-list-item/mdc-list-item-leading.ts

@@ -1,34 +1,34 @@
-import { customAttribute, inject } from 'aurelia';
-
-/**
- * Optional, marks the leading control or media element
- * @selector [mdc-list-item-leading]
- */
-@customAttribute('mdc-list-item-leading')
-@inject(Element)
-export class MdcListItemLeading {
-  constructor(private root: Element) { }
-
-  /** Optional leading element type. In most cases you don't need to supply it.
-   * Only when the element is ambiguous, e.g. <img> or a generic <span>
-  */
-  value: 'checkbox' | 'radio' | 'switch' | 'icon' | 'image' | 'thumbnail' | 'video' | 'avatar';
-
-  attached() {
-    let value = this.value;
-    if (!value) {
-      if (this.root.classList.contains('mdc-checkbox')) {
-        value = 'checkbox';
-      } else if (this.root.classList.contains('mdc-radio')) {
-        value = 'radio';
-      } else if (this.root.classList.contains('mdc-switch')) {
-        value = 'switch';
-      } else if (this.root.classList.contains('material-icons')) {
-        value = 'icon';
-      } else if (this.root.tagName === 'IMG') {
-        value = 'image';
-      }
-    }
-    this.root.parentElement?.parentElement?.classList.add(`mdc-list-item--with-leading-${value}`);
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional, marks the leading control or media element
+ * @selector [mdc-list-item-leading]
+ */
+@customAttribute('mdc-list-item-leading')
+@inject(Element)
+export class MdcListItemLeading {
+  constructor(private root: Element) { }
+
+  /** Optional leading element type. In most cases you don't need to supply it.
+   * Only when the element is ambiguous, e.g. <img> or a generic <span>
+  */
+  value: 'checkbox' | 'radio' | 'switch' | 'icon' | 'image' | 'thumbnail' | 'video' | 'avatar';
+
+  attached() {
+    let value = this.value;
+    if (!value) {
+      if (this.root.classList.contains('mdc-checkbox')) {
+        value = 'checkbox';
+      } else if (this.root.classList.contains('mdc-radio')) {
+        value = 'radio';
+      } else if (this.root.classList.contains('mdc-switch')) {
+        value = 'switch';
+      } else if (this.root.classList.contains('material-icons')) {
+        value = 'icon';
+      } else if (this.root.tagName === 'IMG') {
+        value = 'image';
+      }
+    }
+    this.root.parentElement?.parentElement?.classList.add(`mdc-list-item--with-leading-${value}`);
+  }
+}

package/src/list/mdc-list-item/mdc-list-item-trailing.ts

@@ -1,36 +1,36 @@
-import { customAttribute, inject } from 'aurelia';
-
-/**
- * Optional, marks the trailing control element
- * @selector [mdc-list-item-trailing]
- */
-@inject(Element)
-@customAttribute('mdc-list-item-trailing')
-export class MdcListItemTrailing {
-  constructor(private root: Element) { }
-
-  /** Optional leading element type. In most cases you don't need to supply it.
-   * Only when the element is ambiguous, e.g. <img> or a generic <span>
-  */
-  value: 'meta' | 'checkbox' | 'radio' | 'switch' | 'icon' | undefined;
-
-  attached() {
-    let value = this.value;
-    if (!value) {
-      if (this.root.classList.contains('mdc-checkbox')) {
-        value = 'checkbox';
-      } else if (this.root.classList.contains('mdc-radio')) {
-        value = 'radio';
-      } else if (this.root.classList.contains('mdc-switch')) {
-        value = 'switch';
-      } else if (this.root.classList.contains('mdc-icon-button')) {
-        value = undefined;
-      } else if (this.root.classList.contains('material-icons')) {
-        value = 'icon';
-      }
-    }
-    if (value !== undefined) {
-      this.root.parentElement?.parentElement?.classList.add(`mdc-list-item--with-trailing-${value}`);
-    }
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+/**
+ * Optional, marks the trailing control element
+ * @selector [mdc-list-item-trailing]
+ */
+@inject(Element)
+@customAttribute('mdc-list-item-trailing')
+export class MdcListItemTrailing {
+  constructor(private root: Element) { }
+
+  /** Optional leading element type. In most cases you don't need to supply it.
+   * Only when the element is ambiguous, e.g. <img> or a generic <span>
+  */
+  value: 'meta' | 'checkbox' | 'radio' | 'switch' | 'icon' | undefined;
+
+  attached() {
+    let value = this.value;
+    if (!value) {
+      if (this.root.classList.contains('mdc-checkbox')) {
+        value = 'checkbox';
+      } else if (this.root.classList.contains('mdc-radio')) {
+        value = 'radio';
+      } else if (this.root.classList.contains('mdc-switch')) {
+        value = 'switch';
+      } else if (this.root.classList.contains('mdc-icon-button')) {
+        value = undefined;
+      } else if (this.root.classList.contains('material-icons')) {
+        value = 'icon';
+      }
+    }
+    if (value !== undefined) {
+      this.root.parentElement?.parentElement?.classList.add(`mdc-list-item--with-trailing-${value}`);
+    }
+  }
+}

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

@@ -1,13 +1,13 @@
-<template class="
-    ${cssClasses.LIST_ITEM_CLASS}
-    ${disabled ? 'mdc-list-item--disabled' : ''}
-    ${activated ? 'mdc-list-item--activated' : ''}
-    ${selected ? 'mdc-list-item--selected' : ''}
-    ${nonInteractive ? 'non-interactive' : ''}
-    ${twoLine ? 'mdc-list-item--with-two-lines' : (threeLine ? 'mdc-list-item--with-three-lines' : 'mdc-list-item--with-one-line')}
-    ${trailingType ? 'mdc-list-item--with-trailing-' + trailingType : ''}
-  " id1="mdc-list-item-${id}" mdc-ripple="disabled.bind: disabled || disableRipple" keydown.trigger="onKeydown($event)"
-  click.trigger="onClick()" tabindex="-1">
-  <span class="mdc-list-item__ripple"></span>
-  <au-slot></au-slot>
-</template>
+<template class="
+    ${cssClasses.LIST_ITEM_CLASS}
+    ${disabled ? 'mdc-list-item--disabled' : ''}
+    ${activated ? 'mdc-list-item--activated' : ''}
+    ${selected ? 'mdc-list-item--selected' : ''}
+    ${nonInteractive ? 'non-interactive' : ''}
+    ${twoLine ? 'mdc-list-item--with-two-lines' : (threeLine ? 'mdc-list-item--with-three-lines' : 'mdc-list-item--with-one-line')}
+    ${trailingType ? 'mdc-list-item--with-trailing-' + trailingType : ''}
+  " id1="mdc-list-item-${id}" mdc-ripple="disabled.bind: disabled || disableRipple" keydown.trigger="onKeydown($event)"
+  click.trigger="onClick()" tabindex="-1">
+  <span class="mdc-list-item__ripple"></span>
+  <au-slot></au-slot>
+</template>

package/src/list/mdc-list-item-overline-text.ts

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

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

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

package/src/list/mdc-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-list-item-secondary-text
- */
-@customElement({
-  name: 'mdc-list-item-secondary-text',
-  template: '<template class="mdc-list-item__secondary-text"><au-slot></au-slot></template>'
-})
-export class MdcListItemSecondaryText { }
+import { customElement } from 'aurelia';
+
+/**
+ * Optional, secondary text for the list item. Displayed below the primary text.
+ * @selector mdc-list-item-secondary-text
+ */
+@customElement({
+  name: 'mdc-list-item-secondary-text',
+  template: '<template class="mdc-list-item__secondary-text"><au-slot></au-slot></template>'
+})
+export class MdcListItemSecondaryText { }

package/src/list/mdc-list.html

@@ -1,5 +1,5 @@
-<template class="${cssClasses.ROOT}" 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="${cssClasses.ROOT}" 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>