feat(cdk-experimental/ui-patterns): create combobox ui pattern

Author: wagnermaciel

src/cdk-experimental/combobox/BUILD.bazel

@@ -11,5 +11,6 @@ ng_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/cdk-experimental/deferred-content",
+        "//src/cdk-experimental/ui-patterns",
     ],
 )

src/cdk-experimental/combobox/combobox.ts

@@ -6,8 +6,19 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {contentChild, Directive, inject} from '@angular/core';
+import {
+  afterRenderEffect,
+  contentChild,
+  Directive,
+  ElementRef,
+  inject,
+  input,
+  model,
+  signal,
+  WritableSignal,
+} from '@angular/core';
 import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
+import {ComboboxPattern, ComboboxPopupControls} from '../ui-patterns';
 
 @Directive({
   selector: '[cdkCombobox]',
@@ -18,25 +29,75 @@ import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/d
       inputs: ['preserveContent'],
     },
   ],
+  host: {
+    '[attr.data-expanded]': 'pattern.expanded()',
+    '(input)': 'pattern.onInput($event)',
+    '(keydown)': 'pattern.onKeydown($event)',
+    '(pointerup)': 'pattern.onPointerup($event)',
+    '(focusin)': 'pattern.onFocusIn()',
+    '(focusout)': 'pattern.onFocusOut($event)',
+  },
 })
