ngx-kit 8.0.0 → 8.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-kit",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "Angular input components",
   "author": "Mohammadreza Samani <mr.samani1368@gmail.com>",
   "license": "MIT",

package/types/ngx-kit-drag-resize.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, EventEmitter, InjectionToken, OnInit, OnDestroy, ElementRef, Renderer2, AfterContentInit, Injector } from '@angular/core';
+import { TemplateRef, ApplicationRef, EventEmitter, InjectionToken, OnInit, OnDestroy, Renderer2, ElementRef, AfterContentInit } from '@angular/core';
 
 interface IPosition {
     x: number;
@@ -12,7 +12,6 @@ interface IPosition {
  * Lists register themselves automatically when `NgxDropListGroup` wraps them.
  */
 declare class DropListGroupRef {
-    el?: HTMLElement;
     readonly lists: Set<DropListRef<any>>;
     add(list: DropListRef<any>): void;
     remove(list: DropListRef<any>): void;
@@ -20,19 +19,38 @@ declare class DropListGroupRef {
 }
 
 declare class PlaceHolderRef {
+    /**
+     * Custom placeholder content, from `*ngxPlaceholder` inside the `ngxDropList`. When unset,
+     * `attach()` falls back to a shallow clone of the dragged element (previous behaviour).
+     *
+     * Example:
+     *
+     *   <div ngxDropList>
+     *     <span class="my-placeholder" *ngxPlaceholder></span>
+     *     ...
+     *   </div>
+     */
     tpl?: TemplateRef<unknown>;
+    /** Set by `NgxPlaceholder` so the embedded view can join Angular's change-detection tree. */
+    appRef?: ApplicationRef;
     dropList?: DropListRef;
     element?: HTMLElement;
     private _visible;
-    /**
-     * Angular embedded view created from `tpl`.
-     */
     private _view?;
+    /** True once `this.element` was built from `tpl` (as opposed to the fallback clone). */
+    private isCustom;
     attach(container: HTMLElement, source: HTMLElement, reference?: Node | null): HTMLElement;
+    /** True while the currently attached element came from a custom `*ngxPlaceholder` template. */
+    get custom(): boolean;
     detach(): void;
     get visible(): boolean;
 }
 
+interface Point {
+    x: number;
+    y: number;
+}
+
 /**
  * A drop list.
  *
@@ -55,6 +73,16 @@ declare class DropListRef<T = any> {
     sortAnimationDuration: number;
     readonly _draggables: Set<DragRef<T>>;
     readonly onDrop: EventEmitter<IDropEvent<T>>;
+    /**
+     * Nesting: the nearest ENCLOSING drop list (null for a top-level list), and this list's own
+     * direct nested lists — i.e. lists whose nearest enclosing list is this one, not a list at any
+     * depth. Set by `NgxDropList` at init from a `skipSelf` DI lookup. Used for two things: (1)
+     * `depth` for "innermost wins" in `DragRef`'s target resolution, without any DOM `.contains()`
+     * calls on the hot path, and (2) cascading `_setAncestorOffset` (below) to every list nested
+     * inside an item that gets displaced by sorting, at any depth.
+     */
+    parentList: DropListRef<any> | null;
+    readonly childLists: Set<DropListRef<any>>;
     private session;
     private placeholder?;
     customPlaceholder?: PlaceHolderRef;
@@ -65,10 +93,50 @@ declare class DropListRef<T = any> {
     /** Pre-insertion geometry of a foreign list, restored when the drag leaves it. */
     private naturalHit;
     private hitCached;
+    /**
+     * Screen-space offset contributed by displaced ANCESTOR item(s) (see `parentList` above).
+     * `{0,0}` outside of that (the overwhelmingly common case). Kept as a SUM of independent
+     * per-source contributions, not a single overwritten value: while the pointer hovers a
+     * FOREIGN (non-origin) list nested inside the origin's own displaced item, up to two ancestor
+     * sessions can be displacing this list at once — the origin's (frozen, still active further
+     * up) and that foreign list's own — and one clearing its contribution on release must not
+     * wipe out the other's, still-active, contribution.
+     */
+    private readonly ancestorContributions;
+    private ancestorOffset;
+    /** Entries this list itself pushed via a one-time placeholder-insertion reflow (see below). */
+    private readonly reflowContributions;
+    /** How many enclosing drop lists this one is nested inside. Root lists are depth 0. */
+    get depth(): number;
+    _registerChild(child: DropListRef<any>): void;
+    _unregisterChild(child: DropListRef<any>): void;
+    /**
+     * One ancestor SESSION's contribution to this list's total displacement just changed (or
+     * cleared, `{0,0}`). `source` identifies WHICH session — the list whose own item is doing the
+     * displacing — so that this list's own recomputed total is a SUM across every currently-active
+     * source, and cascades the SAME (source, offset) pair on to every nested list at any depth
+     * unchanged, so a list several levels down stays hit-testable at its true on-screen position
+     * regardless of which ancestor(s) are currently sorting.
+     */
+    _setAncestorOffset(source: DropListRef<any>, offset: Point): void;
+    /** Which of this list's DIRECT nested lists live inside `el`, notified of its new offset. */
+    private propagateOffset;
+    /** Rects, right now, of every `other` entry that contains one of this list's nested lists. */
+    private trackedEntryRects;
+    /** Turns the real reflow a fresh placeholder insertion just caused into ordinary offsets. */
+    private propagateReflow;
     addItem(item: DragRef<T>): void;
     removeItem(item: DragRef<T>): void;
     isConnectedTo(other: DropListRef<any>): boolean;
-    /** Measure the list and its clipping ancestors once, at drag start. */
+    /**
+     * Measure the list and its clipping ancestors once, at drag start (or the moment a nested
+     * list becomes a candidate mid-drag). `measureHit` reads live `getBoundingClientRect()`s,
+     * which already include any `translate3d` an ancestor item's displacement has applied — so if
+     * this list is currently offset (nested inside a sibling that sorting is displacing right
+     * now), the measurement is normalized back to the zero-offset frame `_containsPoint` expects,
+     * by subtracting that offset straight back out. Without this, entering a nested list while
+     * its ancestor is mid-displacement would double-count the offset on every check afterwards.
+     */
     _cacheGeometry(): void;
     /**
      * Is the point over the *visible* part of this list? Scroll-aware without re-measuring.
@@ -89,7 +157,20 @@ declare class DropListRef<T = any> {
     /** Re-evaluate the insertion index for the pointer. Returns the new index, or null if unchanged. */
     sortItem(drag: DragRef<T>, position: IPosition): number | null;
     /** The pointer left this list. */
+    /**
+     * The pointer truly left this list (as opposed to moving deeper into one of its own nested
+     * lists — see `DragRef`'s chain tracking, which never calls `exit()` for a list that remains
+     * an ancestor of the new target, so this always means "left this list's territory").
+     */
     exit(drag: DragRef<T>): void;
+    /**
+     * The pointer dove into one of this list's own nested lists: this list is no longer the
+     * innermost target, but it isn't being left either — its placeholder and sibling displacement
+     * stay exactly as they are (avoids a snap-back-then-forward flicker), only the "currently
+     * hovered" bookkeeping (and its visual highlight) is cleared. `DragRef`'s chain tracking calls
+     * this instead of `exit()` for every list that remains an ancestor of the new target.
+     */
+    _freeze(): void;
     /**
      * Ends the drag for this list. Returns the drop event when the pointer was released over this
      * list, `null` otherwise (nothing to emit). All transient state is disposed either way.
@@ -119,10 +200,31 @@ declare class DragDropService {
     readonly drags: _angular_core.WritableSignal<readonly DragRef<unknown>[]>;
     readonly dropLists: _angular_core.WritableSignal<readonly DropListRef<any>[]>;
     readonly activeDrag: _angular_core.WritableSignal<DragRef<unknown> | null>;
+    /**
+     * DOM-position registries, used to find the nearest enclosing list/group by walking real
+     * ancestor elements instead of Angular's element-injector tree.
+     *
+     * This matters for `ngTemplateOutlet`-based recursive trees (a list of items whose own
+     * children are rendered by re-invoking the SAME `<ng-template>`, as in a tree/outliner UI):
+     * each invocation gets a FRESH embedded view whose injector context is wherever the outlet
+     * was written in the template, not wherever its content ends up in the DOM. So `inject(TOKEN,
+     * {skipSelf})` from one recursion level can never see a provider from another level — the
+     * only fix within Angular's own DI is to manually thread `ngTemplateOutletInjector` through
+     * every recursive call, which isn't reasonable to require of every consumer of this library.
+     * A plain DOM walk has no such limitation: it only cares where elements actually ended up.
+     */
+    private readonly listsByEl;
+    private readonly groupsByEl;
     registerDragItem(ref: DragRef<any>): void;
     removeDragItem(ref: DragRef<any>): void;
     registerDropList(ref: DropListRef): void;
     removeDropList(ref: DropListRef<any>): void;
+    registerGroup(el: HTMLElement, ref: DropListGroupRef): void;
+    removeGroup(el: HTMLElement): void;
+    /** Nearest registered drop list starting at (and including) `start`, walking up the DOM. */
+    findAncestorDropList(start: HTMLElement | null): DropListRef | null;
+    /** Nearest registered drop-list group starting at (and including) `start`, walking up the DOM. */
+    findAncestorGroup(start: HTMLElement | null): DropListGroupRef | null;
     begin(ref: DragRef<any>): void;
     end(ref: DragRef<any>): void;
     cancelActive(): void;
@@ -184,6 +286,14 @@ declare class DragRef<T = unknown> {
     /** True while a drop-list drag (body preview + placeholder) is in progress. Free drag: always false. */
     private listDrag;
     private cachedLists;
+    /**
+     * Candidate lists for hit-testing, filtered (connected to the origin; not inside the dragged
+     * element) and sorted deepest-first — both computed ONCE, not on every pointer move, since
+     * neither ever changes mid-drag. Kept in sync with the live registry (see `dropListsSnapshot`)
+     * so a list that appears or disappears mid-drag (e.g. behind an `@if`) is still picked up.
+     */
+    private dropCandidates;
+    private dropListsSnapshot;
     private lastEffective;
     private scrollListener?;
     private resizeListener?;
@@ -215,8 +325,35 @@ declare class DragRef<T = unknown> {
     notifyScroll(dx: number, dy: number): void;
     private applyTransform;
     private beginListDrag;
-    /** Decide which list is under the pointer, switch if needed, then re-sort in the active one. */
+    /**
+     * Recomputes which registered lists are valid targets for this drag — connected to the
+     * origin, and not nested inside the element being dragged — plus each one's nesting depth.
+     *
+     * `DragDropService.dropLists()` is an Angular signal: its array is a NEW reference only when a
+     * list actually registers or unregisters, so the check below is a single reference comparison
+     * on every pointer move and the (heavier) connectivity/containment/depth work below it only
+     * runs on the rare event a list appears or disappears mid-drag — never on every pointer move.
+     */
+    private refreshDropCandidates;
+    /**
+     * Decide which list is under the pointer, switch if needed, then re-sort in the active one.
+     *
+     * The origin list is the one exception to "exiting a list resets/releases it": while the
+     * pointer dives into one of the origin's OWN nested lists (at any depth), the origin's
+     * placeholder and sibling displacement are left exactly as they are — frozen, not reset —
+     * so returning to the origin's own level doesn't snap items back and then forward again.
+     * Every OTHER (foreign) list still fully releases the moment the pointer leaves it, exactly
+     * as before; nesting multiple foreign sessions alive at once would let their own internal
+     * sibling displacement compound in ways a single flat `ancestorOffset` cannot represent.
+     */
     private updateDropTarget;
+    /**
+     * Innermost connected list under the pointer, from the precomputed candidates: deeper always
+     * beats shallower; among lists at the same depth (unrelated, visually overlapping lists) the
+     * currently active one is kept to avoid flicker, otherwise the smaller one wins. No DOM
+     * reads and no `.contains()` calls happen here — everything needed was precomputed above.
+     */
+    private resolveDropList;
     /**
      * Single teardown path for every way a drop-list drag can end (drop on a list, drop outside,
      * Escape, pointercancel, destroy). Everything transient is removed here, so nothing can leak
@@ -256,7 +393,6 @@ interface IResizableOutput {
 declare const NGX_DRAGGABLE: InjectionToken<NgxDraggable<unknown>>;
 declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
     private readonly host;
-    private readonly renderer;
     readonly disabled: _angular_core.ModelSignal<boolean>;
     /** Element whose rect constrains the drag. Now actually enforced. */
     readonly boundary: _angular_core.InputSignal<HTMLElement | undefined>;
@@ -279,8 +415,6 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
     readonly dragging: _angular_core.WritableSignal<boolean>;
     private readonly doc;
     private readonly service;
-    private readonly list;
-    private readonly group;
     private readonly scroller;
     private down;
     private start;
@@ -298,7 +432,8 @@ declare class NgxDraggable<T = unknown> implements OnInit, OnDestroy {
     private lastWindowScroll;
     private removeContainerScroll?;
     private removeWindowScroll?;
-    constructor(host: ElementRef<HTMLElement>, renderer: Renderer2);
+    protected readonly renderer: Renderer2;
+    constructor(host: ElementRef<HTMLElement>);
     ngOnInit(): void;
     ngOnDestroy(): void;
     private pointerDown;
@@ -377,7 +512,6 @@ declare class NgxDropList<T = any> implements OnInit, OnDestroy, AfterContentIni
     private readonly customPlaceholder?;
     private sub?;
     private readonly service;
-    private readonly group;
     constructor(el: ElementRef<HTMLElement>);
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -388,14 +522,14 @@ declare class NgxDropList<T = any> implements OnInit, OnDestroy, AfterContentIni
 
 declare const NGX_DROPLIST_GROUP: InjectionToken<NgxDropListGroup>;
 /** Wrap several `ngxDropList`s to let items move freely between them. */
-declare class NgxDropListGroup implements OnDestroy {
+declare class NgxDropListGroup implements OnInit, OnDestroy {
     readonly _ref: DropListGroupRef;
-    protected readonly el: ElementRef<any>;
-    injector: Injector;
-    constructor();
+    private readonly el;
+    private readonly service;
+    ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDropListGroup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDropListGroup, "[NgxDropListGroup],[ngxDropListGroup]", ["ngxDropListGroup"], {}, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDropListGroup, "[NgxDropListGroup],[ngxDropListGroup]", never, {}, {}, never, never, true, never>;
 }
 
 declare const NGX_PLACEHOLDER: InjectionToken<PlaceHolderRef>;