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.

.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

@@ -1,112 +0,0 @@
-import {DialogModule} from '@angular/cdk-experimental/dialog';
-import {DragDropModule} from '@angular/cdk/drag-drop';
-import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
-import {ScrollingModule} from '@angular/cdk/scrolling';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {
-  MatButtonModule,
-  MatCheckboxModule,
-  MatDialogModule,
-  MatDividerModule,
-  MatFormFieldModule,
-  MatGridListModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatMenuModule,
-  MatNativeDateModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
-  MatRadioModule,
-  MatSidenavModule,
-  MatSlideToggleModule,
-  MatStepperModule,
-  MatTabsModule,
-} from '@angular/material';
-import {ExampleModule} from '@angular/material-examples';
-import {BrowserModule} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {RouterModule} from '@angular/router';
-import {BlockScrollStrategyE2E} from './block-scroll-strategy/block-scroll-strategy-e2e';
-import {ButtonE2E} from './button/button-e2e';
-import {SimpleCheckboxes} from './checkbox/checkbox-e2e';
-import {DialogE2E, TestDialog} from './dialog/dialog-e2e';
-import {E2EApp, Home} from './e2e-app/e2e-app';
-import {E2E_APP_ROUTES} from './e2e-app/routes';
-import {GridListE2E} from './grid-list/grid-list-e2e';
-import {IconE2E} from './icon/icon-e2e';
-import {InputE2E} from './input/input-e2e';
-import {MenuE2E} from './menu/menu-e2e';
-import {ProgressBarE2E} from './progress-bar/progress-bar-e2e';
-import {ProgressSpinnerE2E} from './progress-spinner/progress-spinner-e2e';
-import {SimpleRadioButtons} from './radio/radio-e2e';
-import {SidenavE2E} from './sidenav/sidenav-e2e';
-import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
-import {BasicTabs} from './tabs/tabs-e2e';
-import {VirtualScrollE2E} from './virtual-scroll/virtual-scroll-e2e';
-
-/**
- * NgModule that contains all Material modules that are required to serve the e2e-app.
- */
-@NgModule({
-  exports: [
-    MatButtonModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatSidenavModule,
-    MatSlideToggleModule,
-    MatStepperModule,
-    MatTabsModule,
-    MatNativeDateModule,
-    ScrollingModule,
-    ExperimentalScrollingModule,
-    DialogModule,
-    DragDropModule,
-  ]
-})
-export class E2eMaterialModule {}
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot(E2E_APP_ROUTES),
-    E2eMaterialModule,
-    NoopAnimationsModule,
-    ExampleModule,
-    ReactiveFormsModule
-  ],
-  declarations: [
-    BasicTabs,
-    ButtonE2E,
-    DialogE2E,
-    E2EApp,
-    GridListE2E,
-    Home,
-    IconE2E,
-    InputE2E,
-    MenuE2E,
-    ProgressBarE2E,
-    ProgressSpinnerE2E,
-    SidenavE2E,
-    SimpleCheckboxes,
-    SimpleRadioButtons,
-    SlideToggleE2E,
-    TestDialog,
-    BlockScrollStrategyE2E,
-    VirtualScrollE2E,
-  ],
-  bootstrap: [E2EApp],
-  entryComponents: [TestDialog]
-})
-export class E2eAppModule { }

src/e2e-app/e2e-app.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/e2e-app-layout.html

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

src/e2e-app/e2e-app/e2e-app-layout.ts

@@ -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;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {GestureConfig, MatListModule} from '@angular/material';
+import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
+import {E2eAppLayout, Home} from './e2e-app-layout';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatListModule,
+    RouterModule,
+  ],
+  declarations: [E2eAppLayout, Home],
+  exports: [E2eAppLayout],
+
+  // We need to pass this in here, because the gesture config currently doesn't for lazy-loaded
+  // modules. See https://github.com/angular/material2/issues/4595#issuecomment-416641018.
+  providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]
+})
+export class E2eAppModule {
+}

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

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

src/e2e-app/e2e-app/routes.ts

@@ -1,50 +1,48 @@
 import {Routes} from '@angular/router';
-import {VirtualScrollE2E} from '../virtual-scroll/virtual-scroll-e2e';
-import {Home} from './e2e-app';
+import {BlockScrollStrategyE2E} from '../block-scroll-strategy/block-scroll-strategy-e2e';
+import {ButtonToggleE2e} from '../button-toggle/button-toggle-e2e';
 import {ButtonE2E} from '../button/button-e2e';
