feat: ionCheck and ionUncheck for ion-checkbox

angular/src/directives/proxies.ts

@@ -143,13 +143,15 @@ export declare interface IonCheckbox extends Components.IonCheckbox {}
 @Component({ selector: 'ion-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'] })
 export class IonCheckbox {
   ionChange!: EventEmitter<CustomEvent>;
+  ionCheck!: EventEmitter<CustomEvent>;
+  ionUncheck!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
+    proxyOutputs(this, this.el, ['ionChange', 'ionCheck', 'ionUncheck', 'ionFocus', 'ionBlur']);
   }
 }
 proxyInputs(IonCheckbox, ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value']);

core/api.txt

@@ -221,7 +221,9 @@ ion-checkbox,prop,name,string,this.inputId,false,false
 ion-checkbox,prop,value,string,'on',false,false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail,true
+ion-checkbox,event,ionCheck,void,true
 ion-checkbox,event,ionFocus,void,true
+ion-checkbox,event,ionUncheck,void,true
 ion-checkbox,css-prop,--background
 ion-checkbox,css-prop,--background-checked
 ion-checkbox,css-prop,--border-color

core/src/components.d.ts

@@ -3977,10 +3977,18 @@ declare namespace LocalJSX {
     */
     'onIonChange'?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
     /**
+    * Emitted when the checkbox is checked.
+    */
+    'onIonCheck'?: (event: CustomEvent<void>) => void;
+    /**
     * Emitted when the toggle has focus.
     */
     'onIonFocus'?: (event: CustomEvent<void>) => void;
     /**
+    * Emitted when the checkbox is unchecked.
+    */
+    'onIonUncheck'?: (event: CustomEvent<void>) => void;
+    /**
     * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
     */
     'value'?: string;

core/src/components/checkbox/checkbox.tsx

@@ -64,6 +64,16 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionChange!: EventEmitter<CheckboxChangeEventDetail>;
 
+  /**
+   * Emitted when the checkbox is checked.
+   */
+  @Event() ionCheck!: EventEmitter<void>;
+
+  /**
+   * Emitted when the checkbox is unchecked.
+   */
+  @Event() ionUncheck!: EventEmitter<void>;
+
   /**
    * Emitted when the toggle has focus.
    */
@@ -115,6 +125,12 @@ export class Checkbox implements ComponentInterface {
     this.setFocus();
     this.checked = !this.checked;
     this.indeterminate = false;
+
+    if (this.checked) {
+      this.ionCheck.emit();
+    } else {
+      this.ionUncheck.emit();
+    }
   }
 
   private onFocus = () => {

core/src/components/checkbox/readme.md

@@ -199,11 +199,13 @@ export const CheckboxExample: React.FC = () => (
 
 ## Events
 
-| Event       | Description                                    | Type                                     |
-| ----------- | ---------------------------------------------- | ---------------------------------------- |
-| `ionBlur`   | Emitted when the toggle loses focus.           | `CustomEvent<void>`                      |
-| `ionChange` | Emitted when the checked property has changed. | `CustomEvent<CheckboxChangeEventDetail>` |
-| `ionFocus`  | Emitted when the toggle has focus.             | `CustomEvent<void>`                      |
+| Event        | Description                                    | Type                                     |
+| ------------ | ---------------------------------------------- | ---------------------------------------- |
+| `ionBlur`    | Emitted when the toggle loses focus.           | `CustomEvent<void>`                      |
+| `ionChange`  | Emitted when the checked property has changed. | `CustomEvent<CheckboxChangeEventDetail>` |
+| `ionCheck`   | Emitted when the checkbox is checked.          | `CustomEvent<void>`                      |
+| `ionFocus`   | Emitted when the toggle has focus.             | `CustomEvent<void>`                      |
+| `ionUncheck` | Emitted when the checkbox is unchecked.        | `CustomEvent<void>`                      |
 
 
 ## CSS Custom Properties