trimox · trimox · Mar 24, 2020 · Apr 8, 2020 · Apr 14, 2020 · Apr 14, 2020
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ Using Google Material Components [foundations and adapters](https://github.com/m
 | card | Available | [View](https://trimox.github.io/angular-mdc-web/#/card-demo) |
 | checkbox | Available | [View](https://trimox.github.io/angular-mdc-web/#/checkbox-demo) |
 | chips | Available | [View](https://trimox.github.io/angular-mdc-web/#/chips-demo) |
+| circular-progress | Available | [View](https://trimox.github.io/angular-mdc-web/#/circular-progress) |
 | data-table | Available | [View](https://trimox.github.io/angular-mdc-web/#/data-table-demo) |
 | dialog | Available | [View](https://trimox.github.io/angular-mdc-web/#/dialog-demo) |
 | drawer | Available | [View](https://trimox.github.io/angular-mdc-web/#/drawer-demo) |

diff --git a/demos/src/app/app-routing.module.ts b/demos/src/app/app-routing.module.ts
@@ -19,6 +19,10 @@ const routes: Routes = [
     path: 'checkbox-demo', loadChildren: () =>
       import('./components/checkbox/module').then(m => m.CheckboxModule)
   },
+  {
+    path: 'circular-progress', loadChildren: () =>
+      import('./components/circular-progress/module').then(m => m.CircularProgressModule)
+  },
   {
     path: 'chips-demo', loadChildren: () =>
       import('./components/chips/module').then(m => m.ChipsModule)

diff --git a/demos/src/app/app.component.ts b/demos/src/app/app.component.ts
@@ -26,6 +26,7 @@ export class AppComponent implements OnInit {
     {name: 'Card', route: 'card-demo'},
     {name: 'Checkbox', route: 'checkbox-demo'},
     {name: 'Chips', route: 'chips-demo'},
+    {name: 'Circular Progress', route: 'circular-progress'},
     {name: 'Data Table', route: 'data-table-demo'},
     {name: 'Dialog', route: 'dialog-demo'},
     {name: 'Drawer', route: 'drawer-demo'},

diff --git a/demos/src/app/components/circular-progress/api.html b/demos/src/app/components/circular-progress/api.html
diff --git a/demos/src/app/components/circular-progress/circular-progress.ts b/demos/src/app/components/circular-progress/circular-progress.ts
@@ -0,0 +1,44 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+
+import {ComponentViewer} from '../../shared/component-viewer';
+import {MdcSliderChange} from '@angular-mdc/web/slider';
+
+@Component({templateUrl: './api.html'})
+export class Api {}
+
+@Component({templateUrl: './sass.html'})
+export class Sass {}
+
+@Component({template: '<component-viewer></component-viewer>'})
+export class CircularProgress implements OnInit {
+  @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
+
+  ngOnInit(): void {
+    this._componentViewer.template = {
+      title: 'Circular Progress',
+      description: `Circular progress indicators display progress by animating an indicator
+      along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.`,
+      references: [{
+        name: 'Material Design guidelines: Circular Progress',
+        url: 'https://material.io/components/progress-indicators/#circular-progress-indicators'
+      }, {
+        name: 'Material Components Web',
+        url: 'https://github.com/material-components/material-components-web/blob/master/packages/mdc-circular-progress/README.md'
+      }],
+      code: `import {MdcCircularProgressModule} from '@angular-mdc/web';`,
+      sass: `@use '@material/circular-progress/mdc-circular-progress';
+@use '@material/mdc-circular-progress';`
+    };
+  }
+}
+
+@Component({templateUrl: './examples.html'})
+export class Examples {
+  onInput(event: MdcSliderChange): void {
+    // this.continuousInputEventValue = event.value;
+  }
+
+  onChange(event: MdcSliderChange): void {
+    // this.continuousChangeEventValue = event.value;
+  }
+}
diff --git a/demos/src/app/components/circular-progress/examples.html b/demos/src/app/components/circular-progress/examples.html
@@ -0,0 +1,32 @@
+<div class="demo-content">
+  <h3 class="demo-content__headline">Large</h3>
+  <div class="demo-container">
+    <mdc-circular-progress size="large">
+    </mdc-circular-progress>
+  </div>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Determinate</h3>
+  <div class="demo-container">
+    <mdc-circular-progress size="large" [determinate]="true" [progress]="sliderForLarge.value">
+    </mdc-circular-progress>
+    <div class="demo-container">
+      <mdc-slider #sliderForLarge [min]="0" [max]="100" value="50" (input)="onInput($event)"
+    (change)="onChange($event)"></mdc-slider>
+    {{sliderForLarge.value}}
+    </div>
+  </div>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Medium</h3>
+  <mdc-circular-progress size="medium">
+  </mdc-circular-progress>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Small</h3>
+  <mdc-circular-progress size="small">
+  </mdc-circular-progress>
+</div>
diff --git a/demos/src/app/components/circular-progress/module.ts b/demos/src/app/components/circular-progress/module.ts
@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+
+import {SharedModule} from '../../shared.module';
+import {RoutingModule, ROUTE_DECLARATIONS} from './routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RoutingModule
+  ],
+  declarations: [ROUTE_DECLARATIONS]
+})
+export class CircularProgressModule {}
diff --git a/demos/src/app/components/circular-progress/routing.module.ts b/demos/src/app/components/circular-progress/routing.module.ts
@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, CircularProgress} from './circular-progress';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  CircularProgress
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: CircularProgress,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}
diff --git a/demos/src/app/components/circular-progress/sass.html b/demos/src/app/components/circular-progress/sass.html
diff --git a/demos/src/app/material.module.ts b/demos/src/app/material.module.ts
@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 
 import {MdcTopAppBarModule} from '@angular-mdc/web/top-app-bar';
+import {MdcCircularProgressModule} from '@angular-mdc/web/circular-progress';
 import {MdcIconModule} from '@angular-mdc/web/icon';
 import {MdcDrawerModule} from '@angular-mdc/web/drawer';
 import {MdcListModule} from '@angular-mdc/web/list';
@@ -31,6 +32,7 @@ const MDC_MODULES = [
   MdcCardModule,
   MdcCheckboxModule,
   MdcChipsModule,
+  MdcCircularProgressModule,
   MDCDataTableModule,
   MdcDialogModule,
   MdcDrawerModule,

diff --git a/demos/src/styles/_mdc.scss b/demos/src/styles/_mdc.scss
@@ -4,6 +4,7 @@
 @use '@material/button/mdc-button';
 @use '@material/drawer/mdc-drawer';
 @use '@material/list/mdc-list';
+@use '@material/circular-progress/mdc-circular-progress';
 @use '@material/elevation/mdc-elevation';
 @use '@material/icon-button/mdc-icon-button';
 @use '@material/top-app-bar/mdc-top-app-bar';

diff --git a/packages/circular-progress/BUILD.bazel b/packages/circular-progress/BUILD.bazel
@@ -0,0 +1,24 @@
+load(
+    "//tools:defaults.bzl",
+    "ng_module",
+)
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "circular-progress",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = glob(["**/*.html"]),
+    module_name = "@angular-mdc/web/circular-progress",
+    deps = [
+        "//packages/base",
+        "@npm//@angular/cdk",
+        "@npm//@material/circular-progress",
+        "@npm//@material/progress-indicator",
+    ],
+)
diff --git a/packages/circular-progress/circular-progress-large.html b/packages/circular-progress/circular-progress-large.html
@@ -0,0 +1,22 @@
+<div class="mdc-circular-progress__determinate-container" *ngIf="determinate">
+  <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097"/>
+  </svg>
+</div>
+<div class="mdc-circular-progress__indeterminate-container" *ngIf="!determinate">
+  <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 48 48" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
+      </svg>
+    </div><div class="mdc-circular-progress__gap-patch">
+      <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
+      </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 48 48" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
+      </svg>
+    </div>
+  </div>
+</div>
diff --git a/packages/circular-progress/circular-progress-medium.html b/packages/circular-progress/circular-progress-medium.html
@@ -0,0 +1,22 @@
+<div class="mdc-circular-progress__determinate-container" *ngIf="determinate">
+  <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <circle class="mdc-circular-progress__determinate-circle" cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="78.54"/>
+  </svg>
+</div>
+<div class="mdc-circular-progress__indeterminate-container" *ngIf="!determinate">
+  <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 32 32" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
+      </svg>
+    </div><div class="mdc-circular-progress__gap-patch">
+      <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
+      </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 32 32" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
+      </svg>
+    </div>
+  </div>
+</div>
diff --git a/packages/circular-progress/circular-progress-small.html b/packages/circular-progress/circular-progress-small.html
@@ -0,0 +1,22 @@
+<div class="mdc-circular-progress__determinate-container" *ngIf="determinate">
+  <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <circle class="mdc-circular-progress__determinate-circle" cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="54.978"/>
+  </svg>
+</div>
+<div class="mdc-circular-progress__indeterminate-container" *ngIf="!determinate">
+  <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 24 24" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
+      </svg>
+    </div><div class="mdc-circular-progress__gap-patch">
+      <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
+      </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 24 24" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
+      </svg>
+    </div>
+  </div>
+</div>
diff --git a/packages/circular-progress/circular-progress.html b/packages/circular-progress/circular-progress.html
@@ -0,0 +1,4 @@
+<ng-content></ng-content>
+<mdc-circular-progress-large *ngIf="size == 'large'" [determinate]="determinate"></mdc-circular-progress-large>
+<mdc-circular-progress-medium *ngIf="size == 'medium'"></mdc-circular-progress-medium>
+<mdc-circular-progress-small *ngIf="size == 'small'"></mdc-circular-progress-small>