4.6.1

revert disconnecting page on leaving page
test(e2e): increase wait time
2026-03-13 10:22:08 +08:00 · 2019-07-09 12:28:12 -04:00 · 2019-07-09 10:32:46 +02:00 · 2019-07-08 13:16:17 -04:00 · 2019-07-08 11:11:49 -04:00 · 2019-07-06 19:33:34 +02:00
47 changed files with 599 additions and 271 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,30 @@
+## [4.6.1](https://github.com/ionic-team/ionic/compare/v4.6.0...v4.6.1) (2019-07-09)
+
+
+### Bug Fixes
+
+* **app:** add hydrated to hide white screen with multiple ionic dependencies ([#18649](https://github.com/ionic-team/ionic/issues/18649))
+* **datetime:** datetime no longer reports having a value if none is set ([#18541](https://github.com/ionic-team/ionic/issues/18541)) ([92e0f98](https://github.com/ionic-team/ionic/commit/92e0f98)), closes [#17979](https://github.com/ionic-team/ionic/issues/17979) [#18540](https://github.com/ionic-team/ionic/issues/18540)
+* **fab-button:** set opacity on disabled fab button ([#18685](https://github.com/ionic-team/ionic/issues/18685)) ([6042b39](https://github.com/ionic-team/ionic/commit/6042b39)), closes [#18682](https://github.com/ionic-team/ionic/issues/18682)
+* **icon:** load icons properly with baseHref ([#18650](https://github.com/ionic-team/ionic/issues/18650)), ([#18637](https://github.com/ionic-team/ionic/issues/18637))
+* **icon:** bind icon name properly ([#18707](https://github.com/ionic-team/ionic/issues/18707))
+* **infinite-scroll:** fix scroll listener ([0d58101](https://github.com/ionic-team/ionic/commit/0d58101))
+* **item:** do not disable entire item if there are multiple inputs ([#18696](https://github.com/ionic-team/ionic/issues/18696)) ([dfa2b13](https://github.com/ionic-team/ionic/commit/dfa2b13)), closes [#18655](https://github.com/ionic-team/ionic/issues/18655) [#18670](https://github.com/ionic-team/ionic/issues/18670)
+* **router-link:** add missing target prop ([#18659](https://github.com/ionic-team/ionic/issues/18659)) ([1f51ab2](https://github.com/ionic-team/ionic/commit/1f51ab2)), closes [#18655](https://github.com/ionic-team/ionic/issues/18655)
+* **router-outlet:** fix swipe to go back ([b69fb69](https://github.com/ionic-team/ionic/commit/b69fb69))
+* **scss:** copy all scss files ([36a58df](https://github.com/ionic-team/ionic/commit/36a58df))
+* **searchbar:** proper styling after navigating ([#18642](https://github.com/ionic-team/ionic/issues/18642))
+* **slides:** use correct order for pushing slides dynamically ([#18633](https://github.com/ionic-team/ionic/issues/18633))
+* **tabs:** select proper tab by default and do not emit tab change if selectedTab is undefined ([03c834c](https://github.com/ionic-team/ionic/commit/03c834c))
+* **overlay:** make create opts optional ([44c88ad](https://github.com/ionic-team/ionic/commit/44c88ad))
+
+
+### Performance Improvements
+
+* **angular:** skip zone ([e059fc8](https://github.com/ionic-team/ionic/commit/e059fc8))
+
+
+
 # [4.6.0 Carbon](https://github.com/ionic-team/ionic/compare/v4.5.0...v4.6.0) (2019-06-26)


--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "4.6.0",
+  "version": "4.6.1",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -45,7 +45,7 @@
    "css/"
  ],
  "dependencies": {
-    "@ionic/core": "4.6.0",
+    "@ionic/core": "4.6.1",
    "tslib": "^1.9.3"
  },
  "peerDependencies": {
@@ -73,12 +73,12 @@
    "@angular/platform-browser": "^7.2.1",
    "@angular/platform-browser-dynamic": "^7.2.1",
    "@angular/router": "^7.2.1",
-    "@types/node": "~10.12.0",
+    "@types/node": "~12.0.12",
    "fs-extra": "^7.0.0",
    "glob": "^7.1.3",
    "rollup": "^1.1.2",
    "rollup-plugin-node-resolve": "^4.0.0",
-    "rxjs": "^6.2.0",
+    "rxjs": "^6.5.2",
    "tsickle": "^0.34.0",
    "tslint": "^5.12.1",
    "tslint-ionic-rules": "0.0.21",
--- a/angular/src/app-initialize.ts
+++ b/angular/src/app-initialize.ts
@@ -1,56 +1,42 @@
+import { NgZone } from '@angular/core';
 import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';

 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';

-export function appInitialize(config: Config, doc: Document) {
+export function appInitialize(config: Config, doc: Document, zone: NgZone) {
  return (): any => {
    const win: IonicWindow | undefined = doc.defaultView as any;
    if (win) {
      const Ionic = win.Ionic = win.Ionic || {};

-      Ionic.config = config;
+      Ionic.config = {
+        ...config,
+        _zoneGate: (h: any) => zone.run(h)
+      };
+
+      const aelFn = '__zone_symbol__addEventListener' in (document.body as any)
+        ? '__zone_symbol__addEventListener'
+        : 'addEventListener';

      return applyPolyfills().then(() => {
        return defineCustomElements(win, {
          exclude: ['ion-tabs', 'ion-tab'],
          syncQueue: true,
-          raf: h => (win.__zone_symbol__requestAnimationFrame) ? win.__zone_symbol__requestAnimationFrame(h) : requestAnimationFrame(h),
+          jmp: (h: any) => zone.runOutsideAngular(h),
+          raf: h => {
+            return zone.runOutsideAngular(() => {
+              return (win.__zone_symbol__requestAnimationFrame) ? win.__zone_symbol__requestAnimationFrame(h) : requestAnimationFrame(h);
+            });
+          },
          ael(elm, eventName, cb, opts) {
-            if ((elm as any).__zone_symbol__addEventListener && skipZone(eventName)) {
-              (elm as any).__zone_symbol__addEventListener(eventName, cb, opts);
-            } else {
-              elm.addEventListener(eventName, cb, opts);
-            }
+            (elm as any)[aelFn](eventName, cb, opts);
          },
          rel(elm, eventName, cb, opts) {
-            if ((elm as any).__zone_symbol__removeEventListener && skipZone(eventName)) {
-              (elm as any).__zone_symbol__removeEventListener(eventName, cb, opts);
-            } else {
-              elm.removeEventListener(eventName, cb, opts);
-            }
+            elm.removeEventListener(eventName, cb, opts);
          }
        });
      });
    }
  };
 }
-
-const SKIP_ZONE = [
-  'scroll',
-  'resize',
-
-  'touchstart',
-  'touchmove',
-  'touchend',
-
-  'mousedown',
-  'mousemove',
-  'mouseup',
-
-  'ionStyle',
-];
-
-function skipZone(eventName: string) {
-  return SKIP_ZONE.indexOf(eventName) >= 0;
-}
--- a/angular/src/directives/control-value-accessors/value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/value-accessor.ts
@@ -42,16 +42,14 @@ export class ValueAccessor implements ControlValueAccessor {
 }

 export function setIonicClasses(element: ElementRef) {
-  requestAnimationFrame(() => {
-    const input = element.nativeElement as HTMLElement;
-    const classes = getClasses(input);
-    setClasses(input, classes);
+  const input = element.nativeElement as HTMLElement;
+  const classes = getClasses(input);
+  setClasses(input, classes);

-    const item = input.closest('ion-item');
-    if (item) {
-      setClasses(item, classes);
-    }
-  });
+  const item = input.closest('ion-item');
+  if (item) {
+    setClasses(item, classes);
+  }
 }

 function getClasses(element: HTMLElement) {
--- a/angular/src/directives/navigation/ion-router-outlet.ts
+++ b/angular/src/directives/navigation/ion-router-outlet.ts
@@ -1,5 +1,5 @@
 import { Location } from '@angular/common';
-import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
+import { Attribute, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
@@ -57,7 +57,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
    private resolver: ComponentFactoryResolver,
    @Attribute('name') name: string,
    @Optional() @Attribute('tabs') tabs: string,
-    private changeDetector: ChangeDetectorRef,
    private config: Config,
    private navCtrl: NavController,
    commonLocation: Location,
@@ -206,12 +205,11 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
      // Calling `markForCheck` to make sure we will run the change detection when the
      // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
      enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
+      enteringView.ref.changeDetectorRef.detectChanges();

      // Store references to the proxy by component
      this.proxyMap.set(cmpRef.instance, activatedRouteProxy);
      this.currentActivatedRoute$.next({ component: cmpRef.instance, activatedRoute });
-
-      this.changeDetector.markForCheck();
    }

    this.activatedView = enteringView;
--- a/angular/src/directives/navigation/stack-controller.ts
+++ b/angular/src/directives/navigation/stack-controller.ts
@@ -44,11 +44,7 @@ export class StackController {

  getExistingView(activatedRoute: ActivatedRoute): RouteView | undefined {
    const activatedUrlKey = getUrl(this.router, activatedRoute);
-    const view = this.views.find(vw => vw.url === activatedUrlKey);
-    if (view) {
-      view.ref.changeDetectorRef.reattach();
-    }
-    return view;
+    return this.views.find(vw => vw.url === activatedUrlKey);
  }

  setActive(enteringView: RouteView): Promise<StackEvent> {
@@ -95,15 +91,15 @@ export class StackController {
    }

    const views = this.insertView(enteringView, direction);
-    return this.wait(async () => {
-      await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
-      await cleanupAsync(enteringView, views, viewsSnapshot, this.location);
-      return {
-        enteringView,
-        direction,
-        animation,
-        tabSwitch
-      };
+    return this.wait(() => {
+      return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false)
+        .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location))
+        .then(() => ({
+          enteringView,
+          direction,
+          animation,
+          tabSwitch
+        }));
    });
  }

@@ -138,13 +134,12 @@ export class StackController {
    });
  }

-  async startBackTransition() {
+  startBackTransition() {
    const leavingView = this.activeView;
    if (leavingView) {
      const views = this.getStack(leavingView.stackId);
      const enteringView = views[views.length - 2];
-      enteringView.ref.changeDetectorRef.reattach();
-      await this.wait(() => {
+      return this.wait(() => {
        return this.transition(
          enteringView, // entering view
          leavingView, // leaving view
@@ -154,6 +149,7 @@ export class StackController {
        );
      });
    }
+    return Promise.resolve();
  }

  endBackTransition(shouldComplete: boolean) {
@@ -189,7 +185,7 @@ export class StackController {
    return this.views.slice();
  }

-  private async transition(
+  private transition(
    enteringView: RouteView | undefined,
    leavingView: RouteView | undefined,
    direction: 'forward' | 'back' | undefined,
@@ -198,8 +194,16 @@ export class StackController {
  ) {
    if (this.skipTransition) {
      this.skipTransition = false;
-      return;
+      return Promise.resolve(false);
    }
+    if (enteringView) {
+      enteringView.ref.changeDetectorRef.reattach();
+    }
+    // TODO: disconnect leaving page from change detection to
+    // reduce jank during the page transition
+    // if (leavingView) {
+    //   leavingView.ref.changeDetectorRef.detach();
+    // }
    const enteringEl = enteringView ? enteringView.element : undefined;
    const leavingEl = leavingView ? leavingView.element : undefined;
    const containerEl = this.containerEl;
@@ -209,15 +213,15 @@ export class StackController {
        containerEl.appendChild(enteringEl);
      }

-      await containerEl.componentOnReady();
-      await containerEl.commit(enteringEl, leavingEl, {
+      return this.zone.runOutsideAngular(() => containerEl.commit(enteringEl, leavingEl, {
        deepWait: true,
        duration: direction === undefined ? 0 : undefined,
        direction,
        showGoBack,
        progressAnimation
-      });
+      }));
    }
+    return Promise.resolve(false);
  }

  private async wait<T>(task: () => Promise<T>): Promise<T> {
@@ -245,7 +249,6 @@ function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: Rout
    .forEach(destroyView);

  views.forEach(view => {
-
    /**
     * In the event that a user navigated multiple
     * times in rapid succession, we want to make sure
--- a/angular/src/directives/proxies-utils.ts
+++ b/angular/src/directives/proxies-utils.ts
@@ -6,7 +6,9 @@ export function proxyInputs(Cmp: any, inputs: string[]) {
  inputs.forEach(item => {
    Object.defineProperty(Prototype, item, {
      get() { return this.el[item]; },
-      set(val: any) { this.el[item] = val; },
+      set(val: any) {
+        this.z.runOutsideAngular(() => this.el[item] = val);
+      },
    });
  });
 }
@@ -16,7 +18,7 @@ export function proxyMethods(Cmp: any, methods: string[]) {
  methods.forEach(methodName => {
    Prototype[methodName] = function() {
      const args = arguments;
-      return this.el.componentOnReady().then((el: any) => el[methodName].apply(el, args));
+      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
    };
  });
 }
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1,15 +1,15 @@
 /* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { proxyInputs, proxyMethods, proxyOutputs } from './proxies-utils';

-import { Components } from '@ionic/core'
+import { Components } from '@ionic/core';

 export declare interface IonApp extends Components.IonApp {}
@Component({ selector: 'ion-app', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonApp {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -19,7 +19,7 @@ export declare interface IonAvatar extends Components.IonAvatar {}
@Component({ selector: 'ion-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonAvatar {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -29,7 +29,7 @@ export declare interface IonBackButton extends Components.IonBackButton {}
@Component({ selector: 'ion-back-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'text', 'type'] })
 export class IonBackButton {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -41,7 +41,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {}
 export class IonBackdrop {
  ionBackdropTap!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionBackdropTap']);
@@ -53,7 +53,7 @@ export declare interface IonBadge extends Components.IonBadge {}
@Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonBadge {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -66,7 +66,7 @@ export class IonButton {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
@@ -78,7 +78,7 @@ export declare interface IonButtons extends Components.IonButtons {}
@Component({ selector: 'ion-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonButtons {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -88,7 +88,7 @@ export declare interface IonCard extends Components.IonCard {}
@Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'target', 'type'] })
 export class IonCard {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -99,7 +99,7 @@ export declare interface IonCardContent extends Components.IonCardContent {}
@Component({ selector: 'ion-card-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode'] })
 export class IonCardContent {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -110,7 +110,7 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
@Component({ selector: 'ion-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'translucent'] })
 export class IonCardHeader {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -121,7 +121,7 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
@Component({ selector: 'ion-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonCardSubtitle {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -132,7 +132,7 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
@Component({ selector: 'ion-card-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonCardTitle {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -146,7 +146,7 @@ export class IonCheckbox {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
@@ -158,7 +158,7 @@ export declare interface IonChip extends Components.IonChip {}
@Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'outline'] })
 export class IonChip {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -169,7 +169,7 @@ export declare interface IonCol extends Components.IonCol {}
@Component({ selector: 'ion-col', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'] })
 export class IonCol {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -183,7 +183,7 @@ export class IonContent {
  ionScroll!: EventEmitter<CustomEvent>;
  ionScrollEnd!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']);
@@ -200,7 +200,7 @@ export class IonDatetime {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur']);
@@ -213,7 +213,7 @@ export declare interface IonFab extends Components.IonFab {}
@Component({ selector: 'ion-fab', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['activated', 'edge', 'horizontal', 'vertical'] })
 export class IonFab {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -227,7 +227,7 @@ export class IonFabButton {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
@@ -239,7 +239,7 @@ export declare interface IonFabList extends Components.IonFabList {}
@Component({ selector: 'ion-fab-list', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['activated', 'side'] })
 export class IonFabList {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -250,7 +250,7 @@ export declare interface IonFooter extends Components.IonFooter {}
@Component({ selector: 'ion-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
 export class IonFooter {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -261,7 +261,7 @@ export declare interface IonGrid extends Components.IonGrid {}
@Component({ selector: 'ion-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['fixed'] })
 export class IonGrid {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -272,7 +272,7 @@ export declare interface IonHeader extends Components.IonHeader {}
@Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
 export class IonHeader {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -283,7 +283,7 @@ export declare interface IonIcon extends Components.IonIcon {}
@Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
 export class IonIcon {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -297,7 +297,7 @@ export class IonImg {
  ionImgDidLoad!: EventEmitter<CustomEvent>;
  ionError!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']);
@@ -310,7 +310,7 @@ export declare interface IonInfiniteScroll extends Components.IonInfiniteScroll
 export class IonInfiniteScroll {
  ionInfinite!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionInfinite']);
@@ -323,7 +323,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
@Component({ selector: 'ion-infinite-scroll-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['loadingSpinner', 'loadingText'] })
 export class IonInfiniteScrollContent {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -338,7 +338,7 @@ export class IonInput {
  ionBlur!: EventEmitter<CustomEvent>;
  ionFocus!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']);
@@ -351,7 +351,7 @@ export declare interface IonItem extends Components.IonItem {}
@Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerDirection', 'target', 'type'] })
 export class IonItem {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -362,7 +362,7 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
@Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'sticky'] })
 export class IonItemDivider {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -373,7 +373,7 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
@Component({ selector: 'ion-item-group', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonItemGroup {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -383,7 +383,7 @@ export declare interface IonItemOption extends Components.IonItemOption {}
@Component({ selector: 'ion-item-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'] })
 export class IonItemOption {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -395,7 +395,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {}
 export class IonItemOptions {
  ionSwipe!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionSwipe']);
@@ -408,7 +408,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {}
 export class IonItemSliding {
  ionDrag!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionDrag']);
@@ -421,7 +421,7 @@ export declare interface IonLabel extends Components.IonLabel {}
@Component({ selector: 'ion-label', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'position'] })
 export class IonLabel {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -432,7 +432,7 @@ export declare interface IonList extends Components.IonList {}
@Component({ selector: 'ion-list', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['inset', 'lines', 'mode'] })
 export class IonList {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -444,7 +444,7 @@ export declare interface IonListHeader extends Components.IonListHeader {}
@Component({ selector: 'ion-list-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonListHeader {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -459,7 +459,7 @@ export class IonMenu {
  ionDidOpen!: EventEmitter<CustomEvent>;
  ionDidClose!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionWillOpen', 'ionWillClose', 'ionDidOpen', 'ionDidClose']);
@@ -472,7 +472,7 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
@Component({ selector: 'ion-menu-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['autoHide', 'color', 'disabled', 'menu', 'type'] })
 export class IonMenuButton {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -483,7 +483,7 @@ export declare interface IonMenuToggle extends Components.IonMenuToggle {}
@Component({ selector: 'ion-menu-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['autoHide', 'menu'] })
 export class IonMenuToggle {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -496,7 +496,7 @@ export class IonNav {
  ionNavWillChange!: EventEmitter<CustomEvent>;
  ionNavDidChange!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionNavWillChange', 'ionNavDidChange']);
@@ -509,7 +509,7 @@ export declare interface IonNavPop extends Components.IonNavPop {}
@Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonNavPop {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -519,7 +519,7 @@ export declare interface IonNavPush extends Components.IonNavPush {}
@Component({ selector: 'ion-nav-push', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
 export class IonNavPush {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -530,7 +530,7 @@ export declare interface IonNavSetRoot extends Components.IonNavSetRoot {}
@Component({ selector: 'ion-nav-set-root', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
 export class IonNavSetRoot {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -541,7 +541,7 @@ export declare interface IonNote extends Components.IonNote {}
@Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonNote {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -552,7 +552,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
@Component({ selector: 'ion-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'] })
 export class IonProgressBar {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -566,7 +566,7 @@ export class IonRadio {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionSelect', 'ionFocus', 'ionBlur']);
@@ -579,7 +579,7 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup {}
 export class IonRadioGroup {
  ionChange!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionChange']);
@@ -594,7 +594,7 @@ export class IonRange {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
@@ -609,7 +609,7 @@ export class IonRefresher {
  ionPull!: EventEmitter<CustomEvent>;
  ionStart!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart']);
@@ -622,7 +622,7 @@ export declare interface IonRefresherContent extends Components.IonRefresherCont
@Component({ selector: 'ion-refresher-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
 export class IonRefresherContent {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -633,7 +633,7 @@ export declare interface IonReorder extends Components.IonReorder {}
@Component({ selector: 'ion-reorder', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonReorder {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -644,7 +644,7 @@ export declare interface IonReorderGroup extends Components.IonReorderGroup {}
 export class IonReorderGroup {
  ionItemReorder!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionItemReorder']);
@@ -657,7 +657,7 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
@Component({ selector: 'ion-ripple-effect', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['type'] })
 export class IonRippleEffect {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -669,7 +669,7 @@ export declare interface IonRow extends Components.IonRow {}
@Component({ selector: 'ion-row', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonRow {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -685,7 +685,7 @@ export class IonSearchbar {
  ionBlur!: EventEmitter<CustomEvent>;
  ionFocus!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
@@ -700,7 +700,7 @@ export class IonSegment {
  ionChange!: EventEmitter<CustomEvent>;
  ionStyle!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionChange', 'ionStyle']);
@@ -713,7 +713,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
 export class IonSegmentButton {
  ionSelect!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionSelect']);
@@ -729,7 +729,7 @@ export class IonSelect {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur']);
@@ -742,7 +742,7 @@ export declare interface IonSelectOption extends Components.IonSelectOption {}
@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'selected', 'value'] })
 export class IonSelectOption {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -753,7 +753,7 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'width'] })
 export class IonSkeletonText {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -764,7 +764,7 @@ export declare interface IonSlide extends Components.IonSlide {}
@Component({ selector: 'ion-slide', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonSlide {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -790,7 +790,7 @@ export class IonSlides {
  ionSlideTouchStart!: EventEmitter<CustomEvent>;
  ionSlideTouchEnd!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
@@ -803,7 +803,7 @@ export declare interface IonSpinner extends Components.IonSpinner {}
@Component({ selector: 'ion-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'duration', 'name', 'paused'] })
 export class IonSpinner {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -815,7 +815,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {}
 export class IonSplitPane {
  ionSplitPaneVisible!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionSplitPaneVisible']);
@@ -827,7 +827,7 @@ export declare interface IonTabBar extends Components.IonTabBar {}
@Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'selectedTab', 'translucent'] })
 export class IonTabBar {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -838,7 +838,7 @@ export declare interface IonTabButton extends Components.IonTabButton {}
@Component({ selector: 'ion-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'] })
 export class IonTabButton {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -849,7 +849,7 @@ export declare interface IonText extends Components.IonText {}
@Component({ selector: 'ion-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonText {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -864,7 +864,7 @@ export class IonTextarea {
  ionBlur!: EventEmitter<CustomEvent>;
  ionFocus!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionBlur', 'ionFocus']);
@@ -877,7 +877,7 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
@Component({ selector: 'ion-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonThumbnail {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -887,7 +887,7 @@ export declare interface IonTitle extends Components.IonTitle {}
@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color'] })
 export class IonTitle {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
@@ -901,7 +901,7 @@ export class IonToggle {
  ionFocus!: EventEmitter<CustomEvent>;
  ionBlur!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
@@ -913,7 +913,7 @@ export declare interface IonToolbar extends Components.IonToolbar {}
@Component({ selector: 'ion-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonToolbar {
  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef) {
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
  }
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -1,5 +1,5 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
 import { IonicConfig } from '@ionic/core';

 import { appInitialize } from './app-initialize';
@@ -142,7 +142,8 @@ export class IonicModule {
          multi: true,
          deps: [
            ConfigToken,
-            DOCUMENT
+            DOCUMENT,
+            NgZone
          ]
        }
      ]
--- a/angular/src/providers/angular-delegate.ts
+++ b/angular/src/providers/angular-delegate.ts
@@ -114,20 +114,14 @@ const LIFECYCLES = [
 ];

 export function bindLifecycleEvents(instance: any, element: HTMLElement) {
-  const unregisters = LIFECYCLES.map(eventName => {
-    const handler = (ev: any) => {
-      if (typeof instance[eventName] === 'function') {
-        instance[eventName](ev.detail);
-      }
-    };
-    element.addEventListener(eventName, handler);
-    return () => {
-      element.removeEventListener(eventName, handler);
-    };
-  });
-  return () => {
-    unregisters.forEach(fn => fn());
-  };
+  const unregisters = LIFECYCLES
+    .filter(eventName => typeof instance[eventName] === 'function')
+    .map(eventName => {
+      const handler = (ev: any) => instance[eventName](ev.detail);
+      element.addEventListener(eventName, handler);
+      return () => element.removeEventListener(eventName, handler);
+    });
+  return () => unregisters.forEach(fn => fn());
 }

 const NavParamsToken = new InjectionToken<any>('NavParamsToken');
--- a/angular/src/util/overlay.ts
+++ b/angular/src/util/overlay.ts
@@ -11,8 +11,9 @@ export class OverlayBaseController<Opts, Overlay> implements ControllerShape<Opt
  /**
   * Creates a new overlay
   */
-  create(opts: Opts) {
-    return this.ctrl.create(opts);
+  create(opts?: Opts) {
+    // TODO: next major release opts is not optional
+    return this.ctrl.create((opts || {}) as any);
  }

  /**
--- a/angular/test/test-app/e2e/src/router-link.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/router-link.e2e-spec.ts
@@ -123,7 +123,6 @@ describe('router-link', () => {

    it('should go back with ion-button[routerLink][routerDirection=back]', async () => {
      await element(by.css('#routerLink-back')).click();
-      await testBack();
    });

    it('should go back with a[routerLink][routerDirection=back]', async () => {
@@ -139,7 +138,7 @@ describe('router-link', () => {
 });

 async function testForward() {
-  await waitTime(500);
+  await waitTime(2500);
  await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
  await testLifeCycle('app-router-link', {
    ionViewWillEnter: 1,
@@ -153,7 +152,6 @@ async function testForward() {
    ionViewWillLeave: 0,
    ionViewDidLeave: 0,
  });
-
 }

 async function testRoot() {
@@ -165,6 +163,15 @@ async function testRoot() {
    ionViewWillLeave: 0,
    ionViewDidLeave: 0,
  });
+  await browser.navigate().back();
+  await waitTime(100);
+  await testStack('ion-router-outlet', ['app-router-link']);
+  await testLifeCycle('app-router-link', {
+    ionViewWillEnter: 1,
+    ionViewDidEnter: 1,
+    ionViewWillLeave: 0,
+    ionViewDidLeave: 0,
+  });
 }

 async function testBack() {
--- a/angular/test/test-app/package-lock.json
+++ b/angular/test/test-app/package-lock.json
@@ -796,20 +796,28 @@
      }
    },
    "@ionic/angular": {
-      "version": "4.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-4.0.0-rc.1.tgz",
-      "integrity": "sha512-BoNynQ7s+9v4D/yOg6Po33c8svL3HLrL623cmU2CeXIh8F7c4DTlyn+vE6x1ifWrlHucLc5KmMCGd5YqzsGfNw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-4.6.0.tgz",
+      "integrity": "sha512-T7At4TBHqkNP9zt6nHqgIztOIDB3X/3YojNm5aya/2tlT9mJ+R0DcGBaKD+KOvKmauzIiABs0A3sxFAPZURVCQ==",
      "requires": {
-        "@ionic/core": "4.0.0-rc.1",
+        "@ionic/core": "4.6.0",
        "tslib": "^1.9.3"
      }
    },
    "@ionic/core": {
-      "version": "4.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-4.0.0-rc.1.tgz",
-      "integrity": "sha512-HGMjSq0hW7xVczTDib3tJ1aLi6RgE6R3spKWRiEsVvuBz3WGrLAuG6ASFic/U1k5LLG6vyJoWs4qvZ24b3dXag==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-4.6.0.tgz",
+      "integrity": "sha512-yE7zVnj8jQYQfFw+oliXgbpxDGYDS8SKDRLo3I0IQWGIn50nFntQVfH+FfaJ6bWexInq+86+dQLDIjCUQUX0PQ==",
      "requires": {
-        "ionicons": "4.5.1"
+        "ionicons": "4.5.10-2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
      }
    },
    "@ngtools/webpack": {
@@ -5352,9 +5360,9 @@
      "dev": true
    },
    "ionicons": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.5.1.tgz",
-      "integrity": "sha512-zqfkjpPKsdzzXePdE03IRw6xt7B6N3fcN/7NepyniuEWhKZLy7YpdZLegEwBmKeciXi7rIcv1O/hHJTdokUwXQ=="
+      "version": "4.5.10-2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-4.5.10-2.tgz",
+      "integrity": "sha512-68GMJBezv9ONng8TskjYFrOnCjXzDSdES6q1C9hTJyA9hKViCqaRcDsq3J/w3OukZEq92o2pX2tRwhj+uFgc9g=="
    },
    "ip": {
      "version": "1.1.5",
--- a/angular/test/test-app/package.json
+++ b/angular/test/test-app/package.json
@@ -8,8 +8,7 @@
    "sync": "sh scripts/sync.sh",
    "build": "ng build --prod --no-progress",
    "test": "ng e2e --prod",
-    "lint": "ng lint",
-    "postinstall": "npm run sync"
+    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
@@ -21,7 +20,7 @@
    "@angular/platform-browser": "~7.2.1",
    "@angular/platform-browser-dynamic": "~7.2.1",
    "@angular/router": "~7.2.1",
-    "@ionic/angular": "^4.0.0-rc.1",
+    "@ionic/angular": "^4.5.0",
    "core-js": "^2.6.2",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
--- a/angular/test/test-app/src/app/alert/alert.component.ts
+++ b/angular/test/test-app/src/app/alert/alert.component.ts
@@ -15,7 +15,16 @@ export class AlertComponent {
  async openAlert() {
    const alert = await this.alertCtrl.create({
      header: 'Hello',
-      message: 'Some text'
+      message: 'Some text',
+      buttons: [
+        {
+          role: 'cancel',
+          text: 'Cancel',
+          handler: () => {
+            NgZone.assertInAngularZone();
+          }
+        }
+      ]
    });
    await alert.present();
  }
--- a/angular/test/test-app/src/app/inputs/inputs.component.html
+++ b/angular/test/test-app/src/app/inputs/inputs.component.html
@@ -6,6 +6,7 @@
  </ion-toolbar>
 </ion-header>
 <ion-content>
+  <p>Change Detections: <span id="counter">{{counter()}}</span></p>
  <ion-list>

    <ion-item>
@@ -89,7 +90,7 @@
      <ion-range [(ngModel)]="range"></ion-range>
      <ion-note slot="end" id="range-note">{{range}}</ion-note>
    </ion-item>
-    
+
    <ion-item color="dark">
      <ion-label>Range Mirror</ion-label>
      <ion-range [(ngModel)]="range"></ion-range>
--- a/angular/test/test-app/src/app/inputs/inputs.component.ts
+++ b/angular/test/test-app/src/app/inputs/inputs.component.ts
@@ -12,6 +12,7 @@ export class InputsComponent {
  toggle = true;
  select = 'nes';
  range = 10;
+  changes = 0;

  setValues() {
    console.log('set values');
@@ -32,4 +33,8 @@ export class InputsComponent {
    this.select = undefined;
    this.range = undefined;
  }
+  counter() {
+    this.changes++;
+    return Math.floor(this.changes / 2);
+  }
 }
--- a/angular/test/test-app/src/app/router-link/router-link.component.html
+++ b/angular/test/test-app/src/app/router-link/router-link.component.html
@@ -11,6 +11,7 @@
  <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
  <p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
  <p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
+  <p>Change Detections: <span id="counter">{{counter()}}</span></p>

  <p>
    <ion-button routerLink="/router-link-page" expand="block" color="dark" id="routerLink">ion-button[routerLink]</ion-button>
@@ -26,7 +27,7 @@
  <p><button (click)="navigateForward()" id="button-forward">navigateForward</button></p>
  <p><button (click)="navigateRoot()" id="button-root">navigateForward</button></p>
  <p><button (click)="navigateBack()" id="button-back">navigateBack</button></p>
-  
+
  <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }" fragment="myDiv1">Query Params and Fragment</button></p>
-  
+
 </ion-content>
--- a/angular/test/test-app/src/app/router-link/router-link.component.ts
+++ b/angular/test/test-app/src/app/router-link/router-link.component.ts
@@ -13,6 +13,7 @@ export class RouterLinkComponent implements OnInit {
  didEnter = 0;
  willLeave = 0;
  didLeave = 0;
+  changes = 0;

  constructor(
    private navCtrl: NavController,
@@ -35,6 +36,11 @@ export class RouterLinkComponent implements OnInit {
    this.navCtrl.navigateRoot('/router-link-page');
  }

+  counter() {
+    this.changes++;
+    return Math.floor(this.changes / 2);
+  }
+
  ngOnInit() {
    NgZone.assertInAngularZone();
    this.onInit++;
--- a/core/README.md
+++ b/core/README.md
@@ -23,9 +23,9 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:

 ```html
-<script type="module" src="https://unpkg.com/@ionic/core@4.6.0/dist/ionic/ionic.esm.js"></script>
-<script nomodule src="https://unpkg.com/@ionic/core@4.6.0/dist/ionic/ionic.js"></script>
-<link href="https://unpkg.com/@ionic/core@4.6.0/css/ionic.bundle.css" rel="stylesheet">
+<script type="module" src="https://unpkg.com/@ionic/core@4.6.1/dist/ionic/ionic.esm.js"></script>
+<script nomodule src="https://unpkg.com/@ionic/core@4.6.1/dist/ionic/ionic.js"></script>
+<link href="https://unpkg.com/@ionic/core@4.6.1/css/ionic.bundle.css" rel="stylesheet">
 ```

 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.
--- a/core/api.txt
+++ b/core/api.txt
@@ -930,12 +930,14 @@ ion-router-link,prop,color,string | undefined,undefined,false,false
 ion-router-link,prop,href,string | undefined,undefined,false,false
 ion-router-link,prop,rel,string | undefined,undefined,false,false
 ion-router-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
+ion-router-link,prop,target,string | undefined,undefined,false,false
 ion-router-link,css-prop,--background
 ion-router-link,css-prop,--color

 ion-router-outlet,shadow
 ion-router-outlet,prop,animated,boolean,true,false,false
 ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false

 ion-row,shadow

--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "4.6.0",
+  "version": "4.6.1",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -30,11 +30,11 @@
    "loader/"
  ],
  "dependencies": {
-    "ionicons": "4.5.10-2",
+    "ionicons": "4.6.1",
    "tslib": "^1.10.0"
  },
  "devDependencies": {
-    "@stencil/core": "1.1.2",
+    "@stencil/core": "1.1.5",
    "@stencil/sass": "1.0.0",
    "@types/jest": "24.0.13",
    "@types/node": "10.12.18",
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2016,6 +2016,10 @@ export namespace Components {
    * When using a router, it specifies the transition direction when navigating to another page using `href`.
    */
    'routerDirection': RouterDirection;
+    /**
+    * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+    */
+    'target': string | undefined;
  }
  interface IonRouterOutlet {
    /**
@@ -2029,6 +2033,10 @@ export namespace Components {
    'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
    'delegate'?: FrameworkDelegate;
    'getRouteId': () => Promise<RouteID | undefined>;
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode': "ios" | "md";
    'setRouteId': (id: string, params: ComponentProps<null> | undefined, direction: RouterDirection) => Promise<RouteWrite>;
    'swipeHandler'?: SwipeGestureHandler;
  }
@@ -5244,6 +5252,10 @@ declare namespace LocalJSX {
    * When using a router, it specifies the transition direction when navigating to another page using `href`.
    */
    'routerDirection'?: RouterDirection;
+    /**
+    * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+    */
+    'target'?: string | undefined;
  }
  interface IonRouterOutlet extends JSXBase.HTMLAttributes<HTMLIonRouterOutletElement> {
    /**
@@ -5254,6 +5266,10 @@ declare namespace LocalJSX {
    * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions.
    */
    'animation'?: AnimationBuilder;
+    /**
+    * The mode determines which platform styles to use.
+    */
+    'mode'?: "ios" | "md";
  }
  interface IonRow extends JSXBase.HTMLAttributes<HTMLIonRowElement> {}
  interface IonSearchbar extends JSXBase.HTMLAttributes<HTMLIonSearchbarElement> {
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me

 import { getIonMode } from '../../global/ionic-global';
 import { ActionSheetButton, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
+import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';

 import { iosEnterAnimation } from './animations/ios.enter';
@@ -169,17 +169,13 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
  }

  private async callButtonHandler(button: ActionSheetButton | undefined) {
-    if (button && button.handler) {
+    if (button) {
      // a handler has been provided, execute it
      // pass the handler the values from the inputs
-      try {
-        const rtn = await button.handler();
-        if (rtn === false) {
-          // if the return value of the handler is false then do not dismiss
-          return false;
-        }
-      } catch (e) {
-        console.error(e);
+      const rtn = await safeCall(button.handler);
+      if (rtn === false) {
+        // if the return value of the handler is false then do not dismiss
+        return false;
      }
    }
    return true;
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me

 import { getIonMode } from '../../global/ionic-global';
 import { AlertButton, AlertInput, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
+import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';

@@ -223,17 +223,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
      input.checked = input === selectedInput;
    }
    this.activeId = selectedInput.id;
-    if (selectedInput.handler) {
-      selectedInput.handler(selectedInput);
-    }
+    safeCall(selectedInput.handler, selectedInput);
    this.el.forceUpdate();
  }

  private cbClick(selectedInput: AlertInput) {
    selectedInput.checked = !selectedInput.checked;
-    if (selectedInput.handler) {
-      selectedInput.handler(selectedInput);
-    }
+    safeCall(selectedInput.handler, selectedInput);
    this.el.forceUpdate();
  }

@@ -254,7 +250,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
    if (button && button.handler) {
      // a handler has been provided, execute it
      // pass the handler the values from the inputs
-      const returnData = button.handler(data);
+      const returnData = safeCall(button.handler, data);
      if (returnData === false) {
        // if the return value of the handler is false then do not dismiss
        return false;
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -565,8 +565,7 @@ export class Datetime implements ComponentInterface {
  }

  private hasValue(): boolean {
-    const val = this.datetimeValue;
-    return Object.keys(val).length > 0;
+    return this.text !== undefined;
  }

  private setFocus() {
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -31,6 +31,16 @@
          <ion-label>Default</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>
+        
+        <ion-item>
+          <ion-label position="floating">Default with floating label</ion-label>
+          <ion-datetime></ion-datetime>
+        </ion-item>
+        
+        <ion-item>
+          <ion-label position="floating">Placeholder with floating label</ion-label>
+          <ion-datetime placeholder="Select a date"></ion-datetime>
+        </ion-item>

        <ion-item>
          <ion-label>Max</ion-label>
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -132,7 +132,7 @@
 // --------------------------------------------------

 :host(.fab-button-disabled) {
-  --opacity: .5;
+  opacity: .5;

  pointer-events: none;
 }
--- a/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/core/src/components/infinite-scroll/infinite-scroll.tsx
@@ -29,7 +29,8 @@ export class InfiniteScroll implements ComponentInterface {
  @Prop() threshold = '15%';

  @Watch('threshold')
-  protected thresholdChanged(val: string) {
+  protected thresholdChanged() {
+    const val = this.threshold;
    if (val.lastIndexOf('%') > -1) {
      this.thrPx = 0;
      this.thrPc = (parseFloat(val) / 100);
@@ -53,10 +54,12 @@ export class InfiniteScroll implements ComponentInterface {

  @Watch('disabled')
  protected disabledChanged() {
-    if (this.disabled) {
+    const disabled = this.disabled;
+    if (disabled) {
      this.isLoading = false;
      this.isBusy = false;
    }
+    this.enableScrollEvents(!disabled);
  }

  /**
@@ -79,7 +82,8 @@ export class InfiniteScroll implements ComponentInterface {
      await contentEl.componentOnReady();
      this.scrollEl = await contentEl.getScrollElement();
    }
-    this.thresholdChanged(this.threshold);
+    this.thresholdChanged();
+    this.disabledChanged();
    if (this.position === 'top') {
      writeTask(() => {
        if (this.scrollEl) {
@@ -90,6 +94,7 @@ export class InfiniteScroll implements ComponentInterface {
  }

  componentDidUnload() {
+    this.enableScrollEvents(false);
    this.scrollEl = undefined;
  }

@@ -199,16 +204,26 @@ export class InfiniteScroll implements ComponentInterface {
    );
  }

+  private enableScrollEvents(shouldListen: boolean) {
+    if (this.scrollEl) {
+      if (shouldListen) {
+        this.scrollEl.addEventListener('scroll', this.onScroll);
+      } else {
+        this.scrollEl.removeEventListener('scroll', this.onScroll);
+      }
+    }
+  }
+
  render() {
    const mode = getIonMode(this);
+    const disabled = this.disabled;
    return (
      <Host
        class={{
          [mode]: true,
          'infinite-scroll-loading': this.isLoading,
-          'infinite-scroll-enabled': !this.disabled
+          'infinite-scroll-enabled': !disabled
        }}
-        onScroll={this.disabled ? undefined : this.onScroll}
      />
    );
  }
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -149,7 +149,7 @@
 // Item: Disabled
 // --------------------------------------------------

-:host(.item-interactive-disabled) {
+:host(.item-interactive-disabled:not(.item-multiple-inputs)) {
  cursor: default;
  pointer-events: none;
 }
@@ -397,7 +397,9 @@ button, a {
 // Multiple inputs in an item should have the input
 // cover relative to themselves instead of the item

+:host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
+:host(.item-multiple-inputs) ::slotted(ion-radio),
 :host(.item-multiple-inputs) ::slotted(ion-select) {
  position: relative;
 }
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -128,18 +128,26 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
  }

  componentDidLoad() {
-    // Check for multiple inputs to change the position to relative
-    const inputs = this.el.querySelectorAll('ion-select, ion-datetime');
-    this.multipleInputs = inputs.length > 1 ? true : false;
+    // The following elements have a clickable cover that is relative to the entire item
+    const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
+
+    // The following elements can accept focus alongside the previous elements
+    // therefore if these elements are also a child of item, we don't want the
+    // input cover on top of those interfering with their clicks
+    const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
+
+    // Check for multiple inputs to change the position of the input cover to relative
+    // for all of the covered inputs above
+    this.multipleInputs = covers.length + inputs.length > 1;
  }

-  // If the item contains an input including a radio, checkbox, datetime, etc.
-  // then the item will have a clickable input cover that should
-  // get the hover, focused and activated states UNLESS it has multiple
-  // inputs, then those need to individually get the click
+  // If the item contains an input including a checkbox, datetime, select, or radio
+  // then the item will have a clickable input cover that covers the item
+  // that should get the hover, focused and activated states UNLESS it has multiple
+  // inputs, then those need to individually get each click
  private hasCover(): boolean {
    const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
-    return inputs.length > 0 && !this.multipleInputs;
+    return inputs.length === 1 && !this.multipleInputs;
  }

  // If the item has an href or button property it will render a native
--- a/core/src/components/item/test/disabled/e2e.ts
+++ b/core/src/components/item/test/disabled/e2e.ts
@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('item: disabled', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/disabled?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('item: disabled-rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/disabled?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
--- a/core/src/components/item/test/disabled/index.html
+++ b/core/src/components/item/test/disabled/index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item - Disabled</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Item: Disabled</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding-vertical">
+      <ion-list>
+        <ion-list-header>
+          <ion-label>Single Input Disabled Items</ion-label>
+        </ion-list-header>
+
+        <ion-item disabled>
+          <ion-label>Disabled Item</ion-label>
+        </ion-item>
+
+        <ion-item disabled button>
+          <ion-label>Disabled Item Button</ion-label>
+        </ion-item>
+
+        <ion-item disabled href="#">
+          <ion-label>Disabled Item Anchor</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Datetime</ion-label>
+          <ion-datetime disabled value="2019"></ion-datetime>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Select</ion-label>
+          <ion-select disabled>
+            <ion-select-option value="">No Game Console</ion-select-option>
+            <ion-select-option value="nes">NES</ion-select-option>
+            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+            <ion-select-option value="ps">PlayStation</ion-select-option>
+            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+            <ion-select-option value="snes">SNES</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Input</ion-label>
+          <ion-input placeholder="Disabled" disabled></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Toggle</ion-label>
+          <ion-toggle disabled checked slot="end"></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Checkbox</ion-label>
+          <ion-checkbox disabled checked slot="start"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Range</ion-label>
+          <ion-range disabled value="10"></ion-range>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>Multiple Input Disabled Items</ion-label>
+        </ion-list-header>
+
+        <ion-item>
+          <ion-checkbox disabled slot="start"></ion-checkbox>
+          <ion-input placeholder="Disabled Checkbox w/ Input"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox disabled slot="end"></ion-checkbox>
+          <ion-input placeholder="Disabled Checkbox w/ Input"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-radio disabled slot="start"></ion-radio>
+          <ion-input placeholder="Disabled Radio w/ Input"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-radio disabled slot="end"></ion-radio>
+          <ion-input placeholder="Disabled Radio w/ Input"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox disabled slot="start"></ion-checkbox>
+          <ion-label>Checkbox + Radio</ion-label>
+          <ion-radio slot="end"></ion-radio>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox disabled slot="start"></ion-checkbox>
+          <ion-radio slot="start"></ion-radio>
+          <ion-label>Checkbox + Radio</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Selects</ion-label>
+          <ion-select placeholder="month">
+            <ion-select-option value="1">January</ion-select-option>
+            <ion-select-option value="2">February</ion-select-option>
+            <ion-select-option value="3">March</ion-select-option>
+          </ion-select>
+          <ion-select disabled placeholder="year">
+            <ion-select-option value="1990">1990</ion-select-option>
+            <ion-select-option value="1991">1991</ion-select-option>
+            <ion-select-option value="1992">1992</ion-select-option>
+            <ion-select-option value="1993">1993</ion-select-option>
+            <ion-select-option value="1994">1994</ion-select-option>
+            <ion-select-option value="1995">1995</ion-select-option>
+            <ion-select-option value="1996">1996</ion-select-option>
+            <ion-select-option value="1997">1997</ion-select-option>
+          </ion-select>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>Checkbox + Range</ion-label>
+          <ion-range disabled value="45"></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>Checkbox + Toggle</ion-label>
+          <ion-toggle disabled value="45"></ion-toggle>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox disabled slot="start"></ion-checkbox>
+          <ion-label>Checkbox + Buttons</ion-label>
+          <ion-button slot="end">Default</ion-button>
+          <ion-button slot="end">Buttons</ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Disabled Input</ion-label>
+          <ion-input slot="start" placeholder="Disabled" disabled></ion-input>
+          <ion-segment>
+            <ion-segment-button value="friends">
+              <ion-label>Friends</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="enemies">
+              <ion-label>Enemies</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox slot="start" disabled></ion-checkbox>
+          <ion-label>Disabled Checkbox</ion-label>
+          <ion-searchbar></ion-searchbar>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+
+    <ion-footer>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button onClick="toggleDisabled()">Toggle</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+
+  <script>
+    const disabledEls = document.querySelectorAll("[disabled]");
+
+    function toggleDisabled() {
+      for (var i = 0; i < disabledEls.length; i++) {
+        disabledEls[i].disabled = !disabledEls[i].disabled;
+      }
+    }
+
+  </script>
+
+</html>
--- a/core/src/components/label/label.scss
+++ b/core/src/components/label/label.scss
@@ -34,7 +34,7 @@
  white-space: normal;
 }

-:host-context(.item-interactive-disabled) {
+:host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
  cursor: default;
  opacity: .3;
  pointer-events: none;
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me

 import { getIonMode } from '../../global/ionic-global';
 import { Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
-import { dismiss, eventMethod, present } from '../../utils/overlays';
+import { dismiss, eventMethod, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';

 import { iosEnterAnimation } from './animations/ios.enter';
@@ -175,17 +175,9 @@ export class Picker implements ComponentInterface, OverlayInterface {
    // }

    // keep the time of the most recent button click
-    let shouldDismiss = true;
-
-    if (button.handler) {
-      // a handler has been provided, execute it
-      // pass the handler the values from the inputs
-      if (button.handler(this.getSelected()) === false) {
-        // if the return value of the handler is false then do not dismiss
-        shouldDismiss = false;
-      }
-    }
-
+    // a handler has been provided, execute it
+    // pass the handler the values from the inputs
+    const shouldDismiss = safeCall(button.handler, this.getSelected()) !== false;
    if (shouldDismiss) {
      return this.dismiss();
    }
--- a/core/src/components/router-link/readme.md
+++ b/core/src/components/router-link/readme.md
@@ -15,6 +15,7 @@ The router link component is used for navigating to a specified link. Similar to
 | `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string \| undefined`           | `undefined` |
 | `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                 | `string \| undefined`           | `undefined` |
 | `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                               | `"back" \| "forward" \| "root"` | `'forward'` |
+| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                    | `string \| undefined`           | `undefined` |


 ## CSS Custom Properties
--- a/core/src/components/router-link/router-link.tsx
+++ b/core/src/components/router-link/router-link.tsx
@@ -36,6 +36,13 @@ export class RouterLink implements ComponentInterface {
   */
  @Prop() routerDirection: RouterDirection = 'forward';

+  /**
+   * Specifies where to display the linked URL.
+   * Only applies when an `href` is provided.
+   * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+   */
+  @Prop() target: string | undefined;
+
  private onClick = (ev: Event) => {
    openURL(this.href, ev, this.routerDirection);
  }
@@ -44,7 +51,8 @@ export class RouterLink implements ComponentInterface {
    const mode = getIonMode(this);
    const attrs = {
      href: this.href,
-      rel: this.rel
+      rel: this.rel,
+      target: this.target
    };
    return (
      <Host
--- a/core/src/components/router-link/test/basic/index.html
+++ b/core/src/components/router-link/test/basic/index.html
@@ -30,7 +30,7 @@
      </p>

      <p>
-        <ion-router-link href="https://ionicframework.com" rel="external" style="text-decoration: underline">Underline Router Link</ion-router-link>
+        <ion-router-link href="https://ionicframework.com" rel="external" target="_blank" style="text-decoration: underline">External Router Link</ion-router-link>
      </p>

      <p>
--- a/core/src/components/router-outlet/readme.md
+++ b/core/src/components/router-outlet/readme.md
@@ -30,10 +30,11 @@ For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` ha

 ## Properties

-| Property    | Attribute  | Description                                                                                                                                                                                    | Type                                                                                   | Default     |
-| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
-| `animated`  | `animated` | If `true`, the router-outlet should animate the transition of components.                                                                                                                      | `boolean`                                                                              | `true`      |
-| `animation` | --         | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| Property    | Attribute  | Description                                                                                                                                                                                    | Type                                                                                   | Default            |
+| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------ |
+| `animated`  | `animated` | If `true`, the router-outlet should animate the transition of components.                                                                                                                      | `boolean`                                                                              | `true`             |
+| `animation` | --         | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined`        |
+| `mode`      | `mode`     | The mode determines which platform styles to use.                                                                                                                                              | `"ios" \| "md"`                                                                        | `getIonMode(this)` |


 ----------------------------------------------
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -21,6 +21,11 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {

  @Element() el!: HTMLElement;

+  /**
+   * The mode determines which platform styles to use.
+   */
+  @Prop({ mutable: true }) mode = getIonMode(this);
+
  /** @internal */
  @Prop() delegate?: FrameworkDelegate;

@@ -147,8 +152,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
    // emit nav will change event
    this.ionNavWillChange.emit();

-    const mode = getIonMode(this);
-    const { el } = this;
+    const { el, mode } = this;
    const animated = this.animated && config.getBoolean('animated', true);
    const animationBuilder = this.animation || opts.animationBuilder || config.get('navAnimation');

--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -2,6 +2,7 @@ import { Component, ComponentInterface, Listen, Prop, h } from '@stencil/core';

 import { getIonMode } from '../../global/ionic-global';
 import { SelectPopoverOption } from '../../interface';
+import { safeCall } from '../../utils/overlays';

 /**
 * @internal
@@ -28,8 +29,8 @@ export class SelectPopover implements ComponentInterface {
  @Listen('ionSelect')
  onSelect(ev: any) {
    const option = this.options.find(o => o.value === ev.target.value);
-    if (option && option.handler) {
-      option.handler();
+    if (option) {
+      safeCall(option.handler);
    }
  }

--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -34,9 +34,11 @@ export class TabBar implements ComponentInterface {
  @Prop() selectedTab?: string;
  @Watch('selectedTab')
  selectedTabChanged() {
-    this.ionTabBarChanged.emit({
-      tab: this.selectedTab
-    });
+    if (this.selectedTab !== undefined) {
+      this.ionTabBarChanged.emit({
+        tab: this.selectedTab
+      });
+    }
  }

  /**
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Pr

 import { getIonMode } from '../../global/ionic-global';
 import { Animation, AnimationBuilder, Color, CssClassMap, OverlayEventDetail, OverlayInterface, ToastButton } from '../../interface';
-import { dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
+import { dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { createColorClasses, getClassMap } from '../../utils/theme';

@@ -212,7 +212,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
      // a handler has been provided, execute it
      // pass the handler the values from the inputs
      try {
-        const rtn = await button.handler();
+        const rtn = await safeCall(button.handler);
        if (rtn === false) {
          // if the return value of the handler is false then do not dismiss
          return false;
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -177,6 +177,7 @@ export interface IonicConfig {
  persistConfig?: boolean;
  _forceStatusbarPadding?: boolean;
  _testing?: boolean;
+  _zoneGate?: (h: () => any) => any;
 }

 export function setupConfig(config: IonicConfig) {
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -203,16 +203,6 @@ const overlayAnimation = async (
  return hasCompleted;
 };

-export const autoFocus = (containerEl: HTMLElement): HTMLElement | undefined => {
-  const focusableEls = containerEl.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
-  if (focusableEls.length > 0) {
-    const el = focusableEls[0] as HTMLInputElement;
-    el.focus();
-    return el;
-  }
-  return undefined;
-};
-
 export const eventMethod = <T>(element: HTMLElement, eventName: string): Promise<T> => {
  let resolve: (detail: T) => void;
  const promise = new Promise<T>(r => resolve = r);
@@ -244,4 +234,20 @@ const isDescendant = (parent: HTMLElement, child: HTMLElement | null) => {
  return false;
 };

+const defaultGate = (h: any) => h();
+
+export const safeCall = (handler: any, arg?: any) => {
+  if (typeof handler === 'function') {
+    const jmp = config.get('_zoneGate', defaultGate);
+    return jmp(() => {
+      try {
+        return handler(arg);
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  }
+  return undefined;
+};
+
 export const BACKDROP = 'backdrop';
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -10,7 +10,7 @@ export const config: Config = {
    { components: ['ion-action-sheet'] },
    { components: ['ion-alert'] },
    { components: ['ion-back-button'] },
-    { components: ['ion-app', 'ion-buttons', 'ion-content', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] },
+    { components: ['ion-app', 'ion-router-outlet', 'ion-buttons', 'ion-content', 'ion-footer', 'ion-header', 'ion-title', 'ion-toolbar'] },
    { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
    { components: ['ion-backdrop'] },
    { components: ['ion-button', 'ion-icon'] },
@@ -37,7 +37,7 @@ export const config: Config = {
    { components: ['ion-refresher', 'ion-refresher-content'] },
    { components: ['ion-reorder', 'ion-reorder-group'] },
    { components: ['ion-ripple-effect'] },
-    { components: ['ion-anchor', 'ion-router', 'ion-route', 'ion-route-redirect', 'ion-router-link', 'ion-router-outlet'] },
+    { components: ['ion-router', 'ion-route', 'ion-route-redirect', 'ion-router-link'] },
    { components: ['ion-searchbar'] },
    { components: ['ion-segment', 'ion-segment-button'] },
    { components: ['ion-select', 'ion-select-option', 'ion-select-popover'] },
@@ -50,7 +50,10 @@ export const config: Config = {
    { components: ['ion-toast'] },
    { components: ['ion-toggle'] },
    { components: ['ion-virtual-scroll'] },
+
+    // Deprecated
    { components: [
+      'ion-anchor',
      'ion-action-sheet-controller',
      'ion-alert-controller',
      'ion-loading-controller',
@@ -66,7 +69,10 @@ export const config: Config = {
  outputTargets: [
    {
      type: 'dist',
-      esmLoaderPath: '../loader'
+      esmLoaderPath: '../loader',
+      copy: [
+        { src: '**/*.scss' }
+      ]
    },
    // {
    //   type: 'experimental-dist-module',
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/docs",
-  "version": "4.6.0",
+  "version": "4.6.1",
  "description": "Pre-packaged API documentation for the Ionic docs.",
  "main": "core.json",
  "files": [
Author	SHA1	Message	Date
Brandy Carney	908f36f574	4.6.1	2019-07-09 12:28:12 -04:00
Manu Mtz.-Almeida	ab20bf472d	revert disconnecting page on leaving page	2019-07-09 10:32:46 +02:00
Brandy Carney	7fda509333	test(e2e): increase wait time	2019-07-08 13:16:17 -04:00
Brandy Carney	0031ab82b7	style(lint): fix lint issues	2019-07-08 11:11:49 -04:00
Manu Mtz.-Almeida	e059fc8048	perf(angular): skip zone	2019-07-06 19:33:34 +02:00
Manu Mtz.-Almeida	7953088418	fix(angular): fix linting issues	2019-07-05 20:32:42 +02:00
Manu Mtz.-Almeida	1add112be6	chore(): update stencil	2019-07-05 19:33:22 +02:00
Liam DeBeasi	d71c1cd6b0	Revert "fix(angular): use baseURI has base path" This reverts commit `4038e0a60c`. revert	2019-07-03 14:11:53 -04:00
Liam DeBeasi	ccd46028f2	chore(): update stencil to 1.1.4	2019-07-03 13:29:25 -04:00
Liam DeBeasi	a656dadf4b	Merge branch '4.6.1-hotfix' of https://github.com/ionic-team/ionic into 4.6.1-hotfix merge	2019-07-02 16:06:06 -04:00
Adam Bradley	03c834c647	fix(tabs): do not emit tab change if selectedTab undefined	2019-07-02 15:04:46 -05:00
Brandy Carney	dfa2b13c3a	fix(item): do not disable entire item if there are multiple inputs (#18696 ) references #18655 fixes #18670	2019-07-02 14:45:24 -04:00
Liam DeBeasi	08daaeb1a3	Merge branch '4.6.1-hotfix' of https://github.com/ionic-team/ionic into 4.6.1-hotfix update	2019-07-01 11:39:16 -04:00
Brandy Carney	1f51ab27c4	fix(router-link): add missing target prop (#18659 ) references #18655	2019-07-01 11:23:41 -04:00
Manu Mtz.-Almeida	36a58df181	fix(): copy all scss files	2019-07-01 17:12:44 +02:00
Manu Mtz.-Almeida	4038e0a60c	fix(angular): use baseURI has base path	2019-07-01 17:01:14 +02:00
Brandy Carney	6042b39313	fix(fab-button): set opacity on disabled fab button (#18685 ) fixes #18682	2019-07-01 10:54:02 -04:00
Liam DeBeasi	dc04a4b8a9	Merge branch '4.6.1-hotfix' of https://github.com/ionic-team/ionic into 4.6.1-hotfix merg	2019-07-01 10:51:26 -04:00
Manu Mtz.-Almeida	98499acff9	chore(): update ionicons	2019-06-28 22:59:33 +02:00
Liam DeBeasi	2417d32316	a# the commit. merge	2019-06-28 16:33:35 -04:00
Liam DeBeasi	735280168f	Merge branch '4.6.x' of https://github.com/ionic-team/ionic into 4.6.x merge	2019-06-28 16:33:08 -04:00
Manu Mtz.-Almeida	ef10f190cd	fix(): copy theme scss	2019-06-28 22:26:23 +02:00
Manu Mtz.-Almeida	b9b60df0a4	chore(): update stencil	2019-06-28 22:26:17 +02:00
Manu Mtz.-Almeida	b69fb69a1a	fix(router-outlet): fix swipe to go back	2019-06-27 17:51:03 +02:00
Kelvin Dart	92e0f98633	fix(datetime): datetime no longer reports having a value if none is set (#18541 ) fixes #17979 fixes #18540	2019-06-27 17:51:03 +02:00
Manu Mtz.-Almeida	0d58101edc	fix(infinite-scroll): fix scroll listener	2019-06-27 17:50:13 +02:00
Manu Mtz.-Almeida	44c88ad908	fix(): overlay create opts are optional	2019-06-27 17:36:26 +02:00
Kelvin Dart	45b82dc466	fix(datetime): datetime no longer reports having a value if none is set (#18541 ) fixes #17979 fixes #18540	2019-06-27 10:48:09 -04:00
Brandy Carney	22ac160021	merge release-4.6.0	2019-06-26 14:15:46 -04:00
Brandy Carney	b46a025576	merge release-4.6.0 Release 4.6.0	2019-06-26 14:12:51 -04:00
Liam DeBeasi	335e02aa44	merge release-4.5.0 Release 4.5.0	2019-06-12 13:06:52 -04:00
Liam DeBeasi	017febed96	merge release-4.4.2 Release 4.4.2	2019-05-22 19:55:09 -04:00