From ce89057641b5a67ce0f51a439435a1358e818c84 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 15 Nov 2023 12:05:17 -0500 Subject: [PATCH] refactor(angular): radio component is auto generated (#28533) --- core/stencil.config.ts | 1 - .../standalone/src/directives/index.ts | 1 - .../standalone/src/directives/proxies.ts | 35 +++++++++++ .../standalone/src/directives/radio.ts | 58 ------------------- packages/angular/standalone/src/index.ts | 1 - 5 files changed, 35 insertions(+), 61 deletions(-) delete mode 100644 packages/angular/standalone/src/directives/radio.ts diff --git a/core/stencil.config.ts b/core/stencil.config.ts index 0107c8f76b..139f7a9856 100644 --- a/core/stencil.config.ts +++ b/core/stencil.config.ts @@ -58,7 +58,6 @@ const getAngularOutputTargets = () => { 'ion-textarea', 'ion-searchbar', 'ion-datetime', - 'ion-radio', 'ion-segment', 'ion-checkbox', 'ion-toggle', diff --git a/packages/angular/standalone/src/directives/index.ts b/packages/angular/standalone/src/directives/index.ts index 8a2d8c4abe..675c500512 100644 --- a/packages/angular/standalone/src/directives/index.ts +++ b/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'; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 022535606a..b751733a56 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/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: '', + // 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>; + /** + * Emitted when the radio button loses focus. + */ + ionBlur: EventEmitter>; +} + + @ProxyCmp({ defineCustomElementFn: defineIonRefresher, inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'], diff --git a/packages/angular/standalone/src/directives/radio.ts b/packages/angular/standalone/src/directives/radio.ts deleted file mode 100644 index 7939eb0909..0000000000 --- a/packages/angular/standalone/src/directives/radio.ts +++ /dev/null @@ -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: '', - // 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>; - /** - * Emitted when the radio button loses focus. - */ - ionBlur: EventEmitter>; -} diff --git a/packages/angular/standalone/src/index.ts b/packages/angular/standalone/src/index.ts index 36d8c2bf27..15a9651da7 100644 --- a/packages/angular/standalone/src/index.ts +++ b/packages/angular/standalone/src/index.ts @@ -34,7 +34,6 @@ export { IonInput, IonIcon, IonRadioGroup, - IonRadio, IonRange, IonSearchbar, IonSegment,