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

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -7,6 +7,7 @@
  */
 
 import {
+  booleanAttribute,
   computed,
   contentChildren,
   Directive,
@@ -18,7 +19,7 @@ import {
   signal,
 } from '@angular/core';
 import {OptionPattern} from '@angular/cdk-experimental/ui-patterns/listbox/option';
-import {ListboxInputs, ListboxPattern} from '@angular/cdk-experimental/ui-patterns/listbox/listbox';
+import {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';
@@ -43,31 +44,43 @@ import {Subject} from 'rxjs';
   host: {
     'role': 'listbox',
     'class': 'cdk-listbox',
-    '[attr.tabindex]': 'state.tabindex()',
-    '[attr.aria-disabled]': 'state.disabled()',
-    '[attr.aria-multiselectable]': 'state.multiselectable()',
-    '[attr.aria-activedescendant]': 'state.activedescendant()',
-    '[attr.aria-orientation]': 'state.orientation()',
-    '(focusin)': 'state.onFocus()',
-    '(keydown)': 'state.onKeydown($event)',
-    '(mousedown)': 'state.onMousedown($event)',
+    '[attr.tabindex]': 'pattern.tabindex()',
+    '[attr.aria-disabled]': 'pattern.disabled()',
+    '[attr.aria-multiselectable]': 'pattern.multiselectable()',
+    '[attr.aria-activedescendant]': 'pattern.activedescendant()',
+    '[attr.aria-orientation]': 'pattern.orientation()',
+    '(focusin)': 'pattern.onFocus()',
+    '(keydown)': 'pattern.onKeydown($event)',
+    '(mousedown)': 'pattern.onMousedown($event)',
   },
 })
