feat(material-experimental/radio): use MDC DOM structure and styles (#17179)

Author: Nathan Tate

src/dev-app/mdc-radio/mdc-radio-demo.html

@@ -1,2 +1,6 @@
-<!-- TODO: copy in demo template from existing mat-radio demo. -->
-Not yet implemented.
+<h1>Basic Example</h1>
+<section class="demo-section">
+  <mat-radio name="group1">Option 1</mat-radio>
+  <mat-radio name="group1">Option 2</mat-radio>
+  <mat-radio name="group1">Option 3</mat-radio>
+</section>

src/material-experimental/mdc-radio/BUILD.bazel

@@ -28,6 +28,14 @@ sass_library(
 sass_binary(
     name = "radio_scss",
     src = "radio.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
+    ],
 )
 
 ng_e2e_test_library(

src/material-experimental/mdc-radio/radio.html

@@ -1 +1,12 @@
-<!-- TODO: MDC template here. -->
+<div class="mdc-form-field">
+  <div class="mdc-radio">
+    <input class="mdc-radio__native-control" type="radio" [id]="inputId">
+    <div class="mdc-radio__background">
+      <div class="mdc-radio__outer-circle"></div>
+      <div class="mdc-radio__inner-circle"></div>
+    </div>
+  </div>
+  <label [for]="inputId" #label>
+    <ng-content></ng-content>
+  </label>
+</div>

src/material-experimental/mdc-radio/radio.scss

@@ -1 +1,7 @@
-// TODO: MDC core styles here.
+@import '@material/radio/mixins';
+@import '@material/form-field/mixins';
+@import '../mdc-helpers/mdc-helpers';
+
+
+@include mdc-radio-without-ripple($query: $mat-base-styles-query);
+@include mdc-form-field-core-styles($query: $mat-base-styles-query);

src/material-experimental/mdc-radio/radio.ts

@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation, Input} from '@angular/core';
+
+// Increasing integer for generating unique ids for radio components.
+let nextUniqueId = 0;
 
 @Component({
   moduleId: module.id,
@@ -15,11 +18,21 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
   styleUrls: ['radio.css'],
   host: {
     'class': 'mat-mdc-radio',
+    '[attr.id]': 'id',
   },
   exportAs: 'matRadio',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatRadio {
+
+  private _uniqueId: string = `mat-radio-${++nextUniqueId}`;
+
+  /** The unique ID for the radio button. */
+  @Input() id: string = this._uniqueId;
+
+  /** ID of the native input element inside `<mat-radio-button>` */
+  get inputId(): string { return `${this.id || this._uniqueId}-input`; }
+
   // TODO: set up MDC foundation class.
 }