ionic-team · liamdebeasi · Dec 10, 2019 · Sep 12, 2019 · Sep 12, 2019 · Sep 12, 2019
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -1515,9 +1515,17 @@ export namespace Components {
     */
     'present': () => Promise<void>;
     /**
+    * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other.
+    */
+    'presentingElement'?: HTMLElement;
+    /**
     * If `true`, a backdrop will be displayed behind the modal.
     */
     'showBackdrop': boolean;
+    /**
+    * If `true`, the modal will support a swipe and pan drag gesture to close. Only supported on iOS as Android does not use this type of interaction.
+    */
+    'swipeGesture': boolean;
   }
   interface IonModalController {
     /**
@@ -4943,9 +4951,17 @@ declare namespace LocalJSX {
     */
     'onIonModalWillPresent'?: (event: CustomEvent<void>) => void;
     /**
+    * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other.
+    */
+    'presentingElement'?: HTMLElement;
+    /**
     * If `true`, a backdrop will be displayed behind the modal.
     */
     'showBackdrop'?: boolean;
+    /**
+    * If `true`, the modal will support a swipe and pan drag gesture to close. Only supported on iOS as Android does not use this type of interaction.
+    */
+    'swipeGesture'?: boolean;
   }
   interface IonModalController extends JSXBase.HTMLAttributes<HTMLIonModalControllerElement> {}
   interface IonNav extends JSXBase.HTMLAttributes<HTMLIonNavElement> {

diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -157,3 +157,7 @@
 
   font-weight: $action-sheet-ios-button-cancel-font-weight;
 }
+
+ion-backdrop {
+  opacity: 0.4;
+}
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
@@ -78,3 +78,7 @@
 .action-sheet-selected {
   font-weight: bold;
 }
+
+ion-backdrop {
+  opacity: 0.32;
+}
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
@@ -47,7 +47,6 @@
 .action-sheet-wrapper {
   @include position(null, 0, 0, 0);
   @include margin(auto);
-  @include transform(translate3d(0, 100%, 0));
 
   display: block;
   position: absolute;

diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts
@@ -10,11 +10,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.4);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
   return baseAnimation

diff --git a/core/src/components/action-sheet/animations/ios.leave.ts b/core/src/components/action-sheet/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.4, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
   return baseAnimation

diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
@@ -10,11 +10,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
   return baseAnimation

diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
@@ -10,11 +10,11 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
     .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
   return baseAnimation

diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
@@ -300,3 +300,7 @@
 .alert-button.activated {
   background-color: $alert-ios-button-background-color-activated;
 }
+
+ion-backdrop {
+  opacity: 0.3;
+}
diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
@@ -291,3 +291,7 @@
 .alert-button-inner {
   justify-content: $alert-md-button-group-justify-content;
 }
+
+ion-backdrop {
+  opacity: 0.32;
+}
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
@@ -64,7 +64,6 @@
   background: var(--background);
 
   contain: content;
-  opacity: 0;
   z-index: $z-index-overlay-wrapper;
 }
 

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { AlertButton, AlertInput, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -30,7 +30,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private processedButtons: AlertButton[] = [];
 
   presented = false;
-  animation?: Animation;
   mode = getIonMode(this);
 
   @Element() el!: HTMLIonAlertElement;

diff --git a/core/src/components/alert/animations/ios.enter.ts b/core/src/components/alert/animations/ios.enter.ts
@@ -10,14 +10,14 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.3);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .keyframes([
-      { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
-      { offset: 1, opacity: 1, transform: 'scale(1)' }
+      { opacity: '0.01', transform: 'scale(1.1)' },
+      { opacity: '1', transform: 'scale(1)' }
     ]);
 
   return baseAnimation

diff --git a/core/src/components/alert/animations/ios.leave.ts b/core/src/components/alert/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.3, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.99, transform: 'scale(1)' },
       { offset: 1, opacity: 0, transform: 'scale(0.9)' }

diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts
@@ -10,14 +10,14 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .keyframes([
-      { offset: 0, opacity: 0.01, transform: 'scale(0.9)' },
-      { offset: 1, opacity: 1, transform: 'scale(1)' }
+      { offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
+      { offset: 1, opacity: '1', transform: 'scale(1)' }
     ]);
 
   return baseAnimation

diff --git a/core/src/components/alert/animations/md.leave.ts b/core/src/components/alert/animations/md.leave.ts
@@ -10,11 +10,11 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
     .fromTo('opacity', 0.99, 0);
 
   return baseAnimation

diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html
@@ -96,7 +96,7 @@
           <ion-label position="fixed">Type #</ion-label>
           <div type="number" value="333" class="input input-md hydrated">
             <!---->
-            <input aria-disabled="false" autocapitalize="none" autocomplete="off" autocorrect="off" autofocus="false" class="native-input native-input-md"
+            <input style="caret-color: red" aria-disabled="false" autocapitalize="none" autocomplete="off" autocorrect="off" autofocus="false" class="native-input native-input-md"
               spellcheck="false" type="number">
             <button type="button" class="input-clear-icon" hidden=""></button>
           </div>

diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts
@@ -10,11 +10,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.3);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
       { offset: 1, opacity: 1, transform: 'scale(1)' }

diff --git a/core/src/components/loading/animations/ios.leave.ts b/core/src/components/loading/animations/ios.leave.ts
@@ -10,11 +10,11 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.3, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.99, transform: 'scale(1)' },
       { offset: 1, opacity: 0, transform: 'scale(0.9)' }

diff --git a/core/src/components/loading/animations/md.enter.ts b/core/src/components/loading/animations/md.enter.ts
@@ -10,11 +10,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.01, 0.32);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
       { offset: 1, opacity: 1, transform: 'scale(1)' }

diff --git a/core/src/components/loading/animations/md.leave.ts b/core/src/components/loading/animations/md.leave.ts
@@ -10,11 +10,11 @@ export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
   const wrapperAnimation = createAnimation();
 
   backdropAnimation
-    .addElement(baseEl.querySelector('ion-backdrop'))
+    .addElement(baseEl.querySelector('ion-backdrop')!)
     .fromTo('opacity', 0.32, 0);
 
   wrapperAnimation
-    .addElement(baseEl.querySelector('.loading-wrapper'))
+    .addElement(baseEl.querySelector('.loading-wrapper')!)
     .keyframes([
       { offset: 0, opacity: 0.99, transform: 'scale(1)' },
       { offset: 1, opacity: 0, transform: 'scale(0.9)' }

diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss
@@ -42,3 +42,7 @@
 .loading-spinner + .loading-content {
   @include margin-horizontal(16px, null);
 }
+
+ion-backdrop {
+  opacity: 0.3;
+}
diff --git a/core/src/components/loading/loading.md.scss b/core/src/components/loading/loading.md.scss
@@ -29,3 +29,7 @@
 .loading-spinner + .loading-content {
   @include margin-horizontal(16px, null);
 }
+
+ion-backdrop {
+  opacity: 0.32;
+}
diff --git a/core/src/components/loading/loading.scss b/core/src/components/loading/loading.scss
@@ -59,7 +59,6 @@
 
   background: var(--background);
 
-  opacity: 0;
   z-index: $z-index-overlay-wrapper;
 }
 

diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Animation, AnimationBuilder, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
+import { AnimationBuilder, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -27,7 +27,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
 
   presented = false;
-  animation?: Animation;
   mode = getIonMode(this);
 
   @Element() el!: HTMLIonLoadingElement;

diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts
@@ -151,6 +151,6 @@ export class MenuController {
    */
   @Method()
   async registerAnimation(name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) {
-    return menuController.registerAnimation(name, animation);
+    return menuController.registerAnimation(name, animation as any);
   }
 }
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
@@ -434,10 +434,10 @@ export class Menu implements ComponentInterface, MenuI {
 
     this.animation
       .easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
-      .onFinish(() => this.afterAnimation(shouldOpen), {
-        oneTimeCallback: true
-      })
-      .progressEnd(shouldComplete, newStepValue, 300);
+      .onFinish(
+        () => this.afterAnimation(shouldOpen),
+        { oneTimeCallback: true })
+      .progressEnd(shouldComplete ? 1 : 0, newStepValue, 300);
   }
 
   private beforeAnimation(shouldOpen: boolean) {