perf(all): dynamic import

core/src/components.d.ts

@@ -2265,39 +2265,6 @@ declare global {
 }
 
 
-declare global {
-
-  namespace StencilComponents {
-    interface IonInputShims {
-
-    }
-  }
-
-  interface HTMLIonInputShimsElement extends StencilComponents.IonInputShims, HTMLStencilElement {}
-
-  var HTMLIonInputShimsElement: {
-    prototype: HTMLIonInputShimsElement;
-    new (): HTMLIonInputShimsElement;
-  };
-  interface HTMLElementTagNameMap {
-    'ion-input-shims': HTMLIonInputShimsElement;
-  }
-  interface ElementTagNameMap {
-    'ion-input-shims': HTMLIonInputShimsElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      'ion-input-shims': JSXElements.IonInputShimsAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface IonInputShimsAttributes extends HTMLAttributes {
-
-    }
-  }
-}
-
-
 declare global {
 
   namespace StencilComponents {

core/src/components/action-sheet/action-sheet.tsx

@@ -2,10 +2,10 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@
 import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 
 @Component({

core/src/components/action-sheet/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Action Sheet Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/action-sheet/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Action Sheet Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/action-sheet/animations/md.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * MD Action Sheet Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/action-sheet/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * MD Action Sheet Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/alert/alert.tsx

@@ -3,10 +3,10 @@ import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassM
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 @Component({
   tag: 'ion-alert',

core/src/components/alert/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Alert Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/alert/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Alert Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/alert/animations/md.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Alert Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/alert/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Alert Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/app/app.ios.scss

@@ -15,8 +15,8 @@
   // TODO this can be simplified
   &.statusbar-padding {
     .ion-page,
+    > ion-header,
     .ion-page > ion-header,
-    ion-tab ion-nav .ion-page > ion-header,
     ion-menu > .menu-inner,
     ion-menu > .menu-inner > ion-header {
       @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);

core/src/components/app/app.tsx

@@ -21,6 +21,10 @@ export class App {
   @Prop({ context: 'window' }) win!: Window;
   @Prop({ context: 'config' }) config!: Config;
 
+  componentDidLoad() {
+    loadInputShims(this.win, this.config);
+  }
+
   hostData() {
     const hybrid = isHybrid(this.win);
     const statusBar = this.config.getBoolean('statusbarPadding', hybrid);
@@ -35,13 +39,17 @@ export class App {
 
   render() {
     const device = this.config.getBoolean('isDevice', isDevice(this.win));
-    const inputShims = this.config.getBoolean('inputShims', needInputShims(this.win));
-
     return [
-      inputShims && <ion-input-shims></ion-input-shims>,
       <ion-tap-click></ion-tap-click>,
       device && <ion-status-tap></ion-status-tap>,
       <slot></slot>
     ];
   }
 }
+
+async function loadInputShims(win: Window, config: Config) {
+  const inputShims = config.getBoolean('inputShims', needInputShims(win));
+  if (inputShims) {
+    (await import('../../utils/input-shims/input-shims')).startInputShims(win.document, config);
+  }
+}

core/src/components/input-shims/input-shims.tsx

@@ -1,101 +0,0 @@
-import { Component, Listen, Prop } from '@stencil/core';
-import { Config } from '../../interface';
-
-import enableHideCaretOnScroll from './hacks/hide-caret';
-import enableInputBlurring from './hacks/input-blurring';
-import enableScrollAssist from './hacks/scroll-assist';
-import enableScrollPadding from './hacks/scroll-padding';
-
-const INPUT_BLURRING = true;
-const SCROLL_ASSIST = true;
-const SCROLL_PADDING = true;
-const HIDE_CARET = true;
-
-@Component({
-  tag: 'ion-input-shims',
-})
-export class InputShims {
-
-  private didLoad = false;
-  private hideCaret = false;
-  private scrollAssist = false;
-  private keyboardHeight = 0;
-  private hideCaretMap = new WeakMap<HTMLElement, Function>();
-  private scrollAssistMap = new WeakMap<HTMLElement, Function>();
-
-  @Prop({ context: 'config' }) config!: Config;
-  @Prop({ context: 'document' }) doc!: Document;
-
-  componentDidLoad() {
-    this.keyboardHeight = this.config.getNumber('keyboardHeight', 290);
-    this.scrollAssist = this.config.getBoolean('scrollAssist', true);
-    this.hideCaret = this.config.getBoolean('hideCaretOnScroll', true);
-
-    const inputBlurring = this.config.getBoolean('inputBlurring', true);
-    if (inputBlurring && INPUT_BLURRING) {
-      enableInputBlurring(this.doc);
-    }
-
-    const scrollPadding = this.config.getBoolean('scrollPadding', true);
-    if (scrollPadding && SCROLL_PADDING) {
-      enableScrollPadding(this.doc, this.keyboardHeight);
-    }
-
-    // Input might be already loaded in the DOM before ion-device-hacks did.
-    // At this point we need to look for all the ion-inputs not registered yet
-    // and register them.
-    const inputs = Array.from(this.doc.querySelectorAll('ion-input'));
-    for (const input of inputs) {
-      this.registerInput(input);
-    }
-    this.didLoad = true;
-  }
-
-  @Listen('body:ionInputDidLoad')
-  protected onInputDidLoad(event: any) {
-    if (this.didLoad) {
-      this.registerInput(event.target);
-    }
-  }
-
-  @Listen('body:ionInputDidUnload')
-  protected onInputDidUnload(event: any) {
-    if (this.didLoad) {
-      this.unregisterInput(event.target);
-    }
-  }
-
-  private registerInput(componentEl: HTMLElement) {
-    const inputEl = componentEl.querySelector('input');
-    const scrollEl = componentEl.closest('ion-scroll');
-    const contentEl = componentEl.closest('ion-content');
-
-    if (!inputEl) {
-      return;
-    }
-
-    if (HIDE_CARET && scrollEl && this.hideCaret && !this.hideCaretMap.has(componentEl)) {
-      const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);
-      this.hideCaretMap.set(componentEl, rmFn);
-    }
-
-    if (SCROLL_ASSIST && contentEl && this.scrollAssist && !this.scrollAssistMap.has(componentEl)) {
-      const rmFn = enableScrollAssist(componentEl, inputEl, contentEl, this.keyboardHeight);
-      this.scrollAssistMap.set(componentEl, rmFn);
-    }
-  }
-
-  private unregisterInput(componentEl: HTMLElement) {
-    if (HIDE_CARET && this.hideCaret) {
-      const fn = this.hideCaretMap.get(componentEl);
-      fn && fn();
-      this.hideCaretMap.delete(componentEl);
-    }
-
-    if (SCROLL_ASSIST && this.scrollAssist) {
-      const fn = this.scrollAssistMap.get(componentEl);
-      fn && fn();
-      this.scrollAssistMap.delete(componentEl);
-    }
-  }
-}

core/src/components/loading/animations/ios.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Loading Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/loading/animations/ios.leave.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Loading Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/loading/animations/md.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Loading Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/loading/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Loading Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/loading/loading.tsx

@@ -3,11 +3,11 @@ import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
 
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 @Component({
   tag: 'ion-loading',

core/src/components/menu-controller/animations/base.ts

@@ -6,7 +6,7 @@ import { Animation } from '../../../interface';
  * type will provide their own animations for open and close
  * and registers itself with Menu.
  */
-export default function baseAnimation(Animation: Animation): Promise<Animation> {
+export function baseAnimation(Animation: Animation): Promise<Animation> {
   // https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
   // https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
 

core/src/components/menu-controller/animations/overlay.ts

@@ -1,5 +1,5 @@
 import { Animation, Menu } from '../../../interface';
-import baseAnimation from './base';
+import { baseAnimation } from './base';
 
 const BOX_SHADOW_WIDTH = 8;
 /**
@@ -8,7 +8,7 @@ const BOX_SHADOW_WIDTH = 8;
  * The menu slides over the content. The content
  * itself, which is under the menu, does not move.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
+export function menuOverlayAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
   let closedX: string, openedX: string;
   const width = menu.width + BOX_SHADOW_WIDTH;
   if (menu.isEndSide) {

core/src/components/menu-controller/animations/push.ts

@@ -1,5 +1,5 @@
 import { Animation, Menu } from '../../../interface';
-import baseAnimation from './base';
+import { baseAnimation } from './base';
 
 /**
  * @hidden
@@ -7,7 +7,7 @@ import baseAnimation from './base';
  * The content slides over to reveal the menu underneath.
  * The menu itself also slides over to reveal its bad self.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
+export function menuPushAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
 
   let contentOpenedX: string, menuClosedX: string;
   const width = menu.width;

core/src/components/menu-controller/animations/reveal.ts

@@ -1,5 +1,5 @@
 import { Animation, Menu } from '../../../interface';
-import baseAnimation from './base';
+import { baseAnimation } from './base';
 
 /**
  * @hidden
@@ -7,7 +7,7 @@ import baseAnimation from './base';
  * The content slides over to reveal the menu underneath.
  * The menu itself, which is under the content, does not move.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
+export function menuRevealAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
   const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
 
   const contentOpen = new Animation()

core/src/components/menu-controller/menu-controller.ts

@@ -1,9 +1,9 @@
 import { Component, Method, Prop } from '@stencil/core';
 import { Animation, AnimationBuilder, Menu } from '../../interface';
 
-import MenuOverlayAnimation from './animations/overlay';
-import MenuPushAnimation from './animations/push';
-import MenuRevealAnimation from './animations/reveal';
+import { menuOverlayAnimation } from './animations/overlay';
+import { menuPushAnimation } from './animations/push';
+import { menuRevealAnimation } from './animations/reveal';
 
 @Component({
   tag: 'ion-menu-controller'
@@ -16,9 +16,9 @@ export class MenuController {
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
 
   constructor() {
-    this.registerAnimation('reveal', MenuRevealAnimation);
-    this.registerAnimation('push', MenuPushAnimation);
-    this.registerAnimation('overlay', MenuOverlayAnimation);
+    this.registerAnimation('reveal', menuRevealAnimation);
+    this.registerAnimation('push', menuPushAnimation);
+    this.registerAnimation('overlay', menuOverlayAnimation);
   }
 
   /**
@@ -279,4 +279,4 @@ export class MenuController {
 
 }
 
-export { MenuOverlayAnimation, MenuPushAnimation, MenuRevealAnimation };
+export { menuOverlayAnimation, menuPushAnimation, menuRevealAnimation };

core/src/components/modal/animations/ios.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Modal Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/modal/animations/ios.leave.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Modal Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/modal/animations/md.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Modal Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/modal/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Modal Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/modal/modal.tsx

@@ -5,11 +5,11 @@ import { attachComponent, detachComponent } from '../../utils/framework-delegate
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
 
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 @Component({
   tag: 'ion-modal',

core/src/components/picker/animations/ios.enter.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Picker Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/picker/animations/ios.leave.ts

@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Picker Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/picker/picker.tsx

@@ -4,8 +4,8 @@ import { Animation, AnimationBuilder, Config, CssClassMap, Mode, PickerButton, P
 import { OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
 
 @Component({
   tag: 'ion-picker',

core/src/components/popover/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Popover Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
   let originY = 'top';
   let originX = 'left';
 

core/src/components/popover/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Popover Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/popover/animations/md.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Popover Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
   let originY = 'top';
   let originX = 'left';
 

core/src/components/popover/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Popover Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

core/src/components/popover/popover.tsx

@@ -5,11 +5,11 @@ import { attachComponent, detachComponent } from '../../utils/framework-delegate
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
 
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 @Component({
   tag: 'ion-popover',

core/src/components/router/utils/debug.ts

@@ -2,11 +2,12 @@ import { RouteChain } from './interface';
 import { generatePath } from './path';
 
 export function printRoutes(routes: RouteChain[]) {
-  console.debug('%c[ion-core]', 'font-weight: bold', `registered ${routes.length} routes`);
+  console.groupCollapsed(`[ion-core] registered ${routes.length} routes`);
   for (const chain of routes) {
     const path: string[] = [];
     chain.forEach(r => path.push(...r.path));
     const ids = chain.map(r => r.id);
     console.debug(`%c ${generatePath(path)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
   }
+  console.groupEnd();
 }

core/src/components/toast/animations/ios.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Toast Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();

core/src/components/toast/animations/ios.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Toast Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();

core/src/components/toast/animations/md.enter.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * MD Toast Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();

core/src/components/toast/animations/md.leave.ts

@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * md Toast Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const wrapperAnimation = new Animation();

core/src/components/toast/toast.tsx

@@ -4,11 +4,11 @@ import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
 import { OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
 
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 @Component({
   tag: 'ion-toast',

core/src/utils/animations/ios.transition.ts

@@ -9,7 +9,7 @@ const TRANSLATEX = 'translateX';
 const CENTER = '0%';
 const OFF_OPACITY = 0.8;
 
-export default function iosTransitionAnimation(Animation: Animation, navEl: HTMLElement, opts: TransitionOptions): Promise<Animation> {
+export function iosTransitionAnimation(Animation: Animation, navEl: HTMLElement, opts: TransitionOptions): Promise<Animation> {
 
   const isRTL = document.dir === 'rtl';
   const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';

core/src/utils/animations/md.transition.ts

@@ -5,7 +5,7 @@ const TRANSLATEY = 'translateY';
 const OFF_BOTTOM = '40px';
 const CENTER = '0px';
 
-export default function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: TransitionOptions): Promise<Animation> {
+export function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: TransitionOptions): Promise<Animation> {
 
   const enteringEl = opts.enteringEl;
   const leavingEl = opts.leavingEl;

core/src/utils/input-shims/hacks/hide-caret.ts

@@ -1,7 +1,7 @@
 import { isFocused, relocateInput } from './common';
 
 
-export default function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLInputElement, scrollEl: HTMLIonScrollElement) {
+export function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLInputElement, scrollEl: HTMLIonScrollElement) {
   if (!scrollEl || !inputEl) {
     return () => { return; };
   }

core/src/utils/input-shims/hacks/input-blurring.ts

@@ -1,7 +1,7 @@
 
 const SKIP_BLURRING = ['INPUT', 'TEXTAREA', 'ION-INPUT', 'ION-TEXTAREA'];
 
-export default function enableInputBlurring(doc: Document) {
+export function enableInputBlurring(doc: Document) {
   console.debug('Input: enableInputBlurring');
 
   let focused = true;

core/src/utils/input-shims/hacks/scroll-assist.ts

@@ -3,7 +3,7 @@ import { isFocused, relocateInput } from './common';
 import { getScrollData } from './scroll-data';
 
 
-export default function enableScrollAssist(
+export function enableScrollAssist(
   componentEl: HTMLElement,
   inputEl: HTMLInputElement,
   contentEl: HTMLIonContentElement,

core/src/utils/input-shims/hacks/scroll-padding.ts

@@ -1,6 +1,6 @@
 const PADDING_TIMER_KEY = '$ionPaddingTimer';
 
-export default function enableScrollPadding(doc: Document, keyboardHeight: number) {
+export function enableScrollPadding(doc: Document, keyboardHeight: number) {
   console.debug('Input: enableScrollPadding');
 
   function onFocusin(ev: any) {

core/src/utils/input-shims/input-shims.ts

@@ -0,0 +1,83 @@
+
+import { Config } from '../../interface';
+import { enableHideCaretOnScroll } from './hacks/hide-caret';
+import { enableInputBlurring } from './hacks/input-blurring';
+import { enableScrollAssist } from './hacks/scroll-assist';
+import { enableScrollPadding } from './hacks/scroll-padding';
+
+const INPUT_BLURRING = true;
+const SCROLL_ASSIST = true;
+const SCROLL_PADDING = true;
+const HIDE_CARET = true;
+
+export function startInputShims(
+  doc: Document,
+  config: Config,
+) {
+  const keyboardHeight = config.getNumber('keyboardHeight', 290);
+  const scrollAssist = config.getBoolean('scrollAssist', true);
+  const hideCaret = config.getBoolean('hideCaretOnScroll', true);
+  const inputBlurring = config.getBoolean('inputBlurring', true);
+  const scrollPadding = config.getBoolean('scrollPadding', true);
+
+  const hideCaretMap = new WeakMap<HTMLElement, Function>();
+  const scrollAssistMap = new WeakMap<HTMLElement, Function>();
+
+  function registerInput(componentEl: HTMLElement) {
+    const inputEl = componentEl.querySelector('input');
+    const scrollEl = componentEl.closest('ion-scroll');
+    const contentEl = componentEl.closest('ion-content');
+
+    if (!inputEl) {
+      return;
+    }
+
+    if (HIDE_CARET && scrollEl && hideCaret && !hideCaretMap.has(componentEl)) {
+      const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);
+      hideCaretMap.set(componentEl, rmFn);
+    }
+
+    if (SCROLL_ASSIST && contentEl && scrollAssist && !scrollAssistMap.has(componentEl)) {
+      const rmFn = enableScrollAssist(componentEl, inputEl, contentEl, keyboardHeight);
+      scrollAssistMap.set(componentEl, rmFn);
+    }
+  }
+
+  function unregisterInput(componentEl: HTMLElement) {
+    if (HIDE_CARET && hideCaret) {
+      const fn = hideCaretMap.get(componentEl);
+      fn && fn();
+      hideCaretMap.delete(componentEl);
+    }
+
+    if (SCROLL_ASSIST && scrollAssist) {
+      const fn = scrollAssistMap.get(componentEl);
+      fn && fn();
+      scrollAssistMap.delete(componentEl);
+    }
+  }
+
+  if (inputBlurring && INPUT_BLURRING) {
+    enableInputBlurring(doc);
+  }
+
+  if (scrollPadding && SCROLL_PADDING) {
+    enableScrollPadding(doc, keyboardHeight);
+  }
+
+  // Input might be already loaded in the DOM before ion-device-hacks did.
+  // At this point we need to look for all the ion-inputs not registered yet
+  // and register them.
+  const inputs = Array.from(doc.querySelectorAll('ion-input'));
+  for (const input of inputs) {
+    registerInput(input);
+  }
+
+  doc.body.addEventListener('ionInputDidLoad', (event) => {
+    registerInput(event.target as any);
+  });
+
+  doc.body.addEventListener('ionInputDidUnload', (event) => {
+    unregisterInput(event.target as any);
+  });
+}

core/src/utils/transition.ts

@@ -1,26 +1,29 @@
 import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../interface';
 
-import iosTransitionAnimation from './animations/ios.transition';
-import mdTransitionAnimation from './animations/md.transition';
+const iosTransitionAnimation = () => import('./animations/ios.transition');
+const mdTransitionAnimation = () => import('./animations/md.transition');
 
-export function transition(opts: TransitionOptions): Promise<Animation|null> {
+export async function transition(opts: TransitionOptions): Promise<Animation|null> {
   beforeTransition(opts);
 
-  const animationBuilder = getAnimationBuilder(opts);
+  const animationBuilder = await getAnimationBuilder(opts);
   return (animationBuilder)
     ? animation(animationBuilder, opts)
     : noAnimation(opts); // fast path for no animation
 }
 
-function getAnimationBuilder(opts: TransitionOptions): AnimationBuilder | undefined {
+async function getAnimationBuilder(opts: TransitionOptions): Promise<AnimationBuilder | undefined> {
   if (!opts.leavingEl || opts.animated === false || opts.duration === 0) {
     return undefined;
   }
   if (opts.animationBuilder) {
     return opts.animationBuilder;
   }
-  return opts.mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation;
+  const builder = (opts.mode === 'ios')
+    ? (await iosTransitionAnimation()).iosTransitionAnimation
+    : (await mdTransitionAnimation()).mdTransitionAnimation;
 
+  return builder;
 }
 
 function beforeTransition(opts: TransitionOptions) {

core/tsconfig.json

@@ -13,7 +13,7 @@
       "dom",
       "es2017"
     ],
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "noImplicitAny": true,
     "noImplicitReturns": true,