angular-resizable-element - npm Package Compare versions

Comparing version 3.4.0 to 4.0.0

angular-resizable-element.d.ts

 /**
  * Generated bundle index. Do not edit.
  */
-export * from './index';
+export * from './public-api';

angular-resizable-element.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"ResizableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ResizableDirective"},{"__symbolic":"reference","name":"ResizeHandleDirective"}],"exports":[{"__symbolic":"reference","name":"ResizableDirective"},{"__symbolic":"reference","name":"ResizeHandleDirective"}]}]}],"members":{}},"BoundingRectangle":{"__symbolic":"interface"},"Edges":{"__symbolic":"interface"},"ResizeEvent":{"__symbolic":"interface"},"ResizableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":291,"character":1},"arguments":[{"selector":"[mwlResizable]","exportAs":"mwlResizable"}]}],"members":{"validateResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":299,"character":3}}]}],"resizeEdges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":305,"character":3}}]}],"enableGhostResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":310,"character":3}}]}],"resizeSnapGrid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":317,"character":3}}]}],"resizeCursors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":322,"character":3}}]}],"resizeCursorPrecision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":328,"character":3}}]}],"ghostElementPositioning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":333,"character":3}}]}],"allowNegativeResizes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":338,"character":3}}]}],"mouseMoveThrottleMS":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":343,"character":3}}]}],"resizeStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":348,"character":3}}]}],"resizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":353,"character":3}}]}],"resizeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":358,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":398,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":398,"character":12}]}],null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":399,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":400,"character":16},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":401,"character":18}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setElementClass":[{"__symbolic":"method"}]}},"ResizeHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":32,"character":1},"arguments":[{"selector":"[mwlResizeHandle]"}]}],"members":{"resizeEdges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"resizableContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":57,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":54,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":55,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":56,"character":18},{"__symbolic":"reference","name":"ResizableDirective"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onMousedown":[{"__symbolic":"method"}],"onMouseup":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method"}],"unsubscribeEventListeners":[{"__symbolic":"method"}],"listenOnTheHost":[{"__symbolic":"method"}]}}},"origins":{"ResizableModule":"./resizable.module","BoundingRectangle":"./interfaces/bounding-rectangle.interface","Edges":"./interfaces/edges.interface","ResizeEvent":"./interfaces/resize-event.interface","ResizableDirective":"./resizable.directive","ResizeHandleDirective":"./resize-handle.directive"},"importAs":"angular-resizable-element"}
+{"__symbolic":"module","version":4,"metadata":{"ResizableModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ResizableDirective"},{"__symbolic":"reference","name":"ResizeHandleDirective"}],"exports":[{"__symbolic":"reference","name":"ResizableDirective"},{"__symbolic":"reference","name":"ResizeHandleDirective"}]}]}],"members":{}},"BoundingRectangle":{"__symbolic":"interface"},"Edges":{"__symbolic":"interface"},"ResizeEvent":{"__symbolic":"interface"},"ResizableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":204,"character":1},"arguments":[{"selector":"[mwlResizable]","exportAs":"mwlResizable"}]}],"members":{"validateResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":3}}]}],"enableGhostResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":217,"character":3}}]}],"resizeSnapGrid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":3}}]}],"resizeCursors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":229,"character":3}}]}],"ghostElementPositioning":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":234,"character":3}}]}],"allowNegativeResizes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":239,"character":3}}]}],"mouseMoveThrottleMS":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":244,"character":3}}]}],"resizeStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":249,"character":3}}]}],"resizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":254,"character":3}}]}],"resizeEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":259,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":297,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":297,"character":12}]}],null,null,null],"parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":298,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":299,"character":16},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":300,"character":18}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setElementClass":[{"__symbolic":"method"}]}},"ResizeHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":32,"character":1},"arguments":[{"selector":"[mwlResizeHandle]"}]}],"members":{"resizeEdges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"resizableContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":57,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":54,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":55,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":56,"character":18},{"__symbolic":"reference","name":"ResizableDirective"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onMousedown":[{"__symbolic":"method"}],"onMouseup":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method"}],"unsubscribeEventListeners":[{"__symbolic":"method"}],"listenOnTheHost":[{"__symbolic":"method"}]}}},"origins":{"ResizableModule":"./lib/resizable.module","BoundingRectangle":"./lib/interfaces/bounding-rectangle.interface","Edges":"./lib/interfaces/edges.interface","ResizeEvent":"./lib/interfaces/resize-event.interface","ResizableDirective":"./lib/resizable.directive","ResizeHandleDirective":"./lib/resize-handle.directive"},"importAs":"angular-resizable-element"}

