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

package/dist/alert/alert-modal/alert-modal.html

@@ -0,0 +1,27 @@
+<mdc-dialog class="alert-modal">
+  <mdc-dialog-title if.bind="payload.caption">${payload.caption}</mdc-dialog-title>
+  <mdc-dialog-content class='alert-modal__dialog-content'>
+    <mdc-icon class="${payload.iconColour}">${payload.icon}</mdc-icon>
+    <span if.bind="payload.message">${payload.message}</span>
+    <div if.bind="payload.html" innerhtml.bind="payload.html"></div>
+  </mdc-dialog-content>
+  <mdc-dialog-actions>
+    <template if.bind="payload.button1Action === payload.defaultAction">
+      <button mdc-button data-mdc-dialog-action.bind="payload.button1Action" data-mdc-dialog-button-default
+        data-mdc-dialog-initial-focus if.bind="payload.button1Text">${payload.button1Text}</button>
+    </template>
+    <template else>
+      <button mdc-button data-mdc-dialog-action.bind="payload.button1Action"
+        if.bind="payload.button1Text">${payload.button1Text}</button>
+    </template>
+
+    <template if.bind="payload.button2Action === payload.defaultAction">
+      <button mdc-button data-mdc-dialog-action.bind="payload.button2Action" data-mdc-dialog-button-default
+        data-mdc-dialog-initial-focus if.bind="payload.button2Text">${payload.button2Text}</button>
+    </template>
+    <template else>
+      <button mdc-button data-mdc-dialog-action.bind="payload.button2Action"
+        if.bind="payload.button2Text">${payload.button2Text}</button>
+    </template>
+  </mdc-dialog-actions>
+</mdc-dialog>

package/dist/alert/global-progress/global-progress.html

@@ -0,0 +1,9 @@
+<template class="global-progress">
+  <div class="progress-background"></div>
+  <div>
+    <mdc-circular-progress size.bind="size" stroke-width.bind="strokeWidth" progress.bind="progress">
+    </mdc-circular-progress>
+    <div>${text}</div>
+    <a if.bind="allowCancel" href="#" click.trigger="cancel()">${allowCancel === true ? 'Cancel' : allowCancel}</a>
+  </div>
+</template>

package/dist/alert/prompt-dialog/prompt-dialog.html

@@ -0,0 +1,15 @@
+<mdc-dialog component.ref="dialog" class="prompt-dialog">
+  <mdc-dialog-title if.bind="data.title">${data.title}</mdc-dialog-title>
+  <mdc-dialog-content style="width: 500px">
+    <at-form-field>
+      <mdc-text-field label.bind="data.label" textarea.bind="data.textarea" value.bind="data.text & validate"
+        data-mdc-dialog-initial-focus>
+      </mdc-text-field>
+      <mdc-text-field-helper-line></mdc-text-field-helper-line>
+    </at-form-field>
+  </mdc-dialog-content>
+  <mdc-dialog-actions>
+    <button mdc-button data-mdc-dialog-action="cancel" if.bind="data.cancelText">${data.cancelText}</button>
+    <button mdc-button click.trigger="ok()" if.bind="data.okText">${data.okText}</button>
+  </mdc-dialog-actions>
+</mdc-dialog>

package/dist/banner/mdc-banner.html

