chore(demo): add examples to demo app (#10743)

* chore(demo): add examples to demo app

* fix polyfill

.github/CODEOWNERS

@@ -109,6 +109,8 @@
 /src/demo-app/demo-app/**                          @jelbourn
 /src/demo-app/dialog/**                            @jelbourn @crisbeto
 /src/demo-app/drawer/**                            @mmalerba
+/src/demo-app/example/**                           @andrewseguin
+/src/demo-app/examples-page/**                     @andrewseguin
 /src/demo-app/expansion/**                         @josephperrott
 /src/demo-app/focus-origin/**                      @mmalerba
 /src/demo-app/gestures/**                          @jelbourn

package.json

@@ -30,8 +30,10 @@
     "@angular/common": "6.0.0-rc.5",
     "@angular/compiler": "6.0.0-rc.5",
     "@angular/core": "6.0.0-rc.5",
+    "@angular/elements": "6.0.0-rc.5",
     "@angular/forms": "6.0.0-rc.5",
     "@angular/platform-browser": "6.0.0-rc.5",
+    "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.4.1",
     "rxjs": "6.0.0-uncanny-rc.7",
     "systemjs": "0.19.43",

src/demo-app/demo-app/demo-app.ts

@@ -48,6 +48,7 @@ export class Home {}
 export class DemoApp {
   dark = false;
   navItems = [
+    {name: 'Examples', route: '/examples'},
     {name: 'Autocomplete', route: '/autocomplete'},
     {name: 'Badge', route: '/badge'},
     {name: 'Bottom sheet', route: '/bottom-sheet'},

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

@@ -9,9 +9,12 @@
 import {LayoutModule} from '@angular/cdk/layout';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
+import {Injector, NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
+import {createCustomElement} from '@angular/elements';
+import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
+
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {BadgeDemo} from '../badge/badge-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
@@ -56,7 +59,7 @@ import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
 import {StepperDemo} from '../stepper/stepper-demo';
 import {TableDemoModule} from '../table/table-demo-module';
 import {
-  Counter, FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo
+  Counter,FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo
 } from '../tabs/tabs-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
@@ -65,9 +68,13 @@ import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
 import {DEMO_APP_ROUTES} from './routes';
 import {PaginatorDemo} from '../paginator/paginator-demo';
+import {ExamplesPage} from '../examples-page/examples-page';
+import {MaterialExampleModule} from '../example/example-module';
 
 @NgModule({
   imports: [
+    MaterialExampleModule,
+    ExampleModule,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
@@ -78,6 +85,7 @@ import {PaginatorDemo} from '../paginator/paginator-demo';
     TreeDemoModule,
   ],
   declarations: [
+    ExamplesPage,
     AutocompleteDemo,
     BadgeDemo,
     BaselineDemo,
@@ -155,4 +163,12 @@ import {PaginatorDemo} from '../paginator/paginator-demo';
     SpaghettiPanel,
   ],
 })
-export class DemoModule {}
+export class DemoModule {
+  constructor(injector: Injector) {
+    // Register examples as custom elements so that they can be inserted into the DOM dynamically
+    Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
+      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
+      customElements.define(key, element);
+    });
+  }
+}

src/demo-app/demo-app/routes.ts

@@ -56,6 +56,7 @@ import {BadgeDemo} from '../badge/badge-demo';
 import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
 import {PaginatorDemo} from '../paginator/paginator-demo';
 
+import {ExamplesPage} from '../examples-page/examples-page';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
@@ -105,6 +106,7 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'stepper', component: StepperDemo},
     {path: 'screen-type', component: ScreenTypeDemo},
     {path: 'connected-overlay', component: ConnectedOverlayDemo},
+    {path: 'examples', component: ExamplesPage}
   ]}
 ];
 

src/demo-app/example/example-list.ts

@@ -0,0 +1,42 @@
+/**
+ * @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';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+
+/** Displays a set of material examples in a mat-accordion. */
+@Component({
+  selector: 'material-example-list',
+  template: `
+    <h2> {{type}} Examples </h2>
+    <mat-accordion>
+      <mat-expansion-panel *ngFor="let id of ids">
+        <mat-expansion-panel-header>
+          {{id}}: {{exampleComponents[id].title}}
+        </mat-expansion-panel-header>
+        <ng-template matExpansionPanelContent>
+          <material-example [id]="id"></material-example>
+        </ng-template>
+      </mat-expansion-panel>
+    </mat-accordion>
+  `,
+  styles: [`
+    h2 {
+      text-transform: capitalize;
+    }
+  `]
+})
+export class ExampleList {
+  /** Type of examples being displayed. */
+  @Input() type: string;
+
+  /** IDs of the examples to display. */
+  @Input() ids: string[];
+
+  exampleComponents = EXAMPLE_COMPONENTS;
+}

src/demo-app/example/example-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 {MatExpansionModule} from '@angular/material';
+import {NgModule} from '@angular/core';
+
+import {ExampleList} from './example-list';
+import {Example} from './example';
+
+@NgModule({
+  imports: [MatExpansionModule, CommonModule],
+  declarations: [Example, ExampleList],
+  exports: [Example, ExampleList]
+})
+export class MaterialExampleModule {}

src/demo-app/example/example.ts

@@ -0,0 +1,25 @@
+/**
+ * @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, Input} from '@angular/core';
+
+@Component({
+  selector: 'material-example',
+  template: '',
+})
+export class Example {
+  /** ID of the material example to display. */
+  @Input() id: string;
+
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    const element = document.createElement(this.id);
+    this.elementRef.nativeElement.appendChild(element);
+  }
+}

