IE11 fixes.

dist/ngx-flowchart/bundles/ngx-flowchart.umd.js

@@ -2057,11 +2057,18 @@
                 }
                 else {
                     /** @type {?} */
-                    var target = (/** @type {?} */ (event.target));
-                    this.destinationHtmlElements.push(target);
-                    this.oldDisplayStyles.push(target.style.display);
-                    target.style.display = 'none';
-                    this.nodeDraggingScope.shadowDragStarted = true;
+                    var target_1 = (/** @type {?} */ (event.target));
+                    /** @type {?} */
+                    var cloneNode_1 = target_1.cloneNode(true);
+                    target_1.parentNode.insertBefore(cloneNode_1, target_1);
+                    target_1.style.visibility = 'collapse';
+                    setTimeout((/**
+                     * @return {?}
+                     */
+                    function () {
+                        target_1.parentNode.removeChild(cloneNode_1);
+                        target_1.style.visibility = 'visible';
+                    }), 0);
                 }
                 return;
             }
@@ -2096,12 +2103,29 @@
                 originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
             }
             else {
+                this.draggedElements.forEach((/**
+                 * @param {?} draggedElement
+                 * @return {?}
+                 */
+                function (draggedElement) {
+                    /** @type {?} */
+                    var cloneNode = draggedElement.cloneNode(true);
+                    draggedElement.parentNode.insertBefore(cloneNode, draggedElement);
+                    draggedElement.style.visibility = 'collapse';
+                    setTimeout((/**
+                     * @return {?}
+                     */
+                    function () {
+                        draggedElement.parentNode.removeChild(cloneNode);
+                        draggedElement.style.visibility = 'visible';
+                    }), 0);
+                }));
+                if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
                     for (var i = 0; i < this.draggedElements.length; i++) {
                         this.destinationHtmlElements.push(this.draggedElements[i]);
                         this.oldDisplayStyles.push(this.destinationHtmlElements[i].style.display);
                         this.destinationHtmlElements[i].style.display = 'none';
                     }
-                if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
                     this.nodeDraggingScope.shadowDragStarted = true;
                 }
             }

dist/ngx-flowchart/fesm2015/ngx-flowchart.js

@@ -1521,10 +1521,17 @@ class FcNodeDraggingService {
             else {
                 /** @type {?} */
                 const target = (/** @type {?} */ (event.target));
-                this.destinationHtmlElements.push(target);
-                this.oldDisplayStyles.push(target.style.display);
-                target.style.display = 'none';
-                this.nodeDraggingScope.shadowDragStarted = true;
+                /** @type {?} */
+                const cloneNode = target.cloneNode(true);
+                target.parentNode.insertBefore(cloneNode, target);
+                target.style.visibility = 'collapse';
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    target.parentNode.removeChild(cloneNode);
+                    target.style.visibility = 'visible';
+                }), 0);
             }
             return;
         }
@@ -1559,12 +1566,29 @@ class FcNodeDraggingService {
             originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
         }
         else {
+            this.draggedElements.forEach((/**
+             * @param {?} draggedElement
+             * @return {?}
+             */
+            (draggedElement) => {
+                /** @type {?} */
+                const cloneNode = draggedElement.cloneNode(true);
+                draggedElement.parentNode.insertBefore(cloneNode, draggedElement);
+                draggedElement.style.visibility = 'collapse';
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    draggedElement.parentNode.removeChild(cloneNode);
+                    draggedElement.style.visibility = 'visible';
+                }), 0);
+            }));
+            if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
                 for (let i = 0; i < this.draggedElements.length; i++) {
                     this.destinationHtmlElements.push(this.draggedElements[i]);
                     this.oldDisplayStyles.push(this.destinationHtmlElements[i].style.display);
                     this.destinationHtmlElements[i].style.display = 'none';
                 }
-            if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
                 this.nodeDraggingScope.shadowDragStarted = true;
             }
         }

dist/ngx-flowchart/fesm5/ngx-flowchart.js