@@ -1,21 +1,21 @@
-<template class="mdc-banner ${centered ? 'mdc-banner--centered' : ''}" role="banner"
-  mdc-focus-trap="initial-focus-el.bind: primaryActionEl" mdc-focus-trap.ref="mdcFocusTrap">
-  <div class="${fixed ? 'mdc-banner__fixed' : ''}">
-    <div class="mdc-banner__content" role="alertdialog" aria-live="assertive" ref="contentEl">
-      <div class="mdc-banner__graphic-text-wrapper">
-        <div class="mdc-banner__graphic" role="img" alt="" if.bind="icon">
-          <i class="material-icons mdc-banner__icon">${icon}</i>
-        </div>
-        <div class="mdc-banner__text">
-          <au-slot></au-slot>
-        </div>
-      </div>
-      <div class="mdc-banner__actions">
-        <button mdc-button class="mdc-banner__secondary-action" if.bind="secondaryAction"
-          click.trigger="handleSecondaryActionClick()">${secondaryAction}</button>
-        <button mdc-button class="mdc-banner__primary-action" if.bind="primaryAction"
-          click.trigger="handlePrimaryActionClick()" ref="primaryActionEl">${primaryAction}</button>
-      </div>
-    </div>
-  </div>
-</template>
+<template class="mdc-banner ${centered ? 'mdc-banner--centered' : ''}" role="banner"
+  mdc-focus-trap="initial-focus-el.bind: primaryActionEl" mdc-focus-trap.ref="mdcFocusTrap">
+  <div class="${fixed ? 'mdc-banner__fixed' : ''}">
+    <div class="mdc-banner__content" role="alertdialog" aria-live="assertive" ref="contentEl">
+      <div class="mdc-banner__graphic-text-wrapper">
+        <div class="mdc-banner__graphic" role="img" alt="" if.bind="icon">
+          <i class="material-icons mdc-banner__icon">${icon}</i>
+        </div>
+        <div class="mdc-banner__text">
+          <au-slot></au-slot>
+        </div>
+      </div>
+      <div class="mdc-banner__actions">
+        <button mdc-button class="mdc-banner__secondary-action" if.bind="secondaryAction"
+          click.trigger="handleSecondaryActionClick()">${secondaryAction}</button>
+        <button mdc-button class="mdc-banner__primary-action" if.bind="primaryAction"
+          click.trigger="handlePrimaryActionClick()" ref="primaryActionEl">${primaryAction}</button>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/button/mdc-button.html

@@ -1,12 +1,12 @@
-<template class="
-    mdc-button
-    ${touch ? 'mdc-button--touch' : ''}
-    ${raised ? 'mdc-button--raised' : ''}
-    ${unelevated ? 'mdc-button--unelevated' : ''}
-    ${outlined ? 'mdc-button--outlined' : ''}
-  " tabindex.bind="disabled ? -1 : 0" mdc-ripple="no-class.bind: true">
-  <div class="mdc-button__ripple"></div>
-  <span class="mdc-button__label" if.bind="label">${label}</span>
-  <div class="mdc-button__touch" if.bind="touch"></div>
-  <au-slot></au-slot>
-</template>
+<template class="
+    mdc-button
+    ${touch ? 'mdc-button--touch' : ''}
+    ${raised ? 'mdc-button--raised' : ''}
+    ${unelevated ? 'mdc-button--unelevated' : ''}
+    ${outlined ? 'mdc-button--outlined' : ''}
+  " tabindex.bind="disabled ? -1 : 0" mdc-ripple="no-class.bind: true">
+  <div class="mdc-button__ripple"></div>
+  <span class="mdc-button__label" if.bind="label">${label}</span>
+  <div class="mdc-button__touch" if.bind="touch"></div>
+  <au-slot></au-slot>
+</template>

package/dist/card/mdc-card-actions/mdc-card-actions.html

@@ -1,3 +1,3 @@
-<template class="mdc-card__actions ${fullBleed ? 'mdc-card__actions--full-bleed' : ''}">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-card__actions ${fullBleed ? 'mdc-card__actions--full-bleed' : ''}">
+  <au-slot></au-slot>
+</template>

package/dist/card/mdc-card-media/mdc-card-media.html

@@ -1,5 +1,5 @@
-<template class="mdc-card__media ${square ? 'mdc-card__media--square' : ''} ${wide ? 'mdc-card__media--16-9' : ''}">
-  <div class="mdc-card__media-content">
-    <au-slot></au-slot>
-  </div>
-</template>
+<template class="mdc-card__media ${square ? 'mdc-card__media--square' : ''} ${wide ? 'mdc-card__media--16-9' : ''}">
+  <div class="mdc-card__media-content">
+    <au-slot></au-slot>
+  </div>
+</template>

package/dist/card/mdc-card-primary-action.html

@@ -1,5 +1,5 @@
-<template class="mdc-card__primary-action" tabindex=0
-  mdc-ripple="disabled.bind: disableRipple; surface.bind: rippleElement">
-  <div class="mdc-card__ripple" ref="rippleElement"></div>
-  <au-slot></au-slot>
-</template>
+<template class="mdc-card__primary-action" tabindex=0
+  mdc-ripple="disabled.bind: disableRipple; surface.bind: rippleElement">
+  <div class="mdc-card__ripple" ref="rippleElement"></div>
+  <au-slot></au-slot>
+</template>