-import {BasicTabs} from '../tabs/tabs-e2e';
-import {IconE2E} from '../icon/icon-e2e';
-import {MenuE2E} from '../menu/menu-e2e';
-import {SimpleRadioButtons} from '../radio/radio-e2e';
+import {CardE2e} from '../card/card-e2e';
 import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
 import {DialogE2E} from '../dialog/dialog-e2e';
+import {ExpansionE2e} from '../expansion/expansion-e2e';
 import {GridListE2E} from '../grid-list/grid-list-e2e';
+import {IconE2E} from '../icon/icon-e2e';
+import {InputE2E} from '../input/input-e2e';
+import {ListE2e} from '../list/list-e2e';
+import {MenuE2E} from '../menu/menu-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
-import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
-import {InputE2E} from '../input/input-e2e';
+import {SimpleRadioButtons} from '../radio/radio-e2e';
 import {SidenavE2E} from '../sidenav/sidenav-e2e';
-import {BlockScrollStrategyE2E} from '../block-scroll-strategy/block-scroll-strategy-e2e';
-import {
-  CardFancyExample,
-  ListOverviewExample,
-  ToolbarMultirowExample,
-  ButtonToggleOverviewExample,
-  ExpansionOverviewExample,
-  StepperOverviewExample
-} from '@angular/material-examples';
+import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
+import {StepperE2e} from '../stepper/stepper-e2e';
+import {BasicTabs} from '../tabs/tabs-e2e';
+import {ToolbarE2e} from '../toolbar/toolbar-e2e';
+import {VirtualScrollE2E} from '../virtual-scroll/virtual-scroll-e2e';
+import {Home} from './e2e-app-layout';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'block-scroll-strategy', component: BlockScrollStrategyE2E},
   {path: 'button', component: ButtonE2E},
-  {path: 'button-toggle', component: ButtonToggleOverviewExample},
+  {path: 'button-toggle', component: ButtonToggleE2e},
   {path: 'checkbox', component: SimpleCheckboxes},
   {path: 'dialog', component: DialogE2E},
-  {path: 'expansion', component: ExpansionOverviewExample},
+  {path: 'expansion', component: ExpansionE2e},
   {path: 'grid-list', component: GridListE2E},
   {path: 'icon', component: IconE2E},
   {path: 'input', component: InputE2E},
-  {path: 'list', component: ListOverviewExample},
+  {path: 'list', component: ListE2e},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},
   {path: 'radio', component: SimpleRadioButtons},
   {path: 'sidenav', component: SidenavE2E},
   {path: 'slide-toggle', component: SlideToggleE2E},
-  {path: 'stepper', component: StepperOverviewExample},
+  {path: 'stepper', component: StepperE2e},
   {path: 'tabs', component: BasicTabs},
-  {path: 'cards', component: CardFancyExample},
-  {path: 'toolbar', component: ToolbarMultirowExample},
+  {path: 'cards', component: CardE2e},
+  {path: 'toolbar', component: ToolbarE2e},
   {path: 'virtual-scroll', component: VirtualScrollE2E},
 ];

src/e2e-app/example-viewer/example-list-viewer.component.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 {Component, Input} from '@angular/core';
+
+/** Loads an example component from `@angular/material-examples`. */
+@Component({
+  selector: 'example-list-viewer',
+  template: `
+    <example-viewer *ngFor="let id of ids" [id]="id"></example-viewer>
+  `,
+})
+export class ExampleListViewer {
+  /** IDs of the examples to display. */
+  @Input() ids: string[];
+}

src/e2e-app/example-viewer/example-viewer-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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ExampleModule as ExampleDataModule} from '@angular/material-examples';
+import {ExampleListViewer} from './example-list-viewer.component';
+import {ExampleViewer} from './example-viewer';
+
+@NgModule({
+  imports: [CommonModule, ExampleDataModule],
+  declarations: [ExampleViewer, ExampleListViewer],
+  exports: [ExampleViewer, ExampleListViewer]
+})
+export class ExampleViewerModule {
+}

src/e2e-app/example-viewer/example-viewer.ts

