@tft/interact 14.0.0 → 15.0.0

package/{fesm2020 → fesm2022}/tft-interact.mjs

@@ -5,1187 +5,1187 @@ import interact from 'interactjs';
 import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
 import { shareReplay, tap, map, scan } from 'rxjs/operators';
 
-class ArrayOfNPipe {
-    /**
-     *
-     * @param n the number to make an array of
-     * @param max the max length of the array (useful for limiting rendering in ngFor loop)
-     */
-    transform(n, max) {
-        const length = ((max && max < n) || n === Infinity) ? max : n;
-        return new Array(length).fill(length).map((x, i) => i);
-    }
-}
-ArrayOfNPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ArrayOfNPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ArrayOfNPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: ArrayOfNPipe, name: "arrayOfN" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ArrayOfNPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'arrayOfN'
-                }]
+class ArrayOfNPipe {
+    /**
+     *
+     * @param n the number to make an array of
+     * @param max the max length of the array (useful for limiting rendering in ngFor loop)
+     */
+    transform(n, max) {
+        const length = ((max && max < n) || n === Infinity) ? max : n;
+        return new Array(length).fill(length).map((x, i) => i);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ArrayOfNPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.9", ngImport: i0, type: ArrayOfNPipe, name: "arrayOfN" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", 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';
-/**
- * Default initial value for Delta BehaviorSubject
- */
-const defaultDelta = {
-    deltaX: 0,
-    deltaY: 0,
-    targetElement: null
-};
-/**
- * Default initial value for Size BehaviorSubject
- */
-const defaultSize = {
-    width: null,
-    height: null,
-    targetElement: null
-};
-/**
- * Default initial value for Position BehaviorSubject
- */
-const defaultPosition = {
-    x: 0,
-    y: 0,
-    targetElement: null
+const INTERACT_ROOT_CONFIG = new InjectionToken('INTERACT_ROOT_CONFIG_PARAMS');
+const DEFAULT_REGISTRY_ID = 'DEFAULT';
+/**
+ * Default initial value for Delta BehaviorSubject
+ */
+const defaultDelta = {
+    deltaX: 0,
+    deltaY: 0,
+    targetElement: null
+};
+/**
+ * Default initial value for Size BehaviorSubject
+ */
+const defaultSize = {
+    width: null,
+    height: null,
+    targetElement: null
+};
+/**
+ * Default initial value for Position BehaviorSubject
+ */
+const defaultPosition = {
+    x: 0,
+    y: 0,
+    targetElement: null
 };
 
-class InteractService {
-    constructor(rendererFactory, ngZone, rootConfig) {
-        this.rendererFactory = rendererFactory;
-        this.ngZone = ngZone;
-        this.rootConfig = rootConfig;
-        this._interactableIndex = 0;
-        this._dropzoneIndex = 0;
-        // TODO: consider using Map here
-        this.dragRegistrySystem = {};
-        this.cssUnit = 'px';
-        this.renderer = this.rendererFactory.createRenderer(null, null);
-        this.cssUnit = rootConfig?.cssDimensionUnit || 'px';
-    }
-    addDeltaToPosition(delta, position) {
-        return {
-            x: delta.deltaX + position.x,
-            y: delta.deltaY + position.y,
-            targetElement: position.targetElement || delta.targetElement
-        };
-    }
-    addRegistryToSystem(customRegistryId = null) {
-        const registryId = customRegistryId || this.createDropzoneId(this._dropzoneIndex++);
-        this.dragRegistrySystem[registryId] = {};
-        return registryId;
-    }
-    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 new id is created for the draggable.
-        const key = this.createInteractableId(interactableId);
-        if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {
-            this.dragRegistrySystem[registryId] = {};
-        }
-        this.dragRegistrySystem[registryId][key] = this.createInteractableState(defaultPosition, defaultSize, defaultDelta);
-        return key;
-    }
-    destroyInteractable(interactableId, registryId = DEFAULT_REGISTRY_ID) {
-        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];
-        }
-    }
-    subscribeToInteractable(interactableId, registryId = DEFAULT_REGISTRY_ID) {
-        return this.dragRegistrySystem[registryId][interactableId];
-    }
-    createInteractableState(initialPosition, initialSize, initialDelta) {
-        const deltas$ = new BehaviorSubject(initialDelta);
-        // tracks the size of the element
-        const size$ = new BehaviorSubject({ ...initialSize, ...initialDelta });
-        // Stream of positions as they change
-        const position$ = new BehaviorSubject(initialPosition);
-        // All draggable data mapped together
-        const interactable$ = combineLatest([
-            size$.pipe(
-            // startWith({...initialSize, ...initialDelta}),
-            shareReplay(1), 
-            // filter(resizeEvent => !!resizeEvent.targetElement),
-            tap(({ deltaX, deltaY, width, height, targetElement }) => {
-                this.ngZone.runOutsideAngular(() => {
-                    this.setElementSize(width, height, targetElement);
-                });
-                // only reposition if necessary i.e when resizing left or up
-                if (deltaX || deltaY) {
-                    deltas$.next({ deltaX, deltaY, targetElement });
-                }
-            })),
-            deltas$.pipe(shareReplay(1), tap((delta) => {
-                const position = position$.value;
-                const newPosition = this.addDeltaToPosition(delta, position);
-                position$.next(newPosition);
-            })),
-            position$.pipe(shareReplay(1), tap(position => {
-                this.ngZone.runOutsideAngular(() => {
-                    this.setElementTransform(position.x, position.y, position);
-                });
-            }))
-        ]).pipe(shareReplay(1), map(([size, deltas, position]) => {
-            return {
-                x: position.x,
-                y: position.y,
-                deltaX: deltas.deltaX,
-                deltaY: deltas.deltaY,
-                width: size.width,
-                height: size.height,
-                targetElement: size.targetElement || position.targetElement || deltas.targetElement
-            };
-        }));
-        // TODO: update system to handle only returning interactable$
-        return {
-            deltas$,
-            position$,
-            size$,
-            interactable$
-        };
-    }
-    createInteractableId(customInteractableId = null) {
-        return customInteractableId || `interactable${this._interactableIndex++}`;
-    }
-    createDropzoneId(index) {
-        return `dropzone${index}`;
-    }
-    getInteractableState(interactableId, registryId = DEFAULT_REGISTRY_ID) {
-        return this.dragRegistrySystem[registryId][interactableId].interactable$;
-    }
-    updateDeltas(interactId, registryId, { deltaX, deltaY }, targetElement) {
-        if (!this.interactableExistOnRegistry(interactId, registryId))
-            return;
-        this.dragRegistrySystem[registryId][interactId].deltas$.next({ deltaX, deltaY, targetElement });
-    }
-    updatePosition(interactId, registryId, { x, y }, targetElement) {
-        if (!this.interactableExistOnRegistry(interactId, registryId))
-            return;
-        this.dragRegistrySystem[registryId][interactId].position$.next({ x, y, targetElement });
-    }
-    updateSize(interactId, registryId, { deltaX, deltaY, width, height }, targetElement) {
-        if (!this.interactableExistOnRegistry(interactId, registryId))
-            return;
-        this.dragRegistrySystem[registryId][interactId].size$.next({ deltaX, deltaY, width, height, targetElement });
-    }
-    interactableExistOnRegistry(interactId, registryId = DEFAULT_REGISTRY_ID) {
-        // eslint-disable-next-line no-prototype-builtins
-        return this.dragRegistrySystem.hasOwnProperty(registryId) && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
-    }
-    /**
-     * Uses renderer to set width and height of angular component
-     * @param width the desired width of component
-     * @param height the desired height of component
-     * @param target the element to transform
-     */
-    setElementSize(width, height, target) {
-        if (!target)
-            return;
-        this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);
-        this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);
-    }
-    /**
-     * Uses renderer to set position of angular component
-     * @param x position on x axis
-     * @param y position on y axis
-     * @param target the element to transform
-     */
-    setElementTransform(x, y, position) {
-        if (!position?.targetElement)
-            return;
-        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
-     * be passed to css transform
-     * @param x the position along the x axis
-     * @param y the position along the y axis
-     */
-    createTransformString(x, y) {
-        return `translate3d(${x}${this.cssUnit}, ${y}${this.cssUnit}, 0)`;
-    }
-    calculatePositionInElement(zoneElement, dragElement, scale) {
-        // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements
-        const zoneRect = zoneElement.getBoundingClientRect();
-        const dragRect = dragElement.getBoundingClientRect();
-        const position = scale
-            ? {
-                x: (dragRect.left - zoneRect.left) / scale || 1,
-                y: (dragRect.top - zoneRect.top) / scale || 1
-            } : {
-            x: dragRect.left - zoneRect.left,
-            y: dragRect.top - zoneRect.top
-        };
-        // console.log({ y:position.y, drt:dragRect.top, zrt: zoneRect.top})
-        return position;
-    }
-}
-InteractService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: InteractService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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]
-                }] }]; } });
+class InteractService {
+    constructor(rendererFactory, ngZone, rootConfig) {
+        this.rendererFactory = rendererFactory;
+        this.ngZone = ngZone;
+        this.rootConfig = rootConfig;
+        this._interactableIndex = 0;
+        this._dropzoneIndex = 0;
+        // TODO: consider using Map here
+        this.dragRegistrySystem = {};
+        this.cssUnit = 'px';
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+        this.cssUnit = rootConfig?.cssDimensionUnit || 'px';
+    }
+    addDeltaToPosition(delta, position) {
+        return {
+            x: delta.deltaX + position.x,
+            y: delta.deltaY + position.y,
+            targetElement: position.targetElement || delta.targetElement
+        };
+    }
+    addRegistryToSystem(customRegistryId = null) {
+        const registryId = customRegistryId || this.createDropzoneId(this._dropzoneIndex++);
+        this.dragRegistrySystem[registryId] = {};
+        return registryId;
+    }
+    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 new id is created for the draggable.
+        const key = this.createInteractableId(interactableId);
+        if (!Object.prototype.hasOwnProperty.call(this.dragRegistrySystem, registryId)) {
+            this.dragRegistrySystem[registryId] = {};
+        }
+        this.dragRegistrySystem[registryId][key] = this.createInteractableState(defaultPosition, defaultSize, defaultDelta);
+        return key;
+    }
+    destroyInteractable(interactableId, registryId = DEFAULT_REGISTRY_ID) {
+        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];
+        }
+    }
+    subscribeToInteractable(interactableId, registryId = DEFAULT_REGISTRY_ID) {
+        return this.dragRegistrySystem[registryId][interactableId];
+    }
+    createInteractableState(initialPosition, initialSize, initialDelta) {
+        const deltas$ = new BehaviorSubject(initialDelta);
+        // tracks the size of the element
+        const size$ = new BehaviorSubject({ ...initialSize, ...initialDelta });
+        // Stream of positions as they change
+        const position$ = new BehaviorSubject(initialPosition);
+        // All draggable data mapped together
+        const interactable$ = combineLatest([
+            size$.pipe(
+            // startWith({...initialSize, ...initialDelta}),
+            shareReplay(1), 
+            // filter(resizeEvent => !!resizeEvent.targetElement),
+            tap(({ deltaX, deltaY, width, height, targetElement }) => {
+                this.ngZone.runOutsideAngular(() => {
+                    this.setElementSize(width, height, targetElement);
+                });
+                // only reposition if necessary i.e when resizing left or up
+                if (deltaX || deltaY) {
+                    deltas$.next({ deltaX, deltaY, targetElement });
+                }
+            })),
+            deltas$.pipe(shareReplay(1), tap((delta) => {
+                const position = position$.value;
+                const newPosition = this.addDeltaToPosition(delta, position);
+                position$.next(newPosition);
+            })),
+            position$.pipe(shareReplay(1), tap(position => {
+                this.ngZone.runOutsideAngular(() => {
+                    this.setElementTransform(position.x, position.y, position);
+                });
+            }))
+        ]).pipe(shareReplay(1), map(([size, deltas, position]) => {
+            return {
+                x: position.x,
+                y: position.y,
+                deltaX: deltas.deltaX,
+                deltaY: deltas.deltaY,
+                width: size.width,
+                height: size.height,
+                targetElement: size.targetElement || position.targetElement || deltas.targetElement
+            };
+        }));
+        // TODO: update system to handle only returning interactable$
+        return {
+            deltas$,
+            position$,
+            size$,
+            interactable$
+        };
+    }
+    createInteractableId(customInteractableId = null) {
+        return customInteractableId || `interactable${this._interactableIndex++}`;
+    }
+    createDropzoneId(index) {
+        return `dropzone${index}`;
+    }
+    getInteractableState(interactableId, registryId = DEFAULT_REGISTRY_ID) {
+        return this.dragRegistrySystem[registryId][interactableId].interactable$;
+    }
+    updateDeltas(interactId, registryId, { deltaX, deltaY }, targetElement) {
+        if (!this.interactableExistOnRegistry(interactId, registryId))
+            return;
+        this.dragRegistrySystem[registryId][interactId].deltas$.next({ deltaX, deltaY, targetElement });
+    }
+    updatePosition(interactId, registryId, { x, y }, targetElement) {
+        if (!this.interactableExistOnRegistry(interactId, registryId))
+            return;
+        this.dragRegistrySystem[registryId][interactId].position$.next({ x, y, targetElement });
+    }
+    updateSize(interactId, registryId, { deltaX, deltaY, width, height }, targetElement) {
+        if (!this.interactableExistOnRegistry(interactId, registryId))
+            return;
+        this.dragRegistrySystem[registryId][interactId].size$.next({ deltaX, deltaY, width, height, targetElement });
+    }
+    interactableExistOnRegistry(interactId, registryId = DEFAULT_REGISTRY_ID) {
+        // eslint-disable-next-line no-prototype-builtins
+        return this.dragRegistrySystem.hasOwnProperty(registryId) && this.dragRegistrySystem[registryId].hasOwnProperty(interactId);
+    }
+    /**
+     * Uses renderer to set width and height of angular component
+     * @param width the desired width of component
+     * @param height the desired height of component
+     * @param target the element to transform
+     */
+    setElementSize(width, height, target) {
+        if (!target)
+            return;
+        this.renderer.setStyle(target, 'width', `${width}${this.cssUnit}`);
+        this.renderer.setStyle(target, 'height', `${height}${this.cssUnit}`);
+    }
+    /**
+     * Uses renderer to set position of angular component
+     * @param x position on x axis
+     * @param y position on y axis
+     * @param target the element to transform
+     */
+    setElementTransform(x, y, position) {
+        if (!position?.targetElement)
+            return;
+        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
+     * be passed to css transform
+     * @param x the position along the x axis
+     * @param y the position along the y axis
+     */
+    createTransformString(x, y) {
+        return `translate3d(${x}${this.cssUnit}, ${y}${this.cssUnit}, 0)`;
+    }
+    calculatePositionInElement(zoneElement, dragElement, scale) {
+        // TODO: this calculation may not cover a lot of scenarios, keep an eye out for possible improvements
+        const zoneRect = zoneElement.getBoundingClientRect();
+        const dragRect = dragElement.getBoundingClientRect();
+        const position = scale
+            ? {
+                x: (dragRect.left - zoneRect.left) / scale || 1,
+                y: (dragRect.top - zoneRect.top) / scale || 1
+            } : {
+            x: dragRect.left - zoneRect.left,
+            y: dragRect.top - zoneRect.top
+        };
+        // console.log({ y:position.y, drt:dragRect.top, zrt: zoneRect.top})
+        return position;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InteractService, deps: [{ token: i0.RendererFactory2 }, { token: i0.NgZone }, { token: INTERACT_ROOT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InteractService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InteractService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ 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
- * @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 AccountForScaleDirective {
-    constructor(el) {
-        this.el = el;
-        // this setup allows consumers to set x, y scale independently or just set them both with scale
-        this.scale = 1;
-    }
-}
-AccountForScaleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AccountForScaleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AccountForScaleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: AccountForScaleDirective, selector: "[tftAccountForScale]", inputs: { scale: "scale" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AccountForScaleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tftAccountForScale]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { scale: [{
-                type: Input
+/**
+ * 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 AccountForScaleDirective {
+    constructor(el) {
+        this.el = el;
+        // this setup allows consumers to set x, y scale independently or just set them both with scale
+        this.scale = 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AccountForScaleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: AccountForScaleDirective, selector: "[tftAccountForScale]", inputs: { scale: "scale" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AccountForScaleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftAccountForScale]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scale: [{
+                type: Input
             }] } });
 
-class DropzoneDirective {
-    constructor(el, renderer, interactService, account_for_scale_dir) {
-        this.el = el;
-        this.renderer = renderer;
-        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() {
-        return this.account_for_scale_dir?.scale;
-    }
-    ngOnInit() {
-        // connects
-        this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);
-        this.dropzoneId = this.interactService.addRegistryToSystem(this.dropzoneId);
-    }
-    ngOnChanges(changes) {
-        if (!changes.dropzoneConfig || !this.dropzone)
-            return;
-        // this.dropzone.unset();
-        // this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig)
-        this.dropzone.dropzone(this.dropzoneConfig);
-    }
-    /**
-    * Connects element to interacts dropzone events and returns a reference to the interactable
-    * @param nativeElement the element to tie drop events to
-    * @param dropzoneConfig the interact configuration to use when connecting
-    */
-    connectDropzoneEvents(nativeElement, dropzoneConfig) {
-        return interact(nativeElement).dropzone(dropzoneConfig)
-            // TODO: investigate when this fires in different scenarios
-            .on('dropactivate', (event) => {
-            this.dropActivate.emit(this.mapDropzoneEvent(event));
-        })
-            .on('dragenter', (event) => {
-            this.renderer.setProperty(event.relatedTarget, 'dropTarget', this);
-            this.dragEnter.emit(this.mapDropzoneEvent(event));
-        })
-            .on('dragleave', (event) => {
-            if (event.relatedTarget.dropTarget === this) {
-                this.renderer.setProperty(event.relatedTarget, 'dropTarget', null);
-            }
-            this.dragLeave.emit(this.mapDropzoneEvent(event));
-        })
-            .on('drop', (event) => {
-            this.dragDrop.emit(this.mapDropzoneEvent(event));
-        });
-    }
-    /**
-     * Maps the drop event emitted by interact to something a little easier to use
-     * @param event the drop event emitted by interact, extended with extra fields we added to
-     */
-    mapDropzoneEvent(event) {
-        const zoneElement = event.target;
-        const dragElement = event.relatedTarget?.dragRef?.previewRef;
-        const scale = this.scale;
-        const positionInDropTarget = zoneElement && dragElement
-            ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
-            : null;
-        return {
-            interactEvent: event,
-            dragRef: dragElement.dragRef,
-            dragOrigin: dragElement.dragOrigin,
-            dropTarget: event.relatedTarget.dropTarget,
-            positionInDropTarget
-        };
-    }
-}
-DropzoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.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: "14.0.0", version: "14.0.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: "14.0.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
+class DropzoneDirective {
+    get scale() {
+        return this.account_for_scale_dir?.scale;
+    }
+    constructor(el, renderer, interactService, account_for_scale_dir) {
+        this.el = el;
+        this.renderer = renderer;
+        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();
+    }
+    ngOnInit() {
+        // connects
+        this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig);
+        this.dropzoneId = this.interactService.addRegistryToSystem(this.dropzoneId);
+    }
+    ngOnChanges(changes) {
+        if (!changes.dropzoneConfig || !this.dropzone)
+            return;
+        // this.dropzone.unset();
+        // this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig)
+        this.dropzone.dropzone(this.dropzoneConfig);
+    }
+    /**
+    * Connects element to interacts dropzone events and returns a reference to the interactable
+    * @param nativeElement the element to tie drop events to
+    * @param dropzoneConfig the interact configuration to use when connecting
+    */
+    connectDropzoneEvents(nativeElement, dropzoneConfig) {
+        return interact(nativeElement).dropzone(dropzoneConfig)
+            // TODO: investigate when this fires in different scenarios
+            .on('dropactivate', (event) => {
+            this.dropActivate.emit(this.mapDropzoneEvent(event));
+        })
+            .on('dragenter', (event) => {
+            this.renderer.setProperty(event.relatedTarget, 'dropTarget', this);
+            this.dragEnter.emit(this.mapDropzoneEvent(event));
+        })
+            .on('dragleave', (event) => {
+            if (event.relatedTarget.dropTarget === this) {
+                this.renderer.setProperty(event.relatedTarget, 'dropTarget', null);
+            }
+            this.dragLeave.emit(this.mapDropzoneEvent(event));
+        })
+            .on('drop', (event) => {
+            this.dragDrop.emit(this.mapDropzoneEvent(event));
+        });
+    }
+    /**
+     * Maps the drop event emitted by interact to something a little easier to use
+     * @param event the drop event emitted by interact, extended with extra fields we added to
+     */
+    mapDropzoneEvent(event) {
+        const zoneElement = event.target;
+        const dragElement = event.relatedTarget?.dragRef?.previewRef;
+        const scale = this.scale;
+        const positionInDropTarget = zoneElement && dragElement
+            ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
+            : null;
+        return {
+            interactEvent: event,
+            dragRef: dragElement.dragRef,
+            dragOrigin: dragElement.dragOrigin,
+            dropTarget: event.relatedTarget.dropTarget,
+            positionInDropTarget
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DropzoneDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: InteractService }, { token: AccountForScaleDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", 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: "17.0.9", ngImport: i0, type: DropzoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftDropzone]',
+                    host: {
+                        '[id]': 'dropzoneId'
+                    }
+                }]
+        }], ctorParameters: () => [{ 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
             }] } });
 
-const TFT_DRAG_PREVIEW = new InjectionToken('DragPreviewDirective');
-class DragPreviewDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-DragPreviewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragPreviewDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DragPreviewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: DragPreviewDirective, selector: "ng-template[tftDragPreview]", inputs: { dragData: "dragData" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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
+const TFT_DRAG_PREVIEW = new InjectionToken('DragPreviewDirective');
+class DragPreviewDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DragPreviewDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: DragPreviewDirective, selector: "ng-template[tftDragPreview]", inputs: { dragData: "dragData" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DragPreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-template[tftDragPreview]',
+                }]
+        }], ctorParameters: () => [{ 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;
+/** 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;
 }
 
-/**
- * Use this directive to select which element to attach the element to while dragging
- * @example <div tftDragRoot><div tftDraggable> </div> </div>
- * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )
- */
-class DragRootDirective {
-    constructor(el, 
-    // This is used when passing a dragRoot as in input to a draggable element that not a child of that dragRoot
-    // It allows the the interact service to check if the drag root has some scaling applied to it and account for it when the component is dragged
-    account_for_scale_dir) {
-        this.el = el;
-        this.account_for_scale_dir = account_for_scale_dir;
-    }
-}
-DragRootDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DragRootDirective, deps: [{ token: i0.ElementRef }, { token: AccountForScaleDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-DragRootDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: DragRootDirective, selector: "[tftDragRoot]", exportAs: ["tftDragRoot"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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 this directive to select which element to attach the element to while dragging
+ * @example <div tftDragRoot><div tftDraggable> </div> </div>
+ * @note this directive will overwrite any style transformations (e.g. transform: scale(2); )
+ */
+class DragRootDirective {
+    constructor(el, 
+    // This is used when passing a dragRoot as in input to a draggable element that not a child of that dragRoot
+    // It allows the the interact service to check if the drag root has some scaling applied to it and account for it when the component is dragged
+    account_for_scale_dir) {
+        this.el = el;
+        this.account_for_scale_dir = account_for_scale_dir;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DragRootDirective, deps: [{ token: i0.ElementRef }, { token: AccountForScaleDirective, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: DragRootDirective, selector: "[tftDragRoot]", exportAs: ["tftDragRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DragRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftDragRoot]',
+                    exportAs: 'tftDragRoot'
+                }]
+        }], ctorParameters: () => [{ 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: "14.0.1", ngImport: i0, type: AutoScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AutoScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: AutoScrollDirective, selector: "[tftAutoScroll]", inputs: { autoScrollConfig: "autoScrollConfig" }, host: { listeners: { "scroll": "scroll($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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']]
+;
+/**
+ * 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 {
+    // 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 });
+    }
+    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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AutoScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: AutoScrollDirective, selector: "[tftAutoScroll]", inputs: { autoScrollConfig: "autoScrollConfig" }, host: { listeners: { "scroll": "scroll($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: AutoScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftAutoScroll]'
+                }]
+        }], ctorParameters: () => [{ 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 {
-    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;
-        this._viewContainerRef = _viewContainerRef;
-        this._document = _document;
-        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;
-        /**
-         * @deprecated replaced by 'dragDisabled' property, please migrate before v13
-         */
-        this.disabled = false;
-        this.dragDisabled = false;
-        this.showPlaceholder = false;
-        // pipes all interact events to event emitters
-        this.dragStart = new EventEmitter();
-        this.dragMove = new EventEmitter();
-        this.dragInertiaStart = new EventEmitter();
-        this.dragEnd = new EventEmitter();
-    }
-    // check all the different places for scale
-    get scale() {
-        return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir?.scale || this.dragRoot?.account_for_scale_dir?.scale || 1;
-    }
-    ngOnInit() {
-        this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);
-        this.dragRootEl = (this.dragRoot?.el?.nativeElement || this.drag_root_dir?.el?.nativeElement) || this._document.body;
-        // register with parent dropzone if it exists, otherwise use default
-        // this gives us a place on the registry to store our drag items that don't have a dropzone
-        this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;
-        // add draggable to directory and store its id
-        this.interactableId = this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);
-        this.alignPositionWithInputs(this.x, this.y);
-        // cache subscription to interactable state so we can unsubscribe onDestroy
-        this.interactableState = this.interactService
-            .getInteractableState(this.interactableId, this.registryId);
-        // keep our cached position values in line with our drag state
-        this.interactableSubscription = this.interactableState.subscribe((state) => {
-            this.y = state.y;
-            this.x = state.x;
-        });
-        this.setDragConfig();
-    }
-    // TODO: watch config here as well and update interactable
-    ngOnChanges(changes) {
-        // we do this here instead of using a setter on the input so that it
-        // will only run once when there is a change to x and y
-        if (changes.y || changes.x) {
-            this.alignPositionWithInputs(this.x, this.y);
-        }
-        if (changes.dragConfig || changes.disabled || changes.dragDisabled) {
-            if (!this.interactable)
-                return;
-            this.setDragConfig();
-        }
-        /**
-         * @deprecated remove this in v13
-         */
-        if (changes.disabled) {
-            console.warn(`It looks like your using the 'disabled' input on a tftDraggable directive, it has been deprecated and is replaced with 'dragDisabled', please migrate by v13`);
-        }
-    }
-    setDragConfig() {
-        const enabled = !(this.disabled || this.dragDisabled);
-        const dragConfig = { ...this.dragConfig, enabled };
-        this.interactable.draggable(dragConfig);
-    }
-    ngAfterViewInit() {
-        this.addDragPropertiesToElement(this.el.nativeElement);
-        if (!this.dropzone_dir) {
-            this.previewRef = this.el.nativeElement;
-        }
-    }
-    ngOnDestroy() {
-        // clean up state and subscriptions related to destroyed component
-        this.interactableSubscription.unsubscribe();
-        this.interactService.destroyInteractable(this.interactableId, this.registryId);
-    }
-    dragMoveListener(event, element) {
-        const { dx, dy } = event;
-        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');
-        this.renderer.setStyle(dragElement, 'zIndex', this.dragZIndex);
-        this.renderer.setStyle(dragElement, 'position', 'absolute');
-    }
-    addDragPropertiesToElement(nativeElement) {
-        this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);
-        this.renderer.setProperty(nativeElement, 'dragOrigin', this.dropzone_dir || null);
-        this.renderer.setProperty(nativeElement, 'dragRef', this);
-    }
-    mapDragEvent(event) {
-        const { target, dropzone } = event;
-        const dropzoneElement = dropzone?.target || target.dropTarget?.el.nativeElement;
-        const scale = this.scale;
-        const positionInDropTarget = target && dropzoneElement
-            ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)
-            : null;
-        return {
-            interactEvent: event,
-            dragRef: this,
-            dragOrigin: target.dragOrigin,
-            dropTarget: target.dropTarget,
-            positionInDropTarget
-        };
-    }
-    setPosition(x, y) {
-        this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.el.nativeElement);
-    }
-    alignPositionWithInputs(x, y) {
-        // short circuit if positions aren't numbers or  if they haven't changed
-        if (!this.isValidPosition(x, y))
-            return;
-        this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.el.nativeElement);
-    }
-    isValidPosition(x, y) {
-        return this.isNumeric(x) && this.isNumeric(y);
-    }
-    // We use use this instead of isNaN here to try and help performance
-    // We should be able to reliably restrict to numbers or falsey values
-    isNumeric(num) {
-        return typeof num === 'number' && !isNaN(num);
-    }
-    initiateDragEvents(dragConfig, nativeElement) {
-        const defaultDragConfig = {
-            ...dragConfig,
-            enabled: !(this.disabled || this.dragDisabled),
-            ...(this.auto_scroll_dir && {
-                autoScroll: {
-                    ...this.auto_scroll_dir.autoScrollConfig,
-                    container: this.auto_scroll_dir.el.nativeElement
-                }
-            })
-        };
-        return interact(nativeElement).draggable(defaultDragConfig)
-            .on('dragstart', (event) => {
-            const interaction = event.interaction;
-            // check if we should append drag element to body
-            if (this.enableDragDefault
-                && interaction.pointerIsDown
-            // TODO: probably don't need following condition checks anymore remove by 2022
-            // && !!this.dropzone_dir
-            // && !interaction.interacting()
-            ) {
-                if (this._previewTemplate) {
-                    const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef);
-                    this.previewRef = getRootNode(viewRef, this._document);
-                }
-                else {
-                    this.previewRef = cloneElement(this.el.nativeElement);
-                }
-                this.addDragPropertiesToElement(this.previewRef);
-                this.setDragStyles(this.previewRef);
-                this.dragRootEl.prepend(this.previewRef);
-                const scale = this.account_for_scale_dir?.scale || this.dragRoot?.account_for_scale_dir?.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) => {
-            if (this.enableDragDefault) {
-                const dragElement = this.dropzone_dir && this.previewRef || nativeElement;
-                this.dragMoveListener(event, dragElement);
-            }
-            const mappedEvent = this.mapDragEvent(event);
-            this.dragMove.emit(mappedEvent);
-        })
-            .on('draginertiastart', (event) => {
-            this.dragInertiaStart.emit(this.mapDragEvent(event));
-        })
-            .on('dragend', (event) => {
-            const mappedEvent = this.mapDragEvent(event);
-            if (!!this.dropzone_dir && this.dropzone_dir === event.target.dropTarget) {
-                const { x, y } = mappedEvent.positionInDropTarget;
-                this.setPosition(x, y);
-            }
-            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(() => {
-                    this.dragRootEl.removeChild(this.previewRef);
-                });
-            }
-        });
-    }
-    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.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: "14.0.0", version: "14.0.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: "14.0.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
- */
-// create a clone of the component passed in and add it to the root component
-function cloneElement(element) {
-    const clone = element.cloneNode(true);
-    clone.removeAttribute('id');
-    return clone;
-}
-function getPreviewInsertionPoint(documentRef) {
-    // We can't use the body if the user is in fullscreen mode,
-    // because the preview will render under the fullscreen element.
-    return documentRef.fullscreenElement ||
-        documentRef.webkitFullscreenElement ||
-        documentRef.mozFullScreenElement ||
-        documentRef.msFullscreenElement ||
-        documentRef.body;
+/** @dynamic */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class DraggableDirective {
+    // check all the different places for scale
+    get scale() {
+        return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir?.scale || this.dragRoot?.account_for_scale_dir?.scale || 1;
+    }
+    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;
+        this._viewContainerRef = _viewContainerRef;
+        this._document = _document;
+        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;
+        /**
+         * @deprecated replaced by 'dragDisabled' property, please migrate before v13
+         */
+        this.disabled = false;
+        this.dragDisabled = false;
+        this.showPlaceholder = false;
+        // pipes all interact events to event emitters
+        this.dragStart = new EventEmitter();
+        this.dragMove = new EventEmitter();
+        this.dragInertiaStart = new EventEmitter();
+        this.dragEnd = new EventEmitter();
+    }
+    ngOnInit() {
+        this.interactable = this.initiateDragEvents(this.dragConfig, this.el.nativeElement);
+        this.dragRootEl = (this.dragRoot?.el?.nativeElement || this.drag_root_dir?.el?.nativeElement) || this._document.body;
+        // register with parent dropzone if it exists, otherwise use default
+        // this gives us a place on the registry to store our drag items that don't have a dropzone
+        this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;
+        // add draggable to directory and store its id
+        this.interactableId = this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);
+        this.alignPositionWithInputs(this.x, this.y);
+        // cache subscription to interactable state so we can unsubscribe onDestroy
+        this.interactableState = this.interactService
+            .getInteractableState(this.interactableId, this.registryId);
+        // keep our cached position values in line with our drag state
+        this.interactableSubscription = this.interactableState.subscribe((state) => {
+            this.y = state.y;
+            this.x = state.x;
+        });
+        this.setDragConfig();
+    }
+    // TODO: watch config here as well and update interactable
+    ngOnChanges(changes) {
+        // we do this here instead of using a setter on the input so that it
+        // will only run once when there is a change to x and y
+        if (changes.y || changes.x) {
+            this.alignPositionWithInputs(this.x, this.y);
+        }
+        if (changes.dragConfig || changes.disabled || changes.dragDisabled) {
+            if (!this.interactable)
+                return;
+            this.setDragConfig();
+        }
+        /**
+         * @deprecated remove this in v13
+         */
+        if (changes.disabled) {
+            console.warn(`It looks like your using the 'disabled' input on a tftDraggable directive, it has been deprecated and is replaced with 'dragDisabled', please migrate by v13`);
+        }
+    }
+    setDragConfig() {
+        const enabled = !(this.disabled || this.dragDisabled);
+        const dragConfig = { ...this.dragConfig, enabled };
+        this.interactable.draggable(dragConfig);
+    }
+    ngAfterViewInit() {
+        this.addDragPropertiesToElement(this.el.nativeElement);
+        if (!this.dropzone_dir) {
+            this.previewRef = this.el.nativeElement;
+        }
+    }
+    ngOnDestroy() {
+        // clean up state and subscriptions related to destroyed component
+        this.interactableSubscription.unsubscribe();
+        this.interactService.destroyInteractable(this.interactableId, this.registryId);
+    }
+    dragMoveListener(event, element) {
+        const { dx, dy } = event;
+        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');
+        this.renderer.setStyle(dragElement, 'zIndex', this.dragZIndex);
+        this.renderer.setStyle(dragElement, 'position', 'absolute');
+    }
+    addDragPropertiesToElement(nativeElement) {
+        this.renderer.setProperty(nativeElement, 'dropTarget', this.dropzone_dir || null);
+        this.renderer.setProperty(nativeElement, 'dragOrigin', this.dropzone_dir || null);
+        this.renderer.setProperty(nativeElement, 'dragRef', this);
+    }
+    mapDragEvent(event) {
+        const { target, dropzone } = event;
+        const dropzoneElement = dropzone?.target || target.dropTarget?.el.nativeElement;
+        const scale = this.scale;
+        const positionInDropTarget = target && dropzoneElement
+            ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)
+            : null;
+        return {
+            interactEvent: event,
+            dragRef: this,
+            dragOrigin: target.dragOrigin,
+            dropTarget: target.dropTarget,
+            positionInDropTarget
+        };
+    }
+    setPosition(x, y) {
+        this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.el.nativeElement);
+    }
+    alignPositionWithInputs(x, y) {
+        // short circuit if positions aren't numbers or  if they haven't changed
+        if (!this.isValidPosition(x, y))
+            return;
+        this.interactService.updatePosition(this.interactableId, this.registryId, { x, y }, this.el.nativeElement);
+    }
+    isValidPosition(x, y) {
+        return this.isNumeric(x) && this.isNumeric(y);
+    }
+    // We use use this instead of isNaN here to try and help performance
+    // We should be able to reliably restrict to numbers or falsey values
+    isNumeric(num) {
+        return typeof num === 'number' && !isNaN(num);
+    }
+    initiateDragEvents(dragConfig, nativeElement) {
+        const defaultDragConfig = {
+            ...dragConfig,
+            enabled: !(this.disabled || this.dragDisabled),
+            ...(this.auto_scroll_dir && {
+                autoScroll: {
+                    ...this.auto_scroll_dir.autoScrollConfig,
+                    container: this.auto_scroll_dir.el.nativeElement
+                }
+            })
+        };
+        return interact(nativeElement).draggable(defaultDragConfig)
+            .on('dragstart', (event) => {
+            const interaction = event.interaction;
+            // check if we should append drag element to body
+            if (this.enableDragDefault
+                && interaction.pointerIsDown
+            // TODO: probably don't need following condition checks anymore remove by 2022
+            // && !!this.dropzone_dir
+            // && !interaction.interacting()
+            ) {
+                if (this._previewTemplate) {
+                    const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef);
+                    this.previewRef = getRootNode(viewRef, this._document);
+                }
+                else {
+                    this.previewRef = cloneElement(this.el.nativeElement);
+                }
+                this.addDragPropertiesToElement(this.previewRef);
+                this.setDragStyles(this.previewRef);
+                this.dragRootEl.prepend(this.previewRef);
+                const scale = this.account_for_scale_dir?.scale || this.dragRoot?.account_for_scale_dir?.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) => {
+            if (this.enableDragDefault) {
+                const dragElement = this.dropzone_dir && this.previewRef || nativeElement;
+                this.dragMoveListener(event, dragElement);
+            }
+            const mappedEvent = this.mapDragEvent(event);
+            this.dragMove.emit(mappedEvent);
+        })
+            .on('draginertiastart', (event) => {
+            this.dragInertiaStart.emit(this.mapDragEvent(event));
+        })
+            .on('dragend', (event) => {
+            const mappedEvent = this.mapDragEvent(event);
+            if (!!this.dropzone_dir && this.dropzone_dir === event.target.dropTarget) {
+                const { x, y } = mappedEvent.positionInDropTarget;
+                this.setPosition(x, y);
+            }
+            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(() => {
+                    this.dragRootEl.removeChild(this.previewRef);
+                });
+            }
+        });
+    }
+    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);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", 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: "17.0.9", 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: () => [{ 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
+ */
+// create a clone of the component passed in and add it to the root component
+function cloneElement(element) {
+    const clone = element.cloneNode(true);
+    clone.removeAttribute('id');
+    return clone;
+}
+function getPreviewInsertionPoint(documentRef) {
+    // We can't use the body if the user is in fullscreen mode,
+    // because the preview will render under the fullscreen element.
+    return documentRef.fullscreenElement ||
+        documentRef.webkitFullscreenElement ||
+        documentRef.mozFullScreenElement ||
+        documentRef.msFullscreenElement ||
+        documentRef.body;
 }
 