package/dist/card/mdc-card.html

@@ -1,3 +1,3 @@
-<template class="mdc-card ${outlined ? 'mdc-card--outlined' : ''}">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-card ${outlined ? 'mdc-card--outlined' : ''}">
+  <au-slot></au-slot>
+</template>

package/dist/checkbox/mdc-checkbox.html

@@ -1,12 +1,12 @@
-<template class="mdc-checkbox ${touch ? 'mdc-checkbox--touch' : ''}"
-  mdc-ripple="no-class.bind: true; input.bind: nativeControl_; unbounded.bind: true; disabled.bind: disableRipple">
-  <input type="checkbox" class="mdc-checkbox__native-control" id="${id}" ref="nativeControl_"
-    change.trigger="handleChange_()" />
-  <div class="mdc-checkbox__background">
-    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-    </svg>
-    <div class="mdc-checkbox__mixedmark"></div>
-  </div>
-  <div class="mdc-checkbox__ripple"></div>
-</template>
+<template class="mdc-checkbox ${touch ? 'mdc-checkbox--touch' : ''}"
+  mdc-ripple="no-class.bind: true; input.bind: nativeControl_; unbounded.bind: true; disabled.bind: disableRipple">
+  <input type="checkbox" class="mdc-checkbox__native-control" id="${id}" ref="nativeControl_"
+    change.trigger="handleChange_()" />
+  <div class="mdc-checkbox__background">
+    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+      <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+    </svg>
+    <div class="mdc-checkbox__mixedmark"></div>
+  </div>
+  <div class="mdc-checkbox__ripple"></div>
+</template>

package/dist/chips/mdc-chip/mdc-chip.html

@@ -1,24 +1,24 @@
-<template class="
-    mdc-evolution-chip
-    ${filter ? 'mdc-evolution-chip--selectable' : ''}
-    ${disabled ? 'mdc-evolution-chip--disabled' : ''}
-    ${icon ? 'mdc-evolution-chip--with-primary-icon' : ''}
-  " role="row" mdcchipaction:interaction.trigger="handleActionInteraction($event)"
-  mdcchipaction:navigation.trigger="handleActionNavigation($event)" animationend.trigger="handleAnimationEnd($event)"
-  transitionend.trigger="handleTransitionEnd()">
-
-  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
-    <au-slot name="primary-action">
-      <button mdc-chip-action selectable.bind="filter" disabled.bind="disabled"
-        icon.bind="icon">
-        <au-slot></au-slot>
-      </button>
-    </au-slot>
-  </span>
-
-  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing" role="gridcell">
-    <au-slot name="trailing-action"></au-slot>
-  </span>
-
-  <au-slot name="non-navigable-trailing-action"></au-slot>
-</template>
+<template class="
+    mdc-evolution-chip
+    ${filter ? 'mdc-evolution-chip--selectable' : ''}
+    ${disabled ? 'mdc-evolution-chip--disabled' : ''}
+    ${icon ? 'mdc-evolution-chip--with-primary-icon' : ''}
+  " role="row" mdcchipaction:interaction.trigger="handleActionInteraction($event)"
+  mdcchipaction:navigation.trigger="handleActionNavigation($event)" animationend.trigger="handleAnimationEnd($event)"
+  transitionend.trigger="handleTransitionEnd()">
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
+    <au-slot name="primary-action">
+      <button mdc-chip-action selectable.bind="filter" disabled.bind="disabled"
+        icon.bind="icon">
+        <au-slot></au-slot>
+      </button>
+    </au-slot>
+  </span>
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing" role="gridcell">
+    <au-slot name="trailing-action"></au-slot>
+  </span>
+
+  <au-slot name="non-navigable-trailing-action"></au-slot>
+</template>

package/dist/chips/mdc-chip-action/mdc-chip-action.html

