fix(modal): prevent sheet gesture crash with late-bound breakpoints (#31202)

Issue number: internal

---------

## What is the current behavior?

Currently, when an `ion-modal`'s `breakpoints` are set after the
component has loaded, `sortedBreakpoints` stays empty.
`breakpointsChanged` had no `@Watch`, so it only ran once from the
manual call in `componentDidLoad`. `present()` still recalculates
`isSheetModal` to `true` from the late-set `breakpoints` (added in
#30839), so the sheet gesture initializes with an empty breakpoints
array and throws `Reduce of empty array with no initial value` on the
`breakpoints.reduce(...)` in `sheet.ts` when the sheet is swiped, which
breaks swiping entirely.

This shows up with framework bindings that land after the web component
loads, e.g., an inline `ion-modal` inside an Angular component rendered
through a plain `router-outlet` with zoneless change detection. It
doesn't reproduce with zone change detection, with
`ModalController.create`, or with the modal inside `ion-router-outlet`,
since those set `breakpoints` before the modal presents.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Now `breakpointsChanged` has `@Watch('breakpoints')`, so `breakpoints`
set after the component loads update `sortedBreakpoints`. This mirrors
how `trigger`/`triggerChanged` already handles late binding (a watch
plus a manual call in `componentDidLoad`). The sheet gesture then gets
the real breakpoints and swiping works.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

Sheet modal preview:
-
https://ionic-framework-git-fix-modal-late-breakpoints-ionic1.vercel.app/src/components/modal/test/sheet

Note that the preview won't show *this* working, but will show the modal
at least isn't broken from this change.

Current dev build:
```
8.8.10-dev.11781019195.14a7eeaf
```

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -438,6 +438,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   @Event() ionDragEnd!: EventEmitter<ModalDragEventDetail>;
 
+  @Watch('breakpoints')
   breakpointsChanged(breakpoints: number[] | undefined) {
     if (breakpoints !== undefined) {
       this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -399,4 +399,51 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       expect(Object.keys(dragEndEvent.detail).length).toBe(5);
     });
   });
+
+  test.describe(title('sheet modal: late breakpoints binding'), () => {
+    test('should not crash when swiped after breakpoints are set after the modal loads', async ({ page }) => {
+      const pageErrors: string[] = [];
+      page.on('pageerror', (err) => pageErrors.push(err.message));
+
+      await page.setContent(
+        `
+        <ion-modal initial-breakpoint="1">
+          <ion-content>Modal Content</ion-content>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const modal = page.locator('ion-modal');
+
+      /**
+       * Simulates a JS framework (e.g. Angular with zoneless change detection)
+       * applying the `breakpoints` binding after the web component has finished
+       * loading. `setContent` resolves after `componentDidLoad`, so this lands
+       * too late for the manual `breakpointsChanged()` call in `componentDidLoad`
+       * to pick it up
+       */
+      await modal.evaluate((el: HTMLIonModalElement) => {
+        el.breakpoints = [0, 1];
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      // Swiping the sheet down should snap it to breakpoint 0 and dismiss it
+      // without throwing an error
+      const handle = page.locator('ion-modal .modal-handle');
+      await expect(handle).toBeVisible();
+      await dragElementBy(handle, page, 0, 600);
+
+      // Flush any pending errors from the gesture's end handler
+      await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
+      expect(pageErrors).toEqual([]);
+
+      await ionModalDidDismiss.next();
+    });
+  });
 });