bundles/angular-resizable-element.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('angular-resizable-element', ['exports', '@angular/common', '@angular/core', 'rxjs', 'rxjs/operators'], factory) :
-    (factory((global['angular-resizable-element'] = {}),global.ng.common,global.ng.core,global.rxjs,global.rxjs.operators));
-}(this, (function (exports,common,core,rxjs,operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('angular-resizable-element', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['angular-resizable-element'] = {}, global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators));
+}(this, (function (exports, core, common, rxjs, operators) { 'use strict';
 
     /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
+    Copyright (c) Microsoft Corporation.
 
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
 
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
+    /* global Reflect, Promise */
+    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 (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
     var __assign = function () {
@@ -33,2 +49,147 @@ __assign = Object.assign || function __assign(t) {
     };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
     function __read(o, n) {
@@ -58,12 +219,110 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
     }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
-     * @hidden
-     * @type {?}
-     */
-    var IS_TOUCH_DEVICE = (function () {
+    var ɵ0 = function () {
         // In case we're in Node.js environment.
@@ -78,31 +337,69 @@ if (typeof window === 'undefined') {
         }
-    })();
-
+    };
     /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     * @hidden
      */
-    /**
-     * @param {?} value1
-     * @param {?} value2
-     * @param {?=} precision
-     * @return {?}
-     */
-    function isNumberCloseTo(value1, value2, precision) {
-        if (precision === void 0) {
-            precision = 3;
+    var IS_TOUCH_DEVICE = (ɵ0)();
+
+    /** Creates a deep clone of an element. */
+    function deepCloneNode(node) {
+        var clone = node.cloneNode(true);
+        var descendantsWithId = clone.querySelectorAll('[id]');
+        var nodeName = node.nodeName.toLowerCase();
+        // Remove the `id` to avoid having multiple elements with the same id on the page.
+        clone.removeAttribute('id');
+        descendantsWithId.forEach(function (descendant) {
+            descendant.removeAttribute('id');
+        });
+        if (nodeName === 'canvas') {
+            transferCanvasData(node, clone);
         }
-        /** @type {?} */
-        var diff = Math.abs(value1 - value2);
-        return diff < precision;
+        else if (nodeName === 'input' ||
+            nodeName === 'select' ||
+            nodeName === 'textarea') {
+            transferInputData(node, clone);
+        }
+        transferData('canvas', node, clone, transferCanvasData);
+        transferData('input, textarea, select', node, clone, transferInputData);
+        return clone;
     }
-    /**
-     * @param {?} startingRect
-     * @param {?} edges
-     * @param {?} clientX
-     * @param {?} clientY
-     * @return {?}
-     */
+    /** Matches elements between an element and its clone and allows for their data to be cloned. */
+    function transferData(selector, node, clone, callback) {
+        var descendantElements = node.querySelectorAll(selector);
+        if (descendantElements.length) {
+            var cloneElements = clone.querySelectorAll(selector);
+            for (var i = 0; i < descendantElements.length; i++) {
+                callback(descendantElements[i], cloneElements[i]);
+            }
+        }
+    }
+    // Counter for unique cloned radio button names.
+    var cloneUniqueId = 0;
+    /** Transfers the data of one input element to another. */
+    function transferInputData(source, clone) {
+        // Browsers throw an error when assigning the value of a file input programmatically.
+        if (clone.type !== 'file') {
+            clone.value = source.value;
+        }
+        // Radio button `name` attributes must be unique for radio button groups
+        // otherwise original radio buttons can lose their checked state
+        // once the clone is inserted in the DOM.
+        if (clone.type === 'radio' && clone.name) {
+            clone.name = "mat-clone-" + clone.name + "-" + cloneUniqueId++;
+        }
+    }
+    /** Transfers the data of one canvas element to another. */
+    function transferCanvasData(source, clone) {
+        var context = clone.getContext('2d');
+        if (context) {
+            // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
+            // We can't do much about it so just ignore the error.
+            try {
+                context.drawImage(source, 0, 0);
+            }
+            catch (_a) { }
+        }
+    }
+
     function getNewBoundingRectangle(startingRect, edges, clientX, clientY) {
-        /** @type {?} */
         var newBoundingRect = {
@@ -112,3 +409,3 @@ top: startingRect.top,
             left: startingRect.left,
-            right: startingRect.right
+            right: startingRect.right,
         };
@@ -131,15 +428,6 @@ if (edges.top) {
     }
-    /**
-     * @param {?} element
-     * @param {?} ghostElementPositioning
-     * @return {?}
-     */
     function getElementRect(element, ghostElementPositioning) {
-        /** @type {?} */
         var translateX = 0;
-        /** @type {?} */
         var translateY = 0;
-        /** @type {?} */
         var style = element.nativeElement.style;
-        /** @type {?} */
         var transformProperties = [
@@ -149,5 +437,4 @@ 'transform',
             '-moz-transform',
-            '-o-transform'
+            '-o-transform',
         ];
-        /** @type {?} */
         var transform = transformProperties
@@ -171,7 +458,6 @@ .map(function (property) { return style[property]; })
                     element.nativeElement.offsetLeft -
-                    translateX
+                    translateX,
             };
         }
         else {
-            /** @type {?} */
             var boundingRect = element.nativeElement.getBoundingClientRect();
@@ -186,55 +472,6 @@ return {
                 scrollTop: element.nativeElement.scrollTop,
-                scrollLeft: element.nativeElement.scrollLeft
+                scrollLeft: element.nativeElement.scrollLeft,
             };
         }
     }
-    /**
-     * @param {?} __0
-     * @return {?}
-     */
-    function isWithinBoundingY(_a) {
-        var clientY = _a.clientY, rect = _a.rect;
-        return clientY >= rect.top && clientY <= rect.bottom;
-    }
-    /**
-     * @param {?} __0
-     * @return {?}
-     */
-    function isWithinBoundingX(_a) {
-        var clientX = _a.clientX, rect = _a.rect;
-        return clientX >= rect.left && clientX <= rect.right;
-    }
-    /**
-     * @param {?} __0
-     * @return {?}
-     */
-    function getResizeEdges(_a) {
-        var clientX = _a.clientX, clientY = _a.clientY, elm = _a.elm, allowedEdges = _a.allowedEdges, cursorPrecision = _a.cursorPrecision;
-        /** @type {?} */
-        var elmPosition = elm.nativeElement.getBoundingClientRect();
-        /** @type {?} */
-        var edges = {};
-        if (allowedEdges.left &&
-            isNumberCloseTo(clientX, elmPosition.left, cursorPrecision) &&
-            isWithinBoundingY({ clientY: clientY, rect: elmPosition })) {
-            edges.left = true;
-        }
-        if (allowedEdges.right &&
-            isNumberCloseTo(clientX, elmPosition.right, cursorPrecision) &&
-            isWithinBoundingY({ clientY: clientY, rect: elmPosition })) {
-            edges.right = true;
-        }
-        if (allowedEdges.top &&
-            isNumberCloseTo(clientY, elmPosition.top, cursorPrecision) &&
-            isWithinBoundingX({ clientX: clientX, rect: elmPosition })) {
-            edges.top = true;
-        }
-        if (allowedEdges.bottom &&
-            isNumberCloseTo(clientY, elmPosition.bottom, cursorPrecision) &&
-            isWithinBoundingX({ clientX: clientX, rect: elmPosition })) {
-            edges.bottom = true;
-        }
-        return edges;
-    }
-    /** @type {?} */
     var DEFAULT_RESIZE_CURSORS = Object.freeze({
@@ -246,9 +483,4 @@ topLeft: 'nw-resize',
         leftOrRight: 'col-resize',
-        topOrBottom: 'row-resize'
+        topOrBottom: 'row-resize',
     });
-    /**
-     * @param {?} edges
-     * @param {?} cursors
-     * @return {?}
-     */
     function getResizeCursor(edges, cursors) {
@@ -277,9 +509,4 @@ if (edges.left && edges.top) {
     }
-    /**
-     * @param {?} __0
-     * @return {?}
-     */
     function getEdgesDiff(_a) {
         var edges = _a.edges, initialRectangle = _a.initialRectangle, newRectangle = _a.newRectangle;
-        /** @type {?} */
         var edgesDiff = {};
@@ -291,15 +518,4 @@ Object.keys(edges).forEach(function (edge) {
     }
-    /** @type {?} */
     var RESIZE_ACTIVE_CLASS = 'resize-active';
-    /** @type {?} */
-    var RESIZE_LEFT_HOVER_CLASS = 'resize-left-hover';
-    /** @type {?} */
-    var RESIZE_RIGHT_HOVER_CLASS = 'resize-right-hover';
-    /** @type {?} */
-    var RESIZE_TOP_HOVER_CLASS = 'resize-top-hover';
-    /** @type {?} */
-    var RESIZE_BOTTOM_HOVER_CLASS = 'resize-bottom-hover';
-    /** @type {?} */
     var RESIZE_GHOST_ELEMENT_CLASS = 'resize-ghost-element';
-    /** @type {?} */
     var MOUSE_MOVE_THROTTLE_MS = 50;
@@ -332,7 +548,2 @@ /**
             /**
-             * The edges that an element can be resized from. Pass an object like `{top: true, bottom: false}`. By default no edges can be resized.
-             * @deprecated use a resize handle instead that positions itself to the side of the element you would like to resize
-             */
-            this.resizeEdges = {};
-            /**
              * Set to `true` to enable a temporary resizing effect of the element in between the `resizeStart` and `resizeEnd` events.
@@ -352,7 +563,2 @@ */
             /**
-             * Mouse over thickness to active cursor.
-             * @deprecated invalid when you migrate to use resize handles instead of setting resizeEdges on the element
-             */
-            this.resizeCursorPrecision = 3;
-            /**
              * Define the positioning of the ghost element (can be fixed or absolute)
@@ -394,3 +600,2 @@ */
             this.destroy$ = new rxjs.Subject();
-            this.resizeEdges$ = new rxjs.Subject();
             this.pointerEventListeners = PointerEventListeners.getInstance(renderer, zone);
@@ -401,377 +606,259 @@ }
          */
-        /**
-         * @hidden
-         * @return {?}
-         */
-        ResizableDirective.prototype.ngOnInit = /**
-         * @hidden
-         * @return {?}
-         */
-            function () {
-                var _this = this;
-                /** @type {?} */
-                var mousedown$ = rxjs.merge(this.pointerEventListeners.pointerDown, this.mousedown);
-                /** @type {?} */
-                var mousemove$ = rxjs.merge(this.pointerEventListeners.pointerMove, this.mousemove).pipe(operators.tap(function (_a) {
-                    var event = _a.event;
+        ResizableDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            var mousedown$ = rxjs.merge(this.pointerEventListeners.pointerDown, this.mousedown);
+            var mousemove$ = rxjs.merge(this.pointerEventListeners.pointerMove, this.mousemove).pipe(operators.tap(function (_a) {
+                var event = _a.event;
+                if (currentResize) {
+                    try {
+                        event.preventDefault();
+                    }
+                    catch (e) {
+                        // just adding try-catch not to see errors in console if there is a passive listener for same event somewhere
+                        // browser does nothing except of writing errors to console
+                    }
+                }
+            }), operators.share());
+            var mouseup$ = rxjs.merge(this.pointerEventListeners.pointerUp, this.mouseup);
+            var currentResize;
+            var removeGhostElement = function () {
+                if (currentResize && currentResize.clonedNode) {
+                    _this.elm.nativeElement.parentElement.removeChild(currentResize.clonedNode);
+                    _this.renderer.setStyle(_this.elm.nativeElement, 'visibility', 'inherit');
+                }
+            };
+            var getResizeCursors = function () {
+                return Object.assign(Object.assign({}, DEFAULT_RESIZE_CURSORS), _this.resizeCursors);
+            };
+            var mousedrag = mousedown$
+                .pipe(operators.mergeMap(function (startCoords) {
+                function getDiff(moveCoords) {
+                    return {
+                        clientX: moveCoords.clientX - startCoords.clientX,
+                        clientY: moveCoords.clientY - startCoords.clientY,
+                    };
+                }
+                var getSnapGrid = function () {
+                    var snapGrid = { x: 1, y: 1 };
                     if (currentResize) {
-                        try {
-                            event.preventDefault();
+                        if (_this.resizeSnapGrid.left && currentResize.edges.left) {
+                            snapGrid.x = +_this.resizeSnapGrid.left;
                         }
-                        catch (e) {
-                            // just adding try-catch not to see errors in console if there is a passive listener for same event somewhere
-                            // browser does nothing except of writing errors to console
+                        else if (_this.resizeSnapGrid.right &&
+                            currentResize.edges.right) {
+                            snapGrid.x = +_this.resizeSnapGrid.right;
                         }
+                        if (_this.resizeSnapGrid.top && currentResize.edges.top) {
+                            snapGrid.y = +_this.resizeSnapGrid.top;
+                        }
+                        else if (_this.resizeSnapGrid.bottom &&
+                            currentResize.edges.bottom) {
+                            snapGrid.y = +_this.resizeSnapGrid.bottom;
+                        }
                     }
-                }), operators.share());
-                /** @type {?} */
-                var mouseup$ = rxjs.merge(this.pointerEventListeners.pointerUp, this.mouseup);
-                /** @type {?} */
-                var currentResize;
-                /** @type {?} */
-                var removeGhostElement = function () {
-                    if (currentResize && currentResize.clonedNode) {
-                        _this.elm.nativeElement.parentElement.removeChild(currentResize.clonedNode);
-                        _this.renderer.setStyle(_this.elm.nativeElement, 'visibility', 'inherit');
-                    }
+                    return snapGrid;
                 };
-                /** @type {?} */
-                var getResizeCursors = function () {
-                    return __assign({}, DEFAULT_RESIZE_CURSORS, _this.resizeCursors);
-                };
-                this.resizeEdges$
-                    .pipe(operators.startWith(this.resizeEdges), operators.map(function () {
-                    return (_this.resizeEdges &&
-                        Object.keys(_this.resizeEdges).some(function (edge) { return !!_this.resizeEdges[edge]; }));
-                }), operators.switchMap(function (legacyResizeEdgesEnabled) {
-                    return legacyResizeEdgesEnabled ? mousemove$ : rxjs.EMPTY;
-                }), operators.auditTime(this.mouseMoveThrottleMS), operators.takeUntil(this.destroy$))
-                    .subscribe(function (_a) {
-                    var clientX = _a.clientX, clientY = _a.clientY;
-                    /** @type {?} */
-                    var resizeEdges = getResizeEdges({
-                        clientX: clientX,
-                        clientY: clientY,
-                        elm: _this.elm,
-                        allowedEdges: _this.resizeEdges,
-                        cursorPrecision: _this.resizeCursorPrecision
-                    });
-                    /** @type {?} */
-                    var resizeCursors = getResizeCursors();
-                    if (!currentResize) {
-                        /** @type {?} */
-                        var cursor = getResizeCursor(resizeEdges, resizeCursors);
-                        _this.renderer.setStyle(_this.elm.nativeElement, 'cursor', cursor);
-                    }
-                    _this.setElementClass(_this.elm, RESIZE_LEFT_HOVER_CLASS, resizeEdges.left === true);
-                    _this.setElementClass(_this.elm, RESIZE_RIGHT_HOVER_CLASS, resizeEdges.right === true);
-                    _this.setElementClass(_this.elm, RESIZE_TOP_HOVER_CLASS, resizeEdges.top === true);
-                    _this.setElementClass(_this.elm, RESIZE_BOTTOM_HOVER_CLASS, resizeEdges.bottom === true);
-                });
-                /** @type {?} */
-                var mousedrag = mousedown$
-                    .pipe(operators.mergeMap(function (startCoords) {
-                    /**
-                     * @param {?} moveCoords
-                     * @return {?}
-                     */
-                    function getDiff(moveCoords) {
-                        return {
-                            clientX: moveCoords.clientX - startCoords.clientX,
-                            clientY: moveCoords.clientY - startCoords.clientY
-                        };
-                    }
-                    /** @type {?} */
-                    var getSnapGrid = function () {
-                        /** @type {?} */
-                        var snapGrid = { x: 1, y: 1 };
-                        if (currentResize) {
-                            if (_this.resizeSnapGrid.left && currentResize.edges.left) {
-                                snapGrid.x = +_this.resizeSnapGrid.left;
-                            }
-                            else if (_this.resizeSnapGrid.right &&
-                                currentResize.edges.right) {
-                                snapGrid.x = +_this.resizeSnapGrid.right;
-                            }
-                            if (_this.resizeSnapGrid.top && currentResize.edges.top) {
-                                snapGrid.y = +_this.resizeSnapGrid.top;
-                            }
-                            else if (_this.resizeSnapGrid.bottom &&
-                                currentResize.edges.bottom) {
-                                snapGrid.y = +_this.resizeSnapGrid.bottom;
-                            }
-                        }
-                        return snapGrid;
+                function getGrid(coords, snapGrid) {
+                    return {
+                        x: Math.ceil(coords.clientX / snapGrid.x),
+                        y: Math.ceil(coords.clientY / snapGrid.y),
                     };
-                    /**
-                     * @param {?} coords
-                     * @param {?} snapGrid
-                     * @return {?}
-                     */
-                    function getGrid(coords, snapGrid) {
-                        return {
-                            x: Math.ceil(coords.clientX / snapGrid.x),
-                            y: Math.ceil(coords.clientY / snapGrid.y)
-                        };
+                }
+                return rxjs.merge(mousemove$.pipe(operators.take(1)).pipe(operators.map(function (coords) { return [, coords]; })), mousemove$.pipe(operators.pairwise()))
+                    .pipe(operators.map(function (_a) {
+                    var _b = __read(_a, 2), previousCoords = _b[0], newCoords = _b[1];
+                    return [
+                        previousCoords ? getDiff(previousCoords) : previousCoords,
+                        getDiff(newCoords),
+                    ];
+                }))
+                    .pipe(operators.filter(function (_a) {
+                    var _b = __read(_a, 2), previousCoords = _b[0], newCoords = _b[1];
+                    if (!previousCoords) {
+                        return true;
                     }
-                    return (( /** @type {?} */(rxjs.merge(mousemove$.pipe(operators.take(1)).pipe(operators.map(function (coords) { return [, coords]; })), mousemove$.pipe(operators.pairwise())))))
-                        .pipe(operators.map(function (_a) {
-                        var _b = __read(_a, 2), previousCoords = _b[0], newCoords = _b[1];
-                        return [
-                            previousCoords ? getDiff(previousCoords) : previousCoords,
-                            getDiff(newCoords)
-                        ];
-                    }))
-                        .pipe(operators.filter(function (_a) {
-                        var _b = __read(_a, 2), previousCoords = _b[0], newCoords = _b[1];
-                        if (!previousCoords) {
-                            return true;
-                        }
-                        /** @type {?} */
-                        var snapGrid = getSnapGrid();
-                        /** @type {?} */
-                        var previousGrid = getGrid(previousCoords, snapGrid);
-                        /** @type {?} */
-                        var newGrid = getGrid(newCoords, snapGrid);
-                        return (previousGrid.x !== newGrid.x || previousGrid.y !== newGrid.y);
-                    }))
-                        .pipe(operators.map(function (_a) {
-                        var _b = __read(_a, 2), newCoords = _b[1];
-                        /** @type {?} */
-                        var snapGrid = getSnapGrid();
-                        return {
-                            clientX: Math.round(newCoords.clientX / snapGrid.x) * snapGrid.x,
-                            clientY: Math.round(newCoords.clientY / snapGrid.y) * snapGrid.y
-                        };
-                    }))
-                        .pipe(operators.takeUntil(rxjs.merge(mouseup$, mousedown$)));
+                    var snapGrid = getSnapGrid();
+                    var previousGrid = getGrid(previousCoords, snapGrid);
+                    var newGrid = getGrid(newCoords, snapGrid);
+                    return (previousGrid.x !== newGrid.x || previousGrid.y !== newGrid.y);
                 }))
-                    .pipe(operators.filter(function () { return !!currentResize; }));
-                mousedrag
                     .pipe(operators.map(function (_a) {
-                    var clientX = _a.clientX, clientY = _a.clientY;
-                    return getNewBoundingRectangle(( /** @type {?} */(currentResize)).startingRect, ( /** @type {?} */(currentResize)).edges, clientX, clientY);
+                    var _b = __read(_a, 2), newCoords = _b[1];
+                    var snapGrid = getSnapGrid();
+                    return {
+                        clientX: Math.round(newCoords.clientX / snapGrid.x) * snapGrid.x,
+                        clientY: Math.round(newCoords.clientY / snapGrid.y) * snapGrid.y,
+                    };
                 }))
-                    .pipe(operators.filter(function (newBoundingRect) {
-                    return (_this.allowNegativeResizes ||
-                        !!(newBoundingRect.height &&
-                            newBoundingRect.width &&
-                            newBoundingRect.height > 0 &&
-                            newBoundingRect.width > 0));
-                }))
-                    .pipe(operators.filter(function (newBoundingRect) {
-                    return _this.validateResize
-                        ? _this.validateResize({
+                    .pipe(operators.takeUntil(rxjs.merge(mouseup$, mousedown$)));
+            }))
+                .pipe(operators.filter(function () { return !!currentResize; }));
+            mousedrag
+                .pipe(operators.map(function (_a) {
+                var clientX = _a.clientX, clientY = _a.clientY;
+                return getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, clientX, clientY);
+            }))
+                .pipe(operators.filter(function (newBoundingRect) {
+                return (_this.allowNegativeResizes ||
+                    !!(newBoundingRect.height &&
+                        newBoundingRect.width &&
+                        newBoundingRect.height > 0 &&
+                        newBoundingRect.width > 0));
+            }))
+                .pipe(operators.filter(function (newBoundingRect) {
+                return _this.validateResize
+                    ? _this.validateResize({
+                        rectangle: newBoundingRect,
+                        edges: getEdgesDiff({
+                            edges: currentResize.edges,
+                            initialRectangle: currentResize.startingRect,
+                            newRectangle: newBoundingRect,
+                        }),
+                    })
+                    : true;
+            }), operators.takeUntil(this.destroy$))
+                .subscribe(function (newBoundingRect) {
+                if (currentResize && currentResize.clonedNode) {
+                    _this.renderer.setStyle(currentResize.clonedNode, 'height', newBoundingRect.height + "px");
+                    _this.renderer.setStyle(currentResize.clonedNode, 'width', newBoundingRect.width + "px");
+                    _this.renderer.setStyle(currentResize.clonedNode, 'top', newBoundingRect.top + "px");
+                    _this.renderer.setStyle(currentResize.clonedNode, 'left', newBoundingRect.left + "px");
+                }
+                if (_this.resizing.observers.length > 0) {
+                    _this.zone.run(function () {
+                        _this.resizing.emit({
+                            edges: getEdgesDiff({
+                                edges: currentResize.edges,
+                                initialRectangle: currentResize.startingRect,
+                                newRectangle: newBoundingRect,
+                            }),
                             rectangle: newBoundingRect,
+                        });
+                    });
+                }
+                currentResize.currentRect = newBoundingRect;
+            });
+            mousedown$
+                .pipe(operators.map(function (_a) {
+                var edges = _a.edges;
+                return edges || {};
+            }), operators.filter(function (edges) {
+                return Object.keys(edges).length > 0;
+            }), operators.takeUntil(this.destroy$))
+                .subscribe(function (edges) {
+                if (currentResize) {
+                    removeGhostElement();
+                }
+                var startingRect = getElementRect(_this.elm, _this.ghostElementPositioning);
+                currentResize = {
+                    edges: edges,
+                    startingRect: startingRect,
+                    currentRect: startingRect,
+                };
+                var resizeCursors = getResizeCursors();
+                var cursor = getResizeCursor(currentResize.edges, resizeCursors);
+                _this.renderer.setStyle(document.body, 'cursor', cursor);
+                _this.setElementClass(_this.elm, RESIZE_ACTIVE_CLASS, true);
+                if (_this.enableGhostResize) {
+                    currentResize.clonedNode = deepCloneNode(_this.elm.nativeElement);
+                    _this.elm.nativeElement.parentElement.appendChild(currentResize.clonedNode);
+                    _this.renderer.setStyle(_this.elm.nativeElement, 'visibility', 'hidden');
+                    _this.renderer.setStyle(currentResize.clonedNode, 'position', _this.ghostElementPositioning);
+                    _this.renderer.setStyle(currentResize.clonedNode, 'left', currentResize.startingRect.left + "px");
+                    _this.renderer.setStyle(currentResize.clonedNode, 'top', currentResize.startingRect.top + "px");
+                    _this.renderer.setStyle(currentResize.clonedNode, 'height', currentResize.startingRect.height + "px");
+                    _this.renderer.setStyle(currentResize.clonedNode, 'width', currentResize.startingRect.width + "px");
+                    _this.renderer.setStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges, resizeCursors));
+                    _this.renderer.addClass(currentResize.clonedNode, RESIZE_GHOST_ELEMENT_CLASS);
+                    currentResize.clonedNode.scrollTop = currentResize.startingRect
+                        .scrollTop;
+                    currentResize.clonedNode.scrollLeft = currentResize.startingRect
+                        .scrollLeft;
+                }
+                if (_this.resizeStart.observers.length > 0) {
+                    _this.zone.run(function () {
+                        _this.resizeStart.emit({
                             edges: getEdgesDiff({
-                                edges: ( /** @type {?} */(currentResize)).edges,
-                                initialRectangle: ( /** @type {?} */(currentResize)).startingRect,
-                                newRectangle: newBoundingRect
-                            })
-                        })
-                        : true;
-                }), operators.takeUntil(this.destroy$))
-                    .subscribe(function (newBoundingRect) {
-                    if (currentResize && currentResize.clonedNode) {
-                        _this.renderer.setStyle(currentResize.clonedNode, 'height', newBoundingRect.height + "px");
-                        _this.renderer.setStyle(currentResize.clonedNode, 'width', newBoundingRect.width + "px");
-                        _this.renderer.setStyle(currentResize.clonedNode, 'top', newBoundingRect.top + "px");
-                        _this.renderer.setStyle(currentResize.clonedNode, 'left', newBoundingRect.left + "px");
-                    }
-                    if (_this.resizing.observers.length > 0) {
-                        _this.zone.run(function () {
-                            _this.resizing.emit({
-                                edges: getEdgesDiff({
-                                    edges: ( /** @type {?} */(currentResize)).edges,
-                                    initialRectangle: ( /** @type {?} */(currentResize)).startingRect,
-                                    newRectangle: newBoundingRect
-                                }),
-                                rectangle: newBoundingRect
-                            });
+                                edges: edges,
+                                initialRectangle: startingRect,
+                                newRectangle: startingRect,
+                            }),
+                            rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0),
                         });
-                    }
-                    ( /** @type {?} */(currentResize)).currentRect = newBoundingRect;
-                });
-                mousedown$
-                    .pipe(operators.map(function (_a) {
-                    var clientX = _a.clientX, clientY = _a.clientY, edges = _a.edges;
-                    return (edges ||
-                        getResizeEdges({
-                            clientX: clientX,
-                            clientY: clientY,
-                            elm: _this.elm,
-                            allowedEdges: _this.resizeEdges,
-                            cursorPrecision: _this.resizeCursorPrecision
-                        }));
-                }))
-                    .pipe(operators.filter(function (edges) {
-                    return Object.keys(edges).length > 0;
-                }), operators.takeUntil(this.destroy$))
-                    .subscribe(function (edges) {
-                    if (currentResize) {
-                        removeGhostElement();
-                    }
-                    /** @type {?} */
-                    var startingRect = getElementRect(_this.elm, _this.ghostElementPositioning);
-                    currentResize = {
-                        edges: edges,
-                        startingRect: startingRect,
-                        currentRect: startingRect
-                    };
-                    /** @type {?} */
-                    var resizeCursors = getResizeCursors();
-                    /** @type {?} */
-                    var cursor = getResizeCursor(currentResize.edges, resizeCursors);
-                    _this.renderer.setStyle(document.body, 'cursor', cursor);
-                    _this.setElementClass(_this.elm, RESIZE_ACTIVE_CLASS, true);
-                    if (_this.enableGhostResize) {
-                        currentResize.clonedNode = _this.elm.nativeElement.cloneNode(true);
-                        _this.elm.nativeElement.parentElement.appendChild(currentResize.clonedNode);
-                        _this.renderer.setStyle(_this.elm.nativeElement, 'visibility', 'hidden');
-                        _this.renderer.setStyle(currentResize.clonedNode, 'position', _this.ghostElementPositioning);
-                        _this.renderer.setStyle(currentResize.clonedNode, 'left', currentResize.startingRect.left + "px");
-                        _this.renderer.setStyle(currentResize.clonedNode, 'top', currentResize.startingRect.top + "px");
-                        _this.renderer.setStyle(currentResize.clonedNode, 'height', currentResize.startingRect.height + "px");
-                        _this.renderer.setStyle(currentResize.clonedNode, 'width', currentResize.startingRect.width + "px");
-                        _this.renderer.setStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges, resizeCursors));
-                        _this.renderer.addClass(currentResize.clonedNode, RESIZE_GHOST_ELEMENT_CLASS);
-                        ( /** @type {?} */(currentResize.clonedNode)).scrollTop = ( /** @type {?} */(currentResize.startingRect
-                            .scrollTop));
-                        ( /** @type {?} */(currentResize.clonedNode)).scrollLeft = ( /** @type {?} */(currentResize.startingRect
-                            .scrollLeft));
-                    }
-                    if (_this.resizeStart.observers.length > 0) {
+                    });
+                }
+            });
+            mouseup$.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                if (currentResize) {
+                    _this.renderer.removeClass(_this.elm.nativeElement, RESIZE_ACTIVE_CLASS);
+                    _this.renderer.setStyle(document.body, 'cursor', '');
+                    _this.renderer.setStyle(_this.elm.nativeElement, 'cursor', '');
+                    if (_this.resizeEnd.observers.length > 0) {
                         _this.zone.run(function () {
-                            _this.resizeStart.emit({
+                            _this.resizeEnd.emit({
                                 edges: getEdgesDiff({
-                                    edges: edges,
-                                    initialRectangle: startingRect,
-                                    newRectangle: startingRect
+                                    edges: currentResize.edges,
+                                    initialRectangle: currentResize.startingRect,
+                                    newRectangle: currentResize.currentRect,
                                 }),
-                                rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
+                                rectangle: currentResize.currentRect,
                             });
                         });
                     }
-                });
-                mouseup$.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
-                    if (currentResize) {
-                        _this.renderer.removeClass(_this.elm.nativeElement, RESIZE_ACTIVE_CLASS);
-                        _this.renderer.setStyle(document.body, 'cursor', '');
-                        _this.renderer.setStyle(_this.elm.nativeElement, 'cursor', '');
-                        if (_this.resizeEnd.observers.length > 0) {
-                            _this.zone.run(function () {
-                                _this.resizeEnd.emit({
-                                    edges: getEdgesDiff({
-                                        edges: ( /** @type {?} */(currentResize)).edges,
-                                        initialRectangle: ( /** @type {?} */(currentResize)).startingRect,
-                                        newRectangle: ( /** @type {?} */(currentResize)).currentRect
-                                    }),
-                                    rectangle: ( /** @type {?} */(currentResize)).currentRect
-                                });
-                            });
-                        }
-                        removeGhostElement();
-                        currentResize = null;
-                    }
-                });
-            };
-        /**
-         * @hidden
-         */
-        /**
-         * @hidden
-         * @param {?} changes
-         * @return {?}
-         */
-        ResizableDirective.prototype.ngOnChanges = /**
-         * @hidden
-         * @param {?} changes
-         * @return {?}
-         */
-            function (changes) {
-                if (changes.resizeEdges) {
-                    this.resizeEdges$.next(this.resizeEdges);
+                    removeGhostElement();
+                    currentResize = null;
                 }
-            };
+            });
+        };
         /**
          * @hidden
          */
-        /**
-         * @hidden
-         * @return {?}
-         */
-        ResizableDirective.prototype.ngOnDestroy = /**
-         * @hidden
-         * @return {?}
-         */
-            function () {
-                // browser check for angular universal, because it doesn't know what document is
-                if (common.isPlatformBrowser(this.platformId)) {
-                    this.renderer.setStyle(document.body, 'cursor', '');
-                }
-                this.mousedown.complete();
-                this.mouseup.complete();
-                this.mousemove.complete();
-                this.resizeEdges$.complete();
-                this.destroy$.next();
-            };
-        /**
-         * @private
-         * @param {?} elm
-         * @param {?} name
-         * @param {?} add
-         * @return {?}
-         */
-        ResizableDirective.prototype.setElementClass = /**
-         * @private
-         * @param {?} elm
-         * @param {?} name
-         * @param {?} add
-         * @return {?}
-         */
-            function (elm, name, add) {
-                if (add) {
-                    this.renderer.addClass(elm.nativeElement, name);
-                }
-                else {
-                    this.renderer.removeClass(elm.nativeElement, name);
-                }
-            };
-        ResizableDirective.decorators = [
-            { type: core.Directive, args: [{
-                        selector: '[mwlResizable]',
-                        exportAs: 'mwlResizable'
-                    },] }
-        ];
-        /** @nocollapse */
-        ResizableDirective.ctorParameters = function () {
-            return [
-                { type: undefined, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
-                { type: core.Renderer2 },
-                { type: core.ElementRef },
-                { type: core.NgZone }
-            ];
+        ResizableDirective.prototype.ngOnDestroy = function () {
+            // browser check for angular universal, because it doesn't know what document is
+            if (common.isPlatformBrowser(this.platformId)) {
+                this.renderer.setStyle(document.body, 'cursor', '');
+            }
+            this.mousedown.complete();
+            this.mouseup.complete();
+            this.mousemove.complete();
+            this.destroy$.next();
         };
-        ResizableDirective.propDecorators = {
-            validateResize: [{ type: core.Input }],
-            resizeEdges: [{ type: core.Input }],
-            enableGhostResize: [{ type: core.Input }],
-            resizeSnapGrid: [{ type: core.Input }],
-            resizeCursors: [{ type: core.Input }],
-            resizeCursorPrecision: [{ type: core.Input }],
-            ghostElementPositioning: [{ type: core.Input }],
-            allowNegativeResizes: [{ type: core.Input }],
-            mouseMoveThrottleMS: [{ type: core.Input }],
-            resizeStart: [{ type: core.Output }],
-            resizing: [{ type: core.Output }],
-            resizeEnd: [{ type: core.Output }]
+        ResizableDirective.prototype.setElementClass = function (elm, name, add) {
+            if (add) {
+                this.renderer.addClass(elm.nativeElement, name);
+            }
+            else {
+                this.renderer.removeClass(elm.nativeElement, name);
+            }
         };
         return ResizableDirective;
     }());
+    ResizableDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[mwlResizable]',
+                    exportAs: 'mwlResizable',
+                },] }
+    ];
+    ResizableDirective.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: core.NgZone }
+    ]; };
+    ResizableDirective.propDecorators = {
+        validateResize: [{ type: core.Input }],
+        enableGhostResize: [{ type: core.Input }],
+        resizeSnapGrid: [{ type: core.Input }],
+        resizeCursors: [{ type: core.Input }],
+        ghostElementPositioning: [{ type: core.Input }],
+        allowNegativeResizes: [{ type: core.Input }],
+        mouseMoveThrottleMS: [{ type: core.Input }],
+        resizeStart: [{ type: core.Output }],
+        resizing: [{ type: core.Output }],
+        resizeEnd: [{ type: core.Output }]
+    };
     var PointerEventListeners = /** @class */ (function () {
         function PointerEventListeners(renderer, zone) {
             this.pointerDown = new rxjs.Observable(function (observer) {
-                /** @type {?} */
                 var unsubscribeMouseDown;
-                /** @type {?} */
                 var unsubscribeTouchStart;
@@ -783,3 +870,3 @@ zone.runOutsideAngular(function () {
                             clientY: event.clientY,
-                            event: event
+                            event: event,
                         });
@@ -792,3 +879,3 @@ });
                                 clientY: event.touches[0].clientY,
-                                event: event
+                                event: event,
                             });
@@ -801,3 +888,3 @@ });
                     if (IS_TOUCH_DEVICE) {
-                        ( /** @type {?} */(unsubscribeTouchStart))();
+                        unsubscribeTouchStart();
                     }
@@ -807,5 +894,3 @@ };
             this.pointerMove = new rxjs.Observable(function (observer) {
-                /** @type {?} */
                 var unsubscribeMouseMove;
-                /** @type {?} */
                 var unsubscribeTouchMove;
@@ -817,3 +902,3 @@ zone.runOutsideAngular(function () {
                             clientY: event.clientY,
-                            event: event
+                            event: event,
                         });
@@ -826,3 +911,3 @@ });
                                 clientY: event.targetTouches[0].clientY,
-                                event: event
+                                event: event,
                             });
@@ -835,3 +920,3 @@ });
                     if (IS_TOUCH_DEVICE) {
-                        ( /** @type {?} */(unsubscribeTouchMove))();
+                        unsubscribeTouchMove();
                     }
@@ -841,7 +926,4 @@ };
             this.pointerUp = new rxjs.Observable(function (observer) {
-                /** @type {?} */
                 var unsubscribeMouseUp;
-                /** @type {?} */
                 var unsubscribeTouchEnd;
-                /** @type {?} */
                 var unsubscribeTouchCancel;
@@ -853,3 +935,3 @@ zone.runOutsideAngular(function () {
                             clientY: event.clientY,
-                            event: event
+                            event: event,
                         });
@@ -862,3 +944,3 @@ });
                                 clientY: event.changedTouches[0].clientY,
-                                event: event
+                                event: event,
                             });
@@ -870,3 +952,3 @@ });
                                 clientY: event.changedTouches[0].clientY,
-                                event: event
+                                event: event,
                             });
@@ -879,4 +961,4 @@ });
                     if (IS_TOUCH_DEVICE) {
-                        ( /** @type {?} */(unsubscribeTouchEnd))();
-                        ( /** @type {?} */(unsubscribeTouchCancel))();
+                        unsubscribeTouchEnd();
+                        unsubscribeTouchCancel();
                     }
@@ -886,21 +968,8 @@ };
         }
-        // tslint:disable-line
-        /**
-         * @param {?} renderer
-         * @param {?} zone
-         * @return {?}
-         */
-        PointerEventListeners.getInstance =
-            // tslint:disable-line
-            /**
-             * @param {?} renderer
-             * @param {?} zone
-             * @return {?}
-             */
-            function (renderer, zone) {
-                if (!PointerEventListeners.instance) {
-                    PointerEventListeners.instance = new PointerEventListeners(renderer, zone);
-                }
-                return PointerEventListeners.instance;
-            };
+        PointerEventListeners.getInstance = function (renderer, zone) {
+            if (!PointerEventListeners.instance) {
+                PointerEventListeners.instance = new PointerEventListeners(renderer, zone);
+            }
+            return PointerEventListeners.instance;
+        };
         return PointerEventListeners;
@@ -910,6 +979,2 @@ }());
     /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
-    /**
      * An element placed inside a `mwlResizable` directive to be used as a drag and resize handle
@@ -943,212 +1008,125 @@ *
         }
-        /**
-         * @return {?}
-         */
-        ResizeHandleDirective.prototype.ngOnInit = /**
-         * @return {?}
-         */
-            function () {
-                var _this = this;
-                this.zone.runOutsideAngular(function () {
-                    _this.listenOnTheHost('mousedown').subscribe(function (event) {
-                        _this.onMousedown(event, event.clientX, event.clientY);
-                    });
-                    _this.listenOnTheHost('mouseup').subscribe(function (event) {
-                        _this.onMouseup(event.clientX, event.clientY);
-                    });
-                    if (IS_TOUCH_DEVICE) {
-                        _this.listenOnTheHost('touchstart').subscribe(function (event) {
-                            _this.onMousedown(event, event.touches[0].clientX, event.touches[0].clientY);
-                        });
-                        rxjs.merge(_this.listenOnTheHost('touchend'), _this.listenOnTheHost('touchcancel')).subscribe(function (event) {
-                            _this.onMouseup(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
-                        });
-                    }
+        ResizeHandleDirective.prototype.ngOnInit = function () {
+            var _this = this;
+            this.zone.runOutsideAngular(function () {
+                _this.listenOnTheHost('mousedown').subscribe(function (event) {
+                    _this.onMousedown(event, event.clientX, event.clientY);
                 });
-            };
-        /**
-         * @return {?}
-         */
-        ResizeHandleDirective.prototype.ngOnDestroy = /**
-         * @return {?}
-         */
-            function () {
-                this.destroy$.next();
-                this.unsubscribeEventListeners();
-            };
-        /**
-         * @hidden
-         */
-        /**
-         * @hidden
-         * @param {?} event
-         * @param {?} clientX
-         * @param {?} clientY
-         * @return {?}
-         */
-        ResizeHandleDirective.prototype.onMousedown = /**
-         * @hidden
-         * @param {?} event
-         * @param {?} clientX
-         * @param {?} clientY
-         * @return {?}
-         */
-            function (event, clientX, clientY) {
-                var _this = this;
-                event.preventDefault();
-                if (!this.eventListeners.touchmove) {
-                    this.eventListeners.touchmove = this.renderer.listen(this.element.nativeElement, 'touchmove', function (touchMoveEvent) {
-                        _this.onMousemove(touchMoveEvent, touchMoveEvent.targetTouches[0].clientX, touchMoveEvent.targetTouches[0].clientY);
+                _this.listenOnTheHost('mouseup').subscribe(function (event) {
+                    _this.onMouseup(event.clientX, event.clientY);
+                });
+                if (IS_TOUCH_DEVICE) {
+                    _this.listenOnTheHost('touchstart').subscribe(function (event) {
+                        _this.onMousedown(event, event.touches[0].clientX, event.touches[0].clientY);
                     });
-                }
-                if (!this.eventListeners.mousemove) {
-                    this.eventListeners.mousemove = this.renderer.listen(this.element.nativeElement, 'mousemove', function (mouseMoveEvent) {
-                        _this.onMousemove(mouseMoveEvent, mouseMoveEvent.clientX, mouseMoveEvent.clientY);
+                    rxjs.merge(_this.listenOnTheHost('touchend'), _this.listenOnTheHost('touchcancel')).subscribe(function (event) {
+                        _this.onMouseup(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
                     });
                 }
-                this.resizable.mousedown.next({
-                    clientX: clientX,
-                    clientY: clientY,
-                    edges: this.resizeEdges
-                });
-            };
+            });
+        };
+        ResizeHandleDirective.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.unsubscribeEventListeners();
+        };
         /**
          * @hidden
          */
+        ResizeHandleDirective.prototype.onMousedown = function (event, clientX, clientY) {
+            var _this = this;
+            event.preventDefault();
+            if (!this.eventListeners.touchmove) {
+                this.eventListeners.touchmove = this.renderer.listen(this.element.nativeElement, 'touchmove', function (touchMoveEvent) {
+                    _this.onMousemove(touchMoveEvent, touchMoveEvent.targetTouches[0].clientX, touchMoveEvent.targetTouches[0].clientY);
+                });
+            }
+            if (!this.eventListeners.mousemove) {
+                this.eventListeners.mousemove = this.renderer.listen(this.element.nativeElement, 'mousemove', function (mouseMoveEvent) {
+                    _this.onMousemove(mouseMoveEvent, mouseMoveEvent.clientX, mouseMoveEvent.clientY);
+                });
+            }
+            this.resizable.mousedown.next({
+                clientX: clientX,
+                clientY: clientY,
+                edges: this.resizeEdges,
+            });
+        };
         /**
          * @hidden
-         * @param {?} clientX
-         * @param {?} clientY
-         * @return {?}
          */
-        ResizeHandleDirective.prototype.onMouseup = /**
-         * @hidden
-         * @param {?} clientX
-         * @param {?} clientY
-         * @return {?}
-         */
-            function (clientX, clientY) {
-                this.unsubscribeEventListeners();
-                this.resizable.mouseup.next({
-                    clientX: clientX,
-                    clientY: clientY,
-                    edges: this.resizeEdges
-                });
-            };
+        ResizeHandleDirective.prototype.onMouseup = function (clientX, clientY) {
+            this.unsubscribeEventListeners();
+            this.resizable.mouseup.next({
+                clientX: clientX,
+                clientY: clientY,
+                edges: this.resizeEdges,
+            });
+        };
         Object.defineProperty(ResizeHandleDirective.prototype, "resizable", {
             // directive might be passed from DI or as an input
-            get: 
-            // directive might be passed from DI or as an input
-            /**
-             * @private
-             * @return {?}
-             */
-            function () {
+            get: function () {
                 return this.resizableDirective || this.resizableContainer;
             },
-            enumerable: true,
+            enumerable: false,
             configurable: true
         });
-        /**
-         * @private
-         * @param {?} event
-         * @param {?} clientX
-         * @param {?} clientY
-         * @return {?}
-         */
-        ResizeHandleDirective.prototype.onMousemove = /**
-         * @private
-         * @param {?} event
-         * @param {?} clientX
-         * @param {?} clientY
-         * @return {?}
-         */
-            function (event, clientX, clientY) {
-                this.resizable.mousemove.next({
-                    clientX: clientX,
-                    clientY: clientY,
-                    edges: this.resizeEdges,
-                    event: event
-                });
-            };
-        /**
-         * @private
-         * @return {?}
-         */
-        ResizeHandleDirective.prototype.unsubscribeEventListeners = /**
-         * @private
-         * @return {?}
-         */
-            function () {
-                var _this = this;
-                Object.keys(this.eventListeners).forEach(function (type) {
-                    (( /** @type {?} */(_this))).eventListeners[type]();
-                    delete _this.eventListeners[type];
-                });
-            };
-        /**
-         * @private
-         * @template T
-         * @param {?} eventName
-         * @return {?}
-         */
-        ResizeHandleDirective.prototype.listenOnTheHost = /**
-         * @private
-         * @template T
-         * @param {?} eventName
-         * @return {?}
-         */
-            function (eventName) {
-                return rxjs.fromEvent(this.element.nativeElement, eventName).pipe(operators.takeUntil(this.destroy$));
-            };
-        ResizeHandleDirective.decorators = [
-            { type: core.Directive, args: [{
-                        selector: '[mwlResizeHandle]'
-                    },] }
-        ];
-        /** @nocollapse */
-        ResizeHandleDirective.ctorParameters = function () {
-            return [
-                { type: core.Renderer2 },
-                { type: core.ElementRef },
-                { type: core.NgZone },
-                { type: ResizableDirective, decorators: [{ type: core.Optional }] }
-            ];
+        ResizeHandleDirective.prototype.onMousemove = function (event, clientX, clientY) {
+            this.resizable.mousemove.next({
+                clientX: clientX,
+                clientY: clientY,
+                edges: this.resizeEdges,
+                event: event,
+            });
         };
-        ResizeHandleDirective.propDecorators = {
-            resizeEdges: [{ type: core.Input }],
-            resizableContainer: [{ type: core.Input }]
+        ResizeHandleDirective.prototype.unsubscribeEventListeners = function () {
+            var _this = this;
+            Object.keys(this.eventListeners).forEach(function (type) {
+                _this.eventListeners[type]();
+                delete _this.eventListeners[type];
+            });
         };
+        ResizeHandleDirective.prototype.listenOnTheHost = function (eventName) {
+            return rxjs.fromEvent(this.element.nativeElement, eventName).pipe(operators.takeUntil(this.destroy$));
+        };
         return ResizeHandleDirective;
     }());
+    ResizeHandleDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[mwlResizeHandle]',
+                },] }
+    ];
+    ResizeHandleDirective.ctorParameters = function () { return [
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: core.NgZone },
+        { type: ResizableDirective, decorators: [{ type: core.Optional }] }
+    ]; };
+    ResizeHandleDirective.propDecorators = {
+        resizeEdges: [{ type: core.Input }],
+        resizableContainer: [{ type: core.Input }]
+    };
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
-     */
     var ResizableModule = /** @class */ (function () {
         function ResizableModule() {
         }
-        ResizableModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [ResizableDirective, ResizeHandleDirective],
-                        exports: [ResizableDirective, ResizeHandleDirective]
-                    },] }
-        ];
         return ResizableModule;
     }());
