diff --git a/src/cdk-experimental/ui-patterns/BUILD.bazel b/src/cdk-experimental/ui-patterns/BUILD.bazel index f420959e2ef8..e9a32359e012 100644 --- a/src/cdk-experimental/ui-patterns/BUILD.bazel +++ b/src/cdk-experimental/ui-patterns/BUILD.bazel @@ -9,6 +9,7 @@ ts_library( exclude = ["**/*.spec.ts"], ), deps = [ + "//src/cdk-experimental/ui-patterns/behaviors/signal-like", "//src/cdk-experimental/ui-patterns/listbox", "@npm//@angular/core", ], diff --git a/src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.ts b/src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.ts index 9807a26f6ba2..96514ce71b09 100644 --- a/src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.ts +++ b/src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.ts @@ -34,7 +34,7 @@ export class ListFocus { } /** The id of the current active item. */ - getActiveDescendant(): String | undefined { + getActiveDescendant(): string | undefined { if (this.inputs.focusMode() === 'roving') { return undefined; } diff --git a/src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.ts b/src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.ts index ba463d7f5997..a5a3ff22fe44 100644 --- a/src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.ts +++ b/src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.ts @@ -41,9 +41,7 @@ export class ListNavigation { /** The last index that was active. */ prevActiveIndex = signal(0); - constructor(readonly inputs: ListNavigationInputs) { - this.prevActiveIndex.set(inputs.activeIndex()); - } + constructor(readonly inputs: ListNavigationInputs) {} /** Navigates to the given item. */ goto(item: T) { diff --git a/src/cdk-experimental/ui-patterns/listbox/listbox.ts b/src/cdk-experimental/ui-patterns/listbox/listbox.ts index 2a4dfcfa732d..09aeda3cf589 100644 --- a/src/cdk-experimental/ui-patterns/listbox/listbox.ts +++ b/src/cdk-experimental/ui-patterns/listbox/listbox.ts @@ -259,7 +259,7 @@ export class ListboxPattern { return; } - const element = e.target.closest('[cdkoption]'); // TODO: Use a different identifier. + const element = e.target.closest('[role="option"]'); // TODO: Use a different identifier. return this.inputs.items().find(i => i.element() === element); } } diff --git a/src/cdk-experimental/ui-patterns/listbox/option.ts b/src/cdk-experimental/ui-patterns/listbox/option.ts index b838dc5ae7b5..913596d29e0d 100644 --- a/src/cdk-experimental/ui-patterns/listbox/option.ts +++ b/src/cdk-experimental/ui-patterns/listbox/option.ts @@ -29,7 +29,7 @@ export interface OptionInputs ListSelectionItem, ListTypeaheadItem, ListFocusItem { - listbox: SignalLike; + listbox: SignalLike; } /** Represents an option in a listbox. */ @@ -41,12 +41,12 @@ export class OptionPattern { index = computed( () => this.listbox() - .navigation.inputs.items() + ?.navigation.inputs.items() .findIndex(i => i.id() === this.id()) ?? -1, ); /** Whether the option is selected. */ - selected = computed(() => this.listbox().selection.inputs.selectedIds().includes(this.id())); + selected = computed(() => this.listbox()?.selection.inputs.selectedIds().includes(this.id())); /** Whether the option is disabled. */ disabled: SignalLike; @@ -55,10 +55,10 @@ export class OptionPattern { searchTerm: SignalLike; /** A reference to the parent listbox. */ - listbox: SignalLike; + listbox: SignalLike; /** The tabindex of the option. */ - tabindex = computed(() => this.listbox().focusManager.getItemTabindex(this)); + tabindex = computed(() => this.listbox()?.focusManager.getItemTabindex(this)); /** The html element that should receive focus. */ element: SignalLike; diff --git a/src/cdk-experimental/ui-patterns/public-api.ts b/src/cdk-experimental/ui-patterns/public-api.ts index a30b67e1e378..36c6802f2735 100644 --- a/src/cdk-experimental/ui-patterns/public-api.ts +++ b/src/cdk-experimental/ui-patterns/public-api.ts @@ -8,3 +8,4 @@ export * from './listbox/listbox'; export * from './listbox/option'; +export * from './behaviors/signal-like/signal-like';