@@ -0,0 +1,40 @@
+/**
+ * @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, ElementRef, Injector, Input, OnInit} from '@angular/core';
+import {createCustomElement} from '@angular/elements';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+
+/** Loads an example component from `@angular/material-examples` */
+@Component({
+  selector: 'example-viewer',
+  template: `
+    <div *ngIf="!id">
+      Could not find example {{id}}
+    </div>
+  `,
+})
+export class ExampleViewer implements OnInit {
+  /** ID of the material example to display. */
+  @Input() id: string;
+
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _injector: Injector) {}
+
+  ngOnInit() {
+    let exampleElementCtor = customElements.get(this.id);
+
+    if (!exampleElementCtor) {
+      exampleElementCtor =
+          createCustomElement(EXAMPLE_COMPONENTS[this.id].component, {injector: this._injector});
+
+      customElements.define(this.id, exampleElementCtor);
+    }
+
+    this._elementRef.nativeElement.appendChild(new exampleElementCtor(this._injector));
+  }
+}

src/e2e-app/expansion/expansion-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 {ExpansionE2e} from './expansion-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ExpansionE2e],
+})
+export class ExpansionE2eModule {
+}

src/e2e-app/expansion/expansion-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: 'expansion-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ExpansionE2e {
+  examples = ['expansion-overview'];
+}

src/e2e-app/grid-list/grid-list-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 {MatGridListModule} from '@angular/material';
+import {GridListE2E} from './grid-list-e2e';
+
+@NgModule({
+  imports: [MatGridListModule],
+  declarations: [GridListE2E],
+})
+export class GridListE2eModule {
+}

src/e2e-app/icon/icon-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 {MatIconModule} from '@angular/material';
+import {IconE2E} from './icon-e2e';
+
+@NgModule({
+  imports: [MatIconModule],
+  declarations: [IconE2E],
+})
+export class IconE2eModule {
+}

src/e2e-app/index.html

@@ -13,6 +13,14 @@
 
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+
+  <!-- Angular Elements setup. -->
+  <script>
+    if (window.customElements) {
+      window.customElements.forcePolyfill = true;
+    }
+  </script>
+  <script src="@webcomponents/custom-elements/custom-elements.min.js"></script>
 </head>
 <body>
   <e2e-app>Loading...</e2e-app>

src/e2e-app/input/input-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 {MatFormFieldModule, MatInputModule} from '@angular/material';
+import {InputE2E} from './input-e2e';
+
+@NgModule({
+  imports: [MatFormFieldModule, MatInputModule],
+  declarations: [InputE2E],
+})
+export class InputE2eModule {
+}

src/e2e-app/list/list-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 {ListE2e} from './list-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ListE2e],
+})
+export class ListE2eModule {
+}

src/e2e-app/list/list-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: 'list-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ListE2e {
+  examples = ['list-overview'];
+}

src/e2e-app/main-module.ts

@@ -0,0 +1,68 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterModule} from '@angular/router';
+import {
+  BlockScrollStrategyE2eModule
+} from './block-scroll-strategy/block-scroll-strategy-e2e-module';
+import {ButtonToggleE2eModule} from './button-toggle/button-toggle-e2e-module';
+import {ButtonE2eModule} from './button/button-e2e-module';
+import {CardE2eModule} from './card/card-e2e-module';
+import {CheckboxE2eModule} from './checkbox/checkbox-e2e-module';
+import {DialogE2eModule} from './dialog/dialog-e2e-module';
+import {E2eApp} from './e2e-app';
+import {E2eAppModule} from './e2e-app/e2e-app-module';
+import {E2E_APP_ROUTES} from './e2e-app/routes';
+import {ExpansionE2eModule} from './expansion/expansion-e2e-module';
+import {GridListE2eModule} from './grid-list/grid-list-e2e-module';
+import {IconE2eModule} from './icon/icon-e2e-module';
+import {InputE2eModule} from './input/input-e2e-module';
+import {ListE2eModule} from './list/list-e2e-module';
+import {MenuE2eModule} from './menu/menu-e2e-module';
+import {ProgressBarE2eModule} from './progress-bar/progress-bar-e2e-module';
+import {ProgressSpinnerE2eModule} from './progress-spinner/progress-spinner-e2e-module';
+import {RadioE2eModule} from './radio/radio-e2e-module';
+import {SidenavE2eModule} from './sidenav/sidenav-e2e-module';
+import {SlideToggleE2eModule} from './slide-toggle/slide-toggle-e2e-module';
+import {StepperE2eModule} from './stepper/stepper-e2e-module';
+import {TabsE2eModule} from './tabs/tabs-e2e-module';
+import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
+import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    E2eAppModule,
+    NoopAnimationsModule,
+    RouterModule.forRoot(E2E_APP_ROUTES),
+
+    // E2E demos
+    BlockScrollStrategyE2eModule,
+    ButtonE2eModule,
+    ButtonToggleE2eModule,
+    CardE2eModule,
+    CheckboxE2eModule,
+    DialogE2eModule,
+    ExpansionE2eModule,
+    GridListE2eModule,
+    IconE2eModule,
+    InputE2eModule,
+    ListE2eModule,
+    MenuE2eModule,
+    ProgressBarE2eModule,
+    ProgressSpinnerE2eModule,
+    RadioE2eModule,
+    SidenavE2eModule,
+    SlideToggleE2eModule,
+    StepperE2eModule,
+    TabsE2eModule,
+    ToolbarE2eModule,
+    VirtualScrollE2eModule,
+  ],
+  declarations: [
+    E2eApp,
+  ],
+  bootstrap: [E2eApp],
+})
+export class MainModule {
+}