+    ResizableModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [ResizableDirective, ResizeHandleDirective],
+                    exports: [ResizableDirective, ResizeHandleDirective],
+                },] }
+    ];
 
-    /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+    /*
+     * Public API Surface of angular-resizable-element
      */
 
     /**
-     * @fileoverview added by tsickle
-     * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     * Generated bundle index. Do not edit.
      */
 
     exports.ResizableDirective = ResizableDirective;
+    exports.ResizableModule = ResizableModule;
     exports.ResizeHandleDirective = ResizeHandleDirective;
-    exports.ResizableModule = ResizableModule;
 
@@ -1158,3 +1136,2 @@ Object.defineProperty(exports, '__esModule', { value: true });
 })));
-
-//# sourceMappingURL=angular-resizable-element.umd.js.map
+//# sourceMappingURL=angular-resizable-element.umd.js.map

CHANGELOG.md

@@ -1,5 +0,29 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [4.0.0](https://github.com/mattlewis92/angular-resizable-element/compare/v3.4.0...v4.0.0) (2021-08-30)
+
+
+### ⚠ BREAKING CHANGES
+
+* **mwlResizable:** the `resizeEdges` and `resizeCursorPrecision` inputs have been removed from the `mwlResizable` directive.
+
+To migrate, please use the `mwlResizeHandle` directive instead (see the readme for a full example)
+* angular 10 or higher is now required to use this package
+
+### Features
+
+* **mwlResizable:** remove deprecated `resizeEdges` and `resizeCursorPrecision` inputs ([58c954e](https://github.com/mattlewis92/angular-resizable-element/commit/58c954ed6013ea169e637592a571e17913fd56ed))
+
+
+### Bug Fixes
+
+* copy canvas when using `enableGhostResize` ([#129](https://github.com/mattlewis92/angular-resizable-element/issues/129)) ([d65c257](https://github.com/mattlewis92/angular-resizable-element/commit/d65c2572681cb05cbfc55a1fbf4b1bca2a0e93a4))
+
+
+### build
+
+* migrate to the angular cli ([21eca11](https://github.com/mattlewis92/angular-resizable-element/commit/21eca1101ad063c223599cf016124f50110353a1)), closes [#125](https://github.com/mattlewis92/angular-resizable-element/issues/125)
+
 <a name="3.4.0"></a>
@@ -6,0 +30,0 @@ # [3.4.0](https://github.com/mattlewis92/angular-resizable-element/compare/v3.3.5...v3.4.0) (2021-06-02)

esm2015/angular-resizable-element.js

 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
  * Generated bundle index. Do not edit.
  */
-export { ResizableDirective, ResizeHandleDirective, ResizableModule } from './index';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1yZXNpemFibGUtZWxlbWVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItcmVzaXphYmxlLWVsZW1lbnQvIiwic291cmNlcyI6WyJhbmd1bGFyLXJlc2l6YWJsZS1lbGVtZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFJQSwyRUFBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5ndWxhci1yZXNpemFibGUtZWxlbWVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItcmVzaXphYmxlLWVsZW1lbnQvc3JjL2FuZ3VsYXItcmVzaXphYmxlLWVsZW1lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

fesm2015/angular-resizable-element.js

@@ -0,15 +1,7 @@
+import { EventEmitter, Directive, Inject, PLATFORM_ID, Renderer2, ElementRef, NgZone, Input, Output, Optional, NgModule } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
-import { Directive, Renderer2, ElementRef, Output, Input, EventEmitter, NgZone, Inject, PLATFORM_ID, Optional, NgModule } from '@angular/core';
-import { Subject, Observable, merge, EMPTY, fromEvent } from 'rxjs';
-import { map, mergeMap, takeUntil, filter, pairwise, take, share, auditTime, switchMap, startWith, tap } from 'rxjs/operators';
+import { Subject, merge, Observable, fromEvent } from 'rxjs';
+import { tap, share, mergeMap, take, map, pairwise, filter, takeUntil } from 'rxjs/operators';
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @hidden
- * @type {?}
- */
-const IS_TOUCH_DEVICE = (() => {
+const ɵ0 = () => {
     // In case we're in Node.js environment.
@@ -24,28 +16,69 @@ if (typeof window === 'undefined') {
     }
-})();
-
+};
 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * @hidden
  */
-/**
- * @param {?} value1
- * @param {?} value2
- * @param {?=} precision
- * @return {?}
- */
-function isNumberCloseTo(value1, value2, precision = 3) {
-    /** @type {?} */
-    const diff = Math.abs(value1 - value2);
-    return diff < precision;
+const IS_TOUCH_DEVICE = (ɵ0)();
+
+/** Creates a deep clone of an element. */
+function deepCloneNode(node) {
+    const clone = node.cloneNode(true);
+    const descendantsWithId = clone.querySelectorAll('[id]');
+    const nodeName = node.nodeName.toLowerCase();
+    // Remove the `id` to avoid having multiple elements with the same id on the page.
+    clone.removeAttribute('id');
+    descendantsWithId.forEach((descendant) => {
+        descendant.removeAttribute('id');
+    });
+    if (nodeName === 'canvas') {
+        transferCanvasData(node, clone);
+    }
+    else if (nodeName === 'input' ||
+        nodeName === 'select' ||
+        nodeName === 'textarea') {
+        transferInputData(node, clone);
+    }
+    transferData('canvas', node, clone, transferCanvasData);
+    transferData('input, textarea, select', node, clone, transferInputData);
+    return clone;
 }
-/**
- * @param {?} startingRect
- * @param {?} edges
- * @param {?} clientX
- * @param {?} clientY
- * @return {?}
- */
+/** Matches elements between an element and its clone and allows for their data to be cloned. */
+function transferData(selector, node, clone, callback) {
+    const descendantElements = node.querySelectorAll(selector);
+    if (descendantElements.length) {
+        const cloneElements = clone.querySelectorAll(selector);
+        for (let i = 0; i < descendantElements.length; i++) {
+            callback(descendantElements[i], cloneElements[i]);
+        }
+    }
+}
+// Counter for unique cloned radio button names.
+let cloneUniqueId = 0;
+/** Transfers the data of one input element to another. */
+function transferInputData(source, clone) {
+    // Browsers throw an error when assigning the value of a file input programmatically.
+    if (clone.type !== 'file') {
+        clone.value = source.value;
+    }
+    // Radio button `name` attributes must be unique for radio button groups
+    // otherwise original radio buttons can lose their checked state
+    // once the clone is inserted in the DOM.
+    if (clone.type === 'radio' && clone.name) {
+        clone.name = `mat-clone-${clone.name}-${cloneUniqueId++}`;
+    }
+}
+/** Transfers the data of one canvas element to another. */
+function transferCanvasData(source, clone) {
+    const context = clone.getContext('2d');
+    if (context) {
+        // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
+        // We can't do much about it so just ignore the error.
+        try {
+            context.drawImage(source, 0, 0);
+        }
+        catch (_a) { }
+    }
+}
+
 function getNewBoundingRectangle(startingRect, edges, clientX, clientY) {
-    /** @type {?} */
     const newBoundingRect = {
@@ -55,3 +88,3 @@ top: startingRect.top,
         left: startingRect.left,
-        right: startingRect.right
+        right: startingRect.right,
     };
@@ -74,15 +107,6 @@ if (edges.top) {
 }
-/**
- * @param {?} element
- * @param {?} ghostElementPositioning
- * @return {?}
- */
 function getElementRect(element, ghostElementPositioning) {
-    /** @type {?} */
     let translateX = 0;
-    /** @type {?} */
     let translateY = 0;
-    /** @type {?} */
     const style = element.nativeElement.style;
-    /** @type {?} */
     const transformProperties = [
@@ -92,8 +116,7 @@ 'transform',
         '-moz-transform',
-        '-o-transform'
+        '-o-transform',
     ];
-    /** @type {?} */
     const transform = transformProperties
-        .map(property => style[property])
-        .find(value => !!value);
+        .map((property) => style[property])
+        .find((value) => !!value);
     if (transform && transform.includes('translate')) {
@@ -114,7 +137,6 @@ translateX = transform.replace(/.*translate3?d?\((-?[0-9]*)px, (-?[0-9]*)px.*/, '$1');
                 element.nativeElement.offsetLeft -
-                translateX
+                translateX,
         };
     }
     else {
-        /** @type {?} */
         const boundingRect = element.nativeElement.getBoundingClientRect();
@@ -129,52 +151,6 @@ return {
             scrollTop: element.nativeElement.scrollTop,
-            scrollLeft: element.nativeElement.scrollLeft
+            scrollLeft: element.nativeElement.scrollLeft,
         };
     }
 }
-/**
- * @param {?} __0
- * @return {?}
- */
-function isWithinBoundingY({ clientY, rect }) {
-    return clientY >= rect.top && clientY <= rect.bottom;
-}
-/**
- * @param {?} __0
- * @return {?}
- */
-function isWithinBoundingX({ clientX, rect }) {
-    return clientX >= rect.left && clientX <= rect.right;
-}
-/**
- * @param {?} __0
- * @return {?}
- */
-function getResizeEdges({ clientX, clientY, elm, allowedEdges, cursorPrecision }) {
-    /** @type {?} */
-    const elmPosition = elm.nativeElement.getBoundingClientRect();
-    /** @type {?} */
-    const edges = {};
-    if (allowedEdges.left &&
-        isNumberCloseTo(clientX, elmPosition.left, cursorPrecision) &&
-        isWithinBoundingY({ clientY, rect: elmPosition })) {
-        edges.left = true;
-    }
-    if (allowedEdges.right &&
-        isNumberCloseTo(clientX, elmPosition.right, cursorPrecision) &&
-        isWithinBoundingY({ clientY, rect: elmPosition })) {
-        edges.right = true;
-    }
-    if (allowedEdges.top &&
-        isNumberCloseTo(clientY, elmPosition.top, cursorPrecision) &&
-        isWithinBoundingX({ clientX, rect: elmPosition })) {
-        edges.top = true;
-    }
-    if (allowedEdges.bottom &&
-        isNumberCloseTo(clientY, elmPosition.bottom, cursorPrecision) &&
-        isWithinBoundingX({ clientX, rect: elmPosition })) {
-        edges.bottom = true;
-    }
-    return edges;
-}
-/** @type {?} */
 const DEFAULT_RESIZE_CURSORS = Object.freeze({
@@ -186,9 +162,4 @@ topLeft: 'nw-resize',
     leftOrRight: 'col-resize',
-    topOrBottom: 'row-resize'
+    topOrBottom: 'row-resize',
 });
-/**
- * @param {?} edges
- * @param {?} cursors
- * @return {?}
- */
 function getResizeCursor(edges, cursors) {
@@ -217,10 +188,5 @@ if (edges.left && edges.top) {
 }
-/**
- * @param {?} __0
- * @return {?}
- */
-function getEdgesDiff({ edges, initialRectangle, newRectangle }) {
-    /** @type {?} */
+function getEdgesDiff({ edges, initialRectangle, newRectangle, }) {
     const edgesDiff = {};
-    Object.keys(edges).forEach(edge => {
+    Object.keys(edges).forEach((edge) => {
         edgesDiff[edge] = (newRectangle[edge] || 0) - (initialRectangle[edge] || 0);
@@ -230,15 +196,4 @@ });
 }
-/** @type {?} */
 const RESIZE_ACTIVE_CLASS = 'resize-active';
-/** @type {?} */
-const RESIZE_LEFT_HOVER_CLASS = 'resize-left-hover';
-/** @type {?} */
-const RESIZE_RIGHT_HOVER_CLASS = 'resize-right-hover';
-/** @type {?} */
-const RESIZE_TOP_HOVER_CLASS = 'resize-top-hover';
-/** @type {?} */
-const RESIZE_BOTTOM_HOVER_CLASS = 'resize-bottom-hover';
-/** @type {?} */
 const RESIZE_GHOST_ELEMENT_CLASS = 'resize-ghost-element';
-/** @type {?} */
 const MOUSE_MOVE_THROTTLE_MS = 50;
@@ -264,6 +219,2 @@ /**
      * @hidden
-     * @param {?} platformId
-     * @param {?} renderer
-     * @param {?} elm
-     * @param {?} zone
      */
@@ -276,7 +227,2 @@ constructor(platformId, renderer, elm, zone) {
         /**
-         * The edges that an element can be resized from. Pass an object like `{top: true, bottom: false}`. By default no edges can be resized.
-         * @deprecated use a resize handle instead that positions itself to the side of the element you would like to resize
-         */
-        this.resizeEdges = {};
-        /**
          * Set to `true` to enable a temporary resizing effect of the element in between the `resizeStart` and `resizeEnd` events.
@@ -296,7 +242,2 @@ */
         /**
-         * Mouse over thickness to active cursor.
-         * @deprecated invalid when you migrate to use resize handles instead of setting resizeEdges on the element
-         */
-        this.resizeCursorPrecision = 3;
-        /**
          * Define the positioning of the ghost element (can be fixed or absolute)
@@ -338,3 +279,2 @@ */
         this.destroy$ = new Subject();
-        this.resizeEdges$ = new Subject();
         this.pointerEventListeners = PointerEventListeners.getInstance(renderer, zone);
@@ -344,8 +284,5 @@ }
      * @hidden
-     * @return {?}
      */
     ngOnInit() {
-        /** @type {?} */
         const mousedown$ = merge(this.pointerEventListeners.pointerDown, this.mousedown);
-        /** @type {?} */
         const mousemove$ = merge(this.pointerEventListeners.pointerMove, this.mousemove).pipe(tap(({ event }) => {
@@ -362,7 +299,4 @@ if (currentResize) {
         }), share());
-        /** @type {?} */
         const mouseup$ = merge(this.pointerEventListeners.pointerUp, this.mouseup);
-        /** @type {?} */
         let currentResize;
-        /** @type {?} */
         const removeGhostElement = () => {
@@ -374,48 +308,14 @@ if (currentResize && currentResize.clonedNode) {
         };
-        /** @type {?} */
         const getResizeCursors = () => {
-            return Object.assign({}, DEFAULT_RESIZE_CURSORS, this.resizeCursors);
+            return Object.assign(Object.assign({}, DEFAULT_RESIZE_CURSORS), this.resizeCursors);
         };
-        this.resizeEdges$
-            .pipe(startWith(this.resizeEdges), map(() => {
-            return (this.resizeEdges &&
-                Object.keys(this.resizeEdges).some(edge => !!this.resizeEdges[edge]));
-        }), switchMap(legacyResizeEdgesEnabled => legacyResizeEdgesEnabled ? mousemove$ : EMPTY), auditTime(this.mouseMoveThrottleMS), takeUntil(this.destroy$))
-            .subscribe(({ clientX, clientY }) => {
-            /** @type {?} */
-            const resizeEdges = getResizeEdges({
-                clientX,
-                clientY,
-                elm: this.elm,
-                allowedEdges: this.resizeEdges,
-                cursorPrecision: this.resizeCursorPrecision
-            });
-            /** @type {?} */
-            const resizeCursors = getResizeCursors();
-            if (!currentResize) {
-                /** @type {?} */
-                const cursor = getResizeCursor(resizeEdges, resizeCursors);
-                this.renderer.setStyle(this.elm.nativeElement, 'cursor', cursor);
-            }
-            this.setElementClass(this.elm, RESIZE_LEFT_HOVER_CLASS, resizeEdges.left === true);
-            this.setElementClass(this.elm, RESIZE_RIGHT_HOVER_CLASS, resizeEdges.right === true);
-            this.setElementClass(this.elm, RESIZE_TOP_HOVER_CLASS, resizeEdges.top === true);
-            this.setElementClass(this.elm, RESIZE_BOTTOM_HOVER_CLASS, resizeEdges.bottom === true);
-        });
-        /** @type {?} */
         const mousedrag = mousedown$
-            .pipe(mergeMap(startCoords => {
-            /**
-             * @param {?} moveCoords
-             * @return {?}
-             */
+            .pipe(mergeMap((startCoords) => {
             function getDiff(moveCoords) {
                 return {
                     clientX: moveCoords.clientX - startCoords.clientX,
-                    clientY: moveCoords.clientY - startCoords.clientY
+                    clientY: moveCoords.clientY - startCoords.clientY,
                 };
             }
-            /** @type {?} */
             const getSnapGrid = () => {
-                /** @type {?} */
                 const snapGrid = { x: 1, y: 1 };
@@ -440,18 +340,13 @@ if (currentResize) {
             };
-            /**
-             * @param {?} coords
-             * @param {?} snapGrid
-             * @return {?}
-             */
             function getGrid(coords, snapGrid) {
                 return {
                     x: Math.ceil(coords.clientX / snapGrid.x),
-                    y: Math.ceil(coords.clientY / snapGrid.y)
+                    y: Math.ceil(coords.clientY / snapGrid.y),
                 };
             }
-            return ((/** @type {?} */ (merge(mousemove$.pipe(take(1)).pipe(map(coords => [, coords])), mousemove$.pipe(pairwise())))))
+            return merge(mousemove$.pipe(take(1)).pipe(map((coords) => [, coords])), mousemove$.pipe(pairwise()))
                 .pipe(map(([previousCoords, newCoords]) => {
                 return [
                     previousCoords ? getDiff(previousCoords) : previousCoords,
-                    getDiff(newCoords)
+                    getDiff(newCoords),
                 ];
@@ -463,7 +358,4 @@ }))
                 }
-                /** @type {?} */
                 const snapGrid = getSnapGrid();
-                /** @type {?} */
                 const previousGrid = getGrid(previousCoords, snapGrid);
-                /** @type {?} */
                 const newGrid = getGrid(newCoords, snapGrid);
@@ -473,7 +365,6 @@ return (previousGrid.x !== newGrid.x || previousGrid.y !== newGrid.y);
                 .pipe(map(([, newCoords]) => {
-                /** @type {?} */
                 const snapGrid = getSnapGrid();
                 return {
                     clientX: Math.round(newCoords.clientX / snapGrid.x) * snapGrid.x,
-                    clientY: Math.round(newCoords.clientY / snapGrid.y) * snapGrid.y
+                    clientY: Math.round(newCoords.clientY / snapGrid.y) * snapGrid.y,
                 };
@@ -486,3 +377,3 @@ }))
             .pipe(map(({ clientX, clientY }) => {
-            return getNewBoundingRectangle((/** @type {?} */ (currentResize)).startingRect, (/** @type {?} */ (currentResize)).edges, clientX, clientY);
+            return getNewBoundingRectangle(currentResize.startingRect, currentResize.edges, clientX, clientY);
         }))
@@ -501,6 +392,6 @@ .pipe(filter((newBoundingRect) => {
                     edges: getEdgesDiff({
-                        edges: (/** @type {?} */ (currentResize)).edges,
-                        initialRectangle: (/** @type {?} */ (currentResize)).startingRect,
-                        newRectangle: newBoundingRect
-                    })
+                        edges: currentResize.edges,
+                        initialRectangle: currentResize.startingRect,
+                        newRectangle: newBoundingRect,
+                    }),
                 })
@@ -520,24 +411,16 @@ : true;
                         edges: getEdgesDiff({
-                            edges: (/** @type {?} */ (currentResize)).edges,
-                            initialRectangle: (/** @type {?} */ (currentResize)).startingRect,
-                            newRectangle: newBoundingRect
+                            edges: currentResize.edges,
+                            initialRectangle: currentResize.startingRect,
+                            newRectangle: newBoundingRect,
                         }),
-                        rectangle: newBoundingRect
+                        rectangle: newBoundingRect,
                     });
                 });
             }
-            (/** @type {?} */ (currentResize)).currentRect = newBoundingRect;
+            currentResize.currentRect = newBoundingRect;
         });
         mousedown$
-            .pipe(map(({ clientX, clientY, edges }) => {
-            return (edges ||
-                getResizeEdges({
-                    clientX,
-                    clientY,
-                    elm: this.elm,
-                    allowedEdges: this.resizeEdges,
-                    cursorPrecision: this.resizeCursorPrecision
-                }));
-        }))
-            .pipe(filter((edges) => {
+            .pipe(map(({ edges }) => {
+            return edges || {};
+        }), filter((edges) => {
             return Object.keys(edges).length > 0;
@@ -549,3 +432,2 @@ }), takeUntil(this.destroy$))
             }
-            /** @type {?} */
             const startingRect = getElementRect(this.elm, this.ghostElementPositioning);
@@ -555,7 +437,5 @@ currentResize = {
                 startingRect,
-                currentRect: startingRect
+                currentRect: startingRect,
             };
-            /** @type {?} */
             const resizeCursors = getResizeCursors();
-            /** @type {?} */
             const cursor = getResizeCursor(currentResize.edges, resizeCursors);
@@ -565,3 +445,3 @@ this.renderer.setStyle(document.body, 'cursor', cursor);
             if (this.enableGhostResize) {
-                currentResize.clonedNode = this.elm.nativeElement.cloneNode(true);
+                currentResize.clonedNode = deepCloneNode(this.elm.nativeElement);
                 this.elm.nativeElement.parentElement.appendChild(currentResize.clonedNode);
@@ -576,6 +456,6 @@ this.renderer.setStyle(this.elm.nativeElement, 'visibility', 'hidden');
                 this.renderer.addClass(currentResize.clonedNode, RESIZE_GHOST_ELEMENT_CLASS);
-                (/** @type {?} */ (currentResize.clonedNode)).scrollTop = (/** @type {?} */ (currentResize.startingRect
-                    .scrollTop));
-                (/** @type {?} */ (currentResize.clonedNode)).scrollLeft = (/** @type {?} */ (currentResize.startingRect
-                    .scrollLeft));
+                currentResize.clonedNode.scrollTop = currentResize.startingRect
+                    .scrollTop;
+                currentResize.clonedNode.scrollLeft = currentResize.startingRect
+                    .scrollLeft;
             }
@@ -588,5 +468,5 @@ if (this.resizeStart.observers.length > 0) {
                             initialRectangle: startingRect,
-                            newRectangle: startingRect
+                            newRectangle: startingRect,
                         }),
-                        rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0)
+                        rectangle: getNewBoundingRectangle(startingRect, {}, 0, 0),
                     });
@@ -605,7 +485,7 @@ });
                             edges: getEdgesDiff({
-                                edges: (/** @type {?} */ (currentResize)).edges,
-                                initialRectangle: (/** @type {?} */ (currentResize)).startingRect,
-                                newRectangle: (/** @type {?} */ (currentResize)).currentRect
+                                edges: currentResize.edges,
+                                initialRectangle: currentResize.startingRect,
+                                newRectangle: currentResize.currentRect,
                             }),
-                            rectangle: (/** @type {?} */ (currentResize)).currentRect
+                            rectangle: currentResize.currentRect,
                         });
@@ -621,14 +501,3 @@ });
      * @hidden
-     * @param {?} changes
-     * @return {?}
      */
-    ngOnChanges(changes) {
-        if (changes.resizeEdges) {
-            this.resizeEdges$.next(this.resizeEdges);
-        }
-    }
-    /**
-     * @hidden
-     * @return {?}
-     */
     ngOnDestroy() {
@@ -642,12 +511,4 @@ // browser check for angular universal, because it doesn't know what document is
         this.mousemove.complete();
-        this.resizeEdges$.complete();
         this.destroy$.next();
     }
-    /**
-     * @private
-     * @param {?} elm
-     * @param {?} name
-     * @param {?} add
-     * @return {?}
-     */
     setElementClass(elm, name, add) {
@@ -665,6 +526,5 @@ if (add) {
                 selector: '[mwlResizable]',
-                exportAs: 'mwlResizable'
+                exportAs: 'mwlResizable',
             },] }
 ];
-/** @nocollapse */
 ResizableDirective.ctorParameters = () => [
@@ -678,7 +538,5 @@ { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
     validateResize: [{ type: Input }],
-    resizeEdges: [{ type: Input }],
     enableGhostResize: [{ type: Input }],
     resizeSnapGrid: [{ type: Input }],
     resizeCursors: [{ type: Input }],
-    resizeCursorPrecision: [{ type: Input }],
     ghostElementPositioning: [{ type: Input }],
@@ -692,23 +550,5 @@ allowNegativeResizes: [{ type: Input }],
 class PointerEventListeners {
-    // tslint:disable-line
-    /**
-     * @param {?} renderer
-     * @param {?} zone
-     * @return {?}
-     */
-    static getInstance(renderer, zone) {
-        if (!PointerEventListeners.instance) {
-            PointerEventListeners.instance = new PointerEventListeners(renderer, zone);
-        }
-        return PointerEventListeners.instance;
-    }
-    /**
-     * @param {?} renderer
-     * @param {?} zone
-     */
     constructor(renderer, zone) {
         this.pointerDown = new Observable((observer) => {
-            /** @type {?} */
             let unsubscribeMouseDown;
-            /** @type {?} */
             let unsubscribeTouchStart;
@@ -720,3 +560,3 @@ zone.runOutsideAngular(() => {
                         clientY: event.clientY,
-                        event
+                        event,
                     });
@@ -729,3 +569,3 @@ });
                             clientY: event.touches[0].clientY,
-                            event
+                            event,
                         });
@@ -738,3 +578,3 @@ });
                 if (IS_TOUCH_DEVICE) {
-                    (/** @type {?} */ (unsubscribeTouchStart))();
+                    unsubscribeTouchStart();
                 }
@@ -744,5 +584,3 @@ };
         this.pointerMove = new Observable((observer) => {
-            /** @type {?} */
             let unsubscribeMouseMove;
-            /** @type {?} */
             let unsubscribeTouchMove;
@@ -754,3 +592,3 @@ zone.runOutsideAngular(() => {
                         clientY: event.clientY,
-                        event
+                        event,
                     });
@@ -763,3 +601,3 @@ });
                             clientY: event.targetTouches[0].clientY,
-                            event
+                            event,
                         });
@@ -772,3 +610,3 @@ });
                 if (IS_TOUCH_DEVICE) {
-                    (/** @type {?} */ (unsubscribeTouchMove))();
+                    unsubscribeTouchMove();
                 }
