refactor(cdk-experimental/ui-patterns): remove controllers & lazy-loading

Author: jelbourn

src/cdk-experimental/listbox/listbox.ts

@@ -47,7 +47,6 @@ import {toSignal} from '@angular/core/rxjs-interop';
     '[attr.aria-orientation]': 'pattern.orientation()',
     '[attr.aria-multiselectable]': 'pattern.multiselectable()',
     '[attr.aria-activedescendant]': 'pattern.activedescendant()',
-    '(focusin)': 'pattern.onFocus()',
     '(keydown)': 'pattern.onKeydown($event)',
     '(mousedown)': 'pattern.onMousedown($event)',
   },
@@ -61,7 +60,7 @@ export class CdkListbox {
 
   /** A signal wrapper for directionality. */
   protected directionality = toSignal(this._dir.change, {
-    initialValue: 'ltr',
+    initialValue: this._dir.value,
   });
 
   /** The Option UIPatterns of the child CdkOptions. */

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

@@ -32,7 +32,7 @@ export interface EventHandlerOptions {
  * A config that specifies how to handle a particular event.
  */
 export interface EventHandlerConfig<T extends Event> extends EventHandlerOptions {
-  handler: (event: T) => Promise<boolean | void>;
+  handler: (event: T) => boolean | void;
 }
 
 /**
@@ -89,18 +89,18 @@ export abstract class EventManager<T extends Event> {
    * Note: the use of `undefined` instead of `false` in the unhandled case is necessary to avoid
    * accidentally preventing the default behavior on an unhandled event.
    */
-  async handle(event: T): Promise<true | undefined> {
+  handle(event: T): true | undefined {
     if (!this.isHandled(event)) {
       return undefined;
     }
     for (const fn of this.beforeFns) {
       fn(event);
     }
     for (const submanager of this._submanagers) {
-      await submanager.handle(event);
+      submanager.handle(event);
     }
     for (const config of this.getHandlersForKey(event)) {
-      await config.handler(event);
+      config.handler(event);
       if (config.stopPropagation) {
         event.stopPropagation();
       }
@@ -158,7 +158,7 @@ export class GenericEventManager<T extends Event> extends EventManager<T> {
   /**
    * Configures this event manager to handle all events with the given handler.
    */
-  on(handler: (event: T) => Promise<boolean | void>): this {
+  on(handler: (event: T) => boolean | void): this {
     this.configs.push({
       ...this.defaultHandlerOptions,
       handler,

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

@@ -8,7 +8,6 @@
 
 import {computed, Signal} from '@angular/core';
 import {ListNavigation, ListNavigationItem} from '../list-navigation/list-navigation';
-import type {ListFocusController} from './controller';
 
 /** The required properties for focus items. */
 export interface ListFocusItem extends ListNavigationItem {
@@ -30,26 +29,10 @@ export class ListFocus<T extends ListFocusItem> {
   /** The navigation controller of the parent list. */
   navigation: ListNavigation<ListFocusItem>;
 
-  get controller(): Promise<ListFocusController<T>> {
-    if (this._controller === null) {
-      return this.loadController();
-    }
-    return Promise.resolve(this._controller);
-  }
-  private _controller: ListFocusController<T> | null = null;
-
   constructor(readonly inputs: ListFocusInputs<T> & {navigation: ListNavigation<T>}) {
     this.navigation = inputs.navigation;
   }
 
-  /** Loads the controller for list focus. */
-  async loadController(): Promise<ListFocusController<T>> {
-    return import('./controller').then(m => {
-      this._controller = new m.ListFocusController(this);
-      return this._controller;
-    });
-  }
-
   /** Returns the id of the current active item. */
   getActiveDescendant(): Signal<string | null> {
     return computed(() => {
@@ -77,7 +60,12 @@ export class ListFocus<T extends ListFocusItem> {
   }
 
   /** Focuses the current active item. */
-  async focus() {
-    (await this.controller).focus();
+  focus() {
+    if (this.inputs.focusMode() === 'activedescendant') {
+      return;
+    }
+
+    const item = this.navigation.inputs.items()[this.navigation.inputs.activeIndex()];
+    item.element().focus();
   }
 }

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

@@ -7,7 +7,6 @@
  */
 
 import {signal, Signal, WritableSignal} from '@angular/core';
-import type {ListNavigationController} from './controller';
 
 /** The required properties for navigation items. */
 export interface ListNavigationItem {
@@ -41,53 +40,65 @@ export class ListNavigation<T extends ListNavigationItem> {
   /** The last index that was active. */
   prevActiveIndex = signal(0);
 
-  get controller(): Promise<ListNavigationController<T>> {
-    if (this._controller === null) {
-      return this.loadController();
-    }
-    return Promise.resolve(this._controller);
-  }
-  private _controller: ListNavigationController<T> | null = null;
-
   constructor(readonly inputs: ListNavigationInputs<T>) {
     this.prevActiveIndex.set(inputs.activeIndex());
   }
 
-  /** Loads the controller for list navigation. */
-  async loadController(): Promise<ListNavigationController<T>> {
-    return import('./controller').then(m => {
-      this._controller = new m.ListNavigationController(this);
-      return this._controller;
-    });
-  }
-
   /** Navigates to the given item. */
-  async goto(item: T) {
-    return (await this.controller).goto(item);
+  goto(item: T) {
+    if (this.isFocusable(item)) {
+      this.prevActiveIndex.set(this.inputs.activeIndex());
+      const index = this.inputs.items().indexOf(item);
+      this.inputs.activeIndex.set(index);
+    }
   }
 
   /** Navigates to the next item in the list. */
-  async next() {
-    return (await this.controller).next();
+  next() {
+    const items = this.inputs.items();
+    const after = items.slice(this.inputs.activeIndex() + 1);
+    const before = items.slice(0, this.inputs.activeIndex());
+    const array = this.inputs.wrap() ? after.concat(before) : after;
+    const item = array.find(i => this.isFocusable(i));
+
+    if (item) {
+      this.goto(item);
+    }
   }
 
   /** Navigates to the previous item in the list. */
-  async prev() {
-    return (await this.controller).prev();
+  prev() {
+    const items = this.inputs.items();
+    const after = items.slice(this.inputs.activeIndex() + 1).reverse();
+    const before = items.slice(0, this.inputs.activeIndex()).reverse();
+    const array = this.inputs.wrap() ? before.concat(after) : before;
+    const item = array.find(i => this.isFocusable(i));
+
+    if (item) {
+      this.goto(item);
+    }
   }
 
   /** Navigates to the first item in the list. */
-  async first() {
-    return (await this.controller).first();
+  first() {
+    const item = this.inputs.items().find(i => this.isFocusable(i));
+
+    if (item) {
+      this.goto(item);
+    }
   }
 
   /** Navigates to the last item in the list. */
-  async last() {
-    return (await this.controller).last();
+  last() {
+    const item = [...this.inputs.items()].reverse().find(i => this.isFocusable(i));
+
+    if (item) {
+      this.goto(item);
+    }
   }
 
   /** Returns true if the given item can be navigated to. */
-  async isFocusable(item: T) {
-    return (await this.controller).isFocusable(item);
+  isFocusable(item: T): boolean {
+    return !item.disabled() || !this.inputs.skipDisabled();
   }
 }