diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index aafd100525b..4f58ee0411f 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -143,13 +143,15 @@ export declare interface IonCheckbox extends Components.IonCheckbox {} @Component({ selector: 'ion-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'] }) export class IonCheckbox { ionChange!: EventEmitter; + ionCheck!: EventEmitter; + ionUncheck!: EventEmitter; ionFocus!: EventEmitter; ionBlur!: EventEmitter; 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']); diff --git a/core/api.txt b/core/api.txt index 4daf11105d6..39cbe48eb08 100644 --- a/core/api.txt +++ b/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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 106229e28ab..a711661a602 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3977,10 +3977,18 @@ declare namespace LocalJSX { */ 'onIonChange'?: (event: CustomEvent) => void; /** + * Emitted when the checkbox is checked. + */ + 'onIonCheck'?: (event: CustomEvent) => void; + /** * Emitted when the toggle has focus. */ 'onIonFocus'?: (event: CustomEvent) => void; /** + * Emitted when the checkbox is unchecked. + */ + 'onIonUncheck'?: (event: CustomEvent) => 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 ``, it's only used when the toggle participates in a native `
`. */ 'value'?: string; diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index ff31cbcd86d..08b279aa8fd 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -64,6 +64,16 @@ export class Checkbox implements ComponentInterface { */ @Event() ionChange!: EventEmitter; + /** + * Emitted when the checkbox is checked. + */ + @Event() ionCheck!: EventEmitter; + + /** + * Emitted when the checkbox is unchecked. + */ + @Event() ionUncheck!: EventEmitter; + /** * 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 = () => { diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index 094d573e6b2..c82ae58ecd4 100644 --- a/core/src/components/checkbox/readme.md +++ b/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` | -| `ionChange` | Emitted when the checked property has changed. | `CustomEvent` | -| `ionFocus` | Emitted when the toggle has focus. | `CustomEvent` | +| Event | Description | Type | +| ------------ | ---------------------------------------------- | ---------------------------------------- | +| `ionBlur` | Emitted when the toggle loses focus. | `CustomEvent` | +| `ionChange` | Emitted when the checked property has changed. | `CustomEvent` | +| `ionCheck` | Emitted when the checkbox is checked. | `CustomEvent` | +| `ionFocus` | Emitted when the toggle has focus. | `CustomEvent` | +| `ionUncheck` | Emitted when the checkbox is unchecked. | `CustomEvent` | ## CSS Custom Properties