From 5c6335786c1effe41bed5867e842290bfb6c6cf6 Mon Sep 17 00:00:00 2001 From: Manuel Date: Wed, 14 Aug 2019 14:29:09 +0200 Subject: [PATCH 1/4] Add ionCheck and ionUncheck events --- core/src/components/checkbox/checkbox.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index ff31cbcd86d..73a1de57b0b 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -64,6 +64,17 @@ export class Checkbox implements ComponentInterface { */ @Event() ionChange!: EventEmitter; + /** + * Emitted when the checkbox is checked. + */ + @Event() ionCheck!: EventEmitter; + + /** + * Emitted when the checkbox is unchecked. + * @internal + */ + @Event() ionUncheck!: EventEmitter; + /** * Emitted when the toggle has focus. */ @@ -115,6 +126,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 = () => { From a2891fa7f9feee11857b56b00a4bf288a26835d4 Mon Sep 17 00:00:00 2001 From: Manuel Date: Wed, 14 Aug 2019 14:31:42 +0200 Subject: [PATCH 2/4] Update ion-checkbox readme --- core/src/components/checkbox/readme.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index 094d573e6b2..da3183293a5 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -203,7 +203,9 @@ export const CheckboxExample: React.FC = () => ( | ----------- | ---------------------------------------------- | ---------------------------------------- | | `ionBlur` | Emitted when the toggle loses focus. | `CustomEvent` | | `ionChange` | Emitted when the checked property has changed. | `CustomEvent` | +| `ionCheck` | Emitted when the checkbox is being checked. | `CustomEvent` | | `ionFocus` | Emitted when the toggle has focus. | `CustomEvent` | +| `ionUncheck`| Emitted when the checkbox is being unchecked. | `CustomEvent` | ## CSS Custom Properties From b11f6f0703b3956ab85144f5dfbcc8b155c7e35e Mon Sep 17 00:00:00 2001 From: Manuel Date: Wed, 14 Aug 2019 14:39:37 +0200 Subject: [PATCH 3/4] Do some cleanup --- core/src/components/checkbox/checkbox.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 73a1de57b0b..08b279aa8fd 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -64,14 +64,13 @@ export class Checkbox implements ComponentInterface { */ @Event() ionChange!: EventEmitter; - /** + /** * Emitted when the checkbox is checked. */ @Event() ionCheck!: EventEmitter; /** * Emitted when the checkbox is unchecked. - * @internal */ @Event() ionUncheck!: EventEmitter; From bdc72464a4ecfe52156057e2feb626477601d0cb Mon Sep 17 00:00:00 2001 From: Manuel Date: Wed, 14 Aug 2019 14:51:56 +0200 Subject: [PATCH 4/4] Add changes after npm run build --- angular/src/directives/proxies.ts | 4 +++- core/api.txt | 2 ++ core/src/components.d.ts | 8 ++++++++ core/src/components/checkbox/readme.md | 14 +++++++------- 4 files changed, 20 insertions(+), 8 deletions(-) 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/readme.md b/core/src/components/checkbox/readme.md index da3183293a5..c82ae58ecd4 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -199,13 +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` | -| `ionCheck` | Emitted when the checkbox is being checked. | `CustomEvent` | -| `ionFocus` | Emitted when the toggle has focus. | `CustomEvent` | -| `ionUncheck`| Emitted when the checkbox is being unchecked. | `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