diff --git a/dist/bundles/ng2-canvas-whiteboard.umd.js b/dist/bundles/ng2-canvas-whiteboard.umd.js
index 017ec257..cc10358b 100644
--- a/dist/bundles/ng2-canvas-whiteboard.umd.js
+++ b/dist/bundles/ng2-canvas-whiteboard.umd.js
@@ -1,13 +1,16 @@
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/index'), require('rxjs/operators'), require('lodash'), require('@angular/common')) :
-	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/index', 'rxjs/operators', 'lodash', '@angular/common'], factory) :
-	(factory((global.ng = global.ng || {}, global.ng.ng2CanvasWhiteboard = global.ng.ng2CanvasWhiteboard || {}),global.ng.core,global.rxjs_index,global.rxjs_operators,global.lodash,global.ng.common));
-}(this, (function (exports,_angular_core,rxjs_index,rxjs_operators,lodash,_angular_common) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('lodash'), require('@angular/common')) :
+	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs', 'rxjs/operators', 'lodash', '@angular/common'], factory) :
+	(factory((global.ng = global.ng || {}, global.ng.ng2CanvasWhiteboard = global.ng.ng2CanvasWhiteboard || {}),global.ng.core,global.rxjs,global.rxjs_operators,global.lodash,global.ng.common));
+}(this, (function (exports,_angular_core,rxjs,rxjs_operators,lodash,_angular_common) { 'use strict';
 
 var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -16,7 +19,8 @@ var __extends = (undefined && undefined.__extends) || (function () {
 })();
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-update.model.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @enum {number} */
 var CanvasWhiteboardUpdateType = {
@@ -82,23 +86,25 @@ var CanvasWhiteboardUpdate = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/template.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 var DEFAULT_STYLES = "\n.canvas_whiteboard_button {\n    display: inline-block;\n    outline: 0px;\n    padding-top: 7px;\n    margin-bottom: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.42857143;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    -ms-touch-action: manipulation;\n    touch-action: manipulation;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    background-image: none;\n    border: 1px solid transparent;\n    border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n    z-index: 3;\n}\n\n@media (max-width: 400px) {\n     .canvas_whiteboard_buttons {\n            position: absolute;\n            z-inde\n            top: 0;\n            width: 100%;\n            text-align: center;\n      }\n}\n        \n@media (min-width: 401px) { \n    .canvas_whiteboard_buttons {\n        position: absolute;\n        right: 0%;\n        color: #fff;\n    }\n}\n\n.canvas_whiteboard_buttons {\n    padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n    margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n    -webkit-animation: pulsate 1s ease-out;\n    -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n    0% {\n        -webkit-transform: scale(0.1, 0.1);\n        opacity: 0.0;\n    }\n    50% {\n        opacity: 1.0;\n    }\n    100% {\n        -webkit-transform: scale(1.2, 1.2);\n        opacity: 0.0;\n    }\n}\n.canvas_wrapper_div {\n    width: 100%;\n    height: 100%;\n    border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n    padding-top: 5px;\n}\n\n.canvas_whiteboard {\n    position: absolute;\n    z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n    position: absolute;\n    z-index: 2;\n}\n\n";
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardService = /** @class */ (function () {
     function CanvasWhiteboardService() {
-        this._canvasDrawSubject = new rxjs_index.Subject();
+        this._canvasDrawSubject = new rxjs.Subject();
         this.canvasDrawSubject$ = this._canvasDrawSubject.asObservable();
-        this._canvasClearSubject = new rxjs_index.Subject();
+        this._canvasClearSubject = new rxjs.Subject();
         this.canvasClearSubject$ = this._canvasClearSubject.asObservable();
-        this._canvasUndoSubject = new rxjs_index.Subject();
+        this._canvasUndoSubject = new rxjs.Subject();
         this.canvasUndoSubject$ = this._canvasUndoSubject.asObservable();
-        this._canvasRedoSubject = new rxjs_index.Subject();
+        this._canvasRedoSubject = new rxjs.Subject();
         this.canvasRedoSubject$ = this._canvasRedoSubject.asObservable();
     }
     /**
@@ -132,7 +138,8 @@ var CanvasWhiteboardService = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-point.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardPoint = /** @class */ (function () {
     /**
@@ -147,7 +154,8 @@ var CanvasWhiteboardPoint = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-options.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardShapeOptions = /** @class */ (function () {
     function CanvasWhiteboardShapeOptions() {
@@ -162,7 +170,8 @@ var CanvasWhiteboardShapeOptions = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @abstract
@@ -177,6 +186,7 @@ var CanvasWhiteboardShape = /** @class */ (function () {
         this.options = options || new CanvasWhiteboardShapeOptions();
         this.isVisible = true;
     }
+    // noinspection TsLint
     /**
      * @param {?} update
      * @return {?}
@@ -187,7 +197,8 @@ var CanvasWhiteboardShape = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/circle-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CircleShape = /** @class */ (function (_super) {
     __extends(CircleShape, _super);
@@ -249,7 +260,8 @@ var CircleShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/rectangle-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RectangleShape = /** @class */ (function (_super) {
     __extends(RectangleShape, _super);
@@ -310,7 +322,8 @@ var RectangleShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/free-hand-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var FreeHandShape = /** @class */ (function (_super) {
     __extends(FreeHandShape, _super);
@@ -339,6 +352,11 @@ var FreeHandShape = /** @class */ (function (_super) {
         context.moveTo(this.positionPoint.x, this.positionPoint.y);
         // Draw a dot
         context.lineTo(this.positionPoint.x + 1, this.positionPoint.y + 1);
+        // Normal fastest free hand drawing
+        // this.linePositions.forEach((linePosition) => {
+        //     context.lineTo(linePosition.x, linePosition.y);
+        // });
+        // Quadratic curves drawing
         /** @type {?} */
         var i = 0;
         while (i < this.linePositions.length) {
@@ -387,7 +405,8 @@ var FreeHandShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/smiley-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var SmileyShape = /** @class */ (function (_super) {
     __extends(SmileyShape, _super);
@@ -466,7 +485,8 @@ var SmileyShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/star-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var StarShape = /** @class */ (function (_super) {
     __extends(StarShape, _super);
@@ -550,7 +570,8 @@ var StarShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/line-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var LineShape = /** @class */ (function (_super) {
     __extends(LineShape, _super);
@@ -605,16 +626,16 @@ var LineShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// unsupported: template constraints.
 /**
  * @record
  * @template T
  */
 var CanvasWhiteboardShapeService = /** @class */ (function () {
     function CanvasWhiteboardShapeService() {
-        this._registeredShapesSubject = new rxjs_index.BehaviorSubject([
+        this._registeredShapesSubject = new rxjs.BehaviorSubject([
             FreeHandShape,
             LineShape,
             RectangleShape,
@@ -629,7 +650,10 @@ var CanvasWhiteboardShapeService = /** @class */ (function () {
      * @return {?}
      */
     CanvasWhiteboardShapeService.prototype.getShapeConstructorFromShapeName = function (shapeName) {
-        return this.getCurrentRegisteredShapes().find(function (shape) { return (new shape).getShapeName() === shapeName; });
+        return this.getCurrentRegisteredShapes().find(( /**
+         * @param {?} shape
+         * @return {?}
+         */function (shape) { return (new shape).getShapeName() === shapeName; }));
     };
     /**
      * @return {?}
@@ -665,27 +689,36 @@ var CanvasWhiteboardShapeService = /** @class */ (function () {
     CanvasWhiteboardShapeService.prototype.registerShapes = function (shapes) {
         var _this = this;
         this._registeredShapesSubject.next(this.getCurrentRegisteredShapes()
-            .concat(shapes.filter(function (shape) {
+            .concat(shapes.filter(( /**
+     * @param {?} shape
+     * @return {?}
+     */function (shape) {
             if (_this.isRegisteredShape(shape)) {
                 console.warn("You tried to register a shape:" + shape + ", but is has already been registered.");
                 return false;
             }
             return true;
-        })));
+        }))));
     };
     /**
      * @param {?} shape
      * @return {?}
      */
     CanvasWhiteboardShapeService.prototype.unregisterShape = function (shape) {
-        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function (registeredShape) { return registeredShape !== shape; }));
+        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(( /**
+         * @param {?} registeredShape
+         * @return {?}
+         */function (registeredShape) { return registeredShape !== shape; })));
     };
     /**
      * @param {?} shapes
      * @return {?}
      */
     CanvasWhiteboardShapeService.prototype.unregisterShapes = function (shapes) {
-        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function (shape) { return shapes.indexOf(shape) === -1; }));
+        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(( /**
+         * @param {?} shape
+         * @return {?}
+         */function (shape) { return shapes.indexOf(shape) === -1; })));
     };
     return CanvasWhiteboardShapeService;
 }());
@@ -696,7 +729,8 @@ CanvasWhiteboardShapeService.decorators = [
 CanvasWhiteboardShapeService.ctorParameters = function () { return []; };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardComponent = /** @class */ (function () {
     /**
@@ -745,7 +779,8 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         this._canDraw = true;
         this._clientDragging = false;
         this._updateHistory = [];
-        this._undoStack = [];
+        this._undoStack = []; // Stores the value of start and count for each continuous stroke
+        // Stores the value of start and count for each continuous stroke
         this._redoStack = [];
         this._batchUpdates = [];
         this._updatesNotDrawn = [];
@@ -809,6 +844,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * For security reasons we must check each item on its own since if we iterate the keys
      * we may be injected with malicious values
      *
+     * @private
      * @param {?} options
      * @return {?}
      */
@@ -883,6 +919,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @param {?} property
      * @return {?}
      */
@@ -891,45 +928,71 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Init global window listeners like resize and keydown
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._initCanvasEventListeners = function () {
         var _this = this;
-        this.ngZone.runOutsideAngular(function () {
-            _this._resizeSubscription = rxjs_index.fromEvent(window, 'resize')
+        this.ngZone.runOutsideAngular(( /**
+         * @return {?}
+         */function () {
+            _this._resizeSubscription = rxjs.fromEvent(window, 'resize')
                 .pipe(rxjs_operators.debounceTime(200), rxjs_operators.distinctUntilChanged())
-                .subscribe(function () {
-                _this.ngZone.run(function () {
+                .subscribe(( /**
+         * @return {?}
+         */function () {
+                _this.ngZone.run(( /**
+                 * @return {?}
+                 */function () {
                     _this._redrawCanvasOnResize();
-                });
-            });
-        });
+                }));
+            }));
+        }));
         window.addEventListener("keydown", this._canvasKeyDown.bind(this), false);
     };
     /**
      * Subscribes to new signals in the canvas whiteboard service and executes methods accordingly
      * Because of circular publishing and subscribing, the canvas methods do not use the service when
      * local actions are completed (Ex. clicking undo from the button inside this component)
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._initCanvasServiceObservables = function () {
         var _this = this;
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasDrawSubject$
-            .subscribe(function (updates) { return _this.drawUpdates(updates); }));
+            .subscribe(( /**
+     * @param {?} updates
+     * @return {?}
+     */function (/**
+     * @param {?} updates
+     * @return {?}
+     */ updates) { return _this.drawUpdates(updates); })));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasClearSubject$
-            .subscribe(function () { return _this.clearCanvas(); }));
+            .subscribe(( /**
+     * @return {?}
+     */function () { return _this.clearCanvas(); })));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasUndoSubject$
-            .subscribe(function (updateUUD) { return _this._undoCanvas(updateUUD); }));
+            .subscribe(( /**
+     * @param {?} updateUUD
+     * @return {?}
+     */function (updateUUD) { return _this._undoCanvas(updateUUD); })));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasRedoSubject$
-            .subscribe(function (updateUUD) { return _this._redoCanvas(updateUUD); }));
-        this._registeredShapesSubscription = this._canvasWhiteboardShapeService.registeredShapes$.subscribe(function (shapes) {
+            .subscribe(( /**
+     * @param {?} updateUUD
+     * @return {?}
+     */function (updateUUD) { return _this._redoCanvas(updateUUD); })));
+        this._registeredShapesSubscription = this._canvasWhiteboardShapeService.registeredShapes$.subscribe(( /**
+         * @param {?} shapes
+         * @return {?}
+         */function (shapes) {
             if (!_this.selectedShapeConstructor || !_this._canvasWhiteboardShapeService.isRegisteredShape(_this.selectedShapeConstructor)) {
                 _this.selectedShapeConstructor = shapes[0];
             }
-        });
+        }));
     };
     /**
      * Calculate the canvas width and height from it's parent container width and height (use aspect ratio if needed)
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._calculateCanvasWidthAndHeight = function () {
@@ -945,6 +1008,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Load an image and draw it on the canvas (if an image exists)
+     * @private
      * @param {?=} callbackFn A function that is called after the image loading is finished
      * @return {?} Emits a value when the image has been loaded.
      */
@@ -958,11 +1022,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             return;
         }
         this._imageElement = new Image();
-        this._imageElement.addEventListener("load", function () {
+        this._imageElement.addEventListener("load", ( /**
+         * @return {?}
+         */function () {
             _this._canDraw = true;
             callbackFn && callbackFn();
             _this.onImageLoaded.emit(true);
-        });
+        }));
         this._imageElement.src = this.imageUrl;
     };
     /**
@@ -986,6 +1052,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     /**
      * This method resets the state of the canvas and redraws it.
      * It calls a callback function after redrawing
+     * @private
      * @param {?=} callbackFn
      * @return {?}
      */
@@ -998,6 +1065,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Clears the canvas and redraws the image if the url exists.
+     * @private
      * @param {?=} callbackFn A function that is called after the background is redrawn
      * @return {?} Emits a value when the clearing is finished
      */
@@ -1005,13 +1073,15 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         if (this.context) {
             if (this.imageUrl) {
-                this._loadImage(function () {
+                this._loadImage(( /**
+                 * @return {?}
+                 */function () {
                     _this.context.save();
                     _this._drawImage(_this.context, _this._imageElement, 0, 0, _this.context.canvas.width, _this.context.canvas.height, 0.5, 0.5);
                     _this.context.restore();
                     _this._drawMissingUpdates();
                     callbackFn && callbackFn();
-                });
+                }));
             }
             else {
                 this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
@@ -1021,6 +1091,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._drawStartingColor = function () {
@@ -1104,10 +1175,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      */
     CanvasWhiteboardComponent.prototype.undoLocal = function () {
         var _this = this;
-        this.undo(function (updateUUID) {
+        this.undo(( /**
+         * @param {?} updateUUID
+         * @return {?}
+         */function (updateUUID) {
             _this._redoStack.push(updateUUID);
             _this.onUndo.emit(updateUUID);
-        });
+        }));
     };
     /**
      * This methods selects the last uuid prepares it for undoing (making the whole update sequence invisible)
@@ -1126,6 +1200,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid invisible
+     * @private
      * @param {?} updateUUID
      * @return {?}
      */
@@ -1146,10 +1221,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      */
     CanvasWhiteboardComponent.prototype.redoLocal = function () {
         var _this = this;
-        this.redo(function (updateUUID) {
+        this.redo(( /**
+         * @param {?} updateUUID
+         * @return {?}
+         */function (updateUUID) {
             _this._undoStack.push(updateUUID);
             _this.onRedo.emit(updateUUID);
-        });
+        }));
     };
     /**
      * This methods selects the last uuid prepares it for redoing (making the whole update sequence visible)
@@ -1168,6 +1246,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid visible
+     * @private
      * @param {?} updateUUID
      * @return {?}
      */
@@ -1257,6 +1336,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * If it is a touch event, get the touch positions
      * If we released the touch, the position will be placed in the changedTouches object
      * If it is not a touch event, use the original mouse event received
+     * @private
      * @param {?} eventData
      * @return {?}
      */
@@ -1286,6 +1366,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * can reverse the mapping and get the same position as the one that
      * was drawn on this update.
      *
+     * @private
      * @param {?} update The CanvasWhiteboardUpdate object.
      * @return {?}
      */
@@ -1298,6 +1379,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * If the ctrlKey or commandKey(macOS) was held and the keyCode is 89 (y), a redo action will be performed
      * If the ctrlKey or commandKey(macOS) was held and the keyCode is 83 (s) or 115(S), a save action will be performed
      *
+     * @private
      * @param {?} event The event that occurred.
      * @return {?}
      */
@@ -1319,6 +1401,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * On window resize, recalculate the canvas dimensions and redraw the history
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._redrawCanvasOnResize = function () {
@@ -1327,17 +1410,23 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Redraw the saved history after resetting the canvas state
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._redrawHistory = function () {
         var _this = this;
         /** @type {?} */
         var updatesToDraw = [].concat(this._updateHistory);
-        this._removeCanvasData(function () {
-            updatesToDraw.forEach(function (update) {
+        this._removeCanvasData(( /**
+         * @return {?}
+         */function () {
+            updatesToDraw.forEach(( /**
+             * @param {?} update
+             * @return {?}
+             */function (update) {
                 _this._draw(update);
-            });
-        });
+            }));
+        }));
     };
     /**
      * Draws a CanvasWhiteboardUpdate object on the canvas.
@@ -1349,6 +1438,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * Afterwards the context is used to draw the shape on the canvas.
      * This function saves the last X and Y coordinates that were drawn.
      *
+     * @private
      * @param {?} update The update object.
      * @return {?}
      */
@@ -1383,18 +1473,23 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._drawIncompleteShapes = function () {
         var _this = this;
         this._resetIncompleteShapeCanvas();
-        this._incompleteShapesMap.forEach(function (shape) {
+        this._incompleteShapesMap.forEach(( /**
+         * @param {?} shape
+         * @return {?}
+         */function (shape) {
             if (shape.isVisible) {
                 shape.draw(_this._incompleteShapesCanvasContext);
             }
-        });
+        }));
     };
     /**
+     * @private
      * @param {?} shape
      * @return {?}
      */
@@ -1405,6 +1500,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._resetIncompleteShapeCanvas = function () {
@@ -1418,15 +1514,21 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      */
     CanvasWhiteboardComponent.prototype.drawAllShapes = function () {
         var _this = this;
-        this._redrawBackground(function () {
-            _this._shapesMap.forEach(function (shape) {
+        this._redrawBackground(( /**
+         * @return {?}
+         */function () {
+            _this._shapesMap.forEach(( /**
+             * @param {?} shape
+             * @return {?}
+             */function (shape) {
                 if (shape.isVisible) {
                     shape.draw(_this.context);
                 }
-            });
-        });
+            }));
+        }));
     };
     /**
+     * @private
      * @param {?} update
      * @return {?}
      */
@@ -1457,6 +1559,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * multiple updates are sent at the same time). If this method is called, after 100 ms all updates
      * that were made at that time will be packed up together and sent to the receiver.
      *
+     * @private
      * @param {?} update The update object.
      * @return {?} Emits an Array of Updates when the batch.
      */
@@ -1464,11 +1567,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         this._batchUpdates.push(lodash.cloneDeep(update));
         if (!this._updateTimeout) {
-            this._updateTimeout = setTimeout(function () {
+            this._updateTimeout = setTimeout(( /**
+             * @return {?}
+             */function () {
                 _this.onBatchUpdate.emit(_this._batchUpdates);
                 _this._batchUpdates = [];
                 _this._updateTimeout = null;
-            }, this.batchUpdateTimeoutDuration);
+            }), this.batchUpdateTimeoutDuration);
         }
     };
     
@@ -1482,9 +1587,12 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         if (this._canDraw) {
             this._drawMissingUpdates();
-            updates.forEach(function (update) {
+            updates.forEach(( /**
+             * @param {?} update
+             * @return {?}
+             */function (update) {
                 _this._draw(update);
-            });
+            }));
         }
         else {
             this._updatesNotDrawn = this._updatesNotDrawn.concat(updates);
@@ -1493,6 +1601,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     
     /**
      * Draw any missing updates that were received before the image was loaded
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._drawMissingUpdates = function () {
@@ -1501,14 +1610,18 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             /** @type {?} */
             var updatesToDraw = this._updatesNotDrawn;
             this._updatesNotDrawn = [];
-            updatesToDraw.forEach(function (update) {
+            updatesToDraw.forEach(( /**
+             * @param {?} update
+             * @return {?}
+             */function (update) {
                 _this._draw(update);
-            });
+            }));
         }
     };
     /**
      * Draws an image on the canvas
      *
+     * @private
      * @param {?} context The context used to draw the image on the canvas.
      * @param {?} image The image to draw.
      * @param {?} x The X coordinate for the starting draw position.
@@ -1617,14 +1730,21 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         if (typeof this.context.canvas.toBlob !== "undefined") {
             toBlobMethod = this.context.canvas.toBlob.bind(this.context.canvas);
         }
-        else if (typeof this.context.canvas.msToBlob !== "undefined") {
-            toBlobMethod = function (callback) {
-                callback && callback(_this.context.canvas.msToBlob());
-            };
+        else if (typeof (( /** @type {?} */(this.context.canvas))).msToBlob !== "undefined") {
+            // For IE
+            toBlobMethod = ( /**
+             * @param {?} callback
+             * @return {?}
+             */function (callback) {
+                callback && callback((( /** @type {?} */(_this.context.canvas))).msToBlob());
+            });
         }
-        toBlobMethod && toBlobMethod(function (blob) {
+        toBlobMethod && toBlobMethod(( /**
+         * @param {?} blob
+         * @return {?}
+         */function (blob) {
             callbackFn && callbackFn(blob, returnedDataType);
-        }, returnedDataType, returnedDataQuality);
+        }), returnedDataType, returnedDataQuality);
     };
     /**
      * Generate a canvas image representation and download it locally
@@ -1641,7 +1761,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         if (window.navigator.msSaveOrOpenBlob === undefined) {
             /** @type {?} */
             var downloadLink = document.createElement('a');
-            downloadLink.setAttribute('href', downloadData ? /** @type {?} */ (downloadData) : this.generateCanvasDataUrl(returnedDataType));
+            downloadLink.setAttribute('href', downloadData ? ( /** @type {?} */(downloadData)) : this.generateCanvasDataUrl(returnedDataType));
             /** @type {?} */
             var fileName = customFileName ? customFileName
                 : (this.downloadedFileName ? this.downloadedFileName : "canvas_drawing_" + new Date().valueOf());
@@ -1653,7 +1773,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         else {
             // IE-specific code
             if (downloadData) {
-                this._saveCanvasBlob(/** @type {?} */ (downloadData), returnedDataType);
+                this._saveCanvasBlob(( /** @type {?} */(downloadData)), returnedDataType);
             }
             else {
                 this.generateCanvasBlob(this._saveCanvasBlob.bind(this), returnedDataType);
@@ -1662,6 +1782,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Save the canvas blob (IE) locally
+     * @private
      * @param {?} blob
      * @param {?=} returnedDataType
      * @return {?}
@@ -1699,14 +1820,18 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     CanvasWhiteboardComponent.prototype.saveLocal = function (returnedDataType) {
         var _this = this;
         if (returnedDataType === void 0) { returnedDataType = "image/png"; }
-        this.generateCanvasData(function (generatedData) {
+        this.generateCanvasData(( /**
+         * @param {?} generatedData
+         * @return {?}
+         */function (generatedData) {
             _this.onSave.emit(generatedData);
             if (_this.shouldDownloadDrawing) {
                 _this.downloadCanvasImage(returnedDataType, generatedData);
             }
-        });
+        }));
     };
     /**
+     * @private
      * @param {?} returnedDataType
      * @return {?}
      */
@@ -1760,6 +1885,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Unsubscribe from a given subscription if it is active
+     * @private
      * @param {?} subscription
      * @return {?}
      */
@@ -1768,6 +1894,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             subscription.unsubscribe();
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._generateUUID = function () {
@@ -1775,6 +1902,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             this._random4() + "-" + this._random4() + this._random4() + this._random4();
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._random4 = function () {
@@ -1790,7 +1918,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         this._unsubscribe(this._resizeSubscription);
         this._unsubscribe(this._registeredShapesSubscription);
-        this._canvasWhiteboardServiceSubscriptions.forEach(function (subscription) { return _this._unsubscribe(subscription); });
+        this._canvasWhiteboardServiceSubscriptions.forEach(( /**
+         * @param {?} subscription
+         * @return {?}
+         */function (/**
+         * @param {?} subscription
+         * @return {?}
+         */ subscription) { return _this._unsubscribe(subscription); }));
     };
     return CanvasWhiteboardComponent;
 }());
@@ -1849,12 +1983,13 @@ CanvasWhiteboardComponent.propDecorators = {
     onBatchUpdate: [{ type: _angular_core.Output }],
     onImageLoaded: [{ type: _angular_core.Output }],
     onSave: [{ type: _angular_core.Output }],
-    canvas: [{ type: _angular_core.ViewChild, args: ['canvas',] }],
-    _incompleteShapesCanvas: [{ type: _angular_core.ViewChild, args: ['incompleteShapesCanvas',] }]
+    canvas: [{ type: _angular_core.ViewChild, args: ['canvas', { static: true },] }],
+    _incompleteShapesCanvas: [{ type: _angular_core.ViewChild, args: ['incompleteShapesCanvas', { static: true },] }]
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-selector.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardShapeSelectorComponent = /** @class */ (function () {
     /**
@@ -1923,7 +2058,8 @@ CanvasWhiteboardShapeSelectorComponent.propDecorators = {
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-colorpicker.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardColorPickerComponent = /** @class */ (function () {
     /**
@@ -2027,7 +2163,7 @@ CanvasWhiteboardColorPickerComponent.ctorParameters = function () { return [
 CanvasWhiteboardColorPickerComponent.propDecorators = {
     previewText: [{ type: _angular_core.Input }],
     selectedColor: [{ type: _angular_core.Input }],
-    canvas: [{ type: _angular_core.ViewChild, args: ['canvaswhiteboardcolorpicker',] }],
+    canvas: [{ type: _angular_core.ViewChild, args: ['canvaswhiteboardcolorpicker', { static: true },] }],
     showColorPicker: [{ type: _angular_core.Input }],
     onToggleColorPicker: [{ type: _angular_core.Output }],
     onColorSelected: [{ type: _angular_core.Output }],
@@ -2035,7 +2171,8 @@ CanvasWhiteboardColorPickerComponent.propDecorators = {
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-preview.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardShapePreviewComponent = /** @class */ (function () {
     function CanvasWhiteboardShapePreviewComponent() {
@@ -2051,7 +2188,7 @@ var CanvasWhiteboardShapePreviewComponent = /** @class */ (function () {
      * @return {?}
      */
     CanvasWhiteboardShapePreviewComponent.prototype.ngOnChanges = function (changes) {
-        if (changes["shapeConstructor"] || changes["shapeOptions"]) {
+        if (changes.shapeConstructor || changes.shapeOptions) {
             this.drawShapePreview();
         }
     };
@@ -2085,7 +2222,8 @@ CanvasWhiteboardShapePreviewComponent.propDecorators = {
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/ng2-canvas-whiteboard.module.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardModule = /** @class */ (function () {
     function CanvasWhiteboardModule() {
diff --git a/dist/bundles/ng2-canvas-whiteboard.umd.min.js b/dist/bundles/ng2-canvas-whiteboard.umd.min.js
index 24d5bafe..8aa515eb 100644
--- a/dist/bundles/ng2-canvas-whiteboard.umd.min.js
+++ b/dist/bundles/ng2-canvas-whiteboard.umd.min.js
@@ -1,3 +1,3 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs/index"),require("rxjs/operators"),require("lodash"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/index","rxjs/operators","lodash","@angular/common"],factory):factory((global.ng=global.ng||{},global.ng.ng2CanvasWhiteboard=global.ng.ng2CanvasWhiteboard||{}),global.ng.core,global.rxjs_index,global.rxjs_operators,global.lodash,global.ng.common)}(this,function(exports,_angular_core,rxjs_index,rxjs_operators,lodash,_angular_common){"use strict";var __extends=function(){var extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}(),CanvasWhiteboardUpdateType={START:0,DRAG:1,STOP:2};CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.START]="START",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.DRAG]="DRAG",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.STOP]="STOP";var CanvasWhiteboardUpdate=function(){function CanvasWhiteboardUpdate(x,y,type,UUID,selectedShape,selectedShapeOptions){this.x=x,this.y=y,this.type=type,this.UUID=UUID,this.selectedShape=selectedShape,this.selectedShapeOptions=selectedShapeOptions}return CanvasWhiteboardUpdate.deserializeJson=function(json){var parsedJson;try{return parsedJson=JSON.parse(json),new CanvasWhiteboardUpdate(parsedJson.x,parsedJson.y,parsedJson.type,parsedJson.uuid,parsedJson.selectedShape,parsedJson.selectedShapeOptions)}catch(e){return console.error("The canvas whiteboard update is not p1arseable"),null}},CanvasWhiteboardUpdate.prototype.stringify=function(){var objectToSerialize={x:this.x.toFixed(3),y:this.y.toFixed(3),type:this.type,uuid:this.UUID,selectedShape:this.selectedShape};return this.selectedShapeOptions&&(objectToSerialize.selectedShapeOptions=this.selectedShapeOptions),JSON.stringify(objectToSerialize)},CanvasWhiteboardUpdate}(),DEFAULT_STYLES="\n.canvas_whiteboard_button {\n    display: inline-block;\n    outline: 0px;\n    padding-top: 7px;\n    margin-bottom: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.42857143;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    -ms-touch-action: manipulation;\n    touch-action: manipulation;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    background-image: none;\n    border: 1px solid transparent;\n    border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n    z-index: 3;\n}\n\n@media (max-width: 400px) {\n     .canvas_whiteboard_buttons {\n            position: absolute;\n            z-inde\n            top: 0;\n            width: 100%;\n            text-align: center;\n      }\n}\n        \n@media (min-width: 401px) { \n    .canvas_whiteboard_buttons {\n        position: absolute;\n        right: 0%;\n        color: #fff;\n    }\n}\n\n.canvas_whiteboard_buttons {\n    padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n    margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n    -webkit-animation: pulsate 1s ease-out;\n    -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n    0% {\n        -webkit-transform: scale(0.1, 0.1);\n        opacity: 0.0;\n    }\n    50% {\n        opacity: 1.0;\n    }\n    100% {\n        -webkit-transform: scale(1.2, 1.2);\n        opacity: 0.0;\n    }\n}\n.canvas_wrapper_div {\n    width: 100%;\n    height: 100%;\n    border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n    padding-top: 5px;\n}\n\n.canvas_whiteboard {\n    position: absolute;\n    z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n    position: absolute;\n    z-index: 2;\n}\n\n",CanvasWhiteboardService=function(){function CanvasWhiteboardService(){this._canvasDrawSubject=new rxjs_index.Subject,this.canvasDrawSubject$=this._canvasDrawSubject.asObservable(),this._canvasClearSubject=new rxjs_index.Subject,this.canvasClearSubject$=this._canvasClearSubject.asObservable(),this._canvasUndoSubject=new rxjs_index.Subject,this.canvasUndoSubject$=this._canvasUndoSubject.asObservable(),this._canvasRedoSubject=new rxjs_index.Subject,this.canvasRedoSubject$=this._canvasRedoSubject.asObservable()}return CanvasWhiteboardService.prototype.drawCanvas=function(updates){this._canvasDrawSubject.next(updates)},CanvasWhiteboardService.prototype.clearCanvas=function(){this._canvasClearSubject.next()},CanvasWhiteboardService.prototype.undoCanvas=function(updateUUD){this._canvasUndoSubject.next(updateUUD)},CanvasWhiteboardService.prototype.redoCanvas=function(updateUUD){this._canvasRedoSubject.next(updateUUD)},CanvasWhiteboardService}(),CanvasWhiteboardPoint=function(){function CanvasWhiteboardPoint(x,y){this.x=x,this.y=y}return CanvasWhiteboardPoint}(),CanvasWhiteboardShapeOptions=function(){function CanvasWhiteboardShapeOptions(){this.shouldFillShape=!1,this.fillStyle=null,this.strokeStyle="rgba(0,0,0,1)",this.lineWidth=2,this.lineJoin="round",this.lineCap="round"}return CanvasWhiteboardShapeOptions}(),CanvasWhiteboardShape=function(){function CanvasWhiteboardShape(positionPoint,options){this.positionPoint=positionPoint||new CanvasWhiteboardPoint(0,0),this.options=options||new CanvasWhiteboardShapeOptions,this.isVisible=!0}return CanvasWhiteboardShape.prototype.onStopReceived=function(update){},CanvasWhiteboardShape}(),CircleShape=function(_super){function CircleShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this}return __extends(CircleShape,_super),CircleShape.prototype.getShapeName=function(){return"CircleShape"},CircleShape.prototype.draw=function(context){context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),Object.assign(context,this.options),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath()},CircleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},CircleShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},CircleShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},CircleShape}(CanvasWhiteboardShape),RectangleShape=function(_super){function RectangleShape(positionPoint,options,width,height){var _this=_super.call(this,positionPoint,options)||this;return _this.width=width||0,_this.height=height||0,_this}return __extends(RectangleShape,_super),RectangleShape.prototype.getShapeName=function(){return"RectangleShape"},RectangleShape.prototype.draw=function(context){this.width&&this.height&&(context.beginPath(),Object.assign(context,this.options),context.rect(this.positionPoint.x,this.positionPoint.y,this.width,this.height),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath())},RectangleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.width=context.canvas.width-4,this.height=context.canvas.height-4,this.draw(context)},RectangleShape.prototype.onUpdateReceived=function(update){this.width=update.x-this.positionPoint.x,this.height=update.y-this.positionPoint.y},RectangleShape}(CanvasWhiteboardShape),FreeHandShape=function(_super){function FreeHandShape(positionPoint,options){var _this=_super.call(this,positionPoint,options)||this;return _this.linePositions=[],_this}return __extends(FreeHandShape,_super),FreeHandShape.prototype.getShapeName=function(){return"FreeHandShape"},FreeHandShape.prototype.draw=function(context){Object.assign(context,this.options),context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y),context.lineTo(this.positionPoint.x+1,this.positionPoint.y+1);for(var i=0;i<this.linePositions.length;)if(this.linePositions.length-i>2){var controlPoint1=this.linePositions[i],controlPoint2=this.linePositions[i+1],endPoint=this.linePositions[i+2];context.bezierCurveTo(controlPoint1.x,controlPoint1.y,controlPoint2.x,controlPoint2.y,endPoint.x,endPoint.y),i+=2}else{var linePosition=this.linePositions[i];context.lineTo(linePosition.x,linePosition.y),i+=1}context.stroke()},FreeHandShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.linePositions=[new CanvasWhiteboardPoint(context.canvas.width-5,.3*context.canvas.height),new CanvasWhiteboardPoint(.2*context.canvas.width,.4*context.canvas.height),new CanvasWhiteboardPoint(.6*context.canvas.width,.8*context.canvas.height),new CanvasWhiteboardPoint(context.canvas.width,context.canvas.height)],this.draw(context)},FreeHandShape.prototype.onUpdateReceived=function(update){this.linePositions.push(new CanvasWhiteboardPoint(update.x,update.y))},FreeHandShape}(CanvasWhiteboardShape),SmileyShape=function(_super){function SmileyShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return _this.options.shouldFillShape=!0,_this.options.fillStyle=_this.options.fillStyle||"yellow",_this.radius=radius||0,_this}return __extends(SmileyShape,_super),SmileyShape.prototype.getShapeName=function(){return"SmileyShape"},SmileyShape.prototype.draw=function(context){context.beginPath(),Object.assign(context,this.options),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),context.fill(),context.stroke(),context.beginPath();var leftEyeX=this.positionPoint.x-.3*this.radius,rightEyeX=this.positionPoint.x+.3*this.radius,eyesY=this.positionPoint.y-.2*this.radius,eyeSize=.1*this.radius;context.arc(leftEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.arc(rightEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.fillStyle=this.options.strokeStyle,context.fill(),context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,.7*this.radius,0,Math.PI,!1),context.stroke(),context.closePath()},SmileyShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},SmileyShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},SmileyShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},SmileyShape}(CanvasWhiteboardShape),StarShape=function(_super){function StarShape(positionPoint,options,radius,spikes){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this.spikes=spikes||5,_this}return __extends(StarShape,_super),StarShape.prototype.getShapeName=function(){return"StarShape"},StarShape.prototype.draw=function(context){Object.assign(context,this.options);var rotation=Math.PI/2*3,spikeX=this.positionPoint.x,spikeY=this.positionPoint.y,step=Math.PI/this.spikes;context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y-this.radius);for(var i=0;i<this.spikes;i++)spikeX=this.positionPoint.x+Math.cos(rotation)*this.radius,spikeY=this.positionPoint.y+Math.sin(rotation)*this.radius,context.lineTo(spikeX,spikeY),rotation+=step,spikeX=this.positionPoint.x+Math.cos(rotation)*(.4*this.radius),spikeY=this.positionPoint.y+Math.sin(rotation)*(.4*this.radius),context.lineTo(spikeX,spikeY),rotation+=step,context.stroke();context.lineTo(this.positionPoint.x,this.positionPoint.y-this.radius),context.closePath(),context.stroke(),this.options.shouldFillShape&&context.fill()},StarShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},StarShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},StarShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},StarShape}(CanvasWhiteboardShape),LineShape=function(_super){function LineShape(positionPoint,options,endPosition){var _this=_super.call(this,positionPoint,options)||this;return _this.endPosition=endPosition||new CanvasWhiteboardPoint(_this.positionPoint.x,_this.positionPoint.y),_this}return __extends(LineShape,_super),LineShape.prototype.getShapeName=function(){return"LineShape"},LineShape.prototype.draw=function(context){this.endPosition&&(context.beginPath(),Object.assign(context,this.options),context.moveTo(this.positionPoint.x,this.positionPoint.y),context.lineTo(this.endPosition.x,this.endPosition.y),context.closePath(),context.stroke())},LineShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(0,0),this.endPosition=new CanvasWhiteboardPoint(context.canvas.width,context.canvas.height),this.draw(context)},LineShape.prototype.onUpdateReceived=function(update){this.endPosition=new CanvasWhiteboardPoint(update.x,update.y)},LineShape}(CanvasWhiteboardShape),CanvasWhiteboardShapeService=function(){function CanvasWhiteboardShapeService(){this._registeredShapesSubject=new rxjs_index.BehaviorSubject([FreeHandShape,LineShape,RectangleShape,CircleShape,StarShape,SmileyShape]),this.registeredShapes$=this._registeredShapesSubject.asObservable()}return CanvasWhiteboardShapeService.prototype.getShapeConstructorFromShapeName=function(shapeName){return this.getCurrentRegisteredShapes().find(function(shape){return(new shape).getShapeName()===shapeName})},CanvasWhiteboardShapeService.prototype.getCurrentRegisteredShapes=function(){return this._registeredShapesSubject.getValue()},CanvasWhiteboardShapeService.prototype.isRegisteredShape=function(shape){return-1!==this.getCurrentRegisteredShapes().indexOf(shape)},CanvasWhiteboardShapeService.prototype.registerShape=function(shape){if(this.isRegisteredShape(shape))return void console.warn("You tried to register a shape:"+shape+", but is has already been registered.");var registeredShapes=this.getCurrentRegisteredShapes();registeredShapes.push(shape),this._registeredShapesSubject.next(registeredShapes)},CanvasWhiteboardShapeService.prototype.registerShapes=function(shapes){var _this=this;this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().concat(shapes.filter(function(shape){return!_this.isRegisteredShape(shape)||(console.warn("You tried to register a shape:"+shape+", but is has already been registered."),!1)})))},CanvasWhiteboardShapeService.prototype.unregisterShape=function(shape){this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function(registeredShape){return registeredShape!==shape}))},CanvasWhiteboardShapeService.prototype.unregisterShapes=function(shapes){this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function(shape){return-1===shapes.indexOf(shape)}))},CanvasWhiteboardShapeService}();CanvasWhiteboardShapeService.decorators=[{type:_angular_core.Injectable}],CanvasWhiteboardShapeService.ctorParameters=function(){return[]};var CanvasWhiteboardComponent=function(){function CanvasWhiteboardComponent(ngZone,_changeDetector,_canvasWhiteboardService,_canvasWhiteboardShapeService){this.ngZone=ngZone,this._changeDetector=_changeDetector,this._canvasWhiteboardService=_canvasWhiteboardService,this._canvasWhiteboardShapeService=_canvasWhiteboardShapeService,this.batchUpdateTimeoutDuration=100,this.drawButtonText="",this.clearButtonText="",this.undoButtonText="",this.redoButtonText="",this.saveDataButtonText="",this.drawButtonEnabled=!0,this.clearButtonEnabled=!0,this.undoButtonEnabled=!1,this.redoButtonEnabled=!1,this.saveDataButtonEnabled=!1,this.shouldDownloadDrawing=!0,this.colorPickerEnabled=!1,this.lineWidth=2,this.strokeColor="rgba(0, 0, 0, 1)",this.startingColor="#fff",this.scaleFactor=0,this.drawingEnabled=!1,this.showStrokeColorPicker=!1,this.showFillColorPicker=!1,this.lineJoin="round",this.lineCap="round",this.shapeSelectorEnabled=!0,this.showShapeSelector=!1,this.fillColor="rgba(0,0,0,0)",this.onClear=new _angular_core.EventEmitter,this.onUndo=new _angular_core.EventEmitter,this.onRedo=new _angular_core.EventEmitter,this.onBatchUpdate=new _angular_core.EventEmitter,this.onImageLoaded=new _angular_core.EventEmitter,this.onSave=new _angular_core.EventEmitter,this._canDraw=!0,this._clientDragging=!1,this._updateHistory=[],this._undoStack=[],this._redoStack=[],this._batchUpdates=[],this._updatesNotDrawn=[],this._canvasWhiteboardServiceSubscriptions=[],this._shapesMap=new Map,this._incompleteShapesMap=new Map,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions()}return Object.defineProperty(CanvasWhiteboardComponent.prototype,"imageUrl",{get:function(){return this._imageUrl},set:function(imageUrl){this._imageUrl=imageUrl,this._imageElement=null,this._redrawHistory()},enumerable:!0,configurable:!0}),CanvasWhiteboardComponent.prototype.ngOnInit=function(){this._initInputsFromOptions(this.options),this._initCanvasEventListeners(),this._initCanvasServiceObservables(),this.context=this.canvas.nativeElement.getContext("2d"),this._incompleteShapesCanvasContext=this._incompleteShapesCanvas.nativeElement.getContext("2d")},CanvasWhiteboardComponent.prototype.ngOnChanges=function(changes){changes.options&&changes.options.currentValue!=changes.options.previousValue&&this._initInputsFromOptions(changes.options.currentValue)},CanvasWhiteboardComponent.prototype.ngAfterViewInit=function(){this._calculateCanvasWidthAndHeight(),this._redrawHistory()},CanvasWhiteboardComponent.prototype._initInputsFromOptions=function(options){options&&(this._isNullOrUndefined(options.batchUpdateTimeoutDuration)||(this.batchUpdateTimeoutDuration=options.batchUpdateTimeoutDuration),this._isNullOrUndefined(options.imageUrl)||(this.imageUrl=options.imageUrl),this._isNullOrUndefined(options.aspectRatio)||(this.aspectRatio=options.aspectRatio),this._isNullOrUndefined(options.drawButtonClass)||(this.drawButtonClass=options.drawButtonClass),this._isNullOrUndefined(options.clearButtonClass)||(this.clearButtonClass=options.clearButtonClass),this._isNullOrUndefined(options.undoButtonClass)||(this.undoButtonClass=options.undoButtonClass),this._isNullOrUndefined(options.redoButtonClass)||(this.redoButtonClass=options.redoButtonClass),this._isNullOrUndefined(options.saveDataButtonClass)||(this.saveDataButtonClass=options.saveDataButtonClass),this._isNullOrUndefined(options.drawButtonText)||(this.drawButtonText=options.drawButtonText),this._isNullOrUndefined(options.clearButtonText)||(this.clearButtonText=options.clearButtonText),this._isNullOrUndefined(options.undoButtonText)||(this.undoButtonText=options.undoButtonText),this._isNullOrUndefined(options.redoButtonText)||(this.redoButtonText=options.redoButtonText),this._isNullOrUndefined(options.saveDataButtonText)||(this.saveDataButtonText=options.saveDataButtonText),this._isNullOrUndefined(options.drawButtonEnabled)||(this.drawButtonEnabled=options.drawButtonEnabled),this._isNullOrUndefined(options.clearButtonEnabled)||(this.clearButtonEnabled=options.clearButtonEnabled),this._isNullOrUndefined(options.undoButtonEnabled)||(this.undoButtonEnabled=options.undoButtonEnabled),this._isNullOrUndefined(options.redoButtonEnabled)||(this.redoButtonEnabled=options.redoButtonEnabled),this._isNullOrUndefined(options.saveDataButtonEnabled)||(this.saveDataButtonEnabled=options.saveDataButtonEnabled),this._isNullOrUndefined(options.colorPickerEnabled)||(this.colorPickerEnabled=options.colorPickerEnabled),this._isNullOrUndefined(options.lineWidth)||(this.lineWidth=options.lineWidth),this._isNullOrUndefined(options.strokeColor)||(this.strokeColor=options.strokeColor),this._isNullOrUndefined(options.shouldDownloadDrawing)||(this.shouldDownloadDrawing=options.shouldDownloadDrawing),this._isNullOrUndefined(options.startingColor)||(this.startingColor=options.startingColor),this._isNullOrUndefined(options.scaleFactor)||(this.scaleFactor=options.scaleFactor),this._isNullOrUndefined(options.drawingEnabled)||(this.drawingEnabled=options.drawingEnabled),this._isNullOrUndefined(options.downloadedFileName)||(this.downloadedFileName=options.downloadedFileName),this._isNullOrUndefined(options.lineJoin)||(this.lineJoin=options.lineJoin),this._isNullOrUndefined(options.lineCap)||(this.lineCap=options.lineCap),this._isNullOrUndefined(options.shapeSelectorEnabled)||(this.shapeSelectorEnabled=options.shapeSelectorEnabled),this._isNullOrUndefined(options.showShapeSelector)||(this.showShapeSelector=options.showShapeSelector),this._isNullOrUndefined(options.fillColor)||(this.fillColor=options.fillColor),this._isNullOrUndefined(options.showStrokeColorPicker)||(this.showStrokeColorPicker=options.showStrokeColorPicker),this._isNullOrUndefined(options.showFillColorPicker)||(this.showFillColorPicker=options.showFillColorPicker))},CanvasWhiteboardComponent.prototype._isNullOrUndefined=function(property){return null===property||void 0===property},CanvasWhiteboardComponent.prototype._initCanvasEventListeners=function(){var _this=this;this.ngZone.runOutsideAngular(function(){_this._resizeSubscription=rxjs_index.fromEvent(window,"resize").pipe(rxjs_operators.debounceTime(200),rxjs_operators.distinctUntilChanged()).subscribe(function(){_this.ngZone.run(function(){_this._redrawCanvasOnResize()})})}),window.addEventListener("keydown",this._canvasKeyDown.bind(this),!1)},CanvasWhiteboardComponent.prototype._initCanvasServiceObservables=function(){var _this=this;this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasDrawSubject$.subscribe(function(updates){return _this.drawUpdates(updates)})),this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasClearSubject$.subscribe(function(){return _this.clearCanvas()})),this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasUndoSubject$.subscribe(function(updateUUD){return _this._undoCanvas(updateUUD)})),this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasRedoSubject$.subscribe(function(updateUUD){return _this._redoCanvas(updateUUD)})),this._registeredShapesSubscription=this._canvasWhiteboardShapeService.registeredShapes$.subscribe(function(shapes){_this.selectedShapeConstructor&&_this._canvasWhiteboardShapeService.isRegisteredShape(_this.selectedShapeConstructor)||(_this.selectedShapeConstructor=shapes[0])})},CanvasWhiteboardComponent.prototype._calculateCanvasWidthAndHeight=function(){this.context.canvas.width=this.canvas.nativeElement.parentNode.clientWidth,this.aspectRatio?this.context.canvas.height=this.canvas.nativeElement.parentNode.clientWidth*this.aspectRatio:this.context.canvas.height=this.canvas.nativeElement.parentNode.clientHeight,this._incompleteShapesCanvasContext.canvas.width=this.context.canvas.width,this._incompleteShapesCanvasContext.canvas.height=this.context.canvas.height},CanvasWhiteboardComponent.prototype._loadImage=function(callbackFn){var _this=this;if(this._canDraw=!1,this._imageElement)return this._canDraw=!0,void(callbackFn&&callbackFn());this._imageElement=new Image,this._imageElement.addEventListener("load",function(){_this._canDraw=!0,callbackFn&&callbackFn(),_this.onImageLoaded.emit(!0)}),this._imageElement.src=this.imageUrl},CanvasWhiteboardComponent.prototype.clearCanvasLocal=function(){this.clearCanvas(),this.onClear.emit(!0)},CanvasWhiteboardComponent.prototype.clearCanvas=function(){this._removeCanvasData(),this._redoStack=[]},CanvasWhiteboardComponent.prototype._removeCanvasData=function(callbackFn){this._shapesMap=new Map,this._clientDragging=!1,this._updateHistory=[],this._undoStack=[],this._redrawBackground(callbackFn)},CanvasWhiteboardComponent.prototype._redrawBackground=function(callbackFn){var _this=this;this.context&&(this.imageUrl?this._loadImage(function(){_this.context.save(),_this._drawImage(_this.context,_this._imageElement,0,0,_this.context.canvas.width,_this.context.canvas.height,.5,.5),_this.context.restore(),_this._drawMissingUpdates(),callbackFn&&callbackFn()}):(this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height),this._drawStartingColor(),callbackFn&&callbackFn()))},CanvasWhiteboardComponent.prototype._drawStartingColor=function(){var previousFillStyle=this.context.fillStyle;this.context.save(),this.context.fillStyle=this.startingColor,this.context.fillRect(0,0,this.context.canvas.width,this.context.canvas.height),this.context.fillStyle=previousFillStyle,this.context.restore()},CanvasWhiteboardComponent.prototype.getShouldDraw=function(){return this.getDrawingEnabled()},CanvasWhiteboardComponent.prototype.getDrawingEnabled=function(){return this.drawingEnabled},CanvasWhiteboardComponent.prototype.toggleDrawingEnabled=function(){this.drawingEnabled=!this.drawingEnabled},CanvasWhiteboardComponent.prototype.setDrawingEnabled=function(drawingEnabled){this.drawingEnabled=drawingEnabled},CanvasWhiteboardComponent.prototype.changeColor=function(newStrokeColor){this.changeStrokeColor(newStrokeColor)},CanvasWhiteboardComponent.prototype.changeStrokeColor=function(newStrokeColor){this.strokeColor=newStrokeColor,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions(),this._changeDetector.detectChanges()},CanvasWhiteboardComponent.prototype.changeFillColor=function(newFillColor){this.fillColor=newFillColor,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions(),this._changeDetector.detectChanges()},CanvasWhiteboardComponent.prototype.undoLocal=function(){var _this=this;this.undo(function(updateUUID){_this._redoStack.push(updateUUID),_this.onUndo.emit(updateUUID)})},CanvasWhiteboardComponent.prototype.undo=function(callbackFn){if(this._undoStack.length){var updateUUID=this._undoStack.pop();this._undoCanvas(updateUUID),callbackFn&&callbackFn(updateUUID)}},CanvasWhiteboardComponent.prototype._undoCanvas=function(updateUUID){if(this._shapesMap.has(updateUUID)){this._shapesMap.get(updateUUID).isVisible=!1,this.drawAllShapes()}},CanvasWhiteboardComponent.prototype.redoLocal=function(){var _this=this;this.redo(function(updateUUID){_this._undoStack.push(updateUUID),_this.onRedo.emit(updateUUID)})},CanvasWhiteboardComponent.prototype.redo=function(callbackFn){if(this._redoStack.length){var updateUUID=this._redoStack.pop();this._redoCanvas(updateUUID),callbackFn&&callbackFn(updateUUID)}},CanvasWhiteboardComponent.prototype._redoCanvas=function(updateUUID){if(this._shapesMap.has(updateUUID)){this._shapesMap.get(updateUUID).isVisible=!0,this.drawAllShapes()}},CanvasWhiteboardComponent.prototype.canvasUserEvents=function(event){if(this.drawingEnabled&&this._canDraw&&(this._clientDragging||"mousemove"!==event.type&&"touchmove"!==event.type&&"mouseout"!==event.type&&"touchcancel"!==event.type&&"mouseup"!==event.type&&"touchend"!==event.type&&"mouseout"!==event.type)){event.target!=this._incompleteShapesCanvas.nativeElement&&event.target!=this.canvas.nativeElement||event.preventDefault();var update,updateType,eventPosition=this._getCanvasEventPosition(event);switch(update=new CanvasWhiteboardUpdate(eventPosition.x,eventPosition.y),event.type){case"mousedown":case"touchstart":this._clientDragging=!0,this._lastUUID=this._generateUUID(),updateType=CanvasWhiteboardUpdateType.START,this._redoStack=[],this._addCurrentShapeDataToAnUpdate(update);break;case"mousemove":case"touchmove":if(!this._clientDragging)return;updateType=CanvasWhiteboardUpdateType.DRAG;break;case"touchcancel":case"mouseup":case"touchend":case"mouseout":this._clientDragging=!1,updateType=CanvasWhiteboardUpdateType.STOP,this._undoStack.push(this._lastUUID)}update.UUID=this._lastUUID,update.type=updateType,this._draw(update),this._prepareToSendUpdate(update)}},CanvasWhiteboardComponent.prototype._getCanvasEventPosition=function(eventData){var canvasBoundingRect=this.context.canvas.getBoundingClientRect(),hasTouches=eventData.touches&&eventData.touches.length?eventData.touches[0]:null;hasTouches||(hasTouches=eventData.changedTouches&&eventData.changedTouches.length?eventData.changedTouches[0]:null);var event=hasTouches||eventData,scaleWidth=canvasBoundingRect.width/this.context.canvas.width,scaleHeight=canvasBoundingRect.height/this.context.canvas.height,xPosition=event.clientX-canvasBoundingRect.left,yPosition=event.clientY-canvasBoundingRect.top;return xPosition/=this.scaleFactor?this.scaleFactor:scaleWidth,yPosition/=this.scaleFactor?this.scaleFactor:scaleHeight,new CanvasWhiteboardPoint(xPosition/this.context.canvas.width,yPosition/this.context.canvas.height)},CanvasWhiteboardComponent.prototype._prepareToSendUpdate=function(update){this._prepareUpdateForBatchDispatch(update)},CanvasWhiteboardComponent.prototype._canvasKeyDown=function(event){(event.ctrlKey||event.metaKey)&&(90===event.keyCode&&this.undoButtonEnabled&&(event.preventDefault(),this.undo()),89===event.keyCode&&this.redoButtonEnabled&&(event.preventDefault(),this.redo()),83!==event.keyCode&&115!==event.keyCode||(event.preventDefault(),this.saveLocal()))},CanvasWhiteboardComponent.prototype._redrawCanvasOnResize=function(){this._calculateCanvasWidthAndHeight(),this._redrawHistory()},CanvasWhiteboardComponent.prototype._redrawHistory=function(){var _this=this,updatesToDraw=[].concat(this._updateHistory);this._removeCanvasData(function(){updatesToDraw.forEach(function(update){_this._draw(update)})})},CanvasWhiteboardComponent.prototype._draw=function(update){if(this._updateHistory.push(update),update=Object.assign(new CanvasWhiteboardUpdate,update,{x:update.x*this.context.canvas.width,y:update.y*this.context.canvas.height}),update.type===CanvasWhiteboardUpdateType.START){var updateShapeConstructor=this._canvasWhiteboardShapeService.getShapeConstructorFromShapeName(update.selectedShape),shape=new updateShapeConstructor(new CanvasWhiteboardPoint(update.x,update.y),Object.assign(new CanvasWhiteboardShapeOptions,update.selectedShapeOptions));this._incompleteShapesMap.set(update.UUID,shape),this._drawIncompleteShapes()}else if(update.type===CanvasWhiteboardUpdateType.DRAG){var shape=this._incompleteShapesMap.get(update.UUID);shape&&shape.onUpdateReceived(update),this._drawIncompleteShapes()}else if(CanvasWhiteboardUpdateType.STOP){var shape=this._incompleteShapesMap.get(update.UUID);shape&&shape.onStopReceived(update),this._shapesMap.set(update.UUID,shape),this._incompleteShapesMap.delete(update.UUID),this._swapCompletedShapeToActualCanvas(shape)}},CanvasWhiteboardComponent.prototype._drawIncompleteShapes=function(){var _this=this;this._resetIncompleteShapeCanvas(),this._incompleteShapesMap.forEach(function(shape){shape.isVisible&&shape.draw(_this._incompleteShapesCanvasContext)})},CanvasWhiteboardComponent.prototype._swapCompletedShapeToActualCanvas=function(shape){this._drawIncompleteShapes(),shape.isVisible&&shape.draw(this.context)},CanvasWhiteboardComponent.prototype._resetIncompleteShapeCanvas=function(){this._incompleteShapesCanvasContext.clearRect(0,0,this._incompleteShapesCanvasContext.canvas.width,this._incompleteShapesCanvasContext.canvas.height),this._incompleteShapesCanvasContext.fillStyle="transparent",this._incompleteShapesCanvasContext.fillRect(0,0,this._incompleteShapesCanvasContext.canvas.width,this._incompleteShapesCanvasContext.canvas.height)},CanvasWhiteboardComponent.prototype.drawAllShapes=function(){var _this=this;this._redrawBackground(function(){_this._shapesMap.forEach(function(shape){shape.isVisible&&shape.draw(_this.context)})})},CanvasWhiteboardComponent.prototype._addCurrentShapeDataToAnUpdate=function(update){
-update.selectedShape||(update.selectedShape=(new this.selectedShapeConstructor).getShapeName()),update.selectedShapeOptions||(update.selectedShapeOptions=Object.assign(new CanvasWhiteboardShapeOptions,this.generateShapePreviewOptions(),{lineWidth:this.lineWidth}))},CanvasWhiteboardComponent.prototype.generateShapePreviewOptions=function(){return Object.assign(new CanvasWhiteboardShapeOptions,{shouldFillShape:!!this.fillColor,fillStyle:this.fillColor,strokeStyle:this.strokeColor,lineWidth:2,lineJoin:this.lineJoin,lineCap:this.lineCap})},CanvasWhiteboardComponent.prototype._prepareUpdateForBatchDispatch=function(update){var _this=this;this._batchUpdates.push(lodash.cloneDeep(update)),this._updateTimeout||(this._updateTimeout=setTimeout(function(){_this.onBatchUpdate.emit(_this._batchUpdates),_this._batchUpdates=[],_this._updateTimeout=null},this.batchUpdateTimeoutDuration))},CanvasWhiteboardComponent.prototype.drawUpdates=function(updates){var _this=this;this._canDraw?(this._drawMissingUpdates(),updates.forEach(function(update){_this._draw(update)})):this._updatesNotDrawn=this._updatesNotDrawn.concat(updates)},CanvasWhiteboardComponent.prototype._drawMissingUpdates=function(){var _this=this;if(this._updatesNotDrawn.length>0){var updatesToDraw=this._updatesNotDrawn;this._updatesNotDrawn=[],updatesToDraw.forEach(function(update){_this._draw(update)})}},CanvasWhiteboardComponent.prototype._drawImage=function(context,image,x,y,width,height,offsetX,offsetY){2===arguments.length&&(x=y=0,width=context.canvas.width,height=context.canvas.height),offsetX="number"==typeof offsetX?offsetX:.5,offsetY="number"==typeof offsetY?offsetY:.5,offsetX<0&&(offsetX=0),offsetY<0&&(offsetY=0),offsetX>1&&(offsetX=1),offsetY>1&&(offsetY=1);var finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,imageWidth=image.width,imageHeight=image.height,radius=Math.min(width/imageWidth,height/imageHeight),newWidth=imageWidth*radius,newHeight=imageHeight*radius,aspectRatio=1;newWidth<width&&(aspectRatio=width/newWidth),Math.abs(aspectRatio-1)<1e-14&&newHeight<height&&(aspectRatio=height/newHeight),newWidth*=aspectRatio,newHeight*=aspectRatio,finalDrawWidth=imageWidth/(newWidth/width),finalDrawHeight=imageHeight/(newHeight/height),finalDrawX=(imageWidth-finalDrawWidth)*offsetX,finalDrawY=(imageHeight-finalDrawHeight)*offsetY,finalDrawX<0&&(finalDrawX=0),finalDrawY<0&&(finalDrawY=0),finalDrawWidth>imageWidth&&(finalDrawWidth=imageWidth),finalDrawHeight>imageHeight&&(finalDrawHeight=imageHeight),context.drawImage(image,finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,x,y,width,height)},CanvasWhiteboardComponent.prototype.generateCanvasDataUrl=function(returnedDataType,returnedDataQuality){return void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),this.context.canvas.toDataURL(returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.generateCanvasBlob=function(callbackFn,returnedDataType,returnedDataQuality){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1);var toBlobMethod;void 0!==this.context.canvas.toBlob?toBlobMethod=this.context.canvas.toBlob.bind(this.context.canvas):void 0!==this.context.canvas.msToBlob&&(toBlobMethod=function(callback){callback&&callback(_this.context.canvas.msToBlob())}),toBlobMethod&&toBlobMethod(function(blob){callbackFn&&callbackFn(blob,returnedDataType)},returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.downloadCanvasImage=function(returnedDataType,downloadData,customFileName){if(void 0===returnedDataType&&(returnedDataType="image/png"),void 0===window.navigator.msSaveOrOpenBlob){var downloadLink=document.createElement("a");downloadLink.setAttribute("href",downloadData||this.generateCanvasDataUrl(returnedDataType));var fileName=customFileName||(this.downloadedFileName?this.downloadedFileName:"canvas_drawing_"+(new Date).valueOf());downloadLink.setAttribute("download",fileName+this._generateDataTypeString(returnedDataType)),document.body.appendChild(downloadLink),downloadLink.click(),document.body.removeChild(downloadLink)}else downloadData?this._saveCanvasBlob(downloadData,returnedDataType):this.generateCanvasBlob(this._saveCanvasBlob.bind(this),returnedDataType)},CanvasWhiteboardComponent.prototype._saveCanvasBlob=function(blob,returnedDataType){void 0===returnedDataType&&(returnedDataType="image/png"),window.navigator.msSaveOrOpenBlob(blob,"canvas_drawing_"+(new Date).valueOf()+this._generateDataTypeString(returnedDataType))},CanvasWhiteboardComponent.prototype.generateCanvasData=function(callback,returnedDataType,returnedDataQuality){void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),void 0===window.navigator.msSaveOrOpenBlob?callback&&callback(this.generateCanvasDataUrl(returnedDataType,returnedDataQuality)):this.generateCanvasBlob(callback,returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.saveLocal=function(returnedDataType){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),this.generateCanvasData(function(generatedData){_this.onSave.emit(generatedData),_this.shouldDownloadDrawing&&_this.downloadCanvasImage(returnedDataType,generatedData)})},CanvasWhiteboardComponent.prototype._generateDataTypeString=function(returnedDataType){return returnedDataType?"."+returnedDataType.split("/")[1]:""},CanvasWhiteboardComponent.prototype.toggleStrokeColorPicker=function(value){this.showStrokeColorPicker=this._isNullOrUndefined(value)?!this.showStrokeColorPicker:value},CanvasWhiteboardComponent.prototype.toggleFillColorPicker=function(value){this.showFillColorPicker=this._isNullOrUndefined(value)?!this.showFillColorPicker:value},CanvasWhiteboardComponent.prototype.toggleShapeSelector=function(value){this.showShapeSelector=this._isNullOrUndefined(value)?!this.showShapeSelector:value},CanvasWhiteboardComponent.prototype.selectShape=function(newShapeBlueprint){this.selectedShapeConstructor=newShapeBlueprint},CanvasWhiteboardComponent.prototype.getDrawingHistory=function(){return lodash.cloneDeep(this._updateHistory)},CanvasWhiteboardComponent.prototype._unsubscribe=function(subscription){subscription&&subscription.unsubscribe()},CanvasWhiteboardComponent.prototype._generateUUID=function(){return this._random4()+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+this._random4()+this._random4()},CanvasWhiteboardComponent.prototype._random4=function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)},CanvasWhiteboardComponent.prototype.ngOnDestroy=function(){var _this=this;this._unsubscribe(this._resizeSubscription),this._unsubscribe(this._registeredShapesSubscription),this._canvasWhiteboardServiceSubscriptions.forEach(function(subscription){return _this._unsubscribe(subscription)})},CanvasWhiteboardComponent}();CanvasWhiteboardComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard",template:'\n        <div class="canvas_wrapper_div">\n            <div class="canvas_whiteboard_buttons">\n                <canvas-whiteboard-shape-selector *ngIf="shapeSelectorEnabled"\n                                                  [showShapeSelector]="showShapeSelector"\n                                                  [selectedShapeConstructor]="selectedShapeConstructor"\n                                                  [shapeOptions]="generateShapePreviewOptions()"\n                                                  (onToggleShapeSelector)="toggleShapeSelector($event)"\n                                                  (onShapeSelected)="selectShape($event)"></canvas-whiteboard-shape-selector>\n\n                <canvas-whiteboard-colorpicker *ngIf="colorPickerEnabled"\n                                               [previewText]="\'Fill\'"\n                                               [showColorPicker]="showFillColorPicker"\n                                               [selectedColor]="fillColor"\n                                               (onToggleColorPicker)="toggleFillColorPicker($event)"\n                                               (onColorSelected)="changeFillColor($event)">\n                </canvas-whiteboard-colorpicker>\n\n                <canvas-whiteboard-colorpicker *ngIf="colorPickerEnabled"\n                                               [previewText]="\'Stroke\'"\n                                               [showColorPicker]="showStrokeColorPicker"\n                                               [selectedColor]="strokeColor"\n                                               (onToggleColorPicker)="toggleStrokeColorPicker($event)"\n                                               (onColorSelected)="changeStrokeColor($event)">\n                </canvas-whiteboard-colorpicker>\n\n\n                <button *ngIf="drawButtonEnabled" (click)="toggleDrawingEnabled()"\n                        [class.canvas_whiteboard_button-draw_animated]="getDrawingEnabled()"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-draw" type="button">\n                    <i [class]="drawButtonClass" aria-hidden="true"></i> {{drawButtonText}}\n                </button>\n\n                <button *ngIf="clearButtonEnabled" (click)="clearCanvasLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-clear">\n                    <i [class]="clearButtonClass" aria-hidden="true"></i> {{clearButtonText}}\n                </button>\n\n                <button *ngIf="undoButtonEnabled" (click)="undoLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-undo">\n                    <i [class]="undoButtonClass" aria-hidden="true"></i> {{undoButtonText}}\n                </button>\n\n                <button *ngIf="redoButtonEnabled" (click)="redoLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-redo">\n                    <i [class]="redoButtonClass" aria-hidden="true"></i> {{redoButtonText}}\n                </button>\n                <button *ngIf="saveDataButtonEnabled" (click)="saveLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-save">\n                    <i [class]="saveDataButtonClass" aria-hidden="true"></i> {{saveDataButtonText}}\n                </button>\n            </div>\n            <canvas #canvas class="canvas_whiteboard"></canvas>\n            <canvas #incompleteShapesCanvas class="incomplete_shapes_canvas_whiteboard"\n                    (mousedown)="canvasUserEvents($event)" (mouseup)="canvasUserEvents($event)"\n                    (mousemove)="canvasUserEvents($event)" (mouseout)="canvasUserEvents($event)"\n                    (touchstart)="canvasUserEvents($event)" (touchmove)="canvasUserEvents($event)"\n                    (touchend)="canvasUserEvents($event)" (touchcancel)="canvasUserEvents($event)"></canvas>\n        </div>\n    ',styles:[DEFAULT_STYLES]}]}],CanvasWhiteboardComponent.ctorParameters=function(){return[{type:_angular_core.NgZone},{type:_angular_core.ChangeDetectorRef},{type:CanvasWhiteboardService},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardComponent.propDecorators={options:[{type:_angular_core.Input}],batchUpdateTimeoutDuration:[{type:_angular_core.Input}],imageUrl:[{type:_angular_core.Input}],aspectRatio:[{type:_angular_core.Input}],drawButtonClass:[{type:_angular_core.Input}],clearButtonClass:[{type:_angular_core.Input}],undoButtonClass:[{type:_angular_core.Input}],redoButtonClass:[{type:_angular_core.Input}],saveDataButtonClass:[{type:_angular_core.Input}],drawButtonText:[{type:_angular_core.Input}],clearButtonText:[{type:_angular_core.Input}],undoButtonText:[{type:_angular_core.Input}],redoButtonText:[{type:_angular_core.Input}],saveDataButtonText:[{type:_angular_core.Input}],drawButtonEnabled:[{type:_angular_core.Input}],clearButtonEnabled:[{type:_angular_core.Input}],undoButtonEnabled:[{type:_angular_core.Input}],redoButtonEnabled:[{type:_angular_core.Input}],saveDataButtonEnabled:[{type:_angular_core.Input}],shouldDownloadDrawing:[{type:_angular_core.Input}],colorPickerEnabled:[{type:_angular_core.Input}],lineWidth:[{type:_angular_core.Input}],strokeColor:[{type:_angular_core.Input}],startingColor:[{type:_angular_core.Input}],scaleFactor:[{type:_angular_core.Input}],drawingEnabled:[{type:_angular_core.Input}],showStrokeColorPicker:[{type:_angular_core.Input}],showFillColorPicker:[{type:_angular_core.Input}],downloadedFileName:[{type:_angular_core.Input}],lineJoin:[{type:_angular_core.Input}],lineCap:[{type:_angular_core.Input}],shapeSelectorEnabled:[{type:_angular_core.Input}],showShapeSelector:[{type:_angular_core.Input}],fillColor:[{type:_angular_core.Input}],onClear:[{type:_angular_core.Output}],onUndo:[{type:_angular_core.Output}],onRedo:[{type:_angular_core.Output}],onBatchUpdate:[{type:_angular_core.Output}],onImageLoaded:[{type:_angular_core.Output}],onSave:[{type:_angular_core.Output}],canvas:[{type:_angular_core.ViewChild,args:["canvas"]}],_incompleteShapesCanvas:[{type:_angular_core.ViewChild,args:["incompleteShapesCanvas"]}]};var CanvasWhiteboardShapeSelectorComponent=function(){function CanvasWhiteboardShapeSelectorComponent(_elementRef,_canvasWhiteboardShapeService){this._elementRef=_elementRef,this._canvasWhiteboardShapeService=_canvasWhiteboardShapeService,this.showShapeSelector=!1,this.onToggleShapeSelector=new _angular_core.EventEmitter,this.onShapeSelected=new _angular_core.EventEmitter,this.registeredShapes$=this._canvasWhiteboardShapeService.registeredShapes$}return CanvasWhiteboardShapeSelectorComponent.prototype.selectShape=function(shape){this.onShapeSelected.emit(shape),this.toggleShapeSelector(null)},CanvasWhiteboardShapeSelectorComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showShapeSelector&&this.onToggleShapeSelector.emit(!1)},CanvasWhiteboardShapeSelectorComponent.prototype.toggleShapeSelector=function(event){event&&event.preventDefault(),this.onToggleShapeSelector.emit(!this.showShapeSelector)},CanvasWhiteboardShapeSelectorComponent}();CanvasWhiteboardShapeSelectorComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-selector",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n        <div *ngIf="!showShapeSelector" (click)="toggleShapeSelector($event)"\n             class="canvas-whiteboard-shape-selector-selected-preview">\n            <canvas-whiteboard-shape-preview [shapeConstructor]="selectedShapeConstructor"\n                                             [shapeOptions]="shapeOptions"></canvas-whiteboard-shape-preview>\n        </div>\n        <div class="canvas-whiteboard-shape-selector-wrapper" *ngIf="showShapeSelector">\n            <canvas-whiteboard-shape-preview *ngFor="let shapeConstructor of registeredShapes$ | async"\n                                             [shapeConstructor]="shapeConstructor"\n                                             [shapeOptions]="shapeOptions"\n                                             (click)="selectShape(shapeConstructor)"></canvas-whiteboard-shape-preview>\n        </div>\n    ',styles:["\n        .canvas-whiteboard-shape-selector-selected-preview {\n            vertical-align: bottom;\n            display: inline-block;\n        }\n\n        .canvas-whiteboard-shape-selector-wrapper {\n            display: block;\n            padding: 4px;\n            border: 1px solid #afafaf;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-shape-selector-wrapper {\n            }\n        }\n    "]}]}],CanvasWhiteboardShapeSelectorComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardShapeSelectorComponent.propDecorators={showShapeSelector:[{type:_angular_core.Input}],selectedShapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],onToggleShapeSelector:[{type:_angular_core.Output}],onShapeSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardColorPickerComponent=function(){function CanvasWhiteboardColorPickerComponent(_elementRef){this._elementRef=_elementRef,this.selectedColor="rgba(0,0,0,1)",this.showColorPicker=!1,this.onToggleColorPicker=new _angular_core.EventEmitter,this.onColorSelected=new _angular_core.EventEmitter,this.onSecondaryColorSelected=new _angular_core.EventEmitter}return CanvasWhiteboardColorPickerComponent.prototype.ngOnInit=function(){this._context=this.canvas.nativeElement.getContext("2d"),this.createColorPalette()},CanvasWhiteboardColorPickerComponent.prototype.createColorPalette=function(){var gradient=this._context.createLinearGradient(0,0,this._context.canvas.width,0);gradient.addColorStop(0,"rgb(255, 0, 0)"),gradient.addColorStop(.15,"rgb(255, 0, 255)"),gradient.addColorStop(.33,"rgb(0, 0, 255)"),gradient.addColorStop(.49,"rgb(0, 255, 255)"),gradient.addColorStop(.67,"rgb(0, 255, 0)"),gradient.addColorStop(.84,"rgb(255, 255, 0)"),gradient.addColorStop(1,"rgb(255, 0, 0)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height),gradient=this._context.createLinearGradient(0,0,0,this._context.canvas.height),gradient.addColorStop(0,"rgba(255, 255, 255, 1)"),gradient.addColorStop(.5,"rgba(255, 255, 255, 0)"),gradient.addColorStop(.5,"rgba(0, 0, 0, 0)"),gradient.addColorStop(1,"rgba(0, 0, 0, 1)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height)},CanvasWhiteboardColorPickerComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showColorPicker&&this.onToggleColorPicker.emit(!1)},CanvasWhiteboardColorPickerComponent.prototype.toggleColorPicker=function(event){event&&event.preventDefault(),this.onToggleColorPicker.emit(!this.showColorPicker)},CanvasWhiteboardColorPickerComponent.prototype.determineColorFromCanvas=function(event){var canvasRect=this._context.canvas.getBoundingClientRect(),imageData=this._context.getImageData(event.clientX-canvasRect.left,event.clientY-canvasRect.top,1,1);return"rgba("+imageData.data[0]+", "+imageData.data[1]+", "+imageData.data[2]+", "+imageData.data[3]+")"},CanvasWhiteboardColorPickerComponent.prototype.selectColor=function(color){this.onColorSelected.emit(color),this.toggleColorPicker(null)},CanvasWhiteboardColorPickerComponent}();CanvasWhiteboardColorPickerComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-colorpicker",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n        <div [hidden]="showColorPicker" class="canvas-whiteboard-colorpicker-input"\n               (click)="toggleColorPicker($event)">\n               <div class="selected-color-type-wrapper">{{previewText}}</div>\n               <div class="selected-color-preview" [style.background]="selectedColor"></div>\n        </div>\n        <div [hidden]="!showColorPicker" class="canvas-whiteboard-colorpicker-wrapper">\n            <div (click)="selectColor(\'transparent\')" class="transparent-color">Transparent</div>\n            <canvas #canvaswhiteboardcolorpicker class="canvas-whiteboard-colorpicker" width="284" height="155"\n                    (click)="selectColor(determineColorFromCanvas($event))"></canvas>\n        </div>\n    ',styles:["\n        .selected-color-preview {\n            width: 100%;\n            height: 20%;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n        }\n        \n        .selected-color-type-wrapper {\n            display: inline-block;\n            height: 100%;\n            width: 100%;\n            text-align: center;\n            font-size: 14px;\n            color: #000;\n        }\n        \n        .transparent-color {\n            font-size: 14px;\n        }\n        \n        .canvas-whiteboard-colorpicker-wrapper {\n            border: 1px solid #afafaf;\n            color: #000;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-colorpicker-wrapper {\n                position: absolute;\n            }\n        }\n\n        .canvas-whiteboard-colorpicker-input {\n            display: inline-block;\n            position:relative;\n            width: 44px;\n            height: 44px;\n            margin: 5px;\n            cursor: pointer;\n            color: #000;\n        }\n    "]}]}],CanvasWhiteboardColorPickerComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef}]},CanvasWhiteboardColorPickerComponent.propDecorators={previewText:[{type:_angular_core.Input}],selectedColor:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvaswhiteboardcolorpicker"]}],showColorPicker:[{type:_angular_core.Input}],onToggleColorPicker:[{type:_angular_core.Output}],onColorSelected:[{type:_angular_core.Output}],onSecondaryColorSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardShapePreviewComponent=function(){function CanvasWhiteboardShapePreviewComponent(){}return CanvasWhiteboardShapePreviewComponent.prototype.ngAfterViewInit=function(){this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.ngOnChanges=function(changes){(changes.shapeConstructor||changes.shapeOptions)&&this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.drawShapePreview=function(){if(this.canvas){var context=this.canvas.nativeElement.getContext("2d");context.clearRect(0,0,context.canvas.width,context.canvas.height);new this.shapeConstructor(new CanvasWhiteboardPoint(0,0),Object.assign(new CanvasWhiteboardShapeOptions,this.shapeOptions)).drawPreview(context)}},CanvasWhiteboardShapePreviewComponent}();CanvasWhiteboardShapePreviewComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-preview",template:'\n        <canvas #canvasWhiteboardShapePreview width="50px" height="50px"\n                class="canvas-whiteboard-shape-preview-canvas"></canvas>\n    ',styles:["\n        .canvas-whiteboard-shape-preview-canvas {\n            cursor: pointer;\n        }\n    "]}]}],CanvasWhiteboardShapePreviewComponent.propDecorators={shapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvasWhiteboardShapePreview"]}]};var CanvasWhiteboardModule=function(){function CanvasWhiteboardModule(){}return CanvasWhiteboardModule}();CanvasWhiteboardModule.decorators=[{type:_angular_core.NgModule,args:[{imports:[_angular_common.CommonModule],declarations:[CanvasWhiteboardComponent,CanvasWhiteboardColorPickerComponent,CanvasWhiteboardShapeSelectorComponent,CanvasWhiteboardShapePreviewComponent],providers:[CanvasWhiteboardService,CanvasWhiteboardShapeService],exports:[CanvasWhiteboardComponent]}]}],exports.CanvasWhiteboardComponent=CanvasWhiteboardComponent,exports.CanvasWhiteboardUpdate=CanvasWhiteboardUpdate,exports.CanvasWhiteboardService=CanvasWhiteboardService,exports.CanvasWhiteboardPoint=CanvasWhiteboardPoint,exports.CanvasWhiteboardShape=CanvasWhiteboardShape,exports.CanvasWhiteboardShapeOptions=CanvasWhiteboardShapeOptions,exports.CanvasWhiteboardShapeService=CanvasWhiteboardShapeService,exports.RectangleShape=RectangleShape,exports.CircleShape=CircleShape,exports.CanvasWhiteboardShapeSelectorComponent=CanvasWhiteboardShapeSelectorComponent,exports.CanvasWhiteboardColorPickerComponent=CanvasWhiteboardColorPickerComponent,exports.CanvasWhiteboardShapePreviewComponent=CanvasWhiteboardShapePreviewComponent,exports.CanvasWhiteboardModule=CanvasWhiteboardModule,exports.DEFAULT_STYLES=DEFAULT_STYLES,Object.defineProperty(exports,"__esModule",{value:!0})});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("lodash"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs","rxjs/operators","lodash","@angular/common"],factory):factory((global.ng=global.ng||{},global.ng.ng2CanvasWhiteboard=global.ng.ng2CanvasWhiteboard||{}),global.ng.core,global.rxjs,global.rxjs_operators,global.lodash,global.ng.common)}(this,function(exports,_angular_core,rxjs,rxjs_operators,lodash,_angular_common){"use strict";var __extends=function(){var extendStatics=function(d,b){return(extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)b.hasOwnProperty(p)&&(d[p]=b[p])})(d,b)};return function(d,b){function __(){this.constructor=d}extendStatics(d,b),d.prototype=null===b?Object.create(b):(__.prototype=b.prototype,new __)}}(),CanvasWhiteboardUpdateType={START:0,DRAG:1,STOP:2};CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.START]="START",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.DRAG]="DRAG",CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.STOP]="STOP";var CanvasWhiteboardUpdate=function(){function CanvasWhiteboardUpdate(x,y,type,UUID,selectedShape,selectedShapeOptions){this.x=x,this.y=y,this.type=type,this.UUID=UUID,this.selectedShape=selectedShape,this.selectedShapeOptions=selectedShapeOptions}return CanvasWhiteboardUpdate.deserializeJson=function(json){var parsedJson;try{return parsedJson=JSON.parse(json),new CanvasWhiteboardUpdate(parsedJson.x,parsedJson.y,parsedJson.type,parsedJson.uuid,parsedJson.selectedShape,parsedJson.selectedShapeOptions)}catch(e){return console.error("The canvas whiteboard update is not p1arseable"),null}},CanvasWhiteboardUpdate.prototype.stringify=function(){var objectToSerialize={x:this.x.toFixed(3),y:this.y.toFixed(3),type:this.type,uuid:this.UUID,selectedShape:this.selectedShape};return this.selectedShapeOptions&&(objectToSerialize.selectedShapeOptions=this.selectedShapeOptions),JSON.stringify(objectToSerialize)},CanvasWhiteboardUpdate}(),DEFAULT_STYLES="\n.canvas_whiteboard_button {\n    display: inline-block;\n    outline: 0px;\n    padding-top: 7px;\n    margin-bottom: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.42857143;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    -ms-touch-action: manipulation;\n    touch-action: manipulation;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    background-image: none;\n    border: 1px solid transparent;\n    border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n    z-index: 3;\n}\n\n@media (max-width: 400px) {\n     .canvas_whiteboard_buttons {\n            position: absolute;\n            z-inde\n            top: 0;\n            width: 100%;\n            text-align: center;\n      }\n}\n        \n@media (min-width: 401px) { \n    .canvas_whiteboard_buttons {\n        position: absolute;\n        right: 0%;\n        color: #fff;\n    }\n}\n\n.canvas_whiteboard_buttons {\n    padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n    margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n    -webkit-animation: pulsate 1s ease-out;\n    -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n    0% {\n        -webkit-transform: scale(0.1, 0.1);\n        opacity: 0.0;\n    }\n    50% {\n        opacity: 1.0;\n    }\n    100% {\n        -webkit-transform: scale(1.2, 1.2);\n        opacity: 0.0;\n    }\n}\n.canvas_wrapper_div {\n    width: 100%;\n    height: 100%;\n    border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n    padding-top: 5px;\n}\n\n.canvas_whiteboard {\n    position: absolute;\n    z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n    position: absolute;\n    z-index: 2;\n}\n\n",CanvasWhiteboardService=function(){function CanvasWhiteboardService(){this._canvasDrawSubject=new rxjs.Subject,this.canvasDrawSubject$=this._canvasDrawSubject.asObservable(),this._canvasClearSubject=new rxjs.Subject,this.canvasClearSubject$=this._canvasClearSubject.asObservable(),this._canvasUndoSubject=new rxjs.Subject,this.canvasUndoSubject$=this._canvasUndoSubject.asObservable(),this._canvasRedoSubject=new rxjs.Subject,this.canvasRedoSubject$=this._canvasRedoSubject.asObservable()}return CanvasWhiteboardService.prototype.drawCanvas=function(updates){this._canvasDrawSubject.next(updates)},CanvasWhiteboardService.prototype.clearCanvas=function(){this._canvasClearSubject.next()},CanvasWhiteboardService.prototype.undoCanvas=function(updateUUD){this._canvasUndoSubject.next(updateUUD)},CanvasWhiteboardService.prototype.redoCanvas=function(updateUUD){this._canvasRedoSubject.next(updateUUD)},CanvasWhiteboardService}(),CanvasWhiteboardPoint=function(){function CanvasWhiteboardPoint(x,y){this.x=x,this.y=y}return CanvasWhiteboardPoint}(),CanvasWhiteboardShapeOptions=function(){function CanvasWhiteboardShapeOptions(){this.shouldFillShape=!1,this.fillStyle=null,this.strokeStyle="rgba(0,0,0,1)",this.lineWidth=2,this.lineJoin="round",this.lineCap="round"}return CanvasWhiteboardShapeOptions}(),CanvasWhiteboardShape=function(){function CanvasWhiteboardShape(positionPoint,options){this.positionPoint=positionPoint||new CanvasWhiteboardPoint(0,0),this.options=options||new CanvasWhiteboardShapeOptions,this.isVisible=!0}return CanvasWhiteboardShape.prototype.onStopReceived=function(update){},CanvasWhiteboardShape}(),CircleShape=function(_super){function CircleShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this}return __extends(CircleShape,_super),CircleShape.prototype.getShapeName=function(){return"CircleShape"},CircleShape.prototype.draw=function(context){context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),Object.assign(context,this.options),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath()},CircleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},CircleShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},CircleShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},CircleShape}(CanvasWhiteboardShape),RectangleShape=function(_super){function RectangleShape(positionPoint,options,width,height){var _this=_super.call(this,positionPoint,options)||this;return _this.width=width||0,_this.height=height||0,_this}return __extends(RectangleShape,_super),RectangleShape.prototype.getShapeName=function(){return"RectangleShape"},RectangleShape.prototype.draw=function(context){this.width&&this.height&&(context.beginPath(),Object.assign(context,this.options),context.rect(this.positionPoint.x,this.positionPoint.y,this.width,this.height),context.stroke(),this.options.shouldFillShape&&context.fill(),context.closePath())},RectangleShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.width=context.canvas.width-4,this.height=context.canvas.height-4,this.draw(context)},RectangleShape.prototype.onUpdateReceived=function(update){this.width=update.x-this.positionPoint.x,this.height=update.y-this.positionPoint.y},RectangleShape}(CanvasWhiteboardShape),FreeHandShape=function(_super){function FreeHandShape(positionPoint,options){var _this=_super.call(this,positionPoint,options)||this;return _this.linePositions=[],_this}return __extends(FreeHandShape,_super),FreeHandShape.prototype.getShapeName=function(){return"FreeHandShape"},FreeHandShape.prototype.draw=function(context){Object.assign(context,this.options),context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y),context.lineTo(this.positionPoint.x+1,this.positionPoint.y+1);for(var i=0;i<this.linePositions.length;)if(this.linePositions.length-i>2){var controlPoint1=this.linePositions[i],controlPoint2=this.linePositions[i+1],endPoint=this.linePositions[i+2];context.bezierCurveTo(controlPoint1.x,controlPoint1.y,controlPoint2.x,controlPoint2.y,endPoint.x,endPoint.y),i+=2}else{var linePosition=this.linePositions[i];context.lineTo(linePosition.x,linePosition.y),i+=1}context.stroke()},FreeHandShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(2,2),this.linePositions=[new CanvasWhiteboardPoint(context.canvas.width-5,.3*context.canvas.height),new CanvasWhiteboardPoint(.2*context.canvas.width,.4*context.canvas.height),new CanvasWhiteboardPoint(.6*context.canvas.width,.8*context.canvas.height),new CanvasWhiteboardPoint(context.canvas.width,context.canvas.height)],this.draw(context)},FreeHandShape.prototype.onUpdateReceived=function(update){this.linePositions.push(new CanvasWhiteboardPoint(update.x,update.y))},FreeHandShape}(CanvasWhiteboardShape),SmileyShape=function(_super){function SmileyShape(positionPoint,options,radius){var _this=_super.call(this,positionPoint,options)||this;return _this.options.shouldFillShape=!0,_this.options.fillStyle=_this.options.fillStyle||"yellow",_this.radius=radius||0,_this}return __extends(SmileyShape,_super),SmileyShape.prototype.getShapeName=function(){return"SmileyShape"},SmileyShape.prototype.draw=function(context){context.beginPath(),Object.assign(context,this.options),context.arc(this.positionPoint.x,this.positionPoint.y,this.radius,0,2*Math.PI,!1),context.fill(),context.stroke(),context.beginPath();var leftEyeX=this.positionPoint.x-.3*this.radius,rightEyeX=this.positionPoint.x+.3*this.radius,eyesY=this.positionPoint.y-.2*this.radius,eyeSize=.1*this.radius;context.arc(leftEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.arc(rightEyeX,eyesY,eyeSize,0,2*Math.PI,!1),context.fillStyle=this.options.strokeStyle,context.fill(),context.beginPath(),context.arc(this.positionPoint.x,this.positionPoint.y,.7*this.radius,0,Math.PI,!1),context.stroke(),context.closePath()},SmileyShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},SmileyShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},SmileyShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},SmileyShape}(CanvasWhiteboardShape),StarShape=function(_super){function StarShape(positionPoint,options,radius,spikes){var _this=_super.call(this,positionPoint,options)||this;return _this.radius=radius||0,_this.spikes=spikes||5,_this}return __extends(StarShape,_super),StarShape.prototype.getShapeName=function(){return"StarShape"},StarShape.prototype.draw=function(context){Object.assign(context,this.options);var rotation=Math.PI/2*3,spikeX=this.positionPoint.x,spikeY=this.positionPoint.y,step=Math.PI/this.spikes;context.beginPath(),context.moveTo(this.positionPoint.x,this.positionPoint.y-this.radius);for(var i=0;i<this.spikes;i++)spikeX=this.positionPoint.x+Math.cos(rotation)*this.radius,spikeY=this.positionPoint.y+Math.sin(rotation)*this.radius,context.lineTo(spikeX,spikeY),rotation+=step,spikeX=this.positionPoint.x+Math.cos(rotation)*(.4*this.radius),spikeY=this.positionPoint.y+Math.sin(rotation)*(.4*this.radius),context.lineTo(spikeX,spikeY),rotation+=step,context.stroke();context.lineTo(this.positionPoint.x,this.positionPoint.y-this.radius),context.closePath(),context.stroke(),this.options.shouldFillShape&&context.fill()},StarShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(context.canvas.width/2,context.canvas.height/2),this.radius=this.calculateRadius(context.canvas.width-2,context.canvas.height/2),this.draw(context)},StarShape.prototype.onUpdateReceived=function(update){this.radius=this.calculateRadius(update.x,update.y)},StarShape.prototype.calculateRadius=function(x,y){return Math.sqrt(Math.pow(x-this.positionPoint.x,2)+Math.pow(y-this.positionPoint.y,2))},StarShape}(CanvasWhiteboardShape),LineShape=function(_super){function LineShape(positionPoint,options,endPosition){var _this=_super.call(this,positionPoint,options)||this;return _this.endPosition=endPosition||new CanvasWhiteboardPoint(_this.positionPoint.x,_this.positionPoint.y),_this}return __extends(LineShape,_super),LineShape.prototype.getShapeName=function(){return"LineShape"},LineShape.prototype.draw=function(context){this.endPosition&&(context.beginPath(),Object.assign(context,this.options),context.moveTo(this.positionPoint.x,this.positionPoint.y),context.lineTo(this.endPosition.x,this.endPosition.y),context.closePath(),context.stroke())},LineShape.prototype.drawPreview=function(context){this.positionPoint=new CanvasWhiteboardPoint(0,0),this.endPosition=new CanvasWhiteboardPoint(context.canvas.width,context.canvas.height),this.draw(context)},LineShape.prototype.onUpdateReceived=function(update){this.endPosition=new CanvasWhiteboardPoint(update.x,update.y)},LineShape}(CanvasWhiteboardShape),CanvasWhiteboardShapeService=function(){function CanvasWhiteboardShapeService(){this._registeredShapesSubject=new rxjs.BehaviorSubject([FreeHandShape,LineShape,RectangleShape,CircleShape,StarShape,SmileyShape]),this.registeredShapes$=this._registeredShapesSubject.asObservable()}return CanvasWhiteboardShapeService.prototype.getShapeConstructorFromShapeName=function(shapeName){return this.getCurrentRegisteredShapes().find(function(shape){return(new shape).getShapeName()===shapeName})},CanvasWhiteboardShapeService.prototype.getCurrentRegisteredShapes=function(){return this._registeredShapesSubject.getValue()},CanvasWhiteboardShapeService.prototype.isRegisteredShape=function(shape){return-1!==this.getCurrentRegisteredShapes().indexOf(shape)},CanvasWhiteboardShapeService.prototype.registerShape=function(shape){if(this.isRegisteredShape(shape))return void console.warn("You tried to register a shape:"+shape+", but is has already been registered.");var registeredShapes=this.getCurrentRegisteredShapes();registeredShapes.push(shape),this._registeredShapesSubject.next(registeredShapes)},CanvasWhiteboardShapeService.prototype.registerShapes=function(shapes){var _this=this;this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().concat(shapes.filter(function(shape){return!_this.isRegisteredShape(shape)||(console.warn("You tried to register a shape:"+shape+", but is has already been registered."),!1)})))},CanvasWhiteboardShapeService.prototype.unregisterShape=function(shape){this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function(registeredShape){return registeredShape!==shape}))},CanvasWhiteboardShapeService.prototype.unregisterShapes=function(shapes){this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function(shape){return-1===shapes.indexOf(shape)}))},CanvasWhiteboardShapeService}();CanvasWhiteboardShapeService.decorators=[{type:_angular_core.Injectable}],CanvasWhiteboardShapeService.ctorParameters=function(){return[]};var CanvasWhiteboardComponent=function(){function CanvasWhiteboardComponent(ngZone,_changeDetector,_canvasWhiteboardService,_canvasWhiteboardShapeService){this.ngZone=ngZone,this._changeDetector=_changeDetector,this._canvasWhiteboardService=_canvasWhiteboardService,this._canvasWhiteboardShapeService=_canvasWhiteboardShapeService,this.batchUpdateTimeoutDuration=100,this.drawButtonText="",this.clearButtonText="",this.undoButtonText="",this.redoButtonText="",this.saveDataButtonText="",this.drawButtonEnabled=!0,this.clearButtonEnabled=!0,this.undoButtonEnabled=!1,this.redoButtonEnabled=!1,this.saveDataButtonEnabled=!1,this.shouldDownloadDrawing=!0,this.colorPickerEnabled=!1,this.lineWidth=2,this.strokeColor="rgba(0, 0, 0, 1)",this.startingColor="#fff",this.scaleFactor=0,this.drawingEnabled=!1,this.showStrokeColorPicker=!1,this.showFillColorPicker=!1,this.lineJoin="round",this.lineCap="round",this.shapeSelectorEnabled=!0,this.showShapeSelector=!1,this.fillColor="rgba(0,0,0,0)",this.onClear=new _angular_core.EventEmitter,this.onUndo=new _angular_core.EventEmitter,this.onRedo=new _angular_core.EventEmitter,this.onBatchUpdate=new _angular_core.EventEmitter,this.onImageLoaded=new _angular_core.EventEmitter,this.onSave=new _angular_core.EventEmitter,this._canDraw=!0,this._clientDragging=!1,this._updateHistory=[],this._undoStack=[],this._redoStack=[],this._batchUpdates=[],this._updatesNotDrawn=[],this._canvasWhiteboardServiceSubscriptions=[],this._shapesMap=new Map,this._incompleteShapesMap=new Map,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions()}return Object.defineProperty(CanvasWhiteboardComponent.prototype,"imageUrl",{get:function(){return this._imageUrl},set:function(imageUrl){this._imageUrl=imageUrl,this._imageElement=null,this._redrawHistory()},enumerable:!0,configurable:!0}),CanvasWhiteboardComponent.prototype.ngOnInit=function(){this._initInputsFromOptions(this.options),this._initCanvasEventListeners(),this._initCanvasServiceObservables(),this.context=this.canvas.nativeElement.getContext("2d"),this._incompleteShapesCanvasContext=this._incompleteShapesCanvas.nativeElement.getContext("2d")},CanvasWhiteboardComponent.prototype.ngOnChanges=function(changes){changes.options&&changes.options.currentValue!=changes.options.previousValue&&this._initInputsFromOptions(changes.options.currentValue)},CanvasWhiteboardComponent.prototype.ngAfterViewInit=function(){this._calculateCanvasWidthAndHeight(),this._redrawHistory()},CanvasWhiteboardComponent.prototype._initInputsFromOptions=function(options){options&&(this._isNullOrUndefined(options.batchUpdateTimeoutDuration)||(this.batchUpdateTimeoutDuration=options.batchUpdateTimeoutDuration),this._isNullOrUndefined(options.imageUrl)||(this.imageUrl=options.imageUrl),this._isNullOrUndefined(options.aspectRatio)||(this.aspectRatio=options.aspectRatio),this._isNullOrUndefined(options.drawButtonClass)||(this.drawButtonClass=options.drawButtonClass),this._isNullOrUndefined(options.clearButtonClass)||(this.clearButtonClass=options.clearButtonClass),this._isNullOrUndefined(options.undoButtonClass)||(this.undoButtonClass=options.undoButtonClass),this._isNullOrUndefined(options.redoButtonClass)||(this.redoButtonClass=options.redoButtonClass),this._isNullOrUndefined(options.saveDataButtonClass)||(this.saveDataButtonClass=options.saveDataButtonClass),this._isNullOrUndefined(options.drawButtonText)||(this.drawButtonText=options.drawButtonText),this._isNullOrUndefined(options.clearButtonText)||(this.clearButtonText=options.clearButtonText),this._isNullOrUndefined(options.undoButtonText)||(this.undoButtonText=options.undoButtonText),this._isNullOrUndefined(options.redoButtonText)||(this.redoButtonText=options.redoButtonText),this._isNullOrUndefined(options.saveDataButtonText)||(this.saveDataButtonText=options.saveDataButtonText),this._isNullOrUndefined(options.drawButtonEnabled)||(this.drawButtonEnabled=options.drawButtonEnabled),this._isNullOrUndefined(options.clearButtonEnabled)||(this.clearButtonEnabled=options.clearButtonEnabled),this._isNullOrUndefined(options.undoButtonEnabled)||(this.undoButtonEnabled=options.undoButtonEnabled),this._isNullOrUndefined(options.redoButtonEnabled)||(this.redoButtonEnabled=options.redoButtonEnabled),this._isNullOrUndefined(options.saveDataButtonEnabled)||(this.saveDataButtonEnabled=options.saveDataButtonEnabled),this._isNullOrUndefined(options.colorPickerEnabled)||(this.colorPickerEnabled=options.colorPickerEnabled),this._isNullOrUndefined(options.lineWidth)||(this.lineWidth=options.lineWidth),this._isNullOrUndefined(options.strokeColor)||(this.strokeColor=options.strokeColor),this._isNullOrUndefined(options.shouldDownloadDrawing)||(this.shouldDownloadDrawing=options.shouldDownloadDrawing),this._isNullOrUndefined(options.startingColor)||(this.startingColor=options.startingColor),this._isNullOrUndefined(options.scaleFactor)||(this.scaleFactor=options.scaleFactor),this._isNullOrUndefined(options.drawingEnabled)||(this.drawingEnabled=options.drawingEnabled),this._isNullOrUndefined(options.downloadedFileName)||(this.downloadedFileName=options.downloadedFileName),this._isNullOrUndefined(options.lineJoin)||(this.lineJoin=options.lineJoin),this._isNullOrUndefined(options.lineCap)||(this.lineCap=options.lineCap),this._isNullOrUndefined(options.shapeSelectorEnabled)||(this.shapeSelectorEnabled=options.shapeSelectorEnabled),this._isNullOrUndefined(options.showShapeSelector)||(this.showShapeSelector=options.showShapeSelector),this._isNullOrUndefined(options.fillColor)||(this.fillColor=options.fillColor),this._isNullOrUndefined(options.showStrokeColorPicker)||(this.showStrokeColorPicker=options.showStrokeColorPicker),this._isNullOrUndefined(options.showFillColorPicker)||(this.showFillColorPicker=options.showFillColorPicker))},CanvasWhiteboardComponent.prototype._isNullOrUndefined=function(property){return null===property||void 0===property},CanvasWhiteboardComponent.prototype._initCanvasEventListeners=function(){var _this=this;this.ngZone.runOutsideAngular(function(){_this._resizeSubscription=rxjs.fromEvent(window,"resize").pipe(rxjs_operators.debounceTime(200),rxjs_operators.distinctUntilChanged()).subscribe(function(){_this.ngZone.run(function(){_this._redrawCanvasOnResize()})})}),window.addEventListener("keydown",this._canvasKeyDown.bind(this),!1)},CanvasWhiteboardComponent.prototype._initCanvasServiceObservables=function(){var _this=this;this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasDrawSubject$.subscribe(function(updates){return _this.drawUpdates(updates)})),this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasClearSubject$.subscribe(function(){return _this.clearCanvas()})),this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasUndoSubject$.subscribe(function(updateUUD){return _this._undoCanvas(updateUUD)})),this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasRedoSubject$.subscribe(function(updateUUD){return _this._redoCanvas(updateUUD)})),this._registeredShapesSubscription=this._canvasWhiteboardShapeService.registeredShapes$.subscribe(function(shapes){_this.selectedShapeConstructor&&_this._canvasWhiteboardShapeService.isRegisteredShape(_this.selectedShapeConstructor)||(_this.selectedShapeConstructor=shapes[0])})},CanvasWhiteboardComponent.prototype._calculateCanvasWidthAndHeight=function(){this.context.canvas.width=this.canvas.nativeElement.parentNode.clientWidth,this.aspectRatio?this.context.canvas.height=this.canvas.nativeElement.parentNode.clientWidth*this.aspectRatio:this.context.canvas.height=this.canvas.nativeElement.parentNode.clientHeight,this._incompleteShapesCanvasContext.canvas.width=this.context.canvas.width,this._incompleteShapesCanvasContext.canvas.height=this.context.canvas.height},CanvasWhiteboardComponent.prototype._loadImage=function(callbackFn){var _this=this;if(this._canDraw=!1,this._imageElement)return this._canDraw=!0,void(callbackFn&&callbackFn());this._imageElement=new Image,this._imageElement.addEventListener("load",function(){_this._canDraw=!0,callbackFn&&callbackFn(),_this.onImageLoaded.emit(!0)}),this._imageElement.src=this.imageUrl},CanvasWhiteboardComponent.prototype.clearCanvasLocal=function(){this.clearCanvas(),this.onClear.emit(!0)},CanvasWhiteboardComponent.prototype.clearCanvas=function(){this._removeCanvasData(),this._redoStack=[]},CanvasWhiteboardComponent.prototype._removeCanvasData=function(callbackFn){this._shapesMap=new Map,this._clientDragging=!1,this._updateHistory=[],this._undoStack=[],this._redrawBackground(callbackFn)},CanvasWhiteboardComponent.prototype._redrawBackground=function(callbackFn){var _this=this;this.context&&(this.imageUrl?this._loadImage(function(){_this.context.save(),_this._drawImage(_this.context,_this._imageElement,0,0,_this.context.canvas.width,_this.context.canvas.height,.5,.5),_this.context.restore(),_this._drawMissingUpdates(),callbackFn&&callbackFn()}):(this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height),this._drawStartingColor(),callbackFn&&callbackFn()))},CanvasWhiteboardComponent.prototype._drawStartingColor=function(){var previousFillStyle=this.context.fillStyle;this.context.save(),this.context.fillStyle=this.startingColor,this.context.fillRect(0,0,this.context.canvas.width,this.context.canvas.height),this.context.fillStyle=previousFillStyle,this.context.restore()},CanvasWhiteboardComponent.prototype.getShouldDraw=function(){return this.getDrawingEnabled()},CanvasWhiteboardComponent.prototype.getDrawingEnabled=function(){return this.drawingEnabled},CanvasWhiteboardComponent.prototype.toggleDrawingEnabled=function(){this.drawingEnabled=!this.drawingEnabled},CanvasWhiteboardComponent.prototype.setDrawingEnabled=function(drawingEnabled){this.drawingEnabled=drawingEnabled},CanvasWhiteboardComponent.prototype.changeColor=function(newStrokeColor){this.changeStrokeColor(newStrokeColor)},CanvasWhiteboardComponent.prototype.changeStrokeColor=function(newStrokeColor){this.strokeColor=newStrokeColor,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions(),this._changeDetector.detectChanges()},CanvasWhiteboardComponent.prototype.changeFillColor=function(newFillColor){this.fillColor=newFillColor,this.canvasWhiteboardShapePreviewOptions=this.generateShapePreviewOptions(),this._changeDetector.detectChanges()},CanvasWhiteboardComponent.prototype.undoLocal=function(){var _this=this;this.undo(function(updateUUID){_this._redoStack.push(updateUUID),_this.onUndo.emit(updateUUID)})},CanvasWhiteboardComponent.prototype.undo=function(callbackFn){if(this._undoStack.length){var updateUUID=this._undoStack.pop();this._undoCanvas(updateUUID),callbackFn&&callbackFn(updateUUID)}},CanvasWhiteboardComponent.prototype._undoCanvas=function(updateUUID){if(this._shapesMap.has(updateUUID)){this._shapesMap.get(updateUUID).isVisible=!1,this.drawAllShapes()}},CanvasWhiteboardComponent.prototype.redoLocal=function(){var _this=this;this.redo(function(updateUUID){_this._undoStack.push(updateUUID),_this.onRedo.emit(updateUUID)})},CanvasWhiteboardComponent.prototype.redo=function(callbackFn){if(this._redoStack.length){var updateUUID=this._redoStack.pop();this._redoCanvas(updateUUID),callbackFn&&callbackFn(updateUUID)}},CanvasWhiteboardComponent.prototype._redoCanvas=function(updateUUID){if(this._shapesMap.has(updateUUID)){this._shapesMap.get(updateUUID).isVisible=!0,this.drawAllShapes()}},CanvasWhiteboardComponent.prototype.canvasUserEvents=function(event){if(this.drawingEnabled&&this._canDraw&&(this._clientDragging||"mousemove"!==event.type&&"touchmove"!==event.type&&"mouseout"!==event.type&&"touchcancel"!==event.type&&"mouseup"!==event.type&&"touchend"!==event.type&&"mouseout"!==event.type)){event.target!=this._incompleteShapesCanvas.nativeElement&&event.target!=this.canvas.nativeElement||event.preventDefault();var update,updateType,eventPosition=this._getCanvasEventPosition(event);switch(update=new CanvasWhiteboardUpdate(eventPosition.x,eventPosition.y),event.type){case"mousedown":case"touchstart":this._clientDragging=!0,this._lastUUID=this._generateUUID(),updateType=CanvasWhiteboardUpdateType.START,this._redoStack=[],this._addCurrentShapeDataToAnUpdate(update);break;case"mousemove":case"touchmove":if(!this._clientDragging)return;updateType=CanvasWhiteboardUpdateType.DRAG;break;case"touchcancel":case"mouseup":case"touchend":case"mouseout":this._clientDragging=!1,updateType=CanvasWhiteboardUpdateType.STOP,this._undoStack.push(this._lastUUID)}update.UUID=this._lastUUID,update.type=updateType,this._draw(update),this._prepareToSendUpdate(update)}},CanvasWhiteboardComponent.prototype._getCanvasEventPosition=function(eventData){var canvasBoundingRect=this.context.canvas.getBoundingClientRect(),hasTouches=eventData.touches&&eventData.touches.length?eventData.touches[0]:null;hasTouches||(hasTouches=eventData.changedTouches&&eventData.changedTouches.length?eventData.changedTouches[0]:null);var event=hasTouches||eventData,scaleWidth=canvasBoundingRect.width/this.context.canvas.width,scaleHeight=canvasBoundingRect.height/this.context.canvas.height,xPosition=event.clientX-canvasBoundingRect.left,yPosition=event.clientY-canvasBoundingRect.top;return xPosition/=this.scaleFactor?this.scaleFactor:scaleWidth,yPosition/=this.scaleFactor?this.scaleFactor:scaleHeight,new CanvasWhiteboardPoint(xPosition/this.context.canvas.width,yPosition/this.context.canvas.height)},CanvasWhiteboardComponent.prototype._prepareToSendUpdate=function(update){this._prepareUpdateForBatchDispatch(update)},CanvasWhiteboardComponent.prototype._canvasKeyDown=function(event){(event.ctrlKey||event.metaKey)&&(90===event.keyCode&&this.undoButtonEnabled&&(event.preventDefault(),this.undo()),89===event.keyCode&&this.redoButtonEnabled&&(event.preventDefault(),this.redo()),83!==event.keyCode&&115!==event.keyCode||(event.preventDefault(),this.saveLocal()))},CanvasWhiteboardComponent.prototype._redrawCanvasOnResize=function(){this._calculateCanvasWidthAndHeight(),this._redrawHistory()},CanvasWhiteboardComponent.prototype._redrawHistory=function(){var _this=this,updatesToDraw=[].concat(this._updateHistory);this._removeCanvasData(function(){updatesToDraw.forEach(function(update){_this._draw(update)})})},CanvasWhiteboardComponent.prototype._draw=function(update){if(this._updateHistory.push(update),update=Object.assign(new CanvasWhiteboardUpdate,update,{x:update.x*this.context.canvas.width,y:update.y*this.context.canvas.height}),update.type===CanvasWhiteboardUpdateType.START){var updateShapeConstructor=this._canvasWhiteboardShapeService.getShapeConstructorFromShapeName(update.selectedShape),shape=new updateShapeConstructor(new CanvasWhiteboardPoint(update.x,update.y),Object.assign(new CanvasWhiteboardShapeOptions,update.selectedShapeOptions));this._incompleteShapesMap.set(update.UUID,shape),this._drawIncompleteShapes()}else if(update.type===CanvasWhiteboardUpdateType.DRAG){var shape=this._incompleteShapesMap.get(update.UUID);shape&&shape.onUpdateReceived(update),this._drawIncompleteShapes()}else if(CanvasWhiteboardUpdateType.STOP){var shape=this._incompleteShapesMap.get(update.UUID);shape&&shape.onStopReceived(update),this._shapesMap.set(update.UUID,shape),this._incompleteShapesMap.delete(update.UUID),this._swapCompletedShapeToActualCanvas(shape)}},CanvasWhiteboardComponent.prototype._drawIncompleteShapes=function(){var _this=this;this._resetIncompleteShapeCanvas(),this._incompleteShapesMap.forEach(function(shape){shape.isVisible&&shape.draw(_this._incompleteShapesCanvasContext)})},CanvasWhiteboardComponent.prototype._swapCompletedShapeToActualCanvas=function(shape){this._drawIncompleteShapes(),shape.isVisible&&shape.draw(this.context)},CanvasWhiteboardComponent.prototype._resetIncompleteShapeCanvas=function(){this._incompleteShapesCanvasContext.clearRect(0,0,this._incompleteShapesCanvasContext.canvas.width,this._incompleteShapesCanvasContext.canvas.height),this._incompleteShapesCanvasContext.fillStyle="transparent",this._incompleteShapesCanvasContext.fillRect(0,0,this._incompleteShapesCanvasContext.canvas.width,this._incompleteShapesCanvasContext.canvas.height)},CanvasWhiteboardComponent.prototype.drawAllShapes=function(){var _this=this;this._redrawBackground(function(){_this._shapesMap.forEach(function(shape){shape.isVisible&&shape.draw(_this.context)})})},CanvasWhiteboardComponent.prototype._addCurrentShapeDataToAnUpdate=function(update){
+update.selectedShape||(update.selectedShape=(new this.selectedShapeConstructor).getShapeName()),update.selectedShapeOptions||(update.selectedShapeOptions=Object.assign(new CanvasWhiteboardShapeOptions,this.generateShapePreviewOptions(),{lineWidth:this.lineWidth}))},CanvasWhiteboardComponent.prototype.generateShapePreviewOptions=function(){return Object.assign(new CanvasWhiteboardShapeOptions,{shouldFillShape:!!this.fillColor,fillStyle:this.fillColor,strokeStyle:this.strokeColor,lineWidth:2,lineJoin:this.lineJoin,lineCap:this.lineCap})},CanvasWhiteboardComponent.prototype._prepareUpdateForBatchDispatch=function(update){var _this=this;this._batchUpdates.push(lodash.cloneDeep(update)),this._updateTimeout||(this._updateTimeout=setTimeout(function(){_this.onBatchUpdate.emit(_this._batchUpdates),_this._batchUpdates=[],_this._updateTimeout=null},this.batchUpdateTimeoutDuration))},CanvasWhiteboardComponent.prototype.drawUpdates=function(updates){var _this=this;this._canDraw?(this._drawMissingUpdates(),updates.forEach(function(update){_this._draw(update)})):this._updatesNotDrawn=this._updatesNotDrawn.concat(updates)},CanvasWhiteboardComponent.prototype._drawMissingUpdates=function(){var _this=this;if(this._updatesNotDrawn.length>0){var updatesToDraw=this._updatesNotDrawn;this._updatesNotDrawn=[],updatesToDraw.forEach(function(update){_this._draw(update)})}},CanvasWhiteboardComponent.prototype._drawImage=function(context,image,x,y,width,height,offsetX,offsetY){2===arguments.length&&(x=y=0,width=context.canvas.width,height=context.canvas.height),offsetX="number"==typeof offsetX?offsetX:.5,offsetY="number"==typeof offsetY?offsetY:.5,offsetX<0&&(offsetX=0),offsetY<0&&(offsetY=0),offsetX>1&&(offsetX=1),offsetY>1&&(offsetY=1);var finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,imageWidth=image.width,imageHeight=image.height,radius=Math.min(width/imageWidth,height/imageHeight),newWidth=imageWidth*radius,newHeight=imageHeight*radius,aspectRatio=1;newWidth<width&&(aspectRatio=width/newWidth),Math.abs(aspectRatio-1)<1e-14&&newHeight<height&&(aspectRatio=height/newHeight),newWidth*=aspectRatio,newHeight*=aspectRatio,finalDrawWidth=imageWidth/(newWidth/width),finalDrawHeight=imageHeight/(newHeight/height),finalDrawX=(imageWidth-finalDrawWidth)*offsetX,finalDrawY=(imageHeight-finalDrawHeight)*offsetY,finalDrawX<0&&(finalDrawX=0),finalDrawY<0&&(finalDrawY=0),finalDrawWidth>imageWidth&&(finalDrawWidth=imageWidth),finalDrawHeight>imageHeight&&(finalDrawHeight=imageHeight),context.drawImage(image,finalDrawX,finalDrawY,finalDrawWidth,finalDrawHeight,x,y,width,height)},CanvasWhiteboardComponent.prototype.generateCanvasDataUrl=function(returnedDataType,returnedDataQuality){return void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),this.context.canvas.toDataURL(returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.generateCanvasBlob=function(callbackFn,returnedDataType,returnedDataQuality){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1);var toBlobMethod;void 0!==this.context.canvas.toBlob?toBlobMethod=this.context.canvas.toBlob.bind(this.context.canvas):void 0!==this.context.canvas.msToBlob&&(toBlobMethod=function(callback){callback&&callback(_this.context.canvas.msToBlob())}),toBlobMethod&&toBlobMethod(function(blob){callbackFn&&callbackFn(blob,returnedDataType)},returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.downloadCanvasImage=function(returnedDataType,downloadData,customFileName){if(void 0===returnedDataType&&(returnedDataType="image/png"),void 0===window.navigator.msSaveOrOpenBlob){var downloadLink=document.createElement("a");downloadLink.setAttribute("href",downloadData||this.generateCanvasDataUrl(returnedDataType));var fileName=customFileName||(this.downloadedFileName?this.downloadedFileName:"canvas_drawing_"+(new Date).valueOf());downloadLink.setAttribute("download",fileName+this._generateDataTypeString(returnedDataType)),document.body.appendChild(downloadLink),downloadLink.click(),document.body.removeChild(downloadLink)}else downloadData?this._saveCanvasBlob(downloadData,returnedDataType):this.generateCanvasBlob(this._saveCanvasBlob.bind(this),returnedDataType)},CanvasWhiteboardComponent.prototype._saveCanvasBlob=function(blob,returnedDataType){void 0===returnedDataType&&(returnedDataType="image/png"),window.navigator.msSaveOrOpenBlob(blob,"canvas_drawing_"+(new Date).valueOf()+this._generateDataTypeString(returnedDataType))},CanvasWhiteboardComponent.prototype.generateCanvasData=function(callback,returnedDataType,returnedDataQuality){void 0===returnedDataType&&(returnedDataType="image/png"),void 0===returnedDataQuality&&(returnedDataQuality=1),void 0===window.navigator.msSaveOrOpenBlob?callback&&callback(this.generateCanvasDataUrl(returnedDataType,returnedDataQuality)):this.generateCanvasBlob(callback,returnedDataType,returnedDataQuality)},CanvasWhiteboardComponent.prototype.saveLocal=function(returnedDataType){var _this=this;void 0===returnedDataType&&(returnedDataType="image/png"),this.generateCanvasData(function(generatedData){_this.onSave.emit(generatedData),_this.shouldDownloadDrawing&&_this.downloadCanvasImage(returnedDataType,generatedData)})},CanvasWhiteboardComponent.prototype._generateDataTypeString=function(returnedDataType){return returnedDataType?"."+returnedDataType.split("/")[1]:""},CanvasWhiteboardComponent.prototype.toggleStrokeColorPicker=function(value){this.showStrokeColorPicker=this._isNullOrUndefined(value)?!this.showStrokeColorPicker:value},CanvasWhiteboardComponent.prototype.toggleFillColorPicker=function(value){this.showFillColorPicker=this._isNullOrUndefined(value)?!this.showFillColorPicker:value},CanvasWhiteboardComponent.prototype.toggleShapeSelector=function(value){this.showShapeSelector=this._isNullOrUndefined(value)?!this.showShapeSelector:value},CanvasWhiteboardComponent.prototype.selectShape=function(newShapeBlueprint){this.selectedShapeConstructor=newShapeBlueprint},CanvasWhiteboardComponent.prototype.getDrawingHistory=function(){return lodash.cloneDeep(this._updateHistory)},CanvasWhiteboardComponent.prototype._unsubscribe=function(subscription){subscription&&subscription.unsubscribe()},CanvasWhiteboardComponent.prototype._generateUUID=function(){return this._random4()+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+"-"+this._random4()+this._random4()+this._random4()},CanvasWhiteboardComponent.prototype._random4=function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)},CanvasWhiteboardComponent.prototype.ngOnDestroy=function(){var _this=this;this._unsubscribe(this._resizeSubscription),this._unsubscribe(this._registeredShapesSubscription),this._canvasWhiteboardServiceSubscriptions.forEach(function(subscription){return _this._unsubscribe(subscription)})},CanvasWhiteboardComponent}();CanvasWhiteboardComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard",template:'\n        <div class="canvas_wrapper_div">\n            <div class="canvas_whiteboard_buttons">\n                <canvas-whiteboard-shape-selector *ngIf="shapeSelectorEnabled"\n                                                  [showShapeSelector]="showShapeSelector"\n                                                  [selectedShapeConstructor]="selectedShapeConstructor"\n                                                  [shapeOptions]="generateShapePreviewOptions()"\n                                                  (onToggleShapeSelector)="toggleShapeSelector($event)"\n                                                  (onShapeSelected)="selectShape($event)"></canvas-whiteboard-shape-selector>\n\n                <canvas-whiteboard-colorpicker *ngIf="colorPickerEnabled"\n                                               [previewText]="\'Fill\'"\n                                               [showColorPicker]="showFillColorPicker"\n                                               [selectedColor]="fillColor"\n                                               (onToggleColorPicker)="toggleFillColorPicker($event)"\n                                               (onColorSelected)="changeFillColor($event)">\n                </canvas-whiteboard-colorpicker>\n\n                <canvas-whiteboard-colorpicker *ngIf="colorPickerEnabled"\n                                               [previewText]="\'Stroke\'"\n                                               [showColorPicker]="showStrokeColorPicker"\n                                               [selectedColor]="strokeColor"\n                                               (onToggleColorPicker)="toggleStrokeColorPicker($event)"\n                                               (onColorSelected)="changeStrokeColor($event)">\n                </canvas-whiteboard-colorpicker>\n\n\n                <button *ngIf="drawButtonEnabled" (click)="toggleDrawingEnabled()"\n                        [class.canvas_whiteboard_button-draw_animated]="getDrawingEnabled()"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-draw" type="button">\n                    <i [class]="drawButtonClass" aria-hidden="true"></i> {{drawButtonText}}\n                </button>\n\n                <button *ngIf="clearButtonEnabled" (click)="clearCanvasLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-clear">\n                    <i [class]="clearButtonClass" aria-hidden="true"></i> {{clearButtonText}}\n                </button>\n\n                <button *ngIf="undoButtonEnabled" (click)="undoLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-undo">\n                    <i [class]="undoButtonClass" aria-hidden="true"></i> {{undoButtonText}}\n                </button>\n\n                <button *ngIf="redoButtonEnabled" (click)="redoLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-redo">\n                    <i [class]="redoButtonClass" aria-hidden="true"></i> {{redoButtonText}}\n                </button>\n                <button *ngIf="saveDataButtonEnabled" (click)="saveLocal()" type="button"\n                        class="canvas_whiteboard_button canvas_whiteboard_button-save">\n                    <i [class]="saveDataButtonClass" aria-hidden="true"></i> {{saveDataButtonText}}\n                </button>\n            </div>\n            <canvas #canvas class="canvas_whiteboard"></canvas>\n            <canvas #incompleteShapesCanvas class="incomplete_shapes_canvas_whiteboard"\n                    (mousedown)="canvasUserEvents($event)" (mouseup)="canvasUserEvents($event)"\n                    (mousemove)="canvasUserEvents($event)" (mouseout)="canvasUserEvents($event)"\n                    (touchstart)="canvasUserEvents($event)" (touchmove)="canvasUserEvents($event)"\n                    (touchend)="canvasUserEvents($event)" (touchcancel)="canvasUserEvents($event)"></canvas>\n        </div>\n    ',styles:[DEFAULT_STYLES]}]}],CanvasWhiteboardComponent.ctorParameters=function(){return[{type:_angular_core.NgZone},{type:_angular_core.ChangeDetectorRef},{type:CanvasWhiteboardService},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardComponent.propDecorators={options:[{type:_angular_core.Input}],batchUpdateTimeoutDuration:[{type:_angular_core.Input}],imageUrl:[{type:_angular_core.Input}],aspectRatio:[{type:_angular_core.Input}],drawButtonClass:[{type:_angular_core.Input}],clearButtonClass:[{type:_angular_core.Input}],undoButtonClass:[{type:_angular_core.Input}],redoButtonClass:[{type:_angular_core.Input}],saveDataButtonClass:[{type:_angular_core.Input}],drawButtonText:[{type:_angular_core.Input}],clearButtonText:[{type:_angular_core.Input}],undoButtonText:[{type:_angular_core.Input}],redoButtonText:[{type:_angular_core.Input}],saveDataButtonText:[{type:_angular_core.Input}],drawButtonEnabled:[{type:_angular_core.Input}],clearButtonEnabled:[{type:_angular_core.Input}],undoButtonEnabled:[{type:_angular_core.Input}],redoButtonEnabled:[{type:_angular_core.Input}],saveDataButtonEnabled:[{type:_angular_core.Input}],shouldDownloadDrawing:[{type:_angular_core.Input}],colorPickerEnabled:[{type:_angular_core.Input}],lineWidth:[{type:_angular_core.Input}],strokeColor:[{type:_angular_core.Input}],startingColor:[{type:_angular_core.Input}],scaleFactor:[{type:_angular_core.Input}],drawingEnabled:[{type:_angular_core.Input}],showStrokeColorPicker:[{type:_angular_core.Input}],showFillColorPicker:[{type:_angular_core.Input}],downloadedFileName:[{type:_angular_core.Input}],lineJoin:[{type:_angular_core.Input}],lineCap:[{type:_angular_core.Input}],shapeSelectorEnabled:[{type:_angular_core.Input}],showShapeSelector:[{type:_angular_core.Input}],fillColor:[{type:_angular_core.Input}],onClear:[{type:_angular_core.Output}],onUndo:[{type:_angular_core.Output}],onRedo:[{type:_angular_core.Output}],onBatchUpdate:[{type:_angular_core.Output}],onImageLoaded:[{type:_angular_core.Output}],onSave:[{type:_angular_core.Output}],canvas:[{type:_angular_core.ViewChild,args:["canvas",{static:!0}]}],_incompleteShapesCanvas:[{type:_angular_core.ViewChild,args:["incompleteShapesCanvas",{static:!0}]}]};var CanvasWhiteboardShapeSelectorComponent=function(){function CanvasWhiteboardShapeSelectorComponent(_elementRef,_canvasWhiteboardShapeService){this._elementRef=_elementRef,this._canvasWhiteboardShapeService=_canvasWhiteboardShapeService,this.showShapeSelector=!1,this.onToggleShapeSelector=new _angular_core.EventEmitter,this.onShapeSelected=new _angular_core.EventEmitter,this.registeredShapes$=this._canvasWhiteboardShapeService.registeredShapes$}return CanvasWhiteboardShapeSelectorComponent.prototype.selectShape=function(shape){this.onShapeSelected.emit(shape),this.toggleShapeSelector(null)},CanvasWhiteboardShapeSelectorComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showShapeSelector&&this.onToggleShapeSelector.emit(!1)},CanvasWhiteboardShapeSelectorComponent.prototype.toggleShapeSelector=function(event){event&&event.preventDefault(),this.onToggleShapeSelector.emit(!this.showShapeSelector)},CanvasWhiteboardShapeSelectorComponent}();CanvasWhiteboardShapeSelectorComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-selector",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n        <div *ngIf="!showShapeSelector" (click)="toggleShapeSelector($event)"\n             class="canvas-whiteboard-shape-selector-selected-preview">\n            <canvas-whiteboard-shape-preview [shapeConstructor]="selectedShapeConstructor"\n                                             [shapeOptions]="shapeOptions"></canvas-whiteboard-shape-preview>\n        </div>\n        <div class="canvas-whiteboard-shape-selector-wrapper" *ngIf="showShapeSelector">\n            <canvas-whiteboard-shape-preview *ngFor="let shapeConstructor of registeredShapes$ | async"\n                                             [shapeConstructor]="shapeConstructor"\n                                             [shapeOptions]="shapeOptions"\n                                             (click)="selectShape(shapeConstructor)"></canvas-whiteboard-shape-preview>\n        </div>\n    ',styles:["\n        .canvas-whiteboard-shape-selector-selected-preview {\n            vertical-align: bottom;\n            display: inline-block;\n        }\n\n        .canvas-whiteboard-shape-selector-wrapper {\n            display: block;\n            padding: 4px;\n            border: 1px solid #afafaf;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-shape-selector-wrapper {\n            }\n        }\n    "]}]}],CanvasWhiteboardShapeSelectorComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:CanvasWhiteboardShapeService}]},CanvasWhiteboardShapeSelectorComponent.propDecorators={showShapeSelector:[{type:_angular_core.Input}],selectedShapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],onToggleShapeSelector:[{type:_angular_core.Output}],onShapeSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardColorPickerComponent=function(){function CanvasWhiteboardColorPickerComponent(_elementRef){this._elementRef=_elementRef,this.selectedColor="rgba(0,0,0,1)",this.showColorPicker=!1,this.onToggleColorPicker=new _angular_core.EventEmitter,this.onColorSelected=new _angular_core.EventEmitter,this.onSecondaryColorSelected=new _angular_core.EventEmitter}return CanvasWhiteboardColorPickerComponent.prototype.ngOnInit=function(){this._context=this.canvas.nativeElement.getContext("2d"),this.createColorPalette()},CanvasWhiteboardColorPickerComponent.prototype.createColorPalette=function(){var gradient=this._context.createLinearGradient(0,0,this._context.canvas.width,0);gradient.addColorStop(0,"rgb(255, 0, 0)"),gradient.addColorStop(.15,"rgb(255, 0, 255)"),gradient.addColorStop(.33,"rgb(0, 0, 255)"),gradient.addColorStop(.49,"rgb(0, 255, 255)"),gradient.addColorStop(.67,"rgb(0, 255, 0)"),gradient.addColorStop(.84,"rgb(255, 255, 0)"),gradient.addColorStop(1,"rgb(255, 0, 0)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height),gradient=this._context.createLinearGradient(0,0,0,this._context.canvas.height),gradient.addColorStop(0,"rgba(255, 255, 255, 1)"),gradient.addColorStop(.5,"rgba(255, 255, 255, 0)"),gradient.addColorStop(.5,"rgba(0, 0, 0, 0)"),gradient.addColorStop(1,"rgba(0, 0, 0, 1)"),this._context.fillStyle=gradient,this._context.fillRect(0,0,this._context.canvas.width,this._context.canvas.height)},CanvasWhiteboardColorPickerComponent.prototype.closeOnExternalClick=function(event){!this._elementRef.nativeElement.contains(event.target)&&this.showColorPicker&&this.onToggleColorPicker.emit(!1)},CanvasWhiteboardColorPickerComponent.prototype.toggleColorPicker=function(event){event&&event.preventDefault(),this.onToggleColorPicker.emit(!this.showColorPicker)},CanvasWhiteboardColorPickerComponent.prototype.determineColorFromCanvas=function(event){var canvasRect=this._context.canvas.getBoundingClientRect(),imageData=this._context.getImageData(event.clientX-canvasRect.left,event.clientY-canvasRect.top,1,1);return"rgba("+imageData.data[0]+", "+imageData.data[1]+", "+imageData.data[2]+", "+imageData.data[3]+")"},CanvasWhiteboardColorPickerComponent.prototype.selectColor=function(color){this.onColorSelected.emit(color),this.toggleColorPicker(null)},CanvasWhiteboardColorPickerComponent}();CanvasWhiteboardColorPickerComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-colorpicker",host:{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)"},template:'\n        <div [hidden]="showColorPicker" class="canvas-whiteboard-colorpicker-input"\n               (click)="toggleColorPicker($event)">\n               <div class="selected-color-type-wrapper">{{previewText}}</div>\n               <div class="selected-color-preview" [style.background]="selectedColor"></div>\n        </div>\n        <div [hidden]="!showColorPicker" class="canvas-whiteboard-colorpicker-wrapper">\n            <div (click)="selectColor(\'transparent\')" class="transparent-color">Transparent</div>\n            <canvas #canvaswhiteboardcolorpicker class="canvas-whiteboard-colorpicker" width="284" height="155"\n                    (click)="selectColor(determineColorFromCanvas($event))"></canvas>\n        </div>\n    ',styles:["\n        .selected-color-preview {\n            width: 100%;\n            height: 20%;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n        }\n        \n        .selected-color-type-wrapper {\n            display: inline-block;\n            height: 100%;\n            width: 100%;\n            text-align: center;\n            font-size: 14px;\n            color: #000;\n        }\n        \n        .transparent-color {\n            font-size: 14px;\n        }\n        \n        .canvas-whiteboard-colorpicker-wrapper {\n            border: 1px solid #afafaf;\n            color: #000;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-colorpicker-wrapper {\n                position: absolute;\n            }\n        }\n\n        .canvas-whiteboard-colorpicker-input {\n            display: inline-block;\n            position:relative;\n            width: 44px;\n            height: 44px;\n            margin: 5px;\n            cursor: pointer;\n            color: #000;\n        }\n    "]}]}],CanvasWhiteboardColorPickerComponent.ctorParameters=function(){return[{type:_angular_core.ElementRef}]},CanvasWhiteboardColorPickerComponent.propDecorators={previewText:[{type:_angular_core.Input}],selectedColor:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvaswhiteboardcolorpicker",{static:!0}]}],showColorPicker:[{type:_angular_core.Input}],onToggleColorPicker:[{type:_angular_core.Output}],onColorSelected:[{type:_angular_core.Output}],onSecondaryColorSelected:[{type:_angular_core.Output}]};var CanvasWhiteboardShapePreviewComponent=function(){function CanvasWhiteboardShapePreviewComponent(){}return CanvasWhiteboardShapePreviewComponent.prototype.ngAfterViewInit=function(){this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.ngOnChanges=function(changes){(changes.shapeConstructor||changes.shapeOptions)&&this.drawShapePreview()},CanvasWhiteboardShapePreviewComponent.prototype.drawShapePreview=function(){if(this.canvas){var context=this.canvas.nativeElement.getContext("2d");context.clearRect(0,0,context.canvas.width,context.canvas.height);new this.shapeConstructor(new CanvasWhiteboardPoint(0,0),Object.assign(new CanvasWhiteboardShapeOptions,this.shapeOptions)).drawPreview(context)}},CanvasWhiteboardShapePreviewComponent}();CanvasWhiteboardShapePreviewComponent.decorators=[{type:_angular_core.Component,args:[{selector:"canvas-whiteboard-shape-preview",template:'\n        <canvas #canvasWhiteboardShapePreview width="50px" height="50px"\n                class="canvas-whiteboard-shape-preview-canvas"></canvas>\n    ',styles:["\n        .canvas-whiteboard-shape-preview-canvas {\n            cursor: pointer;\n        }\n    "]}]}],CanvasWhiteboardShapePreviewComponent.propDecorators={shapeConstructor:[{type:_angular_core.Input}],shapeOptions:[{type:_angular_core.Input}],canvas:[{type:_angular_core.ViewChild,args:["canvasWhiteboardShapePreview"]}]};var CanvasWhiteboardModule=function(){function CanvasWhiteboardModule(){}return CanvasWhiteboardModule}();CanvasWhiteboardModule.decorators=[{type:_angular_core.NgModule,args:[{imports:[_angular_common.CommonModule],declarations:[CanvasWhiteboardComponent,CanvasWhiteboardColorPickerComponent,CanvasWhiteboardShapeSelectorComponent,CanvasWhiteboardShapePreviewComponent],providers:[CanvasWhiteboardService,CanvasWhiteboardShapeService],exports:[CanvasWhiteboardComponent]}]}],exports.CanvasWhiteboardComponent=CanvasWhiteboardComponent,exports.CanvasWhiteboardUpdate=CanvasWhiteboardUpdate,exports.CanvasWhiteboardService=CanvasWhiteboardService,exports.CanvasWhiteboardPoint=CanvasWhiteboardPoint,exports.CanvasWhiteboardShape=CanvasWhiteboardShape,exports.CanvasWhiteboardShapeOptions=CanvasWhiteboardShapeOptions,exports.CanvasWhiteboardShapeService=CanvasWhiteboardShapeService,exports.RectangleShape=RectangleShape,exports.CircleShape=CircleShape,exports.CanvasWhiteboardShapeSelectorComponent=CanvasWhiteboardShapeSelectorComponent,exports.CanvasWhiteboardColorPickerComponent=CanvasWhiteboardColorPickerComponent,exports.CanvasWhiteboardShapePreviewComponent=CanvasWhiteboardShapePreviewComponent,exports.CanvasWhiteboardModule=CanvasWhiteboardModule,exports.DEFAULT_STYLES=DEFAULT_STYLES,Object.defineProperty(exports,"__esModule",{value:!0})});
 //# sourceMappingURL=ng2-canvas-whiteboard.umd.min.js.map
diff --git a/dist/modules/ng2-canvas-whiteboard.es5.js b/dist/modules/ng2-canvas-whiteboard.es5.js
index fbba2039..a9fd2df5 100644
--- a/dist/modules/ng2-canvas-whiteboard.es5.js
+++ b/dist/modules/ng2-canvas-whiteboard.es5.js
@@ -1,7 +1,10 @@
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -9,13 +12,14 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Input, NgModule, NgZone, Output, ViewChild } from '@angular/core';
-import { BehaviorSubject, Subject, fromEvent } from 'rxjs/index';
+import { BehaviorSubject, Subject, fromEvent } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { cloneDeep } from 'lodash';
 import { CommonModule } from '@angular/common';
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-update.model.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @enum {number} */
 var CanvasWhiteboardUpdateType = {
@@ -81,13 +85,15 @@ var CanvasWhiteboardUpdate = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/template.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 var DEFAULT_STYLES = "\n.canvas_whiteboard_button {\n    display: inline-block;\n    outline: 0px;\n    padding-top: 7px;\n    margin-bottom: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.42857143;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    -ms-touch-action: manipulation;\n    touch-action: manipulation;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    background-image: none;\n    border: 1px solid transparent;\n    border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n    z-index: 3;\n}\n\n@media (max-width: 400px) {\n     .canvas_whiteboard_buttons {\n            position: absolute;\n            z-inde\n            top: 0;\n            width: 100%;\n            text-align: center;\n      }\n}\n        \n@media (min-width: 401px) { \n    .canvas_whiteboard_buttons {\n        position: absolute;\n        right: 0%;\n        color: #fff;\n    }\n}\n\n.canvas_whiteboard_buttons {\n    padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n    margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n    -webkit-animation: pulsate 1s ease-out;\n    -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n    0% {\n        -webkit-transform: scale(0.1, 0.1);\n        opacity: 0.0;\n    }\n    50% {\n        opacity: 1.0;\n    }\n    100% {\n        -webkit-transform: scale(1.2, 1.2);\n        opacity: 0.0;\n    }\n}\n.canvas_wrapper_div {\n    width: 100%;\n    height: 100%;\n    border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n    padding-top: 5px;\n}\n\n.canvas_whiteboard {\n    position: absolute;\n    z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n    position: absolute;\n    z-index: 2;\n}\n\n";
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardService = /** @class */ (function () {
     function CanvasWhiteboardService() {
@@ -131,7 +137,8 @@ var CanvasWhiteboardService = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-point.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardPoint = /** @class */ (function () {
     /**
@@ -146,7 +153,8 @@ var CanvasWhiteboardPoint = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-options.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardShapeOptions = /** @class */ (function () {
     function CanvasWhiteboardShapeOptions() {
@@ -161,7 +169,8 @@ var CanvasWhiteboardShapeOptions = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @abstract
@@ -176,6 +185,7 @@ var CanvasWhiteboardShape = /** @class */ (function () {
         this.options = options || new CanvasWhiteboardShapeOptions();
         this.isVisible = true;
     }
+    // noinspection TsLint
     /**
      * @param {?} update
      * @return {?}
@@ -186,7 +196,8 @@ var CanvasWhiteboardShape = /** @class */ (function () {
 }());
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/circle-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CircleShape = /** @class */ (function (_super) {
     __extends(CircleShape, _super);
@@ -248,7 +259,8 @@ var CircleShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/rectangle-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RectangleShape = /** @class */ (function (_super) {
     __extends(RectangleShape, _super);
@@ -309,7 +321,8 @@ var RectangleShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/free-hand-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var FreeHandShape = /** @class */ (function (_super) {
     __extends(FreeHandShape, _super);
@@ -338,6 +351,11 @@ var FreeHandShape = /** @class */ (function (_super) {
         context.moveTo(this.positionPoint.x, this.positionPoint.y);
         // Draw a dot
         context.lineTo(this.positionPoint.x + 1, this.positionPoint.y + 1);
+        // Normal fastest free hand drawing
+        // this.linePositions.forEach((linePosition) => {
+        //     context.lineTo(linePosition.x, linePosition.y);
+        // });
+        // Quadratic curves drawing
         /** @type {?} */
         var i = 0;
         while (i < this.linePositions.length) {
@@ -386,7 +404,8 @@ var FreeHandShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/smiley-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var SmileyShape = /** @class */ (function (_super) {
     __extends(SmileyShape, _super);
@@ -465,7 +484,8 @@ var SmileyShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/star-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var StarShape = /** @class */ (function (_super) {
     __extends(StarShape, _super);
@@ -549,7 +569,8 @@ var StarShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/line-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var LineShape = /** @class */ (function (_super) {
     __extends(LineShape, _super);
@@ -604,9 +625,9 @@ var LineShape = /** @class */ (function (_super) {
 }(CanvasWhiteboardShape));
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// unsupported: template constraints.
 /**
  * @record
  * @template T
@@ -628,7 +649,10 @@ var CanvasWhiteboardShapeService = /** @class */ (function () {
      * @return {?}
      */
     CanvasWhiteboardShapeService.prototype.getShapeConstructorFromShapeName = function (shapeName) {
-        return this.getCurrentRegisteredShapes().find(function (shape) { return (new shape).getShapeName() === shapeName; });
+        return this.getCurrentRegisteredShapes().find(( /**
+         * @param {?} shape
+         * @return {?}
+         */function (shape) { return (new shape).getShapeName() === shapeName; }));
     };
     /**
      * @return {?}
@@ -664,27 +688,36 @@ var CanvasWhiteboardShapeService = /** @class */ (function () {
     CanvasWhiteboardShapeService.prototype.registerShapes = function (shapes) {
         var _this = this;
         this._registeredShapesSubject.next(this.getCurrentRegisteredShapes()
-            .concat(shapes.filter(function (shape) {
+            .concat(shapes.filter(( /**
+     * @param {?} shape
+     * @return {?}
+     */function (shape) {
             if (_this.isRegisteredShape(shape)) {
                 console.warn("You tried to register a shape:" + shape + ", but is has already been registered.");
                 return false;
             }
             return true;
-        })));
+        }))));
     };
     /**
      * @param {?} shape
      * @return {?}
      */
     CanvasWhiteboardShapeService.prototype.unregisterShape = function (shape) {
-        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function (registeredShape) { return registeredShape !== shape; }));
+        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(( /**
+         * @param {?} registeredShape
+         * @return {?}
+         */function (registeredShape) { return registeredShape !== shape; })));
     };
     /**
      * @param {?} shapes
      * @return {?}
      */
     CanvasWhiteboardShapeService.prototype.unregisterShapes = function (shapes) {
-        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(function (shape) { return shapes.indexOf(shape) === -1; }));
+        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter(( /**
+         * @param {?} shape
+         * @return {?}
+         */function (shape) { return shapes.indexOf(shape) === -1; })));
     };
     return CanvasWhiteboardShapeService;
 }());
@@ -695,7 +728,8 @@ CanvasWhiteboardShapeService.decorators = [
 CanvasWhiteboardShapeService.ctorParameters = function () { return []; };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardComponent = /** @class */ (function () {
     /**
@@ -744,7 +778,8 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         this._canDraw = true;
         this._clientDragging = false;
         this._updateHistory = [];
-        this._undoStack = [];
+        this._undoStack = []; // Stores the value of start and count for each continuous stroke
+        // Stores the value of start and count for each continuous stroke
         this._redoStack = [];
         this._batchUpdates = [];
         this._updatesNotDrawn = [];
@@ -808,6 +843,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * For security reasons we must check each item on its own since if we iterate the keys
      * we may be injected with malicious values
      *
+     * @private
      * @param {?} options
      * @return {?}
      */
@@ -882,6 +918,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @param {?} property
      * @return {?}
      */
@@ -890,45 +927,71 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Init global window listeners like resize and keydown
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._initCanvasEventListeners = function () {
         var _this = this;
-        this.ngZone.runOutsideAngular(function () {
+        this.ngZone.runOutsideAngular(( /**
+         * @return {?}
+         */function () {
             _this._resizeSubscription = fromEvent(window, 'resize')
                 .pipe(debounceTime(200), distinctUntilChanged())
-                .subscribe(function () {
-                _this.ngZone.run(function () {
+                .subscribe(( /**
+         * @return {?}
+         */function () {
+                _this.ngZone.run(( /**
+                 * @return {?}
+                 */function () {
                     _this._redrawCanvasOnResize();
-                });
-            });
-        });
+                }));
+            }));
+        }));
         window.addEventListener("keydown", this._canvasKeyDown.bind(this), false);
     };
     /**
      * Subscribes to new signals in the canvas whiteboard service and executes methods accordingly
      * Because of circular publishing and subscribing, the canvas methods do not use the service when
      * local actions are completed (Ex. clicking undo from the button inside this component)
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._initCanvasServiceObservables = function () {
         var _this = this;
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasDrawSubject$
-            .subscribe(function (updates) { return _this.drawUpdates(updates); }));
+            .subscribe(( /**
+     * @param {?} updates
+     * @return {?}
+     */function (/**
+     * @param {?} updates
+     * @return {?}
+     */ updates) { return _this.drawUpdates(updates); })));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasClearSubject$
-            .subscribe(function () { return _this.clearCanvas(); }));
+            .subscribe(( /**
+     * @return {?}
+     */function () { return _this.clearCanvas(); })));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasUndoSubject$
-            .subscribe(function (updateUUD) { return _this._undoCanvas(updateUUD); }));
+            .subscribe(( /**
+     * @param {?} updateUUD
+     * @return {?}
+     */function (updateUUD) { return _this._undoCanvas(updateUUD); })));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasRedoSubject$
-            .subscribe(function (updateUUD) { return _this._redoCanvas(updateUUD); }));
-        this._registeredShapesSubscription = this._canvasWhiteboardShapeService.registeredShapes$.subscribe(function (shapes) {
+            .subscribe(( /**
+     * @param {?} updateUUD
+     * @return {?}
+     */function (updateUUD) { return _this._redoCanvas(updateUUD); })));
+        this._registeredShapesSubscription = this._canvasWhiteboardShapeService.registeredShapes$.subscribe(( /**
+         * @param {?} shapes
+         * @return {?}
+         */function (shapes) {
             if (!_this.selectedShapeConstructor || !_this._canvasWhiteboardShapeService.isRegisteredShape(_this.selectedShapeConstructor)) {
                 _this.selectedShapeConstructor = shapes[0];
             }
-        });
+        }));
     };
     /**
      * Calculate the canvas width and height from it's parent container width and height (use aspect ratio if needed)
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._calculateCanvasWidthAndHeight = function () {
@@ -944,6 +1007,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Load an image and draw it on the canvas (if an image exists)
+     * @private
      * @param {?=} callbackFn A function that is called after the image loading is finished
      * @return {?} Emits a value when the image has been loaded.
      */
@@ -957,11 +1021,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             return;
         }
         this._imageElement = new Image();
-        this._imageElement.addEventListener("load", function () {
+        this._imageElement.addEventListener("load", ( /**
+         * @return {?}
+         */function () {
             _this._canDraw = true;
             callbackFn && callbackFn();
             _this.onImageLoaded.emit(true);
-        });
+        }));
         this._imageElement.src = this.imageUrl;
     };
     /**
@@ -985,6 +1051,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     /**
      * This method resets the state of the canvas and redraws it.
      * It calls a callback function after redrawing
+     * @private
      * @param {?=} callbackFn
      * @return {?}
      */
@@ -997,6 +1064,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Clears the canvas and redraws the image if the url exists.
+     * @private
      * @param {?=} callbackFn A function that is called after the background is redrawn
      * @return {?} Emits a value when the clearing is finished
      */
@@ -1004,13 +1072,15 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         if (this.context) {
             if (this.imageUrl) {
-                this._loadImage(function () {
+                this._loadImage(( /**
+                 * @return {?}
+                 */function () {
                     _this.context.save();
                     _this._drawImage(_this.context, _this._imageElement, 0, 0, _this.context.canvas.width, _this.context.canvas.height, 0.5, 0.5);
                     _this.context.restore();
                     _this._drawMissingUpdates();
                     callbackFn && callbackFn();
-                });
+                }));
             }
             else {
                 this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
@@ -1020,6 +1090,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._drawStartingColor = function () {
@@ -1103,10 +1174,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      */
     CanvasWhiteboardComponent.prototype.undoLocal = function () {
         var _this = this;
-        this.undo(function (updateUUID) {
+        this.undo(( /**
+         * @param {?} updateUUID
+         * @return {?}
+         */function (updateUUID) {
             _this._redoStack.push(updateUUID);
             _this.onUndo.emit(updateUUID);
-        });
+        }));
     };
     /**
      * This methods selects the last uuid prepares it for undoing (making the whole update sequence invisible)
@@ -1125,6 +1199,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid invisible
+     * @private
      * @param {?} updateUUID
      * @return {?}
      */
@@ -1145,10 +1220,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      */
     CanvasWhiteboardComponent.prototype.redoLocal = function () {
         var _this = this;
-        this.redo(function (updateUUID) {
+        this.redo(( /**
+         * @param {?} updateUUID
+         * @return {?}
+         */function (updateUUID) {
             _this._undoStack.push(updateUUID);
             _this.onRedo.emit(updateUUID);
-        });
+        }));
     };
     /**
      * This methods selects the last uuid prepares it for redoing (making the whole update sequence visible)
@@ -1167,6 +1245,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid visible
+     * @private
      * @param {?} updateUUID
      * @return {?}
      */
@@ -1256,6 +1335,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * If it is a touch event, get the touch positions
      * If we released the touch, the position will be placed in the changedTouches object
      * If it is not a touch event, use the original mouse event received
+     * @private
      * @param {?} eventData
      * @return {?}
      */
@@ -1285,6 +1365,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * can reverse the mapping and get the same position as the one that
      * was drawn on this update.
      *
+     * @private
      * @param {?} update The CanvasWhiteboardUpdate object.
      * @return {?}
      */
@@ -1297,6 +1378,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * If the ctrlKey or commandKey(macOS) was held and the keyCode is 89 (y), a redo action will be performed
      * If the ctrlKey or commandKey(macOS) was held and the keyCode is 83 (s) or 115(S), a save action will be performed
      *
+     * @private
      * @param {?} event The event that occurred.
      * @return {?}
      */
@@ -1318,6 +1400,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * On window resize, recalculate the canvas dimensions and redraw the history
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._redrawCanvasOnResize = function () {
@@ -1326,17 +1409,23 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Redraw the saved history after resetting the canvas state
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._redrawHistory = function () {
         var _this = this;
         /** @type {?} */
         var updatesToDraw = [].concat(this._updateHistory);
-        this._removeCanvasData(function () {
-            updatesToDraw.forEach(function (update) {
+        this._removeCanvasData(( /**
+         * @return {?}
+         */function () {
+            updatesToDraw.forEach(( /**
+             * @param {?} update
+             * @return {?}
+             */function (update) {
                 _this._draw(update);
-            });
-        });
+            }));
+        }));
     };
     /**
      * Draws a CanvasWhiteboardUpdate object on the canvas.
@@ -1348,6 +1437,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * Afterwards the context is used to draw the shape on the canvas.
      * This function saves the last X and Y coordinates that were drawn.
      *
+     * @private
      * @param {?} update The update object.
      * @return {?}
      */
@@ -1382,18 +1472,23 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._drawIncompleteShapes = function () {
         var _this = this;
         this._resetIncompleteShapeCanvas();
-        this._incompleteShapesMap.forEach(function (shape) {
+        this._incompleteShapesMap.forEach(( /**
+         * @param {?} shape
+         * @return {?}
+         */function (shape) {
             if (shape.isVisible) {
                 shape.draw(_this._incompleteShapesCanvasContext);
             }
-        });
+        }));
     };
     /**
+     * @private
      * @param {?} shape
      * @return {?}
      */
@@ -1404,6 +1499,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         }
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._resetIncompleteShapeCanvas = function () {
@@ -1417,15 +1513,21 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      */
     CanvasWhiteboardComponent.prototype.drawAllShapes = function () {
         var _this = this;
-        this._redrawBackground(function () {
-            _this._shapesMap.forEach(function (shape) {
+        this._redrawBackground(( /**
+         * @return {?}
+         */function () {
+            _this._shapesMap.forEach(( /**
+             * @param {?} shape
+             * @return {?}
+             */function (shape) {
                 if (shape.isVisible) {
                     shape.draw(_this.context);
                 }
-            });
-        });
+            }));
+        }));
     };
     /**
+     * @private
      * @param {?} update
      * @return {?}
      */
@@ -1456,6 +1558,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * multiple updates are sent at the same time). If this method is called, after 100 ms all updates
      * that were made at that time will be packed up together and sent to the receiver.
      *
+     * @private
      * @param {?} update The update object.
      * @return {?} Emits an Array of Updates when the batch.
      */
@@ -1463,11 +1566,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         this._batchUpdates.push(cloneDeep(update));
         if (!this._updateTimeout) {
-            this._updateTimeout = setTimeout(function () {
+            this._updateTimeout = setTimeout(( /**
+             * @return {?}
+             */function () {
                 _this.onBatchUpdate.emit(_this._batchUpdates);
                 _this._batchUpdates = [];
                 _this._updateTimeout = null;
-            }, this.batchUpdateTimeoutDuration);
+            }), this.batchUpdateTimeoutDuration);
         }
     };
     ;
@@ -1481,9 +1586,12 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         if (this._canDraw) {
             this._drawMissingUpdates();
-            updates.forEach(function (update) {
+            updates.forEach(( /**
+             * @param {?} update
+             * @return {?}
+             */function (update) {
                 _this._draw(update);
-            });
+            }));
         }
         else {
             this._updatesNotDrawn = this._updatesNotDrawn.concat(updates);
@@ -1492,6 +1600,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     ;
     /**
      * Draw any missing updates that were received before the image was loaded
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._drawMissingUpdates = function () {
@@ -1500,14 +1609,18 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             /** @type {?} */
             var updatesToDraw = this._updatesNotDrawn;
             this._updatesNotDrawn = [];
-            updatesToDraw.forEach(function (update) {
+            updatesToDraw.forEach(( /**
+             * @param {?} update
+             * @return {?}
+             */function (update) {
                 _this._draw(update);
-            });
+            }));
         }
     };
     /**
      * Draws an image on the canvas
      *
+     * @private
      * @param {?} context The context used to draw the image on the canvas.
      * @param {?} image The image to draw.
      * @param {?} x The X coordinate for the starting draw position.
@@ -1616,14 +1729,21 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         if (typeof this.context.canvas.toBlob !== "undefined") {
             toBlobMethod = this.context.canvas.toBlob.bind(this.context.canvas);
         }
-        else if (typeof this.context.canvas.msToBlob !== "undefined") {
-            toBlobMethod = function (callback) {
-                callback && callback(_this.context.canvas.msToBlob());
-            };
+        else if (typeof (( /** @type {?} */(this.context.canvas))).msToBlob !== "undefined") {
+            // For IE
+            toBlobMethod = ( /**
+             * @param {?} callback
+             * @return {?}
+             */function (callback) {
+                callback && callback((( /** @type {?} */(_this.context.canvas))).msToBlob());
+            });
         }
-        toBlobMethod && toBlobMethod(function (blob) {
+        toBlobMethod && toBlobMethod(( /**
+         * @param {?} blob
+         * @return {?}
+         */function (blob) {
             callbackFn && callbackFn(blob, returnedDataType);
-        }, returnedDataType, returnedDataQuality);
+        }), returnedDataType, returnedDataQuality);
     };
     /**
      * Generate a canvas image representation and download it locally
@@ -1640,7 +1760,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         if (window.navigator.msSaveOrOpenBlob === undefined) {
             /** @type {?} */
             var downloadLink = document.createElement('a');
-            downloadLink.setAttribute('href', downloadData ? /** @type {?} */ (downloadData) : this.generateCanvasDataUrl(returnedDataType));
+            downloadLink.setAttribute('href', downloadData ? ( /** @type {?} */(downloadData)) : this.generateCanvasDataUrl(returnedDataType));
             /** @type {?} */
             var fileName = customFileName ? customFileName
                 : (this.downloadedFileName ? this.downloadedFileName : "canvas_drawing_" + new Date().valueOf());
@@ -1652,7 +1772,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         else {
             // IE-specific code
             if (downloadData) {
-                this._saveCanvasBlob(/** @type {?} */ (downloadData), returnedDataType);
+                this._saveCanvasBlob(( /** @type {?} */(downloadData)), returnedDataType);
             }
             else {
                 this.generateCanvasBlob(this._saveCanvasBlob.bind(this), returnedDataType);
@@ -1661,6 +1781,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Save the canvas blob (IE) locally
+     * @private
      * @param {?} blob
      * @param {?=} returnedDataType
      * @return {?}
@@ -1698,14 +1819,18 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     CanvasWhiteboardComponent.prototype.saveLocal = function (returnedDataType) {
         var _this = this;
         if (returnedDataType === void 0) { returnedDataType = "image/png"; }
-        this.generateCanvasData(function (generatedData) {
+        this.generateCanvasData(( /**
+         * @param {?} generatedData
+         * @return {?}
+         */function (generatedData) {
             _this.onSave.emit(generatedData);
             if (_this.shouldDownloadDrawing) {
                 _this.downloadCanvasImage(returnedDataType, generatedData);
             }
-        });
+        }));
     };
     /**
+     * @private
      * @param {?} returnedDataType
      * @return {?}
      */
@@ -1759,6 +1884,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     /**
      * Unsubscribe from a given subscription if it is active
+     * @private
      * @param {?} subscription
      * @return {?}
      */
@@ -1767,6 +1893,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             subscription.unsubscribe();
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._generateUUID = function () {
@@ -1774,6 +1901,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             this._random4() + "-" + this._random4() + this._random4() + this._random4();
     };
     /**
+     * @private
      * @return {?}
      */
     CanvasWhiteboardComponent.prototype._random4 = function () {
@@ -1789,7 +1917,13 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         var _this = this;
         this._unsubscribe(this._resizeSubscription);
         this._unsubscribe(this._registeredShapesSubscription);
-        this._canvasWhiteboardServiceSubscriptions.forEach(function (subscription) { return _this._unsubscribe(subscription); });
+        this._canvasWhiteboardServiceSubscriptions.forEach(( /**
+         * @param {?} subscription
+         * @return {?}
+         */function (/**
+         * @param {?} subscription
+         * @return {?}
+         */ subscription) { return _this._unsubscribe(subscription); }));
     };
     return CanvasWhiteboardComponent;
 }());
@@ -1848,12 +1982,13 @@ CanvasWhiteboardComponent.propDecorators = {
     onBatchUpdate: [{ type: Output }],
     onImageLoaded: [{ type: Output }],
     onSave: [{ type: Output }],
-    canvas: [{ type: ViewChild, args: ['canvas',] }],
-    _incompleteShapesCanvas: [{ type: ViewChild, args: ['incompleteShapesCanvas',] }]
+    canvas: [{ type: ViewChild, args: ['canvas', { static: true },] }],
+    _incompleteShapesCanvas: [{ type: ViewChild, args: ['incompleteShapesCanvas', { static: true },] }]
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-selector.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardShapeSelectorComponent = /** @class */ (function () {
     /**
@@ -1922,7 +2057,8 @@ CanvasWhiteboardShapeSelectorComponent.propDecorators = {
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-colorpicker.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardColorPickerComponent = /** @class */ (function () {
     /**
@@ -2026,7 +2162,7 @@ CanvasWhiteboardColorPickerComponent.ctorParameters = function () { return [
 CanvasWhiteboardColorPickerComponent.propDecorators = {
     previewText: [{ type: Input }],
     selectedColor: [{ type: Input }],
-    canvas: [{ type: ViewChild, args: ['canvaswhiteboardcolorpicker',] }],
+    canvas: [{ type: ViewChild, args: ['canvaswhiteboardcolorpicker', { static: true },] }],
     showColorPicker: [{ type: Input }],
     onToggleColorPicker: [{ type: Output }],
     onColorSelected: [{ type: Output }],
@@ -2034,7 +2170,8 @@ CanvasWhiteboardColorPickerComponent.propDecorators = {
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-preview.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardShapePreviewComponent = /** @class */ (function () {
     function CanvasWhiteboardShapePreviewComponent() {
@@ -2050,7 +2187,7 @@ var CanvasWhiteboardShapePreviewComponent = /** @class */ (function () {
      * @return {?}
      */
     CanvasWhiteboardShapePreviewComponent.prototype.ngOnChanges = function (changes) {
-        if (changes["shapeConstructor"] || changes["shapeOptions"]) {
+        if (changes.shapeConstructor || changes.shapeOptions) {
             this.drawShapePreview();
         }
     };
@@ -2084,7 +2221,8 @@ CanvasWhiteboardShapePreviewComponent.propDecorators = {
 };
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/ng2-canvas-whiteboard.module.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var CanvasWhiteboardModule = /** @class */ (function () {
     function CanvasWhiteboardModule() {
@@ -2111,15 +2249,18 @@ CanvasWhiteboardModule.decorators = [
 ];
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/ng2-canvas-whiteboard.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: public_api.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: ng2-canvas-whiteboard.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Generated bundle index. Do not edit.
diff --git a/dist/modules/ng2-canvas-whiteboard.js b/dist/modules/ng2-canvas-whiteboard.js
index 59503607..cf5ce3e3 100644
--- a/dist/modules/ng2-canvas-whiteboard.js
+++ b/dist/modules/ng2-canvas-whiteboard.js
@@ -1,12 +1,13 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Injectable, Input, NgModule, NgZone, Output, ViewChild } from '@angular/core';
-import { BehaviorSubject, Subject, fromEvent } from 'rxjs/index';
+import { BehaviorSubject, Subject, fromEvent } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { cloneDeep } from 'lodash';
 import { CommonModule } from '@angular/common';
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-update.model.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @enum {number} */
 const CanvasWhiteboardUpdateType = {
@@ -18,6 +19,22 @@ CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.START] = 'START';
 CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.DRAG] = 'DRAG';
 CanvasWhiteboardUpdateType[CanvasWhiteboardUpdateType.STOP] = 'STOP';
 class CanvasWhiteboardUpdate {
+    /**
+     * @param {?=} x
+     * @param {?=} y
+     * @param {?=} type
+     * @param {?=} UUID
+     * @param {?=} selectedShape
+     * @param {?=} selectedShapeOptions
+     */
+    constructor(x, y, type, UUID, selectedShape, selectedShapeOptions) {
+        this.x = x;
+        this.y = y;
+        this.type = type;
+        this.UUID = UUID;
+        this.selectedShape = selectedShape;
+        this.selectedShapeOptions = selectedShapeOptions;
+    }
     /**
      * @param {?} json
      * @return {?}
@@ -35,22 +52,6 @@ class CanvasWhiteboardUpdate {
             return null;
         }
     }
-    /**
-     * @param {?=} x
-     * @param {?=} y
-     * @param {?=} type
-     * @param {?=} UUID
-     * @param {?=} selectedShape
-     * @param {?=} selectedShapeOptions
-     */
-    constructor(x, y, type, UUID, selectedShape, selectedShapeOptions) {
-        this.x = x;
-        this.y = y;
-        this.type = type;
-        this.UUID = UUID;
-        this.selectedShape = selectedShape;
-        this.selectedShapeOptions = selectedShapeOptions;
-    }
     /**
      * @return {?}
      */
@@ -72,7 +73,8 @@ class CanvasWhiteboardUpdate {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/template.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
 const DEFAULT_STYLES = `
@@ -171,7 +173,8 @@ const DEFAULT_STYLES = `
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardService {
     constructor() {
@@ -215,7 +218,8 @@ class CanvasWhiteboardService {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-point.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardPoint {
     /**
@@ -230,7 +234,8 @@ class CanvasWhiteboardPoint {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-options.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardShapeOptions {
     constructor() {
@@ -245,7 +250,8 @@ class CanvasWhiteboardShapeOptions {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * @abstract
@@ -260,6 +266,7 @@ class CanvasWhiteboardShape {
         this.options = options || new CanvasWhiteboardShapeOptions();
         this.isVisible = true;
     }
+    // noinspection TsLint
     /**
      * @param {?} update
      * @return {?}
@@ -270,7 +277,8 @@ class CanvasWhiteboardShape {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/circle-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CircleShape extends CanvasWhiteboardShape {
     /**
@@ -330,7 +338,8 @@ class CircleShape extends CanvasWhiteboardShape {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/rectangle-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class RectangleShape extends CanvasWhiteboardShape {
     /**
@@ -389,7 +398,8 @@ class RectangleShape extends CanvasWhiteboardShape {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/free-hand-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class FreeHandShape extends CanvasWhiteboardShape {
     /**
@@ -416,6 +426,11 @@ class FreeHandShape extends CanvasWhiteboardShape {
         context.moveTo(this.positionPoint.x, this.positionPoint.y);
         // Draw a dot
         context.lineTo(this.positionPoint.x + 1, this.positionPoint.y + 1);
+        // Normal fastest free hand drawing
+        // this.linePositions.forEach((linePosition) => {
+        //     context.lineTo(linePosition.x, linePosition.y);
+        // });
+        // Quadratic curves drawing
         /** @type {?} */
         let i = 0;
         while (i < this.linePositions.length) {
@@ -464,7 +479,8 @@ class FreeHandShape extends CanvasWhiteboardShape {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/smiley-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class SmileyShape extends CanvasWhiteboardShape {
     /**
@@ -541,7 +557,8 @@ class SmileyShape extends CanvasWhiteboardShape {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/star-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class StarShape extends CanvasWhiteboardShape {
     /**
@@ -623,7 +640,8 @@ class StarShape extends CanvasWhiteboardShape {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/line-shape.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class LineShape extends CanvasWhiteboardShape {
     /**
@@ -676,9 +694,9 @@ class LineShape extends CanvasWhiteboardShape {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// unsupported: template constraints.
 /**
  * @record
  * @template T
@@ -701,7 +719,11 @@ class CanvasWhiteboardShapeService {
      * @return {?}
      */
     getShapeConstructorFromShapeName(shapeName) {
-        return this.getCurrentRegisteredShapes().find((shape) => (new shape).getShapeName() === shapeName);
+        return this.getCurrentRegisteredShapes().find((/**
+         * @param {?} shape
+         * @return {?}
+         */
+        (shape) => (new shape).getShapeName() === shapeName));
     }
     /**
      * @return {?}
@@ -736,27 +758,39 @@ class CanvasWhiteboardShapeService {
      */
     registerShapes(shapes) {
         this._registeredShapesSubject.next(this.getCurrentRegisteredShapes()
-            .concat(shapes.filter((shape) => {
+            .concat(shapes.filter((/**
+         * @param {?} shape
+         * @return {?}
+         */
+        (shape) => {
             if (this.isRegisteredShape(shape)) {
                 console.warn(`You tried to register a shape:${shape}, but is has already been registered.`);
                 return false;
             }
             return true;
-        })));
+        }))));
     }
     /**
      * @param {?} shape
      * @return {?}
      */
     unregisterShape(shape) {
-        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter((registeredShape) => registeredShape !== shape));
+        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter((/**
+         * @param {?} registeredShape
+         * @return {?}
+         */
+        (registeredShape) => registeredShape !== shape)));
     }
     /**
      * @param {?} shapes
      * @return {?}
      */
     unregisterShapes(shapes) {
-        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter((shape) => shapes.indexOf(shape) === -1));
+        this._registeredShapesSubject.next(this.getCurrentRegisteredShapes().filter((/**
+         * @param {?} shape
+         * @return {?}
+         */
+        (shape) => shapes.indexOf(shape) === -1)));
     }
 }
 CanvasWhiteboardShapeService.decorators = [
@@ -767,7 +801,8 @@ CanvasWhiteboardShapeService.ctorParameters = () => [];
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardComponent {
     /**
@@ -816,7 +851,8 @@ class CanvasWhiteboardComponent {
         this._canDraw = true;
         this._clientDragging = false;
         this._updateHistory = [];
-        this._undoStack = [];
+        this._undoStack = []; // Stores the value of start and count for each continuous stroke
+        // Stores the value of start and count for each continuous stroke
         this._redoStack = [];
         this._batchUpdates = [];
         this._updatesNotDrawn = [];
@@ -876,6 +912,7 @@ class CanvasWhiteboardComponent {
      * For security reasons we must check each item on its own since if we iterate the keys
      * we may be injected with malicious values
      *
+     * @private
      * @param {?} options
      * @return {?}
      */
@@ -950,6 +987,7 @@ class CanvasWhiteboardComponent {
         }
     }
     /**
+     * @private
      * @param {?} property
      * @return {?}
      */
@@ -958,43 +996,74 @@ class CanvasWhiteboardComponent {
     }
     /**
      * Init global window listeners like resize and keydown
+     * @private
      * @return {?}
      */
     _initCanvasEventListeners() {
-        this.ngZone.runOutsideAngular(() => {
+        this.ngZone.runOutsideAngular((/**
+         * @return {?}
+         */
+        () => {
             this._resizeSubscription = fromEvent(window, 'resize')
                 .pipe(debounceTime(200), distinctUntilChanged())
-                .subscribe(() => {
-                this.ngZone.run(() => {
+                .subscribe((/**
+             * @return {?}
+             */
+            () => {
+                this.ngZone.run((/**
+                 * @return {?}
+                 */
+                () => {
                     this._redrawCanvasOnResize();
-                });
-            });
-        });
+                }));
+            }));
+        }));
         window.addEventListener("keydown", this._canvasKeyDown.bind(this), false);
     }
     /**
      * Subscribes to new signals in the canvas whiteboard service and executes methods accordingly
      * Because of circular publishing and subscribing, the canvas methods do not use the service when
      * local actions are completed (Ex. clicking undo from the button inside this component)
+     * @private
      * @return {?}
      */
     _initCanvasServiceObservables() {
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasDrawSubject$
-            .subscribe(updates => this.drawUpdates(updates)));
+            .subscribe((/**
+         * @param {?} updates
+         * @return {?}
+         */
+        updates => this.drawUpdates(updates))));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasClearSubject$
-            .subscribe(() => this.clearCanvas()));
+            .subscribe((/**
+         * @return {?}
+         */
+        () => this.clearCanvas())));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasUndoSubject$
-            .subscribe((updateUUD) => this._undoCanvas(updateUUD)));
+            .subscribe((/**
+         * @param {?} updateUUD
+         * @return {?}
+         */
+        (updateUUD) => this._undoCanvas(updateUUD))));
         this._canvasWhiteboardServiceSubscriptions.push(this._canvasWhiteboardService.canvasRedoSubject$
-            .subscribe((updateUUD) => this._redoCanvas(updateUUD)));
-        this._registeredShapesSubscription = this._canvasWhiteboardShapeService.registeredShapes$.subscribe((shapes) => {
+            .subscribe((/**
+         * @param {?} updateUUD
+         * @return {?}
+         */
+        (updateUUD) => this._redoCanvas(updateUUD))));
+        this._registeredShapesSubscription = this._canvasWhiteboardShapeService.registeredShapes$.subscribe((/**
+         * @param {?} shapes
+         * @return {?}
+         */
+        (shapes) => {
             if (!this.selectedShapeConstructor || !this._canvasWhiteboardShapeService.isRegisteredShape(this.selectedShapeConstructor)) {
                 this.selectedShapeConstructor = shapes[0];
             }
-        });
+        }));
     }
     /**
      * Calculate the canvas width and height from it's parent container width and height (use aspect ratio if needed)
+     * @private
      * @return {?}
      */
     _calculateCanvasWidthAndHeight() {
@@ -1010,6 +1079,7 @@ class CanvasWhiteboardComponent {
     }
     /**
      * Load an image and draw it on the canvas (if an image exists)
+     * @private
      * @param {?=} callbackFn A function that is called after the image loading is finished
      * @return {?} Emits a value when the image has been loaded.
      */
@@ -1022,11 +1092,14 @@ class CanvasWhiteboardComponent {
             return;
         }
         this._imageElement = new Image();
-        this._imageElement.addEventListener("load", () => {
+        this._imageElement.addEventListener("load", (/**
+         * @return {?}
+         */
+        () => {
             this._canDraw = true;
             callbackFn && callbackFn();
             this.onImageLoaded.emit(true);
-        });
+        }));
         this._imageElement.src = this.imageUrl;
     }
     /**
@@ -1050,6 +1123,7 @@ class CanvasWhiteboardComponent {
     /**
      * This method resets the state of the canvas and redraws it.
      * It calls a callback function after redrawing
+     * @private
      * @param {?=} callbackFn
      * @return {?}
      */
@@ -1062,19 +1136,23 @@ class CanvasWhiteboardComponent {
     }
     /**
      * Clears the canvas and redraws the image if the url exists.
+     * @private
      * @param {?=} callbackFn A function that is called after the background is redrawn
      * @return {?} Emits a value when the clearing is finished
      */
     _redrawBackground(callbackFn) {
         if (this.context) {
             if (this.imageUrl) {
-                this._loadImage(() => {
+                this._loadImage((/**
+                 * @return {?}
+                 */
+                () => {
                     this.context.save();
                     this._drawImage(this.context, this._imageElement, 0, 0, this.context.canvas.width, this.context.canvas.height, 0.5, 0.5);
                     this.context.restore();
                     this._drawMissingUpdates();
                     callbackFn && callbackFn();
-                });
+                }));
             }
             else {
                 this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
@@ -1084,6 +1162,7 @@ class CanvasWhiteboardComponent {
         }
     }
     /**
+     * @private
      * @return {?}
      */
     _drawStartingColor() {
@@ -1166,10 +1245,14 @@ class CanvasWhiteboardComponent {
      * @return {?}
      */
     undoLocal() {
-        this.undo((updateUUID) => {
+        this.undo((/**
+         * @param {?} updateUUID
+         * @return {?}
+         */
+        (updateUUID) => {
             this._redoStack.push(updateUUID);
             this.onUndo.emit(updateUUID);
-        });
+        }));
     }
     /**
      * This methods selects the last uuid prepares it for undoing (making the whole update sequence invisible)
@@ -1188,6 +1271,7 @@ class CanvasWhiteboardComponent {
     }
     /**
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid invisible
+     * @private
      * @param {?} updateUUID
      * @return {?}
      */
@@ -1207,10 +1291,14 @@ class CanvasWhiteboardComponent {
      * @return {?}
      */
     redoLocal() {
-        this.redo((updateUUID) => {
+        this.redo((/**
+         * @param {?} updateUUID
+         * @return {?}
+         */
+        (updateUUID) => {
             this._undoStack.push(updateUUID);
             this.onRedo.emit(updateUUID);
-        });
+        }));
     }
     /**
      * This methods selects the last uuid prepares it for redoing (making the whole update sequence visible)
@@ -1229,6 +1317,7 @@ class CanvasWhiteboardComponent {
     }
     /**
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid visible
+     * @private
      * @param {?} updateUUID
      * @return {?}
      */
@@ -1318,6 +1407,7 @@ class CanvasWhiteboardComponent {
      * If it is a touch event, get the touch positions
      * If we released the touch, the position will be placed in the changedTouches object
      * If it is not a touch event, use the original mouse event received
+     * @private
      * @param {?} eventData
      * @return {?}
      */
@@ -1347,6 +1437,7 @@ class CanvasWhiteboardComponent {
      * can reverse the mapping and get the same position as the one that
      * was drawn on this update.
      *
+     * @private
      * @param {?} update The CanvasWhiteboardUpdate object.
      * @return {?}
      */
@@ -1359,6 +1450,7 @@ class CanvasWhiteboardComponent {
      * If the ctrlKey or commandKey(macOS) was held and the keyCode is 89 (y), a redo action will be performed
      * If the ctrlKey or commandKey(macOS) was held and the keyCode is 83 (s) or 115(S), a save action will be performed
      *
+     * @private
      * @param {?} event The event that occurred.
      * @return {?}
      */
@@ -1380,6 +1472,7 @@ class CanvasWhiteboardComponent {
     }
     /**
      * On window resize, recalculate the canvas dimensions and redraw the history
+     * @private
      * @return {?}
      */
     _redrawCanvasOnResize() {
@@ -1388,16 +1481,24 @@ class CanvasWhiteboardComponent {
     }
     /**
      * Redraw the saved history after resetting the canvas state
+     * @private
      * @return {?}
      */
     _redrawHistory() {
         /** @type {?} */
         let updatesToDraw = [].concat(this._updateHistory);
-        this._removeCanvasData(() => {
-            updatesToDraw.forEach((update) => {
+        this._removeCanvasData((/**
+         * @return {?}
+         */
+        () => {
+            updatesToDraw.forEach((/**
+             * @param {?} update
+             * @return {?}
+             */
+            (update) => {
                 this._draw(update);
-            });
-        });
+            }));
+        }));
     }
     /**
      * Draws a CanvasWhiteboardUpdate object on the canvas.
@@ -1409,6 +1510,7 @@ class CanvasWhiteboardComponent {
      * Afterwards the context is used to draw the shape on the canvas.
      * This function saves the last X and Y coordinates that were drawn.
      *
+     * @private
      * @param {?} update The update object.
      * @return {?}
      */
@@ -1443,17 +1545,23 @@ class CanvasWhiteboardComponent {
         }
     }
     /**
+     * @private
      * @return {?}
      */
     _drawIncompleteShapes() {
         this._resetIncompleteShapeCanvas();
-        this._incompleteShapesMap.forEach((shape) => {
+        this._incompleteShapesMap.forEach((/**
+         * @param {?} shape
+         * @return {?}
+         */
+        (shape) => {
             if (shape.isVisible) {
                 shape.draw(this._incompleteShapesCanvasContext);
             }
-        });
+        }));
     }
     /**
+     * @private
      * @param {?} shape
      * @return {?}
      */
@@ -1464,6 +1572,7 @@ class CanvasWhiteboardComponent {
         }
     }
     /**
+     * @private
      * @return {?}
      */
     _resetIncompleteShapeCanvas() {
@@ -1476,15 +1585,23 @@ class CanvasWhiteboardComponent {
      * @return {?}
      */
     drawAllShapes() {
-        this._redrawBackground(() => {
-            this._shapesMap.forEach((shape) => {
+        this._redrawBackground((/**
+         * @return {?}
+         */
+        () => {
+            this._shapesMap.forEach((/**
+             * @param {?} shape
+             * @return {?}
+             */
+            (shape) => {
                 if (shape.isVisible) {
                     shape.draw(this.context);
                 }
-            });
-        });
+            }));
+        }));
     }
     /**
+     * @private
      * @param {?} update
      * @return {?}
      */
@@ -1515,17 +1632,21 @@ class CanvasWhiteboardComponent {
      * multiple updates are sent at the same time). If this method is called, after 100 ms all updates
      * that were made at that time will be packed up together and sent to the receiver.
      *
+     * @private
      * @param {?} update The update object.
      * @return {?} Emits an Array of Updates when the batch.
      */
     _prepareUpdateForBatchDispatch(update) {
         this._batchUpdates.push(cloneDeep(update));
         if (!this._updateTimeout) {
-            this._updateTimeout = setTimeout(() => {
+            this._updateTimeout = setTimeout((/**
+             * @return {?}
+             */
+            () => {
                 this.onBatchUpdate.emit(this._batchUpdates);
                 this._batchUpdates = [];
                 this._updateTimeout = null;
-            }, this.batchUpdateTimeoutDuration);
+            }), this.batchUpdateTimeoutDuration);
         }
     }
     ;
@@ -1538,9 +1659,13 @@ class CanvasWhiteboardComponent {
     drawUpdates(updates) {
         if (this._canDraw) {
             this._drawMissingUpdates();
-            updates.forEach((update) => {
+            updates.forEach((/**
+             * @param {?} update
+             * @return {?}
+             */
+            (update) => {
                 this._draw(update);
-            });
+            }));
         }
         else {
             this._updatesNotDrawn = this._updatesNotDrawn.concat(updates);
@@ -1549,6 +1674,7 @@ class CanvasWhiteboardComponent {
     ;
     /**
      * Draw any missing updates that were received before the image was loaded
+     * @private
      * @return {?}
      */
     _drawMissingUpdates() {
@@ -1556,14 +1682,19 @@ class CanvasWhiteboardComponent {
             /** @type {?} */
             let updatesToDraw = this._updatesNotDrawn;
             this._updatesNotDrawn = [];
-            updatesToDraw.forEach((update) => {
+            updatesToDraw.forEach((/**
+             * @param {?} update
+             * @return {?}
+             */
+            (update) => {
                 this._draw(update);
-            });
+            }));
         }
     }
     /**
      * Draws an image on the canvas
      *
+     * @private
      * @param {?} context The context used to draw the image on the canvas.
      * @param {?} image The image to draw.
      * @param {?} x The X coordinate for the starting draw position.
@@ -1667,14 +1798,23 @@ class CanvasWhiteboardComponent {
         if (typeof this.context.canvas.toBlob !== "undefined") {
             toBlobMethod = this.context.canvas.toBlob.bind(this.context.canvas);
         }
-        else if (typeof this.context.canvas.msToBlob !== "undefined") {
-            toBlobMethod = (callback) => {
-                callback && callback(this.context.canvas.msToBlob());
-            };
+        else if (typeof ((/** @type {?} */ (this.context.canvas))).msToBlob !== "undefined") {
+            // For IE
+            toBlobMethod = (/**
+             * @param {?} callback
+             * @return {?}
+             */
+            (callback) => {
+                callback && callback(((/** @type {?} */ (this.context.canvas))).msToBlob());
+            });
         }
-        toBlobMethod && toBlobMethod((blob) => {
+        toBlobMethod && toBlobMethod((/**
+         * @param {?} blob
+         * @return {?}
+         */
+        (blob) => {
             callbackFn && callbackFn(blob, returnedDataType);
-        }, returnedDataType, returnedDataQuality);
+        }), returnedDataType, returnedDataQuality);
     }
     /**
      * Generate a canvas image representation and download it locally
@@ -1690,7 +1830,7 @@ class CanvasWhiteboardComponent {
         if (window.navigator.msSaveOrOpenBlob === undefined) {
             /** @type {?} */
             let downloadLink = document.createElement('a');
-            downloadLink.setAttribute('href', downloadData ? /** @type {?} */ (downloadData) : this.generateCanvasDataUrl(returnedDataType));
+            downloadLink.setAttribute('href', downloadData ? (/** @type {?} */ (downloadData)) : this.generateCanvasDataUrl(returnedDataType));
             /** @type {?} */
             let fileName = customFileName ? customFileName
                 : (this.downloadedFileName ? this.downloadedFileName : "canvas_drawing_" + new Date().valueOf());
@@ -1702,7 +1842,7 @@ class CanvasWhiteboardComponent {
         else {
             // IE-specific code
             if (downloadData) {
-                this._saveCanvasBlob(/** @type {?} */ (downloadData), returnedDataType);
+                this._saveCanvasBlob((/** @type {?} */ (downloadData)), returnedDataType);
             }
             else {
                 this.generateCanvasBlob(this._saveCanvasBlob.bind(this), returnedDataType);
@@ -1711,6 +1851,7 @@ class CanvasWhiteboardComponent {
     }
     /**
      * Save the canvas blob (IE) locally
+     * @private
      * @param {?} blob
      * @param {?=} returnedDataType
      * @return {?}
@@ -1743,14 +1884,19 @@ class CanvasWhiteboardComponent {
      * @return {?}
      */
     saveLocal(returnedDataType = "image/png") {
-        this.generateCanvasData((generatedData) => {
+        this.generateCanvasData((/**
+         * @param {?} generatedData
+         * @return {?}
+         */
+        (generatedData) => {
             this.onSave.emit(generatedData);
             if (this.shouldDownloadDrawing) {
                 this.downloadCanvasImage(returnedDataType, generatedData);
             }
-        });
+        }));
     }
     /**
+     * @private
      * @param {?} returnedDataType
      * @return {?}
      */
@@ -1804,6 +1950,7 @@ class CanvasWhiteboardComponent {
     }
     /**
      * Unsubscribe from a given subscription if it is active
+     * @private
      * @param {?} subscription
      * @return {?}
      */
@@ -1812,6 +1959,7 @@ class CanvasWhiteboardComponent {
             subscription.unsubscribe();
     }
     /**
+     * @private
      * @return {?}
      */
     _generateUUID() {
@@ -1819,6 +1967,7 @@ class CanvasWhiteboardComponent {
             this._random4() + "-" + this._random4() + this._random4() + this._random4();
     }
     /**
+     * @private
      * @return {?}
      */
     _random4() {
@@ -1833,7 +1982,11 @@ class CanvasWhiteboardComponent {
     ngOnDestroy() {
         this._unsubscribe(this._resizeSubscription);
         this._unsubscribe(this._registeredShapesSubscription);
-        this._canvasWhiteboardServiceSubscriptions.forEach(subscription => this._unsubscribe(subscription));
+        this._canvasWhiteboardServiceSubscriptions.forEach((/**
+         * @param {?} subscription
+         * @return {?}
+         */
+        subscription => this._unsubscribe(subscription)));
     }
 }
 CanvasWhiteboardComponent.decorators = [
@@ -1950,13 +2103,14 @@ CanvasWhiteboardComponent.propDecorators = {
     onBatchUpdate: [{ type: Output }],
     onImageLoaded: [{ type: Output }],
     onSave: [{ type: Output }],
-    canvas: [{ type: ViewChild, args: ['canvas',] }],
-    _incompleteShapesCanvas: [{ type: ViewChild, args: ['incompleteShapesCanvas',] }]
+    canvas: [{ type: ViewChild, args: ['canvas', { static: true },] }],
+    _incompleteShapesCanvas: [{ type: ViewChild, args: ['incompleteShapesCanvas', { static: true },] }]
 };
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-selector.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardShapeSelectorComponent {
     /**
@@ -2053,7 +2207,8 @@ CanvasWhiteboardShapeSelectorComponent.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/canvas-whiteboard-colorpicker.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardColorPickerComponent {
     /**
@@ -2209,7 +2364,7 @@ CanvasWhiteboardColorPickerComponent.ctorParameters = () => [
 CanvasWhiteboardColorPickerComponent.propDecorators = {
     previewText: [{ type: Input }],
     selectedColor: [{ type: Input }],
-    canvas: [{ type: ViewChild, args: ['canvaswhiteboardcolorpicker',] }],
+    canvas: [{ type: ViewChild, args: ['canvaswhiteboardcolorpicker', { static: true },] }],
     showColorPicker: [{ type: Input }],
     onToggleColorPicker: [{ type: Output }],
     onColorSelected: [{ type: Output }],
@@ -2218,7 +2373,8 @@ CanvasWhiteboardColorPickerComponent.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/shapes/canvas-whiteboard-shape-preview.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardShapePreviewComponent {
     /**
@@ -2232,7 +2388,7 @@ class CanvasWhiteboardShapePreviewComponent {
      * @return {?}
      */
     ngOnChanges(changes) {
-        if (changes["shapeConstructor"] || changes["shapeOptions"]) {
+        if (changes.shapeConstructor || changes.shapeOptions) {
             this.drawShapePreview();
         }
     }
@@ -2273,7 +2429,8 @@ CanvasWhiteboardShapePreviewComponent.propDecorators = {
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/ng2-canvas-whiteboard.module.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CanvasWhiteboardModule {
 }
@@ -2298,17 +2455,20 @@ CanvasWhiteboardModule.decorators = [
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: src/ng2-canvas-whiteboard.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: public_api.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ * Generated from: ng2-canvas-whiteboard.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /**
  * Generated bundle index. Do not edit.
diff --git a/dist/ng2-canvas-whiteboard.metadata.json b/dist/ng2-canvas-whiteboard.metadata.json
index 602ff959..0742c756 100644
--- a/dist/ng2-canvas-whiteboard.metadata.json
+++ b/dist/ng2-canvas-whiteboard.metadata.json
@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CanvasWhiteboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"canvas-whiteboard","template":"\n        <div class=\"canvas_wrapper_div\">\n            <div class=\"canvas_whiteboard_buttons\">\n                <canvas-whiteboard-shape-selector *ngIf=\"shapeSelectorEnabled\"\n                                                  [showShapeSelector]=\"showShapeSelector\"\n                                                  [selectedShapeConstructor]=\"selectedShapeConstructor\"\n                                                  [shapeOptions]=\"generateShapePreviewOptions()\"\n                                                  (onToggleShapeSelector)=\"toggleShapeSelector($event)\"\n                                                  (onShapeSelected)=\"selectShape($event)\"></canvas-whiteboard-shape-selector>\n\n                <canvas-whiteboard-colorpicker *ngIf=\"colorPickerEnabled\"\n                                               [previewText]=\"'Fill'\"\n                                               [showColorPicker]=\"showFillColorPicker\"\n                                               [selectedColor]=\"fillColor\"\n                                               (onToggleColorPicker)=\"toggleFillColorPicker($event)\"\n                                               (onColorSelected)=\"changeFillColor($event)\">\n                </canvas-whiteboard-colorpicker>\n\n                <canvas-whiteboard-colorpicker *ngIf=\"colorPickerEnabled\"\n                                               [previewText]=\"'Stroke'\"\n                                               [showColorPicker]=\"showStrokeColorPicker\"\n                                               [selectedColor]=\"strokeColor\"\n                                               (onToggleColorPicker)=\"toggleStrokeColorPicker($event)\"\n                                               (onColorSelected)=\"changeStrokeColor($event)\">\n                </canvas-whiteboard-colorpicker>\n\n\n                <button *ngIf=\"drawButtonEnabled\" (click)=\"toggleDrawingEnabled()\"\n                        [class.canvas_whiteboard_button-draw_animated]=\"getDrawingEnabled()\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-draw\" type=\"button\">\n                    <i [class]=\"drawButtonClass\" aria-hidden=\"true\"></i> {{drawButtonText}}\n                </button>\n\n                <button *ngIf=\"clearButtonEnabled\" (click)=\"clearCanvasLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-clear\">\n                    <i [class]=\"clearButtonClass\" aria-hidden=\"true\"></i> {{clearButtonText}}\n                </button>\n\n                <button *ngIf=\"undoButtonEnabled\" (click)=\"undoLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-undo\">\n                    <i [class]=\"undoButtonClass\" aria-hidden=\"true\"></i> {{undoButtonText}}\n                </button>\n\n                <button *ngIf=\"redoButtonEnabled\" (click)=\"redoLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-redo\">\n                    <i [class]=\"redoButtonClass\" aria-hidden=\"true\"></i> {{redoButtonText}}\n                </button>\n                <button *ngIf=\"saveDataButtonEnabled\" (click)=\"saveLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-save\">\n                    <i [class]=\"saveDataButtonClass\" aria-hidden=\"true\"></i> {{saveDataButtonText}}\n                </button>\n            </div>\n            <canvas #canvas class=\"canvas_whiteboard\"></canvas>\n            <canvas #incompleteShapesCanvas class=\"incomplete_shapes_canvas_whiteboard\"\n                    (mousedown)=\"canvasUserEvents($event)\" (mouseup)=\"canvasUserEvents($event)\"\n                    (mousemove)=\"canvasUserEvents($event)\" (mouseout)=\"canvasUserEvents($event)\"\n                    (touchstart)=\"canvasUserEvents($event)\" (touchmove)=\"canvasUserEvents($event)\"\n                    (touchend)=\"canvasUserEvents($event)\" (touchcancel)=\"canvasUserEvents($event)\"></canvas>\n        </div>\n    ","styles":[{"__symbolic":"reference","name":"DEFAULT_STYLES"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"batchUpdateTimeoutDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"drawButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"clearButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"undoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"redoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"saveDataButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"drawButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"clearButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"undoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"redoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"saveDataButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"drawButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"clearButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"undoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"redoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"saveDataButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"shouldDownloadDrawing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"colorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"lineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"strokeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"startingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"scaleFactor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"drawingEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"showStrokeColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"showFillColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"downloadedFileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"lineJoin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"lineCap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"shapeSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"fillColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":5}}]}],"onUndo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":5}}]}],"onRedo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":5}}]}],"onBatchUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":5}}]}],"onImageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"onSave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":142,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":144,"character":5},"arguments":["canvas"]}]}],"_incompleteShapesCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":147,"character":5},"arguments":["incompleteShapesCanvas"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":175,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":176,"character":41},{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"_initInputsFromOptions":[{"__symbolic":"method"}],"_isNullOrUndefined":[{"__symbolic":"method"}],"_initCanvasEventListeners":[{"__symbolic":"method"}],"_initCanvasServiceObservables":[{"__symbolic":"method"}],"_calculateCanvasWidthAndHeight":[{"__symbolic":"method"}],"_loadImage":[{"__symbolic":"method"}],"clearCanvasLocal":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"_removeCanvasData":[{"__symbolic":"method"}],"_redrawBackground":[{"__symbolic":"method"}],"_drawStartingColor":[{"__symbolic":"method"}],"getShouldDraw":[{"__symbolic":"method"}],"getDrawingEnabled":[{"__symbolic":"method"}],"toggleDrawingEnabled":[{"__symbolic":"method"}],"setDrawingEnabled":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"changeFillColor":[{"__symbolic":"method"}],"undoLocal":[{"__symbolic":"method"}],"undo":[{"__symbolic":"method"}],"_undoCanvas":[{"__symbolic":"method"}],"redoLocal":[{"__symbolic":"method"}],"redo":[{"__symbolic":"method"}],"_redoCanvas":[{"__symbolic":"method"}],"canvasUserEvents":[{"__symbolic":"method"}],"_getCanvasEventPosition":[{"__symbolic":"method"}],"_prepareToSendUpdate":[{"__symbolic":"method"}],"_canvasKeyDown":[{"__symbolic":"method"}],"_redrawCanvasOnResize":[{"__symbolic":"method"}],"_redrawHistory":[{"__symbolic":"method"}],"_draw":[{"__symbolic":"method"}],"_drawIncompleteShapes":[{"__symbolic":"method"}],"_swapCompletedShapeToActualCanvas":[{"__symbolic":"method"}],"_resetIncompleteShapeCanvas":[{"__symbolic":"method"}],"drawAllShapes":[{"__symbolic":"method"}],"_addCurrentShapeDataToAnUpdate":[{"__symbolic":"method"}],"generateShapePreviewOptions":[{"__symbolic":"method"}],"_prepareUpdateForBatchDispatch":[{"__symbolic":"method"}],"drawUpdates":[{"__symbolic":"method"}],"_drawMissingUpdates":[{"__symbolic":"method"}],"_drawImage":[{"__symbolic":"method"}],"generateCanvasDataUrl":[{"__symbolic":"method"}],"generateCanvasBlob":[{"__symbolic":"method"}],"downloadCanvasImage":[{"__symbolic":"method"}],"_saveCanvasBlob":[{"__symbolic":"method"}],"generateCanvasData":[{"__symbolic":"method"}],"saveLocal":[{"__symbolic":"method"}],"_generateDataTypeString":[{"__symbolic":"method"}],"toggleStrokeColorPicker":[{"__symbolic":"method"}],"toggleFillColorPicker":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}],"selectShape":[{"__symbolic":"method"}],"getDrawingHistory":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_generateUUID":[{"__symbolic":"method"}],"_random4":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CanvasWhiteboardUpdate":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"error","message":"Could not resolve type","line":37,"character":23,"context":{"typeName":"CanvasWhiteboardUpdateType"},"module":"./src/canvas-whiteboard-update.model"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"stringify":[{"__symbolic":"method"}]}},"CanvasWhiteboardService":{"__symbolic":"class","members":{"drawCanvas":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"undoCanvas":[{"__symbolic":"method"}],"redoCanvas":[{"__symbolic":"method"}]}},"CanvasWhiteboardOptions":{"__symbolic":"interface"},"CanvasWhiteboardPoint":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}]}},"CanvasWhiteboardShape":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"getShapeName":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"onStopReceived":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeOptions":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"CanvasWhiteboardShapeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getShapeConstructorFromShapeName":[{"__symbolic":"method"}],"getCurrentRegisteredShapes":[{"__symbolic":"method"}],"isRegisteredShape":[{"__symbolic":"method"}],"registerShape":[{"__symbolic":"method"}],"registerShapes":[{"__symbolic":"method"}],"unregisterShape":[{"__symbolic":"method"}],"unregisterShapes":[{"__symbolic":"method"}]}},"RectangleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}]}},"CircleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"calculateRadius":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-selector","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n        <div *ngIf=\"!showShapeSelector\" (click)=\"toggleShapeSelector($event)\"\n             class=\"canvas-whiteboard-shape-selector-selected-preview\">\n            <canvas-whiteboard-shape-preview [shapeConstructor]=\"selectedShapeConstructor\"\n                                             [shapeOptions]=\"shapeOptions\"></canvas-whiteboard-shape-preview>\n        </div>\n        <div class=\"canvas-whiteboard-shape-selector-wrapper\" *ngIf=\"showShapeSelector\">\n            <canvas-whiteboard-shape-preview *ngFor=\"let shapeConstructor of registeredShapes$ | async\"\n                                             [shapeConstructor]=\"shapeConstructor\"\n                                             [shapeOptions]=\"shapeOptions\"\n                                             (click)=\"selectShape(shapeConstructor)\"></canvas-whiteboard-shape-preview>\n        </div>\n    ","styles":["\n        .canvas-whiteboard-shape-selector-selected-preview {\n            vertical-align: bottom;\n            display: inline-block;\n        }\n\n        .canvas-whiteboard-shape-selector-wrapper {\n            display: block;\n            padding: 4px;\n            border: 1px solid #afafaf;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-shape-selector-wrapper {\n            }\n        }\n    "]}]}],"members":{"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"selectedShapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"onToggleShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"onShapeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":59,"character":37},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"selectShape":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}]}},"CanvasWhiteboardColorPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"canvas-whiteboard-colorpicker","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n        <div [hidden]=\"showColorPicker\" class=\"canvas-whiteboard-colorpicker-input\"\n               (click)=\"toggleColorPicker($event)\">\n               <div class=\"selected-color-type-wrapper\">{{previewText}}</div>\n               <div class=\"selected-color-preview\" [style.background]=\"selectedColor\"></div>\n        </div>\n        <div [hidden]=\"!showColorPicker\" class=\"canvas-whiteboard-colorpicker-wrapper\">\n            <div (click)=\"selectColor('transparent')\" class=\"transparent-color\">Transparent</div>\n            <canvas #canvaswhiteboardcolorpicker class=\"canvas-whiteboard-colorpicker\" width=\"284\" height=\"155\"\n                    (click)=\"selectColor(determineColorFromCanvas($event))\"></canvas>\n        </div>\n    ","styles":["\n        .selected-color-preview {\n            width: 100%;\n            height: 20%;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n        }\n        \n        .selected-color-type-wrapper {\n            display: inline-block;\n            height: 100%;\n            width: 100%;\n            text-align: center;\n            font-size: 14px;\n            color: #000;\n        }\n        \n        .transparent-color {\n            font-size: 14px;\n        }\n        \n        .canvas-whiteboard-colorpicker-wrapper {\n            border: 1px solid #afafaf;\n            color: #000;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-colorpicker-wrapper {\n                position: absolute;\n            }\n        }\n\n        .canvas-whiteboard-colorpicker-input {\n            display: inline-block;\n            position:relative;\n            width: 44px;\n            height: 44px;\n            margin: 5px;\n            cursor: pointer;\n            color: #000;\n        }\n    "]}]}],"members":{"previewText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":5},"arguments":["canvaswhiteboardcolorpicker"]}]}],"showColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"onToggleColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":5}}]}],"onColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":5}}]}],"onSecondaryColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"createColorPalette":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleColorPicker":[{"__symbolic":"method"}],"determineColorFromCanvas":[{"__symbolic":"method"}],"selectColor":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapePreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-preview","template":"\n        <canvas #canvasWhiteboardShapePreview width=\"50px\" height=\"50px\"\n                class=\"canvas-whiteboard-shape-preview-canvas\"></canvas>\n    ","styles":["\n        .canvas-whiteboard-shape-preview-canvas {\n            cursor: pointer;\n        }\n    "]}]}],"members":{"shapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":5},"arguments":["canvasWhiteboardShapePreview"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"drawShapePreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":8}],"declarations":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardColorPickerComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeSelectorComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapePreviewComponent"}],"providers":[{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}],"exports":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"}]}]}],"members":{}},"DEFAULT_STYLES":"\n.canvas_whiteboard_button {\n    display: inline-block;\n    outline: 0px;\n    padding-top: 7px;\n    margin-bottom: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.42857143;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    -ms-touch-action: manipulation;\n    touch-action: manipulation;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    background-image: none;\n    border: 1px solid transparent;\n    border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n    z-index: 3;\n}\n\n@media (max-width: 400px) {\n     .canvas_whiteboard_buttons {\n            position: absolute;\n            z-inde\n            top: 0;\n            width: 100%;\n            text-align: center;\n      }\n}\n        \n@media (min-width: 401px) { \n    .canvas_whiteboard_buttons {\n        position: absolute;\n        right: 0%;\n        color: #fff;\n    }\n}\n\n.canvas_whiteboard_buttons {\n    padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n    margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n    -webkit-animation: pulsate 1s ease-out;\n    -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n    0% {\n        -webkit-transform: scale(0.1, 0.1);\n        opacity: 0.0;\n    }\n    50% {\n        opacity: 1.0;\n    }\n    100% {\n        -webkit-transform: scale(1.2, 1.2);\n        opacity: 0.0;\n    }\n}\n.canvas_wrapper_div {\n    width: 100%;\n    height: 100%;\n    border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n    padding-top: 5px;\n}\n\n.canvas_whiteboard {\n    position: absolute;\n    z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n    position: absolute;\n    z-index: 2;\n}\n\n"},"origins":{"CanvasWhiteboardComponent":"./src/canvas-whiteboard.component","CanvasWhiteboardUpdate":"./src/canvas-whiteboard-update.model","CanvasWhiteboardService":"./src/canvas-whiteboard.service","CanvasWhiteboardOptions":"./src/canvas-whiteboard-options","CanvasWhiteboardPoint":"./src/canvas-whiteboard-point","CanvasWhiteboardShape":"./src/shapes/canvas-whiteboard-shape","CanvasWhiteboardShapeOptions":"./src/shapes/canvas-whiteboard-shape-options","CanvasWhiteboardShapeService":"./src/shapes/canvas-whiteboard-shape.service","RectangleShape":"./src/shapes/rectangle-shape","CircleShape":"./src/shapes/circle-shape","CanvasWhiteboardShapeSelectorComponent":"./src/shapes/canvas-whiteboard-shape-selector.component","CanvasWhiteboardColorPickerComponent":"./src/canvas-whiteboard-colorpicker.component","CanvasWhiteboardShapePreviewComponent":"./src/shapes/canvas-whiteboard-shape-preview.component","CanvasWhiteboardModule":"./src/ng2-canvas-whiteboard.module","DEFAULT_STYLES":"./src/template"},"importAs":"ng2-canvas-whiteboard"}
\ No newline at end of file
+{"__symbolic":"module","version":4,"metadata":{"CanvasWhiteboardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"canvas-whiteboard","template":"\n        <div class=\"canvas_wrapper_div\">\n            <div class=\"canvas_whiteboard_buttons\">\n                <canvas-whiteboard-shape-selector *ngIf=\"shapeSelectorEnabled\"\n                                                  [showShapeSelector]=\"showShapeSelector\"\n                                                  [selectedShapeConstructor]=\"selectedShapeConstructor\"\n                                                  [shapeOptions]=\"generateShapePreviewOptions()\"\n                                                  (onToggleShapeSelector)=\"toggleShapeSelector($event)\"\n                                                  (onShapeSelected)=\"selectShape($event)\"></canvas-whiteboard-shape-selector>\n\n                <canvas-whiteboard-colorpicker *ngIf=\"colorPickerEnabled\"\n                                               [previewText]=\"'Fill'\"\n                                               [showColorPicker]=\"showFillColorPicker\"\n                                               [selectedColor]=\"fillColor\"\n                                               (onToggleColorPicker)=\"toggleFillColorPicker($event)\"\n                                               (onColorSelected)=\"changeFillColor($event)\">\n                </canvas-whiteboard-colorpicker>\n\n                <canvas-whiteboard-colorpicker *ngIf=\"colorPickerEnabled\"\n                                               [previewText]=\"'Stroke'\"\n                                               [showColorPicker]=\"showStrokeColorPicker\"\n                                               [selectedColor]=\"strokeColor\"\n                                               (onToggleColorPicker)=\"toggleStrokeColorPicker($event)\"\n                                               (onColorSelected)=\"changeStrokeColor($event)\">\n                </canvas-whiteboard-colorpicker>\n\n\n                <button *ngIf=\"drawButtonEnabled\" (click)=\"toggleDrawingEnabled()\"\n                        [class.canvas_whiteboard_button-draw_animated]=\"getDrawingEnabled()\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-draw\" type=\"button\">\n                    <i [class]=\"drawButtonClass\" aria-hidden=\"true\"></i> {{drawButtonText}}\n                </button>\n\n                <button *ngIf=\"clearButtonEnabled\" (click)=\"clearCanvasLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-clear\">\n                    <i [class]=\"clearButtonClass\" aria-hidden=\"true\"></i> {{clearButtonText}}\n                </button>\n\n                <button *ngIf=\"undoButtonEnabled\" (click)=\"undoLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-undo\">\n                    <i [class]=\"undoButtonClass\" aria-hidden=\"true\"></i> {{undoButtonText}}\n                </button>\n\n                <button *ngIf=\"redoButtonEnabled\" (click)=\"redoLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-redo\">\n                    <i [class]=\"redoButtonClass\" aria-hidden=\"true\"></i> {{redoButtonText}}\n                </button>\n                <button *ngIf=\"saveDataButtonEnabled\" (click)=\"saveLocal()\" type=\"button\"\n                        class=\"canvas_whiteboard_button canvas_whiteboard_button-save\">\n                    <i [class]=\"saveDataButtonClass\" aria-hidden=\"true\"></i> {{saveDataButtonText}}\n                </button>\n            </div>\n            <canvas #canvas class=\"canvas_whiteboard\"></canvas>\n            <canvas #incompleteShapesCanvas class=\"incomplete_shapes_canvas_whiteboard\"\n                    (mousedown)=\"canvasUserEvents($event)\" (mouseup)=\"canvasUserEvents($event)\"\n                    (mousemove)=\"canvasUserEvents($event)\" (mouseout)=\"canvasUserEvents($event)\"\n                    (touchstart)=\"canvasUserEvents($event)\" (touchmove)=\"canvasUserEvents($event)\"\n                    (touchend)=\"canvasUserEvents($event)\" (touchcancel)=\"canvasUserEvents($event)\"></canvas>\n        </div>\n    ","styles":[{"__symbolic":"reference","name":"DEFAULT_STYLES"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"batchUpdateTimeoutDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"imageUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":5}}]}],"aspectRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"drawButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"clearButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"undoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"redoButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"saveDataButtonClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"drawButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"clearButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"undoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"redoButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"saveDataButtonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"drawButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"clearButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"undoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"redoButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"saveDataButtonEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"shouldDownloadDrawing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"colorPickerEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"lineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"strokeColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"startingColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"scaleFactor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"drawingEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"showStrokeColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"showFillColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"downloadedFileName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"lineJoin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"lineCap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"shapeSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"fillColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":137,"character":5}}]}],"onUndo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":5}}]}],"onRedo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":5}}]}],"onBatchUpdate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":140,"character":5}}]}],"onImageLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"onSave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":142,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":144,"character":5},"arguments":["canvas",{"static":true}]}]}],"_incompleteShapesCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":147,"character":5},"arguments":["incompleteShapesCanvas",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":175,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":176,"character":41},{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"_initInputsFromOptions":[{"__symbolic":"method"}],"_isNullOrUndefined":[{"__symbolic":"method"}],"_initCanvasEventListeners":[{"__symbolic":"method"}],"_initCanvasServiceObservables":[{"__symbolic":"method"}],"_calculateCanvasWidthAndHeight":[{"__symbolic":"method"}],"_loadImage":[{"__symbolic":"method"}],"clearCanvasLocal":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"_removeCanvasData":[{"__symbolic":"method"}],"_redrawBackground":[{"__symbolic":"method"}],"_drawStartingColor":[{"__symbolic":"method"}],"getShouldDraw":[{"__symbolic":"method"}],"getDrawingEnabled":[{"__symbolic":"method"}],"toggleDrawingEnabled":[{"__symbolic":"method"}],"setDrawingEnabled":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"changeStrokeColor":[{"__symbolic":"method"}],"changeFillColor":[{"__symbolic":"method"}],"undoLocal":[{"__symbolic":"method"}],"undo":[{"__symbolic":"method"}],"_undoCanvas":[{"__symbolic":"method"}],"redoLocal":[{"__symbolic":"method"}],"redo":[{"__symbolic":"method"}],"_redoCanvas":[{"__symbolic":"method"}],"canvasUserEvents":[{"__symbolic":"method"}],"_getCanvasEventPosition":[{"__symbolic":"method"}],"_prepareToSendUpdate":[{"__symbolic":"method"}],"_canvasKeyDown":[{"__symbolic":"method"}],"_redrawCanvasOnResize":[{"__symbolic":"method"}],"_redrawHistory":[{"__symbolic":"method"}],"_draw":[{"__symbolic":"method"}],"_drawIncompleteShapes":[{"__symbolic":"method"}],"_swapCompletedShapeToActualCanvas":[{"__symbolic":"method"}],"_resetIncompleteShapeCanvas":[{"__symbolic":"method"}],"drawAllShapes":[{"__symbolic":"method"}],"_addCurrentShapeDataToAnUpdate":[{"__symbolic":"method"}],"generateShapePreviewOptions":[{"__symbolic":"method"}],"_prepareUpdateForBatchDispatch":[{"__symbolic":"method"}],"drawUpdates":[{"__symbolic":"method"}],"_drawMissingUpdates":[{"__symbolic":"method"}],"_drawImage":[{"__symbolic":"method"}],"generateCanvasDataUrl":[{"__symbolic":"method"}],"generateCanvasBlob":[{"__symbolic":"method"}],"downloadCanvasImage":[{"__symbolic":"method"}],"_saveCanvasBlob":[{"__symbolic":"method"}],"generateCanvasData":[{"__symbolic":"method"}],"saveLocal":[{"__symbolic":"method"}],"_generateDataTypeString":[{"__symbolic":"method"}],"toggleStrokeColorPicker":[{"__symbolic":"method"}],"toggleFillColorPicker":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}],"selectShape":[{"__symbolic":"method"}],"getDrawingHistory":[{"__symbolic":"method"}],"_unsubscribe":[{"__symbolic":"method"}],"_generateUUID":[{"__symbolic":"method"}],"_random4":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CanvasWhiteboardUpdate":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"},{"__symbolic":"error","message":"Could not resolve type","line":37,"character":23,"context":{"typeName":"CanvasWhiteboardUpdateType"},"module":"./src/canvas-whiteboard-update.model"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"stringify":[{"__symbolic":"method"}]}},"CanvasWhiteboardService":{"__symbolic":"class","members":{"drawCanvas":[{"__symbolic":"method"}],"clearCanvas":[{"__symbolic":"method"}],"undoCanvas":[{"__symbolic":"method"}],"redoCanvas":[{"__symbolic":"method"}]}},"CanvasWhiteboardOptions":{"__symbolic":"interface"},"CanvasWhiteboardPoint":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}]}},"CanvasWhiteboardShape":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"}]}],"getShapeName":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"onStopReceived":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeOptions":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"CanvasWhiteboardShapeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getShapeConstructorFromShapeName":[{"__symbolic":"method"}],"getCurrentRegisteredShapes":[{"__symbolic":"method"}],"isRegisteredShape":[{"__symbolic":"method"}],"registerShape":[{"__symbolic":"method"}],"registerShapes":[{"__symbolic":"method"}],"unregisterShape":[{"__symbolic":"method"}],"unregisterShapes":[{"__symbolic":"method"}]}},"RectangleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"number"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}]}},"CircleShape":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"CanvasWhiteboardShape"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"CanvasWhiteboardPoint"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeOptions"},{"__symbolic":"reference","name":"number"}]}],"getShapeName":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"drawPreview":[{"__symbolic":"method"}],"onUpdateReceived":[{"__symbolic":"method"}],"calculateRadius":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapeSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-selector","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n        <div *ngIf=\"!showShapeSelector\" (click)=\"toggleShapeSelector($event)\"\n             class=\"canvas-whiteboard-shape-selector-selected-preview\">\n            <canvas-whiteboard-shape-preview [shapeConstructor]=\"selectedShapeConstructor\"\n                                             [shapeOptions]=\"shapeOptions\"></canvas-whiteboard-shape-preview>\n        </div>\n        <div class=\"canvas-whiteboard-shape-selector-wrapper\" *ngIf=\"showShapeSelector\">\n            <canvas-whiteboard-shape-preview *ngFor=\"let shapeConstructor of registeredShapes$ | async\"\n                                             [shapeConstructor]=\"shapeConstructor\"\n                                             [shapeOptions]=\"shapeOptions\"\n                                             (click)=\"selectShape(shapeConstructor)\"></canvas-whiteboard-shape-preview>\n        </div>\n    ","styles":["\n        .canvas-whiteboard-shape-selector-selected-preview {\n            vertical-align: bottom;\n            display: inline-block;\n        }\n\n        .canvas-whiteboard-shape-selector-wrapper {\n            display: block;\n            padding: 4px;\n            border: 1px solid #afafaf;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-shape-selector-wrapper {\n            }\n        }\n    "]}]}],"members":{"showShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"selectedShapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"onToggleShapeSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"onShapeSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":59,"character":37},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}]}],"selectShape":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleShapeSelector":[{"__symbolic":"method"}]}},"CanvasWhiteboardColorPickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"canvas-whiteboard-colorpicker","host":{"(document:mousedown)":"closeOnExternalClick($event)","(document:touchstart)":"closeOnExternalClick($event)","$quoted$":["(document:mousedown)","(document:touchstart)"]},"template":"\n        <div [hidden]=\"showColorPicker\" class=\"canvas-whiteboard-colorpicker-input\"\n               (click)=\"toggleColorPicker($event)\">\n               <div class=\"selected-color-type-wrapper\">{{previewText}}</div>\n               <div class=\"selected-color-preview\" [style.background]=\"selectedColor\"></div>\n        </div>\n        <div [hidden]=\"!showColorPicker\" class=\"canvas-whiteboard-colorpicker-wrapper\">\n            <div (click)=\"selectColor('transparent')\" class=\"transparent-color\">Transparent</div>\n            <canvas #canvaswhiteboardcolorpicker class=\"canvas-whiteboard-colorpicker\" width=\"284\" height=\"155\"\n                    (click)=\"selectColor(determineColorFromCanvas($event))\"></canvas>\n        </div>\n    ","styles":["\n        .selected-color-preview {\n            width: 100%;\n            height: 20%;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n        }\n        \n        .selected-color-type-wrapper {\n            display: inline-block;\n            height: 100%;\n            width: 100%;\n            text-align: center;\n            font-size: 14px;\n            color: #000;\n        }\n        \n        .transparent-color {\n            font-size: 14px;\n        }\n        \n        .canvas-whiteboard-colorpicker-wrapper {\n            border: 1px solid #afafaf;\n            color: #000;\n        }\n\n        @media (min-width: 401px) {\n            .canvas-whiteboard-colorpicker-wrapper {\n                position: absolute;\n            }\n        }\n\n        .canvas-whiteboard-colorpicker-input {\n            display: inline-block;\n            position:relative;\n            width: 44px;\n            height: 44px;\n            margin: 5px;\n            cursor: pointer;\n            color: #000;\n        }\n    "]}]}],"members":{"previewText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"selectedColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":72,"character":5},"arguments":["canvaswhiteboardcolorpicker",{"static":true}]}]}],"showColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"onToggleColorPicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":5}}]}],"onColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":5}}]}],"onSecondaryColorSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":37}]}],"ngOnInit":[{"__symbolic":"method"}],"createColorPalette":[{"__symbolic":"method"}],"closeOnExternalClick":[{"__symbolic":"method"}],"toggleColorPicker":[{"__symbolic":"method"}],"determineColorFromCanvas":[{"__symbolic":"method"}],"selectColor":[{"__symbolic":"method"}]}},"CanvasWhiteboardShapePreviewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"canvas-whiteboard-shape-preview","template":"\n        <canvas #canvasWhiteboardShapePreview width=\"50px\" height=\"50px\"\n                class=\"canvas-whiteboard-shape-preview-canvas\"></canvas>\n    ","styles":["\n        .canvas-whiteboard-shape-preview-canvas {\n            cursor: pointer;\n        }\n    "]}]}],"members":{"shapeConstructor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"shapeOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":5},"arguments":["canvasWhiteboardShapePreview"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"drawShapePreview":[{"__symbolic":"method"}]}},"CanvasWhiteboardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":8}],"declarations":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardColorPickerComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeSelectorComponent"},{"__symbolic":"reference","name":"CanvasWhiteboardShapePreviewComponent"}],"providers":[{"__symbolic":"reference","name":"CanvasWhiteboardService"},{"__symbolic":"reference","name":"CanvasWhiteboardShapeService"}],"exports":[{"__symbolic":"reference","name":"CanvasWhiteboardComponent"}]}]}],"members":{}},"DEFAULT_STYLES":"\n.canvas_whiteboard_button {\n    display: inline-block;\n    outline: 0px;\n    padding-top: 7px;\n    margin-bottom: 0;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 1.42857143;\n    text-align: center;\n    white-space: nowrap;\n    vertical-align: middle;\n    -ms-touch-action: manipulation;\n    touch-action: manipulation;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    background-image: none;\n    border: 1px solid transparent;\n    border-radius: 4px;\n}\n\n.canvas_whiteboard_buttons { \n    z-index: 3;\n}\n\n@media (max-width: 400px) {\n     .canvas_whiteboard_buttons {\n            position: absolute;\n            z-inde\n            top: 0;\n            width: 100%;\n            text-align: center;\n      }\n}\n        \n@media (min-width: 401px) { \n    .canvas_whiteboard_buttons {\n        position: absolute;\n        right: 0%;\n        color: #fff;\n    }\n}\n\n.canvas_whiteboard_buttons {\n    padding: 5px;\n}\n\n.canvas_whiteboard_buttons > button {\n    margin: 5px;\n}\n\n.canvas_whiteboard_button-draw_animated {\n    -webkit-animation: pulsate 1s ease-out;\n    -webkit-animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes pulsate {\n    0% {\n        -webkit-transform: scale(0.1, 0.1);\n        opacity: 0.0;\n    }\n    50% {\n        opacity: 1.0;\n    }\n    100% {\n        -webkit-transform: scale(1.2, 1.2);\n        opacity: 0.0;\n    }\n}\n.canvas_wrapper_div {\n    width: 100%;\n    height: 100%;\n    border: 0.5px solid #e2e2e2;\n}\n\n.canvas_whiteboard_button-clear {\n    padding-top: 5px;\n}\n\n.canvas_whiteboard {\n    position: absolute;\n    z-index: 1;\n}\n\n.incomplete_shapes_canvas_whiteboard {\n    position: absolute;\n    z-index: 2;\n}\n\n"},"origins":{"CanvasWhiteboardComponent":"./src/canvas-whiteboard.component","CanvasWhiteboardUpdate":"./src/canvas-whiteboard-update.model","CanvasWhiteboardService":"./src/canvas-whiteboard.service","CanvasWhiteboardOptions":"./src/canvas-whiteboard-options","CanvasWhiteboardPoint":"./src/canvas-whiteboard-point","CanvasWhiteboardShape":"./src/shapes/canvas-whiteboard-shape","CanvasWhiteboardShapeOptions":"./src/shapes/canvas-whiteboard-shape-options","CanvasWhiteboardShapeService":"./src/shapes/canvas-whiteboard-shape.service","RectangleShape":"./src/shapes/rectangle-shape","CircleShape":"./src/shapes/circle-shape","CanvasWhiteboardShapeSelectorComponent":"./src/shapes/canvas-whiteboard-shape-selector.component","CanvasWhiteboardColorPickerComponent":"./src/canvas-whiteboard-colorpicker.component","CanvasWhiteboardShapePreviewComponent":"./src/shapes/canvas-whiteboard-shape-preview.component","CanvasWhiteboardModule":"./src/ng2-canvas-whiteboard.module","DEFAULT_STYLES":"./src/template"},"importAs":"ng2-canvas-whiteboard"}
\ No newline at end of file
diff --git a/dist/package.json b/dist/package.json
index b4f26085..85c9764b 100644
--- a/dist/package.json
+++ b/dist/package.json
@@ -24,6 +24,9 @@
     "angular4",
     "angular5",
     "angular6",
+    "angular7",
+    "angular8",
+    "angular9",
     "canvas",
     "drawing",
     "touch drawing",
@@ -44,29 +47,30 @@
     "lodash": "4.17.11"
   },
   "devDependencies": {
-    "@angular/animations": "^6.0.0",
-    "@angular/common": "^6.0.0",
-    "@angular/compiler": "^6.0.0",
-    "@angular/compiler-cli": "^6.0.0",
-    "@angular/core": "^6.0.0",
-    "@angular/platform-browser": "^6.0.0",
-    "@angular/platform-browser-dynamic": "^6.0.0",
-    "@angular/platform-server": "^6.0.0",
-    "@types/lodash": "4.14.116",
-    "@types/node": "7.0.10",
+    "@angular/animations": "^9.0.1",
+    "@angular/common": "^9.0.1",
+    "@angular/compiler": "^9.0.1",
+    "@angular/compiler-cli": "^9.0.1",
+    "@angular/core": "^9.0.1",
+    "@angular/platform-browser": "^9.0.1",
+    "@angular/platform-browser-dynamic": "^9.0.1",
+    "@angular/platform-server": "^9.0.1",
+    "@types/lodash": "4.14.149",
+    "@types/node": "13.7.2",
     "chalk": "1.1.3",
-    "core-js": "2.4.1",
-    "reflect-metadata": "0.1.10",
+    "core-js": "^3.6.4",
+    "reflect-metadata": "^0.1.13",
     "rollup": "0.41.6",
-    "rxjs": "^6.1.0",
+    "rxjs": "^6.5.4",
     "shelljs": "0.7.7",
     "sorcery": "0.10.0",
     "ts-helpers": "1.1.2",
     "ts-loader": "2.0.3",
-    "typescript": "2.7.2",
+    "tsickle": "^0.38.0",
+    "typescript": "^3.7.5",
     "uglify-js": "^2.8.15",
     "webpack": "2.3.1",
     "yargs": "7.0.2",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.10.2"
   }
 }
diff --git a/dist/src/canvas-whiteboard-update.model.d.ts b/dist/src/canvas-whiteboard-update.model.d.ts
index 4b232b88..aa4176c9 100644
--- a/dist/src/canvas-whiteboard-update.model.d.ts
+++ b/dist/src/canvas-whiteboard-update.model.d.ts
@@ -2,7 +2,7 @@ import { CanvasWhiteboardShapeOptions } from "./shapes/canvas-whiteboard-shape-o
 export declare enum CanvasWhiteboardUpdateType {
     START = 0,
     DRAG = 1,
-    STOP = 2,
+    STOP = 2
 }
 export declare class CanvasWhiteboardUpdate {
     x: number;
diff --git a/dist/src/canvas-whiteboard.component.d.ts b/dist/src/canvas-whiteboard.component.d.ts
index 0481b839..6672722a 100644
--- a/dist/src/canvas-whiteboard.component.d.ts
+++ b/dist/src/canvas-whiteboard.component.d.ts
@@ -13,7 +13,8 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
     options: CanvasWhiteboardOptions;
     batchUpdateTimeoutDuration: number;
     private _imageUrl;
-    imageUrl: string;
+    set imageUrl(imageUrl: string);
+    get imageUrl(): string;
     aspectRatio: number;
     drawButtonClass: string;
     clearButtonClass: string;
@@ -94,28 +95,28 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      *
      * @param options
      */
-    private _initInputsFromOptions(options);
-    private _isNullOrUndefined(property);
+    private _initInputsFromOptions;
+    private _isNullOrUndefined;
     /**
      * Init global window listeners like resize and keydown
      */
-    private _initCanvasEventListeners();
+    private _initCanvasEventListeners;
     /**
      * Subscribes to new signals in the canvas whiteboard service and executes methods accordingly
      * Because of circular publishing and subscribing, the canvas methods do not use the service when
      * local actions are completed (Ex. clicking undo from the button inside this component)
      */
-    private _initCanvasServiceObservables();
+    private _initCanvasServiceObservables;
     /**
      * Calculate the canvas width and height from it's parent container width and height (use aspect ratio if needed)
      */
-    private _calculateCanvasWidthAndHeight();
+    private _calculateCanvasWidthAndHeight;
     /**
      * Load an image and draw it on the canvas (if an image exists)
      * @param callbackFn A function that is called after the image loading is finished
      * @return Emits a value when the image has been loaded.
      */
-    private _loadImage(callbackFn?);
+    private _loadImage;
     /**
      * Sends a notification after clearing the canvas
      * This method should only be called from the clear button in this component since it will emit an clear event
@@ -131,14 +132,14 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * It calls a callback function after redrawing
      * @param callbackFn
      */
-    private _removeCanvasData(callbackFn?);
+    private _removeCanvasData;
     /**
      * Clears the canvas and redraws the image if the url exists.
      * @param callbackFn A function that is called after the background is redrawn
      * @return Emits a value when the clearing is finished
      */
-    private _redrawBackground(callbackFn?);
-    private _drawStartingColor();
+    private _redrawBackground;
+    private _drawStartingColor;
     /**
      * @deprecated Use getDrawingEnabled(): boolean
      */
@@ -193,7 +194,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid invisible
      * @param updateUUID
      */
-    private _undoCanvas(updateUUID);
+    private _undoCanvas;
     /**
      * This method is invoked by the redo button on the canvas screen
      * It calls the global redo method and emits a notification after redoing
@@ -211,7 +212,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * This method takes an UUID for an update, and redraws the canvas by making all updates with that uuid visible
      * @param updateUUID
      */
-    private _redoCanvas(updateUUID);
+    private _redoCanvas;
     /**
      * Catches the Mouse and Touch events made on the canvas.
      * If drawing is disabled (If an image exists but it's not loaded, or the user did not click Draw),
@@ -235,7 +236,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * If it is not a touch event, use the original mouse event received
      * @param eventData
      */
-    private _getCanvasEventPosition(eventData);
+    private _getCanvasEventPosition;
     /**
      * The update coordinates on the canvas are mapped so that all receiving ends
      * can reverse the mapping and get the same position as the one that
@@ -243,7 +244,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      *
      * @param update The CanvasWhiteboardUpdate object.
      */
-    private _prepareToSendUpdate(update);
+    private _prepareToSendUpdate;
     /**
      * Catches the Key Up events made on the canvas.
      * If the ctrlKey or commandKey(macOS) was held and the keyCode is 90 (z), an undo action will be performed
@@ -252,15 +253,15 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      *
      * @param event The event that occurred.
      */
-    private _canvasKeyDown(event);
+    private _canvasKeyDown;
     /**
      * On window resize, recalculate the canvas dimensions and redraw the history
      */
-    private _redrawCanvasOnResize();
+    private _redrawCanvasOnResize;
     /**
      * Redraw the saved history after resetting the canvas state
      */
-    private _redrawHistory();
+    private _redrawHistory;
     /**
      * Draws a CanvasWhiteboardUpdate object on the canvas.
      * The coordinates are first reverse mapped so that they can be drawn in the proper place. The update
@@ -273,15 +274,15 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      *
      * @param update The update object.
      */
-    private _draw(update);
-    private _drawIncompleteShapes();
-    private _swapCompletedShapeToActualCanvas(shape);
-    private _resetIncompleteShapeCanvas();
+    private _draw;
+    private _drawIncompleteShapes;
+    private _swapCompletedShapeToActualCanvas;
+    private _resetIncompleteShapeCanvas;
     /**
      * Delete everything from the screen, redraw the background, and then redraw all the shapes from the shapesMap
      */
     drawAllShapes(): void;
-    private _addCurrentShapeDataToAnUpdate(update);
+    private _addCurrentShapeDataToAnUpdate;
     generateShapePreviewOptions(): CanvasWhiteboardShapeOptions;
     /**
      * Sends the update to all receiving ends as an Event emit. This is done as a batch operation (meaning
@@ -291,7 +292,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * @param update The update object.
      * @return Emits an Array of Updates when the batch.
      */
-    private _prepareUpdateForBatchDispatch(update);
+    private _prepareUpdateForBatchDispatch;
     /**
      * Draws an Array of Updates on the canvas.
      *
@@ -301,7 +302,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
     /**
      * Draw any missing updates that were received before the image was loaded
      */
-    private _drawMissingUpdates();
+    private _drawMissingUpdates;
     /**
      * Draws an image on the canvas
      *
@@ -314,7 +315,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * @param offsetX The offsetX if the image size is larger than the canvas (aspect Ratio)
      * @param offsetY The offsetY if the image size is larger than the canvas (aspect Ratio)
      */
-    private _drawImage(context, image, x, y, width, height, offsetX, offsetY);
+    private _drawImage;
     /**
      * The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).
      * The returned image is in a resolution of 96 dpi.
@@ -354,7 +355,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * @param blob
      * @param returnedDataType
      */
-    private _saveCanvasBlob(blob, returnedDataType?);
+    private _saveCanvasBlob;
     /**
      * This method generates a canvas url string or a canvas blob with the presented data type
      * A callback function is then invoked since the blob creation must be done via a callback
@@ -371,7 +372,7 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * @param returnedDataType
      */
     saveLocal(returnedDataType?: string): void;
-    private _generateDataTypeString(returnedDataType);
+    private _generateDataTypeString;
     /**
      * Toggles the color picker window, delegating the showColorPicker Input to the ColorPickerComponent.
      * If no value is supplied (null/undefined) the current value will be negated and used.
@@ -400,9 +401,9 @@ export declare class CanvasWhiteboardComponent implements OnInit, AfterViewInit,
      * Unsubscribe from a given subscription if it is active
      * @param subscription
      */
-    private _unsubscribe(subscription);
-    private _generateUUID();
-    private _random4();
+    private _unsubscribe;
+    private _generateUUID;
+    private _random4;
     /**
      * Unsubscribe from the service observables
      */
diff --git a/dist/src/canvas-whiteboard.service.d.ts b/dist/src/canvas-whiteboard.service.d.ts
index 17c99d64..62765188 100644
--- a/dist/src/canvas-whiteboard.service.d.ts
+++ b/dist/src/canvas-whiteboard.service.d.ts
@@ -1,5 +1,5 @@
 import { CanvasWhiteboardUpdate } from "./canvas-whiteboard-update.model";
-import { Observable } from "rxjs/index";
+import { Observable } from "rxjs";
 export declare class CanvasWhiteboardService {
     private _canvasDrawSubject;
     canvasDrawSubject$: Observable<CanvasWhiteboardUpdate[]>;
diff --git a/dist/src/shapes/canvas-whiteboard-shape-selector.component.d.ts b/dist/src/shapes/canvas-whiteboard-shape-selector.component.d.ts
index ec95525a..4ba9ac2b 100644
--- a/dist/src/shapes/canvas-whiteboard-shape-selector.component.d.ts
+++ b/dist/src/shapes/canvas-whiteboard-shape-selector.component.d.ts
@@ -2,7 +2,7 @@ import { ElementRef, EventEmitter } from "@angular/core";
 import { CanvasWhiteboardShapeService, INewCanvasWhiteboardShape } from "./canvas-whiteboard-shape.service";
 import { CanvasWhiteboardShape } from "./canvas-whiteboard-shape";
 import { CanvasWhiteboardShapeOptions } from "./canvas-whiteboard-shape-options";
-import { Observable } from "rxjs/index";
+import { Observable } from "rxjs";
 export declare class CanvasWhiteboardShapeSelectorComponent {
     private _elementRef;
     private _canvasWhiteboardShapeService;
diff --git a/dist/src/shapes/canvas-whiteboard-shape.service.d.ts b/dist/src/shapes/canvas-whiteboard-shape.service.d.ts
index 163eff54..f1454359 100644
--- a/dist/src/shapes/canvas-whiteboard-shape.service.d.ts
+++ b/dist/src/shapes/canvas-whiteboard-shape.service.d.ts
@@ -1,7 +1,7 @@
 import { CanvasWhiteboardShape } from "./canvas-whiteboard-shape";
 import { CanvasWhiteboardShapeOptions } from "./canvas-whiteboard-shape-options";
 import { CanvasWhiteboardPoint } from "../canvas-whiteboard-point";
-import { Observable } from "rxjs/index";
+import { Observable } from "rxjs";
 export interface INewCanvasWhiteboardShape<T extends CanvasWhiteboardShape> {
     new (positionPoint?: CanvasWhiteboardPoint, options?: CanvasWhiteboardShapeOptions, ...args: any[]): T;
 }
diff --git a/package-lock.json b/package-lock.json
index 8197179c..9da98eee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,92 +5,226 @@
   "requires": true,
   "dependencies": {
     "@angular/animations": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.1.7.tgz",
-      "integrity": "sha512-bjX3VEVEh5scGDDmxEKPzYI8DWUbqOFA34aYDY2cHPnDkLM0I7pEtO44qb72FSbWwXn77sYlby/dx2gtRayOOA==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      }
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.0.1.tgz",
+      "integrity": "sha512-R0FLhAfylFIiRArhtLOUokOAVtWCH20ocRXo6E8HHOc3fbaUS9ci3rIbFZQkaAv9RgZfKewrcV6Wa3TY905w5g==",
+      "dev": true
     },
     "@angular/common": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.1.7.tgz",
-      "integrity": "sha512-zFK2xM0hqR2ZWIfUsn+06jg+0K5PolzTxPjfUtVQDCZo+JHHKTVHEwtfORUaMTMfH9EqKrvfB3t6fCwK0523ag==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      }
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.0.1.tgz",
+      "integrity": "sha512-40jbKdCb4xi6NTzLt1kE0V/X7JxCLLo8eUEr3Z34Z9Ljnd4LC+/CkuThPdQJ3HW1Z8r5SWXj+rES+sn75YNVmA==",
+      "dev": true
     },
     "@angular/compiler": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.1.7.tgz",
-      "integrity": "sha512-JKuK/fzKNCF+mNPmPmGQjr0uHVpfxmrOqXBriJMklCtdsKeQW94BLUoNjn8h1H10rFbUqYuD5v9AAKdH77FgnA==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      }
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-9.0.1.tgz",
+      "integrity": "sha512-ldamsPzIx+FLT/IYBqwsFL6qbP3BDgvPQa4Y3F/gFXDsoe+VTY5qwJfhr2iLbtF+fYomwOgY2kSL42BVQL873Q==",
+      "dev": true
     },
     "@angular/compiler-cli": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.1.7.tgz",
-      "integrity": "sha512-HzrwmtvrgKwUowfkPTsb6AOqdoQajY3Uso3i0jNc9/bXvpeikH0vj0YIKuQzAJDemluHsowHk/ImEsVGGr2w9g==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-9.0.1.tgz",
+      "integrity": "sha512-HxJAXr1TWoqVzR7pRe89UjWnu3ESJzo+gjWWtv1NtDMwUKQ2JHWmC3yp/U0URprA03Ii8lXlrZWBjps04ZIlAg==",
       "dev": true,
       "requires": {
-        "chokidar": "^1.4.2",
+        "canonical-path": "1.0.0",
+        "chokidar": "^3.0.0",
+        "convert-source-map": "^1.5.1",
+        "dependency-graph": "^0.7.2",
+        "fs-extra": "4.0.2",
+        "magic-string": "^0.25.0",
         "minimist": "^1.2.0",
         "reflect-metadata": "^0.1.2",
-        "tsickle": "^0.32.1"
+        "semver": "^6.3.0",
+        "source-map": "^0.6.1",
+        "yargs": "13.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
+          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^2.1.1",
+            "strip-ansi": "^4.0.0",
+            "wrap-ansi": "^2.0.0"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+              "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+              "dev": true,
+              "requires": {
+                "is-fullwidth-code-point": "^2.0.0",
+                "strip-ansi": "^4.0.0"
+              }
+            }
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+          "dev": true
+        },
+        "invert-kv": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
+          "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
+          "dev": true
+        },
+        "lcid": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
+          "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
+          "dev": true,
+          "requires": {
+            "invert-kv": "^2.0.0"
+          }
+        },
+        "os-locale": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
+          "dev": true,
+          "requires": {
+            "execa": "^1.0.0",
+            "lcid": "^2.0.0",
+            "mem": "^4.0.0"
+          }
+        },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        },
+        "which-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+          "dev": true
+        },
+        "y18n": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "13.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.1.0.tgz",
+          "integrity": "sha512-1UhJbXfzHiPqkfXNHYhiz79qM/kZqjTE8yGlEjZa85Q+3+OwcV6NRkV7XOV1W2Eom2bzILeUn55pQYffjVOLAg==",
+          "dev": true,
+          "requires": {
+            "cliui": "^4.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "os-locale": "^3.1.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
+          "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
       }
     },
     "@angular/core": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.1.7.tgz",
-      "integrity": "sha512-3MtS8EQy+saNcImDWghphOr/h3l5CpFnZW6aaHiL8T5CpTBNdB86uEmAwtiNQkJ0UeO+cztF1zNCzhm9R93/3w==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      }
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.0.1.tgz",
+      "integrity": "sha512-q/3VLGM98euB/ZluSuMqvWyQb563iabRcVkC/DrHqCQMadV1ZpvuOgf8Gm092d8GY/iC4CGlTsN0wiVapMxplQ==",
+      "dev": true
     },
     "@angular/platform-browser": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.7.tgz",
-      "integrity": "sha512-YOYg944aefCWElJhnma8X+3wJDb6nHf6aBAVN+YPg0bUplEFacR4y6PeM9QR8vjh5Y0kbGG9ZPGDT/WwP2t4sQ==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      }
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.0.1.tgz",
+      "integrity": "sha512-0o2aRxbQ3xZ/ZeLXajDqhrRK6vcICzdJ7GKvPgZxdohnnJ7JN1qp8U7J4aEotPqfSAde/aD2JvoDDtKZ0XIDWg==",
+      "dev": true
     },
     "@angular/platform-browser-dynamic": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.7.tgz",
-      "integrity": "sha512-sSF7n4SpwPiP1fMwocu/RUegpp/45jHK/+r9biXUXUBD12zO5QMcLHU393sjoNi7e6+meuXEH0pnWa66dTznjw==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      }
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.0.1.tgz",
+      "integrity": "sha512-DslT339T+TBt4jUlXMblPR4IghXtykB+jQctm02G4AJUlvMa4b798N1oM6sD5F8NmBMa6beZ2dcRJ07f75LVBA==",
+      "dev": true
     },
     "@angular/platform-server": {
-      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-6.1.7.tgz",
-      "integrity": "sha512-OxdfGYLvrFtmxHUdhslQkBlO/572COaS9rsjzNV/QTrGysN92rSN2wws/lgsxxvX/LX6zvbWYNOaVmfcHbs5eA==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-9.0.1.tgz",
+      "integrity": "sha512-vQtQZLmwtkART22LIvE1z7rqoDDAbn3mjVEETYcOBGLtbTO+AkvxZcCcVQ3b2UycMBf0mMqWT3M/uMnUUW1MPg==",
       "dev": true,
       "requires": {
-        "domino": "^2.0.1",
-        "tslib": "^1.9.0",
+        "domino": "^2.1.2",
         "xhr2": "^0.1.4"
       }
     },
     "@types/lodash": {
-      "version": "4.14.116",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.116.tgz",
-      "integrity": "sha512-lRnAtKnxMXcYYXqOiotTmJd74uawNWuPnsnPrrO7HiFuE3npE2iQhfABatbYDyxTNqZNuXzcKGhw37R7RjBFLg==",
+      "version": "4.14.149",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
+      "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==",
       "dev": true
     },
     "@types/node": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.10.tgz",
-      "integrity": "sha1-2GCrsYwbWLVSx8bNiyunrfZUb6M=",
+      "version": "13.7.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.7.2.tgz",
+      "integrity": "sha512-uvilvAQbdJvnSBFcKJ2td4016urcGvsiR+N4dHGU87ml8O2Vl6l+ErOi9w0kXSPiwJ1AYlIW+0pDXDWWMOiWbw==",
       "dev": true
     },
     "acorn": {
@@ -142,22 +276,21 @@
       "dev": true
     },
     "anymatch": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
-      "integrity": "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==",
-      "dev": true,
-      "requires": {
-        "micromatch": "^2.1.5",
-        "normalize-path": "^2.0.0"
-      }
-    },
-    "arr-diff": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
       "dev": true,
       "requires": {
-        "arr-flatten": "^1.0.1"
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "dependencies": {
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "dev": true
+        }
       }
     },
     "arr-flatten": {
@@ -172,12 +305,6 @@
       "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
       "dev": true
     },
-    "array-unique": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
-      "dev": true
-    },
     "asn1.js": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -341,14 +468,12 @@
       }
     },
     "braces": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
       "dev": true,
       "requires": {
-        "expand-range": "^1.8.1",
-        "preserve": "^0.2.0",
-        "repeat-element": "^1.1.2"
+        "fill-range": "^7.0.1"
       }
     },
     "brorand": {
@@ -445,12 +570,6 @@
       "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
       "dev": true
     },
-    "buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-      "dev": true
-    },
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
@@ -500,6 +619,12 @@
       "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
       "dev": true
     },
+    "canonical-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/canonical-path/-/canonical-path-1.0.0.tgz",
+      "integrity": "sha512-feylzsbDxi1gPZ1IjystzIQZagYYLvfKrSuygUCgf7z6x790VEzze5QEkdSV1U58RA7Hi0+v6fv4K54atOzATg==",
+      "dev": true
+    },
     "center-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
@@ -538,20 +663,58 @@
       }
     },
     "chokidar": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
-      "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
-      "dev": true,
-      "requires": {
-        "anymatch": "^1.3.0",
-        "async-each": "^1.0.0",
-        "fsevents": "^1.0.0",
-        "glob-parent": "^2.0.0",
-        "inherits": "^2.0.1",
-        "is-binary-path": "^1.0.0",
-        "is-glob": "^2.0.0",
-        "path-is-absolute": "^1.0.0",
-        "readdirp": "^2.0.0"
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
+      "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.3.0"
+      },
+      "dependencies": {
+        "binary-extensions": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+          "dev": true
+        },
+        "fsevents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
+          "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+          "dev": true,
+          "optional": true
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "dev": true
+        },
+        "readdirp": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz",
+          "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==",
+          "dev": true,
+          "requires": {
+            "picomatch": "^2.0.7"
+          }
+        }
       }
     },
     "cipher-base": {
@@ -667,6 +830,15 @@
       "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
       "dev": true
     },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -674,9 +846,9 @@
       "dev": true
     },
     "core-js": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz",
-      "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4=",
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
+      "integrity": "sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==",
       "dev": true
     },
     "core-util-is": {
@@ -722,6 +894,19 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dev": true,
+      "requires": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      }
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -821,6 +1006,12 @@
         }
       }
     },
+    "dependency-graph": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.7.2.tgz",
+      "integrity": "sha512-KqtH4/EZdtdfWX0p6MGP9jljvxSY6msy/pRUD4jgNwVpv3v1QmNLlsB3LDSSUg79BRVSn7jI1QPRtArGABovAQ==",
+      "dev": true
+    },
     "des.js": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz",
@@ -831,12 +1022,6 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
-    "diff": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
-      "dev": true
-    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -855,9 +1040,9 @@
       "dev": true
     },
     "domino": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.0.tgz",
-      "integrity": "sha512-xINSODvrnuQcm3eXJN4IkBR+JxqLrJN8Ge4fd00y1b7HsY0A4huKN5BflSS/oo8quBWmocTfWdFvrw2H8TjGqQ==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.4.tgz",
+      "integrity": "sha512-l70mlQ7IjPKC8kT7GljQXJZmt5OqFL+RE91ik5y5WWQtsd9wP8R7gpFnNu96fK5MqAAZRXfLLsnzKtkty5fWGQ==",
       "dev": true
     },
     "elliptic": {
@@ -875,12 +1060,27 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
       "dev": true
     },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dev": true,
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
     "enhanced-resolve": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz",
@@ -939,22 +1139,19 @@
         "safe-buffer": "^5.1.1"
       }
     },
-    "expand-brackets": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
-      "dev": true,
-      "requires": {
-        "is-posix-bracket": "^0.1.0"
-      }
-    },
-    "expand-range": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
-      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
+    "execa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
       "dev": true,
       "requires": {
-        "fill-range": "^2.1.0"
+        "cross-spawn": "^6.0.0",
+        "get-stream": "^4.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
       }
     },
     "extend-shallow": {
@@ -978,32 +1175,24 @@
         }
       }
     },
