Skip to content

Commit 3e8455d

Browse files
committed
fixup! feat(cdk-experimental/ui-patterns): listbox ui pattern
1 parent edfc6f1 commit 3e8455d

File tree

17 files changed

+203
-157
lines changed

17 files changed

+203
-157
lines changed

src/cdk-experimental/listbox/listbox.ts

+16-15
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ import {
1414
inject,
1515
input,
1616
model,
17+
OnDestroy,
1718
signal,
1819
} from '@angular/core';
19-
import {Option} from '../ui-patterns/listbox/option';
20-
import {ListboxInputs, ListboxPattern} from '../ui-patterns/listbox/listbox';
20+
import {OptionPattern} from '@angular/cdk-experimental/ui-patterns/listbox/option';
21+
import {ListboxInputs, ListboxPattern} from '@angular/cdk-experimental/ui-patterns/listbox/listbox';
2122
import {Directionality} from '@angular/cdk/bidi';
2223
import {startWith, takeUntil} from 'rxjs/operators';
2324
import {Subject} from 'rxjs';
@@ -40,7 +41,7 @@ import {Subject} from 'rxjs';
4041
// '(focusin)': '_handleFocusIn()',
4142
},
4243
})
43-
export class CdkListbox implements ListboxInputs {
44+
export class CdkListbox implements ListboxInputs, OnDestroy {
4445
/** Whether the list is vertically or horizontally oriented. */
4546
orientation = input<'vertical' | 'horizontal'>('vertical');
4647

@@ -69,31 +70,31 @@ export class CdkListbox implements ListboxInputs {
6970
activeIndex = model<number>(0);
7071

7172
/** The CdkOptions nested inside of the CdkListbox. */
72-
private cdkOptions = contentChildren(CdkOption, {descendants: true});
73+
private _cdkOptions = contentChildren(CdkOption, {descendants: true});
7374

7475
/** The Option UIPatterns of the child CdkOptions. */
75-
items = computed(() => this.cdkOptions().map(option => option.state));
76+
items = computed(() => this._cdkOptions().map(option => option.state));
7677

7778
/** The directionality (LTR / RTL) context for the application (or a subtree of it). */
78-
private dir = inject(Directionality);
79+
private _dir = inject(Directionality);
7980

8081
/** A signal wrapper for directionality. */
8182
directionality = signal<'rtl' | 'ltr'>('rtl');
8283

8384
/** Emits when the list has been destroyed. */
84-
private readonly destroyed = new Subject<void>();
85+
private readonly _destroyed = new Subject<void>();
8586

8687
/** The Listbox UIPattern. */
8788
state: ListboxPattern = new ListboxPattern(this);
8889

8990
constructor() {
90-
this.dir.change
91-
.pipe(startWith(this.dir.value), takeUntil(this.destroyed))
91+
this._dir.change
92+
.pipe(startWith(this._dir.value), takeUntil(this._destroyed))
9293
.subscribe(value => this.directionality.set(value));
9394
}
9495

9596
ngOnDestroy() {
96-
this.destroyed.complete();
97+
this._destroyed.complete();
9798
}
9899
}
99100

@@ -122,16 +123,16 @@ export class CdkOption {
122123
searchTerm = computed(() => this.label() ?? this.element().textContent);
123124

124125
/** A reference to the option element. */
125-
private elementRef = inject(ElementRef);
126+
private _elementRef = inject(ElementRef);
126127

127-
element = computed(() => this.elementRef.nativeElement);
128+
element = computed(() => this._elementRef.nativeElement);
128129

129130
/** The parent CdkListbox. */
130-
private cdkListbox = inject(CdkListbox);
131+
private _cdkListbox = inject(CdkListbox);
131132

132133
/** The parent Listbox UIPattern. */
133-
listbox = computed(() => this.cdkListbox.state);
134+
listbox = computed(() => this._cdkListbox.state);
134135

135136
/** The Option UIPattern. */
136-
state: Option = new Option(this);
137+
state = new OptionPattern(this);
137138
}

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

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
19
/**
210
* An event that supports modifier keys.
311
*/
@@ -38,7 +46,7 @@ export enum ModifierKey {
3846
* Abstract base class for all event managers.
3947
*/
4048
export abstract class EventManager<T extends Event> {
41-
private submanagers: EventManager<T>[] = [];
49+
private _submanagers: EventManager<T>[] = [];
4250

4351
protected configs: EventHandlerConfig<T>[] = [];
4452
protected beforeFns: ((event: T) => void)[] = [];
@@ -62,7 +70,7 @@ export abstract class EventManager<T extends Event> {
6270
*/
6371
static compose<T extends Event>(...managers: EventManager<T>[]) {
6472
const composedManager = new GenericEventManager<T>();
65-
composedManager.submanagers = managers;
73+
composedManager._submanagers = managers;
6674
return composedManager;
6775
}
6876

@@ -81,7 +89,7 @@ export abstract class EventManager<T extends Event> {
8189
for (const fn of this.beforeFns) {
8290
fn(event);
8391
}
84-
for (const submanager of this.submanagers) {
92+
for (const submanager of this._submanagers) {
8593
await submanager.handle(event);
8694
}
8795
for (const config of this.getConfigs(event)) {
@@ -130,7 +138,7 @@ export abstract class EventManager<T extends Event> {
130138
* Checks whether this event manager is confugred to handle the given event.
131139
*/
132140
protected isHandled(event: T): boolean {
133-
return this.getConfigs(event).length > 0 || this.submanagers.some(sm => sm.isHandled(event));
141+
return this.getConfigs(event).length > 0 || this._submanagers.some(sm => sm.isHandled(event));
134142
}
135143
}
136144

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
19
import {Signal} from '@angular/core';
210
import {
311
EventHandlerConfig,
@@ -75,12 +83,12 @@ export class KeyboardEventManager extends EventManager<KeyboardEvent> {
7583
}
7684

7785
getConfigs(event: KeyboardEvent) {
78-
return this.configs.filter(config => this.checkKey(config, event));
86+
return this.configs.filter(config => this._checkKey(config, event));
7987
}
8088

8189
// TODO: Make modifiers accept a signal as well.
8290

83-
private checkKey(config: KeyboardEventHandlerConfig, event: KeyboardEvent) {
91+
private _checkKey(config: KeyboardEventHandlerConfig, event: KeyboardEvent) {
8492
if (config.key instanceof RegExp) {
8593
return config.key.test(event.key);
8694
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
19
import {
210
EventHandlerConfig,
311
EventHandlerOptions,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('List Focus', () => {
2222
id: signal(`${i}`),
2323
tabindex: signal(-1),
2424
disabled: signal(false),
25-
element: signal(new HTMLElement()),
25+
element: signal({focus: () => {}} as HTMLElement),
2626
})),
2727
);
2828
}

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

+8-5
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
*/
88

99
import {computed, Signal} from '@angular/core';
10-
import {ListNavigation, ListNavigationItem} from '../list-navigation/list-navigation';
11-
import {ListFocusController} from './controller';
10+
import {
11+
ListNavigation,
12+
ListNavigationItem,
13+
} from '@angular/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation';
14+
import type {ListFocusController} from './controller';
1215

1316
/** The required properties for focus items. */
1417
export interface ListFocusItem extends ListNavigationItem {
@@ -30,7 +33,7 @@ export class ListFocus<T extends ListFocusItem> {
3033
/** The navigation controller of the parent list. */
3134
navigation: ListNavigation<ListFocusItem>;
3235

33-
private get controller(): Promise<ListFocusController<T>> {
36+
get controller(): Promise<ListFocusController<T>> {
3437
if (this._controller === null) {
3538
return this.loadController();
3639
}
@@ -44,8 +47,8 @@ export class ListFocus<T extends ListFocusItem> {
4447

4548
/** Loads the controller for list focus. */
4649
async loadController(): Promise<ListFocusController<T>> {
47-
return import('./controller').then(({ListFocusController: ListFocusController}) => {
48-
this._controller = new ListFocusController(this);
50+
return import('./controller').then(m => {
51+
this._controller = new m.ListFocusController(this);
4952
return this._controller;
5053
});
5154
}

0 commit comments

Comments
 (0)