From b2d636f14dcd33313f6604cfd4a64b542c831b34 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Wed, 6 Mar 2024 17:34:54 -0500 Subject: [PATCH 1/6] fix(checkbox): set aria-checked of indeterminate checkbox to 'mixed' (#29115) Issue number: resolves Internal --------- ## What is the current behavior? We are not ever explicitly setting `aria-checked`. For checked and unchecked states (i.e. `true` and `false` for aria-checked), we don't need to set `aria-checked` because an input with a type of 'checkbox' has built-in semantics making `aria-checked` redundant. However, when the checkbox is in an indeterminate state, `aria-checked` should have a value of 'mixed'. We are not currently ever setting it to 'mixed'. See [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#description) for more details. ## What is the new behavior? - The checkbox's `aria-checked` has a value of 'true' when it is checked - The checkbox's `aria-checked` has a value of 'false' when it is unchecked - The checkbox's `aria-checked` has a value of 'mixed' when it is indeterminate ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --- core/src/components/checkbox/checkbox.tsx | 1 + .../src/components/checkbox/test/checkbox.spec.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index ab65f51a83..b05110a245 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -251,6 +251,7 @@ export class Checkbox implements ComponentInterface { return ( { expect(checkbox.checked).toBe(false); }); }); + +describe('ion-checkbox: indeterminate', () => { + it('should have a mixed value for aria-checked', async () => { + const page = await newSpecPage({ + components: [Checkbox], + html: ` + Checkbox + `, + }); + + const checkbox = page.body.querySelector('ion-checkbox')!; + + expect(checkbox.getAttribute('aria-checked')).toBe('mixed'); + }); +}); From 84f5defe33f57352076a8cfb2a139705597f7a21 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 6 Mar 2024 14:55:42 -0800 Subject: [PATCH 2/6] refactor(range): update value on touchEnd or drag (#29005) Issue number: resolves #28487 --------- ## What is the current behavior? There are two behaviors that need to be addressed. 1. The range value is updated when the gesture `onStart` event is fired. This can lead to the values being accidentally updated when the user is scrolling on the view. The user might tap on the range to scroll on the view, but the range value is updated instead. 2. The component prevents the view from scrolling while the user has touched any part of the range. The user might want to scroll and they happen to touch the range. This can lead to the user feeling disoriented because they can't scroll on the view anymore. These behaviors do not follow the native behavior of mobile devices. ## What is the new behavior? - The range value is updated on touch end or when the knob is being dragged. - The view can be scrolled while the user is not dragging the knob. - A new variable `isScrollingView` is used to determine if the user is scrolling on the view regardless of whether the user is dragging the knob or not. This determines what logic to apply. - The `pressedKnob` variable is no longer being set in the `onStart` event. It is now being set in the `onMove` and `onEnd` events. (the reason behind this can be found within the newly added comments) - The `initialContentScrollY` variable is no longer being set in the `onStart` event. It is now being set in the `onMove` event. (the reason behind this can be found within the newly added comments) I did not change the behavior of the range when the user is dragging the knob. The view should not scroll while the user is dragging the knob. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information The new behavior aligns with the native mobile devices. --- core/src/components/range/range.tsx | 168 +++++++++++++++--- .../components/range/test/range-events.e2e.ts | 33 ++++ 2 files changed, 172 insertions(+), 29 deletions(-) diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 1df4ed9c3f..d8904a2f54 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -299,8 +299,14 @@ export class Range implements ComponentInterface { el: rangeSlider, gestureName: 'range', gesturePriority: 100, - threshold: 0, - onStart: (ev) => this.onStart(ev), + /** + * Provide a threshold since the drag movement + * might be a user scrolling the view. + * If this is true, then the range + * should not move. + */ + threshold: 10, + onStart: () => this.onStart(), onMove: (ev) => this.onMove(ev), onEnd: (ev) => this.onEnd(ev), }); @@ -418,42 +424,101 @@ export class Range implements ComponentInterface { this.ionChange.emit({ value: this.value }); } - private onStart(detail: GestureDetail) { - const { contentEl } = this; - if (contentEl) { - this.initialContentScrollY = disableContentScrollY(contentEl); - } - - const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any); - const currentX = detail.currentX; - - // figure out which knob they started closer to - let ratio = clamp(0, (currentX - rect.left) / rect.width, 1); - if (isRTL(this.el)) { - ratio = 1 - ratio; - } - - this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B'; - - this.setFocus(this.pressedKnob); - - // update the active knob's position - this.update(currentX); - + /** + * The value should be updated on touch end or + * when the component is being dragged. + * This follows the native behavior of mobile devices. + * + * For example: When the user lifts their finger from the + * screen after tapping the bar or dragging the bar or knob. + */ + private onStart() { this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) }); } + /** + * The value should be updated while dragging the + * bar or knob. + * + * While the user is dragging, the view + * should not scroll. This is to prevent the user from + * feeling disoriented while dragging. + * + * The user can scroll on the view if the knob or + * bar is not being dragged. + * + * @param detail The details of the gesture event. + */ private onMove(detail: GestureDetail) { - this.update(detail.currentX); + const { contentEl, pressedKnob } = this; + const currentX = detail.currentX; + + /** + * Since the user is dragging on the bar or knob, the view should not scroll. + * + * This only needs to be done once. + */ + if (contentEl && this.initialContentScrollY === undefined) { + this.initialContentScrollY = disableContentScrollY(contentEl); + } + + /** + * The `pressedKnob` can be undefined if the user just + * started dragging the knob. + * + * This is necessary to determine which knob the user is dragging, + * especially when it's a dual knob. + * Plus, it determines when to apply certain styles. + * + * This only needs to be done once since the knob won't change + * while the user is dragging. + */ + if (pressedKnob === undefined) { + this.setPressedKnob(currentX); + } + + this.update(currentX); } - private onEnd(detail: GestureDetail) { + /** + * The value should be updated on touch end: + * - When the user lifts their finger from the screen after + * tapping the bar. + * + * @param detail The details of the gesture or mouse event. + */ + private onEnd(detail: GestureDetail | MouseEvent) { const { contentEl, initialContentScrollY } = this; - if (contentEl) { + const currentX = (detail as GestureDetail).currentX || (detail as MouseEvent).clientX; + + /** + * The `pressedKnob` can be undefined if the user never + * dragged the knob. They just tapped on the bar. + * + * This is necessary to determine which knob the user is changing, + * especially when it's a dual knob. + * Plus, it determines when to apply certain styles. + */ + if (this.pressedKnob === undefined) { + this.setPressedKnob(currentX); + } + + /** + * The user is no longer dragging the bar or + * knob (if they were dragging it). + * + * The user can now scroll on the view in the next gesture event. + */ + if (contentEl && initialContentScrollY !== undefined) { resetContentScrollY(contentEl, initialContentScrollY); } - this.update(detail.currentX); + // update the active knob's position + this.update(currentX); + /** + * Reset the pressed knob to undefined since the user + * may start dragging a different knob in the next gesture event. + */ this.pressedKnob = undefined; this.emitValueChange(); @@ -485,6 +550,19 @@ export class Range implements ComponentInterface { this.updateValue(); } + private setPressedKnob(currentX: number) { + const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any); + + // figure out which knob they started closer to + let ratio = clamp(0, (currentX - rect.left) / rect.width, 1); + if (isRTL(this.el)) { + ratio = 1 - ratio; + } + this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B'; + + this.setFocus(this.pressedKnob); + } + private get valA() { return ratioToValue(this.ratioA, this.min, this.max, this.step); } @@ -799,7 +877,39 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop } return ( -
(this.rangeSlider = rangeEl)}> +
(this.rangeSlider = rangeEl)} + /** + * Since the gesture has a threshold, the value + * won't change until the user has dragged past + * the threshold. This is to prevent the range + * from moving when the user is scrolling. + * + * This results in the value not being updated + * and the event emitters not being triggered + * if the user taps on the range. This is why + * we need to listen for the "pointerUp" event. + */ + onPointerUp={(ev: PointerEvent) => { + /** + * If the user drags the knob on the web + * version (does not occur on mobile), + * the "pointerUp" event will be triggered + * along with the gesture's events. + * This leads to duplicate events. + * + * By checking if the pressedKnob is undefined, + * we can determine if the "pointerUp" event was + * triggered by a tap or a drag. If it was + * dragged, the pressedKnob will be defined. + */ + if (this.pressedKnob === undefined) { + this.onStart(); + this.onEnd(ev); + } + }} + > {ticks.map((tick) => (
expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 }); }); + test('should emit end event on tap', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/28487', + }); + + await page.setContent(``, config); + + const range = page.locator('ion-range'); + const rangeEndSpy = await page.spyOnEvent('ionKnobMoveEnd'); + const rangeBoundingBox = await range.boundingBox(); + /** + * Coordinates for the click event. + * These need to be near the end of the range + * (or anything that isn't the current value). + * + * The number 50 is arbitrary, but it should be + * less than the width of the range. + */ + const x = rangeBoundingBox!.width - 50; + // The y coordinate is the middle of the range. + const y = rangeBoundingBox!.height / 2; + + // Click near the end of the range. + await range.click({ + position: { x, y }, + }); + + await rangeEndSpy.next(); + + expect(rangeEndSpy.length).toBe(1); + }); + // TODO FW-2873 test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => { skip.browser('webkit', 'mouse.wheel is not available in WebKit'); From 82709d308470755a24d9ce80f1c325185f671688 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 11 Mar 2024 09:36:31 -0400 Subject: [PATCH 3/6] chore(deps): update dependency @stencil/core to v4.12.5 (#29125) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@stencil/core](https://stenciljs.com/) ([source](https://togithub.com/ionic-team/stencil)) | [`4.12.4` -> `4.12.5`](https://renovatebot.com/diffs/npm/@stencil%2fcore/4.12.4/4.12.5) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@stencil%2fcore/4.12.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@stencil%2fcore/4.12.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@stencil%2fcore/4.12.4/4.12.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@stencil%2fcore/4.12.4/4.12.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
ionic-team/stencil (@​stencil/core) ### [`v4.12.5`](https://togithub.com/ionic-team/stencil/blob/HEAD/CHANGELOG.md#-4125-2024-03-04) [Compare Source](https://togithub.com/ionic-team/stencil/compare/v4.12.4...v4.12.5) ##### Bug Fixes - **custom-elements:** hydrate on client side ([#​5317](https://togithub.com/ionic-team/stencil/issues/5317)) ([d809658](https://togithub.com/ionic-team/stencil/commit/d809658635280e115d67f1403dba946cce1bb01b)), closes [#​3319](https://togithub.com/ionic-team/stencil/issues/3319)
--- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ionic-team/ionic-framework). Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- core/package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 2f1075f209..02ec3395b9 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1759,9 +1759,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.12.4", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.4.tgz", - "integrity": "sha512-KrwoXu9J1loWSvQQReilGPkt6/dCH/x5eTBDecCBPclz7vxUM13Iw9almBIffEpurk/kaMAglH0G7sAF/A2y1A==", + "version": "4.12.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz", + "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ==", "bin": { "stencil": "bin/stencil" }, @@ -11229,9 +11229,9 @@ "requires": {} }, "@stencil/core": { - "version": "4.12.4", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.4.tgz", - "integrity": "sha512-KrwoXu9J1loWSvQQReilGPkt6/dCH/x5eTBDecCBPclz7vxUM13Iw9almBIffEpurk/kaMAglH0G7sAF/A2y1A==" + "version": "4.12.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz", + "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ==" }, "@stencil/react-output-target": { "version": "0.5.3", From 402951ecb8fbeca2d7e82efb4e83ec66ac5a5f6e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 11 Mar 2024 08:56:08 -0700 Subject: [PATCH 4/6] chore(deps): update dependency @capacitor/core to v5.7.2 (#29134) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@capacitor/core](https://capacitorjs.com) ([source](https://togithub.com/ionic-team/capacitor)) | [`5.7.1` -> `5.7.2`](https://renovatebot.com/diffs/npm/@capacitor%2fcore/5.7.1/5.7.2) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fcore/5.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@capacitor%2fcore/5.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@capacitor%2fcore/5.7.1/5.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fcore/5.7.1/5.7.2?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
ionic-team/capacitor (@​capacitor/core) ### [`v5.7.2`](https://togithub.com/ionic-team/capacitor/releases/tag/5.7.2) [Compare Source](https://togithub.com/ionic-team/capacitor/compare/5.7.1...5.7.2) ##### Bug Fixes - **android:** prevent crash on script injection if the script is too long ([#​7316](https://togithub.com/ionic-team/capacitor/issues/7316)) ([67c00e2](https://togithub.com/ionic-team/capacitor/commit/67c00e2b18994c78433b4b35b7c9e69fa24277b0)) - **cli:** Attempt to verify non-cjs modules exist if cjs resolution fails ([#​7310](https://togithub.com/ionic-team/capacitor/issues/7310)) ([#​7313](https://togithub.com/ionic-team/capacitor/issues/7313)) ([28e7f08](https://togithub.com/ionic-team/capacitor/commit/28e7f08dd7a78a61a40f7c9f90ed30a94b167a35))
--- ### Configuration 📅 **Schedule**: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Never, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ionic-team/ionic-framework). Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- core/package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/core/package-lock.json b/core/package-lock.json index 02ec3395b9..d4ab8346bf 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -633,9 +633,9 @@ "dev": true }, "node_modules/@capacitor/core": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.1.tgz", - "integrity": "sha512-bwmka6FdvyXOpc5U6bOyx58S/Yl6r5lO2TK561f//KnjyXjxav25HWwhV4hthq3ZxJBMiAEucl9RK5vzgkP4Lw==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.2.tgz", + "integrity": "sha512-/OUtfINmk7ke32VtKIHRAy8NlunbeK+aCqCHOS+fvtr7nUsOJXPkYgbgqZp/CWXET/gSK1xxMecaVBzpE98UKA==", "dev": true, "dependencies": { "tslib": "^2.1.0" @@ -10416,9 +10416,9 @@ "dev": true }, "@capacitor/core": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.1.tgz", - "integrity": "sha512-bwmka6FdvyXOpc5U6bOyx58S/Yl6r5lO2TK561f//KnjyXjxav25HWwhV4hthq3ZxJBMiAEucl9RK5vzgkP4Lw==", + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.2.tgz", + "integrity": "sha512-/OUtfINmk7ke32VtKIHRAy8NlunbeK+aCqCHOS+fvtr7nUsOJXPkYgbgqZp/CWXET/gSK1xxMecaVBzpE98UKA==", "dev": true, "requires": { "tslib": "^2.1.0" From fedd0fab800e95067d5623c53ff3736c042c8404 Mon Sep 17 00:00:00 2001 From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:29:10 -0400 Subject: [PATCH 5/6] chore: update bug report template descriptions and required fields (#29135) Issue number: N/A --------- ## What is the current behavior? N/A ## What is the new behavior? - Code reproductions are now required for all new issue reports. The description around a reproduction and how developers can create one has been adjusted. - We only support Ionic v7 to LTS at this point in time. Sending developers to a readonly repository where they cannot file issues doesn't add any value. I've updated the description and link to the relevant support page and enterprise offering. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information --- .github/ISSUE_TEMPLATE/bug_report.yml | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index e305a482a2..09ee08f76f 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -20,12 +20,10 @@ body: id: affected-versions attributes: label: Ionic Framework Version - description: Which version(s) of Ionic Framework does this issue impact? For Ionic Framework 1.x issues, please use https://github.com/ionic-team/ionic-v1. For Ionic Framework 2.x and 3.x issues, please use https://github.com/ionic-team/ionic-v3. + description: Which version(s) of Ionic Framework does this issue impact? [Ionic Framework 1.x to 6.x are no longer supported](https://ionicframework.com/docs/reference/support#framework-maintenance-and-support-status). For extended support, considering visiting [Ionic's Enterprise offering](https://ionic.io/enterprise). options: - - v4.x - - v5.x - - v6.x - v7.x + - v8.x (Beta) - Nightly multiple: true validations: @@ -51,11 +49,11 @@ body: id: steps-to-reproduce attributes: label: Steps to Reproduce - description: Please explain the steps required to duplicate this issue. + description: Explain the steps required to reproduce this issue. placeholder: | - 1. - 2. - 3. + 1. Go to '...' + 2. Click on '...' + 3. Observe: '...' validations: required: true @@ -63,8 +61,15 @@ body: id: reproduction-url attributes: label: Code Reproduction URL - description: Please reproduce this issue in a blank Ionic Framework starter application and provide a link to the repo. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting. + description: | + Reproduce this issue in a blank [Ionic Framework starter application](https://ionicframework.com/start#basics) or a Stackblitz example. + + You can use the Stackblitz button available on any of the [component playgrounds](https://ionicframework.com/docs/components) to open an editable example. Remember to save your changes to obtain a link to copy. + + Reproductions cases must be minimal and focused around the specific problem you are experiencing. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting. placeholder: https://github.com/... + validations: + required: true - type: textarea id: ionic-info From 85b9d5c35f626ffc273d220549b0126ddc1f7e4b Mon Sep 17 00:00:00 2001 From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:34:32 -0400 Subject: [PATCH 6/6] fix(angular): add ionNavWillChange and ionNavDidChange types for nav (#29122) Issue number: resolves #29114 --------- ## What is the current behavior? The event types for `ion-nav` were not correctly applied to the angular component wrapper. ## What is the new behavior? - `ionNavWillChange` and `ionNavDidChange` event types are added to `ion-nav` component wrapper in Angular. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Dev-build: `7.7.5-dev.11709823131.1d3df428` Testing: - Open reproduction on original issue - Observe: Type errors for missing event properties - Install dev-build - (May need to reload) - Observe: Type errors are resolved --- .../common/src/directives/navigation/nav.ts | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/angular/common/src/directives/navigation/nav.ts b/packages/angular/common/src/directives/navigation/nav.ts index 585bffc040..78cfaa240f 100644 --- a/packages/angular/common/src/directives/navigation/nav.ts +++ b/packages/angular/common/src/directives/navigation/nav.ts @@ -1,4 +1,12 @@ -import { ElementRef, Injector, EnvironmentInjector, NgZone, ChangeDetectorRef, Directive } from '@angular/core'; +import { + ElementRef, + Injector, + EnvironmentInjector, + NgZone, + ChangeDetectorRef, + Directive, + EventEmitter, +} from '@angular/core'; import type { Components } from '@ionic/core'; import { AngularDelegate } from '../../providers/angular-delegate'; @@ -22,8 +30,16 @@ const NAV_METHODS = [ 'getPrevious', ]; -// eslint-disable-next-line @typescript-eslint/no-empty-interface -export declare interface IonNav extends Components.IonNav {} +export declare interface IonNav extends Components.IonNav { + /** + * Event fired when the nav will change components + */ + ionNavWillChange: EventEmitter>; + /** + * Event fired when the nav has changed components + */ + ionNavDidChange: EventEmitter>; +} @ProxyCmp({ inputs: NAV_INPUTS,