refactor: redo combobox and remove view encapsulation

Author: andrewseguin

src/dev-app/aria-docs-examples/aria-docs-examples.html

@@ -58,25 +58,20 @@ <h2>
 
 <h1>Combobox</h1>
 
-<div ngCombobox>
+<div ngCombobox #combobox="ngCombobox">
   <input ngComboboxInput #comboboxInput="ngComboboxInput"
-         (click)="open.set(true)"
-         cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin"/>
+         #inputElement/>
 
   <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayAsPopover]="true"
-      [cdkConnectedOverlayOrigin]="overlayOrigin"
-      [cdkConnectedOverlayOpen]="open()">
-    <ng-template ngComboboxPopupContainer>
+      [cdkConnectedOverlay]="{origin: inputElement, usePopover: true, matchWidth: true}"
+      [cdkConnectedOverlayOpen]="combobox.expanded()">
       <div ngListbox>
         <div ngOption value="apple">
           Apple
         </div>
         <div ngOption value="banana"> Banana </div>
         <div ngOption value="orange"> Orange </div>
       </div>
-    </ng-template>
   </ng-template>
 </div>
 

src/dev-app/aria-docs-examples/aria-docs-examples.ts

@@ -32,7 +32,6 @@ import {Tree, TreeItem, TreeItemGroup} from '@angular/aria/tree';
     AccordionContent,
     Combobox,
     ComboboxInput,
-    ComboboxPopupContainer,
     Listbox,
     Option,
     Grid,

src/dev-app/aria-docs-examples/autocomplete/autocomplete-docs-demo.html

@@ -8,7 +8,6 @@
     <ng-template
       [cdkConnectedOverlay]="{origin: inputElement, usePopover: true, matchWidth: true}"
       [cdkConnectedOverlayOpen]="combobox.expanded()">
-      <ng-template ngComboboxPopupContainer>
       <div [(value)]="currentSelection" ngListbox>
         @for (biomeOption of biomeOptions(); track biomeOption) {
           <div ngOption [value]="biomeOption.id" [label]="biomeOption.name">
@@ -18,6 +17,5 @@
           No matching biomes.
         }
       </div>
-      </ng-template>
     </ng-template>
   </div>

src/dev-app/aria-docs-examples/autocomplete/autocomplete-docs-demo.ts

@@ -29,8 +29,7 @@ const biomes = [
 @Component({
   templateUrl: 'autocomplete-docs-demo.html',
   styleUrl: 'autocomplete-docs-demo.css',
-  imports: [Combobox, ComboboxInput, ComboboxPopupContainer, Listbox, Option, OverlayModule],
-  encapsulation: ViewEncapsulation.None,
+  imports: [Combobox, ComboboxInput, Listbox, Option, OverlayModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDocsDemo {