refactor(radio): Changed the igcChange custom event type

CHANGELOG.md

@@ -20,17 +20,32 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   CustomEvent<{ checked: boolean; value: string | undefined }>
   ```
 
+
+- **BREAKING**: Radio `igcChange` event.
+
+  Before:
+  ```ts
+  CustomEvent<boolean>
+  ```
+
+  Now:
+  ```ts
+  CustomEvent<{ checked: boolean; value: string | undefined }>
+  ```
+
+
+
 ### Removed
-- igc-form - use the native form element instead.
-- Range slider - ariaThumbLower/ariaThumbUpper. Use thumbLabelLower/thumbLabelUpper instead.
-- Rating - readonly property. Use readOnly instead.
-- Dialog - closeOnEscape property. Use keepOpenOnEscape.
-- Combo, Select - positionStrategy, flip, sameWidth removed.
-- Dropdown - positionStrategy removed.
-- Input - readonly, inputmode, maxlength and minlength.
-  Use the native readOnly, inputMode, maxLength and minLength properties instead.
-- Date-time-input - `minValue`/`mavValue` are removed. Use `min`/`max` instead.
-- Removed size property from components.
+- **BREAKING**: igc-form - use the native form element instead.
+- **BREAKING**: Range slider - `ariaThumbLower/ariaThumbUpper`. Use `thumbLabelLower/thumbLabelUpper` instead.
+- **BREAKING**: Rating - `readonly` property. Use `readOnly` instead.
+- **BREAKING**: Dialog - `closeOnEscape` property. Use `keepOpenOnEscape`.
+- **BREAKING**: Combo, Select - `positionStrategy`, `flip`, `sameWidth` removed.
+- **BREAKING**: Dropdown - `positionStrategy` removed.
+- **BREAKING**: Input - `readonly`, `inputmode`, `maxlength` and `minlength`.
+  Use the native `readOnly`, `inputMode`, `maxLength` and `minLength` properties instead.
+- **BREAKING**: Date-time-input - `minValue`/`mavValue` are removed. Use `min`/`max` instead.
+- **BREAKING**: Removed `size` property from components.
 
 ### Fixed
 - Date-time input - update masked value according to the input format on focus when value is set [#1320](https://github.com/IgniteUI/igniteui-webcomponents/issues/1320)

src/components/radio/radio.spec.ts

@@ -194,7 +194,12 @@ describe('Radio Component', () => {
       radio.click();
 
       await elementUpdated(radio);
-      expect(eventSpy).calledWithExactly('igcChange', { detail: true });
+      expect(eventSpy).calledWithExactly('igcChange', {
+        detail: {
+          checked: true,
+          value: undefined,
+        },
+      });
     });
 
     it('should be able to use external elements as label', async () => {

src/components/radio/radio.ts

@@ -25,8 +25,13 @@ import { styles as shared } from './themes/shared/radio.common.css.js';
 import { all } from './themes/themes.js';
 import { getGroup } from './utils.js';
 
+export interface RadioChangeEventArgs {
+  checked: boolean;
+  value?: string;
+}
+
 export interface IgcRadioEventMap {
-  igcChange: CustomEvent<boolean>;
+  igcChange: CustomEvent<RadioChangeEventArgs>;
   igcFocus: CustomEvent<void>;
   igcBlur: CustomEvent<void>;
 }
@@ -268,7 +273,12 @@ export default class IgcRadioComponent extends FormAssociatedRequiredMixin(
 
   protected handleClick() {
     this.checked = true;
-    this.emitEvent('igcChange', { detail: this.checked });
+    this.emitEvent('igcChange', {
+      detail: {
+        checked: this.checked,
+        value: this.value,
+      },
+    });
   }
 
   protected handleBlur() {
@@ -287,7 +297,9 @@ export default class IgcRadioComponent extends FormAssociatedRequiredMixin(
 
     radio.focus();
     radio.checked = true;
-    radio.emitEvent('igcChange', { detail: radio.checked });
+    radio.emitEvent('igcChange', {
+      detail: { checked: radio.checked, value: radio.value },
+    });
   }
 
   protected override render() {