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

package/src/chips/mdc-chip-action/mdc-chip-action.ts

@@ -1,143 +1,143 @@
-import { closest } from '@material/dom/ponyfill';
-import { booleanAttr, MdcComponent } from '../../base';
-import { MDCChipActionAdapter, MDCChipActionFoundation, MDCChipActionCssClasses, MDCChipActionEvents, MDCChipActionFocusBehavior } from '@material/chips';
-import { MDCRippleCapableSurface } from '@material/ripple';
-import { MDCChipTrailingActionFoundation } from '@material/chips/action/trailing-foundation';
-import { MDCChipPrimaryActionFoundation } from '@material/chips/action/primary-foundation';
-import { GRAPHIC_SELECTED_WIDTH_STYLE_PROP, computePrimaryActionRippleClientRect } from '@material/chips/action/component-ripple';
-import { bindable, customElement, inject } from 'aurelia';
-import template from './mdc-chip-action.html?raw';
-
-(MDCChipActionEvents as Record<string, string>).INTERACTION = MDCChipActionEvents.INTERACTION.toLowerCase();
-(MDCChipActionEvents as Record<string, string>).NAVIGATION = MDCChipActionEvents.NAVIGATION.toLowerCase();
-
-let actionId = 0;
-
-/**
- * @hidden
- * @selector mdc-chip-action
- */
-@inject(Element)
-@customElement({ name: 'mdc-chip-action', template })
-export class MdcChipAction extends MdcComponent<MDCChipActionFoundation> implements MDCRippleCapableSurface {
-  constructor(public root: HTMLElement) {
-    super(root);
-    this.root.id = `mdc-chip-action-${++actionId}`;
-  }
-
-  @bindable({ set: booleanAttr })
-  selectable: boolean;
-  selectableChanged() {
-    if (this.selectable) {
-      this.root.setAttribute('role', 'option');
-    } else {
-      this.root.removeAttribute('role');
-    }
-  }
-
-  _selected: boolean;
-
-  get selected(): boolean {
-    return this.foundation?.isSelected() ?? this._selected;
-  }
-  set selected(value: boolean) {
-    this._selected = value;
-    this.foundation?.setSelected(value);
-  }
-
-  @bindable({ set: booleanAttr })
-  trailing: boolean;
-
-  @bindable()
-  icon: string;
-
-  @bindable({ set: booleanAttr })
-  disabled: boolean;
-  async disabledChanged() {
-    await this.initialised;
-    this.foundation?.setDisabled(this.disabled);
-    if (this.disabled) {
-      this.root.setAttribute('disabled', 'true');
-    } else {
-      this.root.removeAttribute('disabled');
-    }
-  }
-
-  initialSyncWithDOM() {
-    this.selectableChanged();
-    this.disabledChanged();
-    if (this._selected !== undefined) {
-      this.selected = this._selected;
-    }
-  }
-
-  handleClick() {
-    this.foundation?.handleClick();
-  }
-
-  handleKeydown(event: KeyboardEvent) {
-    this.foundation?.handleKeydown(event);
-  }
-
-  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: MDCChipActionAdapter = {
-      emitEvent: (eventName, eventDetail) => {
-        this.emit(eventName, eventDetail, true /* shouldBubble */);
-      },
-      focus: () => {
-        this.root.focus();
-      },
-      getAttribute: (attrName) => this.root.getAttribute(attrName),
-      getElementID: () => this.root.id,
-      removeAttribute: (name) => {
-        this.root.removeAttribute(name);
-      },
-      setAttribute: (name, value) => {
-        this.root.setAttribute(name, value);
-      },
-    };
-
-    if (this.root.classList.contains(MDCChipActionCssClasses.TRAILING_ACTION)) {
-      return new MDCChipTrailingActionFoundation(adapter);
-    }
-
-    // Default to the primary foundation
-    return new MDCChipPrimaryActionFoundation(adapter);
-  }
-
-  isFocusable(): boolean {
-    return this.foundation?.isFocusable() ?? false;
-  }
-
-  setFocus(behavior: MDCChipActionFocusBehavior) {
-    this.foundation?.setFocus(behavior);
-  }
-
-  computeRippleClientRect = () => {
-    if (this.root.classList.contains(MDCChipActionCssClasses.PRIMARY_ACTION)) {
-      const chipRoot = closest(this.root, `.${MDCChipActionCssClasses.CHIP_ROOT}`);
-      // Return the root client rect since it's better than nothing
-      if (!chipRoot) {
-        return this.root.getBoundingClientRect();
-      }
-      const graphicWidth = window.getComputedStyle(chipRoot).getPropertyValue(
-        GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
-      return computePrimaryActionRippleClientRect(
-        chipRoot.getBoundingClientRect(), graphicWidth);
-    }
-
-    return this.root.getBoundingClientRect();
-  };
-}
-
-/** @hidden */
-export interface IMdcChipActionElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcChipAction;
-    };
-  };
-}
+import { closest } from '@material/dom/ponyfill';
+import { booleanAttr, MdcComponent } from '../../base';
+import { MDCChipActionAdapter, MDCChipActionFoundation, MDCChipActionCssClasses, MDCChipActionEvents, MDCChipActionFocusBehavior } from '@material/chips';
+import { MDCRippleCapableSurface } from '@material/ripple';
+import { MDCChipTrailingActionFoundation } from '@material/chips/action/trailing-foundation';
+import { MDCChipPrimaryActionFoundation } from '@material/chips/action/primary-foundation';
+import { GRAPHIC_SELECTED_WIDTH_STYLE_PROP, computePrimaryActionRippleClientRect } from '@material/chips/action/component-ripple';
+import { bindable, customElement, inject } from 'aurelia';
+import template from './mdc-chip-action.html?raw';
+
+(MDCChipActionEvents as Record<string, string>).INTERACTION = MDCChipActionEvents.INTERACTION.toLowerCase();
+(MDCChipActionEvents as Record<string, string>).NAVIGATION = MDCChipActionEvents.NAVIGATION.toLowerCase();
+
+let actionId = 0;
+
+/**
+ * @hidden
+ * @selector mdc-chip-action
+ */
+@inject(Element)
+@customElement({ name: 'mdc-chip-action', template })
+export class MdcChipAction extends MdcComponent<MDCChipActionFoundation> implements MDCRippleCapableSurface {
+  constructor(public root: HTMLElement) {
+    super(root);
+    this.root.id = `mdc-chip-action-${++actionId}`;
+  }
+
+  @bindable({ set: booleanAttr })
+  selectable: boolean;
+  selectableChanged() {
+    if (this.selectable) {
+      this.root.setAttribute('role', 'option');
+    } else {
+      this.root.removeAttribute('role');
+    }
+  }
+
+  _selected: boolean;
+
+  get selected(): boolean {
+    return this.foundation?.isSelected() ?? this._selected;
+  }
+  set selected(value: boolean) {
+    this._selected = value;
+    this.foundation?.setSelected(value);
+  }
+
+  @bindable({ set: booleanAttr })
+  trailing: boolean;
+
+  @bindable()
+  icon: string;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean;
+  async disabledChanged() {
+    await this.initialised;
+    this.foundation?.setDisabled(this.disabled);
+    if (this.disabled) {
+      this.root.setAttribute('disabled', 'true');
+    } else {
+      this.root.removeAttribute('disabled');
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.selectableChanged();
+    this.disabledChanged();
+    if (this._selected !== undefined) {
+      this.selected = this._selected;
+    }
+  }
+
+  handleClick() {
+    this.foundation?.handleClick();
+  }
+
+  handleKeydown(event: KeyboardEvent) {
+    this.foundation?.handleKeydown(event);
+  }
+
+  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: MDCChipActionAdapter = {
+      emitEvent: (eventName, eventDetail) => {
+        this.emit(eventName, eventDetail, true /* shouldBubble */);
+      },
+      focus: () => {
+        this.root.focus();
+      },
+      getAttribute: (attrName) => this.root.getAttribute(attrName),
+      getElementID: () => this.root.id,
+      removeAttribute: (name) => {
+        this.root.removeAttribute(name);
+      },
+      setAttribute: (name, value) => {
+        this.root.setAttribute(name, value);
+      },
+    };
+
+    if (this.root.classList.contains(MDCChipActionCssClasses.TRAILING_ACTION)) {
+      return new MDCChipTrailingActionFoundation(adapter);
+    }
+
+    // Default to the primary foundation
+    return new MDCChipPrimaryActionFoundation(adapter);
+  }
+
+  isFocusable(): boolean {
+    return this.foundation?.isFocusable() ?? false;
+  }
+
+  setFocus(behavior: MDCChipActionFocusBehavior) {
+    this.foundation?.setFocus(behavior);
+  }
+
+  computeRippleClientRect = () => {
+    if (this.root.classList.contains(MDCChipActionCssClasses.PRIMARY_ACTION)) {
+      const chipRoot = closest(this.root, `.${MDCChipActionCssClasses.CHIP_ROOT}`);
+      // Return the root client rect since it's better than nothing
+      if (!chipRoot) {
+        return this.root.getBoundingClientRect();
+      }
+      const graphicWidth = window.getComputedStyle(chipRoot).getPropertyValue(
+        GRAPHIC_SELECTED_WIDTH_STYLE_PROP);
+      return computePrimaryActionRippleClientRect(
+        chipRoot.getBoundingClientRect(), graphicWidth);
+    }
+
+    return this.root.getBoundingClientRect();
+  };
+}
+
+/** @hidden */
+export interface IMdcChipActionElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcChipAction;
+    };
+  };
+}

