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

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

@@ -1,91 +1,91 @@
-import { MdcComponent, number } from '../base';
-import { inject, customElement, bindable } from 'aurelia';
-import { MDCCircularProgressFoundation, MDCCircularProgressAdapter, strings } from '@material/circular-progress';
-import template from './mdc-circular-progress.html?raw';
-
-/**
- * @selector mdc-circular-progress
- */
-@inject(Element)
-@customElement({ name: 'mdc-circular-progress', template })
-export class MdcCircularProgress extends MdcComponent<MDCCircularProgressFoundation> {
-  private determinateCircle_?: HTMLElement;
-
-  radius: number = 47.5;
-  strokeDasharray: number;
-  strokeDashoffset: number;
-
-  /** Size in pixels */
-  @bindable({ set: number })
-  size: number = 100;
-  sizeChanged() {
-    this.updateSizeAndStroke();
-  }
-
-  /** Stroke width in pixels */
-  @bindable({ set: number })
-  strokeWidth: number = 10;
-  strokeWidthChanged() {
-    this.updateSizeAndStroke();
-  }
-
-  /** The current progress value, which must be between 0 and 1 or undefined for an indeterminate spinner */
-  @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!);
-    }
-  }
-
-  binding() {
-    this.updateSizeAndStroke();
-  }
-
-  updateSizeAndStroke() {
-    this.radius = (this.size - 4) / 2 - this.strokeWidth;
-    // foundation gets the radius from the element itself
-    // set the attribute explicitly to avoid issues related to async binding
-    this.determinateCircle_?.setAttribute('r', this.radius.toString());
-    this.strokeDasharray = 2 * this.radius * Math.PI;
-    this.strokeDashoffset = this.strokeDasharray / 2;
-  }
-
-  initialSyncWithDOM() {
-    this.progressChanged();
-  }
-
-  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: MDCCircularProgressAdapter = {
-      addClass: (className: string) => this.root.classList.add(className),
-      getDeterminateCircleAttribute: (attributeName: string) => this.determinateCircle_?.getAttribute(attributeName) ?? null,
-      hasClass: (className: string) => this.root.classList.contains(className),
-      removeClass: (className: string) => this.root.classList.remove(className),
-      removeAttribute: (attributeName: string) => this.root.removeAttribute(attributeName),
-      setAttribute: (attributeName: string, value: string) => this.root.setAttribute(attributeName, value),
-      setDeterminateCircleAttribute: (attributeName: string, value: string) => {
-        if (attributeName === strings.STROKE_DASHOFFSET) {
-          // set offset via binding, otherwise it gets overwritten
-          this.strokeDashoffset = parseInt(value);
-        } else {
-          this.determinateCircle_?.setAttribute(attributeName, value);
-        }
-      },
-    };
-    return new MDCCircularProgressFoundation(adapter);
-  }
-}
-
-/** @hidden */
-export interface IMdcCircularProgressElement extends HTMLElement {
-  au: {
-    controller: {
-      viewModel: MdcCircularProgress;
-    };
-  };
-}
+import { MdcComponent, number } from '../base';
+import { inject, customElement, bindable } from 'aurelia';
+import { MDCCircularProgressFoundation, MDCCircularProgressAdapter, strings } from '@material/circular-progress';
+import template from './mdc-circular-progress.html?raw';
+
+/**
+ * @selector mdc-circular-progress
+ */
+@inject(Element)
+@customElement({ name: 'mdc-circular-progress', template })
+export class MdcCircularProgress extends MdcComponent<MDCCircularProgressFoundation> {
+  private determinateCircle_?: HTMLElement;
+
+  radius: number = 47.5;
+  strokeDasharray: number;
+  strokeDashoffset: number;
+
+  /** Size in pixels */
+  @bindable({ set: number })
+  size: number = 100;
+  sizeChanged() {
+    this.updateSizeAndStroke();
+  }
+
+  /** Stroke width in pixels */
+  @bindable({ set: number })
+  strokeWidth: number = 10;
+  strokeWidthChanged() {
+    this.updateSizeAndStroke();
+  }
+
+  /** The current progress value, which must be between 0 and 1 or undefined for an indeterminate spinner */
+  @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!);
+    }
+  }
+
+  binding() {
+    this.updateSizeAndStroke();
+  }
+
+  updateSizeAndStroke() {
+    this.radius = (this.size - 4) / 2 - this.strokeWidth;
+    // foundation gets the radius from the element itself
+    // set the attribute explicitly to avoid issues related to async binding
+    this.determinateCircle_?.setAttribute('r', this.radius.toString());
+    this.strokeDasharray = 2 * this.radius * Math.PI;
+    this.strokeDashoffset = this.strokeDasharray / 2;
+  }
+
+  initialSyncWithDOM() {
+    this.progressChanged();
+  }
+
+  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: MDCCircularProgressAdapter = {
+      addClass: (className: string) => this.root.classList.add(className),
+      getDeterminateCircleAttribute: (attributeName: string) => this.determinateCircle_?.getAttribute(attributeName) ?? null,
+      hasClass: (className: string) => this.root.classList.contains(className),
+      removeClass: (className: string) => this.root.classList.remove(className),
+      removeAttribute: (attributeName: string) => this.root.removeAttribute(attributeName),
+      setAttribute: (attributeName: string, value: string) => this.root.setAttribute(attributeName, value),
+      setDeterminateCircleAttribute: (attributeName: string, value: string) => {
+        if (attributeName === strings.STROKE_DASHOFFSET) {
+          // set offset via binding, otherwise it gets overwritten
+          this.strokeDashoffset = parseInt(value);
+        } else {
+          this.determinateCircle_?.setAttribute(attributeName, value);
+        }
+      },
+    };
+    return new MDCCircularProgressFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcCircularProgressElement extends HTMLElement {
+  au: {
+    controller: {
+      viewModel: MdcCircularProgress;
+    };
+  };
+}