@@ -1,25 +1,25 @@
-<template class="
-    mdc-evolution-chip__action
-    ${trailing ? 'mdc-evolution-chip__action--trailing' : 'mdc-evolution-chip__action--primary'}
-  " click.trigger="handleClick()" keydown.trigger="handleKeydown($event)"
-  mdc-ripple="no-class.bind: true; compute-bounding-rect.bind: computeRippleClientRect">
-  <span class="
-      mdc-evolution-chip__ripple
-      ${trailing ? 'mdc-evolution-chip__ripple--trailing' : 'mdc-evolution-chip__ripple--primary'}
-    "></span>
-  <span class="mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing material-icons"
-    if.bind="trailing && icon">${icon}</span>
-  <span class="mdc-evolution-chip__graphic" if.bind="!trailing && (icon || selectable)">
-    <span if.bind="icon"
-      class="mdc-evolution-chip__icon ${trailing ? '' : 'mdc-evolution-chip__icon--primary'} material-icons">${icon}</span>
-    <span class="mdc-evolution-chip__checkmark" if.bind="selectable">
-      <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30">
-        <path class="mdc-evolution-chip__checkmark-path" fill="none" stroke="black"
-          d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-      </svg>
-    </span>
-  </span>
-  <span class="mdc-evolution-chip__text-label">
-    <au-slot></au-slot>
-  </span>
-</template>
+<template class="
+    mdc-evolution-chip__action
+    ${trailing ? 'mdc-evolution-chip__action--trailing' : 'mdc-evolution-chip__action--primary'}
+  " click.trigger="handleClick()" keydown.trigger="handleKeydown($event)"
+  mdc-ripple="no-class.bind: true; compute-bounding-rect.bind: computeRippleClientRect">
+  <span class="
+      mdc-evolution-chip__ripple
+      ${trailing ? 'mdc-evolution-chip__ripple--trailing' : 'mdc-evolution-chip__ripple--primary'}
+    "></span>
+  <span class="mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing material-icons"
+    if.bind="trailing && icon">${icon}</span>
+  <span class="mdc-evolution-chip__graphic" if.bind="!trailing && (icon || selectable)">
+    <span if.bind="icon"
+      class="mdc-evolution-chip__icon ${trailing ? '' : 'mdc-evolution-chip__icon--primary'} material-icons">${icon}</span>
+    <span class="mdc-evolution-chip__checkmark" if.bind="selectable">
+      <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30">
+        <path class="mdc-evolution-chip__checkmark-path" fill="none" stroke="black"
+          d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+      </svg>
+    </span>
+  </span>
+  <span class="mdc-evolution-chip__text-label">
+    <au-slot></au-slot>
+  </span>
+</template>

package/dist/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/dist/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>

package/dist/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>

package/dist/dialog/mdc-dialog.html

@@ -1,14 +1,14 @@
-<template class="mdc-dialog ${fullscreen ? 'mdc-dialog--fullscreen' : ''} ${sheet ? 'mdc-dialog--sheet' : ''}"
-  click.trigger="handleClick_($event)" keydown.trigger="handleKeydown_($event)"
-  mdcdialog:opening.trigger="handleOpening_()" mdcdialog:closing.trigger="handleClosing_()" aria-modal="true"
-  mdc-focus-trap="initial-focus-el.bind: getInitialFocusEl" mdc-focus-trap.ref="mdcFocusTrap">
-  <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="${titleId}"
-      aria-describedby="${contentId}">
-      <button if.bind="sheet" class="mdc-icon-button material-icons mdc-dialog__close"
-        data-mdc-dialog-action="close">close</button>
-      <au-slot></au-slot>
-    </div>
-  </div>
-  <div class="mdc-dialog__scrim"></div>
-</template>
+<template class="mdc-dialog ${fullscreen ? 'mdc-dialog--fullscreen' : ''} ${sheet ? 'mdc-dialog--sheet' : ''}"
+  click.trigger="handleClick_($event)" keydown.trigger="handleKeydown_($event)"
+  mdcdialog:opening.trigger="handleOpening_()" mdcdialog:closing.trigger="handleClosing_()" aria-modal="true"
+  mdc-focus-trap="initial-focus-el.bind: getInitialFocusEl" mdc-focus-trap.ref="mdcFocusTrap">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="${titleId}"
+      aria-describedby="${contentId}">
+      <button if.bind="sheet" class="mdc-icon-button material-icons mdc-dialog__close"
+        data-mdc-dialog-action="close">close</button>
+      <au-slot></au-slot>
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</template>

package/dist/drawer/mdc-drawer-header/mdc-drawer-header.html

