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

package/src/ripple/mdc-ripple.ts

@@ -1,114 +1,114 @@
-import { MdcComponent, booleanAttr } from '../base';
-import { MDCRippleFoundation, MDCRippleAdapter, util } from '@material/ripple';
-import { matches } from '@material/dom/ponyfill';
-import { applyPassive } from '@material/dom/events';
-import { customAttribute, bindable, inject } from 'aurelia';
-
-@inject(Element)
-@customAttribute('mdc-ripple')
-export class MdcRipple extends MdcComponent<MDCRippleFoundation> {
-  @bindable()
-  input?: HTMLInputElement;
-
-  @bindable()
-  surface?: HTMLElement;
-
-  @bindable()
-  computeBoundingRect: () => ClientRect;
-
-  @bindable({ set: booleanAttr })
-  disabled: boolean;
-
-  @bindable({ set: booleanAttr })
-  unbounded: boolean;
-  unboundedChanged() {
-    this.foundation?.setUnbounded(Boolean(this.unbounded));
-  }
-
-  @bindable({ set: booleanAttr })
-  activeSurface: boolean;
-
-  @bindable({ set: booleanAttr })
-  noClass: boolean;
-
-  @bindable({ set: booleanAttr })
-  primary: boolean;
-
-  @bindable({ set: booleanAttr })
-  accent: boolean;
-
-  attaching() {
-    if (!this.noClass) {
-      (this.surface ?? this.root).classList.add('mdc-ripple-surface');
-      if (this.primary) {
-        (this.surface ?? this.root).classList.add('mdc-ripple-surface--primary');
-      }
-      if (this.accent) {
-        (this.surface ?? this.root).classList.add('mdc-ripple-surface--accent');
-      }
-    }
-  }
-
-  initialSyncWithDOM() {
-    this.unboundedChanged();
-  }
-
-  activate() {
-    this.foundation?.activate();
-  }
-
-  deactivate() {
-    this.foundation?.deactivate();
-  }
-
-  layout() {
-    this.foundation?.layout();
-  }
-
-  getDefaultFoundation() {
-    return new MDCRippleFoundation(this.createAdapter());
-  }
-
-  createAdapter(): MDCRippleAdapter {
-    return {
-      addClass: (className) => (this.surface ?? this.root).classList.add(className),
-      browserSupportsCssVars: () => util.supportsCssVariables(window),
-      computeBoundingRect: this.computeBoundingRect ?? (() => (this.surface ?? this.root).getBoundingClientRect()),
-      containsEventTarget: (target) => this.root.contains(target as Node),
-      deregisterDocumentInteractionHandler: (evtType, handler) => document.documentElement.removeEventListener(evtType, handler, applyPassive()),
-      deregisterInteractionHandler: (evtType, handler) => {
-        if (this.input) {
-          this.input.removeEventListener(evtType, handler, applyPassive());
-        } else {
-          this.root.removeEventListener(evtType, handler, applyPassive());
-        }
-      },
-      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
-      getWindowPageOffset: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
-      isSurfaceActive: () => this.activeSurface && matches(this.input ?? this.root, ':active'),
-      isSurfaceDisabled: () => this.disabled,
-      isUnbounded: () => this.unbounded,
-      registerDocumentInteractionHandler: (evtType, handler) => document.documentElement.addEventListener(evtType, handler, applyPassive()),
-      registerInteractionHandler: (evtType, handler) => {
-        if (this.input) {
-          this.input.addEventListener(evtType, handler, applyPassive());
-        } else {
-          this.root.addEventListener(evtType, handler, applyPassive());
-        }
-      },
-      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
-      removeClass: (className) => (this.surface ?? this.root).classList.remove(className),
-      updateCssVariable: (varName, value) => (this.surface ?? this.root).style.setProperty(varName, value),
-    };
-  }
-}
-
-/** @hidden */
-export interface IMdcRippleElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-attribute:mdc-ripple': {
-      viewModel: MdcRipple;
-      // boundProperties: { binding: Binding & { targetProperty: string }; observer: BehaviorPropertyObserver }[];
-    };
-  };
-}
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCRippleFoundation, MDCRippleAdapter, util } from '@material/ripple';
+import { matches } from '@material/dom/ponyfill';
+import { applyPassive } from '@material/dom/events';
+import { customAttribute, bindable, inject } from 'aurelia';
+
+@inject(Element)
+@customAttribute('mdc-ripple')
+export class MdcRipple extends MdcComponent<MDCRippleFoundation> {
+  @bindable()
+  input?: HTMLInputElement;
+
+  @bindable()
+  surface?: HTMLElement;
+
+  @bindable()
+  computeBoundingRect: () => ClientRect;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+
+  @bindable({ set: booleanAttr })
+  unbounded: boolean;
+  unboundedChanged() {
+    this.foundation?.setUnbounded(Boolean(this.unbounded));
+  }
+
+  @bindable({ set: booleanAttr })
+  activeSurface: boolean;
+
+  @bindable({ set: booleanAttr })
+  noClass: boolean;
+
+  @bindable({ set: booleanAttr })
+  primary: boolean;
+
+  @bindable({ set: booleanAttr })
+  accent: boolean;
+
+  attaching() {
+    if (!this.noClass) {
+      (this.surface ?? this.root).classList.add('mdc-ripple-surface');
+      if (this.primary) {
+        (this.surface ?? this.root).classList.add('mdc-ripple-surface--primary');
+      }
+      if (this.accent) {
+        (this.surface ?? this.root).classList.add('mdc-ripple-surface--accent');
+      }
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.unboundedChanged();
+  }
+
+  activate() {
+    this.foundation?.activate();
+  }
+
+  deactivate() {
+    this.foundation?.deactivate();
+  }
+
+  layout() {
+    this.foundation?.layout();
+  }
+
+  getDefaultFoundation() {
+    return new MDCRippleFoundation(this.createAdapter());
+  }
+
+  createAdapter(): MDCRippleAdapter {
+    return {
+      addClass: (className) => (this.surface ?? this.root).classList.add(className),
+      browserSupportsCssVars: () => util.supportsCssVariables(window),
+      computeBoundingRect: this.computeBoundingRect ?? (() => (this.surface ?? this.root).getBoundingClientRect()),
+      containsEventTarget: (target) => this.root.contains(target as Node),
+      deregisterDocumentInteractionHandler: (evtType, handler) => document.documentElement.removeEventListener(evtType, handler, applyPassive()),
+      deregisterInteractionHandler: (evtType, handler) => {
+        if (this.input) {
+          this.input.removeEventListener(evtType, handler, applyPassive());
+        } else {
+          this.root.removeEventListener(evtType, handler, applyPassive());
+        }
+      },
+      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
+      getWindowPageOffset: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
+      isSurfaceActive: () => this.activeSurface && matches(this.input ?? this.root, ':active'),
+      isSurfaceDisabled: () => this.disabled,
+      isUnbounded: () => this.unbounded,
+      registerDocumentInteractionHandler: (evtType, handler) => document.documentElement.addEventListener(evtType, handler, applyPassive()),
+      registerInteractionHandler: (evtType, handler) => {
+        if (this.input) {
+          this.input.addEventListener(evtType, handler, applyPassive());
+        } else {
+          this.root.addEventListener(evtType, handler, applyPassive());
+        }
+      },
+      registerResizeHandler: (handler) => window.addEventListener('resize', handler),
+      removeClass: (className) => (this.surface ?? this.root).classList.remove(className),
+      updateCssVariable: (varName, value) => (this.surface ?? this.root).style.setProperty(varName, value),
+    };
+  }
+}
+
+/** @hidden */
+export interface IMdcRippleElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-attribute:mdc-ripple': {
+      viewModel: MdcRipple;
+      // boundProperties: { binding: Binding & { targetProperty: string }; observer: BehaviorPropertyObserver }[];
+    };
+  };
+}

