fix(aria/grid): align output naming with styleguide

Removes the `on` prefixs from outputs in the grid to align it with the styleguide.

Fixes #32727.

Author: crisbeto

goldens/aria/grid/index.api.md

@@ -60,21 +60,21 @@ export class GridCell {
 export class GridCellWidget {
     constructor();
     activate(): void;
+    readonly activated: _angular_core.OutputEmitterRef<FocusEvent | KeyboardEvent | undefined>;
     readonly active: Signal<boolean>;
     deactivate(): void;
+    readonly deactivated: _angular_core.OutputEmitterRef<FocusEvent | KeyboardEvent | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
     readonly focusTarget: _angular_core.InputSignal<ElementRef<any> | HTMLElement | undefined>;
     readonly id: _angular_core.InputSignal<string>;
     get isActivated(): Signal<boolean>;
-    readonly onActivate: _angular_core.OutputEmitterRef<FocusEvent | KeyboardEvent | undefined>;
-    readonly onDeactivate: _angular_core.OutputEmitterRef<FocusEvent | KeyboardEvent | undefined>;
     readonly _pattern: GridCellWidgetPattern;
     protected readonly _tabIndex: Signal<number>;
     readonly tabindex: _angular_core.InputSignal<number | undefined>;
     readonly widgetType: _angular_core.InputSignal<"simple" | "complex" | "editable">;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCellWidget, "[ngGridCellWidget]", ["ngGridCellWidget"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "widgetType": { "alias": "widgetType"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusTarget": { "alias": "focusTarget"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "onActivate": "onActivate"; "onDeactivate": "onDeactivate"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCellWidget, "[ngGridCellWidget]", ["ngGridCellWidget"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "widgetType": { "alias": "widgetType"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusTarget": { "alias": "focusTarget"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "activated": "activated"; "deactivated": "deactivated"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCellWidget, never>;
 }

src/aria/grid/grid-cell-widget.ts

@@ -74,10 +74,10 @@ export class GridCellWidget {
   readonly focusTarget = input<ElementRef | HTMLElement | undefined>();
 
   /** Emits when the widget is activated. */
-  readonly onActivate = output<KeyboardEvent | FocusEvent | undefined>();
+  readonly activated = output<KeyboardEvent | FocusEvent | undefined>();
 
   /** Emits when the widget is deactivated. */
-  readonly onDeactivate = output<KeyboardEvent | FocusEvent | undefined>();
+  readonly deactivated = output<KeyboardEvent | FocusEvent | undefined>();
 
   /** The tabindex override. */
   readonly tabindex = input<number | undefined>();
@@ -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);
       }
     });
   }

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"
           >
             <mat-form-field subscriptSizing="dynamic">
@@ -77,7 +77,7 @@
               role="button"
               ngGridCellWidget
               widgetType="complex"
-              (onActivate)="chips.focus()"
+              (activated)="chips.focus()"
               #widget="ngGridCellWidget"
             >
               <grid-chips [(values)]="task.tags" [tabindex]="-1" #chips />
@@ -89,7 +89,7 @@
               ngGridCellWidget
               widgetType="editable"
               placeholder="add new tag"
-              (onDeactivate)="addTag($event, task, tagInput)"
+              (deactivated)="addTag($event, task, tagInput)"
               #tagInput
             />
           </div>