chore: clear outdated overlay demo (#11250)

Removes the old `Overlay` demo which isn't necessary anymore, because we've got a dedicated demo with more debugging controls. It also wasn't particularly useful, because we couldn't change anything and we couldn't close most of the overlays.

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

@@ -71,7 +71,6 @@ export class DemoApp {
     {name: 'List', route: '/list'},
     {name: 'Live Announcer', route: '/live-announcer'},
     {name: 'Menu', route: '/menu'},
-    {name: 'Overlay', route: '/overlay'},
     {name: 'Paginator', route: '/paginator'},
     {name: 'Platform', route: '/platform'},
     {name: 'Portal', route: '/portal'},

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

@@ -38,12 +38,6 @@ import {InputDemo} from '../input/input-demo';
 import {ListDemo} from '../list/list-demo';
 import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
 import {MenuDemo} from '../menu/menu-demo';
-import {
-  KeyboardTrackingPanel,
-  OverlayDemo,
-  RotiniPanel,
-  SpaghettiPanel
-} from '../overlay/overlay-demo';
 import {PlatformDemo} from '../platform/platform-demo';
 import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
 import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
@@ -116,12 +110,10 @@ import {MaterialExampleModule} from '../example/example-module';
     IconDemo,
     InputDemo,
     JazzDialog,
-    KeyboardTrackingPanel,
     ListDemo,
     LiveAnnouncerDemo,
     MatCheckboxDemoNestedChecklist,
     MenuDemo,
-    OverlayDemo,
     PaginatorDemo,
     PlatformDemo,
     PortalDemo,
@@ -130,7 +122,6 @@ import {MaterialExampleModule} from '../example/example-module';
     RadioDemo,
     RainyTabContent,
     RippleDemo,
-    RotiniPanel,
     ScienceJoke,
     ScreenTypeDemo,
     SelectDemo,
@@ -138,7 +129,6 @@ import {MaterialExampleModule} from '../example/example-module';
     SlideToggleDemo,
     SliderDemo,
     SnackBarDemo,
-    SpaghettiPanel,
     StepperDemo,
     SunnyTabContent,
     TabsDemo,
@@ -157,10 +147,7 @@ import {MaterialExampleModule} from '../example/example-module';
     ExampleBottomSheet,
     IFrameDialog,
     JazzDialog,
-    KeyboardTrackingPanel,
-    RotiniPanel,
     ScienceJoke,
-    SpaghettiPanel,
   ],
 })
 export class DemoModule {

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

@@ -29,7 +29,6 @@ import {InputDemo} from '../input/input-demo';
 import {ListDemo} from '../list/list-demo';
 import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
 import {MenuDemo} from '../menu/menu-demo';
-import {OverlayDemo} from '../overlay/overlay-demo';
 import {PlatformDemo} from '../platform/platform-demo';
 import {PortalDemo} from '../portal/portal-demo';
 import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
@@ -82,7 +81,6 @@ export const DEMO_APP_ROUTES: Routes = [
     {path: 'list', component: ListDemo},
     {path: 'live-announcer', component: LiveAnnouncerDemo},
     {path: 'menu', component: MenuDemo},
-    {path: 'overlay', component: OverlayDemo},
     {path: 'paginator', component: PaginatorDemo},
     {path: 'platform', component: PlatformDemo},
     {path: 'portal', component: PortalDemo},

src/demo-app/overlay/overlay-demo.html

@@ -1,45 +0,0 @@
-<button (click)="openRotiniPanel()">
-  Pasta 1
-</button>
-
-<button (click)="openFusilliPanel()">
-  Pasta 2
-</button>
-
-<button cdk-overlay-origin (click)="openSpaghettiPanel()">
-  Spagetti Panel
-</button>
-
-<button cdk-overlay-origin #tortelliniOrigin="cdkOverlayOrigin" (click)="openTortelliniPanel()">
-  Pasta 4
-</button>
-
-
-<button cdk-overlay-origin #trigger="cdkOverlayOrigin" (click)="isMenuOpen = !isMenuOpen">
-  Open menu
-</button>
-
-<ng-template
-  cdk-connected-overlay
-  [cdkConnectedOverlayOrigin]="trigger"
-  [cdkConnectedOverlayWidth]="500"
-  cdkConnectedOverlayHasBackdrop
-  [cdkConnectedOverlayOpen]="isMenuOpen"
-  (backdropClick)="isMenuOpen=false">
-  <div style="background-color: mediumpurple" >
-    This is the menu panel.
-  </div>
-</ng-template>
-
-<!-- Template to load into an overlay. -->
-<ng-template cdk-portal>
-  <p class="demo-fusilli"> Fusilli </p>
-</ng-template>
-
-<ng-template cdk-portal #tortelliniTemplate="cdkPortal">
-  <ul class="demo-tortellini"><li *ngFor="let filling of tortelliniFillings">{{filling}}</li></ul>
-</ng-template>
-
-<button (click)="openPanelWithBackdrop()">Backdrop panel</button>
-
-<button (click)="openKeyboardTracking()">Keyboard tracking</button>

src/demo-app/overlay/overlay-demo.scss

@@ -1,37 +0,0 @@
-.demo-rotini {
-  padding: 10px;
-  border: 1px solid black;
-  background-color: skyblue;
-}
-
-.demo-fusilli {
-  padding: 10px;
-  border: 1px solid black;
-  background-color: lightgoldenrodyellow;
-}
-
-.demo-spaghetti {
-  margin: 0;
-  padding: 10px;
-  border: 1px solid black;
-  color: white;
-  background-color: rebeccapurple;
-  opacity: 0.5;
-}
-
-.demo-tortellini {
-  margin: 0;
-  padding: 10px;
-  border: 1px solid black;
-  color: white;
-  background-color: orangered;
-  opacity: 0.5;
-}
-
-.demo-keyboard {
-  margin: 0;
-  padding: 10px;
-  border: 1px solid black;
-  background-color: mediumturquoise;
-  opacity: 0.7;
-}

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

@@ -1,154 +0,0 @@
-/**
- * @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 {CdkOverlayOrigin, Overlay, OverlayConfig} from '@angular/cdk/overlay';
-import {CdkPortal, ComponentPortal, Portal} from '@angular/cdk/portal';
-import {
-  Component,
-  QueryList,
-  ViewChild,
-  ViewChildren,
-  ViewContainerRef
-} from '@angular/core';
-import {filter, tap} from 'rxjs/operators';
-
-
-@Component({
-  moduleId: module.id,
-  selector: 'overlay-demo',
-  templateUrl: 'overlay-demo.html',
-  styleUrls: ['overlay-demo.css'],
-})
-export class OverlayDemo {
-  nextPosition: number = 0;
-  isMenuOpen: boolean = false;
-  tortelliniFillings = ['cheese and spinach', 'mushroom and broccoli'];
-
-  @ViewChildren(CdkPortal) templatePortals: QueryList<Portal<any>>;
-  @ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
-  @ViewChild('tortelliniOrigin') tortelliniOrigin: CdkOverlayOrigin;
-  @ViewChild('tortelliniTemplate') tortelliniTemplate: CdkPortal;
-
-  constructor(public overlay: Overlay, public viewContainerRef: ViewContainerRef) { }
-
-  openRotiniPanel() {
-    const config = new OverlayConfig();
-
-    config.positionStrategy = this.overlay.position()
-        .global()
-        .left(`${this.nextPosition}px`)
-        .top(`${this.nextPosition}px`);
-
-    this.nextPosition += 30;
-
-    const overlayRef = this.overlay.create(config);
-    overlayRef.attach(new ComponentPortal(RotiniPanel, this.viewContainerRef));
-  }
-
-  openFusilliPanel() {
-    const config = new OverlayConfig();
-
-    config.positionStrategy = this.overlay.position()
-        .global()
-        .centerHorizontally()
-        .top(`${this.nextPosition}px`);
-
-    this.nextPosition += 30;
-
-    const overlayRef = this.overlay.create(config);
-    overlayRef.attach(this.templatePortals.first);
-  }
-
-  openSpaghettiPanel() {
-    // TODO(jelbourn): separate overlay demo for connected positioning.
-    const strategy = this.overlay.position()
-        .connectedTo(
-            this._overlayOrigin.elementRef,
-            {originX: 'start', originY: 'bottom'},
-            {overlayX: 'start', overlayY: 'top'} );
-
-    const config = new OverlayConfig({positionStrategy: strategy});
-    const overlayRef = this.overlay.create(config);
-
-    overlayRef.attach(new ComponentPortal(SpaghettiPanel, this.viewContainerRef));
-  }
-
-  openTortelliniPanel() {
-    const strategy = this.overlay.position()
-        .connectedTo(
-            this.tortelliniOrigin.elementRef,
-            {originX: 'start', originY: 'bottom'},
-            {overlayX: 'end', overlayY: 'top'} );
-
-    const config = new OverlayConfig({positionStrategy: strategy});
-    const overlayRef = this.overlay.create(config);
-
-    overlayRef.attach(this.tortelliniTemplate);
-  }
-
-  openPanelWithBackdrop() {
-    const config = new OverlayConfig({
-      hasBackdrop: true,
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      positionStrategy: this.overlay.position().global().centerHorizontally()
-    });
-
-    const overlayRef = this.overlay.create(config);
-    overlayRef.attach(this.templatePortals.first);
-    overlayRef.backdropClick().subscribe(() => overlayRef.detach());
-  }
-
-  openKeyboardTracking() {
-    const config = new OverlayConfig();
-
-    config.positionStrategy = this.overlay.position()
-      .global()
-      .centerHorizontally()
-      .top(`${this.nextPosition}px`);
-
-    this.nextPosition += 30;
-
-    const overlayRef = this.overlay.create(config);
-    const componentRef = overlayRef
-        .attach(new ComponentPortal(KeyboardTrackingPanel, this.viewContainerRef));
-
-    overlayRef.keydownEvents()
-      .pipe(
-        tap(e => componentRef.instance.lastKeydown = e.key),
-        filter(e => e.key === 'Escape')
-      ).subscribe(() => overlayRef.detach());
-  }
-}
-
-/** Simple component to load into an overlay */
-@Component({
-  moduleId: module.id,
-  selector: 'rotini-panel',
-  template: '<p class="demo-rotini">Rotini {{value}}</p>',
-})
-export class RotiniPanel {
-  value: number = 9000;
-}
-
-/** Simple component to load into an overlay */
-@Component({
-  selector: 'spaghetti-panel',
-  template: '<div class="demo-spaghetti">Spagetti {{value}}</div>',
-})
-export class SpaghettiPanel {
-  value: string = 'Omega';
-}
-
-/** Simple component to load into an overlay */
-@Component({
-  selector: 'keyboard-panel',
-  template: '<div class="demo-keyboard">Last Keydown: {{ lastKeydown }}</div>',
-})
-export class KeyboardTrackingPanel {
-  lastKeydown = '';
-}