@@ -778,7 +616,4 @@ };
         this.pointerUp = new Observable((observer) => {
-            /** @type {?} */
             let unsubscribeMouseUp;
-            /** @type {?} */
             let unsubscribeTouchEnd;
-            /** @type {?} */
             let unsubscribeTouchCancel;
@@ -790,3 +625,3 @@ zone.runOutsideAngular(() => {
                         clientY: event.clientY,
-                        event
+                        event,
                     });
@@ -799,3 +634,3 @@ });
                             clientY: event.changedTouches[0].clientY,
-                            event
+                            event,
                         });
@@ -807,3 +642,3 @@ });
                             clientY: event.changedTouches[0].clientY,
-                            event
+                            event,
                         });
@@ -816,4 +651,4 @@ });
                 if (IS_TOUCH_DEVICE) {
-                    (/** @type {?} */ (unsubscribeTouchEnd))();
-                    (/** @type {?} */ (unsubscribeTouchCancel))();
+                    unsubscribeTouchEnd();
+                    unsubscribeTouchCancel();
                 }
@@ -823,9 +658,11 @@ };
     }
+    static getInstance(renderer, zone) {
+        if (!PointerEventListeners.instance) {
+            PointerEventListeners.instance = new PointerEventListeners(renderer, zone);
+        }
+        return PointerEventListeners.instance;
+    }
 }
 
 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
  * An element placed inside a `mwlResizable` directive to be used as a drag and resize handle
