diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 10b18e36c49..d852391902f 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/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'}, diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts index b44018c93f2..ca90e26d7a2 100644 --- a/src/demo-app/demo-app/demo-module.ts +++ b/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 { diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index 15d9e8e218a..3835b22c3e4 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/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}, diff --git a/src/demo-app/overlay/overlay-demo.html b/src/demo-app/overlay/overlay-demo.html deleted file mode 100644 index 7d3e84682ce..00000000000 --- a/src/demo-app/overlay/overlay-demo.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - -
- This is the menu panel. -
-
- - - -

Fusilli

-
- - - - - - - - diff --git a/src/demo-app/overlay/overlay-demo.scss b/src/demo-app/overlay/overlay-demo.scss deleted file mode 100644 index ab921484939..00000000000 --- a/src/demo-app/overlay/overlay-demo.scss +++ /dev/null @@ -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; -} diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts deleted file mode 100644 index ddc348c05f1..00000000000 --- a/src/demo-app/overlay/overlay-demo.ts +++ /dev/null @@ -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>; - @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: '

Rotini {{value}}

', -}) -export class RotiniPanel { - value: number = 9000; -} - -/** Simple component to load into an overlay */ -@Component({ - selector: 'spaghetti-panel', - template: '
Spagetti {{value}}
', -}) -export class SpaghettiPanel { - value: string = 'Omega'; -} - -/** Simple component to load into an overlay */ -@Component({ - selector: 'keyboard-panel', - template: '
Last Keydown: {{ lastKeydown }}
', -}) -export class KeyboardTrackingPanel { - lastKeydown = ''; -}