package/src/segmented-button/mdc-segmented-button-segment/enhance-mdc-segmented-button-segment.ts

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

package/src/segmented-button/mdc-segmented-button-segment/mdc-segmented-button-segment.html

@@ -1,11 +1,11 @@
-<template class="
-    mdc-segmented-button__segment
-    ${touch ? 'mdc-segmented-button--touch' : ''}
-  " mdc-ripple="no-class.bind: true" click.trigger="handleClick()">
-  <div class="mdc-segmented-button__touch" if.bind="touch"></div>
-  <div class="mdc-segmented-button__ripple"></div>
-  <i class="material-icons mdc-segmented-button__icon" if.bind="icon">${icon}</i>
-  <div class="mdc-segmented-button__label">
-    <au-slot></au-slot>
-  </div>
-</template>
+<template class="
+    mdc-segmented-button__segment
+    ${touch ? 'mdc-segmented-button--touch' : ''}
+  " mdc-ripple="no-class.bind: true" click.trigger="handleClick()">
+  <div class="mdc-segmented-button__touch" if.bind="touch"></div>
+  <div class="mdc-segmented-button__ripple"></div>
+  <i class="material-icons mdc-segmented-button__icon" if.bind="icon">${icon}</i>
+  <div class="mdc-segmented-button__label">
+    <au-slot></au-slot>
+  </div>
+</template>

