@tft/interact 12.5.0 → 13.0.0

package/fesm2015/{tft-interact.js → tft-interact.mjs}

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Pipe, InjectionToken, Injectable, RendererFactory2, NgZone, Optional, Inject, Directive, ElementRef, Input, EventEmitter, Renderer2, Output, TemplateRef, Self, ViewContainerRef, SkipSelf, ContentChild, HostBinding, NgModule } from '@angular/core';
+import { Pipe, InjectionToken, Directive, Input, Injectable, Optional, Inject, EventEmitter, HostBinding, Output, Self, HostListener, SkipSelf, ContentChild, NgModule } from '@angular/core';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import interact from 'interactjs';
-import { BehaviorSubject, combineLatest } from 'rxjs';
-import { shareReplay, tap, map } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
+import { shareReplay, tap, map, scan } from 'rxjs/operators';
 
 class ArrayOfNPipe {
     /**
@@ -16,11 +16,14 @@ class ArrayOfNPipe {
         return new Array(length).fill(length).map((x, i) => i);
     }
 }
-ArrayOfNPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'arrayOfN'
-            },] }
-];
+ArrayOfNPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ArrayOfNPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ArrayOfNPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ArrayOfNPipe, name: "arrayOfN" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ArrayOfNPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'arrayOfN'
+                }]
+        }] });
 
 const INTERACT_ROOT_CONFIG = new InjectionToken('INTERACT_ROOT_CONFIG_PARAMS');
 const DEFAULT_REGISTRY_ID = 'DEFAULT';
@@ -49,6 +52,59 @@ const defaultPosition = {
     targetElement: null
 };
 
+const TFT_DRAG_PREVIEW = new InjectionToken('DragPreviewDirective');
+class DragPreviewDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+DragPreviewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DragPreviewDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragPreviewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: DragPreviewDirective, selector: "ng-template[tftDragPreview]", inputs: { dragData: "dragData" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DragPreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-template[tftDragPreview]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { dragData: [{
+                type: Input
+            }] } });
+
+/** Gets the closest ancestor of an element that matches a selector. */
+function getClosestMatchingAncestor(element, selector) {
+    let currentElement = element.parentElement;
+    while (currentElement) {
+        // IE doesn't support `matches` so we have to fall back to `msMatchesSelector`.
+        if (currentElement.matches ? currentElement.matches(selector) :
+            currentElement.msMatchesSelector(selector)) {
+            return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+}
+/**
+ * Create a copy of the HTML Element
+ */
+function cloneElement$1(element) {
+    const clone = element.cloneNode(true);
+    clone.removeAttribute('id');
+    return clone;
+}
+/**
+ * Gets the root HTML element of an embedded view.
+ * If the root is not an HTML element it gets wrapped in one.
+ */
+function getRootNode(viewRef, _document) {
+    const rootNodes = viewRef.rootNodes;
+    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+        return rootNodes[0];
+    }
+    const wrapper = _document.createElement('div');
+    rootNodes.forEach(node => wrapper.appendChild(node));
+    return wrapper;
+}
+
 class InteractService {
     constructor(rendererFactory, ngZone, rootConfig) {
         this.rendererFactory = rendererFactory;
@@ -77,7 +133,7 @@ class InteractService {
     addDraggableToRegistry(customRegistryId = null, interactableId = null) {
         const registryId = customRegistryId || DEFAULT_REGISTRY_ID;
         // if we pass an id to createInteractableId then it is used when creating the interactable
-        // and returned, otherwise a an id is created for the draggable.
+        // and returned, otherwise a new id is created for the draggable.
         const key = this.createInteractableId(interactableId);
         if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {
             this.dragRegistrySystem[registryId] = {};
@@ -86,7 +142,16 @@ class InteractService {
         return key;
     }
     destroyInteractable(interactableId, registryId = DEFAULT_REGISTRY_ID) {
-        if (this.dragRegistrySystem[registryId][interactableId]) {
+        const interactableSystem = this.dragRegistrySystem[registryId][interactableId];
+        if (interactableSystem) {
+            // unsubscribe from all the subscriptions if they're subscriptions
+            for (const propName in interactableSystem) {
+                const prop = interactableSystem[propName];
+                if (prop.unsubscribe && typeof prop.unsubscribe === 'function') {
+                    prop.unsubscribe();
+                }
+                ;
+            }
             delete this.dragRegistrySystem[registryId][interactableId];
         }
     }
@@ -178,21 +243,10 @@ class InteractService {
      * @param target the element to transform
      */
     setElementSize(width, height, target) {
-        var _a;
         if (!target)
             return;
-        const accountForScaleDirective = (_a = target.resizeRef) === null || _a === void 0 ? void 0 : _a.account_for_scale_dir;
-        if (accountForScaleDirective) {
-            const { scale } = accountForScaleDirective;
-            const scaledWidth = width / scale;
-            const scaledHeight = height / scale;
-            this.renderer.setStyle(target, 'width', `${scaledWidth}${this.cssUnit}`);
-            this.renderer.setStyle(target, 'height', `${scaledHeight}${this.cssUnit}`);
-        }
-        else {
-            this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);
-            this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);
-        }
+        this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);
+        this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);
     }
     /**
      * Uses renderer to set position of angular component
@@ -201,20 +255,10 @@ class InteractService {
      * @param target the element to transform
      */
     setElementTransform(x, y, position) {
-        var _a, _b;
         if (!(position === null || position === void 0 ? void 0 : position.targetElement))
             return;
-        const dragRef = (_a = position.targetElement) === null || _a === void 0 ? void 0 : _a.dragRef;
-        const accountForScaleDirective = (dragRef === null || dragRef === void 0 ? void 0 : dragRef.account_for_scale_dir) || ((_b = dragRef === null || dragRef === void 0 ? void 0 : dragRef.dragRoot) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir);
-        if (accountForScaleDirective) {
-            const { scale } = accountForScaleDirective;
-            this.renderer.setStyle(position.targetElement, 'left', `${x / scale}${this.cssUnit}`);
-            this.renderer.setStyle(position.targetElement, 'top', `${y / scale}${this.cssUnit}`);
-        }
-        else {
-            this.renderer.setStyle(position.targetElement, 'left', `${x}${this.cssUnit}`);
-            this.renderer.setStyle(position.targetElement, 'top', `${y}${this.cssUnit}`);
-        }
+        this.renderer.setStyle(position.targetElement, 'left', `${x}${this.cssUnit}`);
+        this.renderer.setStyle(position.targetElement, 'top', `${y}${this.cssUnit}`);
     }
     /**
      * Generates a translate string for the x and y arguments passed to
@@ -241,15 +285,19 @@ class InteractService {
         return position;
     }
 }
-InteractService.ɵprov = i0.ɵɵdefineInjectable({ factory: function InteractService_Factory() { return new InteractService(i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(INTERACT_ROOT_CONFIG, 8)); }, token: InteractService, providedIn: "root" });
-InteractService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-InteractService.ctorParameters = () => [
-    { type: RendererFactory2 },
-    { type: NgZone },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [INTERACT_ROOT_CONFIG,] }] }
-];
+InteractService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InteractService, deps: [{ token: i0.RendererFactory2 }, { token: i0.NgZone }, { token: INTERACT_ROOT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+InteractService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InteractService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InteractService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () {
+        return [{ type: i0.RendererFactory2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [INTERACT_ROOT_CONFIG]
+                    }] }];
+    } });
 
 /**
  * Use to apply scale to the element and tell the drag and resize directives to account for the scale when
@@ -264,17 +312,16 @@ class AccountForScaleDirective {
         this.scale = 1;
     }
 }
-AccountForScaleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tftAccountForScale]'
-            },] }
-];
-AccountForScaleDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-AccountForScaleDirective.propDecorators = {
-    scale: [{ type: Input }]
-};
+AccountForScaleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AccountForScaleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AccountForScaleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: AccountForScaleDirective, selector: "[tftAccountForScale]", inputs: { scale: "scale" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AccountForScaleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftAccountForScale]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { scale: [{
+                type: Input
+            }] } });
 
 class DropzoneDirective {
     constructor(el, renderer, interactService, account_for_scale_dir) {
@@ -283,12 +330,17 @@ class DropzoneDirective {
         this.interactService = interactService;
         this.account_for_scale_dir = account_for_scale_dir;
         this.dropzoneConfig = {};
+        this.position = 'relative';
         // proxies to pass interact events through to consumer of directive
         this.dropActivate = new EventEmitter();
         this.dragEnter = new EventEmitter();
         this.dragLeave = new EventEmitter();
         this.dragDrop = new EventEmitter();
     }
+    get scale() {
+        var _a;
+        return (_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale;
+    }
     ngOnInit() {
         // connects
         this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);
@@ -331,10 +383,10 @@ class DropzoneDirective {
      * @param event the drop event emitted by interact, extended with extra fields we added to
      */
     mapDropzoneEvent(event) {
-        var _a, _b, _c;
+        var _a, _b;
         const zoneElement = event.target;
         const dragElement = (_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.dragRef) === null || _b === void 0 ? void 0 : _b.previewRef;
-        const scale = ((_c = this.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || null;
+        const scale = this.scale;
         const positionInDropTarget = zoneElement && dragElement
             ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
             : null;
@@ -347,83 +399,40 @@ class DropzoneDirective {
         };
     }
 }
-DropzoneDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tftDropzone]',
-                host: {
-                    '[id]': 'dropzoneId',
-                }
-            },] }
-];
-DropzoneDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: InteractService },
-    { type: AccountForScaleDirective, decorators: [{ type: Optional }] }
-];
-DropzoneDirective.propDecorators = {
-    dropzoneId: [{ type: Input }],
-    dropzoneConfig: [{ type: Input }],
-    dropzoneData: [{ type: Input }],
-    dropActivate: [{ type: Output }],
-    dragEnter: [{ type: Output }],
-    dragLeave: [{ type: Output }],
-    dragDrop: [{ type: Output }]
-};
-
-const TFT_DRAG_PREVIEW = new InjectionToken('DragPreviewDirective');
-class DragPreviewDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-DragPreviewDirective.decorators = [
-    { type: Directive, args: [{
-                // eslint-disable-next-line @angular-eslint/directive-selector
-                selector: 'ng-template[tftDragPreview]',
-            },] }
-];
-DragPreviewDirective.ctorParameters = () => [
-    { type: TemplateRef }
-];
-DragPreviewDirective.propDecorators = {
-    dragData: [{ type: Input }]
-};
-
-/** Gets the closest ancestor of an element that matches a selector. */
-function getClosestMatchingAncestor(element, selector) {
-    let currentElement = element.parentElement;
-    while (currentElement) {
-        // IE doesn't support `matches` so we have to fall back to `msMatchesSelector`.
-        if (currentElement.matches ? currentElement.matches(selector) :
-            currentElement.msMatchesSelector(selector)) {
-            return currentElement;
-        }
-        currentElement = currentElement.parentElement;
-    }
-    return null;
-}
-/**
- * Create a copy of the HTML Element
- */
-function cloneElement$1(element) {
-    const clone = element.cloneNode(true);
-    clone.removeAttribute('id');
-    return clone;
-}
-/**
- * Gets the root HTML element of an embedded view.
- * If the root is not an HTML element it gets wrapped in one.
- */
-function getRootNode(viewRef, _document) {
-    const rootNodes = viewRef.rootNodes;
-    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
-        return rootNodes[0];
-    }
-    const wrapper = _document.createElement('div');
-    rootNodes.forEach(node => wrapper.appendChild(node));
-    return wrapper;
-}
+DropzoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DropzoneDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: InteractService }, { token: AccountForScaleDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DropzoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: DropzoneDirective, selector: "[tftDropzone]", inputs: { dropzoneId: "dropzoneId", dropzoneConfig: "dropzoneConfig", dropzoneData: "dropzoneData", position: "position" }, outputs: { dropActivate: "dropActivate", dragEnter: "dragEnter", dragLeave: "dragLeave", dragDrop: "dragDrop" }, host: { properties: { "id": "dropzoneId", "style.position": "this.position" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DropzoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftDropzone]',
+                    host: {
+                        '[id]': 'dropzoneId'
+                    }
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: InteractService }, { type: AccountForScaleDirective, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { dropzoneId: [{
+                type: Input
+            }], dropzoneConfig: [{
+                type: Input
+            }], dropzoneData: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.position']
+            }], dropActivate: [{
+                type: Output
+            }], dragEnter: [{
+                type: Output
+            }], dragLeave: [{
+                type: Output
+            }], dragDrop: [{
+                type: Output
+            }] } });
 
 /**
  * Use this directive to select which element to attach the element to while dragging
@@ -439,22 +448,78 @@ class DragRootDirective {
         this.account_for_scale_dir = account_for_scale_dir;
     }
 }
-DragRootDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tftDragRoot]',
-                exportAs: 'tftDragRoot'
-            },] }
-];
-DragRootDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: AccountForScaleDirective, decorators: [{ type: Optional }, { type: Self }] }
-];
+DragRootDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DragRootDirective, deps: [{ token: i0.ElementRef }, { token: AccountForScaleDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+DragRootDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: DragRootDirective, selector: "[tftDragRoot]", exportAs: ["tftDragRoot"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DragRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftDragRoot]',
+                    exportAs: 'tftDragRoot'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: AccountForScaleDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Self
+                    }] }];
+    } });
+
+;
+/**
+ * Use to apply scale to the element and tell the drag and resize directives to account for the scale when
+ * @example <div tftAccountForScale [scale]="2.5"> <div tftDraggable> </div> </div>
+ * @note if `dragRoot` is used this directive should be used on the same element to ensure that the drag
+ * element accounts for scale
+ */
+class AutoScrollDirective {
+    constructor(el) {
+        this.el = el;
+        /**
+         * Limit minimum time between scroll events in milliseconds
+         */
+        this.autoScrollConfig = {
+            margin: 50,
+            distance: 3,
+            interval: 50,
+            speed: 300,
+            enabled: true
+        };
+        this.scrollDeltaObserver = new Subject();
+        const { scrollTop, scrollLeft } = el.nativeElement;
+        this.scrollSubject = new BehaviorSubject({ scrollTop, scrollLeft });
+        this.scrollObserver = this.scrollSubject.pipe(scan((previous, current) => {
+            const scrollTop = current.scrollTop - previous.scrollTop;
+            const scrollLeft = current.scrollLeft - previous.scrollLeft;
+            this.scrollDeltaObserver.next({ scrollTop, scrollLeft });
+            return current;
+        }), shareReplay(1));
+        this.scrollObserver.subscribe();
+    }
+    // this setup allows consumers to set x, y scale independently or just set them both with scale
+    scroll(scrollEvent) {
+        const target = scrollEvent.target;
+        const { scrollTop, scrollLeft } = target;
+        this.scrollSubject.next({ scrollTop, scrollLeft });
+    }
+}
+AutoScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AutoScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AutoScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: AutoScrollDirective, selector: "[tftAutoScroll]", inputs: { autoScrollConfig: "autoScrollConfig" }, host: { listeners: { "scroll": "scroll($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AutoScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftAutoScroll]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { autoScrollConfig: [{
+                type: Input
+            }], scroll: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }] } });
 
 /** @dynamic */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 class DraggableDirective {
-    // cache holding element to use as placeholder while dragging
-    constructor(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir) {
+    constructor(el, interactService, renderer, _viewContainerRef, _document, account_for_scale_dir, dropzone_dir, drag_root_dir, auto_scroll_dir) {
         this.el = el;
         this.interactService = interactService;
         this.renderer = renderer;
@@ -463,6 +528,7 @@ class DraggableDirective {
         this.account_for_scale_dir = account_for_scale_dir;
         this.dropzone_dir = dropzone_dir;
         this.drag_root_dir = drag_root_dir;
+        this.auto_scroll_dir = auto_scroll_dir;
         /* zIndex while dragging*/
         this.dragZIndex = 10000;
         this.enableDragDefault = true;
@@ -478,6 +544,11 @@ class DraggableDirective {
         this.dragInertiaStart = new EventEmitter();
         this.dragEnd = new EventEmitter();
     }
+    // check all the different places for scale
+    get scale() {
+        var _a, _b, _c, _d, _e;
+        return ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_c = (_b = this.drag_root_dir) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || ((_e = (_d = this.dragRoot) === null || _d === void 0 ? void 0 : _d.account_for_scale_dir) === null || _e === void 0 ? void 0 : _e.scale) || 1;
+    }
     ngOnInit() {
         var _a, _b, _c, _d, _e;
         this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);
@@ -535,7 +606,10 @@ class DraggableDirective {
     }
     dragMoveListener(event, element) {
         const { dx, dy } = event;
-        this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX: dx, deltaY: dy }, element);
+        const scale = this.scale;
+        const deltaX = scale ? dx / scale : dx;
+        const deltaY = scale ? dy / scale : dy;
+        this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX, deltaY }, element);
     }
     setDragStyles(dragElement) {
         this.renderer.setStyle(dragElement, 'touchAction', 'none');
@@ -551,8 +625,9 @@ class DraggableDirective {
         var _a;
         const { target, dropzone } = event;
         const dropzoneElement = (dropzone === null || dropzone === void 0 ? void 0 : dropzone.target) || ((_a = target.dropTarget) === null || _a === void 0 ? void 0 : _a.el.nativeElement);
+        const scale = this.scale;
         const positionInDropTarget = target && dropzoneElement
-            ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef)
+            ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)
             : null;
         return {
             interactEvent: event,
@@ -580,8 +655,12 @@ class DraggableDirective {
         return typeof num === 'number' && !isNaN(num);
     }
     initiateDragEvents(dragConfig, nativeElement) {
-        return interact(nativeElement).draggable(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }))
+        const defaultDragConfig = Object.assign(Object.assign(Object.assign({}, dragConfig), { enabled: !(this.disabled || this.dragDisabled) }), (this.auto_scroll_dir && {
+            autoScroll: Object.assign(Object.assign({}, this.auto_scroll_dir.autoScrollConfig), { container: this.auto_scroll_dir.el.nativeElement })
+        }));
+        return interact(nativeElement).draggable(defaultDragConfig)
             .on('dragstart', (event) => {
+            var _a, _b, _c;
             const interaction = event.interaction;
             // check if we should append drag element to body
             if (this.enableDragDefault
@@ -600,12 +679,17 @@ class DraggableDirective {
                 this.addDragPropertiesToElement(this.previewRef);
                 this.setDragStyles(this.previewRef);
                 this.dragRootEl.prepend(this.previewRef);
-                const { x, y } = this.interactService.calculatePositionInElement(this.dragRootEl, nativeElement);
+                const scale = ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_c = (_b = this.dragRoot) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale) || 1;
+                const { x, y } = this.interactService.calculatePositionInElement(this.dragRootEl, nativeElement, scale);
                 this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.previewRef);
                 if (!this.showPlaceholder) {
                     this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
                 }
             }
+            // subscribe to scroll events if they are there, by only subscribing on dragstart we avoid wasting subscriptions on interactables that aren't be dragged
+            if (this.auto_scroll_dir) {
+                this.subscribeToScrollEvents();
+            }
             this.dragStart.emit(this.mapDragEvent(event));
         })
             .on('dragmove', (event) => {
@@ -627,6 +711,10 @@ class DraggableDirective {
             }
             this.renderer.setStyle(this.el.nativeElement, 'display', '');
             this.dragEnd.emit(mappedEvent);
+            // unsubscribe from scroll events if subscribed
+            if (this.auto_scroll_dir) {
+                this.scrollEventsSubscription.unsubscribe();
+            }
             if (this.el.nativeElement !== this.previewRef) {
                 // we do this in a timeout, so that we don't remove before the dropzone can get the boundingElementRect
                 setTimeout(() => {
@@ -635,47 +723,82 @@ class DraggableDirective {
             }
         });
     }
+    subscribeToScrollEvents() {
+        this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({ scrollLeft, scrollTop }) => {
+            const deltaX = this.scale ? scrollLeft / this.scale : scrollLeft;
+            const deltaY = this.scale ? scrollTop / this.scale : scrollTop;
+            this.interactService.updateDeltas(this.interactableId, this.registryId, { deltaX, deltaY }, this.previewRef);
+        });
+    }
 }
-DraggableDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tftDraggable]',
-                // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                host: {
-                    '[style.touchAction]': 'this.dragDisabled ? "auto" : "none"',
-                    '[style.position]': '"absolute"',
-                    '[id]': 'interactableId',
-                }
-            },] }
-];
-DraggableDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: InteractService },
-    { type: Renderer2 },
-    { type: ViewContainerRef },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: AccountForScaleDirective, decorators: [{ type: Optional }] },
-    { type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] },
-    { type: DragRootDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
-];
-DraggableDirective.propDecorators = {
-    x: [{ type: Input }],
-    y: [{ type: Input }],
-    dragZIndex: [{ type: Input }],
-    zIndex: [{ type: Input }],
-    interactableId: [{ type: Input }],
-    dragData: [{ type: Input }],
-    enableDragDefault: [{ type: Input }],
-    disabled: [{ type: Input }],
-    dragDisabled: [{ type: Input }],
-    dragConfig: [{ type: Input }],
-    showPlaceholder: [{ type: Input }],
-    dragRoot: [{ type: Input }],
-    dragStart: [{ type: Output }],
-    dragMove: [{ type: Output }],
-    dragInertiaStart: [{ type: Output }],
-    dragEnd: [{ type: Output }],
-    _previewTemplate: [{ type: ContentChild, args: [DragPreviewDirective,] }]
-};
+DraggableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DraggableDirective, deps: [{ token: i0.ElementRef }, { token: InteractService }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: AccountForScaleDirective, optional: true }, { token: DropzoneDirective, optional: true, skipSelf: true }, { token: DragRootDirective, optional: true, skipSelf: true }, { token: AutoScrollDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: DraggableDirective, selector: "[tftDraggable]", inputs: { x: "x", y: "y", dragZIndex: "dragZIndex", zIndex: "zIndex", interactableId: "interactableId", dragData: "dragData", enableDragDefault: "enableDragDefault", disabled: "disabled", dragDisabled: "dragDisabled", dragConfig: "dragConfig", showPlaceholder: "showPlaceholder", dragRoot: "dragRoot" }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragInertiaStart: "dragInertiaStart", dragEnd: "dragEnd" }, host: { properties: { "style.touchAction": "this.dragDisabled ? \"auto\" : \"none\"", "style.position": "\"absolute\"", "id": "interactableId" } }, queries: [{ propertyName: "_previewTemplate", first: true, predicate: DragPreviewDirective, descendants: true }], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: DraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftDraggable]',
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        '[style.touchAction]': 'this.dragDisabled ? "auto" : "none"',
+                        '[style.position]': '"absolute"',
+                        '[id]': 'interactableId',
+                    }
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: InteractService }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: AccountForScaleDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: DropzoneDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }, { type: DragRootDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }, { type: AutoScrollDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    }, propDecorators: { x: [{
+                type: Input
+            }], y: [{
+                type: Input
+            }], dragZIndex: [{
+                type: Input
+            }], zIndex: [{
+                type: Input
+            }], interactableId: [{
+                type: Input
+            }], dragData: [{
+                type: Input
+            }], enableDragDefault: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], dragDisabled: [{
+                type: Input
+            }], dragConfig: [{
+                type: Input
+            }], showPlaceholder: [{
+                type: Input
+            }], dragRoot: [{
+                type: Input
+            }], dragStart: [{
+                type: Output
+            }], dragMove: [{
+                type: Output
+            }], dragInertiaStart: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }], _previewTemplate: [{
+                type: ContentChild,
+                args: [DragPreviewDirective]
+            }] } });
 /**
  * Component utils
  */