-    "extglob": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-      "dev": true,
-      "requires": {
-        "is-extglob": "^1.0.0"
-      }
-    },
-    "filename-regex": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
-    },
     "fill-range": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
-      "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
       "dev": true,
       "requires": {
-        "is-number": "^2.1.0",
-        "isobject": "^2.0.0",
-        "randomatic": "^3.0.0",
-        "repeat-element": "^1.1.2",
-        "repeat-string": "^1.5.2"
+        "to-regex-range": "^5.0.1"
+      },
+      "dependencies": {
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
       }
     },
     "find-up": {
@@ -1022,15 +1211,6 @@
       "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
       "dev": true
     },
-    "for-own": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-      "dev": true,
-      "requires": {
-        "for-in": "^1.0.1"
-      }
-    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -1040,6 +1220,17 @@
         "map-cache": "^0.2.2"
       }
     },
+    "fs-extra": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.2.tgz",
+      "integrity": "sha1-+RcExT0bRh+JNFKwwwfZmXZHq2s=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1066,7 +1257,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1087,12 +1279,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1107,17 +1301,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1234,7 +1431,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1246,6 +1444,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1260,6 +1459,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1267,12 +1467,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1291,6 +1493,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1371,7 +1574,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1383,6 +1587,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1468,7 +1673,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1504,6 +1710,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1523,6 +1730,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1566,12 +1774,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -1581,6 +1791,15 @@
       "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
       "dev": true
     },
