@tft/interact 21.0.7 → 21.1.1

package/fesm2022/tft-interact.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, InjectionToken, inject, RendererFactory2, NgZone, Injectable, ElementRef, Input, Directive, Renderer2, EventEmitter, Output, HostBinding, TemplateRef, HostListener, ViewContainerRef, DOCUMENT, ContentChild, signal, computed, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Pipe, InjectionToken, inject, RendererFactory2, NgZone, Injectable, ElementRef, input, Directive, Renderer2, output, signal, computed, effect, TemplateRef, HostListener, ViewContainerRef, DOCUMENT, ContentChild, NgModule } from '@angular/core';
 import interact from 'interactjs';
 import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
 import { shareReplay, tap, map, scan } from 'rxjs/operators';
@@ -16,13 +15,13 @@ class ArrayOfNPipe {
         return new Array(length).fill(length).map((x, i) => i);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ArrayOfNPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: ArrayOfNPipe, isStandalone: false, name: "arrayOfN" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: ArrayOfNPipe, isStandalone: true, name: "arrayOfN" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ArrayOfNPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'arrayOfN',
-                    standalone: false
+                    standalone: true,
                 }]
         }] });
 
@@ -250,59 +249,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 class AccountForScaleDirective {
     constructor() {
         this.el = inject(ElementRef);
-        // this setup allows consumers to set x, y scale independently or just set them both with scale
-        this.scale = 1;
+        this.scale = input(1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AccountForScaleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: AccountForScaleDirective, isStandalone: false, selector: "[tftAccountForScale]", inputs: { scale: "scale" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: AccountForScaleDirective, isStandalone: true, selector: "[tftAccountForScale]", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AccountForScaleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftAccountForScale]',
-                    standalone: false
+                    standalone: true,
                 }]
-        }], propDecorators: { scale: [{
-                type: Input
-            }] } });
+        }], propDecorators: { scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }] } });
 
 class DropzoneDirective {
+    ngOnInit() {
+        this.dropzone = this.connectDropzoneEvents(this.el.nativeElement, this.dropzoneConfig());
+        this._registeredId.set(this.interactService.addRegistryToSystem(this.dropzoneId()));
+    }
     constructor() {
         this.el = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.interactService = inject(InteractService);
         this.account_for_scale_dir = inject(AccountForScaleDirective, { optional: true });
-        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);
+        this.dropzoneId = input(...(ngDevMode ? [undefined, { debugName: "dropzoneId" }] : []));
+        this.dropzoneConfig = input({}, ...(ngDevMode ? [{ debugName: "dropzoneConfig" }] : []));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.dropzoneData = input(...(ngDevMode ? [undefined, { debugName: "dropzoneData" }] : []));
+        this.position = input('relative', ...(ngDevMode ? [{ debugName: "position" }] : []));
+        this.dropActivate = output();
+        this.dragEnter = output();
+        this.dragLeave = output();
+        this.dragDrop = output();
+        /** The actual registered ID — may differ from the dropzoneId input if none was provided. Drives [id] host binding. */
+        this._registeredId = signal(null, ...(ngDevMode ? [{ debugName: "_registeredId" }] : []));
+        this.scale = computed(() => this.account_for_scale_dir?.scale(), ...(ngDevMode ? [{ debugName: "scale" }] : []));
+        effect(() => {
+            const config = this.dropzoneConfig();
+            if (!this.dropzone)
+                return;
+            this.dropzone.dropzone(config);
+        });
     }
     /**
-    * 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
-    */
+     * Connects element to interact's dropzone events and returns a reference to the interactable
+     */
     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));
         })
