refactor(angular): radio component is auto generated (#28533)

core/stencil.config.ts

@@ -58,7 +58,6 @@ const getAngularOutputTargets = () => {
         'ion-textarea',
         'ion-searchbar',
         'ion-datetime',
-        'ion-radio',
         'ion-segment',
         'ion-checkbox',
         'ion-toggle',

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

@@ -3,7 +3,6 @@ export * from './datetime';
 export * from './icon';
 export * from './input';
 export * from './radio-group';
-export * from './radio';
 export * from './range';
 export * from './searchbar';
 export * from './segment';

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

@@ -53,6 +53,7 @@ import { defineCustomElement as defineIonNavLink } from '@ionic/core/components/
 import { defineCustomElement as defineIonNote } from '@ionic/core/components/ion-note.js';
 import { defineCustomElement as defineIonPicker } from '@ionic/core/components/ion-picker.js';
 import { defineCustomElement as defineIonProgressBar } from '@ionic/core/components/ion-progress-bar.js';
+import { defineCustomElement as defineIonRadio } from '@ionic/core/components/ion-radio.js';
 import { defineCustomElement as defineIonRefresher } from '@ionic/core/components/ion-refresher.js';
 import { defineCustomElement as defineIonRefresherContent } from '@ionic/core/components/ion-refresher-content.js';
 import { defineCustomElement as defineIonReorder } from '@ionic/core/components/ion-reorder.js';
@@ -1494,6 +1495,40 @@ export class IonProgressBar {
 export declare interface IonProgressBar extends Components.IonProgressBar {}
 
 
+@ProxyCmp({
+  defineCustomElementFn: defineIonRadio,
+  inputs: ['alignment', 'color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+})
+@Component({
+  selector: 'ion-radio',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['alignment', 'color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
+  standalone: true
+})
+export class IonRadio {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
+  }
+}
+
+
+export declare interface IonRadio extends Components.IonRadio {
+  /**
+   * Emitted when the radio button has focus.
+   */
+  ionFocus: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted when the radio button loses focus.
+   */
+  ionBlur: EventEmitter<CustomEvent<void>>;
+}
+
+
 @ProxyCmp({
   defineCustomElementFn: defineIonRefresher,
   inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],

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

@@ -1,58 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
-import type { OnInit } from '@angular/core';
-import type { Components } from '@ionic/core/components';
-import { defineCustomElement } from '@ionic/core/components/ion-radio.js';
-
-/**
- * Value accessor components should not use ProxyCmp
- * and should call defineCustomElement and proxyInputs
- * manually instead. Using both the @ProxyCmp and @Component
- * decorators and useExisting (where useExisting refers to the
- * 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 {
- * Instead, we want only want the class generated:
- * class IonRadio {
- */
-import { proxyInputs, proxyOutputs } from './angular-component-lib/utils';
-
-const RADIO_INPUTS = ['color', 'disabled', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'];
-
-@Component({
-  selector: 'ion-radio',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: RADIO_INPUTS,
-  standalone: true,
-})
-export class IonRadio implements OnInit {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    defineCustomElement();
-    c.detach();
-    this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
-  }
-
-  ngOnInit(): void {
-    /**
-     * Data-bound input properties are set
-     * by Angular after the constructor, so
-     * we need to run the proxy in ngOnInit.
-     */
-    proxyInputs(IonRadio, RADIO_INPUTS);
-  }
-}
-
-export declare interface IonRadio extends Components.IonRadio {
-  /**
-   * Emitted when the radio button has focus.
-   */
-  ionFocus: EventEmitter<CustomEvent<void>>;
-  /**
-   * Emitted when the radio button loses focus.
-   */
-  ionBlur: EventEmitter<CustomEvent<void>>;
-}

packages/angular/standalone/src/index.ts

@@ -34,7 +34,6 @@ export {
   IonInput,
   IonIcon,
   IonRadioGroup,
-  IonRadio,
   IonRange,
   IonSearchbar,
   IonSegment,