+    "get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dev": true,
+      "requires": {
+        "pump": "^3.0.0"
+      }
+    },
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -1601,23 +1820,13 @@
         "path-is-absolute": "^1.0.0"
       }
     },
-    "glob-base": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
-      "requires": {
-        "glob-parent": "^2.0.0",
-        "is-glob": "^2.0.0"
-      }
-    },
     "glob-parent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
+      "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
       "dev": true,
       "requires": {
-        "is-glob": "^2.0.0"
+        "is-glob": "^4.0.1"
       }
     },
     "graceful-fs": {
@@ -1845,21 +2054,6 @@
         }
       }
     },
-    "is-dotfile": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true
-    },
-    "is-equal-shallow": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
-      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
-      "dev": true,
-      "requires": {
-        "is-primitive": "^2.0.0"
-      }
-    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -1867,28 +2061,31 @@
       "dev": true
     },
     "is-extglob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
     "is-glob": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
       "dev": true,
       "requires": {
-        "is-extglob": "^1.0.0"
+        "is-extglob": "^2.1.1"
       }
     },
     "is-number": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
-      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      }
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -1907,16 +2104,10 @@
         }
       }
     },
-    "is-posix-bracket": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
-      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
-      "dev": true
-    },
-    "is-primitive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
     "is-utf8": {
@@ -1937,23 +2128,11 @@
       "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
       "dev": true
     },
