chore(e2e): break up E2eMaterialModules (#15633)

This change brings the e2e app more inline with the dev-app by removing
the "MaterialModules" anti-pattern. This will allow us to add lazy
loading to the e2e app in a future PR.

Author: mmalerba

.github/CODEOWNERS

@@ -176,19 +176,26 @@
 /src/e2e-app/*                                     @jelbourn
 /src/e2e-app/block-scroll-strategy/**              @andrewseguin @crisbeto
 /src/e2e-app/button/**                             @jelbourn
+/src/e2e-app/button-toggle/**                      @jelbourn
+/src/e2e-app/card/**                               @jelbourn
 /src/e2e-app/checkbox/**                           @jelbourn @devversion
 /src/e2e-app/dialog/**                             @jelbourn @crisbeto
 /src/e2e-app/e2e-app/**                            @jelbourn
+/src/e2e-app/example-viewer/**                     @andrewseguin
+/src/e2e-app/expansion/**                          @josephperrott
 /src/e2e-app/grid-list/**                          @jelbourn
 /src/e2e-app/icon/**                               @jelbourn
 /src/e2e-app/input/**                              @mmalerba
+/src/e2e-app/list/**                               @jelbourn
 /src/e2e-app/menu/**                               @crisbeto
 /src/e2e-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
 /src/e2e-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott
 /src/e2e-app/radio/**                              @jelbourn @devversion
 /src/e2e-app/sidenav/**                            @mmalerba
 /src/e2e-app/slide-toggle/**                       @devversion
+/src/e2e-app/stepper/**                            @mmalerba
 /src/e2e-app/tabs/**                               @andrewseguin
+/src/e2e-app/toolbar/**                            @devversion
 /src/e2e-app/virtual-scroll/**                     @mmalerba
 
 # Universal app

packages.bzl

@@ -123,6 +123,7 @@ ANGULAR_LIBRARY_UMDS = [
   "@npm//node_modules/@angular/compiler:bundles/compiler.umd.js",
   "@npm//node_modules/@angular/core:bundles/core-testing.umd.js",
   "@npm//node_modules/@angular/core:bundles/core.umd.js",
+  "@npm//node_modules/@angular/elements:bundles/elements.umd.js",
   "@npm//node_modules/@angular/forms:bundles/forms.umd.js",
   "@npm//node_modules/@angular/platform-browser-dynamic:bundles/platform-browser-dynamic-testing.umd.js",
   "@npm//node_modules/@angular/platform-browser-dynamic:bundles/platform-browser-dynamic.umd.js",

src/e2e-app/BUILD.bazel

@@ -10,10 +10,12 @@ ng_module(
   assets = glob(["**/*.html", "**/*.css"], exclude = ["index.html"]),
   deps = [
     "@npm//@angular/core",
+    "@npm//@angular/elements",
     "@npm//@angular/forms",
     "@npm//@angular/platform-browser",
     "@npm//@angular/router",
     "@npm//@angular/animations",
+    "@npm//@webcomponents/custom-elements",
     "//src/cdk/drag-drop",
     "//src/cdk/overlay",
     "//src/cdk/scrolling",
@@ -43,6 +45,7 @@ ts_devserver(
       "@npm//zone.js",
       "@npm//core-js",
       "@npm//hammerjs",
+      "@npm//@webcomponents/custom-elements",
       "//src/lib/prebuilt-themes:indigo-pink",
       ":index.html",
     ],

src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e-module.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {NgModule} from '@angular/core';
+import {BlockScrollStrategyE2E} from './block-scroll-strategy-e2e';
+
+@NgModule({
+  imports: [ScrollingModule],
+  declarations: [BlockScrollStrategyE2E],
+})
+export class BlockScrollStrategyE2eModule {
+}

src/e2e-app/button-toggle/button-toggle-e2e-module.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {ButtonToggleE2e} from './button-toggle-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ButtonToggleE2e],
+})
+export class ButtonToggleE2eModule {
+}

src/e2e-app/button-toggle/button-toggle-e2e.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'button-toggle-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ButtonToggleE2e {
+  examples = ['button-toggle-overview'];
+}

src/e2e-app/button/button-e2e-module.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatButtonModule, MatIconModule} from '@angular/material';
+import {ButtonE2E} from './button-e2e';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+  ],
+  declarations: [ButtonE2E],
+})
+export class ButtonE2eModule {
+}

src/e2e-app/card/card-e2e-module.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {CardE2e} from './card-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [CardE2e],
+})
+export class CardE2eModule {
+}

src/e2e-app/card/card-e2e.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'card-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class CardE2e {
+  examples = ['card-fancy'];
+}

src/e2e-app/checkbox/checkbox-e2e-module.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatCheckboxModule} from '@angular/material';
+import {SimpleCheckboxes} from './checkbox-e2e';
+
+@NgModule({
+  imports: [MatCheckboxModule],
+  declarations: [SimpleCheckboxes],
+})
+export class CheckboxE2eModule {
+}

src/e2e-app/dialog/dialog-e2e-module.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatDialogModule} from '@angular/material';
+import {DialogE2E, TestDialog} from './dialog-e2e';
+
+@NgModule({
+  imports: [MatDialogModule],
+  declarations: [DialogE2E, TestDialog],
+  entryComponents: [TestDialog]
+})
+export class DialogE2eModule {
+}

src/e2e-app/e2e-app-module.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, ViewEncapsulation} from '@angular/core';
+
+/** Root component for the e2e-app demos. */
+@Component({
+  moduleId: module.id,
+  selector: 'e2e-app',
+  template: '<e2e-app-layout><router-outlet></router-outlet></e2e-app-layout>',
+  encapsulation: ViewEncapsulation.None,
+})
+export class E2eApp {
+}

src/e2e-app/e2e-app.ts

@@ -25,5 +25,5 @@
 </mat-nav-list>
 
 <main>
-  <router-outlet></router-outlet>
+  <ng-content></ng-content>
 </main>

src/e2e-app/e2e-app/e2e-app.html renamed to src/e2e-app/e2e-app/e2e-app-layout.html

@@ -0,0 +1,16 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({selector: 'home', template: `<p>e2e website!</p>`})
+export class Home {
+}
+
+@Component({
+  moduleId: module.id,
+  selector: 'e2e-app-layout',
+  templateUrl: 'e2e-app-layout.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class E2eAppLayout {
+  showLinks: boolean = false;
+}