refactor(overlay): update to latest overlay syntax

packages/core/src/components/action-sheet-controller/action-sheet-controller.scss

@@ -1,10 +0,0 @@
-@import "../../themes/ionic.globals";
-
-
-// ActionSheet Controller
-// --------------------------------------------------
-
-ion-action-sheet-controller {
-  display: none;
-}
-

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

@@ -1,75 +1,66 @@
-import { Component, Listen } from '@stencil/core';
-import {
-  ActionSheetEvent,
-  ActionSheetOptions,
-  ActionSheet,
-  IonicControllerApi,
-  Ionic
-} from '../../index';
+import { Component, Listen, Method } from '@stencil/core';
+import { ActionSheet, ActionSheetEvent, ActionSheetOptions  } from '../../index';
+
 
 @Component({
-  tag: 'ion-action-sheet-controller',
-  styleUrl: 'action-sheet-controller.scss'
+  tag: 'ion-action-sheet-controller'
 })
-export class ActionSheetController implements IonicControllerApi {
+export class ActionSheetController {
   private ids = 0;
-  private actionsheetResolves: { [actionsheetId: string]: Function } = {};
-  private actionsheets: ActionSheet[] = [];
-  private appRoot: Element;
+  private actionSheetResolves: { [actionSheetId: string]: Function } = {};
+  private actionSheets: ActionSheet[] = [];
 
-  ionViewDidLoad() {
-    this.appRoot = document.querySelector('ion-app') || document.body;
-    Ionic.registerController('action-sheet', this);
-  }
+  @Method()
+  create(opts?: ActionSheetOptions) {
+    // create ionic's wrapping ion-action-sheet component
+    const actionSheet = document.createElement('ion-action-sheet');
 
-  load(opts?: ActionSheetOptions) {
-    // create ionic's wrapping ion-actionsheet component
-    const actionsheet = document.createElement('ion-action-sheet');
     const id = this.ids++;
 
-    // give this actionsheet a unique id
-    actionsheet.id = `action-sheet-${id}`;
-    actionsheet.style.zIndex = (20000 + id).toString();
+    // give this action sheet a unique id
+    actionSheet.id = `action-sheet-${id}`;
+    actionSheet.style.zIndex = (20000 + id).toString();
 
-    // convert the passed in actionsheet options into props
-    // that get passed down into the new actionsheet
-    Object.assign(actionsheet, opts);
+    // convert the passed in action sheet options into props
+    // that get passed down into the new action sheet
+    Object.assign(actionSheet, opts);
 
-    // append the actionsheet element to the document body
-    this.appRoot.appendChild(actionsheet as any);
+    // append the action sheet element to the document body
+    const appRoot = document.querySelector('ion-app') || document.body;
+    appRoot.appendChild(actionSheet as any);
 
-    // store the resolve function to be called later up when the actionsheet loads
+    // store the resolve function to be called later up when the action sheet loads
     return new Promise<ActionSheet>(resolve => {
-      this.actionsheetResolves[actionsheet.id] = resolve;
+      this.actionSheetResolves[actionSheet.id] = resolve;
     });
   }
 
   @Listen('body:ionActionSheetDidLoad')
-  viewDidLoad(ev: ActionSheetEvent) {
-    const actionsheet = ev.detail.actionsheet;
-    const actionsheetResolve = this.actionsheetResolves[actionsheet.id];
-    if (actionsheetResolve) {
-      actionsheetResolve(actionsheet);
-      delete this.actionsheetResolves[actionsheet.id];
+  protected viewDidLoad(ev: ActionSheetEvent) {
+    const actionSheet = ev.detail.actionSheet;
+    const actionSheetResolve = this.actionSheetResolves[actionSheet.id];
+    if (actionSheetResolve) {
+      actionSheetResolve(actionSheet);
+      delete this.actionSheetResolves[actionSheet.id];
     }
   }
 
   @Listen('body:ionActionSheetWillPresent')
-  willPresent(ev: ActionSheetEvent) {
-    this.actionsheets.push(ev.detail.actionsheet);
+  protected willPresent(ev: ActionSheetEvent) {
+    this.actionSheets.push(ev.detail.actionSheet);
   }
 
   @Listen('body:ionActionSheetWillDismiss, body:ionActionSheetDidUnload')
-  willDismiss(ev: ActionSheetEvent) {
-    const index = this.actionsheets.indexOf(ev.detail.actionsheet);
+  protected willDismiss(ev: ActionSheetEvent) {
+    const index = this.actionSheets.indexOf(ev.detail.actionSheet);
     if (index > -1) {
-      this.actionsheets.splice(index, 1);
+      this.actionSheets.splice(index, 1);
     }
   }
 
   @Listen('body:keyup.escape')
-  escapeKeyUp() {
-    const lastActionSheet = this.actionsheets[this.actionsheets.length - 1];
+  protected escapeKeyUp() {
+    const lastActionSheet = this.actionSheets[this.actionSheets.length - 1];
     if (lastActionSheet) {
       lastActionSheet.dismiss();
     }

packages/core/src/components/action-sheet/action-sheet.scss

@@ -36,3 +36,7 @@ ion-action-sheet {
 .action-sheet-button {
   width: $action-sheet-width;
 }
+
+ion-action-sheet-controller {
+  display: none;
+}

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

@@ -1,13 +1,5 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  Listen,
-  Prop,
-  CssClassMap
-} from '@stencil/core';
-import { AnimationBuilder, Animation, Ionic } from '../../index';
+import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
+import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
 
 import iOSEnterAnimation from './animations/ios.enter';
 import iOSLeaveAnimation from './animations/ios.leave';
@@ -28,12 +20,15 @@ export class ActionSheet {
 
   @Element() private el: HTMLElement;
 
-  @Event() ionActionSheetDidLoad: EventEmitter;
-  @Event() ionActionSheetWillPresent: EventEmitter;
-  @Event() ionActionSheetDidPresent: EventEmitter;
-  @Event() ionActionSheetWillDismiss: EventEmitter;
-  @Event() ionActionSheetDidDismiss: EventEmitter;
-  @Event() ionActionSheetDidUnload: EventEmitter;
+  @Event() private ionActionSheetDidLoad: EventEmitter;
+  @Event() private ionActionSheetDidPresent: EventEmitter;
+  @Event() private ionActionSheetWillPresent: EventEmitter;
+  @Event() private ionActionSheetWillDismiss: EventEmitter;
+  @Event() private ionActionSheetDidDismiss: EventEmitter;
+  @Event() private ionActionSheetDidUnload: EventEmitter;
+
+  @Prop({ connect: 'ion-animation' }) animationCtrl: AnimationController;
+  @Prop({ context: 'config' }) config: Config;
 
   @Prop() cssClass: string;
   @Prop() title: string;
@@ -46,17 +41,6 @@ export class ActionSheet {
   @Prop() exitAnimation: AnimationBuilder;
   @Prop() id: string;
 
-  @Listen('ionDismiss')
-  onDismiss(ev: UIEvent) {
-    ev.stopPropagation();
-    ev.preventDefault();
-
-    this.dismiss();
-  }
-
-  ionViewDidLoad() {
-    this.ionActionSheetDidLoad.emit({ actionsheet: this });
-  }
 
   present() {
     return new Promise<void>(resolve => {
@@ -69,22 +53,26 @@ export class ActionSheet {
       this.animation.destroy();
       this.animation = null;
     }
-    this.ionActionSheetWillPresent.emit({ actionsheet: this });
+    this.ionActionSheetWillPresent.emit({ actionSheet: this });
 
-    let animationBuilder = this.enterAnimation
-      ? this.enterAnimation
-      : iOSEnterAnimation;
+    // get the user's animation fn if one was provided
+    let animationBuilder = this.enterAnimation;
+
+    if (!animationBuilder) {
+      // user did not provide a custom animation fn
+      // decide from the config which animation to use
+      animationBuilder = iOSEnterAnimation;
+    }
 
     // build the animation and kick it off
-    Ionic.controller('animation').then(Animation => {
-      this.animation = animationBuilder(Animation, this.el);
-      this.animation
-        .onFinish((a: any) => {
-          a.destroy();
-          this.ionActionSheetDidLoad.emit({ actionsheet: this });
-          resolve();
-        })
-        .play();
+    this.animationCtrl.create(animationBuilder, this.el).then(animation => {
+      this.animation = animation;
+
+      animation.onFinish((a: any) => {
+        a.destroy();
+        this.ionViewDidEnter();
+        resolve();
+      }).play();
     });
   }
 
@@ -93,34 +81,56 @@ export class ActionSheet {
       this.animation.destroy();
       this.animation = null;
     }
-    return new Promise<void>(resolve => {
-      this.ionActionSheetWillDismiss.emit({ actionsheet: this });
-      let animationBuilder = this.exitAnimation
-        ? this.exitAnimation
-        : iOSLeaveAnimation;
+    return new Promise(resolve => {
+      this.ionActionSheetWillDismiss.emit({ actionSheet: this });
+
+      // get the user's animation fn if one was provided
+      let animationBuilder = this.exitAnimation;
+      if (!animationBuilder) {
+        // user did not provide a custom animation fn
+        // decide from the config which animation to use
+        animationBuilder = iOSLeaveAnimation;
+      }
 
       // build the animation and kick it off
-      Ionic.controller('animation').then(Animation => {
-        this.animation = animationBuilder(Animation, this.el);
-        this.animation
-          .onFinish((a: any) => {
-            a.destroy();
-            this.ionActionSheetDidDismiss.emit({ actionsheet: this });
-            Core.dom.write(() => {
-              this.el.parentNode.removeChild(this.el);
-            });
-            resolve();
-          })
-          .play();
+      this.animationCtrl.create(animationBuilder, this.el).then(animation => {
+        this.animation = animation;
+
+        animation.onFinish((a: any) => {
+          a.destroy();
+          this.ionActionSheetDidDismiss.emit({ actionSheet: this });
+
+          Context.dom.write(() => {
+            this.el.parentNode.removeChild(this.el);
+          });
+
+          resolve();
+        }).play();
       });
     });
   }
 
-  ionViewDidUnload() {
-    this.ionActionSheetDidUnload.emit({ actionsheet: this });
+  protected ionViewDidUnload() {
+    this.ionActionSheetDidUnload.emit({ actionSheet: this });
   }
 
-  backdropClick() {
+  @Listen('ionDismiss')
+  protected onDismiss(ev: UIEvent) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    this.dismiss();
+  }
+
+  protected ionViewDidLoad() {
+    this.ionActionSheetDidLoad.emit({ actionSheet: this });
+  }
+
+  protected ionViewDidEnter() {
+    this.ionActionSheetDidPresent.emit({ loading: this });
+  }
+
+  protected backdropClick() {
     if (this.enableBackdropDismiss) {
       // const opts: NavOptions = {
       //   minClickBlockDuration: 400
@@ -129,7 +139,7 @@ export class ActionSheet {
     }
   }
 
-  click(button: ActionSheetButton) {
+  protected click(button: ActionSheetButton) {
     let shouldDismiss = true;
     if (button.handler) {
       if (button.handler() === false) {
@@ -141,7 +151,7 @@ export class ActionSheet {
     }
   }
 
-  render() {
+  protected render() {
     let userCssClass = 'action-sheet-content';
     if (this.cssClass) {
       userCssClass += ' ' + this.cssClass;
@@ -239,6 +249,6 @@ export interface ActionSheetButton {
 
 export interface ActionSheetEvent {
   detail: {
-    actionsheet: ActionSheet;
+    actionSheet: ActionSheet;
   };
 }

packages/core/src/components/action-sheet/test/basic.html

@@ -17,6 +17,8 @@
     </ion-header>
 
     <ion-content padding>
+      <ion-action-sheet-controller></ion-action-sheet-controller>
+
       <ion-button block onclick="presentActionSheet1()">Present Action Sheet 1</ion-button>
       <ion-button block onclick="presentActionSheet2()">Present Action Sheet 2</ion-button>
       <ion-button block onclick="presentActionSheet3()">Present Action Sheet 3</ion-button>
@@ -28,7 +30,8 @@
     function presentActionSheet1() {
       var mode = Ionic.mode;
 
-      Ionic.controller('action-sheet', {
+      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      actionSheetController.create({
         title: "Albums",
         buttons: [{
           text: 'Delete',
@@ -70,7 +73,8 @@
     }
 
     function presentActionSheet2() {
-      Ionic.controller('action-sheet', {
+      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      actionSheetController.create({
         buttons: [{
           text: 'Archive',
           handler: () => {
@@ -96,7 +100,8 @@
     }
 
     function presentActionSheet3() {
-      Ionic.controller('action-sheet', {
+      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      actionSheetController.create({
         buttons: [{
           text: 'Open Alert',
           handler: () => {
@@ -117,4 +122,4 @@
   </script>
 </body>
 
-</html>
+</html>

packages/core/src/components/animation-controller/animation-controller.tsx

@@ -4,7 +4,7 @@ import { Animator } from './animator';
 
 
 @Component({
-  tag: 'ion-animation'
+  tag: 'ion-animation-controller'
 })
 export class AnimationController {
 

packages/core/src/components/gesture-controller/gesture-controller.ts

@@ -2,7 +2,7 @@ import { Component } from '@stencil/core';
 
 
 @Component({
-  tag: 'ion-gesture-ctrl'
+  tag: 'ion-gesture-controller'
 })
 export class GestureController {
   private id: number = 0;

packages/core/src/components/loading-controller/loading-controller.tsx

@@ -1,9 +1,9 @@
 import { Component, Listen, Method } from '@stencil/core';
-import { LoadingEvent, LoadingOptions, Loading } from '../../index';
+import { Loading, LoadingEvent, LoadingOptions } from '../../index';
 
 
 @Component({
-  tag: 'ion-loading-ctrl'
+  tag: 'ion-loading-controller'
 })
 export class LoadingController {
   private ids = 0;

packages/core/src/components/modal-controller/modal-controller.tsx

@@ -3,7 +3,7 @@ import { Modal, ModalEvent, ModalOptions } from '../../index';
 
 
 @Component({
-  tag: 'ion-modal-ctrl'
+  tag: 'ion-modal-controller'
 })
 export class ModalController {
   private ids = 0;

packages/core/src/components/popover-controller/popover-controller.scss

@@ -1,36 +0,0 @@
-@import "../../themes/ionic.globals";
-
-
-// Popover Controller
-// --------------------------------------------------
-
-ion-popover-controller {
-  display: none;
-}
-
-
-// Popover Controller Backdrop
-// --------------------------------------------------
-
-/// @prop - Color of the backdrop
-$popover-backdrop-color: #000 !default;
-
-
-.popover-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: $z-index-backdrop;
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
-  background-color: $popover-backdrop-color;
-  opacity: .01;
-  transform: translateZ(0);
-}
-
-.popover-backdrop.backdrop-no-tappable {
-  cursor: auto;
-}

packages/core/src/components/popover-controller/popover-controller.tsx

@@ -1,25 +1,17 @@
-import { Component, Listen } from '@stencil/core';
-import { PopoverEvent, PopoverOptions, Popover, IonicControllerApi, Ionic } from '../../index';
+import { Component, Listen, Method } from '@stencil/core';
+import { PopoverEvent, PopoverOptions, Popover } from '../../index';
 
 
 @Component({
-  tag: 'ion-popover-controller',
-  // styleUrl: 'popover-controller.scss'
+  tag: 'ion-popover-controller'
 })
-export class PopoverController implements IonicControllerApi {
+export class PopoverController {
   private ids = 0;
   private popoverResolves: {[popoverId: string]: Function} = {};
   private popovers: Popover[] = [];
-  private appRoot: Element;
 
-
-  ionViewDidLoad() {
-    this.appRoot = document.querySelector('ion-app') || document.body;
-    Ionic.registerController('popover', this);
-  }
-
-
-  load(opts?: PopoverOptions) {
+  @Method()
+  create(opts?: PopoverOptions) {
     // create ionic's wrapping ion-popover component
     const popover = document.createElement('ion-popover');
     const id = this.ids++;
@@ -33,7 +25,8 @@ export class PopoverController implements IonicControllerApi {
     Object.assign(popover, opts);
 
     // append the popover element to the document body
-    this.appRoot.appendChild(popover as any);
+    const appRoot = document.querySelector('ion-app') || document.body;
+    appRoot.appendChild(popover as any);
 
     // store the resolve function to be called later up when the popover loads
     return new Promise<Popover>(resolve => {
@@ -43,7 +36,7 @@ export class PopoverController implements IonicControllerApi {
 
 
   @Listen('body:ionPopoverDidLoad')
-  viewDidLoad(ev: PopoverEvent) {
+  protected viewDidLoad(ev: PopoverEvent) {
     const popover = ev.detail.popover;
     const popoverResolve = this.popoverResolves[popover.id];
     if (popoverResolve) {
@@ -54,13 +47,13 @@ export class PopoverController implements IonicControllerApi {
 
 
   @Listen('body:ionPopoverWillPresent')
-  willPresent(ev: PopoverEvent) {
+  protected willPresent(ev: PopoverEvent) {
     this.popovers.push(ev.detail.popover);
   }
 
 
   @Listen('body:ionPopoverWillDismiss, body:ionPopoverDidUnload')
-  willDismiss(ev: PopoverEvent) {
+  protected willDismiss(ev: PopoverEvent) {
     const index = this.popovers.indexOf(ev.detail.popover);
     if (index > -1) {
       this.popovers.splice(index, 1);
@@ -69,7 +62,7 @@ export class PopoverController implements IonicControllerApi {
 
 
   @Listen('body:keyup.escape')
-  escapeKeyUp() {
+  protected escapeKeyUp() {
     const lastPopover = this.popovers[this.popovers.length - 1];
     if (lastPopover) {
       lastPopover.dismiss();

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

@@ -1,14 +1,13 @@
-import { Animation, PopoverOptions } from '../../../index';
+import { Animation } from '../../../index';
 
-export default function popoverEnter(
-  Animation: Animation,
-  baseElm: HTMLElement,
-  evtSource: Event
-) {
+
+/**
+ * iOS Popover Enter Animation
+ */
+export default function(Animation: Animation, baseElm: HTMLElement) {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();
-
   backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
 
   const wrapperAnimation = new Animation();

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

@@ -1,7 +1,7 @@
 import { Animation } from '../../../index';
 
 /**
- * iOS Modal Leave Animation
+ * iOS Popover Leave Animation
  */
 export default function(Animation: Animation, baseElm: HTMLElement) {
   const baseAnimation = new Animation();
@@ -10,12 +10,11 @@ export default function(Animation: Animation, baseElm: HTMLElement) {
   backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
 
   const wrapperAnimation = new Animation();
-  const wrapperElm = baseElm.querySelector('.popover-wrapper');
+  wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
 
   wrapperAnimation.fromTo('opacity', 0.99, 0);
   backdropAnimation.fromTo('opacity', 0.08, 0);
 
-
   return baseAnimation
     .addElement(baseElm)
     .easing('ease')

packages/core/src/components/popover/popover.scss

@@ -3,6 +3,9 @@
 // Popover
 // --------------------------------------------------
 
+/// @prop - Color of the backdrop
+$popover-backdrop-color: #000 !default;
+
 
 ion-popover {
   @include position(0, 0, 0, 0);
@@ -41,4 +44,31 @@ ion-popover {
 
 .popover-content .scroll-content {
   position: relative;
+}
+
+ion-popover-controller {
+  display: none;
+}
+
+
+// Popover Backdrop
+// --------------------------------------------------
+
+.popover-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-backdrop;
+  display: block;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: $popover-backdrop-color;
+  opacity: .01;
+  transform: translateZ(0);
+}
+
+.popover-backdrop.backdrop-no-tappable {
+  cursor: auto;
 }

packages/core/src/components/popover/popover.tsx

@@ -1,12 +1,6 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  Listen,
-  Prop
-} from '@stencil/core';
-import { AnimationBuilder, Animation, Ionic } from '../../index';
+import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
+import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
+
 import { createThemedClasses } from '../../utils/theme';
 
 import iOSEnterAnimation from './animations/ios.enter';
@@ -24,14 +18,19 @@ import iOSLeaveAnimation from './animations/ios.leave';
   }
 })
 export class Popover {
+  private animation: Animation;
+
   @Element() private el: HTMLElement;
 
-  @Event() ionPopoverDidLoad: EventEmitter;
-  @Event() ionPopoverWillPresent: EventEmitter;
-  @Event() ionPopoverDidPresent: EventEmitter;
-  @Event() ionPopoverWillDismiss: EventEmitter;
-  @Event() ionPopoverDidDismiss: EventEmitter;
-  @Event() ionPopoverDidUnload: EventEmitter;
+  @Event() private ionPopoverDidLoad: EventEmitter;
+  @Event() private ionPopoverDidPresent: EventEmitter;
+  @Event() private ionPopoverWillPresent: EventEmitter;
+  @Event() private ionPopoverWillDismiss: EventEmitter;
+  @Event() private ionPopoverDidDismiss: EventEmitter;
+  @Event() private ionPopoverDidUnload: EventEmitter;
+
+  @Prop({ connect: 'ion-animation' }) animationCtrl: AnimationController;
+  @Prop({ context: 'config' }) config: Config;
 
   @Prop() mode: string;
   @Prop() color: string;
@@ -45,19 +44,6 @@ export class Popover {
   @Prop() id: string;
   @Prop() showBackdrop: boolean = true;
 
-  private animation: Animation;
-
-  @Listen('ionDismiss')
-  onDismiss(ev: UIEvent) {
-    ev.stopPropagation();
-    ev.preventDefault();
-
-    this.dismiss();
-  }
-
-  ionViewDidLoad() {
-    this.ionPopoverDidLoad.emit({ popover: this });
-  }
 
   present() {
     return new Promise<void>(resolve => {
@@ -73,20 +59,23 @@ export class Popover {
     this.ionPopoverWillPresent.emit({ popover: this });
 
     // get the user's animation fn if one was provided
-    let animationBuilder = this.enterAnimation
-      ? this.enterAnimation
-      : iOSEnterAnimation;
-    //
+    let animationBuilder = this.enterAnimation;
+
+    if (!animationBuilder) {
+      // user did not provide a custom animation fn
+      // decide from the config which animation to use
+      animationBuilder = iOSEnterAnimation;
+    }
+
     // build the animation and kick it off
-    Ionic.controller('animation').then(Animation => {
-      this.animation = animationBuilder(Animation, this.el, this.ev);
-      this.animation
-        .onFinish((a: any) => {
-          a.destroy();
-          this.ionPopoverDidPresent.emit({ popover: this });
-          resolve();
-        })
-        .play();
+    this.animationCtrl.create(animationBuilder, this.el).then(animation => {
+      this.animation = animation;
+
+      animation.onFinish((a: any) => {
+        a.destroy();
+        this.ionViewDidEnter();
+        resolve();
+      }).play();
     });
   }
 
@@ -95,35 +84,56 @@ export class Popover {
       this.animation.destroy();
       this.animation = null;
     }
-    return new Promise<void>(resolve => {
+    return new Promise(resolve => {
       this.ionPopoverWillDismiss.emit({ popover: this });
 
-      let animationBuilder = this.exitAnimation
-        ? this.exitAnimation
-        : iOSLeaveAnimation;
+      // get the user's animation fn if one was provided
+      let animationBuilder = this.exitAnimation;
+      if (!animationBuilder) {
+        // user did not provide a custom animation fn
+        // decide from the config which animation to use
+        animationBuilder = iOSLeaveAnimation;
+      }
 
       // build the animation and kick it off
-      Ionic.controller('animation').then(Animation => {
-        this.animation = animationBuilder(Animation, this.el);
-        this.animation
-          .onFinish((a: any) => {
-            a.destroy();
-            this.ionPopoverDidDismiss.emit({ popover: this });
-            Core.dom.write(() => {
-              this.el.parentNode.removeChild(this.el);
-            });
-            resolve();
-          })
-          .play();
+      this.animationCtrl.create(animationBuilder, this.el).then(animation => {
+        this.animation = animation;
+
+        animation.onFinish((a: any) => {
+          a.destroy();
+          this.ionPopoverDidDismiss.emit({ popover: this });
+
+          Context.dom.write(() => {
+            this.el.parentNode.removeChild(this.el);
+          });
+
+          resolve();
+        }).play();
       });
     });
   }
 
-  ionViewDidUnload() {
+  protected ionViewDidUnload() {
     this.ionPopoverDidUnload.emit({ popover: this });
   }
 
-  backdropClick() {
+  @Listen('ionDismiss')
+  protected onDismiss(ev: UIEvent) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    this.dismiss();
+  }
+
+  protected ionViewDidLoad() {
+    this.ionPopoverDidLoad.emit({ popover: this });
+  }
+
+  protected ionViewDidEnter() {
+    this.ionPopoverDidPresent.emit({ popover: this });
+  }
+
+  protected backdropClick() {
     if (this.enableBackdropDismiss) {
       // const opts: NavOptions = {
       //   minClickBlockDuration: 400

packages/core/src/components/popover/test/basic.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Slides Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-content>
+      <ion-button onclick="presentPopover(event)">Show Popover</ion-button>
+
+      <ion-popover-controller></ion-popover-controller>
+    </ion-content>
+  </ion-app>
+  <script>
+    function presentPopover(event) {
+      var popoverController = document.querySelector('ion-popover-controller');
+      popoverController.create({
+        component: 'profile-page',
+        ev: event
+      }).then(popover => {
+        popover.present();
+      });
+    }
+
+    class ProfilePage extends HTMLElement {
+      constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({
+          mode: 'open'
+        });
+
+        shadowRoot.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              My Profile
+            </ion-toolbar>
+          </ion-header>
+          <ion-content padding>
+            <p>
+              <ion-button>Dismiss</ion-button>
+            </p>
+          </ion-content>`;
+      }
+
+      connectedCallback() {
+        var btn = this.shadowRoot.querySelector('ion-button');
+        btn.addEventListener('click', (uiEvent) => {
+          var ev = new CustomEvent('ionDismiss', {
+            composed: true,
+            bubbles: true
+          });
+          uiEvent.target.dispatchEvent(ev);
+        });
+      }
+    }
+
+    customElements.define('profile-page', ProfilePage);
+  </script>
+</body>
+
+</html>