-    "isobject": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-      "dev": true,
-      "requires": {
-        "isarray": "1.0.0"
-      }
-    },
-    "jasmine-diff": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/jasmine-diff/-/jasmine-diff-0.1.3.tgz",
-      "integrity": "sha1-k8zC3MQQKMXd1GBlWAdIOfLe6qg=",
-      "dev": true,
-      "requires": {
-        "diff": "^3.2.0"
-      }
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
     },
     "json-loader": {
       "version": "0.5.7",
@@ -1970,6 +2149,15 @@
         "jsonify": "~0.0.0"
       }
     },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "jsonify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
@@ -2056,6 +2244,24 @@
         }
       }
     },
+    "locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "dependencies": {
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        }
+      }
+    },
     "lodash": {
       "version": "4.17.11",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
@@ -2073,6 +2279,32 @@
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
       "dev": true
     },
+    "magic-string": {
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.6.tgz",
+      "integrity": "sha512-3a5LOMSGoCTH5rbqobC2HuDNRtE2glHZ8J7pK+QZYppyWA36yuNpsX994rIY2nCuyP7CZYy7lQq/X2jygiZ89g==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      },
+      "dependencies": {
+        "sourcemap-codec": {
+          "version": "1.4.8",
+          "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+          "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+          "dev": true
+        }
+      }
+    },
+    "map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dev": true,
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -2088,12 +2320,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "math-random": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",
-      "integrity": "sha1-izqsWIuKZuSXXjzepn97sylgH6w=",
-      "dev": true
-    },
     "md5.js": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
