feat(modal): ability to programmatically set current sheet breakpoint (#24648)

Resolves #23917

Co-authored-by: Sean Perkins <sean@ionic.io>

angular/test/test-app/e2e/src/modal.spec.ts

@@ -74,5 +74,20 @@ describe('Modals: Inline', () => {
     cy.get('ion-modal').trigger('click', 20, 20);
 
     cy.get('ion-modal').children('.ion-page').should('not.exist');
-  })
+  });
+
+  describe('setting the current breakpoint', () => {
+
+    it('should emit ionBreakpointDidChange', () => {
+      cy.get('#open-modal').click();
+
+      cy.get('ion-modal').then(modal => {
+        (modal.get(0) as any).setCurrentBreakpoint(1);
+      });
+
+      cy.get('#breakpointDidChange').should('have.text', '1');
+    });
+
+  });
+
 });

angular/test/test-app/src/app/modal-inline/modal-inline.component.html

@@ -1,6 +1,13 @@
 <ion-button id="open-modal">Open Modal</ion-button>
 
-<ion-modal [animated]="false" trigger="open-modal" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5">
+<ul>
+  <li>
+    breakpointDidChange event count: <span id="breakpointDidChange">{{ breakpointDidChangeCounter }}</span>
+  </li>
+</ul>
+
+<ion-modal [animated]="false" trigger="open-modal" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5"
+  (ionBreakpointDidChange)="onBreakpointDidChange()">
   <ng-template>
     <ion-content>
       <ion-list>

angular/test/test-app/src/app/modal-inline/modal-inline.component.ts

@@ -13,9 +13,15 @@ export class ModalInlineComponent implements AfterViewInit {
 
   items: string[] = [];
 
+  breakpointDidChangeCounter = 0;
+
   ngAfterViewInit(): void {
     setTimeout(() => {
       this.items = ['A', 'B', 'C', 'D'];
     }, 1000);
   }
+
+  onBreakpointDidChange() {
+    this.breakpointDidChangeCounter++;
+  }
 }