feat(combobox): added combobox popup directive to handle registering panel content with panel.

Author: nielsr98

src/cdk-experimental/combobox/combobox-module.ts

@@ -10,8 +10,9 @@ import {NgModule} from '@angular/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {CdkCombobox} from './combobox';
 import {CdkComboboxPanel} from './combobox-panel';
+import {CdkComboboxPopup} from "./combobox-popup";
 
-const EXPORTED_DECLARATIONS = [CdkCombobox, CdkComboboxPanel];
+const EXPORTED_DECLARATIONS = [CdkCombobox, CdkComboboxPanel, CdkComboboxPopup];
 @NgModule({
   imports: [OverlayModule],
   exports: EXPORTED_DECLARATIONS,

src/cdk-experimental/combobox/combobox-popup.ts

@@ -0,0 +1,55 @@
+/**
+ * @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 {Directive, Inject, InjectionToken, Input, OnInit, Optional} from '@angular/core';
+import {AriaHasPopupValue, CdkComboboxPanel} from '@angular/cdk-experimental/combobox';
+
+export const PANEL = new InjectionToken<CdkComboboxPanel>('CdkComboboxPanel');
+
+let nextId = 0;
+
+@Directive({
+  selector: '[cdkComboboxPopup]',
+  exportAs: 'cdkComboboxPopup',
+  host: {
+    'class': 'cdk-combobox-popup',
+    '[attr.role]': 'role',
+    '[id]': 'id',
+    'tabindex': '-1'
+  }
+})
+export class CdkComboboxPopup<T = unknown> implements OnInit {
+  @Input()
+  get role(): AriaHasPopupValue {
+    return this._role;
+  }
+  set role(value: AriaHasPopupValue) {
+    this._role = value;
+  }
+  private _role: AriaHasPopupValue = 'dialog';
+
+  @Input() id = `cdk-combobox-popup-${nextId++}`;
+
+  @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel;
+
+  constructor(
+    @Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel<T>,
+  ) { }
+
+  ngOnInit() {
+    this.registerWithPanel();
+  }
+
+  registerWithPanel(): void {
+    if (this._parentPanel === null || this._parentPanel === undefined) {
+      this._explicitPanel._registerContent(this.id, this._role);
+    } else {
+      this._parentPanel._registerContent(this.id, this._role);
+    }
+  }
+}

src/cdk-experimental/combobox/combobox.ts

@@ -116,7 +116,7 @@ export class CdkCombobox<T = unknown> implements OnDestroy, AfterContentInit {
     const {keyCode} = event;
 
     if (keyCode === DOWN_ARROW && this._openActions.indexOf('downKey') !== -1) {
-      this.toggle();
+      this.open();
     } else if (keyCode === ESCAPE) {
       event.preventDefault();
       this.close();

src/cdk-experimental/combobox/public-api.ts

@@ -9,3 +9,4 @@
 export * from './combobox-module';
 export * from './combobox';
 export * from './combobox-panel';
+export * from './combobox-popup';