@@ -2104,6 +2330,17 @@
         "inherits": "^2.0.1"
       }
     },
+    "mem": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
+      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
+      "dev": true,
+      "requires": {
+        "map-age-cleaner": "^0.1.1",
+        "mimic-fn": "^2.0.0",
+        "p-is-promise": "^2.0.0"
+      }
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -2114,27 +2351,6 @@
         "readable-stream": "^2.0.1"
       }
     },
-    "micromatch": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-      "dev": true,
-      "requires": {
-        "arr-diff": "^2.0.0",
-        "array-unique": "^0.2.1",
-        "braces": "^1.8.2",
-        "expand-brackets": "^0.1.4",
-        "extglob": "^0.3.1",
-        "filename-regex": "^2.0.0",
-        "is-extglob": "^1.0.0",
-        "is-glob": "^2.0.1",
-        "kind-of": "^3.0.2",
-        "normalize-path": "^2.0.1",
-        "object.omit": "^2.0.0",
-        "parse-glob": "^3.0.4",
-        "regex-cache": "^0.4.2"
-      }
-    },
     "miller-rabin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
@@ -2145,6 +2361,12 @@
         "brorand": "^1.0.1"
       }
     },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -2268,6 +2490,12 @@
       "integrity": "sha512-vdqTKI9GBIYcAEbFAcpKPErKINfPF5zIuz3/niBfq8WUZjpT2tytLlFVrBgWdOtqI4uaA/Rb6No0hux39XXDuw==",
       "dev": true
     },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
     "node-libs-browser": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.1.0.tgz",
