diff --git a/packages/angular/src/directives/control-value-accessors/index.ts b/packages/angular/src/directives/control-value-accessors/index.ts index f18d651097..84a18e0b92 100644 --- a/packages/angular/src/directives/control-value-accessors/index.ts +++ b/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'; diff --git a/packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts b/packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts deleted file mode 100644 index 014a2cf1c0..0000000000 --- a/packages/angular/src/directives/control-value-accessors/radio-value-accessor.ts +++ /dev/null @@ -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); - } -} diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index 6db8e3d7d2..d84b9622f3 100644 --- a/packages/angular/src/index.ts +++ b/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'; diff --git a/packages/angular/src/ionic-module.ts b/packages/angular/src/ionic-module.ts index e8b0af6e2c..96c5fa44c3 100644 --- a/packages/angular/src/ionic-module.ts +++ b/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, diff --git a/packages/angular/standalone/src/directives/radio.ts b/packages/angular/standalone/src/directives/radio.ts index d70ea8d01d..7939eb0909 100644 --- a/packages/angular/standalone/src/directives/radio.ts +++ b/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: '', // 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 { diff --git a/packages/angular/test/base/e2e/src/lazy/form.spec.ts b/packages/angular/test/base/e2e/src/lazy/form.spec.ts index 596cb98bfe..65611cd151 100644 --- a/packages/angular/test/base/e2e/src/lazy/form.spec.ts +++ b/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 }); }); }); diff --git a/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts b/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts index d79f3b92a6..bbc677bd7a 100644 --- a/packages/angular/test/base/e2e/src/lazy/inputs.spec.ts +++ b/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'); diff --git a/packages/angular/test/base/src/app/lazy/form/form.component.html b/packages/angular/test/base/src/app/lazy/form/form.component.html index f5891cb19f..ab15fae6df 100644 --- a/packages/angular/test/base/src/app/lazy/form/form.component.html +++ b/packages/angular/test/base/src/app/lazy/form/form.component.html @@ -48,6 +48,12 @@ Checkbox + + + Radio + + + Min diff --git a/packages/angular/test/base/src/app/lazy/form/form.component.ts b/packages/angular/test/base/src/app/lazy/form/form.component.ts index 131237632c..afb8e5355c 100644 --- a/packages/angular/test/base/src/app/lazy/form/form.component.ts +++ b/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' }); } diff --git a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html index ea19d0c77e..63b6264359 100644 --- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html +++ b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.html @@ -85,6 +85,20 @@ {{checkbox}} + + + Radio + + {{radio}} + + + + + Radio Mirror + + {{radio}} + +

Set values diff --git a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts b/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts index 28d8ef9499..a2fa0996c7 100644 --- a/packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts +++ b/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; }