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

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -14,10 +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 {OptionPattern} from '@angular/cdk-experimental/ui-patterns/listbox/option';
+import {ListboxInputs, ListboxPattern} from '@angular/cdk-experimental/ui-patterns/listbox/listbox';
 import {Directionality} from '@angular/cdk/bidi';
 import {startWith, takeUntil} from 'rxjs/operators';
 import {Subject} from 'rxjs';
@@ -40,7 +41,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 +70,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 +123,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/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.spec.ts

@@ -22,7 +22,7 @@ describe('List Focus', () => {
         id: signal(`${i}`),
         tabindex: signal(-1),
         disabled: signal(false),
-        element: signal(new HTMLElement()),
+        element: signal({focus: () => {}} as HTMLElement),
       })),
     );
   }

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

@@ -7,8 +7,11 @@
  */
 
 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/behaviors/list-navigation/list-navigation';
+import type {ListFocusController} from './controller';
 
 /** The required properties for focus items. */
 export interface ListFocusItem extends ListNavigationItem {
@@ -30,7 +33,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 +47,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;
     });
   }