fix(angular): modal and popover support

core/src/components/modal/modal.tsx

@@ -33,7 +33,7 @@ export class Modal implements OverlayInterface {
   @Prop({ context: 'config' }) config: Config;
 
   @Prop() overlayId: number;
-  @Prop({ mutable: true }) delegate: FrameworkDelegate;
+  @Prop() delegate: FrameworkDelegate;
 
   /**
    * The color to use from your Sass `$colors` map.
@@ -175,7 +175,7 @@ export class Modal implements OverlayInterface {
       ...getClassMap(this.cssClass),
       'ion-page': true
     };
-    return attachComponent(container, this.component, classes, data)
+    return attachComponent(this.delegate, container, this.component, classes, data)
       .then(el => this.usersElement = el)
       .then(() => present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, undefined));
   }

core/src/components/popover/popover.tsx

@@ -31,7 +31,7 @@ export class Popover implements OverlayInterface {
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: HTMLIonAnimationControllerElement;
   @Prop({ context: 'config' }) config: Config;
-  @Prop({ mutable: true }) delegate: FrameworkDelegate;
+  @Prop() delegate: FrameworkDelegate;
   @Prop() overlayId: number;
 
   /**
@@ -185,7 +185,7 @@ export class Popover implements OverlayInterface {
       ...getClassMap(this.cssClass),
       'popover-viewport': true
     };
-    return attachComponent(container, this.component, classes, data)
+    return attachComponent(this.delegate, container, this.component, classes, data)
       .then(el => this.usersElement = el)
       .then(() => present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.ev));
   }

core/src/index.d.ts

@@ -109,7 +109,7 @@ export { PlatformConfig } from './global/platform-configs';
 export * from './components';
 
 export { DomController, RafCallback } from './global/dom-controller';
-export { FrameworkDelegate, FrameworkMountingData } from './utils/dom-framework-delegate';
+export { FrameworkDelegate } from './utils/dom-framework-delegate';
 export { OverlayEventDetail } from './utils/overlays';
 
 export interface Config {

core/src/utils/dom-framework-delegate.ts

@@ -1,41 +1,5 @@
 
 export interface FrameworkDelegate {
-  attachViewToDom(elementOrContainerToMountTo: any, elementOrComponentToMount: any, propsOrDataObj?: any, classesToAdd?: string[], escapeHatch?: any): Promise<FrameworkMountingData>;
-  removeViewFromDom(elementOrContainerToUnmountFrom: any, elementOrComponentToUnmount: any, escapeHatch?: any): Promise<void>;
-}
-
-
-export interface FrameworkMountingData {
-  element: HTMLElement;
-  component: any;
-  data: any;
-}
-
-export class DomFrameworkDelegate implements FrameworkDelegate {
-
-  attachViewToDom(parentElement: HTMLElement, tagOrElement: string | HTMLElement, data: any = {}, classesToAdd: string[] = []): Promise<FrameworkMountingData> {
-    return new Promise((resolve) => {
-      const usersElement = (typeof tagOrElement === 'string' ? document.createElement(tagOrElement) : tagOrElement);
-      Object.assign(usersElement, data);
-
-      if (classesToAdd.length) {
-        for (const clazz of classesToAdd) {
-          usersElement.classList.add(clazz);
-        }
-      }
-
-      parentElement.appendChild(usersElement);
-
-      resolve({
-        element: usersElement,
-        data: data,
-        component: tagOrElement
-      });
-    });
-  }
-
-  removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement): Promise<void> {
-    parentElement.removeChild(childElement);
-    return Promise.resolve();
-  }
+  attachViewToDom(container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]): Promise<any>;
+  removeViewFromDom(container: any, component: any): Promise<void>;
 }

core/src/utils/overlays.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@stencil/core';
-import { Animation, AnimationBuilder, Config, CssClassMap } from '..';
+import { Animation, AnimationBuilder, Config, CssClassMap, FrameworkDelegate } from '..';
 
 let lastId = 1;
 
@@ -137,7 +137,10 @@ export function autoFocus(containerEl: HTMLElement): HTMLElement|null {
   return null;
 }
 
-export function attachComponent(container: Element, component: string|HTMLElement, cssClasses: CssClassMap, data: any): Promise<HTMLElement> {
+export function attachComponent(delegate: FrameworkDelegate, container: Element, component: string|HTMLElement, cssClasses: CssClassMap, data: any): Promise<HTMLElement> {
+  if (delegate) {
+    return delegate.attachViewToDom(container, component, data, Object.keys(cssClasses));
+  }
   const el = (typeof component === 'string') ? document.createElement(component) : component;
   Object.assign(el, data);
   Object.keys(cssClasses).forEach(c => el.classList.add(c));