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

Author: mmalerba

.github/CODEOWNERS

@@ -77,6 +77,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
@@ -131,7 +132,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
@@ -149,8 +149,8 @@
 /src/dev-app/button/**                             @andrewseguin
 /src/dev-app/card/**                               @andrewseguin
 /src/dev-app/cdk-dialog/**                         @crisbeto
-/src/dev-app/cdk-experimental-combobox/**          @jelbourn
-/src/dev-app/cdk-experimental-listbox/**           @jelbourn
+/src/dev-app/cdk-listbox/**          @jelbourn
+/src/dev-app/cdk-experimental-combobox/**           @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 renamed to 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/index.ts renamed to src/cdk/listbox/index.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/cdk-experimental/listbox/listbox-module.ts renamed to src/cdk/listbox/listbox-module.ts

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

src/cdk-experimental/listbox/listbox.md renamed to src/cdk/listbox/listbox.md

@@ -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/cdk-experimental/listbox/listbox.spec.ts renamed to src/cdk/listbox/listbox.spec.ts

@@ -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/cdk-experimental/listbox/listbox.ts renamed to src/cdk/listbox/listbox.ts

@@ -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/cdk-experimental/listbox/public-api.ts renamed to src/cdk/listbox/public-api.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/components-examples/cdk-experimental/listbox/BUILD.bazel renamed to src/components-examples/cdk/listbox/BUILD.bazel

@@ -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/components-examples/cdk-experimental/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css renamed to src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.css

@@ -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',