feat(combobox): add to dev-app (#20276)

Combobox dev app

* build: Added required files to listbox directory.

* build: added listbox option directive and renamed listbox directive files.

* build: Added required files to listbox directory.

* build: added listbox option directive and renamed listbox directive files.

* build: Added required files to listbox directory.

* build: added listbox option directive and renamed listbox directive files.

* build: Added required files to listbox directory.

* build: added listbox option directive and renamed listbox directive files.

* feat(dev-app/listbox): added cdk listbox example to the dev-app.

* fix(listbox): removed duplicate dep in dev-app build file.

* fix(listbox): deleted unused files.

* feat(combobox): added all basic features to combobox and combobox panel, and some tests.

* fix(combobox): fixed import path for combobox panel.

* refactor(combobox): changed names and made coerceOpenActionProperty simpler for this PR.

* fix(combobox): updated syntax for casting.

* refactor(combobox): changed casting syntax back.

* fix(combobox): fixed trailing whitespace.

* feat(combobox): added combobox to dev app.

* refactor(combobox): removed commented out import and fixed the name of an input reference in the combobox spec.

* fix(combobox): removed duplicate import.

* nit(combobox): removed console logs.

* refactor(combobox): removed unused panel test file.

* refactor(combobox): used lightweight injection token for grabbing parent panel.

* nit(combobox): formatted build file.

* refactor(combobox): removed unused imports and fixed long line length.

* refactor(combobox): reduced the functions of the panel directive and fixed indent sizes.

Author: nielsr98

.github/CODEOWNERS

@@ -147,6 +147,7 @@
 /src/dev-app/mdc-autocomplete/**                   @crisbeto
 /src/dev-app/button/**                             @jelbourn
 /src/dev-app/card/**                               @jelbourn
+/src/dev-app/cdk-experimental-combobox/**          @jelbourn @nielsr98
 /src/dev-app/cdk-experimental-listbox/**           @jelbourn @nielsr98
 /src/dev-app/cdk-experimental-menu/**              @jelbourn @andy9775
 /src/dev-app/checkbox/**                           @jelbourn @devversion

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

@@ -77,7 +77,7 @@ describe('Combobox', () => {
   template: `
   <button cdkCombobox #toggleCombobox class="example-combobox"
           [cdkComboboxTriggerFor]="panel"
-          [openAction]="'focus'">
+          [openActions]="'focus'">
     No Value
   </button>
 

src/cdk-experimental/combobox/combobox.ts

@@ -58,10 +58,10 @@ export class CdkCombobox<T = unknown> implements OnDestroy, AfterContentInit {
   private _disabled: boolean = false;
 
   @Input()
-  get openAction(): OpenAction[] {
+  get openActions(): OpenAction[] {
     return this._openActions;
   }
-  set openAction(action: OpenAction[]) {
+  set openActions(action: OpenAction[]) {
     this._openActions = this._coerceOpenActionProperty(action);
   }
   private _openActions: OpenAction[] = ['click'];
@@ -143,6 +143,13 @@ export class CdkCombobox<T = unknown> implements OnDestroy, AfterContentInit {
 
     if (valueChanged) {
       this.panelValueChanged.emit(value);
+      this._setTextContent(value);
+    }
+  }
+
+  private _setTextContent(content: T) {
+    if (typeof content === 'string') {
+      this._elementRef.nativeElement.textContent = `${content}`;
     }
   }
 
@@ -189,6 +196,6 @@ export class CdkCombobox<T = unknown> implements OnDestroy, AfterContentInit {
     return actions;
   }
 
-  static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_openActions: OpenActionInput;
+  static ngAcceptInputType_disabled: BooleanInput;
 }

src/dev-app/BUILD.bazel

@@ -23,6 +23,7 @@ ng_module(
         "//src/dev-app/button",
         "//src/dev-app/button-toggle",
         "//src/dev-app/card",
+        "//src/dev-app/cdk-experimental-combobox",
         "//src/dev-app/cdk-experimental-listbox",
         "//src/dev-app/cdk-experimental-menu",
         "//src/dev-app/checkbox",

src/dev-app/cdk-experimental-combobox/BUILD.bazel

@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "cdk-experimental-combobox",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "cdk-combobox-demo.html",
+    ],
+    deps = [
+        "//src/cdk-experimental/combobox",
+        "@npm//@angular/router",
+    ],
+)

src/dev-app/cdk-experimental-combobox/cdk-combobox-demo-module.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {CdkComboboxModule} from '@angular/cdk-experimental/combobox';
+import {CdkComboboxDemo} from './cdk-combobox-demo';
+import {PanelContent} from './panel-content';
+
+@NgModule({
+  imports: [
+    CdkComboboxModule,
+    CommonModule,
+    RouterModule.forChild([{path: '', component: CdkComboboxDemo}]),
+  ],
+  declarations: [CdkComboboxDemo, PanelContent],
+})
+export class CdkComboboxDemoModule {}

src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.html

@@ -0,0 +1,12 @@
+Toggle Combobox!
+<br>
+<button cdkCombobox class="example-combobox" [cdkComboboxTriggerFor]="panel" [openActions]="'toggle'">
+    No Value
+</button>
+
+<ng-template cdkComboboxPanel #panel="cdkComboboxPanel">
+    <div panelContent [parentPanel]="panel">
+        <input #input>
+        <button (click)="panel.closePanel(input.value)">Apply</button>
+    </div>
+</ng-template>

src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.ts

@@ -0,0 +1,15 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  templateUrl: 'cdk-combobox-demo.html',
+})
+export class CdkComboboxDemo {
+}

src/dev-app/cdk-experimental-combobox/panel-content.ts

@@ -0,0 +1,46 @@
+/**
+ * @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 id = 0;
+
+@Directive({
+  selector: '[panelContent]',
+  exportAs: 'panelContent',
+  host: {
+    'role': 'role',
+    '[id]': 'dialogId'
+  }
+})
+export class PanelContent<V> implements OnInit {
+
+  dialogId = `dialog-${id++}`;
+  role = 'dialog';
+
+  @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel;
+
+  constructor(
+    @Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel<V>,
+  ) { }
+
+  ngOnInit() {
+    this.registerWithPanel();
+  }
+
+  registerWithPanel(): void {
+    if (this._parentPanel === null || this._parentPanel === undefined) {
+      this._explicitPanel._registerContent(this.dialogId, this.role as AriaHasPopupValue);
+    } else {
+      this._parentPanel._registerContent(this.dialogId, this.role as AriaHasPopupValue);
+    }
+  }
+}

src/dev-app/dev-app/dev-app-layout.ts

@@ -33,6 +33,7 @@ export class DevAppLayout {
     {name: 'Button Toggle', route: '/button-toggle'},
     {name: 'Button', route: '/button'},
     {name: 'Card', route: '/card'},
+    {name: 'Cdk Experimental Combobox', route: '/cdk-experimental-combobox'},
     {name: 'Cdk Experimental Listbox', route: '/cdk-experimental-listbox'},
     {name: 'Cdk Experimental Menu', route: '/cdk-experimental-menu'},
     {name: 'Checkbox', route: '/checkbox'},

src/dev-app/dev-app/routes.ts

@@ -28,6 +28,10 @@ export const DEV_APP_ROUTES: Routes = [
     loadChildren: 'button-toggle/button-toggle-demo-module#ButtonToggleDemoModule'
   },
   {path: 'card', loadChildren: 'card/card-demo-module#CardDemoModule'},
+  {
+    path: 'cdk-experimental-combobox',
+    loadChildren: 'cdk-experimental-combobox/cdk-combobox-demo-module#CdkComboboxDemoModule'
+  },
   {
     path: 'cdk-experimental-listbox',
     loadChildren: 'cdk-experimental-listbox/cdk-listbox-demo-module#CdkListboxDemoModule'