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

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

@@ -1,73 +1,73 @@
-import { customElement, bindable, inject } from 'aurelia';
-import { booleanAttr } from '../base';
-import template from './mdc-image-list.html?raw';
-
-export interface IColumnsOptions {
-  media: string;
-  count: number;
-  gutterSize: number;
-}
-
-let id = 0;
-
-/**
- * @selector mdc-image-list
- */
-@inject(Element)
-@customElement({ name: 'mdc-image-list', template })
-export class MdcImageList {
-  constructor(private root: HTMLElement) {
-    this.root.setAttribute('id', this.id);
-  }
-
-  style: HTMLStyleElement;
-
-  id = `mdc-image-list-${++id}`;
-
-  /** Indicates that this Image List should use the Masonry variant */
-  @bindable({ set: booleanAttr })
-  masonry: boolean;
-
-  /** Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image) */
-  @bindable({ set: booleanAttr })
-  textProtection: boolean;
-
-  /** Number of columns in the list */
-  @bindable()
-  columns: string | Partial<IColumnsOptions>[];
-  columnsChanged() {
-    if (!this.columns) {
-      return;
-    }
-    const columns = typeof this.columns === 'string' ? [{ count: parseInt(this.columns) }] : this.columns;
-    if (this.masonry) {
-      this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
-        p += `${c.media ? `@media (${c.media}) {` : ''}
-  #${this.id} {
-    column-count: ${c.count};
-    column-gap: ${c.gutterSize ?? 4}px;
-  }
-
-  #${this.id} .mdc-image-list__item {
-    margin-bottom: ${c.gutterSize ?? 4}px;
-  }
-${c.media ? '}' : ''}`;
-        return p;
-      }, '');
-    } else {
-      this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
-        p += `${c.media ? `@media (${c.media}) {` : ''}
-  #${this.id} .mdc-image-list__item {
-    width: calc(100% / ${c.count} - ${(c.gutterSize ?? 4) + 1 / c.count!}px);
-    margin: ${c.gutterSize ?? 4 / 2}px;
-  }
-${c.media ? '}' : ''}`;
-        return p;
-      }, '');
-    }
-  }
-
-  bound() {
-    this.columnsChanged();
-  }
-}
+import { customElement, bindable, inject } from 'aurelia';
+import { booleanAttr } from '../base';
+import template from './mdc-image-list.html?raw';
+
+export interface IColumnsOptions {
+  media: string;
+  count: number;
+  gutterSize: number;
+}
+
+let id = 0;
+
+/**
+ * @selector mdc-image-list
+ */
+@inject(Element)
+@customElement({ name: 'mdc-image-list', template })
+export class MdcImageList {
+  constructor(private root: HTMLElement) {
+    this.root.setAttribute('id', this.id);
+  }
+
+  style: HTMLStyleElement;
+
+  id = `mdc-image-list-${++id}`;
+
+  /** Indicates that this Image List should use the Masonry variant */
+  @bindable({ set: booleanAttr })
+  masonry: boolean;
+
+  /** Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image) */
+  @bindable({ set: booleanAttr })
+  textProtection: boolean;
+
+  /** Number of columns in the list */
+  @bindable()
+  columns: string | Partial<IColumnsOptions>[];
+  columnsChanged() {
+    if (!this.columns) {
+      return;
+    }
+    const columns = typeof this.columns === 'string' ? [{ count: parseInt(this.columns) }] : this.columns;
+    if (this.masonry) {
+      this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
+        p += `${c.media ? `@media (${c.media}) {` : ''}
+  #${this.id} {
+    column-count: ${c.count};
+    column-gap: ${c.gutterSize ?? 4}px;
+  }
+
+  #${this.id} .mdc-image-list__item {
+    margin-bottom: ${c.gutterSize ?? 4}px;
+  }
+${c.media ? '}' : ''}`;
+        return p;
+      }, '');
+    } else {
+      this.style.innerHTML = columns.filter(x => x.count).reduce((p, c) => {
+        p += `${c.media ? `@media (${c.media}) {` : ''}
+  #${this.id} .mdc-image-list__item {
+    width: calc(100% / ${c.count} - ${(c.gutterSize ?? 4) + 1 / c.count!}px);
+    margin: ${c.gutterSize ?? 4 / 2}px;
+  }
+${c.media ? '}' : ''}`;
+        return p;
+      }, '');
+    }
+  }
+
+  bound() {
+    this.columnsChanged();
+  }
+}

package/src/image-list/styles/_index.scss

