fixup! feat(cdk-experimental/ui-patterns): listbox ui pattern

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -14,11 +14,11 @@ import {
   inject,
   input,
   model,
+  OnDestroy,
   signal,
 } from '@angular/core';
-import {Option} from '../ui-patterns/listbox/option';
-import {ListboxInputs, ListboxPattern} from '../ui-patterns/listbox/listbox';
 import {Directionality} from '@angular/cdk/bidi';
+import {ListboxInputs, ListboxPattern, OptionPattern} from '@angular/cdk-experimental/ui-patterns';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {Subject} from 'rxjs';
 
@@ -40,7 +40,7 @@ import {Subject} from 'rxjs';
     // '(focusin)': '_handleFocusIn()',
   },
 })
-export class CdkListbox implements ListboxInputs {
+export class CdkListbox implements ListboxInputs, OnDestroy {
   /** Whether the list is vertically or horizontally oriented. */
   orientation = input<'vertical' | 'horizontal'>('vertical');
 
@@ -69,31 +69,31 @@ export class CdkListbox implements ListboxInputs {
   activeIndex = model<number>(0);
 
   /** The CdkOptions nested inside of the CdkListbox. */
-  private cdkOptions = contentChildren(CdkOption, {descendants: true});
+  private _cdkOptions = contentChildren(CdkOption, {descendants: true});
 
   /** The Option UIPatterns of the child CdkOptions. */
-  items = computed(() => this.cdkOptions().map(option => option.state));
+  items = computed(() => this._cdkOptions().map(option => option.state));
 
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
-  private dir = inject(Directionality);
+  private _dir = inject(Directionality);
 
   /** A signal wrapper for directionality. */
   directionality = signal<'rtl' | 'ltr'>('rtl');
 
   /** Emits when the list has been destroyed. */
-  private readonly destroyed = new Subject<void>();
+  private readonly _destroyed = new Subject<void>();
 
   /** The Listbox UIPattern. */
   state: ListboxPattern = new ListboxPattern(this);
 
   constructor() {
-    this.dir.change
-      .pipe(startWith(this.dir.value), takeUntil(this.destroyed))
+    this._dir.change
+      .pipe(startWith(this._dir.value), takeUntil(this._destroyed))
       .subscribe(value => this.directionality.set(value));
   }
 
   ngOnDestroy() {
-    this.destroyed.complete();
+    this._destroyed.complete();
   }
 }
 
@@ -122,16 +122,16 @@ export class CdkOption {
   searchTerm = computed(() => this.label() ?? this.element().textContent);
 
   /** A reference to the option element. */
-  private elementRef = inject(ElementRef);
+  private _elementRef = inject(ElementRef);
 
-  element = computed(() => this.elementRef.nativeElement);
+  element = computed(() => this._elementRef.nativeElement);
 
   /** The parent CdkListbox. */
-  private cdkListbox = inject(CdkListbox);
+  private _cdkListbox = inject(CdkListbox);
 
   /** The parent Listbox UIPattern. */
-  listbox = computed(() => this.cdkListbox.state);
+  listbox = computed(() => this._cdkListbox.state);
 
   /** The Option UIPattern. */
-  state: Option = new Option(this);
+  state = new OptionPattern(this);
 }

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

@@ -0,0 +1,19 @@
+load("//tools:defaults.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "ui-patterns",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk-experimental/ui-patterns/behaviors/event-manager",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-focus",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-selection",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-typeahead",
+        "@npm//@angular/core",
+    ],
+)

src/cdk-experimental/ui-patterns/behaviors/event-manager/event-manager.ts

@@ -1,3 +1,11 @@
+/**
+ * @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.dev/license
+ */
+
 /**
  * An event that supports modifier keys.
  */
@@ -38,7 +46,7 @@ export enum ModifierKey {
  * Abstract base class for all event managers.
  */
 export abstract class EventManager<T extends Event> {
-  private submanagers: EventManager<T>[] = [];
+  private _submanagers: EventManager<T>[] = [];
 
   protected configs: EventHandlerConfig<T>[] = [];
   protected beforeFns: ((event: T) => void)[] = [];
@@ -62,7 +70,7 @@ export abstract class EventManager<T extends Event> {
    */
   static compose<T extends Event>(...managers: EventManager<T>[]) {
     const composedManager = new GenericEventManager<T>();
-    composedManager.submanagers = managers;
+    composedManager._submanagers = managers;
     return composedManager;
   }
 
@@ -81,7 +89,7 @@ export abstract class EventManager<T extends Event> {
     for (const fn of this.beforeFns) {
       fn(event);
     }
-    for (const submanager of this.submanagers) {
+    for (const submanager of this._submanagers) {
       await submanager.handle(event);
     }
     for (const config of this.getConfigs(event)) {
@@ -130,7 +138,7 @@ export abstract class EventManager<T extends Event> {
    * Checks whether this event manager is confugred to handle the given event.
    */
   protected isHandled(event: T): boolean {
-    return this.getConfigs(event).length > 0 || this.submanagers.some(sm => sm.isHandled(event));
+    return this.getConfigs(event).length > 0 || this._submanagers.some(sm => sm.isHandled(event));
   }
 }
 

src/cdk-experimental/ui-patterns/behaviors/event-manager/keyboard-event-manager.ts

@@ -1,3 +1,11 @@
+/**
+ * @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.dev/license
+ */
+
 import {Signal} from '@angular/core';
 import {
   EventHandlerConfig,
@@ -75,12 +83,12 @@ export class KeyboardEventManager extends EventManager<KeyboardEvent> {
   }
 
   getConfigs(event: KeyboardEvent) {
-    return this.configs.filter(config => this.checkKey(config, event));
+    return this.configs.filter(config => this._checkKey(config, event));
   }
 
   // TODO: Make modifiers accept a signal as well.
 
-  private checkKey(config: KeyboardEventHandlerConfig, event: KeyboardEvent) {
+  private _checkKey(config: KeyboardEventHandlerConfig, event: KeyboardEvent) {
     if (config.key instanceof RegExp) {
       return config.key.test(event.key);
     }

src/cdk-experimental/ui-patterns/behaviors/event-manager/mouse-event-manager.ts

@@ -1,3 +1,11 @@
+/**
+ * @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.dev/license
+ */
+
 import {
   EventHandlerConfig,
   EventHandlerOptions,

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

@@ -7,8 +7,8 @@
  */
 
 import {computed, Signal} from '@angular/core';
-import {ListNavigation, ListNavigationItem} from '../list-navigation/list-navigation';
-import {ListFocusController} from './controller';
+import {ListNavigation, ListNavigationItem} from '@angular/cdk-experimental/ui-patterns';
+import type {ListFocusController} from './controller';
 
 /** The required properties for focus items. */
 export interface ListFocusItem extends ListNavigationItem {
@@ -30,7 +30,7 @@ export class ListFocus<T extends ListFocusItem> {
   /** The navigation controller of the parent list. */
   navigation: ListNavigation<ListFocusItem>;
 
-  private get controller(): Promise<ListFocusController<T>> {
+  get controller(): Promise<ListFocusController<T>> {
     if (this._controller === null) {
       return this.loadController();
     }
@@ -44,8 +44,8 @@ export class ListFocus<T extends ListFocusItem> {
 
   /** Loads the controller for list focus. */
   async loadController(): Promise<ListFocusController<T>> {
-    return import('./controller').then(({ListFocusController: ListFocusController}) => {
-      this._controller = new ListFocusController(this);
+    return import('./controller').then(m => {
+      this._controller = new m.ListFocusController(this);
       return this._controller;
     });
   }

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

@@ -41,7 +41,7 @@ export class ListNavigation<T extends ListNavigationItem> {
   /** The last index that was active. */
   prevActiveIndex = signal(0);
 
-  private get controller(): Promise<ListNavigationController<T>> {
+  get controller(): Promise<ListNavigationController<T>> {
     if (this._controller === null) {
       return this.loadController();
     }
@@ -55,8 +55,8 @@ export class ListNavigation<T extends ListNavigationItem> {
 
   /** Loads the controller for list navigation. */
   async loadController(): Promise<ListNavigationController<T>> {
-    return import('./controller').then(({ListNavigationController: ListNavigationController}) => {
-      this._controller = new ListNavigationController(this);
+    return import('./controller').then(m => {
+      this._controller = new m.ListNavigationController(this);
       return this._controller;
     });
   }

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

@@ -12,7 +12,7 @@ import {ListSelectionItem, ListSelection} from './list-selection';
 export class ListSelectionController<T extends ListSelectionItem> {
   constructor(readonly state: ListSelection<T>) {
     if (this.state.inputs.selectedIds()) {
-      this.anchor();
+      this._anchor();
     }
   }
 
@@ -29,7 +29,7 @@ export class ListSelectionController<T extends ListSelectionItem> {
     }
 
     // TODO: Need to discuss when to drop this.
-    this.anchor();
+    this._anchor();
     this.state.inputs.selectedIds.update(ids => ids.concat(item.id()));
   }
 
@@ -64,7 +64,7 @@ export class ListSelectionController<T extends ListSelectionItem> {
       this.select(item);
     }
 
-    this.anchor();
+    this._anchor();
   }
 
   /** Deselects all items in the list. */
@@ -77,16 +77,16 @@ export class ListSelectionController<T extends ListSelectionItem> {
   /** Selects the items in the list starting at the last selected item. */
   selectFromAnchor() {
     const anchorIndex = this.state.inputs.items().findIndex(i => this.state.anchorId() === i.id());
-    this.selectFromIndex(anchorIndex);
+    this._selectFromIndex(anchorIndex);
   }
 
   /** Selects the items in the list starting at the last active item. */
   selectFromActive() {
-    this.selectFromIndex(this.state.inputs.navigation.prevActiveIndex());
+    this._selectFromIndex(this.state.inputs.navigation.prevActiveIndex());
   }
 
   /** Selects the items in the list starting at the given index. */
-  private selectFromIndex(index: number) {
+  private _selectFromIndex(index: number) {
     if (index === -1) {
       return;
     }
@@ -106,7 +106,7 @@ export class ListSelectionController<T extends ListSelectionItem> {
   }
 
   /** Sets the anchor to the current active index. */
-  private anchor() {
+  private _anchor() {
     const item = this.state.inputs.items()[this.state.inputs.navigation.inputs.activeIndex()];
     this.state.anchorId.set(item.id());
   }

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

@@ -8,7 +8,7 @@
 
 import {signal, Signal, WritableSignal} from '@angular/core';
 import {ListSelectionController} from './controller';
-import {ListNavigation, ListNavigationItem} from '../list-navigation/list-navigation';
+import {ListNavigation, ListNavigationItem} from '@angular/cdk-experimental/ui-patterns';
 
 /** The required properties for selection items. */
 export interface ListSelectionItem extends ListNavigationItem {
@@ -42,7 +42,7 @@ export class ListSelection<T extends ListSelectionItem> {
   /** The navigation controller of the parent list. */
   navigation: ListNavigation<T>;
 
-  private get controller(): Promise<ListSelectionController<T>> {
+  get controller(): Promise<ListSelectionController<T>> {
     if (this._controller === null) {
       return this.loadController();
     }
@@ -56,8 +56,8 @@ export class ListSelection<T extends ListSelectionItem> {
 
   /** Loads the controller for list selection. */
   async loadController(): Promise<ListSelectionController<T>> {
-    return import('./controller').then(({ListSelectionController: ListSelectionController}) => {
-      this._controller = new ListSelectionController(this);
+    return import('./controller').then(m => {
+      this._controller = new m.ListSelectionController(this);
       return this._controller;
     });
   }

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

@@ -34,7 +34,7 @@ export class ListTypeaheadController<T extends ListTypeaheadItem> {
 
     clearTimeout(this.timeout);
     this.query.update(q => q + char.toLowerCase());
-    const item = await this.getItem();
+    const item = await this._getItem();
 
     if (item) {
       await this.state.navigation.goto(item);
@@ -50,7 +50,7 @@ export class ListTypeaheadController<T extends ListTypeaheadItem> {
    * Returns the first item whose search term matches the
    * current query starting from the the current anchor index.
    */
-  private async getItem() {
+  private async _getItem() {
     let items = this.state.navigation.inputs.items();
     const after = items.slice(this.anchorIndex()! + 1);
     const before = items.slice(0, this.anchorIndex()!);

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

@@ -8,7 +8,7 @@
 
 import {Signal} from '@angular/core';
 import type {ListTypeaheadController} from './controller';
-import {ListNavigationItem, ListNavigation} from '../list-navigation/list-navigation';
+import {ListNavigationItem, ListNavigation} from '@angular/cdk-experimental/ui-patterns';
 
 /** The required properties for typeahead items. */
 export interface ListTypeaheadItem extends ListNavigationItem {
@@ -27,7 +27,7 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
   /** The navigation controller of the parent list. */
   navigation: ListNavigation<T>;
 
-  private get controller(): Promise<ListTypeaheadController<T>> {
+  get controller(): Promise<ListTypeaheadController<T>> {
     if (this._controller === null) {
       return this.loadController();
     }
@@ -41,8 +41,8 @@ export class ListTypeahead<T extends ListTypeaheadItem> {
 
   /** Loads the controller for list typeahead. */
   async loadController(): Promise<ListTypeaheadController<T>> {
-    return import('./controller').then(({ListTypeaheadController: ListTypeaheadController}) => {
-      this._controller = new ListTypeaheadController(this);
+    return import('./controller').then(m => {
+      this._controller = new m.ListTypeaheadController(this);
       return this._controller;
     });
   }

src/cdk-experimental/ui-patterns/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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.dev/license
+ */
+
+export * from './public-api';