package/src/circular-progress/styles/_index.scss

@@ -1 +1 @@
-@forward "mdc-circular-progress";
+@forward "mdc-circular-progress";

package/src/circular-progress/styles/mdc-circular-progress.import.scss

@@ -1 +1 @@
-@forward "mdc-circular-progress";
+@forward "mdc-circular-progress";

package/src/circular-progress/styles/mdc-circular-progress.scss

@@ -1,14 +1,14 @@
-.mdc-circular-progress {
-  width: var(--mdc-circular-progress-size);
-  height: var(--mdc-circular-progress-size);
-
-  .mdc-circular-progress__indeterminate-circle-graphic {
-    stroke-width: var(--mdc-circular-progress-stroke-width);
-  }
-
-  .mdc-circular-progress__gap-patch {
-    .mdc-circular-progress__indeterminate-circle-graphic {
-      stroke-width: var(--mdc-circular-progress-gap-patch-stroke-width);
-    }
-  }
-}
+.mdc-circular-progress {
+  width: var(--mdc-circular-progress-size);
+  height: var(--mdc-circular-progress-size);
+
+  .mdc-circular-progress__indeterminate-circle-graphic {
+    stroke-width: var(--mdc-circular-progress-stroke-width);
+  }
+
+  .mdc-circular-progress__gap-patch {
+    .mdc-circular-progress__indeterminate-circle-graphic {
+      stroke-width: var(--mdc-circular-progress-gap-patch-stroke-width);
+    }
+  }
+}

package/src/data-table/mdc-data-table-row.ts