@@ -2320,6 +2548,15 @@
         "remove-trailing-separator": "^1.0.1"
       }
     },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "dev": true,
+      "requires": {
+        "path-key": "^2.0.0"
+      }
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -2371,16 +2608,6 @@
         }
       }
     },
-    "object.omit": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
-      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
-      "dev": true,
-      "requires": {
-        "for-own": "^0.1.4",
-        "is-extendable": "^0.1.1"
-      }
-    },
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -2422,6 +2649,48 @@
         "lcid": "^1.0.0"
       }
     },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
+      "dev": true
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
+      "dev": true
+    },
+    "p-is-promise": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
+      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
+      "dev": true
+    },
+    "p-limit": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
+      "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
     "pako": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
@@ -2441,18 +2710,6 @@
         "pbkdf2": "^3.0.3"
       }
     },
-    "parse-glob": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
-      "requires": {
-        "glob-base": "^0.3.0",
-        "is-dotfile": "^1.0.0",
-        "is-extglob": "^1.0.0",
-        "is-glob": "^2.0.0"
-      }
-    },
     "pascalcase": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@@ -2486,6 +2743,12 @@
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true
     },
+    "path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
+      "dev": true
+    },
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
@@ -2505,6 +2768,12 @@
         "sha.js": "^2.4.8"
       }
     },