package/src/segmented-button/mdc-segmented-button.html

@@ -1,3 +1,3 @@
-<template class="mdc-segmented-button ${single ? 'mdc-segmented-button--single-select' : ''}"
-  selected.trigger="handleSelected($event)"><au-slot></au-slot>
-</template>
+<template class="mdc-segmented-button ${single ? 'mdc-segmented-button--single-select' : ''}"
+  selected.trigger="handleSelected($event)"><au-slot></au-slot>
+</template>

package/src/segmented-button/mdc-segmented-button.ts

@@ -1,89 +1,89 @@
-import { booleanAttr, MdcComponent } from '../base';
-import { MDCSegmentedButtonAdapter, MDCSegmentedButtonFoundation, SegmentDetail } from '@material/segmented-button';
-import { events } from '@material/segmented-button/segmented-button/constants';
-import { inject, customElement, bindable, slotted, CustomElement } from 'aurelia';
-import { MdcSegmentedButtonSegment } from './mdc-segmented-button-segment/mdc-segmented-button-segment';
-import template from './mdc-segmented-button.html?raw';
-
-/**
- * @selector mdc-segmented-button
- */
-@inject(Element)
-@customElement({ name: 'mdc-segmented-button', template })
-export class MdcSegmentedButton extends MdcComponent<MDCSegmentedButtonFoundation> {
-
-  /** Indicates the segmented button only allows one segment to be selected at a time */
-  @bindable({ set: booleanAttr })
-  single: boolean;
-  singleChanged() {
-    this.root.setAttribute('role', this.single ? 'radiogroup' : 'group');
-  }
-
-  @slotted({ query: 'button' })
-  segmentElements!: HTMLElement[];
-
-  get segmentsList(): MdcSegmentedButtonSegment[] {
-    return this.segmentElements.map(x => CustomElement.for<MdcSegmentedButtonSegment>(x).viewModel);
-  }
-
-  initialSyncWithDOM() {
-    const isSingleSelect = this.foundation!.isSingleSelect();
-    for (let i = 0; i < this.segmentsList.length; i++) {
-      const segment = this.segmentsList[i];
-      segment.setIndex(i);
-      segment.setIsSingleSelect(isSingleSelect);
-    }
-  }
-
-  handleSelected(event: CustomEvent<SegmentDetail>) {
-    this.foundation?.handleSelected(event.detail);
-  }
-
-  getDefaultFoundation(): MDCSegmentedButtonFoundation {
-    const adapter: MDCSegmentedButtonAdapter = {
-      hasClass: (className) => {
-        return this.root.classList.contains(className);
-      },
-      getSegments: () => {
-        return this.mappedSegments();
-      },
-      selectSegment: (indexOrSegmentId) => {
-        const segmentDetail = this.mappedSegments().find(
-          (detail) => detail.index === indexOrSegmentId ||
-            detail.segmentId === indexOrSegmentId);
-        if (segmentDetail) {
-          this.segmentsList[segmentDetail.index].checked = true;
-        }
-      },
-      unselectSegment: (indexOrSegmentId) => {
-        const segmentDetail = this.mappedSegments().find(
-          (detail) => detail.index === indexOrSegmentId ||
-            detail.segmentId === indexOrSegmentId);
-        if (segmentDetail) {
-          this.segmentsList[segmentDetail.index].checked = false;
-          this.segmentsList[segmentDetail.index].notifySelectedChange('unselected', false);
-        }
-      },
-      notifySelectedChange: (detail) => {
-        this.emit<SegmentDetail>(
-          events.CHANGE, detail, true /* shouldBubble */
-        );
-      }
-    };
-    return new MDCSegmentedButtonFoundation(adapter);
-  }
-
-  /**
-   * @return Returns child segments mapped to readonly SegmentDetail list
-   */
-  private mappedSegments(): readonly SegmentDetail[] {
-    return this.segmentsList.map(
-      (segment: MdcSegmentedButtonSegment, index: number) => {
-        return {
-          index,
-          selected: segment.checked,
-          segmentId: segment.getSegmentId()
-        };
-      });
-  }
-}
+import { booleanAttr, MdcComponent } from '../base';
+import { MDCSegmentedButtonAdapter, MDCSegmentedButtonFoundation, SegmentDetail } from '@material/segmented-button';
+import { events } from '@material/segmented-button/segmented-button/constants';
+import { inject, customElement, bindable, slotted, CustomElement } from 'aurelia';
+import { MdcSegmentedButtonSegment } from './mdc-segmented-button-segment/mdc-segmented-button-segment';
+import template from './mdc-segmented-button.html?raw';
+
+/**
+ * @selector mdc-segmented-button
+ */
+@inject(Element)
+@customElement({ name: 'mdc-segmented-button', template })
+export class MdcSegmentedButton extends MdcComponent<MDCSegmentedButtonFoundation> {
+
+  /** Indicates the segmented button only allows one segment to be selected at a time */
+  @bindable({ set: booleanAttr })
+  single: boolean;
+  singleChanged() {
+    this.root.setAttribute('role', this.single ? 'radiogroup' : 'group');
+  }
+
+  @slotted({ query: 'button' })
+  segmentElements!: HTMLElement[];
+
+  get segmentsList(): MdcSegmentedButtonSegment[] {
+    return this.segmentElements.map(x => CustomElement.for<MdcSegmentedButtonSegment>(x).viewModel);
+  }
+
+  initialSyncWithDOM() {
+    const isSingleSelect = this.foundation!.isSingleSelect();
+    for (let i = 0; i < this.segmentsList.length; i++) {
+      const segment = this.segmentsList[i];
+      segment.setIndex(i);
+      segment.setIsSingleSelect(isSingleSelect);
+    }
+  }
+
+  handleSelected(event: CustomEvent<SegmentDetail>) {
+    this.foundation?.handleSelected(event.detail);
+  }
+
+  getDefaultFoundation(): MDCSegmentedButtonFoundation {
+    const adapter: MDCSegmentedButtonAdapter = {
+      hasClass: (className) => {
+        return this.root.classList.contains(className);
+      },
+      getSegments: () => {
+        return this.mappedSegments();
+      },
+      selectSegment: (indexOrSegmentId) => {
+        const segmentDetail = this.mappedSegments().find(
+          (detail) => detail.index === indexOrSegmentId ||
+            detail.segmentId === indexOrSegmentId);
+        if (segmentDetail) {
+          this.segmentsList[segmentDetail.index].checked = true;
+        }
+      },
+      unselectSegment: (indexOrSegmentId) => {
+        const segmentDetail = this.mappedSegments().find(
+          (detail) => detail.index === indexOrSegmentId ||
+            detail.segmentId === indexOrSegmentId);
+        if (segmentDetail) {
+          this.segmentsList[segmentDetail.index].checked = false;
+          this.segmentsList[segmentDetail.index].notifySelectedChange('unselected', false);
+        }
+      },
+      notifySelectedChange: (detail) => {
+        this.emit<SegmentDetail>(
+          events.CHANGE, detail, true /* shouldBubble */
+        );
+      }
+    };
+    return new MDCSegmentedButtonFoundation(adapter);
+  }
+
+  /**
+   * @return Returns child segments mapped to readonly SegmentDetail list
+   */
+  private mappedSegments(): readonly SegmentDetail[] {
+    return this.segmentsList.map(
+      (segment: MdcSegmentedButtonSegment, index: number) => {
+        return {
+          index,
+          selected: segment.checked,
+          segmentId: segment.getSegmentId()
+        };
+      });
+  }
+}

package/src/select/mdc-default-select-configuration.ts

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