@@ -1,24 +1,24 @@
-import { customAttribute, inject } from 'aurelia';
-import { cssClasses } from '@material/data-table';
-
-/**
- * Required. Marks the table row.
- * @selector [mdc-data-table-row]
- */
-@customAttribute('mdc-data-table-row')
-@inject(Element)
-export class MdcDataTableRow {
-  constructor(private root: HTMLTableRowElement) { }
-
-  attached() {
-    this.root.classList.add(cssClasses.ROW);
-    const cells = this.root.querySelectorAll<HTMLElement>('th,td');
-    for (const cell of Array.from(cells)) {
-      cell.classList.add(cssClasses.CELL);
-      cell.classList.toggle(cssClasses.CELL_NUMERIC, cell.hasAttribute('numeric'));
-      if (cell.tagName === 'TH') {
-        cell.setAttribute('scope', 'row');
-      }
-    }
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+import { cssClasses } from '@material/data-table';
+
+/**
+ * Required. Marks the table row.
+ * @selector [mdc-data-table-row]
+ */
+@customAttribute('mdc-data-table-row')
+@inject(Element)
+export class MdcDataTableRow {
+  constructor(private root: HTMLTableRowElement) { }
+
+  attached() {
+    this.root.classList.add(cssClasses.ROW);
+    const cells = this.root.querySelectorAll<HTMLElement>('th,td');
+    for (const cell of Array.from(cells)) {
+      cell.classList.add(cssClasses.CELL);
+      cell.classList.toggle(cssClasses.CELL_NUMERIC, cell.hasAttribute('numeric'));
+      if (cell.tagName === 'TH') {
+        cell.setAttribute('scope', 'row');
+      }
+    }
+  }
+}

package/src/data-table/mdc-data-table.html

@@ -1,49 +1,50 @@
-<template class="mdc-data-table ${stickyHeader ? 'mdc-data-table--sticky-header' : ''}">
-  <div class="mdc-data-table__table-container">
-    <au-slot></au-slot>
-  </div>
-  <div class="mdc-data-table__pagination" if.bind="pagination">
-    <div class="mdc-data-table__pagination-trailing">
-      <div class="mdc-data-table__pagination-rows-per-page">
-        <div class="mdc-data-table__pagination-rows-per-page-label">${rowsPerPageLabel}</div>
-
-        <mdc-select value.bind="pageSize" outlined class="mdc-data-table__pagination-rows-per-page-select"
-          hoist-to-body.bind="hoistPageSelectToBody">
-          <mdc-list>
-            <mdc-list-item repeat.for="ps of pageSizes" value.bind="ps">${ps}</mdc-list-item>
-          </mdc-list>
-        </mdc-select>
-      </div>
-
-      <div class="mdc-data-table__pagination-navigation">
-        <div class="mdc-data-table__pagination-total">
-          <au-slot name="pagination-total">${paginationTotal}</au-slot>
-        </div>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-first-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'first'"
-          click.trigger="handleNavigationClick('first')">
-          <mdc-icon>first_page</mdc-icon>
-        </button>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-prev-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'first'"
-          click.trigger="handleNavigationClick('prev')">
-          <mdc-icon>chevron_left</mdc-icon>
-        </button>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-next-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'last'"
-          click.trigger="handleNavigationClick('next')">
-          <mdc-icon>chevron_right</mdc-icon>
-        </button>
-        <button mdc-icon-button class="mdc-data-table__pagination-button" data-last-page="true"
-          disabled.bind="!paginationPosition || paginationPosition === 'last'"
-          click.trigger="handleNavigationClick('last')">
-          <mdc-icon>last_page</mdc-icon>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div class="mdc-data-table__progress-indicator">
-    <div class="mdc-data-table__scrim"></div>
-    <mdc-linear-progress class="mdc-data-table__linear-progress"></mdc-linear-progress>
-  </div>
-</template>
+<template
+  class="mdc-data-table ${stickyHeader ? 'mdc-data-table--sticky-header' : ''} ${columnResized ? 'mdc-data-table--column-resized' : ''}">
+  <div class="mdc-data-table__table-container">
+    <au-slot></au-slot>
+  </div>
+  <div class="mdc-data-table__pagination" if.bind="pagination">
+    <div class="mdc-data-table__pagination-trailing">
+      <div class="mdc-data-table__pagination-rows-per-page">
+        <div class="mdc-data-table__pagination-rows-per-page-label">${rowsPerPageLabel}</div>
+
+        <mdc-select value.bind="pageSize" outlined class="mdc-data-table__pagination-rows-per-page-select"
+          hoist-to-body.bind="hoistPageSelectToBody">
+          <mdc-list>
+            <mdc-list-item repeat.for="ps of pageSizes" value.bind="ps">${ps}</mdc-list-item>
+          </mdc-list>
+        </mdc-select>
+      </div>
+
+      <div class="mdc-data-table__pagination-navigation">
+        <div class="mdc-data-table__pagination-total">
+          <au-slot name="pagination-total">${paginationTotal}</au-slot>
+        </div>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-first-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'first'"
+          click.trigger="handleNavigationClick('first')">
+          <mdc-icon>first_page</mdc-icon>
+        </button>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-prev-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'first'"
+          click.trigger="handleNavigationClick('prev')">
+          <mdc-icon>chevron_left</mdc-icon>
+        </button>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-next-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'last'"
+          click.trigger="handleNavigationClick('next')">
+          <mdc-icon>chevron_right</mdc-icon>
+        </button>
+        <button mdc-icon-button class="mdc-data-table__pagination-button" data-last-page="true"
+          disabled.bind="!paginationPosition || paginationPosition === 'last'"
+          click.trigger="handleNavigationClick('last')">
+          <mdc-icon>last_page</mdc-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="mdc-data-table__progress-indicator">
+    <div class="mdc-data-table__scrim"></div>
+    <mdc-linear-progress class="mdc-data-table__linear-progress"></mdc-linear-progress>
+  </div>
+</template>