@@ -322,12 +315,11 @@ class DropzoneDirective {
     }
     /**
      * 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 scale = this.scale();
         const positionInDropTarget = zoneElement && dragElement
             ? this.interactService.calculatePositionInElement(zoneElement, dragElement, scale)
             : null;
@@ -336,60 +328,41 @@ class DropzoneDirective {
             dragRef: dragElement.dragRef,
             dragOrigin: dragElement.dragOrigin,
             dropTarget: event.relatedTarget.dropTarget,
-            positionInDropTarget
+            positionInDropTarget,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: DropzoneDirective, isStandalone: false, 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: DropzoneDirective, isStandalone: true, selector: "[tftDropzone]", inputs: { dropzoneId: { classPropertyName: "dropzoneId", publicName: "dropzoneId", isSignal: true, isRequired: false, transformFunction: null }, dropzoneConfig: { classPropertyName: "dropzoneConfig", publicName: "dropzoneConfig", isSignal: true, isRequired: false, transformFunction: null }, dropzoneData: { classPropertyName: "dropzoneData", publicName: "dropzoneData", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropActivate: "dropActivate", dragEnter: "dragEnter", dragLeave: "dragLeave", dragDrop: "dragDrop" }, host: { properties: { "id": "_registeredId()", "style.position": "position()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DropzoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftDropzone]',
+                    standalone: true,
                     host: {
-                        '[id]': 'dropzoneId'
+                        '[id]': '_registeredId()',
+                        '[style.position]': 'position()',
                     },
-                    standalone: false
                 }]
-        }], 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
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { dropzoneId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneId", required: false }] }], dropzoneConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneConfig", required: false }] }], dropzoneData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneData", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], dropActivate: [{ type: i0.Output, args: ["dropActivate"] }], dragEnter: [{ type: i0.Output, args: ["dragEnter"] }], dragLeave: [{ type: i0.Output, args: ["dragLeave"] }], dragDrop: [{ type: i0.Output, args: ["dragDrop"] }] } });
 
 const TFT_DRAG_PREVIEW = new InjectionToken('DragPreviewDirective');
 class DragPreviewDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
+        this.dragData = input(...(ngDevMode ? [undefined, { debugName: "dragData" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DragPreviewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: DragPreviewDirective, isStandalone: false, selector: "ng-template[tftDragPreview]", inputs: { dragData: "dragData" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: DragPreviewDirective, isStandalone: true, selector: "ng-template[tftDragPreview]", inputs: { dragData: { classPropertyName: "dragData", publicName: "dragData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DragPreviewDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'ng-template[tftDragPreview]',
-                    standalone: false
+                    standalone: true,
                 }]
-        }], propDecorators: { dragData: [{
-                type: Input
-            }] } });
+        }], propDecorators: { dragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragData", required: false }] }] } });
 
 /** Gets the closest ancestor of an element that matches a selector. */
 function getClosestMatchingAncestor(element, selector) {
@@ -439,26 +412,18 @@ class DragRootDirective {
         this.account_for_scale_dir = inject(AccountForScaleDirective, { optional: true, self: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DragRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: DragRootDirective, isStandalone: false, selector: "[tftDragRoot]", exportAs: ["tftDragRoot"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: DragRootDirective, isStandalone: true, selector: "[tftDragRoot]", exportAs: ["tftDragRoot"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DragRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftDragRoot]',
                     exportAs: 'tftDragRoot',
-                    standalone: false
+                    standalone: true,
                 }]
         }] });
 
-;
-/**
- * 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;
@@ -466,16 +431,13 @@ class AutoScrollDirective {
     }
     constructor() {
         this.el = inject(ElementRef);
-        /**
-         * Limit minimum time between scroll events in milliseconds
-         */
-        this.autoScrollConfig = {
+        this.autoScrollConfig = input({
             margin: 50,
             distance: 3,
             interval: 50,
             speed: 300,
-            enabled: true
-        };
+            enabled: true,
+        }, ...(ngDevMode ? [{ debugName: "autoScrollConfig" }] : []));
         this.scrollDeltaObserver = new Subject();
         const el = this.el;
         const { scrollTop, scrollLeft } = el.nativeElement;
@@ -489,17 +451,15 @@ class AutoScrollDirective {
         this.scrollObserver.subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutoScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: AutoScrollDirective, isStandalone: false, selector: "[tftAutoScroll]", inputs: { autoScrollConfig: "autoScrollConfig" }, host: { listeners: { "scroll": "scroll($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: AutoScrollDirective, isStandalone: true, selector: "[tftAutoScroll]", inputs: { autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "scroll": "scroll($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutoScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftAutoScroll]',
-                    standalone: false
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [], propDecorators: { autoScrollConfig: [{
-                type: Input
-            }], scroll: [{
+        }], ctorParameters: () => [], propDecorators: { autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }], scroll: [{
                 type: HostListener,
                 args: ['scroll', ['$event']]
             }] } });
