Skip to content

Commit 1cf98a7

Browse files
mmalerbammalerba
committed
switch example based e2e demos to load examples via @angular/elements
1 parent 748369b commit 1cf98a7

20 files changed

+408
-19
lines changed

‎packages.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ ANGULAR_LIBRARY_UMDS = [
123123
"@npm//node_modules/@angular/compiler:bundles/compiler.umd.js",
124124
"@npm//node_modules/@angular/core:bundles/core-testing.umd.js",
125125
"@npm//node_modules/@angular/core:bundles/core.umd.js",
126+
"@npm//node_modules/@angular/elements:bundles/elements.umd.js",
126127
"@npm//node_modules/@angular/forms:bundles/forms.umd.js",
127128
"@npm//node_modules/@angular/platform-browser-dynamic:bundles/platform-browser-dynamic-testing.umd.js",
128129
"@npm//node_modules/@angular/platform-browser-dynamic:bundles/platform-browser-dynamic.umd.js",

‎src/e2e-app/BUILD.bazel

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ ng_module(
1010
assets = glob(["**/*.html", "**/*.css"], exclude = ["index.html"]),
1111
deps = [
1212
"@npm//@angular/core",
13+
"@npm//@angular/elements",
1314
"@npm//@angular/forms",
1415
"@npm//@angular/platform-browser",
1516
"@npm//@angular/router",
1617
"@npm//@angular/animations",
18+
"@npm//@webcomponents/custom-elements",
1719
"//src/cdk/drag-drop",
1820
"//src/cdk/overlay",
1921
"//src/cdk/scrolling",
@@ -43,6 +45,7 @@ ts_devserver(
4345
"@npm//zone.js",
4446
"@npm//core-js",
4547
"@npm//hammerjs",
48+
"@npm//@webcomponents/custom-elements",
4649
"//src/lib/prebuilt-themes:indigo-pink",
4750
":index.html",
4851
],

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
11+
import {ButtonToggleE2e} from './button-toggle-e2e';
12+
13+
@NgModule({
14+
imports: [
15+
ExampleViewerModule,
16+
],
17+
declarations: [ButtonToggleE2e],
18+
})
19+
export class ButtonToggleE2eModule {
20+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'button-toggle-demo',
14+
template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
15+
})
16+
export class ButtonToggleE2e {
17+
examples = ['button-toggle-overview'];
18+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
11+
import {CardE2e} from './card-e2e';
12+
13+
@NgModule({
14+
imports: [
15+
ExampleViewerModule,
16+
],
17+
declarations: [CardE2e],
18+
})
19+
export class CardE2eModule {
20+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'card-demo',
14+
template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
15+
})
16+
export class CardE2e {
17+
examples = ['card-fancy'];
18+
}

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

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,48 @@
1-
import {
2-
ButtonToggleOverviewExample,
3-
CardFancyExample,
4-
ExpansionOverviewExample,
5-
ListOverviewExample,
6-
StepperOverviewExample,
7-
ToolbarMultirowExample
8-
} from '@angular/material-examples';
91
import {Routes} from '@angular/router';
102
import {BlockScrollStrategyE2E} from '../block-scroll-strategy/block-scroll-strategy-e2e';
3+
import {ButtonToggleE2e} from '../button-toggle/button-toggle-e2e';
114
import {ButtonE2E} from '../button/button-e2e';
5+
import {CardE2e} from '../card/card-e2e';
126
import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
137
import {DialogE2E} from '../dialog/dialog-e2e';
8+
import {ExpansionE2e} from '../expansion/expansion-e2e';
149
import {GridListE2E} from '../grid-list/grid-list-e2e';
1510
import {IconE2E} from '../icon/icon-e2e';
1611
import {InputE2E} from '../input/input-e2e';
12+
import {ListE2e} from '../list/list-e2e';
1713
import {MenuE2E} from '../menu/menu-e2e';
1814
import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
1915
import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
2016
import {SimpleRadioButtons} from '../radio/radio-e2e';
2117
import {SidenavE2E} from '../sidenav/sidenav-e2e';
2218
import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
19+
import {StepperE2e} from '../stepper/stepper-e2e';
2320
import {BasicTabs} from '../tabs/tabs-e2e';
21+
import {ToolbarE2e} from '../toolbar/toolbar-e2e';
2422
import {VirtualScrollE2E} from '../virtual-scroll/virtual-scroll-e2e';
2523
import {Home} from './e2e-app-layout';
2624

2725
export const E2E_APP_ROUTES: Routes = [
2826
{path: '', component: Home},
2927
{path: 'block-scroll-strategy', component: BlockScrollStrategyE2E},
3028
{path: 'button', component: ButtonE2E},
31-
{path: 'button-toggle', component: ButtonToggleOverviewExample},
29+
{path: 'button-toggle', component: ButtonToggleE2e},
3230
{path: 'checkbox', component: SimpleCheckboxes},
3331
{path: 'dialog', component: DialogE2E},
34-
{path: 'expansion', component: ExpansionOverviewExample},
32+
{path: 'expansion', component: ExpansionE2e},
3533
{path: 'grid-list', component: GridListE2E},
3634
{path: 'icon', component: IconE2E},
3735
{path: 'input', component: InputE2E},
38-
{path: 'list', component: ListOverviewExample},
36+
{path: 'list', component: ListE2e},
3937
{path: 'menu', component: MenuE2E},
4038
{path: 'progress-bar', component: ProgressBarE2E},
4139
{path: 'progress-spinner', component: ProgressSpinnerE2E},
4240
{path: 'radio', component: SimpleRadioButtons},
4341
{path: 'sidenav', component: SidenavE2E},
4442
{path: 'slide-toggle', component: SlideToggleE2E},
45-
{path: 'stepper', component: StepperOverviewExample},
43+
{path: 'stepper', component: StepperE2e},
4644
{path: 'tabs', component: BasicTabs},
47-
{path: 'cards', component: CardFancyExample},
48-
{path: 'toolbar', component: ToolbarMultirowExample},
45+
{path: 'cards', component: CardE2e},
46+
{path: 'toolbar', component: ToolbarE2e},
4947
{path: 'virtual-scroll', component: VirtualScrollE2E},
5048
];

‎src/e2e-app/example-viewer/example-list-viewer.component.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component, Input} from '@angular/core';
10+
11+
/** Displays a set of material examples in a mat-accordion. */
12+
@Component({
13+
selector: 'example-list-viewer',
14+
template: `
15+
<example-viewer *ngFor="let id of ids" [id]="id"></example-viewer>
16+
`,
17+
styles: [`
18+
mat-expansion-panel {
19+
box-shadow: none !important;
20+
border-radius: 0 !important;
21+
background: transparent;
22+
border-top: 1px solid #CCC;
23+
}
24+
25+
.header {
26+
display: flex;
27+
justify-content: space-between;
28+
width: 100%;
29+
padding-right: 24px;
30+
align-items: center;
31+
}
32+
33+
.id {
34+
font-family: monospace;
35+
color: #666;
36+
font-size: 12px;
37+
}
38+
`]
39+
})
40+
export class ExampleListViewer {
41+
/** IDs of the examples to display. */
42+
@Input() ids: string[];
43+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {CommonModule} from '@angular/common';
10+
import {NgModule} from '@angular/core';
11+
import {ExampleModule as ExampleDataModule} from '@angular/material-examples';
12+
import {ExampleListViewer} from './example-list-viewer.component';
13+
import {ExampleViewer} from './example-viewer';
14+
15+
@NgModule({
16+
imports: [CommonModule, ExampleDataModule],
17+
declarations: [ExampleViewer, ExampleListViewer],
18+
exports: [ExampleViewer, ExampleListViewer]
19+
})
20+
export class ExampleViewerModule {
21+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {coerceBooleanProperty} from '@angular/cdk/coercion';
10+
import {Component, ElementRef, Injector, Input, OnInit} from '@angular/core';
11+
import {createCustomElement} from '@angular/elements';
12+
import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
13+
14+
@Component({
15+
selector: 'example-viewer',
16+
template: `
17+
<div class="label" *ngIf="showLabel">
18+
<span class="title"> {{title}} </span>
19+
<span class="id"> <{{id}}> </span>
20+
</div>
21+
22+
<div *ngIf="!id">
23+
Could not find example {{id}}
24+
</div>
25+
`,
26+
styles: [`
27+
.label {
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: flex-end;
31+
margin: 16px 0;
32+
}
33+
34+
.title {
35+
font-size: 20px;
36+
font-weight: 500;
37+
}
38+
39+
.id {
40+
font-size: 13px;
41+
font-family: monospace;
42+
color: #666;
43+
white-space: pre;
44+
}
45+
`]
46+
})
47+
export class ExampleViewer implements OnInit {
48+
/** ID of the material example to display. */
49+
@Input() id: string;
50+
51+
@Input()
52+
get showLabel(): boolean {
53+
return this._showLabel;
54+
}
55+
set showLabel(v: boolean) {
56+
this._showLabel = coerceBooleanProperty(v);
57+
}
58+
_showLabel: boolean;
59+
60+
title: string;
61+
62+
constructor(private _elementRef: ElementRef<HTMLElement>, private _injector: Injector) {}
63+
64+
ngOnInit() {
65+
let exampleElementCtor = customElements.get(this.id);
66+
67+
if (!exampleElementCtor) {
68+
exampleElementCtor =
69+
createCustomElement(EXAMPLE_COMPONENTS[this.id].component, {injector: this._injector});
70+
71+
customElements.define(this.id, exampleElementCtor);
72+
}
73+
74+
this._elementRef.nativeElement.appendChild(new exampleElementCtor(this._injector));
75+
this.title = EXAMPLE_COMPONENTS[this.id] ? EXAMPLE_COMPONENTS[this.id].title : '';
76+
}
77+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
11+
import {ExpansionE2e} from './expansion-e2e';
12+
13+
@NgModule({
14+
imports: [
15+
ExampleViewerModule,
16+
],
17+
declarations: [ExpansionE2e],
18+
})
19+
export class ExpansionE2eModule {
20+
}

‎src/e2e-app/expansion/expansion-e2e.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'expansion-demo',
14+
template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
15+
})
16+
export class ExpansionE2e {
17+
examples = ['expansion-overview'];
18+
}

‎src/e2e-app/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@
1313

1414
<!-- FontAwesome for mat-icon demo. -->
1515
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
16+
17+
<!-- Angular Elements setup. -->
18+
<script>
19+
if (window.customElements) {
20+
window.customElements.forcePolyfill = true;
21+
}
22+
</script>
23+
<script src="@webcomponents/custom-elements/custom-elements.min.js"></script>
1624
</head>
1725
<body>
1826
<e2e-app>Loading...</e2e-app>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
11+
import {ListE2e} from './list-e2e';
12+
13+
@NgModule({
14+
imports: [
15+
ExampleViewerModule,
16+
],
17+
declarations: [ListE2e],
18+
})
19+
export class ListE2eModule {
20+
}

0 commit comments

Comments
 (0)