build: restructure demo-app in favor of bazel

Restructures the demo-app by no longer mixing up the `demo-app` name.

Currently the `demo-app` consists of two parts:

  * The demo-app
  * And the accessibility demos

As you can tell above, this is pretty much confusing because it's
technically just consisting of:

  * Accessibility demos
  * Library demos

This change cleans up the naming and makes sure that the modules are
structured in a best-practice way.

It's odd to have the `DemoAppModule` (*not the root module*) that
includes all library demos as a folder next to the actual demo
components.

This makes it extremely hard to convert the demo-app to Bazel because
we cannot target all `.ts` files through `glob` because it only matches
files inside of the same folder (or Bazel package).

In order to make it easy to run the demo-app with Bazel, and to just
clean it up, the folder structure should be as followed:

```
src/demo-app/
  | a11y-demos/
     | ...
     | BUILD.bazel
  | library-demos/
     | ...
     | BUILD.bazel
  | index.html
  | BUILD.bazel
```

Author: devversion

.github/CODEOWNERS

@@ -96,56 +96,56 @@
 
 # Demo app
 /src/demo-app/*                                    @jelbourn
-/src/demo-app/a11y/**                              @jelbourn
-/src/demo-app/autocomplete/**                      @crisbeto
-/src/demo-app/badge/**                             @jelbourn
-/src/demo-app/baseline/**                          @mmalerba
-/src/demo-app/bottom-sheet/**                      @jelbourn @crisbeto
-/src/demo-app/button-toggle/**                     @jelbourn
-/src/demo-app/button/**                            @jelbourn
-/src/demo-app/card/**                              @jelbourn
-/src/demo-app/checkbox/**                          @jelbourn @devversion
-/src/demo-app/chips/**                             @jelbourn
-/src/demo-app/connected-overlay/**                 @jelbourn @crisbeto
-/src/demo-app/dataset/**                           @andrewseguin
-/src/demo-app/datepicker/**                        @mmalerba
-/src/demo-app/demo-app/**                          @jelbourn
-/src/demo-app/dialog/**                            @jelbourn @crisbeto
-/src/demo-app/drawer/**                            @mmalerba
-/src/demo-app/drag-drop/**                         @crisbeto
-/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
-/src/demo-app/grid-list/**                         @jelbourn
-/src/demo-app/icon/**                              @jelbourn
-/src/demo-app/input/**                             @mmalerba
-/src/demo-app/list/**                              @jelbourn @crisbeto @devversion
-/src/demo-app/live-announcer/**                    @jelbourn
-/src/demo-app/menu/**                              @crisbeto
-/src/demo-app/overlay/**                           @jelbourn @crisbeto
-/src/demo-app/paginator/**                         @andrewseguin
-/src/demo-app/platform/**                          @jelbourn @devversion
-/src/demo-app/portal/**                            @jelbourn
-/src/demo-app/progress-bar/**                      @jelbourn @crisbeto @josephperrott
-/src/demo-app/progress-spinner/**                  @jelbourn @crisbeto @josephperrott
-/src/demo-app/radio/**                             @jelbourn @devversion
-/src/demo-app/ripple/**                            @devversion
-/src/demo-app/screen-type/**                       @josephperrott
-/src/demo-app/select/**                            @crisbeto
-/src/demo-app/sidenav/**                           @mmalerba
-/src/demo-app/slide-toggle/**                      @devversion
-/src/demo-app/slider/**                            @mmalerba
-/src/demo-app/snack-bar/**                         @jelbourn @crisbeto @josephperrott
-/src/demo-app/stepper/**                           @mmalerba
-/src/demo-app/table/**                             @andrewseguin
-/src/demo-app/tabs/**                              @andrewseguin
-/src/demo-app/toolbar/**                           @devversion
-/src/demo-app/tooltip/**                           @andrewseguin
-/src/demo-app/tree/**                              @jelbourn
-/src/demo-app/typography/**                        @crisbeto
-/src/demo-app/virtual-scroll/**                    @mmalerba
+/src/demo-app/a11y-demos/**                        @jelbourn
+/src/demo-app/library-demos/*                      @jelbourn
+/src/demo-app/library-demos/autocomplete/**        @crisbeto
+/src/demo-app/library-demos/badge/**               @jelbourn
+/src/demo-app/library-demos/baseline/**            @mmalerba
+/src/demo-app/library-demos/bottom-sheet/**        @jelbourn @crisbeto
+/src/demo-app/library-demos/button-toggle/**       @jelbourn
+/src/demo-app/library-demos/button/**              @jelbourn
+/src/demo-app/library-demos/card/**                @jelbourn
+/src/demo-app/library-demos/checkbox/**            @jelbourn @devversion
+/src/demo-app/library-demos/chips/**               @jelbourn
+/src/demo-app/library-demos/connected-overlay/**   @jelbourn @crisbeto
+/src/demo-app/library-demos/dataset/**             @andrewseguin
+/src/demo-app/library-demos/datepicker/**          @mmalerba
+/src/demo-app/library-demos/dialog/**              @jelbourn @crisbeto
+/src/demo-app/library-demos/drawer/**              @mmalerba
+/src/demo-app/library-demos/drag-drop/**           @crisbeto
+/src/demo-app/library-demos/example/**             @andrewseguin
+/src/demo-app/library-demos/examples-page/**       @andrewseguin
+/src/demo-app/library-demos/expansion/**           @josephperrott
+/src/demo-app/library-demos/focus-origin/**        @mmalerba
+/src/demo-app/library-demos/gestures/**            @jelbourn
+/src/demo-app/library-demos/grid-list/**           @jelbourn
+/src/demo-app/library-demos/icon/**                @jelbourn
+/src/demo-app/library-demos/input/**               @mmalerba
+/src/demo-app/library-demos/list/**                @jelbourn @crisbeto @devversion
+/src/demo-app/library-demos/menu/**                @crisbeto
+/src/demo-app/library-demos/live-announcer/**      @jelbourn
+/src/demo-app/library-demos/overlay/**             @jelbourn @crisbeto
+/src/demo-app/library-demos/paginator/**           @andrewseguin
+/src/demo-app/library-demos/platform/**            @jelbourn @devversion
+/src/demo-app/library-demos/portal/**              @jelbourn
+/src/demo-app/library-demos/progress-bar/**        @jelbourn @crisbeto @josephperrott
+/src/demo-app/library-demos/progress-spinner/**    @jelbourn @crisbeto @josephperrott
+/src/demo-app/library-demos/radio/**               @jelbourn @devversion
+/src/demo-app/library-demos/ripple/**              @devversion
+/src/demo-app/library-demos/screen-type/**         @josephperrott
+/src/demo-app/library-demos/select/**              @crisbeto
+/src/demo-app/library-demos/sidenav/**             @mmalerba
+/src/demo-app/library-demos/slide-toggle/**        @devversion
+/src/demo-app/library-demos/slider/**              @mmalerba
+/src/demo-app/library-demos/snack-bar/**           @jelbourn @crisbeto @josephperrott
+/src/demo-app/library-demos/stepper/**             @mmalerba
+/src/demo-app/library-demos/table/**               @andrewseguin
+/src/demo-app/library-demos/tabs/**                @andrewseguin
+/src/demo-app/library-demos/toolbar/**             @devversion
+/src/demo-app/library-demos/tooltip/**             @andrewseguin
+/src/demo-app/library-demos/tree/**                @jelbourn
+/src/demo-app/library-demos/typography/**          @crisbeto
+/src/demo-app/library-demos/virtual-scroll/**      @mmalerba
 
 # E2E app
 /e2e/*                                             @jelbourn

src/demo-app/a11y/autocomplete/autocomplete-a11y.scss renamed to src/demo-app/a11y-demos/BUILD.bazel

@@ -11,7 +11,8 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {DemoMaterialModule} from '../demo-material-module';
-import {AccessibilityDemo, AccessibilityHome} from './a11y';
+import {AccessibilityDemoHome, AccessibilityDemoRoot} from './a11y-demo';
+import {ACCESSIBILITY_DEMO_ROUTES} from './a11y-demo-routes';
 import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
@@ -36,7 +37,6 @@ import {MenuAccessibilityDemo} from './menu/menu-a11y';
 import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
-import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
 import {SelectAccessibilityDemo} from './select/select-a11y';
 import {SidenavBasicAccessibilityDemo} from './sidenav/basic-sidenav-a11y';
 import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
@@ -75,8 +75,8 @@ export class AccessibilityRoutingModule {}
     ReactiveFormsModule,
   ],
   declarations: [
-    AccessibilityDemo,
-    AccessibilityHome,
+    AccessibilityDemoHome,
+    AccessibilityDemoRoot,
     AutocompleteAccessibilityDemo,
     ButtonAccessibilityDemo,
     ButtonToggleAccessibilityDemo,

src/demo-app/a11y/a11y-module.ts renamed to src/demo-app/a11y-demos/a11y-demo-module.ts

@@ -17,7 +17,7 @@ import {DialogAccessibilityDemo} from './dialog/dialog-a11y';
 import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
-import {AccessibilityHome} from './a11y';
+import {AccessibilityDemoHome} from './a11y-demo';
 import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
@@ -40,7 +40,7 @@ import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
 import {SidenavMobileAccessibilityDemo} from './sidenav/mobile-sidenav-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
-  {path: '', component: AccessibilityHome},
+  {path: '', component: AccessibilityDemoHome},
   {path: 'autocomplete', component: AutocompleteAccessibilityDemo},
   {path: 'button', component: ButtonAccessibilityDemo},
   {path: 'button-toggle', component: ButtonToggleAccessibilityDemo},

src/demo-app/a11y/routes.ts renamed to src/demo-app/a11y-demos/a11y-demo-routes.ts

@@ -10,21 +10,12 @@ import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 
-
-@Component({
-  moduleId: module.id,
-  selector: 'accessibility-home',
-  template: `<p>Welcome to the accessibility demos for Angular Material!</p>`,
-})
-export class AccessibilityHome {}
-
 @Component({
   moduleId: module.id,
-  selector: 'accessibility-demo',
-  templateUrl: 'a11y.html',
-  styleUrls: ['a11y.css'],
+  templateUrl: 'a11y-demo.html',
+  styleUrls: ['a11y-demo.css'],
 })
-export class AccessibilityDemo implements OnDestroy {
+export class AccessibilityDemoRoot implements OnDestroy {
   currentComponent = '';
 
   fullscreen = false;
@@ -90,3 +81,10 @@ export class AccessibilityDemo implements OnDestroy {
     this._routerSubscription.unsubscribe();
   }
 }
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-home',
+  template: `<p>Welcome to the accessibility demos for Angular Material!</p>`,
+})
+export class AccessibilityDemoHome {}

src/demo-app/a11y/a11y.html renamed to src/demo-app/a11y-demos/a11y-demo.html

@@ -1,45 +1,45 @@
-<section>
-  <h2>Mouse over or tab to trigger a tooltip</h2>
-  <p>Mouse over or focus the button to show and hide the tooltip</p>
-  <button mat-raised-button matTooltip="This is an example of a tooltip">What is this?</button>
-</section>
-
-
-<section>
-  <h2>Click to trigger a tooltip</h2>
-  <button mat-raised-button (click)="tooltip.toggle(); $event.stopPropagation()">Toggle the tooltip</button>
-  <button mat-raised-button matTooltip="This is a tooltip that shows on click" #tooltip="matTooltip">I have a tooltip</button>
-</section>
-
-
-<section>
-  <h2>Different tooltip positions</h2>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears below the trigger"
-    matTooltipPosition="below">Below</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears above the trigger"
-    matTooltipPosition="above">Above</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears to the left of the trigger"
-    matTooltipPosition="left">Left</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears to the right of the trigger"
-    matTooltipPosition="right">Right</button>
-</section>
-
-<section>
-  <h2>Delayed tooltip</h2>
-  <button
-    mat-raised-button
-    matTooltip="This tooltip will show up after a delay"
-    [matTooltipShowDelay]="2000">What is this?</button>
-</section>
+<section>
+  <h2>Mouse over or tab to trigger a tooltip</h2>
+  <p>Mouse over or focus the button to show and hide the tooltip</p>
+  <button mat-raised-button matTooltip="This is an example of a tooltip">What is this?</button>
+</section>
+
+
+<section>
+  <h2>Click to trigger a tooltip</h2>
+  <button mat-raised-button (click)="tooltip.toggle(); $event.stopPropagation()">Toggle the tooltip</button>
+  <button mat-raised-button matTooltip="This is a tooltip that shows on click" #tooltip="matTooltip">I have a tooltip</button>
+</section>
+
+
+<section>
+  <h2>Different tooltip positions</h2>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears below the trigger"
+    matTooltipPosition="below">Below</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears above the trigger"
+    matTooltipPosition="above">Above</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears to the left of the trigger"
+    matTooltipPosition="left">Left</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears to the right of the trigger"
+    matTooltipPosition="right">Right</button>
+</section>
+
+<section>
+  <h2>Delayed tooltip</h2>
+  <button
+    mat-raised-button
+    matTooltip="This tooltip will show up after a delay"
+    [matTooltipShowDelay]="2000">What is this?</button>
+</section>

src/demo-app/a11y/a11y.scss renamed to src/demo-app/a11y-demos/a11y-demo.scss

@@ -6,37 +6,48 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationRef, NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
 import {HttpClientModule} from '@angular/common/http';
-import {RouterModule} from '@angular/router';
+import {Component, NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ALL_ROUTES} from './demo-app/routes';
-import {EntryApp} from './demo-app/demo-app';
-import {DemoModule} from './demo-app/demo-module';
-import {AccessibilityDemoModule} from './a11y/a11y-module';
+import {RouterModule, Routes} from '@angular/router';
+import {AccessibilityDemoRoot} from './a11y-demos/a11y-demo';
+import {AccessibilityDemoModule} from './a11y-demos/a11y-demo-module';
+import {ACCESSIBILITY_DEMO_ROUTES} from './a11y-demos/a11y-demo-routes';
+import {LibraryDemoRoot} from './library-demos/library-demo';
+import {LibraryDemoModule} from './library-demos/library-demo-module';
+import {LIBRARY_DEMO_ROUTES} from './library-demos/library-demo-routes';
 
+export const demoAppRoutes: Routes = [
+  {path: '',  component: LibraryDemoRoot, children: LIBRARY_DEMO_ROUTES},
+  {path: 'accessibility', component: AccessibilityDemoRoot, children: ACCESSIBILITY_DEMO_ROUTES},
+];
+
+/**
+ * The entry app for demo site. Routes under `accessibility` will use
+ * the accessibility demo components, while other demos will use library demo components.
+ */
+@Component({
+  moduleId: module.id,
+  selector: 'demo-app',
+  template: '<router-outlet></router-outlet>',
+})
+export class DemoAppRoot {}
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    DemoModule,
+    LibraryDemoModule,
     AccessibilityDemoModule,
-    RouterModule.forRoot(ALL_ROUTES),
+    RouterModule.forRoot(demoAppRoutes),
   ],
   declarations: [
-    EntryApp,
+    DemoAppRoot,
+  ],
+  bootstrap: [
+    DemoAppRoot
   ],
-  entryComponents: [
-    EntryApp,
-  ]
 })
-export class DemoAppModule {
-  constructor(private _appRef: ApplicationRef) { }
-
-  ngDoBootstrap() {
-    this._appRef.bootstrap(EntryApp);
-  }
-}
+export class DemoAppModule {}