package/src/chips/mdc-chip-set/mdc-chip-set.html

@@ -1,10 +1,10 @@
-<template class="
-    mdc-evolution-chip-set
-    ${overflow ? 'mdc-evolution-chip-set--overflow' : ''}
-  " role="grid" mdcchip:interaction.trigger="handleChipInteraction($event)"
-  mdcchip:animation.trigger="handleChipAnimation($event)"
-  mdcchip:navigation.trigger="handleChipNavigation($event)">
-  <span class="mdc-evolution-chip-set__chips" role="presentation">
-    <au-slot></au-slot>
-  </span>
-</template>
+<template class="
+    mdc-evolution-chip-set
+    ${overflow ? 'mdc-evolution-chip-set--overflow' : ''}
+  " role="grid" mdcchip:interaction.trigger="handleChipInteraction($event)"
+  mdcchip:animation.trigger="handleChipAnimation($event)"
+  mdcchip:navigation.trigger="handleChipNavigation($event)">
+  <span class="mdc-evolution-chip-set__chips" role="presentation">
+    <au-slot></au-slot>
+  </span>
+</template>

package/src/chips/mdc-chip-set/mdc-chip-set.ts

@@ -1,117 +1,117 @@
-import { inject, customElement, bindable, slotted, CustomElement } from 'aurelia';
-import { MDCChipSetFoundation, MDCChipSetAdapter, MDCChipSetEvents } from '@material/chips';
-import { announce } from '@material/dom/announce';
-import { MdcComponent, booleanAttr } from '../../base';
-import { MdcChip } from '../mdc-chip/mdc-chip';
-import { ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent } from '@material/chips/chip-set/types';
-import template from './mdc-chip-set.html?raw';
-
-(MDCChipSetEvents as Record<string, string>).INTERACTION = MDCChipSetEvents.INTERACTION.toLowerCase();
-(MDCChipSetEvents as Record<string, string>).REMOVAL = MDCChipSetEvents.REMOVAL.toLowerCase();
-(MDCChipSetEvents as Record<string, string>).SELECTION = MDCChipSetEvents.SELECTION.toLowerCase();
-
-let chipSetId = 0;
-
-@inject(Element)
-@customElement({ name: 'mdc-chip-set', template })
-export class MdcChipSet extends MdcComponent<MDCChipSetFoundation> {
-
-  id: string = `mdc-chip-set-${++chipSetId}`;
-
-  /**
-   * Causes the chips to overflow instead of wrap (their default behavior).
-   */
-  @bindable({ set: booleanAttr })
-  overflow: boolean;
-
-  @slotted({ query: 'mdc-chip' })
-  chipElements: HTMLElement[];
-
-  get chips(): MdcChip[] {
-    return (this.chipElements ?? []).map(x => CustomElement.for<MdcChip>(x).viewModel);
-  }
-
-  handleChipInteraction(event: ChipInteractionEvent) {
-    this.foundation?.handleChipInteraction(event);
-  }
-
-  handleChipAnimation(event: ChipAnimationEvent) {
-    this.foundation?.handleChipAnimation(event);
-  }
-
-  handleChipNavigation(event: ChipNavigationEvent) {
-    this.foundation?.handleChipNavigation(event);
-  }
-
-  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: MDCChipSetAdapter = {
-      announceMessage: (message) => {
-        announce(message);
-      },
-      emitEvent: (eventName, eventDetail) => {
-        this.emit(eventName, eventDetail, true /* shouldBubble */);
-      },
-      getAttribute: (attrName) => this.root.getAttribute(attrName),
-      getChipActionsAtIndex: (index) => {
-        if (!this.isIndexValid(index)) { return []; }
-        return this.chips[index].getActions();
-      },
-      getChipCount: () => this.chips.length,
-      getChipIdAtIndex: (index) => {
-        if (!this.isIndexValid(index)) { return ''; }
-        return this.chips[index].getElementID();
-      },
-      getChipIndexById: (id) =>
-        this.chips.findIndex((chip) => chip.getElementID() === id),
-      isChipFocusableAtIndex: (index, action) => {
-        if (!this.isIndexValid(index)) { return false; }
-        return this.chips[index].isActionFocusable(action);
-      },
-      isChipSelectableAtIndex: (index, action) => {
-        if (!this.isIndexValid(index)) { return false; }
-        return this.chips[index].isActionSelectable(action);
-      },
-      isChipSelectedAtIndex: (index, action) => {
-        if (!this.isIndexValid(index)) { return false; }
-        return this.chips[index].isActionSelected(action);
-      },
-      removeChipAtIndex: (index) => {
-        if (!this.isIndexValid(index)) { return; }
-        this.chips[index].destroy();
-        this.chips[index].remove();
-        this.chips.splice(index, 1);
-      },
-      setChipFocusAtIndex: (index, action, focus) => {
-        if (!this.isIndexValid(index)) { return; }
-        this.chips[index].setActionFocus(action, focus);
-      },
-      setChipSelectedAtIndex: (index, action, selected) => {
-        if (!this.isIndexValid(index)) { return; }
-        this.chips[index].setActionSelected(action, selected);
-      },
-      startChipAnimationAtIndex: (index, animation) => {
-        if (!this.isIndexValid(index)) { return; }
-        this.chips[index].startAnimation(animation);
-      },
-    };
-
-    // Default to the primary foundation
-    return new MDCChipSetFoundation(adapter);
-  }
-
-  private isIndexValid(index: number): boolean {
-    return index > -1 && index < this.chips.length;
-  }
-}
-
-/** @hidden */
-export interface IMdcChipSetElement extends HTMLElement {
-  $au: {
-    'au:resource:custom-element': {
-      viewModel: MdcChipSet;
-    };
-  };
-}
+import { inject, customElement, bindable, slotted, CustomElement } from 'aurelia';
+import { MDCChipSetFoundation, MDCChipSetAdapter, MDCChipSetEvents } from '@material/chips';
+import { announce } from '@material/dom/announce';
+import { MdcComponent, booleanAttr } from '../../base';
+import { MdcChip } from '../mdc-chip/mdc-chip';
+import { ChipAnimationEvent, ChipInteractionEvent, ChipNavigationEvent } from '@material/chips/chip-set/types';
+import template from './mdc-chip-set.html?raw';
+
+(MDCChipSetEvents as Record<string, string>).INTERACTION = MDCChipSetEvents.INTERACTION.toLowerCase();
+(MDCChipSetEvents as Record<string, string>).REMOVAL = MDCChipSetEvents.REMOVAL.toLowerCase();
+(MDCChipSetEvents as Record<string, string>).SELECTION = MDCChipSetEvents.SELECTION.toLowerCase();
+
+let chipSetId = 0;
+
+@inject(Element)
+@customElement({ name: 'mdc-chip-set', template })
+export class MdcChipSet extends MdcComponent<MDCChipSetFoundation> {
+
+  id: string = `mdc-chip-set-${++chipSetId}`;
+
+  /**
+   * Causes the chips to overflow instead of wrap (their default behavior).
+   */
+  @bindable({ set: booleanAttr })
+  overflow: boolean;
+
+  @slotted({ query: 'mdc-chip' })
+  chipElements: HTMLElement[];
+
+  get chips(): MdcChip[] {
+    return (this.chipElements ?? []).map(x => CustomElement.for<MdcChip>(x).viewModel);
+  }
+
+  handleChipInteraction(event: ChipInteractionEvent) {
+    this.foundation?.handleChipInteraction(event);
+  }
+
+  handleChipAnimation(event: ChipAnimationEvent) {
+    this.foundation?.handleChipAnimation(event);
+  }
+
+  handleChipNavigation(event: ChipNavigationEvent) {
+    this.foundation?.handleChipNavigation(event);
+  }
+
+  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: MDCChipSetAdapter = {
+      announceMessage: (message) => {
+        announce(message);
+      },
+      emitEvent: (eventName, eventDetail) => {
+        this.emit(eventName, eventDetail, true /* shouldBubble */);
+      },
+      getAttribute: (attrName) => this.root.getAttribute(attrName),
+      getChipActionsAtIndex: (index) => {
+        if (!this.isIndexValid(index)) { return []; }
+        return this.chips[index].getActions();
+      },
+      getChipCount: () => this.chips.length,
+      getChipIdAtIndex: (index) => {
+        if (!this.isIndexValid(index)) { return ''; }
+        return this.chips[index].getElementID();
+      },
+      getChipIndexById: (id) =>
+        this.chips.findIndex((chip) => chip.getElementID() === id),
+      isChipFocusableAtIndex: (index, action) => {
+        if (!this.isIndexValid(index)) { return false; }
+        return this.chips[index].isActionFocusable(action);
+      },
+      isChipSelectableAtIndex: (index, action) => {
+        if (!this.isIndexValid(index)) { return false; }
+        return this.chips[index].isActionSelectable(action);
+      },
+      isChipSelectedAtIndex: (index, action) => {
+        if (!this.isIndexValid(index)) { return false; }
+        return this.chips[index].isActionSelected(action);
+      },
+      removeChipAtIndex: (index) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].destroy();
+        this.chips[index].remove();
+        this.chips.splice(index, 1);
+      },
+      setChipFocusAtIndex: (index, action, focus) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].setActionFocus(action, focus);
+      },
+      setChipSelectedAtIndex: (index, action, selected) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].setActionSelected(action, selected);
+      },
+      startChipAnimationAtIndex: (index, animation) => {
+        if (!this.isIndexValid(index)) { return; }
+        this.chips[index].startAnimation(animation);
+      },
+    };
+
+    // Default to the primary foundation
+    return new MDCChipSetFoundation(adapter);
+  }
+
+  private isIndexValid(index: number): boolean {
+    return index > -1 && index < this.chips.length;
+  }
+}
+
+/** @hidden */
+export interface IMdcChipSetElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcChipSet;
+    };
+  };
+}

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