@@ -1 +1 @@
-@forward "mdc-image-list";
+@forward "mdc-image-list";

package/src/image-list/styles/mdc-image-list.import.scss

@@ -1 +1 @@
-@forward "mdc-image-list";
+@forward "mdc-image-list";

package/src/image-list/styles/mdc-image-list.scss

@@ -1,7 +1,7 @@
-.mdc-image-list__image-aspect-container {
-  padding-bottom: calc(100% / var(--mdc-image-list-item-aspect, 1));
-}
-
-.mdc-image-list__item {
-  display: block;
-}
+.mdc-image-list__image-aspect-container {
+  padding-bottom: calc(100% / var(--mdc-image-list-item-aspect, 1));
+}
+
+.mdc-image-list__item {
+  display: block;
+}

package/src/index.ts

@@ -117,6 +117,18 @@ import { MdcSegmentedButton } from './segmented-button/mdc-segmented-button';
 import { MdcSegmentedButtonSegment } from './segmented-button/mdc-segmented-button-segment/mdc-segmented-button-segment';
 import { MdcSelect } from './select/mdc-select';
 import { MdcIcon } from './icon/mdc-icon';
+import { MdcDefaultLookupConfiguration } from './lookup/mdc-lookup-configuration';
+import { MdcDefaultTextFieldConfiguration } from './text-field/mdc-default-text-field-configuration';
+import { AlertModal } from './alert/alert-modal/alert-modal';
+import { GlobalProgress } from './alert/global-progress/global-progress';
+import { PromptDialog } from './alert/prompt-dialog/prompt-dialog';
+import { MdcInputmaskCustomAttribute, EnhanceMask } from './text-field/mdc-inputmask';
+import { IAlertModalPayload } from './alert/alert-modal/i-alert-modal-payload';
+import { AlertService } from './alert/alert-service';
+import { confirmAction } from './alert/decorators/confirm-action';
+import { usingProgress } from './alert/decorators/using-progress';
+import { ExceptionsTracker } from './alert/exceptions-tracker';
+import { validate } from './validation/validate';
 
 let registered = false; //
 
@@ -132,8 +144,8 @@ export {
   MdcSlider, MdcSnackbar, MdcSnackbarService, MdcSwitch, EnhanceMdcSwitch, MdcTabBar, MdcTab, MdcTabScroller, MdcTabIndicator, MdcTextField, MdcTextFieldIcon, MdcTextFieldHelperLine, MdcTextFieldHelperText,
   MdcTextFieldCharacterCounter, EnhanceMdcTextfield, MdcTooltip, MdcTooltipAttribute, MdcTopAppBar, MdcTopAppBarRow, MdcTopAppBarTitle, MdcTopAppBarSection, MdcTopAppBarFixedAdjust, MdcTopAppBarNavIcon,
   MdcTopAppBarActionItem, EnhanceTopAppBarActions, MdcTreeView, MdcTreeViewNodeMeta, MdcTreeNode, NodeFilterValueConverter, MdcBody1, MdcBody2, MdcCaption, MdcHeadline1, MdcHeadline2, MdcHeadline3,
-  MdcHeadline4, MdcHeadline5, MdcHeadline6, MdcOveline, MdcSubtitle1, MdcSubtitle2, MdcTypographyButton, MdcIcon,
-  MdcDialogService, MdcValidationControllerFactory
+  MdcHeadline4, MdcHeadline5, MdcHeadline6, MdcOveline, MdcSubtitle1, MdcSubtitle2, MdcTypographyButton, MdcIcon, validate,
+  MdcDialogService, MdcValidationControllerFactory, MdcDefaultLookupConfiguration, MdcDefaultTextFieldConfiguration, AlertService, confirmAction, usingProgress, ExceptionsTracker, IAlertModalPayload
 };
 
 export { MdcComponent } from './base/mdc-component';
@@ -158,6 +170,8 @@ export type { IMdcTabElement } from './tab-bar/tab/mdc-tab';
 export type { IMdcTextFieldElement } from './text-field/mdc-text-field';
 export type { IMdcTextFieldHelperLineElement } from './text-field/mdc-text-field-helper-line/mdc-text-field-helper-line';
 export { MdcValidationResultPresenter } from './validation/mdc-validation-result-presenter';
