fix(templates): Safari polyfilled templates not recognizing parent as…

… element

Fixes #5

src/events/polymer.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, OnInit } from '@angular/core';
 
 import { getCustomElementClass } from '../util/getCustomElementClass';
-import { Polymer } from '../util/Polymer';
+import '../util/Polymer';
 
 @Directive({
   selector: '[polymer]'
@@ -22,7 +22,7 @@ export class PolymerDirective implements OnInit {
       }
 
       notify.forEach(property => {
-        const eventName = `${Polymer.CaseMap.camelToDashCase(property)}-changed`;
+        const eventName = `${window.Polymer.CaseMap.camelToDashCase(property)}-changed`;
         this.elementRef.nativeElement.addEventListener(eventName, event => {
           this.elementRef.nativeElement.dispatchEvent(new CustomEvent(`${property}Change`, {
             detail: event.detail

src/templates/polymer-template.ts

@@ -12,26 +12,25 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
 })
 export class PolymerTemplateDirective {
   constructor(public view: ViewContainerRef, public templateRef: TemplateRef<any>) {
-    const parentElement: HTMLElement = view.element.nativeElement.parentElement;
+    const parentNode = (<HTMLElement>view.element.nativeElement).parentNode;
     const template = document.createElement('template');
     const viewRef = view.createEmbeddedView(templateRef);
     viewRef.rootNodes.forEach(rootNode => {
-      parentElement.removeChild(rootNode);
+      parentNode.removeChild(rootNode);
       template.content.appendChild(rootNode);
     });
 
-    parentElement.appendChild(template);
+    parentNode.appendChild(template);
 
     // Detach and re-attach the parent element. This will trigger any template attaching logic
     // that a custom elements needs which Angular skipped when using <ng-template>
-    const hostElement = parentElement.parentElement;
-    const parentElementIndex = Array.from(hostElement.children).indexOf(parentElement);
-    const parentSibling = parentElement.nextSibling;
-    hostElement.removeChild(parentElement);
+    const hostNode = parentNode.parentNode;
+    const parentSibling = parentNode.nextSibling;
+    hostNode.removeChild(parentNode);
     if (parentSibling) {
-      hostElement.insertBefore(parentSibling, parentElement);
+      hostNode.insertBefore(parentSibling, parentNode);
     } else {
-      hostElement.appendChild(parentElement);
+      hostNode.appendChild(parentNode);
     }
   }
 }

src/util/Polymer.ts

@@ -15,4 +15,4 @@ declare global {
   }
 }
 
-export const Polymer = window.Polymer;
+export { };

src/util/customElements.ts

@@ -14,4 +14,4 @@ declare global {
   }
 }
 
-export const customElements = window.customElements;
+export { };

src/util/getCustomElementClass.ts

@@ -1,13 +1,13 @@
 import { ElementRef } from '@angular/core';
 
-import { customElements } from './customElements';
+import './customElements';
 import { getTagName } from './getTagName';
 
 export function getCustomElementClass(elementRef: ElementRef): Function {
   if (elementRef && elementRef.nativeElement) {
     const htmlElement = Object.getPrototypeOf(elementRef.nativeElement);
     if (htmlElement && htmlElement.is) {
-      return customElements.get(htmlElement.is);
+      return window.customElements.get(htmlElement.is);
     } else {
       console.warn(`${getTagName(elementRef)} is not registered`);
     }