src/demo-app/examples-page/examples-page.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';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+
+/** Renders all material examples listed in the generated EXAMPLE_COMPONENTS. */
+@Component({
+  template: `<material-example-list [ids]="examples"></material-example-list>`
+})
+export class ExamplesPage {
+  examples = Object.keys(EXAMPLE_COMPONENTS);
+}

src/demo-app/index.html

@@ -11,6 +11,13 @@
   <link href="theme.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 
+  <script>
+    if (customElements) {
+      customElements.forcePolyfill = true;
+    }
+  </script>
+  <script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
+
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>

src/demo-app/system-config.ts

@@ -27,6 +27,7 @@ System.config({
     '@angular/compiler': 'node:@angular/compiler/bundles/compiler.umd.js',
     '@angular/forms': 'node:@angular/forms/bundles/forms.umd.js',
     '@angular/animations': 'node:@angular/animations/bundles/animations.umd.js',
+    '@angular/elements': 'node:@angular/elements/bundles/elements.umd.js',
     '@angular/router': 'node:@angular/router/bundles/router.umd.js',
     '@angular/animations/browser': 'node:@angular/animations/bundles/animations-browser.umd.js',
     '@angular/platform-browser/animations':
@@ -39,6 +40,7 @@ System.config({
     // TODO(devversion): replace once the index.ts file for the Material package has been added.
     '@angular/material': 'dist/packages/material/public-api.js',
     '@angular/material-experimental': 'dist/packages/material-experimental/index.js',
+    '@angular/material-examples': 'dist/packages/material-examples/index.js',
     '@angular/material-moment-adapter': 'dist/packages/material-moment-adapter/index.js',
     '@angular/cdk': 'dist/packages/cdk/index.js',
     '@angular/cdk-experimental': 'dist/packages/cdk-experimental/index.js',

src/demo-app/tsconfig-build.json

@@ -32,7 +32,8 @@
       "@angular/material-experimental": ["../../dist/packages/material-experimental"],
       "@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"],
       "@angular/cdk-experimental": ["../../dist/packages/cdk-experimental"],
-      "@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"]
+      "@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"],
+      "@angular/material-examples": ["../../dist/packages/material-examples"]
     }
   },
   "files": [

src/material-examples/tsconfig-tests.json

@@ -0,0 +1,22 @@
+// TypeScript config file that extends the default build tsconfig file. This config is used to
+// also compile the unit-test files. Since the code will run inside of the browser, the target is
+// set to ES5. Also the format needs to be CommonJS for Karma.
+{
+  "extends": "./tsconfig-build",
+  "compilerOptions": {
+    "importHelpers": false,
+    "module": "commonjs",
+    "target": "es5",
+    "types": ["jasmine"]
+  },
+  "angularCompilerOptions": {
+    "strictMetadataEmit": false, // Workaround for Angular #22210
+    "skipTemplateCodegen": true,
+    "emitDecoratorMetadata": true,
+    "fullTemplateTypeCheck": true
+  },
+  "include": [
+    "**/*.spec.ts",
+    "index.ts"
+  ]
+}

tools/gulp/tasks/development.ts

@@ -9,7 +9,8 @@ import {
   materialExperimentalPackage,
   cdkExperimentalPackage,
   materialPackage,
-  momentAdapterPackage
+  momentAdapterPackage,
+  examplesPackage,
 } from '../packages';
 
 // These imports don't have any typings provided.
@@ -34,6 +35,7 @@ const appVendors = [
   'web-animations-js',
   'moment',
   'tslib',
+  '@webcomponents',
 ];
 
 /** Glob that matches all required vendors for the demo-app. */
@@ -58,6 +60,7 @@ task(':watch:devapp', () => {
       ['material-experimental:build-no-bundles']);
   watchFiles(join(cdkExperimentalPackage.sourceDir, '**/*'),
       ['cdk-experimental:build-no-bundles']);
+  watchFiles(join(examplesPackage.sourceDir, '**/*'), ['material-examples:build-no-bundles']);
 });
 
 /** Path to the demo-app tsconfig file. */
@@ -81,6 +84,8 @@ task('build:devapp', sequenceTask(
   'cdk-experimental:build-no-bundles',
   'material-experimental:build-no-bundles',
   'material-moment-adapter:build-no-bundles',
+  'build-examples-module', // The examples module needs to be built before building examples package
+  'material-examples:build-no-bundles',
   [':build:devapp:assets', ':build:devapp:scss', ':build:devapp:ts']
 ));
 
@@ -98,6 +103,10 @@ task('stage-deploy:devapp', ['build:devapp'], () => {
       join(outDir, 'dist/packages/cdk-experimental'));
   copyFiles(materialPackage.outputDir, '**/prebuilt/*.+(css|map)',
       join(outDir, 'dist/packages/material'));
+  copyFiles(examplesPackage.outputDir, '**/*.+(js|map)',
+      join(outDir, 'dist/packages/material-examples'));
+  copyFiles(momentAdapterPackage.outputDir, '**/*.+(js|map)',
+      join(outDir, 'dist/packages/material-moment-adapter'));
 });
 
 /**