-export class CdkCombobox {
+export class CdkCombobox<V> {
+  /** The element that the combobox is attached to. */
+  private readonly _elementRef = inject(ElementRef);
+
   /** The DeferredContentAware host directive. */
   private readonly _deferredContentAware = inject(DeferredContentAware, {optional: true});
 
   /** The combobox popup. */
-  readonly popup = contentChild(CdkComboboxPopup);
+  readonly popup = contentChild<CdkComboboxPopup<V>>(CdkComboboxPopup);
+
+  /** The filter mode for the combobox. */
+  filterMode = input<'manual' | 'auto-select' | 'highlight'>('manual');
+
+  /** Whether the combobox is focused. */
+  readonly isFocused = signal(false);
+
+  /** The values of the current selected items. */
+  value = model<V | undefined>(undefined);
+
+  /** The combobox ui pattern. */
+  readonly pattern = new ComboboxPattern<any, V>({
+    ...this,
+    inputEl: signal(undefined),
+    containerEl: signal(undefined),
+    popupControls: () => this.popup()?.actions(),
+  });
 
   constructor() {
-    this._deferredContentAware?.contentVisible.set(true);
+    (this.pattern.inputs.containerEl as WritableSignal<HTMLElement>).set(
+      this._elementRef.nativeElement,
+    );
+
+    afterRenderEffect(() => {
+      this._deferredContentAware?.contentVisible.set(this.pattern.isFocused());
+    });
   }
 }
 
 @Directive({
   selector: 'input[cdkComboboxInput]',
   exportAs: 'cdkComboboxInput',
-  host: {'role': 'combobox'},
+  host: {
+    'role': 'combobox',
+    '[attr.aria-expanded]': 'combobox.pattern.expanded()',
+    '[attr.aria-activedescendant]': 'combobox.pattern.activedescendant()',
+  },
 })
-export class CdkComboboxInput {}
+export class CdkComboboxInput {
+  /** The element that the combobox is attached to. */
+  private readonly _elementRef = inject(ElementRef);
+
+  /** The combobox that the input belongs to. */
+  readonly combobox = inject(CdkCombobox);
+
+  constructor() {
+    (this.combobox.pattern.inputs.inputEl as WritableSignal<HTMLInputElement>).set(
+      this._elementRef.nativeElement,
+    );
+  }
+}
 
 @Directive({
   selector: 'ng-template[cdkComboboxPopupContent]',
@@ -49,7 +110,10 @@ export class CdkComboboxPopupContent {}
   selector: '[cdkComboboxPopup]',
   exportAs: 'cdkComboboxPopup',
 })
-export class CdkComboboxPopup {
+export class CdkComboboxPopup<V> {
   /** The combobox that the popup belongs to. */
-  readonly combobox = inject(CdkCombobox, {optional: true});
+  readonly combobox = inject<CdkCombobox<V>>(CdkCombobox, {optional: true});
+
+  /** The actions that the combobox can perform on the popup. */
+  readonly actions = signal<ComboboxPopupControls<any, V> | undefined>(undefined);
 }

src/cdk-experimental/listbox/listbox.ts

@@ -44,6 +44,7 @@ import {CdkComboboxPopup} from '../combobox';
   host: {
     'role': 'listbox',
     'class': 'cdk-listbox',
+    '[attr.id]': 'id()',
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.aria-readonly]': 'pattern.readonly()',
     '[attr.aria-disabled]': 'pattern.disabled()',
@@ -57,7 +58,17 @@ import {CdkComboboxPopup} from '../combobox';
   hostDirectives: [{directive: CdkComboboxPopup}],
 })
 export class CdkListbox<V> {
-  private readonly _popup = inject(CdkComboboxPopup, {optional: true});
+  /** A unique identifier for the listbox. */
+  private readonly _generatedId = inject(_IdGenerator).getId('cdk-listbox-');
+
+  // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.
+  /** A unique identifier for the option. */
+  protected id = computed(() => this._generatedId);
+
+  /** A reference to the parent combobox popup, if one exists. */
+  private readonly _popup = inject<CdkComboboxPopup<V>>(CdkComboboxPopup, {
+    optional: true,
+  });
 
   /** A reference to the listbox element. */
   private readonly _elementRef = inject(ElementRef);
@@ -113,13 +124,15 @@ export class CdkListbox<V> {
     activeItem: signal(undefined),
     textDirection: this.textDirection,
     element: () => this._elementRef.nativeElement,
-    isComboboxPopup: () => !!this._popup?.combobox,
+    combobox: () => this._popup?.combobox?.pattern,
   });
 
   /** Whether the listbox has received focus yet. */
   private _hasFocused = signal(false);
 
   constructor() {
+    this._popup?.actions?.set(this.pattern.comboboxActions);
+
     afterRenderEffect(() => {
       if (typeof ngDevMode === 'undefined' || ngDevMode) {
         const violations = this.pattern.validate();
@@ -153,6 +166,7 @@ export class CdkListbox<V> {
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.aria-selected]': 'pattern.selected()',
     '[attr.aria-disabled]': 'pattern.disabled()',
+    '[attr.inert]': 'pattern.inert()',
   },
 })
 export class CdkOption<V> {

src/cdk-experimental/ui-patterns/BUILD.bazel

@@ -12,6 +12,7 @@ ts_project(
         "//:node_modules/@angular/core",
         "//src/cdk-experimental/ui-patterns/accordion",
         "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+        "//src/cdk-experimental/ui-patterns/combobox",
         "//src/cdk-experimental/ui-patterns/listbox",
         "//src/cdk-experimental/ui-patterns/radio-group",
         "//src/cdk-experimental/ui-patterns/tabs",

src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.ts

@@ -22,6 +22,9 @@ export interface ListFocusItem {
 
   /** The index of the item in the list. */
   index: SignalLike<number>;
+
+  /** Whether the item is currently focused. */
+  inert?: SignalLike<true | null>;
 }
 
 /** Represents the required inputs for a collection that contains focusable items. */
@@ -112,6 +115,6 @@ export class ListFocus<T extends ListFocusItem> {
 
   /** Returns true if the given item can be navigated to. */
   isFocusable(item: T): boolean {
-    return !item.disabled() || !this.inputs.skipDisabled();
+    return (!item.disabled() || !this.inputs.skipDisabled()) && !item.inert?.();
   }
 }

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts

@@ -47,7 +47,7 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
   select(item?: ListSelectionItem<V>, opts = {anchor: true}) {
     item = item ?? (this.inputs.focusManager.inputs.activeItem() as ListSelectionItem<V>);
 
-    if (item.disabled() || this.inputs.value().includes(item.value())) {
+    if (!item || item.disabled() || this.inputs.value().includes(item.value())) {
       return;
     }
 

src/cdk-experimental/ui-patterns/behaviors/list/list.ts

@@ -129,6 +129,11 @@ export class List<T extends ListItem<V>, V> {
     this._navigate(opts, () => this.navigationBehavior.goto(item));
   }
 
+  /** Removes focus from the list. */
+  unfocus() {
+    this.inputs.activeItem.set(undefined);
+  }
+
   /** Marks the given index as the potential start of a range selection. */
   anchor(index: number) {
     this._anchorIndex.set(index);
@@ -145,8 +150,8 @@ export class List<T extends ListItem<V>, V> {
   }
 
   /** Selects the currently active item in the list. */
-  select() {
-    this.selectionBehavior.select();
+  select(item?: T) {
+    this.selectionBehavior.select(item);
   }
 
   /** Sets the selection to only the current active item. */

src/cdk-experimental/ui-patterns/combobox/BUILD.bazel

@@ -0,0 +1,34 @@
+load("//tools:defaults.bzl", "ng_web_test_suite", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "combobox",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//:node_modules/@angular/core",
+        "//src/cdk-experimental/ui-patterns/behaviors/event-manager",
+        "//src/cdk-experimental/ui-patterns/behaviors/list",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+    ],
+)
+
+ts_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":combobox",
+        "//:node_modules/@angular/core",
+        "//src/cdk/keycodes",
+        "//src/cdk/testing/private",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)