chore(angular): remove radio value accessor (#28386)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

packages/angular/src/directives/control-value-accessors/index.ts

@@ -1,5 +1,4 @@
 export * from './boolean-value-accessor';
 export * from './numeric-value-accessor';
-export * from './radio-value-accessor';
 export * from './select-value-accessor';
 export * from './text-value-accessor';

packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts

@@ -1,29 +0,0 @@
-import { ElementRef, Injector, Directive, HostListener } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessor } from '@ionic/angular/common';
-
-@Directive({
-  /* tslint:disable-next-line:directive-selector */
-  selector: 'ion-radio',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: RadioValueAccessorDirective,
-      multi: true,
-    },
-  ],
-})
-export class RadioValueAccessorDirective extends ValueAccessor {
-  constructor(injector: Injector, el: ElementRef) {
-    super(injector, el);
-  }
-
-  @HostListener('ionSelect', ['$event.target'])
-  _handleIonSelect(el: any): void {
-    /**
-     * The `el` type is any to access the `checked` state property
-     * that is not exposed on the type interface.
-     */
-    this.handleValueChange(el, el.checked);
-  }
-}

packages/angular/src/index.ts

@@ -1,7 +1,6 @@
 // DIRECTIVES
 export { BooleanValueAccessorDirective as BooleanValueAccessor } from './directives/control-value-accessors/boolean-value-accessor';
 export { NumericValueAccessorDirective as NumericValueAccessor } from './directives/control-value-accessors/numeric-value-accessor';
-export { RadioValueAccessorDirective as RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
 export { SelectValueAccessorDirective as SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
 export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
 export { IonTabs } from './directives/navigation/ion-tabs';

packages/angular/src/ionic-module.ts

@@ -13,7 +13,6 @@ import { appInitialize } from './app-initialize';
 import {
   BooleanValueAccessorDirective,
   NumericValueAccessorDirective,
-  RadioValueAccessorDirective,
   SelectValueAccessorDirective,
   TextValueAccessorDirective,
 } from './directives/control-value-accessors';
@@ -41,7 +40,6 @@ const DECLARATIONS = [
   // ngModel accessors
   BooleanValueAccessorDirective,
   NumericValueAccessorDirective,
-  RadioValueAccessorDirective,
   SelectValueAccessorDirective,
   TextValueAccessorDirective,
 

packages/angular/standalone/src/directives/radio.ts

@@ -1,16 +1,5 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Injector,
-  NgZone,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import type { OnInit } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessor } from '@ionic/angular/common';
 import type { Components } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-radio.js';
 
@@ -22,9 +11,9 @@ import { defineCustomElement } from '@ionic/core/components/ion-radio.js';
  * class) causes ng-packagr to output multiple component variables
  * which breaks treeshaking.
  * For example, the following would be generated:
- * let IonRadio = IonRadio_1 = class IonRadio extends ValueAccessor {
+ * let IonRadio = IonRadio_1 = class IonRadio {
  * Instead, we want only want the class generated:
- * class IonRadio extends ValueAccessor {
+ * class IonRadio {
  */
 import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
 
@@ -36,19 +25,11 @@ const RADIO_INPUTS = ['color', 'disabled', 'justify', 'labelPlacement', 'legacy'
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: RADIO_INPUTS,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: IonRadio,
-      multi: true,
-    },
-  ],
   standalone: true,
 })
-export class IonRadio extends ValueAccessor implements OnInit {
+export class IonRadio implements OnInit {
   protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone, injector: Injector) {
-    super(injector, r);
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     defineCustomElement();
     c.detach();
     this.el = r.nativeElement;
@@ -63,15 +44,6 @@ export class IonRadio extends ValueAccessor implements OnInit {
      */
     proxyInputs(IonRadio, RADIO_INPUTS);
   }
-
-  @HostListener('ionSelect', ['$event.target'])
-  handleIonSelect(el: any): void {
-    /**
-     * The `el` type is any to access the `checked` state property
-     * that is not exposed on the type interface.
-     */
-    this.handleValueChange(el, el.checked);
-  }
 }
 
 export declare interface IonRadio extends Components.IonRadio {

packages/angular/test/base/e2e/src/lazy/form.spec.ts

@@ -32,7 +32,8 @@ describe('Form', () => {
         input2: 'Default Value',
         inputMin: 1,
         inputMax: 1,
-        checkbox: false
+        checkbox: false,
+        radio: null
       });
     });
 
@@ -59,7 +60,8 @@ describe('Form', () => {
         input2: 'Default Value',
         inputMin: 1,
         inputMax: 1,
-        checkbox: false
+        checkbox: false,
+        radio: null
       });
     });
 
@@ -73,7 +75,8 @@ describe('Form', () => {
         input2: 'Default Value',
         inputMin: 1,
         inputMax: 1,
-        checkbox: false
+        checkbox: false,
+        radio: null
       });
     });
 
@@ -87,7 +90,23 @@ describe('Form', () => {
         input2: 'Default Value',
         inputMin: 1,
         inputMax: 1,
-        checkbox: true
+        checkbox: true,
+        radio: null
+      });
+    });
+
+    it('ion-radio should change', () => {
+      cy.get('ion-radio').click();
+      testData({
+        datetime: '2010-08-20',
+        select: null,
+        toggle: false,
+        input: '',
+        input2: 'Default Value',
+        inputMin: 1,
+        inputMax: 1,
+        checkbox: false,
+        radio: 'nes'
       });
     });
 