@@ -517,66 +477,61 @@ class DraggableDirective {
         this.dropzone_dir = inject(DropzoneDirective, { optional: true, skipSelf: true });
         this.drag_root_dir = inject(DragRootDirective, { optional: true, skipSelf: true });
         this.auto_scroll_dir = inject(AutoScrollDirective, { optional: true, skipSelf: true });
-        /* zIndex while dragging*/
-        this.dragZIndex = 10000;
-        this.enableDragDefault = true;
+        this.x = input(...(ngDevMode ? [undefined, { debugName: "x" }] : []));
+        this.y = input(...(ngDevMode ? [undefined, { debugName: "y" }] : []));
+        /** zIndex while dragging */
+        this.dragZIndex = input(10000, ...(ngDevMode ? [{ debugName: "dragZIndex" }] : []));
+        /** zIndex while at rest */
+        this.zIndex = input(...(ngDevMode ? [undefined, { debugName: "zIndex" }] : []));
+        this.dragData = input(...(ngDevMode ? [undefined, { debugName: "dragData" }] : []));
+        this.enableDragDefault = input(true, ...(ngDevMode ? [{ debugName: "enableDragDefault" }] : []));
         /**
          * @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;
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.dragDisabled = input(false, ...(ngDevMode ? [{ debugName: "dragDisabled" }] : []));
+        this.dragConfig = input(...(ngDevMode ? [undefined, { debugName: "dragConfig" }] : []));
+        this.showPlaceholder = input(false, ...(ngDevMode ? [{ debugName: "showPlaceholder" }] : []));
+        /**
+         * The element we want to prepend the drag element to.
+         * Use `tftDragRoot` directive on a parent element to set custom root element
+         *  @default document.body
+         */
+        this.dragRoot = input(...(ngDevMode ? [undefined, { debugName: "dragRoot" }] : []));
+        this.dragStart = output();
+        this.dragMove = output();
+        this.dragInertiaStart = output();
+        this.dragEnd = output();
+        this.scale = computed(() => this.account_for_scale_dir?.scale() || this.drag_root_dir?.account_for_scale_dir?.scale() || this.dragRoot()?.account_for_scale_dir?.scale() || 1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
+        effect(() => {
+            this.alignPositionWithInputs(this.x(), this.y());
+        });
+        effect(() => {
+            const disabled = this.disabled();
+            this.dragConfig();
+            this.dragDisabled();
+            if (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`);
+            }
+            if (!this.interactable)
+                return;
+            this.setDragConfig();
+        });
     }
     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.interactable = this.initiateDragEvents(this.dragConfig(), this.el.nativeElement);
+        this.dragRootEl = (this.dragRoot()?.el?.nativeElement || this.drag_root_dir?.el?.nativeElement) || this._document.body;
+        this.registryId = this.dropzone_dir?._registeredId() || DEFAULT_REGISTRY_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.alignPositionWithInputs(this.x(), this.y());
         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.interactableSubscription = this.interactableState.subscribe();
         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 };
+        const enabled = !(this.disabled() || this.dragDisabled());
+        const dragConfig = { ...this.dragConfig(), enabled };
         this.interactable.draggable(dragConfig);
     }
     ngAfterViewInit() {
@@ -586,20 +541,19 @@ class DraggableDirective {
         }
     }
     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 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, 'touch-action', 'none');
-        this.renderer.setStyle(dragElement, 'z-index', this.dragZIndex);
+        this.renderer.setStyle(dragElement, 'z-index', this.dragZIndex());
         this.renderer.setStyle(dragElement, 'position', 'absolute');
         // Prevents highlighting text if dragging over, which will interrupt the next drag action
         this.renderer.setStyle(dragElement, 'user-select', 'none');
@@ -612,7 +566,7 @@ class DraggableDirective {
     mapDragEvent(event) {
         const { target, dropzone } = event;
         const dropzoneElement = dropzone?.target || target.dropTarget?.el.nativeElement;
-        const scale = this.scale;
+        const scale = this.scale();
         const positionInDropTarget = target && dropzoneElement
             ? this.interactService.calculatePositionInElement(dropzoneElement, this.previewRef, scale)
             : null;
@@ -621,14 +575,13 @@ class DraggableDirective {
             dragRef: this,
             dragOrigin: target.dragOrigin,
             dropTarget: target.dropTarget,
-            positionInDropTarget
+            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);
@@ -636,27 +589,24 @@ class DraggableDirective {
     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),
+            enabled: !(this.disabled() || this.dragDisabled()),
             ...(this.auto_scroll_dir && {
                 autoScroll: {
-                    ...this.auto_scroll_dir.autoScrollConfig,
-                    container: this.auto_scroll_dir.el.nativeElement
-                }
-            })
+                    ...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) {
+            if (this.enableDragDefault() && interaction.pointerIsDown) {
                 if (this._previewTemplate) {
                     const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef);
                     this.previewRef = getRootNode(viewRef, this._document);
@@ -667,26 +617,24 @@ class DraggableDirective {
                 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 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) {
+                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) {
+            if (this.enableDragDefault()) {
                 const dragElement = this.dropzone_dir && this.previewRef || nativeElement;
                 this.dragMoveListener(event, dragElement);
             }
-            const mappedEvent = this.mapDragEvent(event);
-            this.dragMove.emit(mappedEvent);
+            this.dragMove.emit(this.mapDragEvent(event));
         })
             .on('draginertiastart', (event) => {
             this.dragInertiaStart.emit(this.mapDragEvent(event));
@@ -699,12 +647,10 @@ class DraggableDirective {
             }
             this.renderer.setStyle(this.el.nativeElement, 'display', '');
             this.dragEnd.emit(mappedEvent);
-            // unsubscribe from scroll events if subscribed
             if (this.auto_scroll_dir) {
                 this.scrollEventsSubscription.unsubscribe();
             }
             if (this.el.nativeElement !== this.previewRef) {
-                // we do this in a timeout, so that we don't remove before the dropzone can get the boundingElementRect
                 setTimeout(() => {
                     this.dragRootEl.removeChild(this.previewRef);
                 });
@@ -713,86 +659,41 @@ class DraggableDirective {
     }
     subscribeToScrollEvents() {
         this.scrollEventsSubscription = this.auto_scroll_dir.scrollDeltaObserver.subscribe(({ scrollLeft, scrollTop }) => {
-            const deltaX = this.scale ? scrollLeft / this.scale : scrollLeft;
-            const deltaY = this.scale ? scrollTop / this.scale : scrollTop;
+            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: "21.1.6", ngImport: i0, type: DraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: DraggableDirective, isStandalone: false, 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: DraggableDirective, isStandalone: true, selector: "[tftDraggable]", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: false, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: false, transformFunction: null }, dragZIndex: { classPropertyName: "dragZIndex", publicName: "dragZIndex", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, dragData: { classPropertyName: "dragData", publicName: "dragData", isSignal: true, isRequired: false, transformFunction: null }, enableDragDefault: { classPropertyName: "enableDragDefault", publicName: "enableDragDefault", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dragDisabled: { classPropertyName: "dragDisabled", publicName: "dragDisabled", isSignal: true, isRequired: false, transformFunction: null }, dragConfig: { classPropertyName: "dragConfig", publicName: "dragConfig", isSignal: true, isRequired: false, transformFunction: null }, showPlaceholder: { classPropertyName: "showPlaceholder", publicName: "showPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, dragRoot: { classPropertyName: "dragRoot", publicName: "dragRoot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragInertiaStart: "dragInertiaStart", dragEnd: "dragEnd" }, host: { properties: { "style.user-select": "dragDisabled() ? \"auto\" : \"none\"", "style.touch-action": "dragDisabled() ? \"auto\" : \"none\"", "style.position": "\"absolute\"", "id": "interactableId" } }, queries: [{ propertyName: "_previewTemplate", first: true, predicate: DragPreviewDirective, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DraggableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftDraggable]',
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    standalone: true,
                     host: {
-                        '[style.touchAction]': 'this.dragDisabled ? "auto" : "none"',
+                        '[style.user-select]': 'dragDisabled() ? "auto" : "none"',
+                        '[style.touch-action]': 'dragDisabled() ? "auto" : "none"',
                         '[style.position]': '"absolute"',
                         '[id]': 'interactableId',
                     },
-                    standalone: false
                 }]
-        }], 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: [{
+        }], ctorParameters: () => [], propDecorators: { x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], dragZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragZIndex", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], dragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragData", required: false }] }], enableDragDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDragDefault", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDisabled", required: false }] }], dragConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragConfig", required: false }] }], showPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlaceholder", required: false }] }], dragRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRoot", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragInertiaStart: [{ type: i0.Output, args: ["dragInertiaStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], _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 {
-    get scale() {
-        return this.account_for_scale_dir?.scale || this.drag_root_dir?.account_for_scale_dir?.scale;
-    }
     constructor() {
         this.el = inject(ElementRef);
         this._document = inject(DOCUMENT);
@@ -803,77 +704,69 @@ class ResizableDirective {
         this.draggable_dir = inject(DraggableDirective, { optional: true });
         this.dropzone_dir = inject(DropzoneDirective, { optional: true, skipSelf: true });
         this.auto_scroll_dir = inject(AutoScrollDirective, { optional: true, skipSelf: true });
-        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.enableResizeDefault = input(true, ...(ngDevMode ? [{ debugName: "enableResizeDefault" }] : []));
+        this.position = input('absolute', ...(ngDevMode ? [{ debugName: "position" }] : []));
+        this.resizeConfig = input(...(ngDevMode ? [undefined, { debugName: "resizeConfig" }] : []));
+        this.interactableId = input(...(ngDevMode ? [undefined, { debugName: "interactableId" }] : []));
+        this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+        this.height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
+        this.resizeDisabled = input(false, ...(ngDevMode ? [{ debugName: "resizeDisabled" }] : []));
+        this.resizeStart = output();
+        this.resizeMove = output();
+        this.resizeInertiaStart = output();
+        this.resizeEnd = output();
         this.defaultConfig = {
-            edges: { left: true, right: true, bottom: true, top: true }
+            edges: { left: true, right: true, bottom: true, top: true },
         };
         this.activeEdges = { left: false, right: false, top: false, bottom: false };
-        const drag_root_dir = this.drag_root_dir;
-        this.dragRootEl = drag_root_dir?.el?.nativeElement || this._document.body;
+        this.scale = computed(() => this.account_for_scale_dir?.scale() || this.drag_root_dir?.account_for_scale_dir?.scale(), ...(ngDevMode ? [{ debugName: "scale" }] : []));
+        this.dragRootEl = this.drag_root_dir?.el?.nativeElement || this._document.body;
+        effect(() => {
+            this.resizeConfig();
+            this.resizeDisabled();
+            if (!this.interactable)
+                return;
+            this.interactable.resizable({ ...this.resizeConfig(), enabled: !this.resizeDisabled() });
+        });
+        effect(() => {
+            this.alignDimensionsWithInputs(this.width(), this.height());
+        });
     }
     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.registryId = this.dropzone_dir?._registeredId() || 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)
+            .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);
+        this.interactService.destroyInteractable(this._interactableId, this.registryId);
     }
     resizeListener(event) {
         const element = this.el.nativeElement;
-        const scale = this.scale;
+        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);
+        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,
+            enabled: !this.resizeDisabled(),
             ...(this.auto_scroll_dir && {
                 autoScroll: {
-                    ...this.auto_scroll_dir.autoScrollConfig,
-                    container: this.auto_scroll_dir.el.nativeElement
-                }
-            })
+                    ...this.auto_scroll_dir.autoScrollConfig(),
+                    container: this.auto_scroll_dir.el.nativeElement,
+                },
+            }),
         };
         const interactable = this.draggable_dir?.interactable || interact(nativeElement);
         return interactable.resizable(defaultResizeConfig)
@@ -885,11 +778,10 @@ class ResizableDirective {
             this.resizeStart.emit(this.mapResizeEvent(event));
         })
             .on('resizemove', (event) => {
-            if (this.enableResizeDefault) {
+            if (this.enableResizeDefault()) {
                 this.resizeListener(event);
             }
-            const mappedEvent = this.mapResizeEvent(event);
-            this.resizeMove.emit(mappedEvent);
+            this.resizeMove.emit(this.mapResizeEvent(event));
         })
             .on('resizeinertiastart', (event) => this.resizeInertiaStart.emit(this.mapResizeEvent(event)))
             .on('resizeend', (event) => {
@@ -903,7 +795,7 @@ class ResizableDirective {
     mapResizeEvent(event) {
         const target = this.el.nativeElement;
         const relatedTarget = this.draggable_dir?.dropzone_dir?.el.nativeElement;
-        const scale = this.scale;
+        const scale = this.scale();
         const positionInDropTarget = target && relatedTarget
             ? this.interactService.calculatePositionInElement(relatedTarget, target, scale)
             : null;
@@ -916,19 +808,19 @@ class ResizableDirective {
             positionInDropTarget,
             size: {
                 width: target.clientWidth / scale,
-                height: target.clientHeight / scale
-            }
+                height: target.clientHeight / scale,
+            },
         };
     }
     alignDimensionsWithInputs(width, height) {
-        this.interactService.updateSize(this.interactableId, this.registryId, { deltaX: 0, deltaY: 0, width, height }, this.el.nativeElement);
+        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 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);
@@ -937,52 +829,28 @@ class ResizableDirective {
             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);
+            this.interactService.updateSize(this._interactableId, this.registryId, { deltaX, deltaY, width, height }, this.el.nativeElement);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: ResizableDirective, isStandalone: false, 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: ResizableDirective, isStandalone: true, selector: "[tftResizable]", inputs: { enableResizeDefault: { classPropertyName: "enableResizeDefault", publicName: "enableResizeDefault", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, resizeConfig: { classPropertyName: "resizeConfig", publicName: "resizeConfig", isSignal: true, isRequired: false, transformFunction: null }, interactableId: { classPropertyName: "interactableId", publicName: "interactableId", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, resizeDisabled: { classPropertyName: "resizeDisabled", publicName: "resizeDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeStart: "resizeStart", resizeMove: "resizeMove", resizeInertiaStart: "resizeInertiaStart", resizeEnd: "resizeEnd" }, host: { properties: { "style.touch-action": "resizeDisabled() ? \"auto\" : \"none\"", "style.position": "position()", "style.box-sizing": "\"border-box\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ResizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftResizable]',
+                    standalone: true,
                     // 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"',
+                        // prevents touch events from colliding with mouse events on touch screen
+                        '[style.touch-action]': 'resizeDisabled() ? "auto" : "none"',
                         // default to absolute here to accommodate likely use cases
-                        // consuming component can easily over ride with position input
-                        '[style.position]': 'position',
+                        '[style.position]': 'position()',
                         // follows interactjs suggested practices
-                        '[style.boxSizing]': '"border-box"',
+                        '[style.box-sizing]': '"border-box"',
                     },
-                    standalone: false
                 }]
-        }], ctorParameters: () => [], 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
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { enableResizeDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableResizeDefault", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], resizeConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeConfig", required: false }] }], interactableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactableId", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], resizeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeDisabled", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeMove: [{ type: i0.Output, args: ["resizeMove"] }], resizeInertiaStart: [{ type: i0.Output, args: ["resizeInertiaStart"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }] } });
 
 /** @dynamic */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -990,35 +858,32 @@ class GesturableDirective {
     constructor() {
         this.el = inject(ElementRef);
         this.draggable_dir = inject(DraggableDirective, { optional: true });
-        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) {
+        this.gesturableId = input(...(ngDevMode ? [undefined, { debugName: "gesturableId" }] : []));
+        this.gestureDisabled = input(false, ...(ngDevMode ? [{ debugName: "gestureDisabled" }] : []));
+        this.gestureConfig = input(...(ngDevMode ? [undefined, { debugName: "gestureConfig" }] : []));
+        this.gestureStart = output();
+        this.gestureMove = output();
+        this.gestureEnd = output();
+        effect(() => {
+            this.gestureConfig();
+            this.gestureDisabled();
             if (!this.interactable)
                 return;
             this.setGestureConfig();
-        }
+        });
+    }
+    ngOnInit() {
+        this.interactable = this.initiateGestureEvents(this.gestureConfig(), this.el.nativeElement);
+        this.setGestureConfig();
     }
     setGestureConfig() {
-        const enabled = !this.gestureDisabled;
-        const gestureConfig = { ...this.gestureConfig, enabled };
+        const enabled = !this.gestureDisabled();
+        const gestureConfig = { ...this.gestureConfig(), enabled };
         this.interactable.gesturable(gestureConfig);
     }
     initiateGestureEvents(gestureConfig, nativeElement) {
         const defaultConfig = {
-            enabled: !this.gestureDisabled,
+            enabled: !this.gestureDisabled(),
         };
         const interactable = this.draggable_dir?.interactable || interact(nativeElement);
         return interactable.gesturable({ ...defaultConfig, ...gestureConfig })
@@ -1033,59 +898,38 @@ class GesturableDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: GesturableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: GesturableDirective, isStandalone: false, selector: "[tftGesturable]", inputs: { gesturableId: "gesturableId", gestureDisabled: "gestureDisabled", gestureConfig: "gestureConfig" }, outputs: { gestureStart: "gestureStart", gestureMove: "gestureMove", gestureEnd: "gestureEnd" }, host: { properties: { "id": "gesturableId" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: GesturableDirective, isStandalone: true, selector: "[tftGesturable]", inputs: { gesturableId: { classPropertyName: "gesturableId", publicName: "gesturableId", isSignal: true, isRequired: false, transformFunction: null }, gestureDisabled: { classPropertyName: "gestureDisabled", publicName: "gestureDisabled", isSignal: true, isRequired: false, transformFunction: null }, gestureConfig: { classPropertyName: "gestureConfig", publicName: "gestureConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { gestureStart: "gestureStart", gestureMove: "gestureMove", gestureEnd: "gestureEnd" }, host: { properties: { "id": "gesturableId()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: GesturableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftGesturable]',
-                    // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+                    standalone: true,
                     host: {
-                        // '[style.touchAction]': 'this.gestureDisabled ? "auto" : "none"',
-                        '[id]': 'gesturableId',
+                        // '[style.touch-action]': 'gestureDisabled() ? "auto" : "none"',
+                        '[id]': 'gesturableId()',
                     },
-                    standalone: false
                 }]
-        }], propDecorators: { gesturableId: [{
-                type: Input
-            }], gestureDisabled: [{
-                type: Input
-            }], gestureConfig: [{
-                type: Input
-            }], gestureStart: [{
-                type: Output
-            }], gestureMove: [{
-                type: Output
-            }], gestureEnd: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { gesturableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "gesturableId", required: false }] }], gestureDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "gestureDisabled", required: false }] }], gestureConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "gestureConfig", required: false }] }], gestureStart: [{ type: i0.Output, args: ["gestureStart"] }], gestureMove: [{ type: i0.Output, args: ["gestureMove"] }], gestureEnd: [{ type: i0.Output, args: ["gestureEnd"] }] } });
 
 class ApplyScaleDirective {
     constructor() {
         this.el = inject(ElementRef);
-        this._scale = 1;
+        this.scale = input(1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
     }
-    // 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`;
-    }
-    ;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ApplyScaleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: ApplyScaleDirective, isStandalone: false, selector: "[tftApplyScale]", inputs: { scale: "scale" }, host: { properties: { "style.fontSize": "this.fontSize" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: ApplyScaleDirective, isStandalone: true, selector: "[tftApplyScale]", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.font-size": "scale() + \"px\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ApplyScaleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftApplyScale]',
-                    standalone: false
+                    standalone: true,
+                    host: {
+                        '[style.font-size]': 'scale() + "px"',
+                    },
                 }]
-        }], propDecorators: { scale: [{
-                type: Input
-            }], fontSize: [{
-                type: HostBinding,
-                args: ['style.fontSize']
-            }] } });
+        }], propDecorators: { scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }] } });
 
 /**
  * Directive that handles lasso (drag-to-select) interaction geometry.
@@ -1108,16 +952,16 @@ class LassoDirective {
     constructor() {
         this.host = inject((ElementRef));
         /** Scale factor applied to the host element — used to convert viewport px to container-local px. */
