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

Author: nielsr98

src/cdk-experimental/listbox/listbox.ts

@@ -37,7 +37,8 @@ let nextId = 0;
     '[attr.tabindex]': '_getTabIndex()',
     '[attr.aria-disabled]': '_isInteractionDisabled()',
     '[class.cdk-option-disabled]': '_isInteractionDisabled()',
-    '[class.cdk-option-active]': '_active'
+    '[class.cdk-option-active]': '_active',
+    '[class.cdk-option-selected]': '_selected'
   }
 })
 export class CdkOption implements ListKeyManagerOption, Highlightable {
@@ -171,6 +172,7 @@ export class CdkOption implements ListKeyManagerOption, Highlightable {
     host: {
       'role': 'listbox',
       '(keydown)': '_keydown($event)',
+      '[attr.tabindex]': 'tabIndex',
       '[attr.aria-disabled]': '_disabled',
       '[attr.aria-multiselectable]': '_multiple',
       '[attr.aria-activedescendant]': '_getAriaActiveDescendant()'
@@ -180,6 +182,7 @@ export class CdkListbox implements AfterContentInit, OnDestroy, OnInit {
 
   _listKeyManager: ActiveDescendantKeyManager<CdkOption>;
   _selectionModel: SelectionModel<CdkOption>;
+  tabIndex = 0;
 
   readonly optionSelectionChanges: Observable<OptionSelectionChangeEvent> = defer(() => {
       const options = this._options;

src/dev-app/BUILD.bazel

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

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

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

src/dev-app/cdk-experimental-listbox/cdk-listbox-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 {CdkListboxModule} from "@angular/cdk-experimental/listbox";
+
+import {CdkListboxDemo} from './cdk-listbox-demo';
+
+@NgModule({
+    imports: [
+        CdkListboxModule,
+        CommonModule,
+        RouterModule.forChild([{path: '', component: CdkListboxDemo}]),
+    ],
+    declarations: [CdkListboxDemo],
+})
+export class CdkListboxDemoModule {}

src/dev-app/cdk-experimental-listbox/cdk-listbox-demo.css

@@ -0,0 +1,15 @@
+.example-listbox {
+  list-style-type: none;
+  border: 1px solid black;
+  width: fit-content;
+  cursor: default;
+  padding: 0px;
+}
+
+.cdk-option-selected {
+  background: cornflowerblue;
+}
+
+.cdk-option-active {
+  background: lightgrey;
+}

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

@@ -0,0 +1,10 @@
+<ul cdkListbox class="example-listbox" [multiple]="multiSelectable" [useActiveDescendant]="activeDescendant">
+  <li class="example-option" cdkOption>Apple</li>
+  <li cdkOption>Orange</li>
+  <li cdkOption>Grapefruit</li>
+  <li cdkOption>Peach</li>
+</ul>
+
+<button (click)="toggleMultiple()">Toggle Multiple</button>
+<br>
+<button (click)="toggleActiveDescendant()">Toggle Active Descendant</button>

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

@@ -0,0 +1,26 @@
+/**
+ * @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-listbox-demo.html',
+    styleUrls: ['cdk-listbox-demo.css'],
+})
+export class CdkListboxDemo {
+    multiSelectable = false;
+    activeDescendant = true;
+
+    toggleMultiple() {
+        this.multiSelectable = !this.multiSelectable;
+    }
+
+    toggleActiveDescendant() {
+        this.activeDescendant = !this.activeDescendant;
+    }
+}

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

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

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-listbox',
+    loadChildren: 'cdk-experimental-listbox/cdk-listbox-demo-module#CdkListboxDemoModule'
+  },
   {
     path: 'cdk-experimental-menu',
     loadChildren: 'cdk-experimental-menu/cdk-menu-demo-module#CdkMenuDemoModule'