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

Resolves #23917

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

angular/src/directives/overlays/modal.ts

@@ -11,7 +11,7 @@ import {
   TemplateRef,
 } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
-import { Components } from '@ionic/core';
+import { Components, ModalBreakpointChangeEventDetail } from '@ionic/core';
 
 export declare interface IonModal extends Components.IonModal {
   /**
@@ -30,6 +30,10 @@ export declare interface IonModal extends Components.IonModal {
    * Emitted after the modal has dismissed.
    */
   ionModalDidDismiss: EventEmitter<CustomEvent>;
+  /**
+   * Emitted after the modal breakpoint has changed.
+   */
+  ionBreakpointDidChange: EventEmitter<CustomEvent<ModalBreakpointChangeEventDetail>>;
   /**
    * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
    */
@@ -68,7 +72,7 @@ export declare interface IonModal extends Components.IonModal {
     'translucent',
     'trigger',
   ],
-  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'setCurrentBreakpoint', 'getCurrentBreakpoint'],
 })
 @Component({
   selector: 'ion-modal',
@@ -119,6 +123,7 @@ export class IonModal {
       'ionModalWillPresent',
       'ionModalWillDismiss',
       'ionModalDidDismiss',
+      'ionBreakpointDidChange',
       'didPresent',
       'willPresent',
       'willDismiss',

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++;
+  }
 }