@@ -1,38 +1,38 @@
-<template class="mdc-circular-progress mdc-circular-progress--${size}" role="progressbar" aria-valuemin="0"
-  aria-valuemax="1" css="width:${size}px; height:${size}px;">
-  <div class="mdc-circular-progress__determinate-container">
-    <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
-      xmlns="http://www.w3.org/2000/svg">
-      <circle class="mdc-circular-progress__determinate-track" cx="${size/2}" cy="${size/2}" r="${radius}"
-        stroke-width="${strokeWidth}" />
-      <circle class="mdc-circular-progress__determinate-circle" cx="${size/2}" cy="${size/2}" r="${radius}"
-        stroke-width="${strokeWidth}" stroke-dasharray="${strokeDasharray}" stroke-dashoffset="${strokeDashoffset}"
-        ref="determinateCircle_" />
-    </svg>
-  </div>
-  <div class="mdc-circular-progress__indeterminate-container">
-    <div class="mdc-circular-progress__spinner-layer">
-      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
-          xmlns="http://www.w3.org/2000/svg">
-          <circle cx="${size/2}" cy="${size/2}" r="${radius}" stroke-dasharray="${strokeDasharray}"
-            stroke-dashoffset="${strokeDashoffset}" stroke-width="${strokeWidth}" />
-        </svg>
-      </div>
-      <div class="mdc-circular-progress__gap-patch">
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
-          xmlns="http://www.w3.org/2000/svg">
-          <circle cx="${size/2}" cy="${size/2}" r="${radius}" stroke-dasharray="${strokeDasharray}"
-            stroke-dashoffset="${strokeDashoffset}" stroke-width="${strokeWidth}" />
-        </svg>
-      </div>
-      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
-        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
-          xmlns="http://www.w3.org/2000/svg">
-          <circle cx="${size/2}" cy="${size/2}" r="${radius}" stroke-dasharray="${strokeDasharray}"
-            stroke-dashoffset="${strokeDashoffset}" stroke-width="${strokeWidth}" />
-        </svg>
-      </div>
-    </div>
-  </div>
-</template>
+<template class="mdc-circular-progress mdc-circular-progress--${size}" role="progressbar" aria-valuemin="0"
+  aria-valuemax="1" css="width:${size}px; height:${size}px;">
+  <div class="mdc-circular-progress__determinate-container">
+    <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
+      xmlns="http://www.w3.org/2000/svg">
+      <circle class="mdc-circular-progress__determinate-track" cx="${size/2}" cy="${size/2}" r="${radius}"
+        stroke-width="${strokeWidth}" />
+      <circle class="mdc-circular-progress__determinate-circle" cx="${size/2}" cy="${size/2}" r="${radius}"
+        stroke-width="${strokeWidth}" stroke-dasharray="${strokeDasharray}" stroke-dashoffset="${strokeDashoffset}"
+        ref="determinateCircle_" />
+    </svg>
+  </div>
+  <div class="mdc-circular-progress__indeterminate-container">
+    <div class="mdc-circular-progress__spinner-layer">
+      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
+        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
+          xmlns="http://www.w3.org/2000/svg">
+          <circle cx="${size/2}" cy="${size/2}" r="${radius}" stroke-dasharray="${strokeDasharray}"
+            stroke-dashoffset="${strokeDashoffset}" stroke-width="${strokeWidth}" />
+        </svg>
+      </div>
+      <div class="mdc-circular-progress__gap-patch">
+        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
+          xmlns="http://www.w3.org/2000/svg">
+          <circle cx="${size/2}" cy="${size/2}" r="${radius}" stroke-dasharray="${strokeDasharray}"
+            stroke-dashoffset="${strokeDashoffset}" stroke-width="${strokeWidth}" />
+        </svg>
+      </div>
+      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
+        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 ${size} ${size}"
+          xmlns="http://www.w3.org/2000/svg">
+          <circle cx="${size/2}" cy="${size/2}" r="${radius}" stroke-dasharray="${strokeDasharray}"
+            stroke-dashoffset="${strokeDashoffset}" stroke-width="${strokeWidth}" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>