src/e2e-app/main.ts

@@ -1,7 +1,8 @@
-import {platformBrowser} from '@angular/platform-browser';
-import {E2eAppModuleNgFactory} from './e2e-app-module.ngfactory';
 import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {MainModuleNgFactory} from './main-module.ngfactory';
 
 enableProdMode();
 
-platformBrowser().bootstrapModuleFactory(E2eAppModuleNgFactory);
+platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);

src/e2e-app/menu/menu-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 {MatMenuModule} from '@angular/material';
+import {MenuE2E} from './menu-e2e';
+
+@NgModule({
+  imports: [MatMenuModule],
+  declarations: [MenuE2E],
+})
+export class MenuE2eModule {
+}

src/e2e-app/progress-bar/progress-bar-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 {MatProgressBarModule} from '@angular/material';
+import {ProgressBarE2E} from './progress-bar-e2e';
+
+@NgModule({
+  imports: [MatProgressBarModule],
+  declarations: [ProgressBarE2E],
+})
+export class ProgressBarE2eModule {
+}

src/e2e-app/progress-spinner/progress-spinner-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 {MatProgressSpinnerModule} from '@angular/material';
+import {ProgressSpinnerE2E} from './progress-spinner-e2e';
+
+@NgModule({
+  imports: [MatProgressSpinnerModule],
+  declarations: [ProgressSpinnerE2E],
+})
+export class ProgressSpinnerE2eModule {
+}

src/e2e-app/radio/radio-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 {MatRadioModule} from '@angular/material';
+import {SimpleRadioButtons} from './radio-e2e';
+
+@NgModule({
+  imports: [MatRadioModule],
+  declarations: [SimpleRadioButtons],
+})
+export class RadioE2eModule {
+}

src/e2e-app/sidenav/sidenav-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 {MatSidenavModule} from '@angular/material';
+import {SidenavE2E} from './sidenav-e2e';
+
+@NgModule({
+  imports: [MatSidenavModule],
+  declarations: [SidenavE2E],
+})
+export class SidenavE2eModule {
+}

src/e2e-app/slide-toggle/slide-toggle-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 {MatSlideToggleModule} from '@angular/material';
+import {SlideToggleE2E} from './slide-toggle-e2e';
+
+@NgModule({
+  imports: [MatSlideToggleModule],
+  declarations: [SlideToggleE2E],
+})
+export class SlideToggleE2eModule {
+}

src/e2e-app/stepper/stepper-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 {StepperE2e} from './stepper-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [StepperE2e],
+})
+export class StepperE2eModule {
+}

src/e2e-app/stepper/stepper-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: 'stepper-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class StepperE2e {
+  examples = ['stepper-overview'];
+}

src/e2e-app/tabs/tabs-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 {MatFormFieldModule, MatInputModule, MatTabsModule} from '@angular/material';
+import {BasicTabs} from './tabs-e2e';
+
+@NgModule({
+  imports: [MatTabsModule, MatFormFieldModule, MatInputModule],
+  declarations: [BasicTabs],
+})
+export class TabsE2eModule {
+}

src/e2e-app/toolbar/toolbar-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 {ToolbarE2e} from './toolbar-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ToolbarE2e],
+})
+export class ToolbarE2eModule {
+}

src/e2e-app/toolbar/toolbar-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: 'toolbar-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ToolbarE2e {
+  examples = ['toolbar-multirow'];
+}

src/e2e-app/virtual-scroll/virtual-scroll-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 {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {NgModule} from '@angular/core';
+import {VirtualScrollE2E} from './virtual-scroll-e2e';
+
+@NgModule({
+  imports: [ScrollingModule, ExperimentalScrollingModule],
+  declarations: [VirtualScrollE2E],
+})
+export class VirtualScrollE2eModule {
+}