@@ -1,5 +1,5 @@
-<template class="mdc-drawer__header">
-  <h3 class="mdc-drawer__title" if.bind="title">${title}</h3>
-  <h6 class="mdc-drawer__subtitle" if.bind="subtitle">${subtitle}</h6>
-  <au-slot></au-slot>
-</template>
+<template class="mdc-drawer__header">
+  <h3 class="mdc-drawer__title" if.bind="title">${title}</h3>
+  <h6 class="mdc-drawer__subtitle" if.bind="subtitle">${subtitle}</h6>
+  <au-slot></au-slot>
+</template>

package/dist/drawer/mdc-drawer.html

@@ -1,6 +1,6 @@
-<template class="mdc-drawer
-  ${type === 'dismissible' ? 'mdc-drawer--dismissible' : ''}
-  ${ type === 'modal' ? 'mdc-drawer--modal' : ''}" transitionend.trigger="handleTransitionEnd_($event)"
-  keydown.trigger="handleKeydown_($event)" mdc-focus-trap mdc-focus-trap.ref="mdcFocusTrap">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-drawer
+  ${type === 'dismissible' ? 'mdc-drawer--dismissible' : ''}
+  ${ type === 'modal' ? 'mdc-drawer--modal' : ''}" transitionend.trigger="handleTransitionEnd_($event)"
+  keydown.trigger="handleKeydown_($event)" mdc-focus-trap mdc-focus-trap.ref="mdcFocusTrap">
+  <au-slot></au-slot>
+</template>

package/dist/expandable/mdc-expandable.html

@@ -1,28 +1,28 @@
-<template
-  class="mdc-expandable mdc-expandable--${open ? 'open' : 'closed'} ${accordion === undefined ? '' : 'mdc-expandable--accordion__' + accordion}">
-  <div class="
-      mdc-expandable__header
-      mdc-expandable__header--${open ? 'open' : 'closed'}
-      ${focused ? 'mdc-expandable__header--focused' : ''}
-    " ref="header" click.trigger="toggle()" focus.trigger="handleFocus()" blur.trigger="handleBlur()"
-    mdc-ripple="no-class.bind: true;" tabindex="0" keydown.trigger="handleKeydown($event)">
-    <div class="mdc-expandable__caption">
-      <au-slot name="caption"></au-slot>
-    </div>
-    <span class="mdc-expandable__dropdown-icon">
-      <svg class="mdc-expandable__dropdown-icon-graphic" viewBox="7 10 10 5">
-        <polygon class="mdc-expandable__dropdown-icon-inactive" stroke="none" fill-rule="evenodd"
-          points="7 10 12 15 17 10">
-        </polygon>
-        <polygon class="mdc-expandable__dropdown-icon-active" stroke="none" fill-rule="evenodd"
-          points="7 15 12 10 17 15">
-        </polygon>
-      </svg>
-    </span>
-  </div>
-  <div class="mdc-expandable__content-container" ref="contentContainer">
-    <div class="mdc-expandable__content" ref="content">
-      <au-slot></au-slot>
-    </div>
-  </div>
-</template>
+<template
+  class="mdc-expandable mdc-expandable--${open ? 'open' : 'closed'} ${accordion === undefined ? '' : 'mdc-expandable--accordion__' + accordion}">
+  <div class="
+      mdc-expandable__header
+      mdc-expandable__header--${open ? 'open' : 'closed'}
+      ${focused ? 'mdc-expandable__header--focused' : ''}
+    " ref="header" click.trigger="toggle()" focus.trigger="handleFocus()" blur.trigger="handleBlur()"
+    mdc-ripple="no-class.bind: true;" tabindex="0" keydown.trigger="handleKeydown($event)">
+    <div class="mdc-expandable__caption">
+      <au-slot name="caption"></au-slot>
+    </div>
+    <span class="mdc-expandable__dropdown-icon">
+      <svg class="mdc-expandable__dropdown-icon-graphic" viewBox="7 10 10 5">
+        <polygon class="mdc-expandable__dropdown-icon-inactive" stroke="none" fill-rule="evenodd"
+          points="7 10 12 15 17 10">
+        </polygon>
+        <polygon class="mdc-expandable__dropdown-icon-active" stroke="none" fill-rule="evenodd"
+          points="7 15 12 10 17 15">
+        </polygon>
+      </svg>
+    </span>
+  </div>
+  <div class="mdc-expandable__content-container" ref="contentContainer">
+    <div class="mdc-expandable__content" ref="content">
+      <au-slot></au-slot>
+    </div>
+  </div>
+</template>