feat(cdk/listbox): add listbox to cdk (#25380)

* feat(cdk/listbox): add listbox to cdk

* fixup! feat(cdk/listbox): add listbox to cdk

.github/CODEOWNERS

@@ -89,6 +89,7 @@
 /src/cdk/drag-drop/**                                  @crisbeto
 /src/cdk/keycodes/**                                   @andrewseguin
 /src/cdk/layout/**                                     @andrewseguin
+/src/cdk/listbox/**                                    @jelbourn
 /src/cdk/menu/**                                       @mmalerba @crisbeto
 /src/cdk/observers/**                                  @andrewseguin @crisbeto
 /src/cdk/overlay/**                                    @jelbourn @crisbeto
@@ -142,7 +143,6 @@
 /src/cdk-experimental/popover-edit/**                  @andrewseguin
 /src/cdk-experimental/scrolling/**                     @mmalerba
 /src/cdk-experimental/table-scroll-container/**        @andrewseguin
-/src/cdk-experimental/listbox/**                       @jelbourn
 /src/cdk-experimental/selection/**                     @andrewseguin
 
 # Docs examples & guides
@@ -160,8 +160,8 @@
 /src/dev-app/button/**                                 @andrewseguin
 /src/dev-app/card/**                                   @andrewseguin
 /src/dev-app/cdk-dialog/**                             @crisbeto
+/src/dev-app/cdk-listbox/**                            @jelbourn
 /src/dev-app/cdk-experimental-combobox/**              @jelbourn
-/src/dev-app/cdk-experimental-listbox/**               @jelbourn
 /src/dev-app/checkbox/**                               @jelbourn @devversion
 /src/dev-app/chips/**                                  @andrewseguin
 /src/dev-app/clipboard/**                              @andrewseguin

.ng-dev/commit-message.mts

@@ -11,7 +11,6 @@ export const commitMessage: CommitMessageConfig = {
     'multiple', // For when a commit applies to multiple components.
     'cdk-experimental/column-resize',
     'cdk-experimental/combobox',
-    'cdk-experimental/listbox',
     'cdk-experimental/popover-edit',
     'cdk-experimental/scrolling',
     'cdk-experimental/selection',
@@ -26,6 +25,7 @@ export const commitMessage: CommitMessageConfig = {
     'cdk/drag-drop',
     'cdk/keycodes',
     'cdk/layout',
+    'cdk/listbox',
     'cdk/menu',
     'cdk/observers',
     'cdk/overlay',

scripts/approve-api-golden.js

@@ -32,4 +32,5 @@ const apiGoldenTargetName = `//tools/public_api_guard:${packageName}/${suffix}.m
 // ShellJS should exit if any command fails.
 shelljs.set('-e');
 shelljs.cd(projectDir);
+shelljs.touch(path.join(projectDir, `tools/public_api_guard/${packageName}/${suffix}.md`));
 shelljs.exec(`yarn bazel run ${apiGoldenTargetName}`);

src/cdk-experimental/config.bzl

@@ -2,7 +2,6 @@
 CDK_EXPERIMENTAL_ENTRYPOINTS = [
     "column-resize",
     "combobox",
-    "listbox",
     "popover-edit",
     "scrolling",
     "selection",

src/cdk/config.bzl

@@ -10,6 +10,7 @@ CDK_ENTRYPOINTS = [
     "drag-drop",
     "keycodes",
     "layout",
+    "listbox",
     "menu",
     "observers",
     "overlay",

src/cdk-experimental/listbox/BUILD.bazel → src/cdk/listbox/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+load("//tools:defaults.bzl", "markdown_to_html", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -37,3 +37,13 @@ ng_web_test_suite(
     name = "unit_tests",
     deps = [":unit_test_sources"],
 )
+
+markdown_to_html(
+    name = "overview",
+    srcs = [":listbox.md"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

src/cdk-experimental/listbox/listbox.spec.ts → src/cdk/listbox/listbox.spec.ts

@@ -2,7 +2,7 @@ import {fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {Component, Type} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {CdkListbox, CdkListboxModule, CdkOption, ListboxValueChangeEvent} from './index';
-import {dispatchKeyboardEvent, dispatchMouseEvent} from '../../cdk/testing/private';
+import {dispatchKeyboardEvent, dispatchMouseEvent} from '../testing/private';
 import {
   A,
   B,

src/components-examples/cdk-experimental/listbox/BUILD.bazel → src/components-examples/cdk/listbox/BUILD.bazel

@@ -10,7 +10,7 @@ ng_module(
         "**/*.css",
     ]),
     deps = [
-        "//src/cdk-experimental/listbox",
+        "//src/cdk/listbox",
         "@npm//@angular/common",
         "@npm//@angular/forms",
     ],

