ngx-virtual-dnd 3.1.1 → 3.1.2

package/fesm2022/ngx-virtual-dnd.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, isDevMode, input, ChangeDetectionStrategy, Component, ElementRef, Injector, afterNextRender, viewChild, Directive, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { signal, InjectionToken, computed, effect, Injectable, inject, NgZone, isDevMode, input, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, afterNextRender, viewChild, Directive, output, contentChild, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
 /**
@@ -709,6 +709,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Query by an exact attribute value without interpolating consumer data into a CSS selector.
+ *
+ * CSS attribute selectors need string-specific escaping that differs from `CSS.escape()`.
+ * Filtering candidates by attribute presence avoids selector syntax errors for IDs containing
+ * quotes, brackets, backslashes, or other selector-sensitive characters.
+ */
+function queryByAttribute(root, attributeName, attributeValue) {
+    const candidates = root.querySelectorAll(`[${attributeName}]`);
+    for (const candidate of candidates) {
+        if (candidate.getAttribute(attributeName) === attributeValue) {
+            return candidate;
+        }
+    }
+    return null;
+}
+function queryAllByAttribute(root, attributeName, attributeValue) {
+    return Array.from(root.querySelectorAll(`[${attributeName}]`)).filter((candidate) => candidate.getAttribute(attributeName) === attributeValue);
+}
+
 /**
  * Service for calculating drop positions and finding elements at cursor positions.
  * This is the core algorithm that makes virtual scroll + drag-and-drop work together.
@@ -837,8 +857,7 @@ class PositionCalculatorService {
         if (typeof document === 'undefined') {
             return null;
         }
-        const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id;
-        return document.querySelector(`[${this.#DROPPABLE_ID_ATTR}="${escaped}"]`);
+        return queryByAttribute(document, this.#DROPPABLE_ID_ATTR, id);
     }
     /**
      * Query all droppable elements belonging to a group, in document order.
@@ -847,8 +866,7 @@ class PositionCalculatorService {
         if (typeof document === 'undefined') {
             return [];
         }
-        const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(groupName) : groupName;
-        return Array.from(document.querySelectorAll(`[${this.#DROPPABLE_GROUP_ATTR}="${escaped}"]`));
+        return queryAllByAttribute(document, this.#DROPPABLE_GROUP_ATTR, groupName);
     }
     /**
      * Geometric hit-test: return the last candidate (in document order) whose rect
@@ -1001,7 +1019,7 @@ class PositionCalculatorService {
      */
     findAdjacentDroppable(currentDroppableId, direction, groupName) {
         // Find all droppables in the same group
-        const allDroppables = document.querySelectorAll(`[${this.#DROPPABLE_GROUP_ATTR}="${groupName}"]`);
+        const allDroppables = queryAllByAttribute(document, this.#DROPPABLE_GROUP_ATTR, groupName);
         if (allDroppables.length <= 1) {
             return null;
         }
@@ -2145,6 +2163,34 @@ function bindResizeObserverHeightSignal(options) {
     };
 }
 
+function createAutoScrollRegistration(options) {
+    const destroyRef = inject(DestroyRef);
+    let registeredId = null;
+    const unregisterCurrent = () => {
+        if (registeredId === null) {
+            return;
+        }
+        options.autoScrollService.unregisterContainer(registeredId);
+        registeredId = null;
+    };
+    effect(() => {
+        const enabled = options.enabled();
+        const id = options.getId();
+        const config = options.config();
+        const canRegister = options.canRegister?.() ?? true;
+        if (!enabled || !canRegister) {
+            unregisterCurrent();
+            return;
+        }
+        if (registeredId !== null && registeredId !== id) {
+            unregisterCurrent();
+        }
+        options.autoScrollService.registerContainer(id, options.getElement(), config);
+        registeredId = id;
+    });
+    destroyRef.onDestroy(unregisterCurrent);
+}
+
 /**
  * A virtual scroll container that only renders visible items.
  *
@@ -2463,6 +2509,13 @@ class VirtualScrollContainerComponent {
     /** Track previous total height to detect if we were at bottom before drag ended */
     #previousTotalHeight = 0;
     constructor() {
+        createAutoScrollRegistration({
+            autoScrollService: this.#autoScrollService,
+            getElement: () => this.#elementRef.nativeElement,
+            getId: () => this.scrollContainerId() ?? this.#generatedScrollId,
+            enabled: () => this.autoScrollEnabled(),
+            config: () => this.autoScrollConfig(),
+        });
         // Keep strategy item keys in sync
         effect(() => {
             const items = this.items();
@@ -2576,11 +2629,6 @@ class VirtualScrollContainerComponent {
         });
     }
     ngOnInit() {
-        // Register with auto-scroll service
-        if (this.autoScrollEnabled()) {
-            const id = this.scrollContainerId() ?? this.#generatedScrollId;
-            this.#autoScrollService.registerContainer(id, this.#elementRef.nativeElement, this.autoScrollConfig());
-        }
         // Set up ResizeObserver for dynamic height measurement
         if (this.dynamicItemHeight()) {
             this.#setupItemResizeObserver();
@@ -2615,9 +2663,6 @@ class VirtualScrollContainerComponent {
         }
         this.#observedElementByKey.clear();
         this.#itemResizeObserver?.disconnect();
-        // Unregister from auto-scroll service
-        const id = this.scrollContainerId() ?? this.#generatedScrollId;
-        this.#autoScrollService.unregisterContainer(id);
     }
     /**
      * Set up ResizeObserver for measuring individual item heights.
@@ -2662,8 +2707,8 @@ class VirtualScrollContainerComponent {
                 if (entry.type !== 'item' || !entry.data)
                     continue;
                 const key = idFn(entry.data);
-                // Find the DOM element for this item by its data-draggable-id
-                const el = wrapper.querySelector(`[data-draggable-id="${key}"]`);
+                // Find the DOM element for this item by its data-draggable-id.
+                const el = queryByAttribute(wrapper, 'data-draggable-id', key);
                 if (el) {
                     nextObservedByKey.set(key, el);
                 }
@@ -3184,17 +3229,6 @@ class DroppableDirective {
     #wasActive = false;
     /** Cached state for handling drop (since state is cleared before effect fires) */
     #cachedDragState = null;
-    ngOnInit() {
-        // Without a group, this droppable can't participate in DnD (fail gracefully).
-        if (!this.effectiveGroup()) {
-            return;
-        }
-        // Register with auto-scroll service only if this element is actually scrollable
-        // (i.e., has overflow: auto/scroll and content taller than container)
-        if (this.autoScrollEnabled() && this.#isScrollable()) {
-            this.#autoScroll.registerContainer(this.vdndDroppable(), this.#elementRef.nativeElement, this.autoScrollConfig());
-        }
-    }
     /**
      * Check if this element is actually scrollable.
      */
@@ -3215,6 +3249,14 @@ class DroppableDirective {
         return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
     }
     constructor() {
+        createAutoScrollRegistration({
+            autoScrollService: this.#autoScroll,
+            getElement: () => this.#elementRef.nativeElement,
+            getId: () => this.vdndDroppable(),
+            enabled: () => this.autoScrollEnabled(),
+            config: () => this.autoScrollConfig(),
+            canRegister: () => Boolean(this.effectiveGroup()) && this.#isScrollable(),
+        });
         // React to state changes and handle drop events
         effect(() => {
             const active = this.isActive();
@@ -3295,7 +3337,7 @@ class DroppableDirective {
      */
     #getItemIndex(draggableId, droppableId) {
         // Find all draggables in the source droppable
-        const droppable = document.querySelector(`[data-droppable-id="${droppableId}"]`);
+        const droppable = queryByAttribute(document, 'data-droppable-id', droppableId);
         if (!droppable) {
             return 0;
         }
@@ -3605,6 +3647,7 @@ class VirtualViewportComponent {
     contentTransform = computed(() => {
         const startIndex = this.#renderStartIndex();
         const s = this.#strategy();
+        s.version();
         const offset = s.getOffsetForIndex(startIndex);
         return `translateY(${offset}px)`;
     }, ...(ngDevMode ? [{ debugName: "contentTransform" }] : []));
@@ -3637,15 +3680,22 @@ class VirtualViewportComponent {
         this.scrollTo({ top: newPosition });
     }
     // ========== Lifecycle ==========
+    constructor() {
+        createAutoScrollRegistration({
+            autoScrollService: this.#autoScrollService,
+            getElement: () => this.nativeElement,
+            getId: () => this.scrollContainerId() ?? this.#generatedScrollId,
+            enabled: () => this.autoScrollEnabled(),
+            config: () => this.autoScrollConfig(),
+        });
+    }
     ngOnInit() {
         this.#setupScrollListener();
         this.#setupResizeObserver();
-        this.#registerAutoScroll();
     }
     ngOnDestroy() {
         this.#scrollCleanup?.();
         this.#resizeCleanup?.();
-        this.#unregisterAutoScroll();
     }
     // ========== Private Methods ==========
     /** Minimum scroll delta (px) to trigger signal update */
@@ -3666,16 +3716,6 @@ class VirtualViewportComponent {
             minDeltaPx: 1,
         });
     }
-    #registerAutoScroll() {
-        if (this.autoScrollEnabled()) {
-            const id = this.scrollContainerId() ?? this.#generatedScrollId;
-            this.#autoScrollService.registerContainer(id, this.nativeElement, this.autoScrollConfig());
-        }
-    }
-    #unregisterAutoScroll() {
-        const id = this.scrollContainerId() ?? this.#generatedScrollId;
-        this.#autoScrollService.unregisterContainer(id);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: VirtualViewportComponent, isStandalone: true, selector: "vdnd-virtual-viewport", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, dynamicItemHeight: { classPropertyName: "dynamicItemHeight", publicName: "dynamicItemHeight", isSignal: true, isRequired: false, transformFunction: null }, contentOffset: { classPropertyName: "contentOffset", publicName: "contentOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollContainerId: { classPropertyName: "scrollContainerId", publicName: "scrollContainerId", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "vdnd-virtual-viewport" }, providers: [
             { provide: VDND_VIRTUAL_VIEWPORT, useExisting: VirtualViewportComponent },
@@ -3722,7 +3762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       <ng-content></ng-content>
     </div>
   `, styles: [":host{display:block;overflow:auto;position:relative;overflow-anchor:none}.vdnd-viewport-spacer{position:absolute;left:0;width:1px;visibility:hidden;pointer-events:none}.vdnd-viewport-content{position:absolute;left:0;right:0;will-change:transform}\n"] }]
-        }], propDecorators: { itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], contentOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentOffset", required: false }] }], scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: true }] }], dynamicItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicItemHeight", required: false }] }], contentOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentOffset", required: false }] }], scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }] } });
 
 /**
  * Marks an element as the header content for a `vdnd-virtual-content` component.
@@ -3875,6 +3915,7 @@ class VirtualContentComponent {
     contentTransform = computed(() => {
         const startIndex = this.#renderStartIndex();
         const s = this.#strategy();
+        s.version();
         const offset = s.getOffsetForIndex(startIndex);
         return `translateY(${offset}px)`;
     }, ...(ngDevMode ? [{ debugName: "contentTransform" }] : []));
@@ -4174,13 +4215,14 @@ class KeyboardDragHandler {
         // (the directive may be destroyed during cross-list moves)
         const destinationDroppableId = this.#deps.dragState.activeDroppableId();
         afterNextRender(() => {
-            const element = document.querySelector(`[data-draggable-id="${draggableId}"]`);
+            const element = queryByAttribute(document, 'data-draggable-id', draggableId);
             if (element) {
                 element.focus();
             }
             else if (destinationDroppableId) {
                 // Fallback: focus the first draggable in the destination container
-                const firstDraggable = document.querySelector(`[data-droppable-id="${destinationDroppableId}"] [data-draggable-id]`);
+                const destination = queryByAttribute(document, 'data-droppable-id', destinationDroppableId);
+                const firstDraggable = destination?.querySelector('[data-draggable-id]');
                 firstDraggable?.focus();
             }
         }, { injector: this.#deps.envInjector });
@@ -5101,6 +5143,15 @@ class ScrollableDirective {
     /** Auto-scroll configuration */
     autoScrollConfig = input({}, ...(ngDevMode ? [{ debugName: "autoScrollConfig" }] : []));
     // ========== VdndScrollContainer Implementation ==========
+    constructor() {
+        createAutoScrollRegistration({
+            autoScrollService: this.#autoScrollService,
+            getElement: () => this.nativeElement,
+            getId: () => this.scrollContainerId() ?? this.#generatedScrollId,
+            enabled: () => this.autoScrollEnabled(),
+            config: () => this.autoScrollConfig(),
+        });
+    }
     get nativeElement() {
         return this.#elementRef.nativeElement;
     }
@@ -5124,12 +5175,10 @@ class ScrollableDirective {
     ngOnInit() {
         this.#setupScrollListener();
         this.#setupResizeObserver();
-        this.#registerAutoScroll();
     }
     ngOnDestroy() {
         this.#scrollCleanup?.();
         this.#resizeCleanup?.();
-        this.#unregisterAutoScroll();
     }
     // ========== Private Methods ==========
     /** Minimum scroll delta (px) to trigger signal update */
@@ -5150,16 +5199,6 @@ class ScrollableDirective {
             minDeltaPx: 1,
         });
     }
-    #registerAutoScroll() {
-        if (this.autoScrollEnabled()) {
-            const id = this.scrollContainerId() ?? this.#generatedScrollId;
-            this.#autoScrollService.registerContainer(id, this.nativeElement, this.autoScrollConfig());
-        }
-    }
-    #unregisterAutoScroll() {
-        const id = this.scrollContainerId() ?? this.#generatedScrollId;
-        this.#autoScrollService.unregisterContainer(id);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ScrollableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ScrollableDirective, isStandalone: true, selector: "[vdndScrollable]", inputs: { scrollContainerId: { classPropertyName: "scrollContainerId", publicName: "scrollContainerId", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.overflow-anchor": "\"none\"" }, classAttribute: "vdnd-scrollable" }, providers: [{ provide: VDND_SCROLL_CONTAINER, useExisting: ScrollableDirective }], ngImport: i0 });
 }
@@ -5173,7 +5212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[style.overflow-anchor]': '"none"',
                     },
                 }]
-        }], propDecorators: { scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], autoScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEnabled", required: false }] }], autoScrollConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollConfig", required: false }] }] } });
 
 /**
  * A structural directive for virtual scrolling within custom scroll containers.