-/** @dynamic */
-class ResizableDirective {
-    constructor(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir, auto_scroll_dir) {
-        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';
-        this.resizeDisabled = false;
-        this.resizeStart = new EventEmitter();
-        this.resizeMove = new EventEmitter();
-        this.resizeInertiaStart = new EventEmitter();
-        this.resizeEnd = new EventEmitter();
-        this.defaultConfig = {
-            edges: { left: true, right: true, bottom: true, top: true }
-        };
-        this.activeEdges = { left: false, right: false, top: false, bottom: false };
-        this.dragRootEl = drag_root_dir?.el?.nativeElement || this._document.body;
-    }
-    get scale() {
-        return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir?.scale;
-    }
-    ngOnInit() {
-        this.addResizePropertiesToElement(this.el.nativeElement);
-        // we check for a dropzone, we use its id as the registry id if there is on
-        // otherwise, we use DEFAULT_REGISTRY_ID as a registry id. This allows us to keep our interactable
-        // drag state organized by dropzones.
-        this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;
-        this.interactableId = this.draggable_dir?.interactableId || this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);
-        this.interactable = this.initiateResizeEvents({ ...this.defaultConfig, ...this.resizeConfig }, this.el.nativeElement);
-        this.alignDimensionsWithInputs(this.width, this.height);
-        this.interactableSubscription = this.interactService
-            .getInteractableState(this.interactableId, this.registryId)
-            .subscribe();
-    }
-    ngOnChanges(changes) {
-        if ((changes.resizeConfig || changes.resizeDisabled) && this.interactable) {
-            this.interactable.resizable({ ...this.resizeConfig, enabled: !this.resizeDisabled, });
-        }
-        if (changes.width || changes.height) {
-            this.alignDimensionsWithInputs(this.width, this.height);
-        }
-    }
-    ngOnDestroy() {
-        this.interactableSubscription.unsubscribe();
-        this.interactService.destroyInteractable(this.interactableId, this.registryId);
-    }
-    resizeListener(event) {
-        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);
-    }
-    /**
-     *  hook elements into interacts resize event listeners
-     *  we spread the configs so that the consuming component only overwrites the
-     *  pieces that it explicitly indicates
-     * @param resizeConfig
-     * @param nativeElement
-     */
-    initiateResizeEvents(resizeConfig, nativeElement) {
-        // TODO: This should try and get interactable from tft_draggable if it exists
-        const defaultResizeConfig = {
-            ...resizeConfig,
-            enabled: !this.resizeDisabled,
-            ...(this.auto_scroll_dir && {
-                autoScroll: {
-                    ...this.auto_scroll_dir.autoScrollConfig,
-                    container: this.auto_scroll_dir.el.nativeElement
-                }
-            })
-        };
-        const interactable = this.draggable_dir?.interactable || interact(nativeElement);
-        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);
-            }
-            const mappedEvent = this.mapResizeEvent(event);
-            this.resizeMove.emit(mappedEvent);
-        })
-            .on('resizeinertiastart', (event) => this.resizeInertiaStart.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) {
-        const target = this.el.nativeElement;
-        const relatedTarget = this.draggable_dir?.dropzone_dir?.el.nativeElement;
-        const scale = this.scale;
-        const positionInDropTarget = target && relatedTarget
-            ? this.interactService.calculatePositionInElement(relatedTarget, target, scale)
-            : null;
-        return {
-            interactEvent: event,
-            resizeRef: this,
-            dragRef: this.draggable_dir,
-            dragOrigin: this.dropzone_dir,
-            dropTarget: this.el.nativeElement.dropTarget,
-            positionInDropTarget,
-            size: {
-                width: target.clientWidth / scale,
-                height: target.clientHeight / scale
-            }
-        };
-    }
-    alignDimensionsWithInputs(width, height) {
-        this.interactService.updateSize(this.interactableId, this.registryId, { deltaX: 0, deltaY: 0, width, height }, this.el.nativeElement);
-    }
-    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.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: "14.0.0", version: "14.0.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: "14.0.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 */
+class ResizableDirective {
+    get scale() {
+        return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir?.scale;
+    }
+    constructor(el, _document, interactService, renderer, drag_root_dir, account_for_scale_dir, draggable_dir, dropzone_dir, auto_scroll_dir) {
+        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';
+        this.resizeDisabled = false;
+        this.resizeStart = new EventEmitter();
+        this.resizeMove = new EventEmitter();
+        this.resizeInertiaStart = new EventEmitter();
+        this.resizeEnd = new EventEmitter();
+        this.defaultConfig = {
+            edges: { left: true, right: true, bottom: true, top: true }
+        };
+        this.activeEdges = { left: false, right: false, top: false, bottom: false };
+        this.dragRootEl = drag_root_dir?.el?.nativeElement || this._document.body;
+    }
+    ngOnInit() {
+        this.addResizePropertiesToElement(this.el.nativeElement);
+        // we check for a dropzone, we use its id as the registry id if there is on
+        // otherwise, we use DEFAULT_REGISTRY_ID as a registry id. This allows us to keep our interactable
+        // drag state organized by dropzones.
+        this.registryId = this.dropzone_dir?.dropzoneId || DEFAULT_REGISTRY_ID;
+        this.interactableId = this.draggable_dir?.interactableId || this.interactService.addDraggableToRegistry(this.registryId, this.interactableId);
+        this.interactable = this.initiateResizeEvents({ ...this.defaultConfig, ...this.resizeConfig }, this.el.nativeElement);
+        this.alignDimensionsWithInputs(this.width, this.height);
+        this.interactableSubscription = this.interactService
+            .getInteractableState(this.interactableId, this.registryId)
+            .subscribe();
+    }
+    ngOnChanges(changes) {
+        if ((changes.resizeConfig || changes.resizeDisabled) && this.interactable) {
+            this.interactable.resizable({ ...this.resizeConfig, enabled: !this.resizeDisabled, });
+        }
+        if (changes.width || changes.height) {
+            this.alignDimensionsWithInputs(this.width, this.height);
+        }
+    }
+    ngOnDestroy() {
+        this.interactableSubscription.unsubscribe();
+        this.interactService.destroyInteractable(this.interactableId, this.registryId);
+    }
+    resizeListener(event) {
+        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);
+    }
+    /**
+     *  hook elements into interacts resize event listeners
+     *  we spread the configs so that the consuming component only overwrites the
+     *  pieces that it explicitly indicates
+     * @param resizeConfig
+     * @param nativeElement
+     */
+    initiateResizeEvents(resizeConfig, nativeElement) {
+        // TODO: This should try and get interactable from tft_draggable if it exists
+        const defaultResizeConfig = {
+            ...resizeConfig,
+            enabled: !this.resizeDisabled,
+            ...(this.auto_scroll_dir && {
+                autoScroll: {
+                    ...this.auto_scroll_dir.autoScrollConfig,
+                    container: this.auto_scroll_dir.el.nativeElement
+                }
+            })
+        };
+        const interactable = this.draggable_dir?.interactable || interact(nativeElement);
+        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);
+            }
+            const mappedEvent = this.mapResizeEvent(event);
+            this.resizeMove.emit(mappedEvent);
+        })
+            .on('resizeinertiastart', (event) => this.resizeInertiaStart.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) {
+        const target = this.el.nativeElement;
+        const relatedTarget = this.draggable_dir?.dropzone_dir?.el.nativeElement;
+        const scale = this.scale;
+        const positionInDropTarget = target && relatedTarget
+            ? this.interactService.calculatePositionInElement(relatedTarget, target, scale)
+            : null;
+        return {
+            interactEvent: event,
+            resizeRef: this,
+            dragRef: this.draggable_dir,
+            dragOrigin: this.dropzone_dir,
+            dropTarget: this.el.nativeElement.dropTarget,
+            positionInDropTarget,
+            size: {
+                width: target.clientWidth / scale,
+                height: target.clientHeight / scale
+            }
+        };
+    }
+    alignDimensionsWithInputs(width, height) {
+        this.interactService.updateSize(this.interactableId, this.registryId, { deltaX: 0, deltaY: 0, width, height }, this.el.nativeElement);
+    }
+    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);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", 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: "17.0.9", 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: () => [{ 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
-class GesturableDirective {
-    constructor(el, draggable_dir) {
-        this.el = el;
-        this.draggable_dir = draggable_dir;
-        this.gestureDisabled = false;
-        // pipes all interact events to event emitters
-        this.gestureStart = new EventEmitter();
-        this.gestureMove = new EventEmitter();
-        this.gestureEnd = new EventEmitter();
-    }
-    ngOnInit() {
-        this.gesturableId = this.draggable_dir?.interactableId || 'id';
-        this.interactable = this.initiateGestureEvents(this.gestureConfig, this.el.nativeElement);
-        this.setGestureConfig();
-    }
-    // TODO: watch config here as well and update interactable
-    ngOnChanges(changes) {
-        // we do this here instead of using a setter on the input so that it
-        // will only run once when there is a change to x and y
-        if (changes.gestureConfig || changes.gestureDisabled) {
-            if (!this.interactable)
-                return;
-            this.setGestureConfig();
-        }
-    }
-    setGestureConfig() {
-        const enabled = !this.gestureDisabled;
-        const gestureConfig = { ...this.gestureConfig, enabled };
-        this.interactable.gesturable(gestureConfig);
-    }
-    initiateGestureEvents(gestureConfig, nativeElement) {
-        const defaultConfig = {
-            enabled: !this.gestureDisabled,
-        };
-        const interactable = this.draggable_dir?.interactable || interact(nativeElement);
-        return interactable.gesturable({ ...defaultConfig, ...gestureConfig })
-            .on('gesturestart', (event) => {
-            this.gestureStart.emit({ gestureRef: this, interactEvent: event });
-        })
-            .on('gesturemove', (event) => {
-            this.gestureMove.emit({ gestureRef: this, interactEvent: event });
-        })
-            .on('gestureend', (event) => {
-            this.gestureEnd.emit({ gestureRef: this, interactEvent: event });
-        });
-    }
-}
-GesturableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: GesturableDirective, deps: [{ token: i0.ElementRef }, { token: DraggableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GesturableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.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
+/** @dynamic */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class GesturableDirective {
+    constructor(el, draggable_dir) {
+        this.el = el;
+        this.draggable_dir = draggable_dir;
+        this.gestureDisabled = false;
+        // pipes all interact events to event emitters
+        this.gestureStart = new EventEmitter();
+        this.gestureMove = new EventEmitter();
+        this.gestureEnd = new EventEmitter();
+    }
+    ngOnInit() {
+        this.gesturableId = this.draggable_dir?.interactableId || 'id';
+        this.interactable = this.initiateGestureEvents(this.gestureConfig, this.el.nativeElement);
+        this.setGestureConfig();
+    }
+    // TODO: watch config here as well and update interactable
+    ngOnChanges(changes) {
+        // we do this here instead of using a setter on the input so that it
+        // will only run once when there is a change to x and y
+        if (changes.gestureConfig || changes.gestureDisabled) {
+            if (!this.interactable)
+                return;
+            this.setGestureConfig();
+        }
+    }
+    setGestureConfig() {
+        const enabled = !this.gestureDisabled;
+        const gestureConfig = { ...this.gestureConfig, enabled };
+        this.interactable.gesturable(gestureConfig);
+    }
+    initiateGestureEvents(gestureConfig, nativeElement) {
+        const defaultConfig = {
+            enabled: !this.gestureDisabled,
+        };
+        const interactable = this.draggable_dir?.interactable || interact(nativeElement);
+        return interactable.gesturable({ ...defaultConfig, ...gestureConfig })
+            .on('gesturestart', (event) => {
+            this.gestureStart.emit({ gestureRef: this, interactEvent: event });
+        })
+            .on('gesturemove', (event) => {
+            this.gestureMove.emit({ gestureRef: this, interactEvent: event });
+        })
+            .on('gestureend', (event) => {
+            this.gestureEnd.emit({ gestureRef: this, interactEvent: event });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: GesturableDirective, deps: [{ token: i0.ElementRef }, { token: DraggableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", 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: "17.0.9", 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: () => [{ 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) {
-        this.el = el;
-        this._scale = 1;
-    }
-    // this setup allows consumers to set x, y scale independently or just set them both with scale
-    set scale(val) {
-        this._scale;
-        this.fontSize = `${val}px`;
-    }
-    ;
-}
-ApplyScaleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ApplyScaleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ApplyScaleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: ApplyScaleDirective, selector: "[tftApplyScale]", inputs: { scale: "scale" }, host: { properties: { "style.fontSize": "this.fontSize" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.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']
+class ApplyScaleDirective {
+    // this setup allows consumers to set x, y scale independently or just set them both with scale
+    set scale(val) {
+        this._scale;
+        this.fontSize = `${val}px`;
+    }
+    ;
+    constructor(el) {
+        this.el = el;
+        this._scale = 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ApplyScaleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: ApplyScaleDirective, selector: "[tftApplyScale]", inputs: { scale: "scale" }, host: { properties: { "style.fontSize": "this.fontSize" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ApplyScaleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tftApplyScale]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scale: [{
+                type: Input
+            }], fontSize: [{
+                type: HostBinding,
+                args: ['style.fontSize']
             }] } });
 
-const EXPORTS = [
-    DraggableDirective,
-    ResizableDirective,
-    DropzoneDirective,
-    GesturableDirective,
-    DragRootDirective,
-    AutoScrollDirective,
-    AccountForScaleDirective,
-    ApplyScaleDirective,
-    DragPreviewDirective,
-    ArrayOfNPipe,
-];
-class InteractModule {
-    static forRoot(config) {
-        const defaultConfig = { cssDimensionUnit: 'px' };
-        return {
-            ngModule: InteractModule,
-            providers: [
-                { provide: INTERACT_ROOT_CONFIG, useValue: { ...defaultConfig, ...config } },
-                InteractService
-            ]
-        };
-    }
-}
-InteractModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InteractModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InteractModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.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: "14.0.1", ngImport: i0, type: InteractModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InteractModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    // providers: [{ provide: INTERACT_ROOT_CONFIG, useValue: 'px' }],
-                    declarations: [
-                        ...EXPORTS,
-                    ],
-                    exports: [
-                        ...EXPORTS
-                    ]
-                }]
+const EXPORTS = [
+    DraggableDirective,
+    ResizableDirective,
+    DropzoneDirective,
+    GesturableDirective,
+    DragRootDirective,
+    AutoScrollDirective,
+    AccountForScaleDirective,
+    ApplyScaleDirective,
+    DragPreviewDirective,
+    ArrayOfNPipe,
+];
+class InteractModule {
+    static forRoot(config) {
+        const defaultConfig = { cssDimensionUnit: 'px' };
+        return {
+            ngModule: InteractModule,
+            providers: [
+                { provide: INTERACT_ROOT_CONFIG, useValue: { ...defaultConfig, ...config } },
+                InteractService
+            ]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InteractModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.9", 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] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: InteractModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", 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.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 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 };