@@ -109,7 +128,8 @@ describe('Form', () => {
         input2: 'Default Value',
         inputMin: 1,
         inputMax: 1,
-        checkbox: false
+        checkbox: false,
+        radio: null
       });
       cy.get('ion-checkbox').click();
       testData({
@@ -120,7 +140,8 @@ describe('Form', () => {
         input2: 'Default Value',
         inputMin: 1,
         inputMax: 1,
-        checkbox: true
+        checkbox: true,
+        radio: null
       });
     });
   });

packages/angular/test/base/e2e/src/lazy/inputs.spec.ts

@@ -5,6 +5,7 @@ describe('Inputs', () => {
 
   it('should have default value', () => {
     cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
+    cy.get('ion-radio-group').should('have.prop', 'value').and('equal', 'nes');
     cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
     cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
     cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
@@ -15,6 +16,7 @@ describe('Inputs', () => {
     cy.get('#reset-button').click();
 
     cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', false);
+    cy.get('ion-radio-group').should('not.have.prop', 'value');
     cy.get('ion-toggle').should('have.prop', 'checked').and('equal', false);
     /**
      * The `value` property gets set to undefined
@@ -32,6 +34,7 @@ describe('Inputs', () => {
     cy.get('#set-button').click();
 
     cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
+    cy.get('ion-radio-group').should('have.prop', 'value').and('equal', 'nes');
     cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
     cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
     cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
@@ -42,6 +45,7 @@ describe('Inputs', () => {
     cy.get('#reset-button').click();
 
     cy.get('ion-checkbox#first-checkbox').click();
+    cy.get('ion-radio').first().click();
     cy.get('ion-toggle').first().click();
 
     cy.get('ion-input').eq(0).type('hola');
@@ -58,6 +62,7 @@ describe('Inputs', () => {
     cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
 
     cy.get('#checkbox-note').should('have.text', 'true');
+    cy.get('#radio-note').should('have.text', 'nes');
     cy.get('#toggle-note').should('have.text', 'true');
     cy.get('#input-note').should('have.text', 'hola');
     cy.get('#datetime-note').should('have.text', '1994-03-14');

packages/angular/test/base/src/app/lazy/form/form.component.html

@@ -48,6 +48,12 @@
         <ion-checkbox formControlName="checkbox"> Checkbox </ion-checkbox>
       </ion-item>
 
+      <ion-item>
+        <ion-radio-group formControlName="radio">
+          <ion-radio value="nes">Radio</ion-radio>
+        </ion-radio-group>
+      </ion-item>
+
       <ion-item>
         <ion-label>Min</ion-label>
         <ion-input formControlName="inputMin" type="number"></ion-input>

packages/angular/test/base/src/app/lazy/form/form.component.ts

@@ -20,7 +20,8 @@ export class FormComponent {
       input2: ['Default Value'],
       inputMin: [1, Validators.min(1)],
       inputMax: [1, Validators.max(1)],
-      checkbox: [false]
+      checkbox: [false],
+      radio: [undefined]
     }, {
       updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
     });
@@ -44,7 +45,8 @@ export class FormComponent {
       toggle: true,
       input: 'Some value',
       input2: 'Another values',
-      checkbox: true
+      checkbox: true,
+      radio: 'nes'
     });
   }
 

packages/angular/test/base/src/app/lazy/inputs/inputs.component.html

@@ -85,6 +85,20 @@
       <ion-note slot="end">{{checkbox}}</ion-note>
     </ion-item>
 
+    <ion-item>
+      <ion-radio-group value="nes" [(ngModel)]="radio" id="first-radio">
+        <ion-radio value="nes">Radio</ion-radio>
+      </ion-radio-group>
+      <ion-note slot="end" id="radio-note">{{radio}}</ion-note>
+    </ion-item>
+
+    <ion-item color="dark">
+      <ion-radio-group value="nes" [(ngModel)]="radio">
+        <ion-radio value="nes">Radio Mirror</ion-radio>
+      </ion-radio-group>
+      <ion-note slot="end">{{radio}}</ion-note>
+    </ion-item>
+
   </ion-list>
   <p>
     <ion-button (click)="setValues()" id="set-button">Set values</ion-button>

packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts

@@ -9,6 +9,7 @@ export class InputsComponent {
   datetime? = '1994-03-15';
   input? = 'some text';
   checkbox = true;
+  radio? = 'nes';
   toggle = true;
   select? = 'nes';
   changes = 0;
@@ -18,6 +19,7 @@ export class InputsComponent {
     this.datetime = '1994-03-15';
     this.input = 'some text';
     this.checkbox = true;
+    this.radio = 'nes';
     this.toggle = true;
     this.select = 'nes';
   }
@@ -27,6 +29,7 @@ export class InputsComponent {
     this.datetime = undefined;
     this.input = undefined;
     this.checkbox = false;
+    this.radio = undefined;
     this.toggle = false;
     this.select = undefined;
   }