diff --git a/goldens/aria/grid/index.api.md b/goldens/aria/grid/index.api.md index 5563718eab0e..4eb62d5cb7d4 100644 --- a/goldens/aria/grid/index.api.md +++ b/goldens/aria/grid/index.api.md @@ -60,21 +60,21 @@ export class GridCell { export class GridCellWidget { constructor(); activate(): void; + readonly activated: _angular_core.OutputEmitterRef; readonly active: Signal; deactivate(): void; + readonly deactivated: _angular_core.OutputEmitterRef; readonly disabled: _angular_core.InputSignalWithTransform; readonly element: HTMLElement; readonly focusTarget: _angular_core.InputSignal | HTMLElement | undefined>; readonly id: _angular_core.InputSignal; get isActivated(): Signal; - readonly onActivate: _angular_core.OutputEmitterRef; - readonly onDeactivate: _angular_core.OutputEmitterRef; readonly _pattern: GridCellWidgetPattern; protected readonly _tabIndex: Signal; readonly tabindex: _angular_core.InputSignal; readonly widgetType: _angular_core.InputSignal<"simple" | "complex" | "editable">; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration; + static ɵdir: _angular_core.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: _angular_core.ɵɵFactoryDeclaration; } diff --git a/goldens/aria/menu/index.api.md b/goldens/aria/menu/index.api.md index fde707a17ba2..8c3ca02bb41f 100644 --- a/goldens/aria/menu/index.api.md +++ b/goldens/aria/menu/index.api.md @@ -19,7 +19,7 @@ export class Menu { readonly expansionDelay: _angular_core.InputSignal; readonly id: _angular_core.InputSignal; readonly _items: Signal[]>; - onSelect: _angular_core.OutputEmitterRef; + readonly itemSelected: _angular_core.OutputEmitterRef; readonly parent: _angular_core.WritableSignal | MenuItem | undefined>; readonly _pattern: MenuPattern; readonly tabIndex: Signal<0 | -1>; @@ -28,7 +28,7 @@ export class Menu { readonly visible: Signal; readonly wrap: _angular_core.InputSignalWithTransform; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; }, ["_allItems"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>; + static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngMenu]", ["ngMenu"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expansionDelay": { "alias": "expansionDelay"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; }, ["_allItems"], never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>; // (undocumented) static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; } @@ -42,7 +42,7 @@ export class MenuBar { readonly element: HTMLElement; // (undocumented) readonly _items: SignalLike[]>; - onSelect: _angular_core.OutputEmitterRef; + readonly itemSelected: _angular_core.OutputEmitterRef; readonly _pattern: MenuBarPattern; readonly softDisabled: _angular_core.InputSignalWithTransform; readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>; @@ -50,7 +50,7 @@ export class MenuBar { readonly values: _angular_core.ModelSignal; readonly wrap: _angular_core.InputSignalWithTransform; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "onSelect": "onSelect"; }, ["_allItems"], never, true, never>; + static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "itemSelected": "itemSelected"; }, ["_allItems"], never, true, never>; // (undocumented) static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; } diff --git a/goldens/aria/private/index.api.md b/goldens/aria/private/index.api.md index a86e2543d910..3635c307d839 100644 --- a/goldens/aria/private/index.api.md +++ b/goldens/aria/private/index.api.md @@ -497,7 +497,7 @@ export class ListboxPattern { // @public export interface MenuBarInputs extends ListInputs, V> { items: SignalLike[]>; - onSelect?: (value: V) => void; + itemSelected?: (value: V) => void; textDirection: SignalLike<'ltr' | 'rtl'>; } @@ -533,7 +533,7 @@ export interface MenuInputs extends Omit, V>, ' expansionDelay: SignalLike; id: SignalLike; items: SignalLike[]>; - onSelect?: (value: V) => void; + itemSelected?: (value: V) => void; parent: SignalLike | MenuItemPattern | undefined>; textDirection: SignalLike<'ltr' | 'rtl'>; } diff --git a/src/aria/grid/grid-cell-widget.ts b/src/aria/grid/grid-cell-widget.ts index 96d7a1957540..f4402f8fbd50 100644 --- a/src/aria/grid/grid-cell-widget.ts +++ b/src/aria/grid/grid-cell-widget.ts @@ -74,10 +74,10 @@ export class GridCellWidget { readonly focusTarget = input(); /** Emits when the widget is activated. */ - readonly onActivate = output(); + readonly activated = output(); /** Emits when the widget is deactivated. */ - readonly onDeactivate = output(); + readonly deactivated = output(); /** The tabindex override. */ readonly tabindex = input(); @@ -96,10 +96,8 @@ export class GridCellWidget { element: () => this.element, cell: () => this._cell._pattern, focusTarget: computed(() => { - if (this.focusTarget() instanceof ElementRef) { - return (this.focusTarget() as ElementRef).nativeElement; - } - return this.focusTarget(); + const target = this.focusTarget(); + return target instanceof ElementRef ? target.nativeElement : target; }), }); @@ -112,14 +110,14 @@ export class GridCellWidget { afterRenderEffect(() => { const activateEvent = this._pattern.lastActivateEvent(); if (activateEvent) { - this.onActivate.emit(activateEvent); + this.activated.emit(activateEvent); } }); afterRenderEffect(() => { const deactivateEvent = this._pattern.lastDeactivateEvent(); if (deactivateEvent) { - this.onDeactivate.emit(deactivateEvent); + this.deactivated.emit(deactivateEvent); } }); } diff --git a/src/aria/menu/menu-bar.ts b/src/aria/menu/menu-bar.ts index cd3662f19e68..89e187181cd1 100644 --- a/src/aria/menu/menu-bar.ts +++ b/src/aria/menu/menu-bar.ts @@ -107,7 +107,7 @@ export class MenuBar { private readonly _itemPatterns = signal([]); /** A callback function triggered when a menu item is selected. */ - onSelect = output(); + readonly itemSelected = output(); constructor() { this._pattern = new MenuBarPattern({ @@ -118,7 +118,7 @@ export class MenuBar { focusMode: () => 'roving', orientation: () => 'horizontal', selectionMode: () => 'explicit', - onSelect: (value: V) => this.onSelect.emit(value), + itemSelected: (value: V) => this.itemSelected.emit(value), activeItem: signal(undefined), element: computed(() => this._elementRef.nativeElement), }); diff --git a/src/aria/menu/menu-item.ts b/src/aria/menu/menu-item.ts index ee6612da7d11..cf0d87d0988b 100644 --- a/src/aria/menu/menu-item.ts +++ b/src/aria/menu/menu-item.ts @@ -20,9 +20,10 @@ import type {MenuBar} from './menu-bar'; * or action a user can take. They can also act as triggers for sub-menus. * * ```html - *
Action Item
- * - *
Submenu Trigger
+ *
+ *
Action Item
+ *
Submenu Trigger
+ *
* ``` * * @developerPreview 21.0 diff --git a/src/aria/menu/menu.spec.ts b/src/aria/menu/menu.spec.ts index cb7a7c55cec2..e97a79243ce5 100644 --- a/src/aria/menu/menu.spec.ts +++ b/src/aria/menu/menu.spec.ts @@ -157,49 +157,49 @@ describe('Standalone Menu Pattern', () => { it('should select an item on click', () => { const banana = getItem('Banana'); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'itemSelected'); click(banana!); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana'); + expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Banana'); }); it('should select an item on enter', () => { const banana = getItem('Banana'); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'itemSelected'); keydown(document.activeElement!, 'ArrowDown'); // Move focus to Banana expect(document.activeElement).toBe(banana); keydown(banana!, 'Enter'); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana'); + expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Banana'); }); it('should select an item on space', () => { const banana = getItem('Banana'); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'itemSelected'); keydown(document.activeElement!, 'ArrowDown'); // Move focus to Banana expect(document.activeElement).toBe(banana); keydown(banana!, ' '); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Banana'); + expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Banana'); }); it('should not select a disabled item', () => { const cherry = getItem('Cherry'); - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'itemSelected'); click(cherry!); - expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled(); + expect(fixture.componentInstance.itemSelected).not.toHaveBeenCalled(); keydown(document.activeElement!, 'End'); expect(document.activeElement).toBe(cherry); keydown(cherry!, 'Enter'); - expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled(); + expect(fixture.componentInstance.itemSelected).not.toHaveBeenCalled(); keydown(cherry!, ' '); - expect(fixture.componentInstance.onSelect).not.toHaveBeenCalled(); + expect(fixture.componentInstance.itemSelected).not.toHaveBeenCalled(); }); }); @@ -317,18 +317,18 @@ describe('Standalone Menu Pattern', () => { }); it('should close on selecting an item on click', () => { - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'itemSelected'); click(getItem('Berries')!); // open submenu expect(isSubmenuExpanded()).toBe(true); click(getItem('Blueberry')!); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry'); + expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Blueberry'); expect(isSubmenuExpanded()).toBe(false); }); it('should close on selecting an item on enter', () => { - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'itemSelected'); const apple = getItem('Apple'); const banana = getItem('Banana'); const berries = getItem('Berries'); @@ -342,12 +342,12 @@ describe('Standalone Menu Pattern', () => { keydown(blueberry!, 'Enter'); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry'); + expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Blueberry'); expect(isSubmenuExpanded()).toBe(false); }); it('should close on selecting an item on space', () => { - spyOn(fixture.componentInstance, 'onSelect'); + spyOn(fixture.componentInstance, 'itemSelected'); const apple = getItem('Apple'); const banana = getItem('Banana'); const berries = getItem('Berries'); @@ -361,7 +361,7 @@ describe('Standalone Menu Pattern', () => { keydown(blueberry!, ' '); - expect(fixture.componentInstance.onSelect).toHaveBeenCalledWith('Blueberry'); + expect(fixture.componentInstance.itemSelected).toHaveBeenCalledWith('Blueberry'); expect(isSubmenuExpanded()).toBe(false); }); @@ -959,7 +959,7 @@ describe('Menu Bar Pattern', () => { @Component({ template: ` -
+
Apple
Banana
@@ -980,7 +980,7 @@ describe('Menu Bar Pattern', () => { imports: [Menu, MenuItem, MenuContent], }) class StandaloneMenuExample { - onSelect(value: string) {} + itemSelected(value: string) {} } @Component({ diff --git a/src/aria/menu/menu.ts b/src/aria/menu/menu.ts index 0456cb8d0692..ff16ad6078cd 100644 --- a/src/aria/menu/menu.ts +++ b/src/aria/menu/menu.ts @@ -134,7 +134,7 @@ export class Menu { readonly tabIndex = computed(() => this._pattern.tabIndex()); /** A callback function triggered when a menu item is selected. */ - onSelect = output(); + readonly itemSelected = output(); /** The delay in milliseconds before expanding sub-menus on hover. */ readonly expansionDelay = input(100); // Arbitrarily chosen. @@ -151,7 +151,7 @@ export class Menu { selectionMode: () => 'explicit', activeItem: signal(undefined), element: computed(() => this._elementRef.nativeElement), - onSelect: (value: V) => this.onSelect.emit(value), + itemSelected: (value: V) => this.itemSelected.emit(value), }); afterRenderEffect(() => { diff --git a/src/aria/private/menu/menu.spec.ts b/src/aria/private/menu/menu.spec.ts index b01aff0a9cc8..5748a8889733 100644 --- a/src/aria/private/menu/menu.spec.ts +++ b/src/aria/private/menu/menu.spec.ts @@ -254,43 +254,43 @@ describe('Standalone Menu Pattern', () => { describe('Selection', () => { it('should select an item on click', () => { const items = menu.inputs.items(); - menu.inputs.onSelect = jasmine.createSpy('onSelect'); + menu.inputs.itemSelected = jasmine.createSpy('itemSelected'); menu.onClick(clickMenuItem(items, 1)); - expect(menu.inputs.onSelect).toHaveBeenCalledWith('b'); + expect(menu.inputs.itemSelected).toHaveBeenCalledWith('b'); }); it('should select an item on enter', () => { const items = menu.inputs.items(); menu.inputs.activeItem.set(items[1]); - menu.inputs.onSelect = jasmine.createSpy('onSelect'); + menu.inputs.itemSelected = jasmine.createSpy('itemSelected'); menu.onKeydown(enter()); - expect(menu.inputs.onSelect).toHaveBeenCalledWith('b'); + expect(menu.inputs.itemSelected).toHaveBeenCalledWith('b'); }); it('should select an item on space', () => { const items = menu.inputs.items(); menu.inputs.activeItem.set(items[1]); - menu.inputs.onSelect = jasmine.createSpy('onSelect'); + menu.inputs.itemSelected = jasmine.createSpy('itemSelected'); menu.onKeydown(space()); - expect(menu.inputs.onSelect).toHaveBeenCalledWith('b'); + expect(menu.inputs.itemSelected).toHaveBeenCalledWith('b'); }); it('should not select a disabled item', () => { const items = menu.inputs.items() as TestMenuItem[]; items[1].inputs.disabled.set(true); menu.inputs.activeItem.set(items[1]); - menu.inputs.onSelect = jasmine.createSpy('onSelect'); + menu.inputs.itemSelected = jasmine.createSpy('itemSelected'); menu.onClick(clickMenuItem(items, 1)); - expect(menu.inputs.onSelect).not.toHaveBeenCalled(); + expect(menu.inputs.itemSelected).not.toHaveBeenCalled(); menu.onKeydown(enter()); - expect(menu.inputs.onSelect).not.toHaveBeenCalled(); + expect(menu.inputs.itemSelected).not.toHaveBeenCalled(); menu.onKeydown(space()); - expect(menu.inputs.onSelect).not.toHaveBeenCalled(); + expect(menu.inputs.itemSelected).not.toHaveBeenCalled(); }); }); diff --git a/src/aria/private/menu/menu.ts b/src/aria/private/menu/menu.ts index df03df9d979c..056cff4279be 100644 --- a/src/aria/private/menu/menu.ts +++ b/src/aria/private/menu/menu.ts @@ -16,7 +16,7 @@ export interface MenuBarInputs extends ListInputs, V> { items: SignalLike[]>; /** Callback function triggered when a menu item is selected. */ - onSelect?: (value: V) => void; + itemSelected?: (value: V) => void; /** The text direction of the menu bar. */ textDirection: SignalLike<'ltr' | 'rtl'>; @@ -34,7 +34,7 @@ export interface MenuInputs extends Omit, V>, ' parent: SignalLike | MenuItemPattern | undefined>; /** Callback function triggered when a menu item is selected. */ - onSelect?: (value: V) => void; + itemSelected?: (value: V) => void; /** The text direction of the menu bar. */ textDirection: SignalLike<'ltr' | 'rtl'>; @@ -370,12 +370,12 @@ export class MenuPattern { if (!item.submenu() && isMenuBar) { root.close(); - root?.inputs.onSelect?.(item.value()); + root?.inputs.itemSelected?.(item.value()); } if (!item.submenu() && isMenu) { root.inputs.activeItem()?.close({refocus: true}); - root?.inputs.onSelect?.(item.value()); + root?.inputs.itemSelected?.(item.value()); } } } diff --git a/src/components-examples/aria/grid/grid-table/grid-table-example.html b/src/components-examples/aria/grid/grid-table/grid-table-example.html index 83c38145fab8..637e79dff9ce 100644 --- a/src/components-examples/aria/grid/grid-table/grid-table-example.html +++ b/src/components-examples/aria/grid/grid-table/grid-table-example.html @@ -34,8 +34,8 @@ role="button" ngGridCellWidget widgetType="editable" - (onActivate)="startEdit($event, task, summaryInput)" - (onDeactivate)="completeEdit($event, task)" + (activated)="startEdit($event, task, summaryInput)" + (deactivated)="completeEdit($event, task)" (click)="onClickEdit(widget, task, summaryInput)" #widget="ngGridCellWidget" > @@ -59,7 +59,7 @@ role="button" ngGridCellWidget widgetType="complex" - (onActivate)="select.focus()" + (activated)="select.focus()" #widget="ngGridCellWidget" > @@ -77,7 +77,7 @@ role="button" ngGridCellWidget widgetType="complex" - (onActivate)="chips.focus()" + (activated)="chips.focus()" #widget="ngGridCellWidget" > @@ -89,7 +89,7 @@ ngGridCellWidget widgetType="editable" placeholder="add new tag" - (onDeactivate)="addTag($event, task, tagInput)" + (deactivated)="addTag($event, task, tagInput)" #tagInput />