-        this.scale = 1;
+        this.scale = input(1, ...(ngDevMode ? [{ debugName: "scale" }] : []));
         /** When true, lasso interaction is disabled. */
-        this.lassoDisabled = false;
-        /** Emitted on mousedown (before any drag). Use to clear previous selection state. */
-        this.lassoStart = new EventEmitter();
+        this.lassoDisabled = input(false, ...(ngDevMode ? [{ debugName: "lassoDisabled" }] : []));
+        /** Emitted on pointerdown (before any drag). Use to clear previous selection state. */
+        this.lassoStart = output();
         /**
-         * Emitted on mouseup when the drag exceeded the 5 px threshold.
+         * Emitted on pointerup when the drag exceeded the 5 px threshold.
          * Rect is in viewport (clientX/Y) space — pass directly to getBoundingClientRect comparisons.
          */
-        this.lassoCommit = new EventEmitter();
+        this.lassoCommit = output();
         // -------------------------------------------------------------------------
         // Internal state
         // -------------------------------------------------------------------------
@@ -1150,15 +994,15 @@ class LassoDirective {
     toLocal(vpX, vpY) {
         const rect = this.host.nativeElement.getBoundingClientRect();
         return {
-            x: (vpX - rect.left) / this.scale,
-            y: (vpY - rect.top) / this.scale,
+            x: (vpX - rect.left) / this.scale(),
+            y: (vpY - rect.top) / this.scale(),
         };
     }
     // -------------------------------------------------------------------------
     // Event handling
     // -------------------------------------------------------------------------
     onPointerDown(e) {
-        if (this.lassoDisabled)
+        if (this.lassoDisabled())
             return;
         if (e.target !== e.currentTarget)
             return; // ignore clicks on children
@@ -1208,27 +1052,19 @@ class LassoDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LassoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: LassoDirective, isStandalone: false, selector: "[tftLasso]", inputs: { scale: "scale", lassoDisabled: "lassoDisabled" }, outputs: { lassoStart: "lassoStart", lassoCommit: "lassoCommit" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "click": "onClick($event)" }, properties: { "style.touch-action": "lassoDisabled ? \"auto\" : \"none\"" } }, exportAs: ["tftLasso"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: LassoDirective, isStandalone: true, selector: "[tftLasso]", inputs: { scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, lassoDisabled: { classPropertyName: "lassoDisabled", publicName: "lassoDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lassoStart: "lassoStart", lassoCommit: "lassoCommit" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)", "click": "onClick($event)" }, properties: { "style.touch-action": "lassoDisabled() ? \"auto\" : \"none\"" } }, exportAs: ["tftLasso"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: LassoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tftLasso]',
                     exportAs: 'tftLasso',
-                    standalone: false,
+                    standalone: true,
                     host: {
-                        '[style.touch-action]': 'lassoDisabled ? "auto" : "none"',
+                        '[style.touch-action]': 'lassoDisabled() ? "auto" : "none"',
                     },
                 }]