@@ -1861,11 +1861,18 @@ var FcNodeDraggingService = /** @class */ (function () {
             }
             else {
                 /** @type {?} */
-                var target = (/** @type {?} */ (event.target));
-                this.destinationHtmlElements.push(target);
-                this.oldDisplayStyles.push(target.style.display);
-                target.style.display = 'none';
-                this.nodeDraggingScope.shadowDragStarted = true;
+                var target_1 = (/** @type {?} */ (event.target));
+                /** @type {?} */
+                var cloneNode_1 = target_1.cloneNode(true);
+                target_1.parentNode.insertBefore(cloneNode_1, target_1);
+                target_1.style.visibility = 'collapse';
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () {
+                    target_1.parentNode.removeChild(cloneNode_1);
+                    target_1.style.visibility = 'visible';
+                }), 0);
             }
             return;
         }
@@ -1900,12 +1907,29 @@ var FcNodeDraggingService = /** @class */ (function () {
             originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
         }
         else {
+            this.draggedElements.forEach((/**
+             * @param {?} draggedElement
+             * @return {?}
+             */
+            function (draggedElement) {
+                /** @type {?} */
+                var cloneNode = draggedElement.cloneNode(true);
+                draggedElement.parentNode.insertBefore(cloneNode, draggedElement);
+                draggedElement.style.visibility = 'collapse';
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () {
+                    draggedElement.parentNode.removeChild(cloneNode);
+                    draggedElement.style.visibility = 'visible';
+                }), 0);
+            }));
+            if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
                 for (var i = 0; i < this.draggedElements.length; i++) {
                     this.destinationHtmlElements.push(this.draggedElements[i]);
                     this.oldDisplayStyles.push(this.destinationHtmlElements[i].style.display);
                     this.destinationHtmlElements[i].style.display = 'none';
                 }
-            if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
                 this.nodeDraggingScope.shadowDragStarted = true;
             }
         }

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --open --port 4300",
+    "start": "ng serve --host 0.0.0.0 --open --port 4300",
     "build": "ng build ngx-flowchart --prod",
     "test": "ng test ngx-flowchart",
     "lint": "ng lint",

projects/ngx-flowchart/src/lib/node-dragging.service.ts

@@ -122,10 +122,13 @@ export class FcNodeDraggingService {
         originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
       } else {
         const target: HTMLElement = event.target as HTMLElement;
-        this.destinationHtmlElements.push(target);
-        this.oldDisplayStyles.push(target.style.display);
-        target.style.display = 'none';
-        this.nodeDraggingScope.shadowDragStarted = true;
+        const cloneNode = target.cloneNode(true);
+        target.parentNode.insertBefore(cloneNode, target);
+        target.style.visibility = 'collapse';
+        setTimeout(() => {
+          target.parentNode.removeChild(cloneNode);
+          target.style.visibility = 'visible';
+        }, 0);
       }
       return;
     }
@@ -158,12 +161,21 @@ export class FcNodeDraggingService {
     if (originalEvent.dataTransfer.setDragImage) {
       originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
     } else {
+      this.draggedElements.forEach((draggedElement) => {
+        const cloneNode = draggedElement.cloneNode(true);
+        draggedElement.parentNode.insertBefore(cloneNode, draggedElement);
+        draggedElement.style.visibility = 'collapse';
+        setTimeout(() => {
+          draggedElement.parentNode.removeChild(cloneNode);
+          draggedElement.style.visibility = 'visible';
+        }, 0);
+      });
+      if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
         for (let i = 0; i < this.draggedElements.length; i++) {
           this.destinationHtmlElements.push(this.draggedElements[i]);
           this.oldDisplayStyles.push(this.destinationHtmlElements[i].style.display);
           this.destinationHtmlElements[i].style.display = 'none';
         }
-      if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
         this.nodeDraggingScope.shadowDragStarted = true;
       }
     }

src/polyfills.ts

@@ -56,7 +56,7 @@
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import 'core-js/es/array';
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

tsconfig.json

@@ -10,7 +10,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es5",
     "typeRoots": [
       "node_modules/@types"
     ],