src/components-examples/cdk-experimental/listbox/index.ts → src/components-examples/cdk/listbox/index.ts

@@ -13,7 +13,7 @@ import {CdkListboxOverviewExample} from './cdk-listbox-overview/cdk-listbox-over
 import {CdkListboxReactiveFormsExample} from './cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example';
 import {CdkListboxTemplateFormsExample} from './cdk-listbox-template-forms/cdk-listbox-template-forms-example';
 import {CdkListboxValueBindingExample} from './cdk-listbox-value-binding/cdk-listbox-value-binding-example';
-import {CdkListboxModule} from '@angular/cdk-experimental/listbox';
+import {CdkListboxModule} from '@angular/cdk/listbox';
 
 export {
   CdkListboxActivedescendantExample,

src/dev-app/BUILD.bazel

@@ -24,7 +24,7 @@ ng_module(
         "//src/dev-app/card",
         "//src/dev-app/cdk-dialog",
         "//src/dev-app/cdk-experimental-combobox",
-        "//src/dev-app/cdk-experimental-listbox",
+        "//src/dev-app/cdk-listbox",
         "//src/dev-app/cdk-menu",
         "//src/dev-app/checkbox",
         "//src/dev-app/chips",

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

@@ -3,12 +3,12 @@ load("//tools:defaults.bzl", "ng_module")
 package(default_visibility = ["//visibility:public"])
 
 ng_module(
-    name = "cdk-experimental-listbox",
+    name = "cdk-listbox",
     srcs = glob(["**/*.ts"]),
     assets = [
         "cdk-listbox-demo.html",
     ],
     deps = [
-        "//src/components-examples/cdk-experimental/listbox",
+        "//src/components-examples/cdk/listbox",
     ],
 )

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

@@ -7,7 +7,7 @@
  */
 
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {CdkListboxExamplesModule} from '@angular/components-examples/cdk-experimental/listbox';
+import {CdkListboxExamplesModule} from '@angular/components-examples/cdk/listbox';
 
 @Component({
   templateUrl: 'cdk-listbox-demo.html',

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

@@ -53,9 +53,9 @@ export class DevAppLayout {
     {name: 'Button', route: '/button'},
     {name: 'Card', route: '/card'},
     {name: 'CDK Dialog', route: '/cdk-dialog'},
+    {name: 'CDK Listbox', route: '/cdk-listbox'},
     {name: 'CDK Menu', route: '/cdk-menu'},
     {name: 'CDK Experimental Combobox', route: '/cdk-experimental-combobox'},
-    {name: 'CDK Experimental Listbox', route: '/cdk-experimental-listbox'},
     {name: 'Checkbox', route: '/checkbox'},
     {name: 'Chips', route: '/chips'},
     {name: 'Clipboard', route: '/clipboard'},

src/dev-app/routes.ts

@@ -50,9 +50,8 @@ export const DEV_APP_ROUTES: Routes = [
     loadComponent: () => import('./cdk-dialog/dialog-demo').then(m => m.DialogDemo),
   },
   {
-    path: 'cdk-experimental-listbox',
-    loadComponent: () =>
-      import('./cdk-experimental-listbox/cdk-listbox-demo').then(m => m.CdkListboxDemo),
+    path: 'cdk-listbox',
+    loadComponent: () => import('./cdk-listbox/cdk-listbox-demo').then(m => m.CdkListboxDemo),
   },
   {
     path: 'cdk-menu',

tools/public_api_guard/cdk/listbox.md

@@ -0,0 +1,139 @@
+## API Report File for "components-srcs"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { AbstractControl } from '@angular/forms';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { AfterContentInit } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { Highlightable } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { ListKeyManagerOption } from '@angular/cdk/a11y';
+import { OnDestroy } from '@angular/core';
+import { QueryList } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Subject } from 'rxjs';
+import { ValidationErrors } from '@angular/forms';
+import { Validator } from '@angular/forms';
+
+// @public (undocumented)
+export class CdkListbox<T = unknown> implements AfterContentInit, OnDestroy, ControlValueAccessor, Validator {
+    constructor();
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    get compareWith(): undefined | ((o1: T, o2: T) => boolean);
+    set compareWith(fn: undefined | ((o1: T, o2: T) => boolean));
+    deselect(option: CdkOption<T>): void;
+    deselectValue(value: T): void;
+    protected readonly destroyed: Subject<void>;
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    protected readonly element: HTMLElement;
+    get enabledTabIndex(): number | null;
+    set enabledTabIndex(value: number | null);
+    focus(): void;
+    protected _getAriaActiveDescendant(): string | null | undefined;
+    protected _getTabIndex(): number | null;
+    protected _handleFocus(): void;
+    protected _handleFocusOut(event: FocusEvent): void;
+    protected _handleKeydown(event: KeyboardEvent): void;
+    get id(): string;
+    set id(value: string);
+    isSelected(option: CdkOption<T>): boolean;
+    isValueSelected(value: T): boolean;
+    protected listKeyManager: ActiveDescendantKeyManager<CdkOption<T>>;
+    get multiple(): boolean;
+    set multiple(value: BooleanInput);
+    get navigateDisabledOptions(): BooleanInput;
+    set navigateDisabledOptions(skip: BooleanInput);
+    get navigationWrapDisabled(): BooleanInput;
+    set navigationWrapDisabled(wrap: BooleanInput);
+    // (undocumented)
+    ngAfterContentInit(): void;
+    // (undocumented)
+    ngOnDestroy(): void;
+    protected options: QueryList<CdkOption<T>>;
+    get orientation(): 'horizontal' | 'vertical';
+    set orientation(value: 'horizontal' | 'vertical');
+    registerOnChange(fn: (value: readonly T[]) => void): void;
+    registerOnTouched(fn: () => {}): void;
+    registerOnValidatorChange(fn: () => void): void;
+    select(option: CdkOption<T>): void;
+    protected selectionModel: ListboxSelectionModel<T>;
+    selectValue(value: T): void;
+    _setActiveOption(option: CdkOption<T>): void;
+    setAllSelected(isSelected: boolean): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(option: CdkOption<T>): void;
+    toggleValue(value: T): void;
+    protected triggerOption(option: CdkOption<T> | null): void;
+    protected triggerRange(trigger: CdkOption<T> | null, from: number, to: number, on: boolean): void;
+    get useActiveDescendant(): boolean;
+    set useActiveDescendant(shouldUseActiveDescendant: BooleanInput);
+    validate(control: AbstractControl<any, any>): ValidationErrors | null;
+    get value(): readonly T[];
+    set value(value: readonly T[]);
+    readonly valueChange: Subject<ListboxValueChangeEvent<T>>;
+    writeValue(value: readonly T[]): void;
+    // (undocumented)
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkListbox<any>, "[cdkListbox]", ["cdkListbox"], { "id": "id"; "enabledTabIndex": "tabindex"; "value": "cdkListboxValue"; "multiple": "cdkListboxMultiple"; "disabled": "cdkListboxDisabled"; "useActiveDescendant": "cdkListboxUseActiveDescendant"; "orientation": "cdkListboxOrientation"; "compareWith": "cdkListboxCompareWith"; "navigationWrapDisabled": "cdkListboxNavigationWrapDisabled"; "navigateDisabledOptions": "cdkListboxNavigatesDisabledOptions"; }, { "valueChange": "cdkListboxValueChange"; }, ["options"], never, false>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkListbox<any>, never>;
+}
+
+// @public (undocumented)
+export class CdkListboxModule {
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkListboxModule, never>;
+    // (undocumented)
+    static ɵinj: i0.ɵɵInjectorDeclaration<CdkListboxModule>;
+    // (undocumented)
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CdkListboxModule, [typeof i1.CdkListbox, typeof i1.CdkOption], never, [typeof i1.CdkListbox, typeof i1.CdkOption]>;
+}
+
+// @public
+export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightable, OnDestroy {
+    readonly _clicked: Subject<MouseEvent>;
+    deselect(): void;
+    protected destroyed: Subject<void>;
+    get disabled(): boolean;
+    set disabled(value: BooleanInput);
+    readonly element: HTMLElement;
+    get enabledTabIndex(): number | null;
+    set enabledTabIndex(value: number | null);
+    focus(): void;
+    getLabel(): string;
+    protected _getTabIndex(): number | null;
+    protected _handleFocus(): void;
+    get id(): string;
+    set id(value: string);
+    isActive(): boolean;
+    isSelected(): boolean;
+    protected readonly listbox: CdkListbox<T>;
+    // (undocumented)
+    ngOnDestroy(): void;
+    select(): void;
+    setActiveStyles(): void;
+    setInactiveStyles(): void;
+    toggle(): void;
+    typeaheadLabel: string;
+    value: T;
+    // (undocumented)
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkOption<any>, "[cdkOption]", ["cdkOption"], { "id": "id"; "value": "cdkOption"; "typeaheadLabel": "cdkOptionTypeaheadLabel"; "disabled": "cdkOptionDisabled"; "enabledTabIndex": "tabindex"; }, {}, never, never, false>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkOption<any>, never>;
+}
+
+// @public
+export interface ListboxValueChangeEvent<T> {
+    readonly listbox: CdkListbox<T>;
+    readonly option: CdkOption<T> | null;
+    readonly value: readonly T[];
+}
+
+// (No @packageDocumentation comment for this package)
+
+```