+    "picomatch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
+      "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==",
+      "dev": true
+    },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -2526,12 +2795,6 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
       "dev": true
     },
-    "preserve": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
-      "dev": true
-    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -2563,6 +2826,16 @@
         "randombytes": "^2.0.1"
       }
     },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -2581,31 +2854,6 @@
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
       "dev": true
     },
-    "randomatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.0.tgz",
-      "integrity": "sha512-KnGPVE0lo2WoXxIZ7cPR8YBpiol4gsSuOwDSg410oHh80ZMp5EiypNqL2K4Z77vJn6lB5rap7IkAmcUlalcnBQ==",
-      "dev": true,
-      "requires": {
-        "is-number": "^4.0.0",
-        "kind-of": "^6.0.0",
-        "math-random": "^1.0.1"
-      },
-      "dependencies": {
-        "is-number": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
-          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
-          "dev": true
-        }
-      }
-    },
     "randombytes": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.6.tgz",
@@ -2977,20 +3225,11 @@
       }
     },
     "reflect-metadata": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.10.tgz",
-      "integrity": "sha1-tPg3BEFqytiZiMmxVjXUfgO5NEo=",
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
       "dev": true
     },
-    "regex-cache": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz",
-      "integrity": "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==",
-      "dev": true,
-      "requires": {
-        "is-equal-shallow": "^0.1.3"
-      }
-    },
     "regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -3101,9 +3340,9 @@
       }
     },
     "rxjs": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.2.tgz",