-        }], propDecorators: { scale: [{
-                type: Input
-            }], lassoDisabled: [{
-                type: Input
-            }], lassoStart: [{
-                type: Output
-            }], lassoCommit: [{
-                type: Output
-            }], onPointerDown: [{
+        }], propDecorators: { scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], lassoDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lassoDisabled", required: false }] }], lassoStart: [{ type: i0.Output, args: ["lassoStart"] }], lassoCommit: [{ type: i0.Output, args: ["lassoCommit"] }], onPointerDown: [{
                 type: HostListener,
                 args: ['pointerdown', ['$event']]
             }], onPointerMove: [{
@@ -1258,6 +1094,11 @@ const EXPORTS = [
     LassoDirective,
     ArrayOfNPipe,
 ];
+/**
+ * @deprecated All directives are now standalone. Import them directly instead of using InteractModule.
+ * InteractModule will be removed in the next major version.
+ * `InteractModule.forRoot()` is still supported for providing InteractService configuration.
+ */
 class InteractModule {
     static forRoot(config) {
         const defaultConfig = { cssDimensionUnit: 'px' };
@@ -1265,12 +1106,12 @@ class InteractModule {
             ngModule: InteractModule,
             providers: [
                 { provide: INTERACT_ROOT_CONFIG, useValue: { ...defaultConfig, ...config } },
-                InteractService
-            ]
+                InteractService,
+            ],
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InteractModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: InteractModule, declarations: [DraggableDirective,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: InteractModule, imports: [DraggableDirective,
             ResizableDirective,
             DropzoneDirective,
             GesturableDirective,
@@ -1280,7 +1121,7 @@ class InteractModule {
             ApplyScaleDirective,
             DragPreviewDirective,
             LassoDirective,
-            ArrayOfNPipe], imports: [CommonModule], exports: [DraggableDirective,
+            ArrayOfNPipe], exports: [DraggableDirective,
             ResizableDirective,
             DropzoneDirective,
             GesturableDirective,
@@ -1291,19 +1132,13 @@ class InteractModule {
             DragPreviewDirective,
             LassoDirective,
             ArrayOfNPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InteractModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InteractModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InteractModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    // providers: [{ provide: INTERACT_ROOT_CONFIG, useValue: 'px' }],
-                    declarations: [
-                        ...EXPORTS,
-                    ],
-                    exports: [
-                        ...EXPORTS
-                    ]
+                    imports: [...EXPORTS],
+                    exports: [...EXPORTS],
                 }]
         }] });