@@ -697,15 +820,17 @@ function getPreviewInsertionPoint(documentRef) {
 
 /** @dynamic */
 class ResizableDirective {
-    constructor(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir) {
+    constructor(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir, auto_scroll_dir) {
         var _a;
         this.el = el;
         this._document = _document;
         this.interactService = interactService;
         this.renderer = renderer;
+        this.drag_root_dir = drag_root_dir;
         this.account_for_scale_dir = account_for_scale_dir;
         this.draggable_dir = draggable_dir;
         this.dropzone_dir = dropzone_dir;
+        this.auto_scroll_dir = auto_scroll_dir;
         this.enableResizeDefault = true;
         // TODO: should this be an input with default or should consuming user set display in styles each time
         this.position = 'absolute';
@@ -717,7 +842,12 @@ class ResizableDirective {
         this.defaultConfig = {
             edges: { left: true, right: true, bottom: true, top: true }
         };
-        this.dragRoot = ((_a = drag_root_dir === null || drag_root_dir === void 0 ? void 0 : drag_root_dir.el) === null || _a === void 0 ? void 0 : _a.nativeElement) || this._document.body;
+        this.activeEdges = { left: false, right: false, top: false, bottom: false };
+        this.dragRootEl = ((_a = drag_root_dir === null || drag_root_dir === void 0 ? void 0 : drag_root_dir.el) === null || _a === void 0 ? void 0 : _a.nativeElement) || this._document.body;
+    }
+    get scale() {
+        var _a, _b, _c;
+        return ((_a = this.account_for_scale_dir) === null || _a === void 0 ? void 0 : _a.scale) || ((_c = (_b = this.drag_root_dir) === null || _b === void 0 ? void 0 : _b.account_for_scale_dir) === null || _c === void 0 ? void 0 : _c.scale);
     }
     ngOnInit() {
         var _a, _b;
@@ -746,9 +876,16 @@ class ResizableDirective {
         this.interactService.destroyInteractable(this.interactableId, this.registryId);
     }
     resizeListener(event) {
-        const deltaX = event.deltaRect.left;
-        const deltaY = event.deltaRect.top;
-        const { width, height } = event.rect;
+        const element = this.el.nativeElement;
+        const scale = this.scale;
+        const { deltaRect } = event;
+        const deltaX = deltaRect.left / scale;
+        const deltaY = deltaRect.top / scale;
+        // We get the width and height directly from the native element because
+        // the event dimension can get out of sync when resizing with autoScroll
+        const rect = element.getBoundingClientRect();
+        const width = (rect.width + deltaRect.width) / scale;
+        const height = (rect.height + deltaRect.height) / scale;
         this.interactService.updateSize(this.interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
     }
     /**
@@ -761,9 +898,18 @@ class ResizableDirective {
     initiateResizeEvents(resizeConfig, nativeElement) {
         var _a;
         // TODO: This should try and get interactable from tft_draggable if it exists
+        const defaultResizeConfig = Object.assign(Object.assign(Object.assign({}, resizeConfig), { enabled: !this.resizeDisabled }), (this.auto_scroll_dir && {
+            autoScroll: Object.assign(Object.assign({}, this.auto_scroll_dir.autoScrollConfig), { container: this.auto_scroll_dir.el.nativeElement })
+        }));
         const interactable = ((_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.interactable) || interact(nativeElement);
-        return interactable.resizable(Object.assign(Object.assign({}, resizeConfig), { enabled: !this.resizeDisabled }))
-            .on('resizestart', (event) => { this.resizeStart.emit(this.mapResizeEvent(event)); })
+        return interactable.resizable(defaultResizeConfig)
+            .on('resizestart', (event) => {
+            this.activeEdges = event.edges;
+            if (this.auto_scroll_dir) {
+                this.subscribeToScrollEvents();
+            }
+            this.resizeStart.emit(this.mapResizeEvent(event));
+        })
             .on('resizemove', (event) => {
             if (this.enableResizeDefault) {
                 this.resizeListener(event);
@@ -772,23 +918,33 @@ class ResizableDirective {
             this.resizeMove.emit(mappedEvent);
         })
             .on('resizeinertiastart', (event) => this.resizeInertiaStart.emit(this.mapResizeEvent(event)))
-            .on('resizeend', (event) => this.resizeEnd.emit(this.mapResizeEvent(event)));
+            .on('resizeend', (event) => {
+            if (this.auto_scroll_dir) {
+                this.scrollEventsSubscription.unsubscribe();
+            }
+            this.activeEdges = { left: false, right: false, top: false, bottom: false };
+            this.resizeEnd.emit(this.mapResizeEvent(event));
+        });
     }
     mapResizeEvent(event) {
         var _a, _b;
-        const target = event.target;
+        const target = this.el.nativeElement;
         const relatedTarget = (_b = (_a = this.draggable_dir) === null || _a === void 0 ? void 0 : _a.dropzone_dir) === null || _b === void 0 ? void 0 : _b.el.nativeElement;
+        const scale = this.scale;
         const positionInDropTarget = target && relatedTarget
-            ? this.interactService.calculatePositionInElement(relatedTarget, target)
+            ? this.interactService.calculatePositionInElement(relatedTarget, target, scale)
             : null;
         return {
             interactEvent: event,
             resizeRef: this,
-            // should I remove this?
             dragRef: this.draggable_dir,
             dragOrigin: this.dropzone_dir,
             dropTarget: this.el.nativeElement.dropTarget,
-            positionInDropTarget
+            positionInDropTarget,
+            size: {
+                width: target.clientWidth / scale,
+                height: target.clientHeight / scale
+            }
         };
     }
     alignDimensionsWithInputs(width, height) {
@@ -797,46 +953,81 @@ class ResizableDirective {
     addResizePropertiesToElement(nativeElement) {
         this.renderer.setProperty(nativeElement, 'resizeRef', this);
     }
+    subscribeToScrollEvents() {
+        this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({ scrollLeft, scrollTop }) => {
+            const scale = this.scale;
+            const target = this.el.nativeElement;
+            const { width: prevWidth, height: prevHeight } = target.getBoundingClientRect();
+            const deltaHeight = scrollTop * (this.activeEdges.top ? -1 : this.activeEdges.bottom ? 1 : 0);
+            const deltaWidth = scrollLeft * (this.activeEdges.left ? -1 : this.activeEdges.right ? 1 : 0);
+            const height = (prevHeight + deltaHeight) / scale;
+            const width = (prevWidth + deltaWidth) / scale;
+            const deltaX = this.activeEdges.left ? (scrollLeft / scale) : 0;
+            const deltaY = this.activeEdges.top ? (scrollTop / scale) : 0;
+            this.interactService.updateSize(this.interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
+        });
+    }
 }
-ResizableDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tftResizable]',
-                // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                host: {
-                    // prevents touch events from colliding with with mouse events
-                    // on touch screen
-                    '[style.touchAction]': 'this.resizeDisabled ? "auto" : "none"',
-                    // default to absolute here to accommodate likely use cases
-                    // consuming component can easily over ride with position input
-                    '[style.position]': 'position',
-                    // follows interactjs suggested practices
-                    '[style.boxSizing]': '"border-box"',
-                }
-            },] }
-];
-ResizableDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: InteractService },
-    { type: Renderer2 },
-    { type: DragRootDirective, decorators: [{ type: Optional }] },
-    { type: AccountForScaleDirective, decorators: [{ type: Optional }] },
-    { type: DraggableDirective, decorators: [{ type: Optional }] },
-    { type: DropzoneDirective, decorators: [{ type: Optional }, { type: SkipSelf }] }
-];
-ResizableDirective.propDecorators = {
-    enableResizeDefault: [{ type: Input }],
-    position: [{ type: Input }],
-    resizeConfig: [{ type: Input }],
-    interactableId: [{ type: Input }],
-    width: [{ type: Input }],
-    height: [{ type: Input }],
-    resizeDisabled: [{ type: Input }],
-    resizeStart: [{ type: Output }],
-    resizeMove: [{ type: Output }],
-    resizeInertiaStart: [{ type: Output }],
-    resizeEnd: [{ type: Output }]
-};
+ResizableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ResizableDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: InteractService }, { token: i0.Renderer2 }, { token: DragRootDirective, optional: true }, { token: AccountForScaleDirective, optional: true }, { token: DraggableDirective, optional: true }, { token: DropzoneDirective, optional: true, skipSelf: true }, { token: AutoScrollDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+ResizableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: ResizableDirective, selector: "[tftResizable]", inputs: { enableResizeDefault: "enableResizeDefault", position: "position", resizeConfig: "resizeConfig", interactableId: "interactableId", width: "width", height: "height", resizeDisabled: "resizeDisabled" }, outputs: { resizeStart: "resizeStart", resizeMove: "resizeMove", resizeInertiaStart: "resizeInertiaStart", resizeEnd: "resizeEnd" }, host: { properties: { "style.touchAction": "this.resizeDisabled ? \"auto\" : \"none\"", "style.position": "position", "style.boxSizing": "\"border-box\"" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ResizableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftResizable]',
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        // prevents touch events from colliding with with mouse events
+                        // on touch screen
+                        '[style.touchAction]': 'this.resizeDisabled ? "auto" : "none"',
+                        // default to absolute here to accommodate likely use cases
+                        // consuming component can easily over ride with position input
+                        '[style.position]': 'position',
+                        // follows interactjs suggested practices
+                        '[style.boxSizing]': '"border-box"',
+                    }
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: InteractService }, { type: i0.Renderer2 }, { type: DragRootDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: AccountForScaleDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: DraggableDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: DropzoneDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }, { type: AutoScrollDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    }, propDecorators: { enableResizeDefault: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], resizeConfig: [{
+                type: Input
+            }], interactableId: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], resizeDisabled: [{
+                type: Input
+            }], resizeStart: [{
+                type: Output
+            }], resizeMove: [{
+                type: Output
+            }], resizeInertiaStart: [{
+                type: Output
+            }], resizeEnd: [{
+                type: Output
+            }] } });
 
 /** @dynamic */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -889,28 +1080,35 @@ class GesturableDirective {
         });
     }
 }
-GesturableDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tftGesturable]',
-                // eslint-disable-next-line @angular-eslint/no-host-metadata-property
-                host: {
-                    // '[style.touchAction]': 'this.gestureDisabled ? "auto" : "none"',
-                    '[id]': 'gesturableId',
-                }
-            },] }
-];
-GesturableDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: DraggableDirective, decorators: [{ type: Optional }] }
-];
-GesturableDirective.propDecorators = {
-    gesturableId: [{ type: Input }],
-    gestureDisabled: [{ type: Input }],
-    gestureConfig: [{ type: Input }],
-    gestureStart: [{ type: Output }],
-    gestureMove: [{ type: Output }],
-    gestureEnd: [{ type: Output }]
-};
+GesturableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GesturableDirective, deps: [{ token: i0.ElementRef }, { token: DraggableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GesturableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: GesturableDirective, selector: "[tftGesturable]", inputs: { gesturableId: "gesturableId", gestureDisabled: "gestureDisabled", gestureConfig: "gestureConfig" }, outputs: { gestureStart: "gestureStart", gestureMove: "gestureMove", gestureEnd: "gestureEnd" }, host: { properties: { "id": "gesturableId" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: GesturableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftGesturable]',
+                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    host: {
+                        // '[style.touchAction]': 'this.gestureDisabled ? "auto" : "none"',
+                        '[id]': 'gesturableId',
+                    }
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: DraggableDirective, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { gesturableId: [{
+                type: Input
+            }], gestureDisabled: [{
+                type: Input
+            }], gestureConfig: [{
+                type: Input
+            }], gestureStart: [{
+                type: Output
+            }], gestureMove: [{
+                type: Output
+            }], gestureEnd: [{
+                type: Output
+            }] } });
 
 class ApplyScaleDirective {
     constructor(el) {
@@ -924,18 +1122,19 @@ class ApplyScaleDirective {
     }
     ;
 }
-ApplyScaleDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[tftApplyScale]'
-            },] }
-];
-ApplyScaleDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-ApplyScaleDirective.propDecorators = {
-    scale: [{ type: Input }],
-    fontSize: [{ type: HostBinding, args: ['style.fontSize',] }]
-};
+ApplyScaleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ApplyScaleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ApplyScaleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: ApplyScaleDirective, selector: "[tftApplyScale]", inputs: { scale: "scale" }, host: { properties: { "style.fontSize": "this.fontSize" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ApplyScaleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftApplyScale]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { scale: [{
+                type: Input
+            }], fontSize: [{
+                type: HostBinding,
+                args: ['style.fontSize']
+            }] } });
 
 const EXPORTS = [
     DraggableDirective,
@@ -943,6 +1142,7 @@ const EXPORTS = [
     DropzoneDirective,
     GesturableDirective,
     DragRootDirective,
+    AutoScrollDirective,
     AccountForScaleDirective,
     ApplyScaleDirective,
     DragPreviewDirective,
@@ -960,22 +1160,44 @@ class InteractModule {
         };
     }
 }
-InteractModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                // providers: [{ provide: INTERACT_ROOT_CONFIG, useValue: 'px' }],
-                declarations: [
-                    ...EXPORTS,
-                ],
-                exports: [
-                    ...EXPORTS
-                ]
-            },] }
-];
+InteractModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InteractModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InteractModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InteractModule, declarations: [DraggableDirective,
+        ResizableDirective,
+        DropzoneDirective,
+        GesturableDirective,
+        DragRootDirective,
+        AutoScrollDirective,
+        AccountForScaleDirective,
+        ApplyScaleDirective,
+        DragPreviewDirective,
+        ArrayOfNPipe], imports: [CommonModule], exports: [DraggableDirective,
+        ResizableDirective,
+        DropzoneDirective,
+        GesturableDirective,
+        DragRootDirective,
+        AutoScrollDirective,
+        AccountForScaleDirective,
+        ApplyScaleDirective,
+        DragPreviewDirective,
+        ArrayOfNPipe] });
+InteractModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InteractModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InteractModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    // providers: [{ provide: INTERACT_ROOT_CONFIG, useValue: 'px' }],
+                    declarations: [
+                        ...EXPORTS,
+                    ],
+                    exports: [
+                        ...EXPORTS
+                    ]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, INTERACT_ROOT_CONFIG, InteractModule, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement$1 as cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode, DraggableDirective as ɵa, ResizableDirective as ɵb, DropzoneDirective as ɵc, GesturableDirective as ɵd, DragRootDirective as ɵe, AccountForScaleDirective as ɵf, ApplyScaleDirective as ɵg, DragPreviewDirective as ɵh, ArrayOfNPipe as ɵi };
-//# sourceMappingURL=tft-interact.js.map
+export { AccountForScaleDirective, ApplyScaleDirective, ArrayOfNPipe, AutoScrollDirective, DEFAULT_REGISTRY_ID, DragPreviewDirective, DragRootDirective, DraggableDirective, DropzoneDirective, GesturableDirective, INTERACT_ROOT_CONFIG, InteractModule, ResizableDirective, TFT_DRAG_PREVIEW, cloneElement$1 as cloneElement, defaultDelta, defaultPosition, defaultSize, getClosestMatchingAncestor, getRootNode };
+//# sourceMappingURL=tft-interact.mjs.map