From 6a6bc16fc2db5913521280cf850cf06d3d0d6837 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 15 May 2018 03:19:34 +0200
Subject: [PATCH] chore: fix connected overlay demo (#11325)

With 8735aa5ec1fad4f93855d77e435f4b88bcf3c0fe all demos had their style encapsulation enabled, however this ended up breaking the connected overlay demo because it has some styles that are targeting an overlay. These changes fix the styling and simplify the overlay setup.
---
 .../connected-overlay-demo.html               |  8 +++++
 .../connected-overlay-demo.scss               | 11 +------
 .../connected-overlay-demo.ts                 | 32 +++++--------------
 src/demo-app/demo-app/demo-module.ts          |  4 +--
 4 files changed, 18 insertions(+), 37 deletions(-)

diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.html b/src/demo-app/connected-overlay/connected-overlay-demo.html
index 2d008564461..77dd7445d09 100644
--- a/src/demo-app/connected-overlay/connected-overlay-demo.html
+++ b/src/demo-app/connected-overlay/connected-overlay-demo.html
@@ -102,3 +102,11 @@
 </div>
 
 <div style="height: 500px"></div>
+
+<ng-template #overlay>
+  <div class="demo-overlay">
+    <div style="overflow: auto;">
+      <ul><li *ngFor="let item of itemArray; index as i">{{itemText}} {{i}}</li></ul>
+    </div>
+  </div>
+</ng-template>
diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.scss b/src/demo-app/connected-overlay/connected-overlay-demo.scss
index b11cada40e0..0f46359f1cf 100644
--- a/src/demo-app/connected-overlay/connected-overlay-demo.scss
+++ b/src/demo-app/connected-overlay/connected-overlay-demo.scss
@@ -12,7 +12,7 @@
   }
 }
 
-demo-overlay {
+.demo-overlay {
   display: block;
 
   background: lightblue;
@@ -29,12 +29,3 @@ demo-overlay {
   align-items: center;
   padding: 10px;
 }
-
-.cdk-overlay-connected-position-bounding-box.demo-show-box {
-  background: orangered;
-  opacity: 0.2;
-
-  .cdk-overlay-pane {
-    opacity: 1;
-  }
-}
diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.ts b/src/demo-app/connected-overlay/connected-overlay-demo.ts
index d3019cd46e8..a5bfb9c6799 100644
--- a/src/demo-app/connected-overlay/connected-overlay-demo.ts
+++ b/src/demo-app/connected-overlay/connected-overlay-demo.ts
@@ -14,8 +14,8 @@ import {
   OverlayRef,
   VerticalConnectionPos
 } from '@angular/cdk/overlay';
-import {ComponentPortal} from '@angular/cdk/portal';
-import {Component, ViewChild, ViewContainerRef} from '@angular/core';
+import {TemplatePortal} from '@angular/cdk/portal';
+import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
 
 
 @Component({
@@ -26,6 +26,7 @@ import {Component, ViewChild, ViewContainerRef} from '@angular/core';
 })
 export class ConnectedOverlayDemo {
   @ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
+  @ViewChild('overlay') overlayTemplate: TemplateRef<any>;
 
   originX: HorizontalConnectionPos = 'start';
   originY: VerticalConnectionPos = 'bottom';
@@ -37,6 +38,7 @@ export class ConnectedOverlayDemo {
   offsetX = 0;
   offsetY = 0;
   itemCount = 25;
+  itemArray: any[] = [];
   itemText = 'Item with a long name';
   overlayRef: OverlayRef | null;
 
@@ -82,11 +84,8 @@ export class ConnectedOverlayDemo {
       minHeight: 50
     });
 
-    const portal = new ComponentPortal(DemoOverlay, this.viewContainerRef);
-    const componentRef = this.overlayRef.attach(portal);
-
-    componentRef.instance.items = Array(this.itemCount);
-    componentRef.instance.text = this.itemText;
+    this.itemArray = Array(this.itemCount);
+    this.overlayRef.attach(new TemplatePortal(this.overlayTemplate, this.viewContainerRef));
   }
 
   close() {
@@ -98,26 +97,11 @@ export class ConnectedOverlayDemo {
   }
 
   toggleShowBoundingBox() {
-    const box = document.querySelector('.cdk-overlay-connected-position-bounding-box');
+    const box = document.querySelector<HTMLElement>('.cdk-overlay-connected-position-bounding-box');
 
     if (box) {
       this.showBoundingBox = !this.showBoundingBox;
-      box.classList.toggle('demo-show-box');
+      box.style.background = this.showBoundingBox ? 'rgb(255, 69, 0, 0.2)' : '';
     }
   }
 }
-
-
-@Component({
-  selector: 'demo-overlay',
-  template: `
-    <div style="overflow: auto;">
-      <ul><li *ngFor="let item of items; index as i">{{text}} {{i}}</li></ul>
-    </div>`,
-
-})
-export class DemoOverlay {
-  items: number[];
-  text: string;
-}
-
diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts
index ca90e26d7a2..6ad672132e7 100644
--- a/src/demo-app/demo-app/demo-module.ts
+++ b/src/demo-app/demo-app/demo-module.ts
@@ -24,7 +24,7 @@ import {ButtonDemo} from '../button/button-demo';
 import {CardDemo} from '../card/card-demo';
 import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
 import {ChipsDemo} from '../chips/chips-demo';
-import {ConnectedOverlayDemo, DemoOverlay} from '../connected-overlay/connected-overlay-demo';
+import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
 import {CustomHeader, DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DemoMaterialModule} from '../demo-material-module';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
@@ -95,7 +95,6 @@ import {MaterialExampleModule} from '../example/example-module';
     CustomHeader,
     DatepickerDemo,
     DemoApp,
-    DemoOverlay,
     DialogDemo,
     DrawerDemo,
     ExampleBottomSheet,
@@ -143,7 +142,6 @@ import {MaterialExampleModule} from '../example/example-module';
     ContentElementDialog,
     CustomHeader,
     DemoApp,
-    DemoOverlay,
     ExampleBottomSheet,
     IFrameDialog,
     JazzDialog,