-      "integrity": "sha512-hV7criqbR0pe7EeL3O66UYVg92IR0XsA97+9y+BWTePK9SKmEI5Qd3Zj6uPnGkNzXsBywBQWTvujPl+1Kn9Zjw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+      "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
@@ -3187,6 +3426,21 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^1.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+      "dev": true
+    },
     "shelljs": {
       "version": "0.7.7",
       "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.7.7.tgz",
@@ -3198,6 +3452,12 @@
         "rechoir": "^0.6.2"
       }
     },
+    "signal-exit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+      "dev": true
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -3343,24 +3603,6 @@
         "urix": "^0.1.0"
       }
     },
-    "source-map-support": {
-      "version": "0.5.9",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.9.tgz",
-      "integrity": "sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==",
-      "dev": true,
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
     "source-map-url": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
@@ -3458,6 +3700,34 @@
         "xtend": "^4.0.0"
       }
     },
+    "string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -3485,6 +3755,12 @@
         "is-utf8": "^0.2.0"
       }
     },
+    "strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
+      "dev": true
+    },
     "tapable": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.8.tgz",
@@ -3586,30 +3862,15 @@
       }
     },
     "tsickle": {
-      "version": "0.32.1",
-      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.32.1.tgz",
-      "integrity": "sha512-JW9j+W0SaMSZGejIFZBk0AiPfnhljK3oLx5SaqxrJhjlvzFyPml5zqG1/PuScUj6yTe1muEqwk5CnDK0cOZmKw==",
-      "dev": true,
-      "requires": {
-        "jasmine-diff": "^0.1.3",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
-        "source-map": "^0.6.0",
-        "source-map-support": "^0.5.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
+      "version": "0.38.0",
+      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.38.0.tgz",
+      "integrity": "sha512-k7kI6afBuLd2jIrj9JR8lKhEkp99sFVRKQbHeaHQkdvDaH5AvzwqA/qX+aNj28OfuAsWryOKAZoXm24l7JelEw==",
+      "dev": true
     },
     "tslib": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
       "dev": true
     },
     "tty-browserify": {
@@ -3619,9 +3880,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "2.7.2",
-      "resolved": "http://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
-      "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==",
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
+      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
       "dev": true
     },
     "uglify-js": {
@@ -3691,6 +3952,12 @@
         }
       }
     },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
+    },
     "unset-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -4283,6 +4550,15 @@
         "source-map": "~0.5.3"
       }
     },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
     "which-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
@@ -4438,9 +4714,9 @@
       }
     },
     "zone.js": {
-      "version": "0.8.26",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.26.tgz",
-      "integrity": "sha512-W9Nj+UmBJG251wkCacIkETgra4QgBo/vgoEkb4a2uoLzpQG7qF9nzwoLXWU5xj3Fg2mxGvEDh47mg24vXccYjA==",
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.2.tgz",
+      "integrity": "sha512-UAYfiuvxLN4oyuqhJwd21Uxb4CNawrq6fPS/05Su5L4G+1TN+HVDJMUHNMobVQDFJRir2cLAODXwluaOKB7HFg==",
       "dev": true
     }
   }
diff --git a/package.json b/package.json
index b4f26085..85c9764b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
     "angular4",
     "angular5",
     "angular6",
+    "angular7",
+    "angular8",
+    "angular9",
     "canvas",
     "drawing",
     "touch drawing",
@@ -44,29 +47,30 @@
     "lodash": "4.17.11"
   },
   "devDependencies": {
-    "@angular/animations": "^6.0.0",
-    "@angular/common": "^6.0.0",
-    "@angular/compiler": "^6.0.0",
-    "@angular/compiler-cli": "^6.0.0",
-    "@angular/core": "^6.0.0",
-    "@angular/platform-browser": "^6.0.0",
-    "@angular/platform-browser-dynamic": "^6.0.0",
-    "@angular/platform-server": "^6.0.0",
-    "@types/lodash": "4.14.116",
-    "@types/node": "7.0.10",
+    "@angular/animations": "^9.0.1",
+    "@angular/common": "^9.0.1",
+    "@angular/compiler": "^9.0.1",
+    "@angular/compiler-cli": "^9.0.1",
+    "@angular/core": "^9.0.1",
+    "@angular/platform-browser": "^9.0.1",
+    "@angular/platform-browser-dynamic": "^9.0.1",
+    "@angular/platform-server": "^9.0.1",
+    "@types/lodash": "4.14.149",
+    "@types/node": "13.7.2",
     "chalk": "1.1.3",
-    "core-js": "2.4.1",
-    "reflect-metadata": "0.1.10",
+    "core-js": "^3.6.4",
+    "reflect-metadata": "^0.1.13",
     "rollup": "0.41.6",
-    "rxjs": "^6.1.0",
+    "rxjs": "^6.5.4",
     "shelljs": "0.7.7",
     "sorcery": "0.10.0",
     "ts-helpers": "1.1.2",
     "ts-loader": "2.0.3",
-    "typescript": "2.7.2",
+    "tsickle": "^0.38.0",
+    "typescript": "^3.7.5",
     "uglify-js": "^2.8.15",
     "webpack": "2.3.1",
     "yargs": "7.0.2",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.10.2"
   }
 }
diff --git a/src/canvas-whiteboard-colorpicker.component.ts b/src/canvas-whiteboard-colorpicker.component.ts
index 6f8405ab..3f8a270c 100644
--- a/src/canvas-whiteboard-colorpicker.component.ts
+++ b/src/canvas-whiteboard-colorpicker.component.ts
@@ -70,7 +70,7 @@ export class CanvasWhiteboardColorPickerComponent implements OnInit {
 
     @Input() previewText: string;
     @Input() readonly selectedColor: string = 'rgba(0,0,0,1)';
-    @ViewChild('canvaswhiteboardcolorpicker') canvas: ElementRef;
+    @ViewChild('canvaswhiteboardcolorpicker', { static: true }) canvas: ElementRef;
 
     @Input() readonly showColorPicker: boolean = false;
     private _context: CanvasRenderingContext2D;
@@ -137,4 +137,4 @@ export class CanvasWhiteboardColorPickerComponent implements OnInit {
         this.onColorSelected.emit(color);
         this.toggleColorPicker(null);
     }
-}
\ No newline at end of file
+}
diff --git a/src/canvas-whiteboard.component.js b/src/canvas-whiteboard.component.js
index 53fea3b4..eb9eea00 100644
--- a/src/canvas-whiteboard.component.js
+++ b/src/canvas-whiteboard.component.js
@@ -16,9 +16,9 @@ var canvas_whiteboard_service_1 = require("./canvas-whiteboard.service");
 var canvas_whiteboard_point_1 = require("./canvas-whiteboard-point");
 var canvas_whiteboard_shape_service_1 = require("./shapes/canvas-whiteboard-shape.service");
 var canvas_whiteboard_shape_options_1 = require("./shapes/canvas-whiteboard-shape-options");
-var index_1 = require("rxjs/index");
+var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
-var _ = require("lodash");
+var lodash_1 = require("lodash");
 var CanvasWhiteboardComponent = /** @class */ (function () {
     function CanvasWhiteboardComponent(ngZone, _changeDetector, _canvasWhiteboardService, _canvasWhiteboardShapeService) {
         this.ngZone = ngZone;
@@ -194,7 +194,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     CanvasWhiteboardComponent.prototype._initCanvasEventListeners = function () {
         var _this = this;
         this.ngZone.runOutsideAngular(function () {
-            _this._resizeSubscription = index_1.fromEvent(window, 'resize')
+            _this._resizeSubscription = rxjs_1.fromEvent(window, 'resize')
                 .pipe(operators_1.debounceTime(200), operators_1.distinctUntilChanged())
                 .subscribe(function () {
                 _this.ngZone.run(function () {
@@ -663,7 +663,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
     };
     CanvasWhiteboardComponent.prototype._addCurrentShapeDataToAnUpdate = function (update) {
         if (!update.selectedShape) {
-            update.selectedShape = this.selectedShapeConstructor.name;
+            update.selectedShape = (new this.selectedShapeConstructor).getShapeName();
         }
         if (!update.selectedShapeOptions) {
             //Make a deep copy since we don't want some Shape implementation to change something by accident
@@ -690,7 +690,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      */
     CanvasWhiteboardComponent.prototype._prepareUpdateForBatchDispatch = function (update) {
         var _this = this;
-        this._batchUpdates.push(_.cloneDeep(update));
+        this._batchUpdates.push(lodash_1.cloneDeep(update));
         if (!this._updateTimeout) {
             this._updateTimeout = setTimeout(function () {
                 _this.onBatchUpdate.emit(_this._batchUpdates);
@@ -829,6 +829,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
             toBlobMethod = this.context.canvas.toBlob.bind(this.context.canvas);
         }
         else if (typeof this.context.canvas.msToBlob !== "undefined") {
+            // For IE
             toBlobMethod = function (callback) {
                 callback && callback(_this.context.canvas.msToBlob());
             };
@@ -949,7 +950,7 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
      * The deep copy is returned because we don't want anyone to mutate the current history
      */
     CanvasWhiteboardComponent.prototype.getDrawingHistory = function () {
-        return _.cloneDeep(this._updateHistory);
+        return lodash_1.cloneDeep(this._updateHistory);
     };
     /**
      * Unsubscribe from a given subscription if it is active
@@ -1139,11 +1140,11 @@ var CanvasWhiteboardComponent = /** @class */ (function () {
         __metadata("design:type", Object)
     ], CanvasWhiteboardComponent.prototype, "onSave", void 0);
     __decorate([
-        core_1.ViewChild('canvas'),
+        core_1.ViewChild('canvas', { static: true }),
         __metadata("design:type", core_1.ElementRef)
     ], CanvasWhiteboardComponent.prototype, "canvas", void 0);
     __decorate([
-        core_1.ViewChild('incompleteShapesCanvas'),
+        core_1.ViewChild('incompleteShapesCanvas', { static: true }),
         __metadata("design:type", core_1.ElementRef)
     ], CanvasWhiteboardComponent.prototype, "_incompleteShapesCanvas", void 0);
     CanvasWhiteboardComponent = __decorate([
diff --git a/src/canvas-whiteboard.component.ts b/src/canvas-whiteboard.component.ts
index 981952ab..f820a9d3 100644
--- a/src/canvas-whiteboard.component.ts
+++ b/src/canvas-whiteboard.component.ts
@@ -16,7 +16,7 @@ import {CanvasWhiteboardShape} from "./shapes/canvas-whiteboard-shape";
 import {CanvasWhiteboardPoint} from "./canvas-whiteboard-point";
 import {CanvasWhiteboardShapeService, INewCanvasWhiteboardShape} from "./shapes/canvas-whiteboard-shape.service";
 import {CanvasWhiteboardShapeOptions} from "./shapes/canvas-whiteboard-shape-options";
-import {fromEvent, Subscription} from "rxjs/index";
+import {fromEvent, Subscription} from "rxjs";
 import {debounceTime, distinctUntilChanged} from "rxjs/operators";
 import {cloneDeep} from "lodash";
 
@@ -142,10 +142,10 @@ export class CanvasWhiteboardComponent implements OnInit, AfterViewInit, OnChang
     @Output() onImageLoaded = new EventEmitter<any>();
     @Output() onSave = new EventEmitter<string | Blob>();
 
-    @ViewChild('canvas') canvas: ElementRef;
+    @ViewChild('canvas', { static: true }) canvas: ElementRef;
     context: CanvasRenderingContext2D;
 
-    @ViewChild('incompleteShapesCanvas') private _incompleteShapesCanvas: ElementRef;
+    @ViewChild('incompleteShapesCanvas', { static: true }) private _incompleteShapesCanvas: ElementRef;
     private _incompleteShapesCanvasContext: CanvasRenderingContext2D;
     private _incompleteShapesMap: Map<string, CanvasWhiteboardShape>;
 
@@ -954,9 +954,10 @@ export class CanvasWhiteboardComponent implements OnInit, AfterViewInit, OnChang
 
         if (typeof this.context.canvas.toBlob !== "undefined") {
             toBlobMethod = this.context.canvas.toBlob.bind(this.context.canvas);
-        } else if (typeof this.context.canvas.msToBlob !== "undefined") {
+        } else if (typeof (this.context.canvas as any).msToBlob !== "undefined") {
+            // For IE
             toBlobMethod = (callback) => {
-                callback && callback(this.context.canvas.msToBlob());
+                callback && callback((this.context.canvas as any).msToBlob());
             };
         }
 
diff --git a/src/canvas-whiteboard.service.js b/src/canvas-whiteboard.service.js
index 319a04cb..011b4b0f 100644
--- a/src/canvas-whiteboard.service.js
+++ b/src/canvas-whiteboard.service.js
@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var index_1 = require("rxjs/index");
+var rxjs_1 = require("rxjs");
 var CanvasWhiteboardService = /** @class */ (function () {
     function CanvasWhiteboardService() {
-        this._canvasDrawSubject = new index_1.Subject();
+        this._canvasDrawSubject = new rxjs_1.Subject();
         this.canvasDrawSubject$ = this._canvasDrawSubject.asObservable();
-        this._canvasClearSubject = new index_1.Subject();
+        this._canvasClearSubject = new rxjs_1.Subject();
         this.canvasClearSubject$ = this._canvasClearSubject.asObservable();
-        this._canvasUndoSubject = new index_1.Subject();
+        this._canvasUndoSubject = new rxjs_1.Subject();
         this.canvasUndoSubject$ = this._canvasUndoSubject.asObservable();
-        this._canvasRedoSubject = new index_1.Subject();
+        this._canvasRedoSubject = new rxjs_1.Subject();
         this.canvasRedoSubject$ = this._canvasRedoSubject.asObservable();
     }
     CanvasWhiteboardService.prototype.drawCanvas = function (updates) {
diff --git a/src/canvas-whiteboard.service.ts b/src/canvas-whiteboard.service.ts
index f3763285..264b574f 100644
--- a/src/canvas-whiteboard.service.ts
+++ b/src/canvas-whiteboard.service.ts
@@ -1,5 +1,5 @@
 import {CanvasWhiteboardUpdate} from "./canvas-whiteboard-update.model";
-import {Observable, Subject} from "rxjs/index";
+import {Observable, Subject} from "rxjs";
 
 export class CanvasWhiteboardService {
     private _canvasDrawSubject: Subject<CanvasWhiteboardUpdate[]> = new Subject();
diff --git a/src/shapes/canvas-whiteboard-shape-selector.component.ts b/src/shapes/canvas-whiteboard-shape-selector.component.ts
index f123a3e8..584a9b32 100644
--- a/src/shapes/canvas-whiteboard-shape-selector.component.ts
+++ b/src/shapes/canvas-whiteboard-shape-selector.component.ts
@@ -8,7 +8,7 @@ import {
 import {CanvasWhiteboardShapeService, INewCanvasWhiteboardShape} from "./canvas-whiteboard-shape.service";
 import {CanvasWhiteboardShape} from "./canvas-whiteboard-shape";
 import {CanvasWhiteboardShapeOptions} from "./canvas-whiteboard-shape-options";
-import {Observable} from "rxjs/index";
+import {Observable} from "rxjs";
 
 @Component({
     selector: "canvas-whiteboard-shape-selector",
diff --git a/src/shapes/canvas-whiteboard-shape.service.js b/src/shapes/canvas-whiteboard-shape.service.js
index dc292b01..1bf4513f 100644
--- a/src/shapes/canvas-whiteboard-shape.service.js
+++ b/src/shapes/canvas-whiteboard-shape.service.js
@@ -16,10 +16,10 @@ var free_hand_shape_1 = require("./free-hand-shape");
 var smiley_shape_1 = require("./smiley-shape");
 var star_shape_1 = require("./star-shape");
 var line_shape_1 = require("./line-shape");
-var index_1 = require("rxjs/index");
+var rxjs_1 = require("rxjs");
 var CanvasWhiteboardShapeService = /** @class */ (function () {
     function CanvasWhiteboardShapeService() {
-        this._registeredShapesSubject = new index_1.BehaviorSubject([
+        this._registeredShapesSubject = new rxjs_1.BehaviorSubject([
             free_hand_shape_1.FreeHandShape,
             line_shape_1.LineShape,
             rectangle_shape_1.RectangleShape,
@@ -30,7 +30,9 @@ var CanvasWhiteboardShapeService = /** @class */ (function () {
         this.registeredShapes$ = this._registeredShapesSubject.asObservable();
     }
     CanvasWhiteboardShapeService.prototype.getShapeConstructorFromShapeName = function (shapeName) {
-        return this.getCurrentRegisteredShapes().find(function (shape) { return shape.name === shapeName; });
+        return this.getCurrentRegisteredShapes().find(function (shape) {
+            return (new shape).getShapeName() === shapeName;
+        });
     };
     CanvasWhiteboardShapeService.prototype.getCurrentRegisteredShapes = function () {
         return this._registeredShapesSubject.getValue();
diff --git a/src/shapes/canvas-whiteboard-shape.service.ts b/src/shapes/canvas-whiteboard-shape.service.ts
index ffd04c3f..9cb58e6b 100644
--- a/src/shapes/canvas-whiteboard-shape.service.ts
+++ b/src/shapes/canvas-whiteboard-shape.service.ts
@@ -8,7 +8,7 @@ import {CanvasWhiteboardPoint} from "../canvas-whiteboard-point";
 import {SmileyShape} from "./smiley-shape";
 import {StarShape} from "./star-shape";
 import {LineShape} from "./line-shape";
-import {BehaviorSubject, Observable} from "rxjs/index";
+import {BehaviorSubject, Observable} from "rxjs";
 
 export interface INewCanvasWhiteboardShape<T extends CanvasWhiteboardShape> {
     new(positionPoint?: CanvasWhiteboardPoint, options?: CanvasWhiteboardShapeOptions, ...args: any[]): T;
diff --git a/src/shapes/circle-shape.js b/src/shapes/circle-shape.js
index b92ba0aa..010afd0c 100644
--- a/src/shapes/circle-shape.js
+++ b/src/shapes/circle-shape.js
@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -19,6 +22,9 @@ var CircleShape = /** @class */ (function (_super) {
         _this.radius = radius || 0;
         return _this;
     }
+    CircleShape.prototype.getShapeName = function () {
+        return 'CircleShape';
+    };
     CircleShape.prototype.draw = function (context) {
         context.beginPath();
         context.arc(this.positionPoint.x, this.positionPoint.y, this.radius, 0, Math.PI * 2, false);
diff --git a/src/shapes/free-hand-shape.js b/src/shapes/free-hand-shape.js
index 6ef8855d..30e90225 100644
--- a/src/shapes/free-hand-shape.js
+++ b/src/shapes/free-hand-shape.js
@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -19,6 +22,9 @@ var FreeHandShape = /** @class */ (function (_super) {
         _this.linePositions = [];
         return _this;
     }
+    FreeHandShape.prototype.getShapeName = function () {
+        return 'FreeHandShape';
+    };
     FreeHandShape.prototype.draw = function (context) {
         Object.assign(context, this.options);
         context.beginPath();
diff --git a/src/shapes/line-shape.js b/src/shapes/line-shape.js
index 78a06b67..5047ef6f 100644
--- a/src/shapes/line-shape.js
+++ b/src/shapes/line-shape.js
@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -19,6 +22,9 @@ var LineShape = /** @class */ (function (_super) {
         _this.endPosition = endPosition || new canvas_whiteboard_point_1.CanvasWhiteboardPoint(_this.positionPoint.x, _this.positionPoint.y);
         return _this;
     }
+    LineShape.prototype.getShapeName = function () {
+        return 'LineShape';
+    };
     LineShape.prototype.draw = function (context) {
         if (!this.endPosition) {
             return;
diff --git a/src/shapes/rectangle-shape.js b/src/shapes/rectangle-shape.js
index 60a82db4..400c581d 100644
--- a/src/shapes/rectangle-shape.js
+++ b/src/shapes/rectangle-shape.js
@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -20,6 +23,9 @@ var RectangleShape = /** @class */ (function (_super) {
         _this.height = height || 0;
         return _this;
     }
+    RectangleShape.prototype.getShapeName = function () {
+        return 'RectangleShape';
+    };
     RectangleShape.prototype.draw = function (context) {
         if (!this.width || !this.height) {
             return;
diff --git a/src/shapes/smiley-shape.js b/src/shapes/smiley-shape.js
index a536511f..fa9449f6 100644
--- a/src/shapes/smiley-shape.js
+++ b/src/shapes/smiley-shape.js
@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -16,11 +19,14 @@ var SmileyShape = /** @class */ (function (_super) {
     __extends(SmileyShape, _super);
     function SmileyShape(positionPoint, options, radius) {
         var _this = _super.call(this, positionPoint, options) || this;
-        options.shouldFillShape = true;
-        options.fillStyle = options.fillStyle || "yellow";
+        _this.options.shouldFillShape = true;
+        _this.options.fillStyle = _this.options.fillStyle || "yellow";
         _this.radius = radius || 0;
         return _this;
     }
+    SmileyShape.prototype.getShapeName = function () {
+        return 'SmileyShape';
+    };
     SmileyShape.prototype.draw = function (context) {
         context.beginPath();
         Object.assign(context, this.options);
diff --git a/src/shapes/star-shape.js b/src/shapes/star-shape.js
index 74b342c7..26e28101 100644
--- a/src/shapes/star-shape.js
+++ b/src/shapes/star-shape.js
@@ -1,8 +1,11 @@
 "use strict";
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -17,9 +20,12 @@ var StarShape = /** @class */ (function (_super) {
     function StarShape(positionPoint, options, radius, spikes) {
         var _this = _super.call(this, positionPoint, options) || this;
         _this.radius = radius || 0;
-        _this.spikes = _this.spikes || 5;
+        _this.spikes = spikes || 5;
         return _this;
     }
+    StarShape.prototype.getShapeName = function () {
+        return 'StarShape';
+    };
     StarShape.prototype.draw = function (context) {
         Object.assign(context, this.options);
         var rotation = Math.PI / 2 * 3;
diff --git a/tsconfig-build.json b/tsconfig-build.json
index 53597348..940aad14 100644
--- a/tsconfig-build.json
+++ b/tsconfig-build.json
@@ -20,6 +20,7 @@
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "flatModuleOutFile": "ng2-canvas-whiteboard.js",
-    "flatModuleId": "ng2-canvas-whiteboard"
+    "flatModuleId": "ng2-canvas-whiteboard",
+    "enableIvy": false
   }
 }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 61ab6936..573c86ce 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,9 @@
       "lodash"
     ]
   },
+  "angularCompilerOptions": {
+    "enableIvy": false
+  },
   "exclude": [
     "node_modules",
     "example",