-export class CdkListbox implements ListboxInputs, OnDestroy {
+export class CdkListbox implements OnDestroy {
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   private _dir = inject(Directionality);
 
+  /** A signal wrapper for directionality. */
+  private directionality = signal<'ltr' | 'rtl'>('ltr');
+
+  /** The CdkOptions nested inside of the CdkListbox. */
+  private _cdkOptions = contentChildren(CdkOption, {descendants: true});
+
+  /** The Option UIPatterns of the child CdkOptions. */
+  private items = computed(() => this._cdkOptions().map(option => option.pattern));
+
+  /** Emits when the list has been destroyed. */
+  private readonly _destroyed = new Subject<void>();
+
   /** Whether the list is vertically or horizontally oriented. */
   orientation = input<'vertical' | 'horizontal'>('vertical');
 
   /** Whether multiple items in the list can be selected at once. */
-  multiselectable = input<boolean>(false);
+  multiselectable = input(false, {transform: booleanAttribute});
 
   /** Whether focus should wrap when navigating. */
-  wrap = input<boolean>(true);
+  wrap = input(true, {transform: booleanAttribute});
 
   /** Whether disabled items in the list should be skipped when navigating. */
-  skipDisabled = input<boolean>(true);
+  skipDisabled = input(true, {transform: booleanAttribute});
 
   /** The focus strategy used by the list. */
   focusMode = input<'roving' | 'activedescendant'>('roving');
@@ -76,31 +89,23 @@ export class CdkListbox implements ListboxInputs, OnDestroy {
   selectionMode = input<'follow' | 'explicit'>('follow');
 
   /** The amount of time before the typeahead search is reset. */
-  delay = input<number>(0.5); // Picked arbitrarily.
+  typeaheadDelay = input<number>(0.5); // Picked arbitrarily.
+
+  /** Whether the listbox is disabled. */
+  disabled = input(false, {transform: booleanAttribute});
 
   /** The ids of the current selected items. */
   selectedIds = model<string[]>([]);
 
   /** The current index that has been navigated to. */
   activeIndex = model<number>(0);
 
-  /** The CdkOptions nested inside of the CdkListbox. */
-  private _cdkOptions = contentChildren(CdkOption, {descendants: true});
-
-  /** The Option UIPatterns of the child CdkOptions. */
-  items = computed(() => this._cdkOptions().map(option => option.state));
-
-  /** A signal wrapper for directionality. */
-  directionality = signal<'ltr' | 'rtl'>('ltr');
-
-  /** Emits when the list has been destroyed. */
-  private readonly _destroyed = new Subject<void>();
-
-  /** Whether the listbox is disabled. */
-  disabled = input<boolean>(false);
-
   /** The Listbox UIPattern. */
-  state: ListboxPattern = new ListboxPattern(this);
+  pattern: ListboxPattern = new ListboxPattern({
+    ...this,
+    items: this.items,
+    directionality: this.directionality,
+  });
 
   constructor() {
     this._dir.change
@@ -113,16 +118,19 @@ export class CdkListbox implements ListboxInputs, OnDestroy {
   }
 }
 
+// TODO(wagnermaciel): Figure out how we actually want to do this.
+let count = 0;
+
 /** A selectable option in a CdkListbox. */
 @Directive({
   selector: '[cdkOption]',
   exportAs: 'cdkOption',
   host: {
     'role': 'option',
     'class': 'cdk-option',
-    '[attr.aria-selected]': 'state.selected()',
-    '[attr.tabindex]': 'state.tabindex()',
-    '[attr.aria-disabled]': 'state.disabled()',
+    '[attr.aria-selected]': 'pattern.selected()',
+    '[attr.tabindex]': 'pattern.tabindex()',
+    '[attr.aria-disabled]': 'pattern.disabled()',
   },
 })
 export class CdkOption {
@@ -132,21 +140,30 @@ export class CdkOption {
   /** The parent CdkListbox. */
   private _cdkListbox = inject(CdkListbox);
 
-  /** Whether an item is disabled. */
-  disabled = input<boolean>(false);
+  /** A unique identifier for the option. */
+  private id = computed(() => `${count++}`);
 
   /** The text used by the typeahead search. */
-  label = input<string>();
+  private searchTerm = computed(() => this.label() ?? this.element().textContent);
 
-  /** The text used by the typeahead search. */
-  searchTerm = computed(() => this.label() ?? this.element().textContent);
+  /** The parent Listbox UIPattern. */
+  private listbox = computed(() => this._cdkListbox.pattern);
 
-  /** A reference to the option element. */
-  element = computed(() => this._elementRef.nativeElement);
+  /** A reference to the option element to be focused on navigation. */
+  private element = computed(() => this._elementRef.nativeElement);
 
-  /** The parent Listbox UIPattern. */
-  listbox = computed(() => this._cdkListbox.state);
+  /** Whether an item is disabled. */
+  disabled = input(false, {transform: booleanAttribute});
+
+  /** The text used by the typeahead search. */
+  label = input<string>();
 
   /** The Option UIPattern. */
-  state = new OptionPattern(this);
+  pattern = new OptionPattern({
+    ...this,
+    id: this.id,
+    listbox: this.listbox,
+    element: this.element,
+    searchTerm: this.searchTerm,
+  });
 }

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

@@ -99,7 +99,7 @@ export abstract class EventManager<T extends Event> {
     for (const submanager of this._submanagers) {
       await submanager.handle(event);
     }
-    for (const config of this.getConfigs(event)) {
+    for (const config of this.getHandlersForKey(event)) {
       await config.handler(event);
       if (config.stopPropagation) {
         event.stopPropagation();
@@ -139,13 +139,15 @@ export abstract class EventManager<T extends Event> {
   /**
    * Gets all of the handler configs that are applicable to the given event.
    */
-  protected abstract getConfigs(event: T): EventHandlerConfig<T>[];
+  protected abstract getHandlersForKey(event: T): EventHandlerConfig<T>[];
 
   /**
    * 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.getHandlersForKey(event).length > 0 || this._submanagers.some(sm => sm.isHandled(event))
+    );
   }
 }
 
@@ -164,7 +166,7 @@ export class GenericEventManager<T extends Event> extends EventManager<T> {
     return this;
   }
 
-  getConfigs(_event: T): EventHandlerConfig<T>[] {
+  getHandlersForKey(_event: T): EventHandlerConfig<T>[] {
     return this.configs;
   }
 }

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

@@ -82,13 +82,13 @@ export class KeyboardEventManager extends EventManager<KeyboardEvent> {
     return this;
   }
 
-  getConfigs(event: KeyboardEvent) {
-    return this.configs.filter(config => this._checkKey(config, event));
+  getHandlersForKey(event: KeyboardEvent) {
+    return this.configs.filter(config => this._isKeyMatch(config, event));
   }
 
   // TODO: Make modifiers accept a signal as well.
 
-  private _checkKey(config: KeyboardEventHandlerConfig, event: KeyboardEvent) {
+  private _isKeyMatch(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

@@ -125,7 +125,7 @@ export class MouseEventManager extends EventManager<MouseEvent> {
     };
   }
 
-  getConfigs(event: MouseEvent) {
+  getHandlersForKey(event: MouseEvent) {
     const configs: MouseEventHandlerConfig[] = [];
     for (const config of this.configs) {
       if (config.button === (event.button ?? 0) && hasModifiers(event, config.modifiers)) {

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

@@ -43,7 +43,7 @@ export class ListTypeaheadController<T extends ListTypeaheadItem> {
     this.timeout = setTimeout(() => {
       this.query.set('');
       this.anchorIndex.set(null);
-    }, this.state.inputs.delay() * 1000);
+    }, this.state.inputs.typeaheadDelay() * 1000);
   }
 
   /**

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

@@ -40,7 +40,7 @@ describe('List Typeahead', () => {
       });
       const typeahead = new ListTypeahead({
         navigation,
-        delay: signal(0.5),
+        typeaheadDelay: signal(0.5),
       });
 
       await typeahead.search('i');
@@ -67,7 +67,7 @@ describe('List Typeahead', () => {
       });
       const typeahead = new ListTypeahead({
         navigation,
-        delay: signal(0.5),
+        typeaheadDelay: signal(0.5),
       });
 
       await typeahead.search('i');
@@ -92,7 +92,7 @@ describe('List Typeahead', () => {
       });
       const typeahead = new ListTypeahead({
         navigation,
-        delay: signal(0.5),
+        typeaheadDelay: signal(0.5),
       });
       items()[1].disabled.set(true);
 
@@ -113,7 +113,7 @@ describe('List Typeahead', () => {
       });
       const typeahead = new ListTypeahead({
         navigation,
-        delay: signal(0.5),
+        typeaheadDelay: signal(0.5),
       });
       items()[1].disabled.set(true);
 
@@ -134,7 +134,7 @@ describe('List Typeahead', () => {
       });
       const typeahead = new ListTypeahead({
         navigation,
-        delay: signal(0.5),
+        typeaheadDelay: signal(0.5),
       });
 
       await typeahead.search('i');

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

@@ -19,7 +19,7 @@ export interface ListTypeaheadItem extends ListNavigationItem {
 /** The required inputs for list typeahead. */
 export interface ListTypeaheadInputs {
   /** The amount of time before the typeahead search is reset. */
-  delay: Signal<number>;
+  typeaheadDelay: Signal<number>;
 }
 
 /** Controls typeahead for a list of items. */

src/cdk-experimental/ui-patterns/listbox/option.ts

@@ -22,12 +22,10 @@ export interface OptionInputs
   listbox: Signal<ListboxPattern>;
 }
 
-let count = 0;
-
 /** An option in a listbox. */
 export class OptionPattern {
   /** A unique identifier for the option. */
-  id = signal(`${count++}`);
+  id: Signal<string>;
 
   /** The position of the option in the list. */
   index = computed(
@@ -55,7 +53,8 @@ export class OptionPattern {
   /** The html element that should receive focus. */
   element: Signal<HTMLElement>;
 
-  constructor(args: Omit<OptionInputs, 'id'>) {
+  constructor(args: OptionInputs) {
+    this.id = args.id;
     this.listbox = args.listbox;
     this.element = args.element;
     this.disabled = args.disabled;

src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.html

@@ -43,7 +43,7 @@
   <label id="fruit-example-label">List of Fruits</label>
 
   @for (fruit of fruits; track fruit) {
-    @let checked = option.state.selected() ? 'checked' : 'unchecked';
+    @let checked = option.pattern.selected() ? 'checked' : 'unchecked';
 
     <li cdkOption #option="cdkOption">
       <mat-pseudo-checkbox [state]="checked"></mat-pseudo-checkbox>