4.4. Add MDC-based component to universal-app

Adds a couple examples of the MDC-based MatCheckbox to the universal
app.

Author: mmalerba

src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html

@@ -1 +1,7 @@
-[MDC-based components go here]
+<h2>MDC checkbox</h2>
+
+<mat-checkbox></mat-checkbox>
+<mat-checkbox checked></mat-checkbox>
+<mat-checkbox checked disabled></mat-checkbox>
+<mat-checkbox indeterminate></mat-checkbox>
+<mat-checkbox>with a label</mat-checkbox>

src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts

@@ -1,4 +1,5 @@
 import {Component, NgModule} from '@angular/core';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
 
 @Component({
   selector: 'kitchen-sink-mdc',
@@ -8,6 +9,9 @@ export class KitchenSinkMdc {
 }
 
 @NgModule({
+  imports: [
+    MatCheckboxModule,
+  ],
   declarations: [KitchenSinkMdc],
   exports: [KitchenSinkMdc],
 })

src/universal-app/theme.scss

@@ -1,11 +1,14 @@
 @import '../lib/core/theming/all-theme';
+@import '../material-experimental/mdc-checkbox/mdc-checkbox';
+@import '../material-experimental/mdc-helpers/mdc-helpers';
 
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
+@include mat-checkbox-typography-mdc(mat-typography-config());
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
@@ -14,3 +17,4 @@ $candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
+@include mat-checkbox-theme-mdc($candy-app-theme);