+export type { IPromptDialogData } from './alert/prompt-dialog/prompt-dialog';
+export type { IWithAlertService } from './alert/decorators/using-progress';
 
 
 export const AllConfiguration = {
@@ -216,7 +230,7 @@ export const AllConfiguration = {
       MdcSlider, MdcSnackbar, MdcSnackbarService, MdcSwitch, EnhanceMdcSwitch, MdcTabBar, MdcTab, MdcTabScroller, MdcTabIndicator, MdcTextField, MdcTextFieldIcon, MdcTextFieldHelperLine, MdcTextFieldHelperText,
       MdcTextFieldCharacterCounter, EnhanceMdcTextfield, MdcTooltip, MdcTooltipAttribute, MdcTopAppBar, MdcTopAppBarRow, MdcTopAppBarTitle, MdcTopAppBarSection, MdcTopAppBarFixedAdjust, MdcTopAppBarNavIcon,
       MdcTopAppBarActionItem, EnhanceTopAppBarActions, MdcTreeView, MdcTreeViewNodeMeta, MdcTreeNode, NodeFilterValueConverter, MdcBody1, MdcBody2, MdcCaption, MdcHeadline1, MdcHeadline2, MdcHeadline3,
-      MdcHeadline4, MdcHeadline5, MdcHeadline6, MdcOveline, MdcSubtitle1, MdcSubtitle2, MdcTypographyButton, MdcIcon
+      MdcHeadline4, MdcHeadline5, MdcHeadline6, MdcOveline, MdcSubtitle1, MdcSubtitle2, MdcTypographyButton, MdcIcon, AlertModal, GlobalProgress, PromptDialog, MdcInputmaskCustomAttribute, EnhanceMask
     );
   },
   customize(optionsProvider: (config: MdcConfiguration) => void) {

package/src/layout-grid/mdc-layout-grid-cell/mdc-layout-grid-cell.html

@@ -1,12 +1,12 @@
-<template class="
-  mdc-layout-grid__cell
-  ${order ? 'mdc-layout-grid__cell--order-' + order : ''}
-  ${position ? 'mdc-layout-grid__cell--align-' + position : ''}
-  ${span ? 'mdc-layout-grid__cell--span-' + span : ''}
-  ${desktopSpan ? 'mdc-layout-grid__cell--span-' + desktopSpan + '-desktop' : ''}
-  ${tabletSpan ? 'mdc-layout-grid__cell--span-' + tabletSpan + '-tablet' : ''}
-  ${phoneSpan ? 'mdc-layout-grid__cell--span-' + phoneSpan + '-phone' : ''}
-  ${newRow ? 'mdc-layout-grid__cell--new-row' : ''}
-  ">
-  <au-slot></au-slot>
-</template>
+<template class="
+  mdc-layout-grid__cell
+  ${order ? 'mdc-layout-grid__cell--order-' + order : ''}
+  ${position ? 'mdc-layout-grid__cell--align-' + position : ''}
+  ${span ? 'mdc-layout-grid__cell--span-' + span : ''}
+  ${desktopSpan ? 'mdc-layout-grid__cell--span-' + desktopSpan + '-desktop' : ''}
+  ${tabletSpan ? 'mdc-layout-grid__cell--span-' + tabletSpan + '-tablet' : ''}
+  ${phoneSpan ? 'mdc-layout-grid__cell--span-' + phoneSpan + '-phone' : ''}
+  ${newRow ? 'mdc-layout-grid__cell--new-row' : ''}
+  ">
+  <au-slot></au-slot>
+</template>

package/src/layout-grid/mdc-layout-grid-cell/mdc-layout-grid-cell.ts

@@ -1,49 +1,49 @@
-import { customElement, bindable } from 'aurelia';
-import { booleanAttr } from '../../base';
-import template from './mdc-layout-grid-cell.html?raw';
-
-/**
- * @selector mdc-layout-grid-cell
- */
-@customElement({ name: 'mdc-layout-grid-cell', template })
-export class MdcLayoutGridCell {
-  /** Optional, specifies the order of the cell */
-  @bindable()
-  order: string;
-
-  /** Optional, specifies the alignment of cell */
-  @bindable()
-  position: 'top' | 'middle' | 'bottom';
-
-  /** Optional, specifies the number of columns the cell spans */
-  @bindable()
-  span: string;
-
-  /** Optional, specifies the number of columns the cell spans on a desktop */
-  @bindable()
-  desktopSpan: string;
-
-  /** Optional, specifies the number of columns the cell spans on a tablet */
-  @bindable()
-  tabletSpan: string;
-
-  /** Optional, specifies the number of columns the cell spans on a phone */
-  @bindable()
-  phoneSpan: string;
-
-  @bindable({ set: booleanAttr })
-  newRow: string;
-
-  /** Optional, specifies the number of columns the cell spans for all screen sizes */
-  @bindable()
-  spans: string;
-  spansChanged() {
-    [this.phoneSpan, this.tabletSpan, this.desktopSpan] = this.spans.split(' ');
-  }
-
-  bound() {
-    if (this.spans !== undefined) {
-      this.spansChanged();
-    }
-  }
-}
+import { customElement, bindable } from 'aurelia';
+import { booleanAttr } from '../../base';
+import template from './mdc-layout-grid-cell.html?raw';
+
+/**
+ * @selector mdc-layout-grid-cell
+ */
+@customElement({ name: 'mdc-layout-grid-cell', template })
+export class MdcLayoutGridCell {
+  /** Optional, specifies the order of the cell */
+  @bindable()
+  order: string;
+
+  /** Optional, specifies the alignment of cell */
+  @bindable()
+  position: 'top' | 'middle' | 'bottom';
+
+  /** Optional, specifies the number of columns the cell spans */
+  @bindable()
+  span: string;
+
+  /** Optional, specifies the number of columns the cell spans on a desktop */
+  @bindable()
+  desktopSpan: string;
+
+  /** Optional, specifies the number of columns the cell spans on a tablet */
+  @bindable()
+  tabletSpan: string;
+
+  /** Optional, specifies the number of columns the cell spans on a phone */
+  @bindable()
+  phoneSpan: string;
+
+  @bindable({ set: booleanAttr })
+  newRow: string;
+
+  /** Optional, specifies the number of columns the cell spans for all screen sizes */
+  @bindable()
+  spans: string;
+  spansChanged() {
+    [this.phoneSpan, this.tabletSpan, this.desktopSpan] = this.spans.split(' ');
+  }
+
+  bound() {
+    if (this.spans !== undefined) {
+      this.spansChanged();
+    }
+  }
+}

package/src/layout-grid/mdc-layout-grid-inner.ts

@@ -1,8 +1,8 @@
-import { customElement } from 'aurelia';
-
-/**
- * Mandatory. Added automatically by the grid element. Can be used for nested tables.
- * @selector mdc-layout-grid-inner
- */
-@customElement({ name: 'mdc-layout-grid-inner', template: '<template class="mdc-layout-grid__inner"><au-slot></au-slot></template>' })
-export class MdcLayoutGridInner { }
+import { customElement } from 'aurelia';
+
+/**
+ * Mandatory. Added automatically by the grid element. Can be used for nested tables.
+ * @selector mdc-layout-grid-inner
+ */
+@customElement({ name: 'mdc-layout-grid-inner', template: '<template class="mdc-layout-grid__inner"><au-slot></au-slot></template>' })
+export class MdcLayoutGridInner { }

package/src/layout-grid/mdc-layout-grid.html

@@ -1,8 +1,8 @@
-<template class="
-  mdc-layout-grid
-  ${position ? 'mdc-layout-grid--align-' + position : ''}
-  ${fixedColumnWidth ? 'mdc-layout-grid--fixed-column-width' : ''}
-  ${noPadding ? 'mdc-layout-grid--no-padding' : ''}
-  ">
-  <au-slot></au-slot>
-</template>
+<template class="
+  mdc-layout-grid
+  ${position ? 'mdc-layout-grid--align-' + position : ''}
+  ${fixedColumnWidth ? 'mdc-layout-grid--fixed-column-width' : ''}
+  ${noPadding ? 'mdc-layout-grid--no-padding' : ''}
+  ">
+  <au-slot></au-slot>
+</template>

package/src/layout-grid/mdc-layout-grid.ts

@@ -1,67 +1,67 @@
-import { customElement, inject, bindable } from 'aurelia';
-import { booleanAttr, number } from '../base';
-import template from './mdc-layout-grid.html?raw';
-
-/**
- * @selector mdc-layout-grid
- */
-@inject(Element)
-@customElement({ name: 'mdc-layout-grid', template })
-export class MdcLayoutGrid {
-  constructor(private root: HTMLElement) { }
-
-  /** Set grid alignment. Has no effect when the grid already fills its container. */
-  @bindable()
-  position: 'left' | 'right';
-
-  /** Specifies the grid should have fixed column width */
-  @bindable({ set: booleanAttr })
-  fixedColumnWidth: boolean;
-
-  /** Specifies the grid should have no padding */
-  @bindable({ set: booleanAttr })
-  noPadding: boolean;
-
-  /** Set desktop column width */
-  @bindable({ set: number })
-  desktopColumnWidth: string;
-  desktopColumnWidthChanged() {
-    this.root.style.setProperty('--mdc-layout-grid-column-width-desktop', `${this.desktopColumnWidth}px`);
-  }
-
-  /** Set tablet column width */
-  @bindable({ set: number })
-  tabletColumnWidth: string;
-  tabletColumnWidthChanged() {
-    this.root.style.setProperty('--mdc-layout-grid-column-width-tablet', `${this.tabletColumnWidth}px`);
-  }
-
-  /** Set phone column width */
-  @bindable({ set: number })
-  phoneColumnWidth: string;
-  phoneColumnWidthChanged() {
-    this.root.style.setProperty('--mdc-layout-grid-column-width-phone', `${this.phoneColumnWidth}px`);
-  }
-
-  /** Set all column widths at once */
-  @bindable({ set: number })
-  columnWidths: string;
-  columnWidthsChanged() {
-    [this.phoneColumnWidth, this.tabletColumnWidth, this.desktopColumnWidth] = this.columnWidths.split(' ');
-  }
-
-  bound() {
-    if (this.columnWidths !== undefined) {
-      this.columnWidthsChanged();
-    }
-    if (this.phoneColumnWidth !== undefined) {
-      this.phoneColumnWidthChanged();
-    }
-    if (this.tabletColumnWidth !== undefined) {
-      this.tabletColumnWidthChanged();
-    }
-    if (this.desktopColumnWidth !== undefined) {
-      this.desktopColumnWidthChanged();
-    }
-  }
-}
+import { customElement, inject, bindable } from 'aurelia';
+import { booleanAttr, number } from '../base';
+import template from './mdc-layout-grid.html?raw';
+
+/**
+ * @selector mdc-layout-grid
+ */
+@inject(Element)
+@customElement({ name: 'mdc-layout-grid', template })
+export class MdcLayoutGrid {
+  constructor(private root: HTMLElement) { }
+
+  /** Set grid alignment. Has no effect when the grid already fills its container. */
+  @bindable()
+  position: 'left' | 'right';
+
+  /** Specifies the grid should have fixed column width */
+  @bindable({ set: booleanAttr })
+  fixedColumnWidth: boolean;
+
+  /** Specifies the grid should have no padding */
+  @bindable({ set: booleanAttr })
+  noPadding: boolean;
+
+  /** Set desktop column width */
+  @bindable({ set: number })
+  desktopColumnWidth: string;
+  desktopColumnWidthChanged() {
+    this.root.style.setProperty('--mdc-layout-grid-column-width-desktop', `${this.desktopColumnWidth}px`);
+  }
+
+  /** Set tablet column width */
+  @bindable({ set: number })
+  tabletColumnWidth: string;
+  tabletColumnWidthChanged() {
+    this.root.style.setProperty('--mdc-layout-grid-column-width-tablet', `${this.tabletColumnWidth}px`);
+  }
+
+  /** Set phone column width */
+  @bindable({ set: number })
+  phoneColumnWidth: string;
+  phoneColumnWidthChanged() {
+    this.root.style.setProperty('--mdc-layout-grid-column-width-phone', `${this.phoneColumnWidth}px`);
+  }
+
+  /** Set all column widths at once */
+  @bindable({ set: number })
+  columnWidths: string;
+  columnWidthsChanged() {
+    [this.phoneColumnWidth, this.tabletColumnWidth, this.desktopColumnWidth] = this.columnWidths.split(' ');
+  }
+
+  bound() {
+    if (this.columnWidths !== undefined) {
+      this.columnWidthsChanged();
+    }
+    if (this.phoneColumnWidth !== undefined) {
+      this.phoneColumnWidthChanged();
+    }
+    if (this.tabletColumnWidth !== undefined) {
+      this.tabletColumnWidthChanged();
+    }
+    if (this.desktopColumnWidth !== undefined) {
+      this.desktopColumnWidthChanged();
+    }
+  }
+}

package/src/layout-grid/styles/_index.scss

@@ -1 +1 @@
-@forward "mdc-layout-grid";
+@forward "mdc-layout-grid";

package/src/layout-grid/styles/mdc-layout-grid.import.scss

@@ -1 +1 @@
-@forward "mdc-layout-grid";
+@forward "mdc-layout-grid";

package/src/layout-grid/styles/mdc-layout-grid.scss

@@ -1,11 +1,11 @@
-.mdc-layout-grid {
-  display: block;
-
-  &--no-padding {
-    padding: 0;
-  }
-
-  .mdc-layout-grid__cell--new-row {
-    grid-column-start: 1;
-  }
-}
+.mdc-layout-grid {
+  display: block;
+
+  &--no-padding {
+    padding: 0;
+  }
+
+  .mdc-layout-grid__cell--new-row {
+    grid-column-start: 1;
+  }
+}

package/src/line-ripple/mdc-line-ripple.ts

@@ -1,41 +1,41 @@
-import { inject, customElement } from 'aurelia';
-import { MdcComponent } from '../base';
-import { MDCLineRippleFoundation, MDCLineRippleAdapter } from '@material/line-ripple';
-
-@inject(Element)
-@customElement({ name: 'mdc-line-ripple', template: '<template class="mdc-line-ripple"><au-slot></au-slot></template>' })
-export class MdcLineRipple extends MdcComponent<MDCLineRippleFoundation> {
-  /**
-   * Activates the line ripple
-   */
-  activate() {
-    this.foundation?.activate();
-  }
-
-  /**
-   * Deactivates the line ripple
-   */
-  deactivate() {
-    this.foundation?.deactivate();
-  }
-
-  /**
-   * Sets the transform origin given a user's click location.
-   * The `rippleCenter` is the x-coordinate of the middle of the ripple.
-   */
-  setRippleCenter(xCoordinate: number) {
-    this.foundation?.setRippleCenter(xCoordinate);
-  }
-
-  getDefaultFoundation() {
-    const adapter: MDCLineRippleAdapter = {
-      addClass: (className) => this.root.classList.add(className),
-      removeClass: (className) => this.root.classList.remove(className),
-      hasClass: (className) => this.root.classList.contains(className),
-      setStyle: (propertyName, value) => this.root.style.setProperty(propertyName, value),
-      registerEventHandler: (evtType, handler) => this.listen(evtType, handler),
-      deregisterEventHandler: (evtType, handler) => this.unlisten(evtType, handler),
-    };
-    return new MDCLineRippleFoundation(adapter);
-  }
-}
+import { inject, customElement } from 'aurelia';
+import { MdcComponent } from '../base';
+import { MDCLineRippleFoundation, MDCLineRippleAdapter } from '@material/line-ripple';
+
+@inject(Element)
+@customElement({ name: 'mdc-line-ripple', template: '<template class="mdc-line-ripple"><au-slot></au-slot></template>' })
+export class MdcLineRipple extends MdcComponent<MDCLineRippleFoundation> {
+  /**
+   * Activates the line ripple
+   */
+  activate() {
+    this.foundation?.activate();
+  }
+
+  /**
+   * Deactivates the line ripple
+   */
+  deactivate() {
+    this.foundation?.deactivate();
+  }
+
+  /**
+   * Sets the transform origin given a user's click location.
+   * The `rippleCenter` is the x-coordinate of the middle of the ripple.
+   */
+  setRippleCenter(xCoordinate: number) {
+    this.foundation?.setRippleCenter(xCoordinate);
+  }
+
+  getDefaultFoundation() {
+    const adapter: MDCLineRippleAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      setStyle: (propertyName, value) => this.root.style.setProperty(propertyName, value),
+      registerEventHandler: (evtType, handler) => this.listen(evtType, handler),
+      deregisterEventHandler: (evtType, handler) => this.unlisten(evtType, handler),
+    };
+    return new MDCLineRippleFoundation(adapter);
+  }
+}

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

@@ -1,12 +1,12 @@
-<template role="progressbar" class="mdc-linear-progress" style="display: block">
-  <div class="mdc-linear-progress__buffer">
-    <div class="mdc-linear-progress__buffer-bar"></div>
-    <div class="mdc-linear-progress__buffer-dots"></div>
-  </div>
-  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
-    <span class="mdc-linear-progress__bar-inner"></span>
-  </div>
-  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
-    <span class="mdc-linear-progress__bar-inner"></span>
-  </div>
-</template>
+<template role="progressbar" class="mdc-linear-progress" style="display: block">
+  <div class="mdc-linear-progress__buffer">
+    <div class="mdc-linear-progress__buffer-bar"></div>
+    <div class="mdc-linear-progress__buffer-dots"></div>
+  </div>
+  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
+    <span class="mdc-linear-progress__bar-inner"></span>
+  </div>
+  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
+    <span class="mdc-linear-progress__bar-inner"></span>
+  </div>
+</template>