@@ -847,8 +684,2 @@ *
 class ResizeHandleDirective {
-    /**
-     * @param {?} renderer
-     * @param {?} element
-     * @param {?} zone
-     * @param {?} resizableDirective
-     */
     constructor(renderer, element, zone, resizableDirective) {
@@ -866,18 +697,15 @@ this.renderer = renderer;
     }
-    /**
-     * @return {?}
-     */
     ngOnInit() {
         this.zone.runOutsideAngular(() => {
-            this.listenOnTheHost('mousedown').subscribe(event => {
+            this.listenOnTheHost('mousedown').subscribe((event) => {
                 this.onMousedown(event, event.clientX, event.clientY);
             });
-            this.listenOnTheHost('mouseup').subscribe(event => {
+            this.listenOnTheHost('mouseup').subscribe((event) => {
                 this.onMouseup(event.clientX, event.clientY);
             });
             if (IS_TOUCH_DEVICE) {
-                this.listenOnTheHost('touchstart').subscribe(event => {
+                this.listenOnTheHost('touchstart').subscribe((event) => {
                     this.onMousedown(event, event.touches[0].clientX, event.touches[0].clientY);
                 });
-                merge(this.listenOnTheHost('touchend'), this.listenOnTheHost('touchcancel')).subscribe(event => {
+                merge(this.listenOnTheHost('touchend'), this.listenOnTheHost('touchcancel')).subscribe((event) => {
                     this.onMouseup(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
@@ -888,5 +716,2 @@ });
     }
-    /**
-     * @return {?}
-     */
     ngOnDestroy() {
@@ -898,6 +723,2 @@ this.destroy$.next();
      * @hidden
-     * @param {?} event
-     * @param {?} clientX
-     * @param {?} clientY
-     * @return {?}
      */
@@ -919,3 +740,3 @@ onMousedown(event, clientX, clientY) {
             clientY,
-            edges: this.resizeEdges
+            edges: this.resizeEdges,
         });
@@ -925,5 +746,2 @@ }
      * @hidden
-     * @param {?} clientX
-     * @param {?} clientY
-     * @return {?}
      */
@@ -935,20 +753,9 @@ onMouseup(clientX, clientY) {
             clientY,
-            edges: this.resizeEdges
+            edges: this.resizeEdges,
         });
     }
     // directive might be passed from DI or as an input
-    /**
-     * @private
-     * @return {?}
-     */
     get resizable() {
         return this.resizableDirective || this.resizableContainer;
     }
-    /**
-     * @private
-     * @param {?} event
-     * @param {?} clientX
-     * @param {?} clientY
-     * @return {?}
-     */
     onMousemove(event, clientX, clientY) {
@@ -959,21 +766,11 @@ this.resizable.mousemove.next({
             edges: this.resizeEdges,
-            event
+            event,
         });
     }
-    /**
-     * @private
-     * @return {?}
-     */
     unsubscribeEventListeners() {
-        Object.keys(this.eventListeners).forEach(type => {
-            ((/** @type {?} */ (this))).eventListeners[type]();
+        Object.keys(this.eventListeners).forEach((type) => {
+            this.eventListeners[type]();
             delete this.eventListeners[type];
         });
     }
-    /**
-     * @private
-     * @template T
-     * @param {?} eventName
-     * @return {?}
-     */
     listenOnTheHost(eventName) {
@@ -985,6 +782,5 @@ return fromEvent(this.element.nativeElement, eventName).pipe(takeUntil(this.destroy$));
     { type: Directive, args: [{
-                selector: '[mwlResizeHandle]'
+                selector: '[mwlResizeHandle]',
             },] }
 ];
-/** @nocollapse */
 ResizeHandleDirective.ctorParameters = () => [
@@ -1001,6 +797,2 @@ { type: Renderer2 },
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
 class ResizableModule {
@@ -1011,18 +803,15 @@ }
                 declarations: [ResizableDirective, ResizeHandleDirective],
-                exports: [ResizableDirective, ResizeHandleDirective]
+                exports: [ResizableDirective, ResizeHandleDirective],
             },] }
 ];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+/*
+ * Public API Surface of angular-resizable-element
  */
 
 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ * Generated bundle index. Do not edit.
  */
 
-export { ResizableDirective, ResizeHandleDirective, ResizableModule };
-
-//# sourceMappingURL=angular-resizable-element.js.map
+export { ResizableDirective, ResizableModule, ResizeHandleDirective };
+//# sourceMappingURL=angular-resizable-element.js.map

package.json

 {
   "name": "angular-resizable-element",
-  "version": "3.4.0",
-  "description": "An angular 6.0+ directive that allows an element to be dragged and resized",
+  "version": "4.0.0",
+  "description": "An angular 10.0+ directive that allows an element to be dragged and resized",
   "repository": {
@@ -12,3 +12,2 @@ "type": "git",
     "angular2",
-    "angular6",
     "resizable"
@@ -22,55 +21,4 @@ ],
   "homepage": "https://github.com/mattlewis92/angular-resizable-element#readme",
-  "devDependencies": {
-    "@angular/common": "^7.2.3",
-    "@angular/compiler": "^7.2.3",
-    "@angular/compiler-cli": "^7.2.3",
-    "@angular/core": "^7.2.3",
-    "@angular/platform-browser": "^7.2.3",
-    "@angular/platform-browser-dynamic": "^7.2.3",
-    "@compodoc/compodoc": "^1.1.7",
-    "@types/chai": "^4.1.7",
-    "@types/mocha": "^5.2.5",
-    "@types/sinon": "^7.0.5",
-    "@types/sinon-chai": "^3.2.2",
-    "@types/webpack": "^4.4.24",
-    "chai": "^4.2.0",
-    "codecov-lite": "^0.1.3",
-    "codelyzer": "^4.5.0",
-    "commitizen": "^3.0.5",
-    "concurrently": "^4.1.0",
-    "copyfiles": "^2.1.0",
-    "core-js": "^2.6.3",
-    "cz-conventional-changelog": "^2.1.0",
-    "fork-ts-checker-webpack-plugin": "^0.5.2",
-    "husky": "^1.3.1",
-    "istanbul-instrumenter-loader": "^3.0.1",
-    "karma": "^4.0.0",
-    "karma-chrome-launcher": "^2.1.1",
-    "karma-coverage-istanbul-reporter": "^2.0.4",
-    "karma-mocha": "^1.3.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.0-rc.6",
-    "mocha": "^5.2.0",
-    "ng-packagr": "^4.7.0",
-    "prettier": "^1.16.4",
-    "pretty-quick": "^1.10.0",
-    "rxjs": "^6.4.0",
-    "sinon": "^7.2.3",
-    "sinon-chai": "^3.3.0",
-    "standard-version": "^4.4.0",
-    "ts-loader": "^5.3.3",
-    "ts-node": "^8.0.2",
-    "tsickle": "0.34.0",
-    "tslint": "^5.12.1",
-    "tslint-config-mwl": "^0.5.2",
-    "tslint-loader": "^3.6.0",
-    "typescript": "~3.2.4",
-    "validate-commit-msg": "^2.8.0",
-    "webpack": "^4.29.1",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14",
-    "zone.js": "^0.8.29"
-  },
   "peerDependencies": {
-    "@angular/core": ">=6.0.0"
+    "@angular/core": ">=10.0.0"
   },
@@ -82,14 +30,6 @@ "config": {
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "validate-commit-msg",
-      "pre-commit": "pretty-quick --staged"
-    }
-  },
   "main": "bundles/angular-resizable-element.umd.js",
-  "module": "fesm5/angular-resizable-element.js",
+  "module": "fesm2015/angular-resizable-element.js",
   "es2015": "fesm2015/angular-resizable-element.js",
-  "esm5": "esm5/angular-resizable-element.js",
   "esm2015": "esm2015/angular-resizable-element.js",
-  "fesm5": "fesm5/angular-resizable-element.js",
   "fesm2015": "fesm2015/angular-resizable-element.js",
@@ -100,4 +40,4 @@ "typings": "angular-resizable-element.d.ts",
   "dependencies": {
-    "tslib": "^1.9.0"
+    "tslib": "^2.2.0"
   }
-}
+}

README.md

@@ -11,3 +11,3 @@ # angular resizable element
 
-https://mattlewis92.github.io/angular-resizable-element/demo/
+https://mattlewis92.github.io/angular-resizable-element/
 
@@ -24,3 +24,3 @@ ## Table of contents
 
-An angular 6.0+ directive that allows an element to be dragged and resized
+An angular 10.0+ directive that allows an element to be dragged and resized
 
@@ -32,3 +32,3 @@ ## Installation
 ```
-npm install --save angular-resizable-element
+npm install angular-resizable-element
 ```
@@ -95,3 +95,3 @@
       }
-    `
+    `,
   ],
@@ -126,3 +126,3 @@ template: `
     </div>
-  `
+  `,
 })
@@ -142,3 +142,3 @@ export class MyComponent {
   imports: [ResizableModule],
-  bootstrap: [MyComponent]
+  bootstrap: [MyComponent],
 })
@@ -145,0 +145,0 @@ class MyModule {}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Number of package files

41

increased by2.5%

Number of low license alerts

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

384780

decreased by-43.75%

Lines of code

2845

decreased by-52.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedtslib@1.14.1(transitive)

• Updatedtslib@^2.2.0