Add partially complete state to material stepper

PiperOrigin-RevId: 258970316

Author: matgray

angular_components/lib/material_stepper/material_step.dart

@@ -56,6 +56,18 @@ class StepDirective extends TemplatePortal {
   @Input()
   bool complete = false;
 
+  /// Whether the step is partially complete
+  ///
+  /// This will show the step icon with a 3/4 circle
+  bool _partiallyComplete = false;
+  @Input()
+  set partiallyComplete(bool b) {
+    assert(!b || complete == false);
+    _partiallyComplete = b;
+  }
+
+  bool get partiallyComplete => _partiallyComplete;
+
   /// Whether the step can continue.
   ///
   /// This can be used to prevent continuing on from a step until all parts of

angular_components/lib/material_stepper/material_stepper.html

@@ -25,6 +25,7 @@
               [attr.orientation]="orientation"
               [attr.active]="step.active"
               [attr.complete]="step.complete"
+              [class.partially-complete]="step.partiallyComplete"
               [class.can-select]="step.isSelectable">
           {{step.complete ? "" : step.index +1}}
           <span *ngIf="step.complete">

angular_components/lib/material_stepper/material_stepper.scss

@@ -72,6 +72,7 @@ $edit-icon-size: $mat-grid * 2;
 }
 
 .stepper-step-index {
+  background-color: $mat-grey-500;
   border: 2px solid $mat-white;
   border-radius: 100%;
   box-sizing: content-box;
@@ -91,16 +92,21 @@ $edit-icon-size: $mat-grid * 2;
     position: absolute;
   }
 
-  &[active = true] {
+  &[active = true],
+  &[complete = true] {
     background-color: $mat-blue-500;
   }
 
-  &[active = false] {
-    background-color: $mat-grey-500;
-  }
-
-  &[complete = true] {
-    background-color: $mat-blue-500;
+  &.partially-complete {
+    background: $mat-white;
+    height: 0;
+    width: 0;
+    border: $mat-grid solid $mat-blue-500;
+    color: transparent;
+    border-radius: 50%;
+    border-left-color: transparent;
+    box-shadow: 0 0 0 2px $mat-white, 0 0 0 4px $mat-blue-500;
+    margin: $mat-grid-type * 1.5;
   }
 }