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.

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>

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;
-  }
-}

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;
-}
-

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,