prototype(checkbox): create prototype checkbox based on MDC Web (#15782)

* 3.1. Add MDC to deps

Adds MDC as a peer dependency and updates various build and test config
files accordingly.

* 3.2. Add the new component skeleton

Adds files for MDC-based MatCheckbox.

* 3.3. Add a demo for the new component

Adds a demo of the MDC-based MatCheckbox at
http://localhost:4200/mdc-checkbox.

* 3.4. Copy in the canonical MDC DOM and add the MDC styles

Adds the MDCCheckbox DOM and styles to the MDC-based MatCheckbox.

* 3.5. Set up the MDC foundation

Adds the MDCCheckboxFoundation and MDCFormFieldFoundation and translates
the lifecycle setup from their respective components
(https://github.com/material-components/material-components-web/blob/master/packages/mdc-checkbox/component.ts
and
https://github.com/material-components/material-components-web/blob/master/packages/mdc-form-field/component.ts)
into our MDC-based MatCheckbox.

* 3.6. Add a custom MDC adapter

Adds an Angular adapter for MDCCheckboxFoundation and MDCFormFieldFoundation

* 3.7. Fill in the missing APIs to match the API of the existing Angular Material component

Fills in the remaining APIs on the MDC-based MatCheckbox.

* 3.8. Copy over the existing demo page to the MDC-based demo

Copies over the demo page for the existing MatCheckbox to the demo page
for the MDC-based MatCheckbox. Also adds an additional demo to both
pages.

* 4.1. Manual inspection and testing

Adds ripple using RippleRenderer which results in a smaller size than
MatRipple or MDCRipple. Also adds support for disabling animations.

* 4.2. Copy over unit tests and update them

Copies over all of the tests from the existing MatCheckbox and fixes
issues that were uncovered by the tests.

* 4.3. Copy over e2e tests if any exist

Adds MDC-based MatCheckbox to the e2e app and copies over the tests for
the existing MatCheckbox.

* 4.4. Add MDC-based component to universal-app

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

* 5.2. Investigate and fix size regressions

Removes usgaes of constants from `MDCRippleFoundation`. It looks like
their use was preventing the class from being tree-shaken. Results after
removing the constants show that the MDC-based implementation is 3kb
smaller:
https://github.com/mmalerba/mdc-size-comparison/blob/ee1b73a181c4a23345251656df23574140a747c0/results/size-summary.txt

* 8. Add user documentation

Adds documentation explaining what this component is and how to
experiment with it in your app.

* 9.2. Address CI failures and reviewer feedback

Fixes unit tests in Edge and approves the new API goldens for checkbox.

Author: mmalerba

.github/CODEOWNERS

@@ -83,7 +83,9 @@
 /src/material-moment-adapter/**                    @mmalerba
 
 # Material experimental package
-/src/material-experimental/**                      @jelbourn
+/src/material-experimental/*                       @jelbourn
+/src/material-experimental/mdc-checkbox/**         @mmalerba
+/src/material-experimental/mdc-helpers/**          @mmalerba
 
 # CDK experimental package
 /src/cdk-experimental/**                           @jelbourn
@@ -126,6 +128,7 @@
 /src/dev-app/input/**                              @mmalerba
 /src/dev-app/list/**                               @jelbourn @crisbeto @devversion
 /src/dev-app/live-announcer/**                     @jelbourn
+/src/dev-app/mdc-checkbox/**                       @mmalerba
 /src/dev-app/menu/**                               @crisbeto
 /src/dev-app/overlay/**                            @jelbourn @crisbeto
 /src/dev-app/paginator/**                          @andrewseguin
@@ -164,6 +167,7 @@
 /e2e/components/icon-e2e.spec.ts                   @jelbourn
 /e2e/components/input-e2e.spec.ts                  @mmalerba
 /e2e/components/list-e2e.spec.ts                   @jelbourn @crisbeto @devversion
+/e2e/components/mdc-checkbox-e2e.spec.ts           @mmalerba
 /e2e/components/menu-e2e.spec.ts                   @crisbeto
 /e2e/components/progress-bar-e2e.spec.ts           @jelbourn @crisbeto @josephperrott
 /e2e/components/progress-spinner-e2e.spec.ts       @jelbourn @crisbeto @josephperrott
@@ -189,6 +193,7 @@
 /src/e2e-app/icon/**                               @jelbourn
 /src/e2e-app/input/**                              @mmalerba
 /src/e2e-app/list/**                               @jelbourn
+/src/e2e-app/mdc-checkbox/**                       @mmalerba
 /src/e2e-app/menu/**                               @crisbeto
 /src/e2e-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
 /src/e2e-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott

build-config.js

@@ -15,6 +15,12 @@ const buildVersion = packageJson.version;
  */
 const angularVersion = packageJson.requiredAngularVersion;
 
+/**
+ * Required MDC Web version for all Angular Material packages. This version will be used
+ * as the peer dependency version for MDC Web in all release packages that require MDC Web.
+ */
+const mdcVersion = packageJson.requiredMDCVersion;
+
 /** License that will be placed inside of all created bundles. */
 const buildLicense = `/**
  * @license
@@ -27,6 +33,7 @@ const buildLicense = `/**
 module.exports = {
   projectVersion: buildVersion,
   angularVersion: angularVersion,
+  mdcVersion: mdcVersion,
   projectDir: __dirname,
   packagesDir: join(__dirname, 'src'),
   outputDir: join(__dirname, 'dist'),

e2e/components/mdc-checkbox-e2e.spec.ts

@@ -0,0 +1,33 @@
+import {browser, by, element, Key} from 'protractor';
+
+describe('MDC checkbox', () => {
+  describe('check behavior', () => {
+    beforeEach(async () => await browser.get('/mdc-checkbox'));
+
+    it('should be checked when clicked, and unchecked when clicked again', async () => {
+      const checkboxEl = element(by.id('test-checkbox'));
+      const inputEl = element(by.css('input[id=test-checkbox-input]'));
+
+      await checkboxEl.click();
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeTruthy('Expect checkbox "checked" property to be true');
+
+      await checkboxEl.click();
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeFalsy('Expect checkbox "checked" property to be false');
+    });
+
+    it('should toggle the checkbox when pressing space', async () => {
+      const inputEl = element(by.css('input[id=test-checkbox-input]'));
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeFalsy('Expect checkbox "checked" property to be false');
+      await inputEl.sendKeys(Key.SPACE);
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeTruthy('Expect checkbox "checked" property to be true');
+    });
+  });
+});

package.json

@@ -30,6 +30,7 @@
   },
   "version": "8.0.0-beta.2",
   "requiredAngularVersion": ">=7.0.0",
+  "requiredMDCVersion": "^1.1.0",
   "dependencies": {
     "@angular/animations": "8.0.0-beta.10",
     "@angular/common": "8.0.0-beta.10",
@@ -40,6 +41,7 @@
     "@angular/platform-browser": "8.0.0-beta.10",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.1",
+    "material-components-web": "^1.1.0",
     "rxjs": "^6.4.0",
     "systemjs": "0.19.43",
     "tsickle": "^0.34.0",

packages.bzl

@@ -82,8 +82,10 @@ MATERIAL_SCSS_LIBS = [
 # all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
 # version for the placeholders.
 ANGULAR_PACKAGE_VERSION = ">=6.0.0-beta.0 <7.0.0"
+MDC_PACKAGE_VERSION = "^1.1.0"
 VERSION_PLACEHOLDER_REPLACEMENTS = {
   "0.0.0-NG": ANGULAR_PACKAGE_VERSION,
+  "0.0.0-MDC": MDC_PACKAGE_VERSION
 }
 
 # Base rollup globals for everything in the repo.

src/dev-app/BUILD.bazel

@@ -25,14 +25,20 @@ ng_module(
     "@npm//@angular/platform-browser-dynamic",
     "@npm//@angular/router",
     "@npm//rxjs",
+    "//src/material-experimental/mdc-checkbox",
     "//src/material-examples:examples",
   ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS
 )
 
 sass_binary(
   name = "theme",
   src = "theme.scss",
+  include_paths = [
+    "external/npm/node_modules",
+  ],
   deps = [
-    "//src/lib/core:all_themes"
+    "//src/lib/core:all_themes",
+    "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    "//src/material-experimental/mdc-checkbox:checkbox_scss_lib",
   ]
 )

src/dev-app/checkbox/checkbox-demo-module.ts

@@ -8,20 +8,38 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {MatCheckboxModule, MatPseudoCheckboxModule} from '@angular/material';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatPseudoCheckboxModule,
+  MatSelectModule
+} from '@angular/material';
 import {RouterModule} from '@angular/router';
-import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo';
+import {
+  AnimationsNoop,
+  CheckboxDemo,
+  ClickActionCheck,
+  ClickActionNoop,
+  MatCheckboxDemoNestedChecklist
+} from './checkbox-demo';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     MatCheckboxModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
     MatPseudoCheckboxModule,
+    ReactiveFormsModule,
     RouterModule.forChild([{path: '', component: CheckboxDemo}]),
   ],
-  declarations: [CheckboxDemo, MatCheckboxDemoNestedChecklist],
+  declarations: [
+    CheckboxDemo, MatCheckboxDemoNestedChecklist, ClickActionCheck, ClickActionNoop, AnimationsNoop
+  ],
 })
 export class CheckboxDemoModule {
 }