@limble/limble-tree 0.13.0 → 1.0.0-alpha.2

package/fesm2020/limble-limble-tree.mjs

@@ -1,2162 +1,1426 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, Input, ViewContainerRef, ViewChild, ElementRef, EventEmitter, Directive, Output, NgZone, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent, merge, EMPTY } from 'rxjs';
-import { tap, filter, debounce, throttleTime, skip, first, skipUntil, debounceTime } from 'rxjs/operators';
-import * as i2 from '@angular/common';
+import { Injectable, NgModule, EventEmitter, Directive, Input, Output, Component, NgZone, ViewContainerRef, ViewChild, ViewChildren, createComponent, EnvironmentInjector, HostListener } from '@angular/core';
+import { BehaviorSubject, Subject, fromEvent, merge, map, filter, first } from 'rxjs';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { throttleTime } from 'rxjs/operators';
 
-function arraysAreEqual(array1, array2) {
-    if (array1.length !== array2.length) {
-        return false;
-    }
-    for (const [index, value1] of array1.entries()) {
-        const value2 = array2[index];
-        if (value1 instanceof Array && value2 instanceof Array) {
-            if (!arraysAreEqual(value1, value2)) {
-                return false;
-            }
-        }
-        else if (value1 !== value2) {
-            return false;
-        }
-    }
-    return true;
-}
-function isElementDescendant(potentialAncestor, potentialDescendant) {
-    if (potentialAncestor === potentialDescendant) {
-        return true;
-    }
-    let cursor = potentialDescendant.parentNode;
-    while (cursor !== document) {
-        if (cursor === null) {
-            //Did not reach `document` or ancestor. potentialDescendant is not part of the DOM.
-            return undefined;
-        }
-        if (cursor === potentialAncestor) {
-            return true;
-        }
-        cursor = cursor.parentNode;
-    }
-    return false;
-}
-function isNestingAllowed(options, nodeData) {
-    return (options !== undefined &&
-        (options.allowNesting === true ||
-            (typeof options.allowNesting === "function" &&
-                nodeData !== undefined &&
-                options.allowNesting(nodeData) === true)));
-}
-function isDraggingAllowed(options, nodeData) {
-    return (options !== undefined &&
-        (options.allowDragging === true ||
-            (typeof options.allowDragging === "function" &&
-                nodeData !== undefined &&
-                options.allowDragging(nodeData) === true)));
-}
-function isFirefox() {
-    return navigator.userAgent.includes("Firefox");
-}
-/** Because drop zones can disappear when the mouse moves, sometimes
- * moving the mouse just a little bit inside the tree causes the tree to
- * shrink such that the mouse is no longer over the tree. In this case,
- * a dragleave event may not fire, and we can't clear the drop zones. This
- * function is used to catch this edge case.
- */
-function suddenTreeExit(event) {
-    if (event.target === null || !(event.target instanceof Element)) {
-        throw new Error("failed to get event target element");
-    }
-    const treeEventHost = event.target.closest(".tree-event-host");
-    if (treeEventHost === null) {
-        console.log(event.target);
-        throw new Error("failed to find treeEventHost");
-    }
-    const rect = treeEventHost.getBoundingClientRect();
-    const clientY = event.clientY;
-    if (clientY > rect.bottom || clientY < rect.top) {
-        return true;
-    }
-    return false;
+class TreeCollapser {
+    constructor() {
+        this.tempStorage = new Map();
+    }
+    collapse(treeBranch) {
+        if (treeBranch.branches().length === 0)
+            return;
+        const branches = [];
+        this.tempStorage.set(treeBranch, branches);
+        treeBranch.branches().forEach((branch) => {
+            branch.prune();
+            branches.push(branch);
+        });
+    }
+    expand(treeBranch) {
+        const branches = this.tempStorage.get(treeBranch);
+        if (branches === undefined)
+            return;
+        branches.forEach((branch) => {
+            branch.graftTo(treeBranch);
+        });
+        this.tempStorage.delete(treeBranch);
+        treeBranch.detectChanges();
+    }
+    isCollapsed(treeBranch) {
+        return this.tempStorage.has(treeBranch);
+    }
+    storePrecollapsedNode(parent, branch) {
+        this.tempStorage.set(parent, (this.tempStorage.get(parent) ?? []).concat(branch));
+    }
 }
+const treeCollapser = new TreeCollapser();
 
-class DropZoneLocation {
-    constructor(parentCoordinates, insertIndex) {
-        this.parentCoordinates = parentCoordinates;
-        this.insertIndex = insertIndex;
-    }
-    getFullInsertCoordinates() {
-        return [...this.parentCoordinates, this.insertIndex];
-    }
-    setParentCoordinates(coordinates) {
-        this.parentCoordinates = coordinates;
-    }
-    setInsertIndex(index) {
-        this.insertIndex = index;
-    }
+class TreeCollapseService {
+    collapse(treeBranch) {
+        treeCollapser.collapse(treeBranch);
+    }
+    expand(treeBranch) {
+        treeCollapser.expand(treeBranch);
+    }
+    isCollapsed(treeBranch) {
+        return treeCollapser.isCollapsed(treeBranch);
+    }
 }
+TreeCollapseService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeCollapseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TreeCollapseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeCollapseService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeCollapseService, decorators: [{
+            type: Injectable
+        }] });
 
-class DropZone {
-    constructor(parentCoordinates, insertIndex) {
-        this.location = new DropZoneLocation(parentCoordinates, insertIndex);
-        this.rendered = false;
-        this.visible = false;
-        this.active = false;
-        this.commChannel = new Subject();
-    }
-    static dropZoneLocationsAreEqual(valueA, valueB) {
-        return arraysAreEqual(valueA.getFullInsertCoordinates(), valueB.getFullInsertCoordinates());
-    }
-    isRendered(set = undefined) {
-        if (set !== undefined) {
-            this.rendered = set;
-            if (this.commChannel !== undefined) {
-                this.commChannel.next("checkRendered");
-            }
-            if (this.rendered === false) {
-                this.isVisible(false);
-            }
-        }
-        return this.rendered;
-    }
-    isVisible(set = undefined) {
-        if (set !== undefined) {
-            this.visible = set;
-            if (this.commChannel !== undefined) {
-                this.commChannel.next("checkVisible");
-            }
-            if (this.visible === false) {
-                this.isActive(false);
-            }
-        }
-        return this.visible;
-    }
-    isActive(set = undefined) {
-        if (set !== undefined) {
-            this.active = set;
-            if (this.commChannel !== undefined) {
-                this.commChannel.next("checkActive");
-            }
-        }
-        return this.active;
-    }
-    getLocation() {
-        return this.location;
-    }
-    getFamily() {
-        return this.family;
-    }
-    setFamily(family) {
-        this.family = family;
-    }
-    getCommChannel() {
-        return this.commChannel;
-    }
-    getFullInsertCoordinates() {
-        return this.location.getFullInsertCoordinates();
-    }
-    setHost(host) {
-        this.host = host;
-        return this.host;
-    }
-    getHost() {
-        return this.host;
-    }
+class TreeCollapseModule {
 }
+TreeCollapseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TreeCollapseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TreeCollapseModule });
+TreeCollapseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeCollapseModule, providers: [TreeCollapseService] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeCollapseModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [TreeCollapseService]
+                }]
+        }] });
 
-class DragStateService {
-    constructor() {
-        this.state = "idle";
-        this.state$ = new BehaviorSubject(this.state);
-    }
-    /** Called to indicate that something is being dragged. Stores that something for later. */
-    dragging(branch, parentContainer) {
-        this._tempData = {
-            branch: branch,
-            parentContainer: parentContainer
-        };
-        this.state = "dragging";
-        this.state$.next(this.state);
-    }
-    /** Called to indicate that there is a valid active drop zone. Drop is now possible. */
-    droppable() {
-        if (this.state !== "dragging") {
-            throw new Error("Can only call `droppable` when state is `dragging`");
-        }
-        this.state = "droppable";
-        this.state$.next(this.state);
-    }
-    /** Called to indicate that there is no longer a valid active drop zone. Drop is no longer possible. */
-    notDroppable() {
-        if (this.state !== "droppable") {
-            throw new Error("Can only call `notDroppable` when state is `droppable`");
-        }
-        this.state = "dragging";
-        this.state$.next(this.state);
-    }
-    /** Called to indicate that a drop into a valid drop zone has occurred. Returns the item that was dropped.  */
-    capture() {
-        if (this.state !== "droppable") {
-            throw new Error("Can only move to `captured` state from `droppable` state");
-        }
-        this.state = "captured";
-        this.state$.next(this.state);
-        return this._tempData?.branch;
-    }
-    /** Called to reset the service for future drags */
-    release() {
-        this._tempData = undefined;
-        this.state = "idle";
-        this.state$.next(this.state);
-    }
-    /** gets the current thing being dragged, if any. */
-    getData() {
-        return this._tempData;
-    }
-    /** gets the current state */
-    getState() {
-        return this.state;
-    }
-}
-DragStateService.ɵfac = function DragStateService_Factory(t) { return new (t || DragStateService)(); };
-DragStateService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DragStateService, factory: DragStateService.ɵfac });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DragStateService, [{
-        type: Injectable
-    }], function () { return []; }, null); })();
+class Configuration {
+    constructor() {
+        this.configStorage = new Map();
+        this.configStorage = new Map();
+    }
+    setConfig(root, options) {
+        this.configStorage.set(root, options);
+    }
+    getConfig(root) {
+        return this.configStorage.get(root);
+    }
+    delete(root) {
+        this.configStorage.delete(root);
+    }
+}
+const config = new Configuration();
 
-class TreeConstructionStatus {
-    constructor() {
-        this.beingBuilt = 0;
-        this.isReady = false;
-        this.stable$ = new BehaviorSubject(this.treeIsStable());
-    }
-    constructing() {
-        this.beingBuilt++;
-        this.emit();
-    }
-    doneConstructing() {
-        this.beingBuilt--;
-        this.emit();
-    }
-    treeIsStable() {
-        return this.isReady === true && this.beingBuilt === 0;
-    }
-    ready(val) {
-        this.isReady = val;
-    }
-    emit() {
-        this.stable$.next(this.treeIsStable());
-    }
-}
-TreeConstructionStatus.ɵfac = function TreeConstructionStatus_Factory(t) { return new (t || TreeConstructionStatus)(); };
-TreeConstructionStatus.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TreeConstructionStatus, factory: TreeConstructionStatus.ɵfac });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeConstructionStatus, [{
-        type: Injectable
-    }], function () { return []; }, null); })();
+class TreeError extends Error {
+}
 
-function sortFamily(memberA, memberB) {
-    const aCoordinates = memberA.getFullInsertCoordinates();
-    const bCoordinates = memberB.getFullInsertCoordinates();
-    if (aCoordinates.length > bCoordinates.length) {
-        return -1;
-    }
-    if (aCoordinates.length < bCoordinates.length) {
-        return 1;
-    }
-    return 0;
-}
-class DropZoneService {
-    constructor(dragStateService, treeConstructionStatus) {
-        this.dragStateService = dragStateService;
-        this.dropZoneArchive = new Set();
-        this.dropZoneInventory = [];
-        this.dropZoneFamilies = [];
-        this.visibleFamily = null;
-        this.activeDropZone = null;
-        this.tempFamilies = [];
-        this.setActiveDropZone(null);
-        let treeIsStable = false;
-        const treeIsStable$ = treeConstructionStatus.stable$.pipe(tap((value) => {
-            treeIsStable = value;
-        }), filter((value) => value === true));
-        this.update$ = new Subject();
-        this.update$
-            .pipe(debounce(() => {
-            if (treeIsStable === true) {
-                //If tree is stable, continue right away
-                return Promise.resolve();
-            }
-            //If tree is not stable, wait for it to become so.
-            return treeIsStable$;
-        }))
-            .subscribe(() => {
-            setTimeout(() => {
-                this.updateDropZones();
-            });
-        });
-    }
-    addDropZone(newDropZone) {
-        this.dropZoneArchive.add(newDropZone);
-    }
-    /** hides all drop zones */
-    clearVisibleZones() {
-        if (this.visibleFamily !== null) {
-            for (const member of this.visibleFamily.members) {
-                member.isVisible(false);
-            }
-            this.visibleFamily = null;
-        }
-        this.setActiveDropZone(null);
-    }
-    getActiveDropZone() {
-        return this.activeDropZone;
-    }
-    getDropZone(coordinates) {
-        const parent = [...coordinates];
-        parent.pop();
-        const index = coordinates[coordinates.length - 1];
-        const location = new DropZoneLocation(parent, index);
-        return this.dropZoneInventory.find((dropZone) => DropZone.dropZoneLocationsAreEqual(dropZone, location));
-    }
-    init(tree, treeOptions) {
-        this.tree = tree;
-        this.treeOptions = treeOptions;
-        this.update();
-    }
-    removeDropZone(dropZone) {
-        this.dropZoneArchive.delete(dropZone);
-    }
-    /** hides all drop zones, deletes all the family assignments,
-     * and empties the dropZoneInventory
-     */
-    reset() {
-        this.clearVisibleZones();
-        this.dropZoneFamilies.length = 0;
-        this.dropZoneInventory.length = 0;
-    }
-    /**
-     * Restores the service to its initial state: hides all drop zones,
-     * deletes all the family assignments, and empties the dropZoneInventory
-     * and dropZoneArchive.
-     */
-    restart() {
-        this.reset();
-        this.dropZoneArchive.clear();
-    }
-    restoreFamilies() {
-        if (this.tempFamilies.length === 2) {
-            this.dropZoneFamilies.pop();
-            this.dropZoneFamilies.push(this.tempFamilies[0]);
-            for (const member of this.tempFamilies[0].members) {
-                member.setFamily(this.tempFamilies[0]);
-            }
-            if (this.tempFamilies[1] !== null) {
-                this.dropZoneFamilies.push(this.tempFamilies[1]);
-                for (const member of this.tempFamilies[1].members) {
-                    member.setFamily(this.tempFamilies[1]);
-                }
-            }
-            this.tempFamilies = [];
-        }
-    }
-    /**
-     * Shows the drop zone family of the drop zone indicated by `coordinates`.
-     */
-    showDropZoneFamily(
-    /** Note: this drop zone may not exist in the dropZoneInventory; we have to search the inventory based on its location */
-    dropZone, options = { joinFamilies: false, activateLowestInsteadOfFounder: false }) {
-        if (this.activeDropZone !== null &&
-            DropZone.dropZoneLocationsAreEqual(this.activeDropZone, dropZone)) {
-            //Already showing the family with the appropriate active drop zone
-            return;
-        }
-        if (this.visibleFamily !== null || this.activeDropZone !== null) {
-            this.clearVisibleZones();
-        }
-        const target = this.dropZoneInventory.find((zone) => DropZone.dropZoneLocationsAreEqual(zone, dropZone));
-        if (target === undefined) {
-            throw new Error(`Could not find drop zone to show. location: ${JSON.stringify(dropZone.getLocation())}`);
-        }
-        const family = target.getFamily();
-        if (options.joinFamilies === true) {
-            const location1 = dropZone.getLocation();
-            const location2 = new DropZoneLocation([...location1.parentCoordinates], location1.insertIndex + 1);
-            const target2 = this.dropZoneInventory.find((zone) => DropZone.dropZoneLocationsAreEqual(zone, location2));
-            if (target2 === undefined) {
-                throw new Error("Could not find drop zone to show");
-            }
-            const family2 = target2.getFamily();
-            if (family === undefined || family2 === undefined) {
-                throw new Error("No family");
-            }
-            const newFamily = {
-                founder: family.founder,
-                members: [...family.members]
-            };
-            this.showDropZone(family.founder, true);
-            for (const member of family.members.sort(sortFamily)) {
-                member.setFamily(newFamily);
-                if (member !== family.founder) {
-                    if (this.activeDropZone === null) {
-                        //Failed to activate a zone so far, so activate this one instead
-                        this.showDropZone(member, true);
-                    }
-                    else {
-                        this.showDropZone(member);
-                    }
-                }
-            }
-            for (const member of family2.members) {
-                member.setFamily(newFamily);
-                if (member.getLocation().parentCoordinates.length <
-                    target2.getLocation().parentCoordinates.length) {
-                    newFamily.members.push(member);
-                    this.showDropZone(member);
-                }
-            }
-            //Temporarily store the old families
-            this.tempFamilies = [family, family2];
-            //Remove the old families
-            const familyIndex = this.dropZoneFamilies.indexOf(family);
-            this.dropZoneFamilies.splice(familyIndex, 1);
-            const family2Index = this.dropZoneFamilies.indexOf(family2);
-            this.dropZoneFamilies.splice(family2Index, 1);
-            //Add the new family
-            this.dropZoneFamilies.push(newFamily);
-            this.visibleFamily = newFamily;
-        }
-        else {
-            if (family === undefined) {
-                throw new Error("No family");
-            }
-            this.visibleFamily = family;
-            this.showDropZone(family.founder, true);
-            if (family.members.length > 1) {
-                for (const member of family.members.sort(sortFamily)) {
-                    if (member !== family.founder) {
-                        if (this.activeDropZone === null) {
-                            //Failed to activate a zone so far, so activate this one instead
-                            this.showDropZone(member, true);
-                        }
-                        else {
-                            this.showDropZone(member);
-                        }
-                    }
-                }
-            }
-        }
-        if (options.activateLowestInsteadOfFounder === true &&
-            this.visibleFamily.members.length > 1) {
-            const lowestMember = [...this.visibleFamily.members]
-                .sort(sortFamily)
-                .pop();
-            if (lowestMember === undefined) {
-                throw new Error("Could not get lowest member");
-            }
-            this.swapActiveDropZone(lowestMember);
-        }
-    }
-    swapActiveDropZone(newActiveDropZone) {
-        if (this.visibleFamily === null) {
-            throw new Error("No visible family available for swapping");
-        }
-        const index = this.visibleFamily.members.findIndex((dropZone) => dropZone === newActiveDropZone);
-        if (index === -1) {
-            throw new Error("failed to swap active drop zone");
-        }
-        this.setActiveDropZone(newActiveDropZone);
-    }
-    update() {
-        this.update$.next(null);
-    }
-    assignFamilies() {
-        const orphanZones = [...this.dropZoneInventory];
-        const deepestMembers = orphanZones
-            .filter((zone) => {
-            const location = zone.getLocation();
-            return (location.insertIndex === 0 &&
-                location.parentCoordinates.length > 0);
-        })
-            .sort((valueA, valueB) => {
-            const aCoordinates = valueA.getFullInsertCoordinates();
-            const bCoordinates = valueB.getFullInsertCoordinates();
-            const length = Math.max(aCoordinates.length, bCoordinates.length);
-            for (let index = 0; index < length; index++) {
-                if ((aCoordinates[index] ?? -1) > (bCoordinates[index] ?? -1)) {
-                    return -1;
-                }
-                else if ((aCoordinates[index] ?? -1) < (bCoordinates[index] ?? -1)) {
-                    return 1;
-                }
-            }
-            return 0;
-        });
-        for (const dropZone of deepestMembers) {
-            if (!orphanZones.includes(dropZone)) {
-                continue;
-            }
-            const family = {
-                founder: dropZone,
-                members: []
-            };
-            dropZone.setFamily(family);
-            //See if there are any orphans that belong to this family and claim them.
-            const cursor = [...dropZone.getFullInsertCoordinates()];
-            while (cursor.length > 0) {
-                const familyMemberIndex = orphanZones.findIndex((zone) => arraysAreEqual(zone.getFullInsertCoordinates(), cursor));
-                if (familyMemberIndex !== -1) {
-                    const familyMember = orphanZones.splice(familyMemberIndex, 1)[0];
-                    family.members.push(familyMember);
-                    familyMember.setFamily(family);
-                }
-                cursor.pop();
-                cursor[cursor.length - 1]++;
-            }
-            this.dropZoneFamilies.push(family);
-        }
-        for (const dropZone of orphanZones.filter((zone) => zone.getFullInsertCoordinates().length === 1)) {
-            const family = {
-                founder: dropZone,
-                members: [dropZone]
-            };
-            dropZone.setFamily(family);
-            this.dropZoneFamilies.push(family);
-            orphanZones.splice(orphanZones.indexOf(dropZone), 1);
-        }
-        if (orphanZones.length !== 0) {
-            let orphans = "";
-            for (const zone of orphanZones) {
-                orphans += `${JSON.stringify(zone.getLocation())}, `;
-            }
-            orphans = orphans.slice(0, orphans.length - 2);
-            throw new Error(`Some zones were not assigned to a family. The orphan zones have the following locations: ${orphans}`);
-        }
-    }
-    buildInventory() {
-        //We do this funky string array because it is faster than doing direct array comparisons
-        const inventoryCoordinates = [];
-        for (const dropZone of this.dropZoneArchive) {
-            const coordinates = dropZone.getFullInsertCoordinates().join(",");
-            if (inventoryCoordinates.includes(coordinates)) {
-                dropZone.isRendered(false);
-            }
-            else {
-                this.dropZoneInventory.push(dropZone);
-                inventoryCoordinates.push(coordinates);
-                dropZone.isRendered(true);
-            }
-        }
-    }
-    setActiveDropZone(dropZone) {
-        if (this.activeDropZone !== null) {
-            this.activeDropZone.isActive(false);
-        }
-        this.activeDropZone = dropZone;
-        if (this.activeDropZone !== null &&
-            this.dragStateService.getState() !== "droppable") {
-            this.dragStateService.droppable();
-        }
-        else if (this.activeDropZone === null &&
-            this.dragStateService.getState() === "droppable") {
-            this.dragStateService.notDroppable();
-        }
-        if (this.activeDropZone !== null) {
-            this.activeDropZone.isActive(true);
-        }
-    }
-    showDropZone(dropZone, active = false) {
-        if (this.tree === undefined) {
-            throw new Error("DropZoneService not initialized");
-        }
-        if (!this.zoneIsAllowed(dropZone)) {
-            //User settings indicate to skip this drop zone
-            return false;
-        }
-        const parent = this.tree.findByCoordinates(dropZone.getLocation().parentCoordinates);
-        if (parent === undefined) {
-            throw new Error("Bad family member");
-        }
-        dropZone.isVisible(true);
-        if (active === true) {
-            this.setActiveDropZone(dropZone);
-        }
-        return true;
-    }
-    updateDropZones() {
-        this.reset();
-        this.buildInventory();
-        this.assignFamilies();
-    }
-    zoneIsAllowed(dropZone) {
-        if (this.treeOptions === undefined || this.tree === undefined) {
-            throw new Error("dropZoneService not initialized");
-        }
-        const data = this.dragStateService.getData();
-        if (data === undefined) {
-            throw new Error("Can't get dragged node");
-        }
-        const parentCoordinates = dropZone.getLocation().parentCoordinates;
-        const dropZoneParent = this.tree.findByCoordinates(parentCoordinates);
-        if (dropZoneParent === undefined) {
-            throw new Error("Could not get drop zone parent");
-        }
-        if (parentCoordinates.length > 0 &&
-            !isNestingAllowed(this.treeOptions, dropZoneParent.data)) {
-            return false;
-        }
-        const dropZoneIndex = dropZone.getLocation().insertIndex;
-        if (dropZoneIndex === undefined) {
-            throw new Error("Could not get drop zone index");
-        }
-        const draggedNode = data.branch;
-        if (!this.treeOptions.allowDrop(draggedNode.data, dropZoneParent.data, dropZoneIndex)) {
-            return false;
-        }
-        return true;
-    }
-}
-DropZoneService.ɵfac = function DropZoneService_Factory(t) { return new (t || DropZoneService)(i0.ɵɵinject(DragStateService), i0.ɵɵinject(TreeConstructionStatus)); };
-DropZoneService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DropZoneService, factory: DropZoneService.ɵfac });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropZoneService, [{
-        type: Injectable
-    }], function () { return [{ type: DragStateService }, { type: TreeConstructionStatus }]; }, null); })();
+class DragEndEvent {
+    constructor(source, endpoints) {
+        this._source = source;
+        this._oldParent = endpoints.oldParent;
+        this._oldIndex = endpoints.oldIndex;
+        this._newParent = endpoints.newParent;
+        this._newIndex = endpoints.newIndex;
+    }
+    type() {
+        return "drag end";
+    }
+    source() {
+        return this._source;
+    }
+    newIndex() {
+        return this._newIndex;
+    }
+    newParent() {
+        return this._newParent;
+    }
+    oldIndex() {
+        return this._oldIndex;
+    }
+    oldParent() {
+        return this._oldParent;
+    }
+}
 
-class Branch {
-    constructor(data) {
-        this.data = data;
-        this.children = [];
-        this.parent = null;
-    }
-    isRoot() {
-        return this.parent === null;
-    }
-    getParent() {
-        return this.parent;
-    }
-    setParent(parent) {
-        this.parent = parent;
-    }
-    findByCoordinates(relativeCoordinates) {
-        let cursor = this;
-        for (const index of relativeCoordinates.values()) {
-            cursor = cursor.getChild(index);
-            if (cursor === undefined) {
-                return undefined;
-            }
-        }
-        return cursor;
-    }
-    getCoordinates() {
-        const coordinates = [];
-        let cursor = this;
-        while (cursor.parent !== null) {
-            const cursorIndex = cursor.getIndex();
-            if (cursorIndex === undefined || cursorIndex === null) {
-                throw new Error("Could not get cursor index");
-            }
-            coordinates.unshift(cursorIndex);
-            cursor = cursor.parent;
-        }
-        return coordinates;
-    }
-    getChild(index) {
-        return this.children[index];
-    }
-    getChildren() {
-        return this.children;
-    }
-    clearChildren() {
-        for (const child of this.children) {
-            child.setParent(null);
-        }
-        this.children.length = 0;
-    }
-    getIndex() {
-        if (this.parent === null) {
-            return null;
-        }
-        const index = this.parent.children.findIndex((branch) => branch === this);
-        if (index === -1) {
-            return undefined;
-        }
-        return index;
-    }
-    getDescendant(relativeCoordinates) {
-        let cursor = this;
-        for (const index of relativeCoordinates) {
-            cursor = cursor.children[index];
-            if (cursor === undefined) {
-                return undefined;
-            }
-        }
-        return cursor;
-    }
-    findDescendant(predicate) {
-        if (predicate(this.data) === true) {
-            return this;
-        }
-        if (this.children.length > 0) {
-            for (const child of this.children) {
-                const foundDeeper = child.findDescendant(predicate);
-                if (foundDeeper !== undefined) {
-                    return foundDeeper;
-                }
-            }
-        }
-        return undefined;
-    }
-    getAncestors() {
-        const result = [];
-        let cursor = this;
-        while (cursor.parent !== null) {
-            result.push(cursor.parent);
-            cursor = cursor.parent;
-        }
-        return result;
-    }
-    appendChild(child) {
-        if (child.getParent() !== null) {
-            child.remove();
-        }
-        child.setParent(this);
-        this.children.push(child);
-        return child;
-    }
-    insertChild(child, index) {
-        const isOwnChild = this.children.indexOf(child);
-        if (isOwnChild === -1) {
-            if (child.getParent() !== null) {
-                child.remove();
-            }
-            child.setParent(this);
-            this.children.splice(index, 0, child);
-        }
-        else {
-            if (index > isOwnChild) {
-                //Insert first, then remove
-                this.children.splice(index, 0, child);
-                this.removeChild(isOwnChild);
-                child.setParent(this);
-            }
-            else {
-                //remove first, then insert
-                child.remove();
-                this.children.splice(index, 0, child);
-                child.setParent(this);
-            }
-        }
-        return child;
-    }
-    removeChild(index) {
-        const target = this.children.splice(index, 1)[0];
-        target.setParent(null);
-        return target;
-    }
-    remove() {
-        const index = this.getIndex();
-        if (this.parent === null || index === undefined || index === null) {
-            throw new Error("can't remove root");
-        }
-        return this.parent.removeChild(index);
-    }
-    copy() {
-        const copy = this.copyHelper();
-        copy.setParent(null);
-        return copy;
-    }
-    copyHelper() {
-        const copy = new Branch(this.data);
-        for (const child of this.children) {
-            const newChild = copy.appendChild(child.copyHelper());
-            newChild.parent = copy;
-        }
-        return copy;
-    }
+class DragStartEvent {
+    constructor(source) {
+        this._source = source;
+    }
+    type() {
+        return "drag start";
+    }
+    source() {
+        return this._source;
+    }
 }
 
-const _c0$3 = function (a0, a1) { return { active: a0, related: a1 }; };
-function DropZoneComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵlistener("dragenter", function DropZoneComponent_div_0_Template_div_dragenter_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dragenterHandler()); });
-    i0.ɵɵelement(1, "div", 2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(1, _c0$3, ctx_r0.active, !ctx_r0.active));
-} }
-class DropZoneComponent {
-    constructor(dropZoneService, changeDetectorRef) {
-        this.dropZoneService = dropZoneService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.visible = false;
-        this.active = false;
-    }
-    dragenterHandler() {
-        if (this.dropZone === undefined || this.active === true) {
-            return;
-        }
-        this.dropZoneService.swapActiveDropZone(this.dropZone);
-    }
-    ngOnInit() {
-        if (this.dropZone === undefined) {
-            throw new Error("No drop zone object at component initialization");
-        }
-        this.commSubscription = this.dropZone
-            .getCommChannel()
-            .subscribe((message) => {
-            switch (message) {
-                case "checkVisible": {
-                    this.visible = this.dropZone?.isVisible() ?? false;
-                    break;
-                }
-                case "checkActive": {
-                    this.active = this.dropZone?.isActive() ?? false;
-                    break;
-                }
-                case "checkRendered": {
-                    //Do nothing. This message is for other subscribers
-                    break;
-                }
-                default: {
-                    throw new Error("unhandled comm message");
-                }
-            }
-            this.changeDetectorRef.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        if (this.commSubscription !== undefined) {
-            this.commSubscription.unsubscribe();
-        }
-    }
-}
-DropZoneComponent.ɵfac = function DropZoneComponent_Factory(t) { return new (t || DropZoneComponent)(i0.ɵɵdirectiveInject(DropZoneService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-DropZoneComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DropZoneComponent, selectors: [["drop-zone"]], inputs: { dropZone: "dropZone" }, decls: 1, vars: 1, consts: [["class", "dropZoneContainer", 3, "dragenter", 4, "ngIf"], [1, "dropZoneContainer", 3, "dragenter"], [3, "ngClass"]], template: function DropZoneComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, DropZoneComponent_div_0_Template, 2, 4, "div", 0);
-    } if (rf & 2) {
-        i0.ɵɵproperty("ngIf", ctx.visible);
-    } }, dependencies: [i2.NgClass, i2.NgIf], styles: [".active[_ngcontent-%COMP%]{margin:10px 0;width:calc(100% - 20px);height:105px;border-radius:5px;background:#f0f9ff;border:2px dashed #bed2db;box-sizing:border-box}.related[_ngcontent-%COMP%]{margin:10px 0;width:calc(100% - 20px);height:30px;border-radius:5px;background:#fff6f0;border:1px dashed #dbccbe;box-sizing:border-box;opacity:.8}.dropZoneContainer[_ngcontent-%COMP%]{position:relative}"], changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropZoneComponent, [{
-        type: Component,
-        args: [{ selector: "drop-zone", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropZoneContainer\" (dragenter)=\"dragenterHandler()\" *ngIf=\"visible\">\n   <div [ngClass]=\"{ active: active, related: !active }\"></div>\n</div>\n", styles: [".active{margin:10px 0;width:calc(100% - 20px);height:105px;border-radius:5px;background:#f0f9ff;border:2px dashed #bed2db;box-sizing:border-box}.related{margin:10px 0;width:calc(100% - 20px);height:30px;border-radius:5px;background:#fff6f0;border:1px dashed #dbccbe;box-sizing:border-box;opacity:.8}.dropZoneContainer{position:relative}\n"] }]
-    }], function () { return [{ type: DropZoneService }, { type: i0.ChangeDetectorRef }]; }, { dropZone: [{
-            type: Input
-        }] }); })();
+function assert(condition) {
+    if (condition) {
+        return;
+    }
+    throw new Error("Assertion Failed!");
+}
 
-const _c0$2 = ["children"];
-function LimbleTreeBranchComponent_drop_zone_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "drop-zone", 3);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("dropZone", ctx_r0.dropZoneInside);
-} }
-function LimbleTreeBranchComponent_ng_template_3_Template(rf, ctx) { }
-class LimbleTreeBranchComponent {
-    constructor(treeService, changeDetectorRef, dropZoneService, treeConstructionStatus, ngZone) {
-        this.treeService = treeService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.dropZoneService = dropZoneService;
-        this.treeConstructionStatus = treeConstructionStatus;
-        this.ngZone = ngZone;
-        this.treeConstructionStatus.constructing();
-        this.indent = this.treeService.treeOptions?.indent;
-        this.renderDropZoneInside = false;
-    }
-    ngOnInit() {
-        this.addDropZoneInside();
-        this.ngZone.runOutsideAngular(() => {
-            if (this.dropZoneInside === undefined) {
-                throw new Error("drop zone inside is not defined");
-            }
-            this.dropZoneInside
-                .getCommChannel()
-                .pipe(filter((message) => message === "checkRendered"))
-                .subscribe(() => {
-                if (this.dropZoneInside === undefined ||
-                    this.branch === undefined) {
-                    throw new Error("Zones not registered");
-                }
-                if (isNestingAllowed(this.treeService.treeOptions, this.branch.data)) {
-                    this.renderDropZoneInside = this.dropZoneInside.isRendered();
-                }
-            });
-        });
-    }
-    ngAfterViewInit() {
-        this.reRender();
-        this.setDropZoneHost();
-        this.treeConstructionStatus.doneConstructing();
-        this.changeDetectorRef.detectChanges();
-    }
-    ngOnDestroy() {
-        if (this.dropZoneInside !== undefined) {
-            this.dropZoneService.removeDropZone(this.dropZoneInside);
-        }
-        this.treeService.cleanupSignal$.next(true);
-    }
-    addDropZoneInside() {
-        if (this.branch === undefined) {
-            throw new Error("failed to register drop zone inside");
-        }
-        this.dropZoneInside = new DropZone([...this.branch.getCoordinates()], 0);
-        this.dropZoneService.addDropZone(this.dropZoneInside);
-    }
-    reRender() {
-        if (this.children === undefined || this.branch === undefined) {
-            throw new Error("Failed to render limble tree branch");
-        }
-        this.treeService.renderBranch(this.children, this.branch);
-    }
-    setDropZoneHost() {
-        if (this.children === undefined || this.dropZoneInside === undefined) {
-            throw new Error("Failed to add drop zone host");
-        }
-        this.dropZoneInside.setHost(this.children);
-    }
-}
-LimbleTreeBranchComponent.ɵfac = function LimbleTreeBranchComponent_Factory(t) { return new (t || LimbleTreeBranchComponent)(i0.ɵɵdirectiveInject(TreeService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DropZoneService), i0.ɵɵdirectiveInject(TreeConstructionStatus), i0.ɵɵdirectiveInject(i0.NgZone)); };
-LimbleTreeBranchComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LimbleTreeBranchComponent, selectors: [["limble-tree-branch"]], viewQuery: function LimbleTreeBranchComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$2, 5, ViewContainerRef);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.children = _t.first);
-    } }, inputs: { branch: "branch" }, decls: 5, vars: 4, consts: [[3, "dropZone", 4, "ngIf"], [1, "limble-child-nodes", 3, "hidden"], ["children", ""], [3, "dropZone"]], template: function LimbleTreeBranchComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div");
-        i0.ɵɵtemplate(1, LimbleTreeBranchComponent_drop_zone_1_Template, 1, 1, "drop-zone", 0);
-        i0.ɵɵelementStart(2, "span", 1);
-        i0.ɵɵtemplate(3, LimbleTreeBranchComponent_ng_template_3_Template, 0, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵelementEnd()();
-    } if (rf & 2) {
-        i0.ɵɵstyleProp("margin-left", ctx.indent, "px");
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.renderDropZoneInside);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("hidden", ctx.branch && ctx.branch.data.collapsed);
-    } }, dependencies: [i2.NgIf, DropZoneComponent] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeBranchComponent, [{
-        type: Component,
-        args: [{ selector: "limble-tree-branch", template: "<div [style.marginLeft.px]=\"indent\">\n   <drop-zone\n      *ngIf=\"renderDropZoneInside\"\n      [dropZone]=\"dropZoneInside\"\n   ></drop-zone>\n   <span [hidden]=\"branch && branch.data.collapsed\" class=\"limble-child-nodes\">\n      <ng-template #children></ng-template>\n   </span>\n</div>\n" }]
-    }], function () { return [{ type: TreeService }, { type: i0.ChangeDetectorRef }, { type: DropZoneService }, { type: TreeConstructionStatus }, { type: i0.NgZone }]; }, { branch: [{
-            type: Input
-        }], children: [{
-            type: ViewChild,
-            args: ["children", { read: ViewContainerRef }]
-        }] }); })();
+var DragStates;
+(function (DragStates) {
+    DragStates[DragStates["Idle"] = 0] = "Idle";
+    DragStates[DragStates["Starting"] = 1] = "Starting";
+    DragStates[DragStates["Dragging"] = 2] = "Dragging";
+    DragStates[DragStates["Dropped"] = 3] = "Dropped";
+})(DragStates || (DragStates = {}));
+class DragState {
+    constructor() {
+        this._state = DragStates.Idle;
+        this.state$ = new BehaviorSubject(DragStates.Idle);
+        this.state$.subscribe((state) => {
+            this._state = state;
+        });
+        this.dragData = undefined;
+    }
+    getDragData() {
+        return this.dragData;
+    }
+    starting(treeBranch) {
+        assert(this._state === DragStates.Idle);
+        this.dragData = treeBranch;
+        this.state$.next(DragStates.Starting);
+    }
+    dragging() {
+        assert(this._state === DragStates.Starting);
+        this.state$.next(DragStates.Dragging);
+    }
+    dropped() {
+        assert(this._state === DragStates.Dragging);
+        this.state$.next(DragStates.Dropped);
+    }
+    restart() {
+        this.dragData = undefined;
+        this.state$.next(DragStates.Idle);
+    }
+    events() {
+        return this.state$;
+    }
+    state() {
+        return this._state;
+    }
+}
+const dragState = new DragState();
 
-class ComponentCreatorService {
-    constructor(factoryResolver) {
-        this.factoryResolver = factoryResolver;
-        this.factoryResolver = factoryResolver;
-    }
-    appendComponent(component, viewContainerRef, index = undefined) {
-        const componentFactory = this.factoryResolver.resolveComponentFactory(component);
-        const componentRef = viewContainerRef.createComponent(componentFactory, index);
-        return componentRef;
-    }
-}
-ComponentCreatorService.ɵfac = function ComponentCreatorService_Factory(t) { return new (t || ComponentCreatorService)(i0.ɵɵinject(i0.ComponentFactoryResolver)); };
-ComponentCreatorService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ComponentCreatorService, factory: ComponentCreatorService.ɵfac });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentCreatorService, [{
-        type: Injectable
-    }], function () { return [{ type: i0.ComponentFactoryResolver }]; }, null); })();
+class DropEvent {
+    constructor(source, parent, index) {
+        this._source = source;
+        this._parent = parent;
+        this._index = index;
+    }
+    type() {
+        return "drag end";
+    }
+    source() {
+        return this._source;
+    }
+    index() {
+        return this._index;
+    }
+    parent() {
+        return this._parent;
+    }
+}
 
-function getScrollParent(element) {
-    const regex = /(auto|scroll)/;
-    const parents = (_node, parentList) => {
-        if (_node === null || _node.parentNode === null) {
-            return parentList;
-        }
-        return parents(_node.parentElement, parentList.concat([_node]));
-    };
-    const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
-    const overflow = (_node) => style(_node, "overflow") +
-        style(_node, "overflow-y") +
-        style(_node, "overflow-x");
-    const scroll = (_node) => regex.test(overflow(_node));
-    const parentList = parents(element.parentElement, []);
-    for (const parent of parentList) {
-        if (scroll(parent)) {
-            return parent;
-        }
-    }
-    return (document.scrollingElement ?? document.documentElement);
-}
-class GlobalEventsService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.ngZone.runOutsideAngular(() => {
-            this.globalDrag$ = fromEvent(document, "drag");
-        });
-        this.scrolling = false;
-    }
-    addScrolling() {
-        this.ngZone.runOutsideAngular(() => {
-            if (this.globalDragSubscription !== undefined) {
-                return;
-            }
-            if (this.globalDrag$ === undefined) {
-                throw new Error("Could not get observable");
-            }
-            let viewPortHeight;
-            let scrollAreaSize;
-            let edgeTop;
-            let edgeBottom;
-            let isInTopScrollArea;
-            let isInBottomScrollArea;
-            let timer;
-            let scrollableDiv;
-            let relativeY;
-            this.globalDragSubscription = this.globalDrag$
-                .pipe(throttleTime(25), filter((event) => {
-                if (!event.target) {
-                    return false;
-                }
-                scrollableDiv = getScrollParent(event.target);
-                viewPortHeight = scrollableDiv.clientHeight;
-                const viewPortWidth = scrollableDiv.clientWidth;
-                let relativeX;
-                if (window
-                    .getComputedStyle(scrollableDiv)
-                    .getPropertyValue("position")
-                    .toLowerCase() === "fixed") {
-                    relativeX = event.clientX;
-                    relativeY = event.clientY;
-                }
-                else {
-                    const boundingRect = scrollableDiv.getBoundingClientRect();
-                    const scrollableDivAncestor = getScrollParent(scrollableDiv);
-                    relativeX =
-                        event.clientX -
-                            (boundingRect.left + scrollableDivAncestor.scrollLeft);
-                    relativeY =
-                        event.clientY -
-                            (boundingRect.top + scrollableDivAncestor.scrollTop);
-                }
-                if (relativeX < 0 ||
-                    relativeX > viewPortWidth ||
-                    relativeY < 0 ||
-                    relativeY > viewPortHeight) {
-                    //Outside of scrollable div
-                    return false;
-                }
-                scrollAreaSize = Math.max(viewPortHeight * 0.1, 100);
-                edgeTop = scrollAreaSize;
-                edgeBottom = viewPortHeight - scrollAreaSize;
-                isInTopScrollArea = relativeY < edgeTop;
-                isInBottomScrollArea = relativeY > edgeBottom;
-                return isInTopScrollArea || isInBottomScrollArea;
-            }))
-                .subscribe(() => {
-                if (scrollableDiv === null) {
-                    return;
-                }
-                const height = scrollableDiv.scrollHeight;
-                const maxScrollY = height - viewPortHeight;
-                const currentScrollY = scrollableDiv.scrollTop;
-                const canScrollUp = currentScrollY > 0;
-                const canScrollDown = currentScrollY < maxScrollY;
-                let nextScrollY;
-                const maxStep = 75;
-                if (isInTopScrollArea && canScrollUp) {
-                    const intensity = (edgeTop - relativeY) / scrollAreaSize;
-                    nextScrollY = currentScrollY - maxStep * intensity;
-                }
-                else if (isInBottomScrollArea && canScrollDown) {
-                    const intensity = (relativeY - edgeBottom) / scrollAreaSize;
-                    nextScrollY = currentScrollY + maxStep * intensity;
-                }
-                else {
-                    return;
-                }
-                nextScrollY = Math.max(0, Math.min(maxScrollY, nextScrollY));
-                if (nextScrollY !== currentScrollY) {
-                    scrollableDiv.scrollTo({ top: nextScrollY });
-                    this.scrolling = true;
-                    clearTimeout(timer);
-                    timer = setTimeout(() => {
-                        this.scrolling = false;
-                    }, 100);
-                }
-            });
-        });
-    }
-    removeScrolling() {
-        if (this.globalDragSubscription !== undefined) {
-            this.globalDragSubscription.unsubscribe();
-        }
-    }
-}
-GlobalEventsService.ɵfac = function GlobalEventsService_Factory(t) { return new (t || GlobalEventsService)(i0.ɵɵinject(i0.NgZone)); };
-GlobalEventsService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: GlobalEventsService, factory: GlobalEventsService.ɵfac });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GlobalEventsService, [{
-        type: Injectable
-    }], function () { return [{ type: i0.NgZone }]; }, null); })();
+class DragAndDrop {
+    constructor() {
+        this.dragAborted$ = new Subject();
+    }
+    dragStart(treeBranch, event) {
+        if (!this.draggingAllowed(treeBranch)) {
+            event.preventDefault();
+            return;
+        }
+        treeBranch.dispatch(new DragStartEvent(treeBranch));
+        this.setDragEffects(treeBranch, event);
+        this.watchForDragend(treeBranch, event);
+        // We have to do a setTimeout because DOM changes are not allowed during a
+        // dragstart event.
+        setTimeout(() => {
+            dragState.starting(treeBranch);
+            treeBranch.prune();
+            dragState.dragging();
+        });
+    }
+    drop(parent, index) {
+        const treeBranch = dragState.getDragData();
+        if (treeBranch === undefined) {
+            throw new TreeError("Cannot get dragged branch");
+        }
+        this.graftDraggedBranch(treeBranch, parent, index);
+        treeBranch.dispatch(new DropEvent(treeBranch, parent, index));
+    }
+    getDragImageOffsets(event, element) {
+        const bounds = element.getBoundingClientRect();
+        const xOffset = event.clientX - bounds.left;
+        const yOffset = event.clientY - bounds.top;
+        return [xOffset, yOffset];
+    }
+    setDragEffects(treeBranch, event) {
+        const dataTransfer = event.dataTransfer;
+        assert(dataTransfer instanceof DataTransfer);
+        const nativeElement = treeBranch.getNativeElement();
+        const [xOffset, yOffset] = this.getDragImageOffsets(event, nativeElement);
+        dataTransfer.setDragImage(nativeElement, xOffset, yOffset);
+    }
+    watchForDragend(treeBranch, event) {
+        const oldParent = treeBranch.parent();
+        const oldIndex = treeBranch.index();
+        assert(oldParent !== undefined && oldIndex !== undefined);
+        event.target?.addEventListener("dragend", (dragend) => {
+            if (dragState.state() !== DragStates.Dropped) {
+                //The drag ended but a drop never occurred, so put the dragged branch back where it started.
+                this.dragAborted$.next(dragend);
+                this.graftDraggedBranch(treeBranch, oldParent, oldIndex);
+            }
+            dragState.restart();
+            const newParent = treeBranch.parent();
+            assert(newParent !== undefined);
+            const newIndex = treeBranch.index();
+            assert(newIndex !== undefined);
+            treeBranch.dispatch(new DragEndEvent(treeBranch, {
+                oldParent,
+                oldIndex,
+                newParent,
+                newIndex
+            }));
+        }, { once: true });
+    }
+    draggingAllowed(treeBranch) {
+        const allowDragging = config.getConfig(treeBranch.root())?.dragAndDrop?.allowDragging ??
+            (() => true);
+        return allowDragging(treeBranch);
+    }
+    graftDraggedBranch(treeBranch, parent, index) {
+        treeBranch.graftTo(parent, index);
+        treeBranch.getNativeElement().style.display = "block";
+        dragState.dropped();
+    }
+}
+const dragAndDrop = new DragAndDrop();
 
-const _c0$1 = ["nodeHost"];
-const _c1 = ["draggableDiv"];
-const _c2 = ["nodeHostContainer"];
-const _c3 = ["innerBranch"];
-function LimbleTreeNodeComponent_drop_zone_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "drop-zone", 7);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("dropZone", ctx_r0.dropZoneAbove);
-} }
-function LimbleTreeNodeComponent_ng_template_5_Template(rf, ctx) { }
-function LimbleTreeNodeComponent_limble_tree_branch_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "limble-tree-branch", 8, 9);
-} if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("branch", ctx_r5.branch);
-} }
-function LimbleTreeNodeComponent_drop_zone_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "drop-zone", 7);
-} if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("dropZone", ctx_r6.dropZoneBelow);
-} }
-class LimbleTreeNodeComponent {
-    constructor(componentCreatorService, changeDetectorRef, dragStateService, dropZoneService, treeService, globalEventsService, ngZone, treeConstructionStatus) {
-        this.componentCreatorService = componentCreatorService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.dragStateService = dragStateService;
-        this.dropZoneService = dropZoneService;
-        this.treeService = treeService;
-        this.globalEventsService = globalEventsService;
-        this.ngZone = ngZone;
-        this.treeConstructionStatus = treeConstructionStatus;
-        this.treeConstructionStatus.constructing();
-        if (this.treeService.treeOptions !== undefined &&
-            this.treeService.treeOptions.listMode !== true) {
-            this.renderInnerBranch = true;
-        }
-        else {
-            this.renderInnerBranch = false;
-        }
-        this.renderDropZoneBelow = false;
-        this.renderDropZoneAbove = false;
-        this.treeChangeSubscription = this.treeService.changes$
-            .pipe(
-        //The first one is the initial tree render, which we can ignore
-        skip(1))
-            .subscribe(() => {
-            this.treeChangeHandler();
-        });
-    }
-    treeChangeHandler() {
-        if (this.branch !== undefined &&
-            this.currentBranchCoordinates !== undefined &&
-            !arraysAreEqual(this.branch.getCoordinates(), this.currentBranchCoordinates)) {
-            this.updateDropZones();
-        }
-    }
-    ngOnInit() {
-        if (this.treeService.treeOptions?.allowDragging === false) {
-            return;
-        }
-        const parent = this.branch?.getParent();
-        if (parent?.data !== null) {
-            const parentData = parent?.data;
-            if (!isNestingAllowed(this.treeService.treeOptions, parentData)) {
-                this.renderInnerBranch = false;
-                return;
-            }
-        }
-        this.registerDropZones();
-        this.currentBranchCoordinates = this.branch?.getCoordinates();
-        this.ngZone.runOutsideAngular(() => {
-            if (this.dropZoneAbove === undefined ||
-                this.dropZoneBelow === undefined) {
-                throw new Error("Zones not registered");
-            }
-            merge(this.dropZoneAbove.getCommChannel(), this.dropZoneBelow.getCommChannel())
-                .pipe(filter((message) => message === "checkRendered"))
-                .subscribe(() => {
-                if (this.dropZoneAbove === undefined ||
-                    this.dropZoneBelow === undefined ||
-                    this.branch === undefined) {
-                    throw new Error("Zones not registered");
-                }
-                this.renderDropZoneAbove = this.dropZoneAbove.isRendered();
-                this.renderDropZoneBelow = this.dropZoneBelow.isRendered();
-            });
-        });
-    }
-    ngAfterViewInit() {
-        this.renderNode();
-        this.setDropZoneHosts();
-        this.checkForHandle();
-        this.treeConstructionStatus.doneConstructing();
-        this.changeDetectorRef.detectChanges();
-    }
-    ngOnDestroy() {
-        this.treeChangeSubscription.unsubscribe();
-        if (this.dropZoneAbove !== undefined) {
-            this.dropZoneService.removeDropZone(this.dropZoneAbove);
-        }
-        if (this.dropZoneBelow !== undefined) {
-            this.dropZoneService.removeDropZone(this.dropZoneBelow);
-        }
-        this.treeService.cleanupSignal$.next(true);
-    }
-    dragstartHandler(event) {
-        event.stopPropagation();
-        if (event.dataTransfer === null ||
-            this.branch === undefined ||
-            this.parentHost === undefined) {
-            throw new Error("failed to run dragstartHandler");
-        }
-        const draggedElement = event.target;
-        if (draggedElement.parentElement?.tagName !== "LIMBLE-TREE-NODE") {
-            //Don't drag stuff that isn't part of the tree
-            event.preventDefault();
-            return;
-        }
-        event.dataTransfer.effectAllowed = "move";
-        this.dragStateService.dragging(this.branch, this.parentHost);
-        const treeElement = draggedElement.closest("limble-tree-root");
-        if (treeElement === null) {
-            throw new Error("could not get root of tree");
-        }
-        this.ngZone.runOutsideAngular(() => {
-            //We have to use a setTimeout due to a bug in chrome: https://stackoverflow.com/a/20733870/8796651
-            setTimeout(() => {
-                draggedElement.classList.add("dragging");
-                if (this.treeService.treeData?.length === 1 &&
-                    this.branch?.getCoordinates().length === 1) {
-                    //We are dragging the only element in the tree, so we have to use the placeholder system
-                    this.treeService.placeholder$.next(true);
-                }
-            });
-            //We use this weird subscription/timeout combo in order to avoid a strange bug where the dragleave event
-            //does not fire if the user drags out of the tree too quickly. This issue would make the drop zone
-            //remain in the UI, potentially causing drop zones to appear in multiple trees at a time. This subscription
-            //waits for the dragover event on the tree to fire before rendering any drop zones. If the dragover
-            //event does not fire within a half second, we know the mouse left the tree too quickly, and we won't
-            //render the drop zone at all.
-            const dragSubscription = fromEvent(treeElement, "dragover")
-                .pipe(first())
-                .subscribe((dragoverEvent) => {
-                dragoverEvent.stopPropagation();
-                if (this.branch === undefined) {
-                    throw new Error("Could not show surrounding drop zones");
-                }
-                const parent = this.branch.getParent();
-                let parentData;
-                let parentNestingAllowed = true;
-                if (parent?.data !== null) {
-                    parentData = parent?.data;
-                    parentNestingAllowed = isNestingAllowed(this.treeService.treeOptions, parentData);
-                }
-                if (this.dropZoneAbove !== undefined && parentNestingAllowed) {
-                    this.dropZoneService.showDropZoneFamily(this.dropZoneAbove, {
-                        joinFamilies: true
-                    });
-                }
-            });
-            setTimeout(() => {
-                if (!dragSubscription.closed) {
-                    dragSubscription.unsubscribe();
-                }
-            }, 500);
-        });
-    }
-    dragendHandler(event) {
-        event?.stopPropagation();
-        if (this.draggableDiv === undefined) {
-            throw new Error("could not get draggable div");
-        }
-        this.draggableDiv.nativeElement.classList.remove("dragging");
-        if (this.dragStateService.getState() === "captured") {
-            if (this.treeService.captured === false) {
-                //Dropped in a different tree. Remove the one in this tree
-                if (this.branch === undefined) {
-                    throw new Error("could not get branch in dragendHandler");
-                }
-                this.treeService.cleanupSignal$.next(true);
-                this.treeService.captured = false;
-            }
-            this.dragStateService.release();
-        }
-        else {
-            //Wasn't dropped into a valid tree, so reset for next drag and
-            //don't do anything else.
-            this.dragStateService.release();
-            this.dropZoneService.clearVisibleZones();
-            this.dropZoneService.restoreFamilies();
-            if (this.treeService.treeData?.length === 1 &&
-                this.branch?.getCoordinates().length === 1) {
-                //We were dragging the only element in the tree, so we have to
-                //remove the placeholder that we added in the dragstart
-                this.treeService.placeholder$.next(false);
-            }
-        }
-    }
-    dragoverHandler(event) {
-        if (this.globalEventsService.scrolling === true) {
-            return;
-        }
-        if (this.branch === undefined) {
-            throw new Error("Can't get current branch during dragover event");
-        }
-        const data = this.dragStateService.getData();
-        if (data === undefined) {
-            //They might be dragging something that isn't a node. Just ignore it.
-            return;
-        }
-        const sourceBranch = data.branch;
-        //If trying to drop on self, return.
-        if (sourceBranch === this.branch ||
-            this.branch.getAncestors().includes(sourceBranch)) {
-            return;
-        }
-        const target = event.currentTarget.closest(".node-host-container");
-        if (!(target instanceof HTMLElement)) {
-            throw new Error("Failed to find node host container while dragging");
-        }
-        let topLine;
-        let bottomLine;
-        if (this.innerBranch?.renderDropZoneInside === false) {
-            topLine = target.offsetHeight / 2 - 6;
-            bottomLine = topLine;
-        }
-        else {
-            topLine = target.offsetHeight / 3 - 3; //an imaginary line 1/3 of the way down from the top of the element;
-            bottomLine = topLine * 2; //an imaginary line 1/3 of the way up from the bottom of the element;
-        }
-        const parent = this.branch.getParent();
-        let parentData;
-        let parentNestingAllowed = true;
-        if (parent?.data !== null) {
-            parentData = parent?.data;
-            parentNestingAllowed = isNestingAllowed(this.treeService.treeOptions, parentData);
-        }
-        /** The y-coordinates of the mouse in relation to the node it is hovering over */
-        const offsetY = event.clientY - target.getBoundingClientRect().top;
-        const activeDropZone = this.dropZoneService.getActiveDropZone();
-        if (offsetY < topLine &&
-            this.dropZoneAbove !== undefined &&
-            parentNestingAllowed &&
-            (activeDropZone === null ||
-                !DropZone.dropZoneLocationsAreEqual(activeDropZone, this.dropZoneAbove))) {
-            const index = this.branch.getIndex();
-            if (index === undefined || index === null) {
-                throw new Error("can't get branch index");
-            }
-            this.dropZoneService.showDropZoneFamily(this.dropZoneAbove, {
-                activateLowestInsteadOfFounder: true
-            });
-            if (suddenTreeExit(event)) {
-                this.dropZoneService.clearVisibleZones();
-            }
-        }
-        else if (offsetY < bottomLine &&
-            offsetY > topLine &&
-            this.innerBranch?.renderDropZoneInside === true &&
-            this.innerBranch?.dropZoneInside !== undefined &&
-            (activeDropZone === null ||
-                !DropZone.dropZoneLocationsAreEqual(activeDropZone, this.innerBranch.dropZoneInside))) {
-            this.dropZoneService.showDropZoneFamily(this.innerBranch.dropZoneInside);
-            if (suddenTreeExit(event)) {
-                this.dropZoneService.clearVisibleZones();
-            }
-        }
-        else if (offsetY >= bottomLine &&
-            this.dropZoneBelow !== undefined &&
-            parentNestingAllowed &&
-            (activeDropZone === null ||
-                !DropZone.dropZoneLocationsAreEqual(activeDropZone, this.dropZoneBelow)) &&
-            this.branch.getChildren().length === 0) {
-            const index = this.branch.getIndex();
-            if (index === undefined || index === null) {
-                throw new Error("can't get branch index");
-            }
-            this.dropZoneService.showDropZoneFamily(this.dropZoneBelow);
-            if (suddenTreeExit(event)) {
-                this.dropZoneService.clearVisibleZones();
-            }
-        }
-    }
-    renderNode() {
-        if (this.nodeHost === undefined || this.branch === undefined) {
-            throw new Error("Failed to render tree node");
-        }
-        let component = this.branch.data.component;
-        if (component === undefined) {
-            component = this.treeService.treeOptions?.defaultComponent;
-        }
-        if (component === undefined) {
-            throw new Error("limbleTree requires a component to render");
-        }
-        const componentRef = this.componentCreatorService.appendComponent(component.class, this.nodeHost);
-        componentRef.instance.nodeData = this.branch.data;
-        for (const binding in component.bindings) {
-            componentRef.instance[binding] = component.bindings[binding];
-        }
-    }
-    registerDropZones() {
-        this.addDropZoneAbove();
-        this.addDropZoneBelow();
-    }
-    addDropZoneAbove() {
-        if (this.branch === undefined) {
-            throw new Error("failed to register drop zone above");
-        }
-        const parent = this.branch.getParent();
-        const currentCoordinates = this.branch.getCoordinates();
-        const index = currentCoordinates[currentCoordinates.length - 1];
-        this.dropZoneAbove = new DropZone([...(parent?.getCoordinates() ?? [])], index);
-        this.dropZoneService.addDropZone(this.dropZoneAbove);
-    }
-    addDropZoneBelow() {
-        if (this.branch === undefined) {
-            throw new Error("failed to register drop zone below");
-        }
-        const parent = this.branch.getParent();
-        const currentCoordinates = this.branch.getCoordinates();
-        const index = currentCoordinates[currentCoordinates.length - 1];
-        this.dropZoneBelow = new DropZone([...(parent?.getCoordinates() ?? [])], index + 1);
-        this.dropZoneService.addDropZone(this.dropZoneBelow);
-    }
-    updateDropZones() {
-        this.currentBranchCoordinates = this.branch?.getCoordinates();
-        this.updateDropZoneAbove();
-        this.updateDropZoneBelow();
-        this.updateDropZoneInside();
-        this.setDropZoneHosts();
-    }
-    updateDropZoneAbove() {
-        if (this.branch === undefined || this.dropZoneAbove === undefined) {
-            throw new Error("failed to update drop zone above");
-        }
-        const parent = this.branch.getParent();
-        const currentCoordinates = this.branch.getCoordinates();
-        const index = currentCoordinates[currentCoordinates.length - 1];
-        const location = this.dropZoneAbove.getLocation();
-        location.setParentCoordinates([...(parent?.getCoordinates() ?? [])]);
-        location.setInsertIndex(index);
-    }
-    updateDropZoneBelow() {
-        if (this.branch === undefined || this.dropZoneBelow === undefined) {
-            throw new Error("failed to update drop zone below");
-        }
-        const parent = this.branch.getParent();
-        const currentCoordinates = this.branch.getCoordinates();
-        const index = currentCoordinates[currentCoordinates.length - 1];
-        const location = this.dropZoneBelow.getLocation();
-        location.setParentCoordinates([...(parent?.getCoordinates() ?? [])]);
-        location.setInsertIndex(index + 1);
-    }
-    updateDropZoneInside() {
-        if (this.innerBranch?.dropZoneInside === undefined) {
-            return;
-        }
-        if (this.branch === undefined) {
-            throw new Error("failed to update drop zone inside");
-        }
-        const location = this.innerBranch.dropZoneInside.getLocation();
-        location.setParentCoordinates([...this.branch.getCoordinates()]);
-    }
-    setDropZoneHosts() {
-        if (this.dropZoneAbove === undefined ||
-            this.dropZoneBelow === undefined) {
-            return;
-        }
-        this.dropZoneAbove.setHost(this.parentHost);
-        this.dropZoneBelow.setHost(this.parentHost);
-    }
-    checkForHandle() {
-        if (this.nodeHostContainer === undefined ||
-            this.draggableDiv === undefined) {
-            return;
-        }
-        const nodeHostContainerElement = this.nodeHostContainer.nativeElement;
-        const handle = nodeHostContainerElement.querySelector(".limble-tree-handle");
-        const draggableDivElement = this.draggableDiv.nativeElement;
-        if (!isDraggingAllowed(this.treeService.treeOptions, this.branch?.data)) {
-            draggableDivElement.setAttribute("draggable", "false");
-        }
-        else if (handle === null) {
-            draggableDivElement.setAttribute("draggable", "true");
-        }
-        else {
-            handle.addEventListener("mousedown", () => {
-                draggableDivElement.setAttribute("draggable", "true");
-                //For some reason mouseup doesn't fire after a drag, so we use this observable sequence instead.
-                const dragging = this.dragStateService.state$.pipe(filter((state) => state === "dragging"), first());
-                this.dragStateService.state$
-                    .pipe(skipUntil(dragging), filter((state) => state === "idle"), first())
-                    .subscribe(() => {
-                    draggableDivElement.setAttribute("draggable", "false");
-                });
-            });
-        }
-    }
-}
-LimbleTreeNodeComponent.ɵfac = function LimbleTreeNodeComponent_Factory(t) { return new (t || LimbleTreeNodeComponent)(i0.ɵɵdirectiveInject(ComponentCreatorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(DragStateService), i0.ɵɵdirectiveInject(DropZoneService), i0.ɵɵdirectiveInject(TreeService), i0.ɵɵdirectiveInject(GlobalEventsService), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(TreeConstructionStatus)); };
-LimbleTreeNodeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LimbleTreeNodeComponent, selectors: [["limble-tree-node"]], viewQuery: function LimbleTreeNodeComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$1, 5, ViewContainerRef);
-        i0.ɵɵviewQuery(_c1, 5, ElementRef);
-        i0.ɵɵviewQuery(_c2, 5, ElementRef);
-        i0.ɵɵviewQuery(_c3, 5, LimbleTreeBranchComponent);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nodeHost = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.draggableDiv = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nodeHostContainer = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.innerBranch = _t.first);
-    } }, inputs: { branch: "branch", parentHost: "parentHost" }, decls: 9, vars: 4, consts: [[3, "dropZone", 4, "ngIf"], [1, "limble-parent-container", 3, "dragstart", "dragend"], ["draggableDiv", ""], [1, "node-host-container", 3, "dragoverEventThrottle", "dragoverNoChangeDetect"], ["nodeHostContainer", ""], ["nodeHost", ""], [3, "branch", 4, "ngIf"], [3, "dropZone"], [3, "branch"], ["innerBranch", ""]], template: function LimbleTreeNodeComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, LimbleTreeNodeComponent_drop_zone_0_Template, 1, 1, "drop-zone", 0);
-        i0.ɵɵelementStart(1, "div", 1, 2);
-        i0.ɵɵlistener("dragstart", function LimbleTreeNodeComponent_Template_div_dragstart_1_listener($event) { return ctx.dragstartHandler($event); })("dragend", function LimbleTreeNodeComponent_Template_div_dragend_1_listener($event) { return ctx.dragendHandler($event); });
-        i0.ɵɵelementStart(3, "div", 3, 4);
-        i0.ɵɵlistener("dragoverNoChangeDetect", function LimbleTreeNodeComponent_Template_div_dragoverNoChangeDetect_3_listener($event) { return ctx.dragoverHandler($event); });
-        i0.ɵɵtemplate(5, LimbleTreeNodeComponent_ng_template_5_Template, 0, 0, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(7, LimbleTreeNodeComponent_limble_tree_branch_7_Template, 2, 1, "limble-tree-branch", 6);
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(8, LimbleTreeNodeComponent_drop_zone_8_Template, 1, 1, "drop-zone", 0);
-    } if (rf & 2) {
-        i0.ɵɵproperty("ngIf", ctx.renderDropZoneAbove === true);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("dragoverEventThrottle", 10);
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngIf", ctx.branch !== undefined && ctx.renderInnerBranch === true);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.renderDropZoneBelow === true);
-    } }, styles: [".dragging[_ngcontent-%COMP%]{position:absolute;transition:transform .01s;transform:translate(-9999px)}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeNodeComponent, [{
-        type: Component,
-        args: [{ selector: "limble-tree-node", template: "<drop-zone\n   *ngIf=\"renderDropZoneAbove === true\"\n   [dropZone]=\"dropZoneAbove\"\n></drop-zone>\n<div\n   (dragstart)=\"dragstartHandler($event)\"\n   (dragend)=\"dragendHandler($event)\"\n   class=\"limble-parent-container\"\n   #draggableDiv\n>\n   <div\n      class=\"node-host-container\"\n      (dragoverNoChangeDetect)=\"dragoverHandler($event)\"\n      [dragoverEventThrottle]=\"10\"\n      #nodeHostContainer\n   >\n      <ng-template #nodeHost></ng-template>\n   </div>\n   <limble-tree-branch\n      *ngIf=\"branch !== undefined && renderInnerBranch === true\"\n      [branch]=\"branch\"\n      #innerBranch\n   ></limble-tree-branch>\n</div>\n<drop-zone\n   *ngIf=\"renderDropZoneBelow === true\"\n   [dropZone]=\"dropZoneBelow\"\n></drop-zone>\n", styles: [".dragging{position:absolute;transition:transform .01s;transform:translate(-9999px)}\n"] }]
-    }], function () { return [{ type: ComponentCreatorService }, { type: i0.ChangeDetectorRef }, { type: DragStateService }, { type: DropZoneService }, { type: TreeService }, { type: GlobalEventsService }, { type: i0.NgZone }, { type: TreeConstructionStatus }]; }, { branch: [{
-            type: Input
-        }], nodeHost: [{
-            type: ViewChild,
-            args: ["nodeHost", { read: ViewContainerRef }]
-        }], draggableDiv: [{
-            type: ViewChild,
-            args: ["draggableDiv", { read: ElementRef }]
-        }], nodeHostContainer: [{
-            type: ViewChild,
-            args: ["nodeHostContainer", { read: ElementRef }]
-        }], parentHost: [{
-            type: Input
-        }], innerBranch: [{
-            type: ViewChild,
-            args: ["innerBranch", { read: LimbleTreeBranchComponent }]
-        }] }); })();
+class DragoverNoChangeDetectDirective {
+    constructor(ngZone, el) {
+        this.ngZone = ngZone;
+        this.el = el;
+        this.dragoverNoChangeDetect = new EventEmitter();
+        this.dragoverEventThrottle = 25;
+    }
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.eventSubscription = fromEvent(this.el.nativeElement, "dragover")
+                .pipe(throttleTime(this.dragoverEventThrottle))
+                .subscribe(($event) => {
+                this.dragoverNoChangeDetect.emit($event);
+            });
+        });
+    }
+    ngOnDestroy() {
+        if (this.eventSubscription !== undefined) {
+            this.eventSubscription.unsubscribe();
+        }
+    }
+}
+DragoverNoChangeDetectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DragoverNoChangeDetectDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragoverNoChangeDetectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DragoverNoChangeDetectDirective, isStandalone: true, selector: "[dragoverNoChangeDetect]", inputs: { dragoverEventThrottle: "dragoverEventThrottle" }, outputs: { dragoverNoChangeDetect: "dragoverNoChangeDetect" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DragoverNoChangeDetectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: "[dragoverNoChangeDetect]"
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { dragoverEventThrottle: [{
+                type: Input
+            }], dragoverNoChangeDetect: [{
+                type: Output
+            }] } });
 
-/** The default value for the `indent` option */
-const INDENT = 45;
-class TreeService {
-    constructor(componentCreatorService, dropZoneService, dragStateService, treeConstructionStatus) {
-        this.componentCreatorService = componentCreatorService;
-        this.dropZoneService = dropZoneService;
-        this.dragStateService = dragStateService;
-        this.treeConstructionStatus = treeConstructionStatus;
-        this.changes$ = new Subject();
-        this.drops$ = new Subject();
-        this.treeModel = new Branch(null);
-        this.placeholder = false;
-        this.captured = false;
-        this.cleanupSignal$ = new Subject();
-        let rebuild = false;
-        let treeIsStable = false;
-        const treeIsStable$ = this.treeConstructionStatus.stable$.pipe(tap((value) => {
-            treeIsStable = value;
-        }), filter((value) => value === true));
-        this.cleanupSignal$
-            .pipe(tap((value) => {
-            rebuild = value;
-        }), debounce(() => {
-            if (treeIsStable === true) {
-                //If tree is stable, continue right away
-                return EMPTY;
-            }
-            //If tree is not stable, wait for it to become so.
-            return treeIsStable$;
-        }), 
-        //We use this timed debounce to throttle chained destruction of components
-        debounceTime(5))
-            .subscribe(() => {
-            this.cleanup(rebuild);
-            rebuild = false;
-        });
-        this.placeholder$ = new BehaviorSubject(false);
-        this.placeholder$.subscribe((value) => {
-            this.placeholder = value;
-        });
-    }
-    drop(source, targetCoordinates) {
-        //prep
-        const sourceParent = source.getParent();
-        if (sourceParent === null) {
-            throw new Error("can't drop root of tree");
-        }
-        const sourceIndex = source.getIndex();
-        if (sourceIndex === undefined || sourceIndex === null) {
-            throw new Error("Cannot move the hidden root node");
-        }
-        let targetParentCoordinates;
-        let newIndex;
-        if (this.placeholder === true) {
-            targetParentCoordinates = [];
-            newIndex = 0;
-        }
-        else {
-            targetParentCoordinates = [...targetCoordinates];
-            newIndex = targetParentCoordinates.pop();
-        }
-        if (newIndex === undefined) {
-            throw new Error("target coordinates are empty");
-        }
-        const targetParent = this.treeModel.getDescendant(targetParentCoordinates);
-        if (targetParent === undefined) {
-            throw new Error("could not get to target");
-        }
-        const target = this.dropZoneService.getDropZone(targetCoordinates);
-        const targetIndex = target?.getLocation().insertIndex;
-        const targetHost = target?.getHost();
-        const sourceHost = this.dragStateService.getData()?.parentContainer;
-        if (this.placeholder === true) {
-            this.placeholder$.next(false);
-        }
-        //Change the treeModel
-        targetParent.insertChild(source, newIndex);
-        //Prepare to update the view
-        if (targetHost === undefined ||
-            sourceHost === undefined ||
-            targetIndex === undefined) {
-            //Hitting this means there is a bug, but not a fatal one.
-            //Just render the whole tree again.
-            console.warn("Could not perform a precise update. Re-rendering the entire tree instead");
-            this.render();
-            this.changes$.next(null);
-            return;
-        }
-        //Update the view
-        const nodesInSource = sourceHost.length;
-        const componentRef = this.componentCreatorService.appendComponent(LimbleTreeNodeComponent, targetHost, newIndex);
-        componentRef.instance.branch = source;
-        componentRef.instance.parentHost = targetHost;
-        if (targetIndex < sourceIndex &&
-            sourceHost.length > nodesInSource &&
-            arraysAreEqual(sourceParent.getCoordinates(), targetParentCoordinates)) {
-            sourceHost.remove(sourceIndex + 1);
-        }
-        else {
-            sourceHost.remove(sourceIndex);
-        }
-        //Update the tree data
-        this.rebuildTreeData();
-        //Publish drop data
-        this.drops$.next({
-            target: source.data,
-            oldParent: sourceParent.data,
-            oldIndex: sourceIndex,
-            newParent: targetParent.data,
-            newIndex: newIndex
-        });
-        this.cleanupSignal$.next(false);
-    }
-    /** Initializes the service and renders the tree.
-     * @param host - The ViewContainerRef into which the tree will be rendered.
-     * @param data - The data array that was passed in to LimbleTreeRoot, which is
-     * the users' representation of the tree
-     * @param options - The options object that was passed in to LimbleTreeRoot
-     */
-    init(host, data, options, itemsPerPage, page) {
-        this.host = host;
-        this.originalData = data;
-        this.treeOptions = this.processOptions(options, itemsPerPage, page);
-        if (this.treeOptions.listMode === true) {
-            let start = this.treeOptions.itemsPerPage * (this.treeOptions.page - 1);
-            if (isNaN(start)) {
-                //This catches the case where itemsPerPage was not passed by the user,
-                //causing `start` to equal infinity*0, which is NaN.
-                start = 0;
-            }
-            const end = start + this.treeOptions.itemsPerPage;
-            this.treeData = this.originalData.slice(start, end);
-        }
-        else {
-            this.treeData = [...this.originalData];
-        }
-        this.render();
-    }
-    cleanup(rebuild = false) {
-        if (rebuild) {
-            this.rebuildTreeData();
-        }
-        if (this.treeData?.length === 0) {
-            //We do a full render here because it isn't actually any slower
-            //when there are no nodes, and it is a little more straightforward
-            this.render();
-        }
-        else {
-            this.changes$.next(null);
-            this.dropZoneService.update();
-        }
-    }
-    /** Renders the entire tree from root to leaves */
-    render() {
-        if (this.host === undefined ||
-            this.treeData === undefined ||
-            this.treeOptions === undefined) {
-            throw new Error("TreeModel not initialized");
-        }
-        this.treeConstructionStatus.ready(false);
-        this.host.clear();
-        this.dropZoneService.restart();
-        this.placeholder$.next(false);
-        this.treeModel = new Branch(null);
-        if (this.treeData.length === 0) {
-            //Tree is empty, but we have to to have something there so other trees' items can be dropped into it
-            this.placeholder$.next(true);
-        }
-        else {
-            for (const node of this.treeData) {
-                const branch = new Branch(node);
-                this.treeModel.appendChild(branch);
-            }
-            for (const branch of this.treeModel.getChildren()) {
-                const componentRef = this.componentCreatorService.appendComponent(LimbleTreeNodeComponent, this.host);
-                componentRef.instance.branch = branch;
-                componentRef.instance.parentHost = this.host;
-                //The LimbleTreeNodeComponent will (indirectly) call the `renderBranch` method of this service to render
-                //its own children
-            }
-        }
-        this.treeConstructionStatus.ready(true);
-        this.changes$.next(null);
-        this.dropZoneService.init(this.treeModel, this.treeOptions);
-    }
-    /** Renders a branch of the tree and all of its descendants */
-    renderBranch(host, branch) {
-        if (this.treeModel === undefined) {
-            throw new Error("TreeModel not initialized");
-        }
-        host.clear();
-        branch.clearChildren();
-        for (const node of branch.data?.nodes ?? []) {
-            const newBranch = new Branch(node);
-            branch.appendChild(newBranch);
-            const componentRef = this.componentCreatorService.appendComponent(LimbleTreeNodeComponent, host);
-            componentRef.instance.branch = newBranch;
-            componentRef.instance.parentHost = host;
-            //The LimbleTreeNodeComponent will (indirectly) call the `renderBranch` method of this service to render
-            //its own children
-        }
-    }
-    processOptions(options = {}, itemsPerPage = Infinity, page = 1) {
-        if (options.listMode === true &&
-            options.allowNesting !== undefined &&
-            options.allowNesting !== false) {
-            console.warn("The value of `allowNesting` will be ignored; it must be false when `listMode` is true");
-        }
-        const result = {
-            defaultComponent: options.defaultComponent,
-            indent: options.indent ?? INDENT,
-            allowNesting: options.listMode !== true && (options.allowNesting ?? true),
-            allowDragging: options.allowDragging ?? true,
-            allowDrop: options.allowDrop ?? (() => true),
-            listMode: options.listMode ?? false,
-            itemsPerPage: options.listMode ? itemsPerPage : undefined,
-            page: options.listMode ? page : undefined
-        };
-        return result;
-    }
-    rebuildTreeData() {
-        if (this.originalData === undefined ||
-            this.treeData === undefined ||
-            this.treeOptions === undefined ||
-            this.host === undefined) {
-            throw new Error("Tree data not initialized");
-        }
-        this.treeData = [];
-        for (const branch of this.treeModel.getChildren()) {
-            this.treeData.push(this.rebuildBranch(branch));
-        }
-        if (this.treeOptions.listMode === true &&
-            this.treeOptions.itemsPerPage < Infinity) {
-            const itemsPerPage = this.treeOptions.itemsPerPage;
-            const start = itemsPerPage * (this.treeOptions.page - 1);
-            this.originalData.splice(start, itemsPerPage, ...this.treeData);
-            if (this.treeData.length !== itemsPerPage) {
-                let action = false;
-                if (this.treeData.length < itemsPerPage &&
-                    start + itemsPerPage <= this.originalData.length) {
-                    //The current page does not have enough nodes. Add some to the view from the next page.
-                    const count = itemsPerPage - this.treeData.length;
-                    for (let index = itemsPerPage - 1; index < itemsPerPage + count - 1; index++) {
-                        const branch = new Branch(this.originalData[start + index]);
-                        this.treeModel.appendChild(branch);
-                        const componentRef = this.componentCreatorService.appendComponent(LimbleTreeNodeComponent, this.host);
-                        componentRef.instance.branch = branch;
-                        componentRef.instance.parentHost = this.host;
-                    }
-                    action = true;
-                }
-                else if (this.treeData.length > itemsPerPage) {
-                    //The current page has too many nodes. Remove some of them from the view.
-                    const count = this.treeData.length - itemsPerPage;
-                    for (let index = itemsPerPage + count - 1; index >= itemsPerPage; index--) {
-                        this.treeModel.removeChild(index);
-                        this.host.remove(index);
-                    }
-                    action = true;
-                }
-                if (action === true) {
-                    const end = start + itemsPerPage;
-                    this.treeData = this.originalData.slice(start, end);
-                }
-            }
-        }
-        else {
-            this.originalData.length = 0;
-            this.originalData.push(...this.treeData);
-        }
-    }
-    rebuildBranch(branch) {
-        const temp = branch.data;
-        temp.nodes = [];
-        for (const child of branch.getChildren()) {
-            temp.nodes.push(this.rebuildBranch(child));
-        }
-        return temp;
-    }
-}
-TreeService.ɵfac = function TreeService_Factory(t) { return new (t || TreeService)(i0.ɵɵinject(ComponentCreatorService), i0.ɵɵinject(DropZoneService), i0.ɵɵinject(DragStateService), i0.ɵɵinject(TreeConstructionStatus)); };
-TreeService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TreeService, factory: TreeService.ɵfac });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeService, [{
-        type: Injectable
-    }], function () { return [{ type: ComponentCreatorService }, { type: DropZoneService }, { type: DragStateService }, { type: TreeConstructionStatus }]; }, null); })();
+class DropzoneComponent {
+    constructor() {
+        this.dropped = new EventEmitter();
+        this.active = false;
+    }
+    dragenterHandler() {
+        this.active = true;
+    }
+    dragleaveHandler() {
+        this.active = false;
+    }
+    dragoverHandler(event) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+    }
+    dropHandler(event) {
+        this.dropped.emit(event);
+    }
+}
+DropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropzoneComponent, isStandalone: true, selector: "dropzone", inputs: { placement: "placement" }, outputs: { dropped: "dropped" }, ngImport: i0, template: "<div\n   class=\"dropzone\"\n   [ngClass]=\"{ active: active }\"\n   (dragenter)=\"dragenterHandler()\"\n   (dragleave)=\"dragleaveHandler()\"\n   (dragoverNoChangeDetect)=\"dragoverHandler($event)\"\n   (drop)=\"dropHandler($event)\"\n></div>\n", styles: [".dropzone{border-radius:8px;border:1px dashed #727374;background-color:#ededed;height:20px;margin:8px 0;transition:height .2s ease-out;animation:animation .2s ease-out}.dropzone.active{border-color:#289e49;border-width:2px;background-color:#d0e8d6;height:48px}@keyframes animation{0%{height:0px;opacity:0}to{height:20px;opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DragoverNoChangeDetectDirective, selector: "[dragoverNoChangeDetect]", inputs: ["dragoverEventThrottle"], outputs: ["dragoverNoChangeDetect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropzoneComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "dropzone", imports: [CommonModule, DragoverNoChangeDetectDirective], template: "<div\n   class=\"dropzone\"\n   [ngClass]=\"{ active: active }\"\n   (dragenter)=\"dragenterHandler()\"\n   (dragleave)=\"dragleaveHandler()\"\n   (dragoverNoChangeDetect)=\"dragoverHandler($event)\"\n   (drop)=\"dropHandler($event)\"\n></div>\n", styles: [".dropzone{border-radius:8px;border:1px dashed #727374;background-color:#ededed;height:20px;margin:8px 0;transition:height .2s ease-out;animation:animation .2s ease-out}.dropzone.active{border-color:#289e49;border-width:2px;background-color:#d0e8d6;height:48px}@keyframes animation{0%{height:0px;opacity:0}to{height:20px;opacity:1}}\n"] }]
+        }], propDecorators: { placement: [{
+                type: Input
+            }], dropped: [{
+                type: Output
+            }] } });
 
-class DragoverNoChangeDetectDirective {
-    constructor(ngZone, el) {
-        this.ngZone = ngZone;
-        this.el = el;
-        this.dragoverNoChangeDetect = new EventEmitter();
-        this.dragoverEventThrottle = 25;
-    }
-    ngOnInit() {
-        this.ngZone.runOutsideAngular(() => {
-            this.eventSubscription = fromEvent(this.el.nativeElement, "dragover")
-                .pipe(throttleTime(this.dragoverEventThrottle))
-                .subscribe(($event) => {
-                this.dragoverNoChangeDetect.emit($event);
-            });
-        });
-    }
-    ngOnDestroy() {
-        if (this.eventSubscription !== undefined) {
-            this.eventSubscription.unsubscribe();
-        }
-    }
-}
-DragoverNoChangeDetectDirective.ɵfac = function DragoverNoChangeDetectDirective_Factory(t) { return new (t || DragoverNoChangeDetectDirective)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-DragoverNoChangeDetectDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DragoverNoChangeDetectDirective, selectors: [["", "dragoverNoChangeDetect", ""]], inputs: { dragoverEventThrottle: "dragoverEventThrottle" }, outputs: { dragoverNoChangeDetect: "dragoverNoChangeDetect" } });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DragoverNoChangeDetectDirective, [{
-        type: Directive,
-        args: [{
-                selector: "[dragoverNoChangeDetect]"
-            }]
-    }], function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, { dragoverEventThrottle: [{
-            type: Input
-        }], dragoverNoChangeDetect: [{
-            type: Output
-        }] }); })();
+class BranchComponent {
+    constructor(appRef) {
+        this.appRef = appRef;
+        this.branchesContainer = undefined;
+        this.contentContainer = undefined;
+        this.dropzones = undefined;
+        this.contentCreated = new EventEmitter();
+        this.showDropzones = new EventEmitter();
+        this.dropped = new EventEmitter();
+        this.showInnerDropzone = false;
+        this.showLateralDropzone = false;
+    }
+    ngAfterViewInit() {
+        assert(this.contentContainer !== undefined);
+        assert(this.contentToHost !== undefined);
+        this.hostedContent = this.contentContainer.createComponent(this.contentToHost);
+        this.contentCreated.emit(this.hostedContent.instance);
+        assert(this.dropzones !== undefined);
+        const inner = this.dropzones.get(0);
+        const lateral = this.dropzones.get(1);
+        assert(inner !== undefined && lateral !== undefined);
+        merge(inner.dropped.pipe(map(() => "inner")), lateral.dropped.pipe(map(() => "lateral"))).subscribe(this.dropped);
+        this.hostedContent.changeDetectorRef.detectChanges();
+    }
+    getHostedContent() {
+        return this.hostedContent;
+    }
+    triggerChangeDetection() {
+        if (!NgZone.isInAngularZone()) {
+            this.appRef.tick();
+        }
+    }
+    dragoverHandler(event) {
+        const elementHeight = event.currentTarget.getBoundingClientRect().height;
+        if (event.offsetY < elementHeight / 2) {
+            this.showDropzones.emit("upper");
+        }
+        else {
+            this.showDropzones.emit("lower");
+        }
+    }
+    ngOnDestroy() {
+        //I'm not 100% sure why, but we have to remove any reference to the
+        //componentRef otherwise Angular will never release it for garbage
+        //collection.
+        this.hostedContent = undefined;
+    }
+}
+BranchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BranchComponent, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component });
+BranchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BranchComponent, isStandalone: true, selector: "branch", inputs: { contentToHost: "contentToHost" }, outputs: { contentCreated: "contentCreated", showDropzones: "showDropzones", dropped: "dropped" }, viewQueries: [{ propertyName: "branchesContainer", first: true, predicate: ["branchesContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dropzones", predicate: DropzoneComponent, descendants: true }], ngImport: i0, template: "<div class=\"content\" (dragoverNoChangeDetect)=\"dragoverHandler($event)\">\n   <div #contentContainer></div>\n</div>\n<div class=\"branches-container\">\n   <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n   <div #branchesContainer></div>\n</div>\n<dropzone placement=\"lateral\" [hidden]=\"!showLateralDropzone\"></dropzone>\n", styles: [".branches-container{margin-left:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropzoneComponent, selector: "dropzone", inputs: ["placement"], outputs: ["dropped"] }, { kind: "directive", type: DragoverNoChangeDetectDirective, selector: "[dragoverNoChangeDetect]", inputs: ["dragoverEventThrottle"], outputs: ["dragoverNoChangeDetect"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BranchComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "branch", imports: [CommonModule, DropzoneComponent, DragoverNoChangeDetectDirective], template: "<div class=\"content\" (dragoverNoChangeDetect)=\"dragoverHandler($event)\">\n   <div #contentContainer></div>\n</div>\n<div class=\"branches-container\">\n   <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n   <div #branchesContainer></div>\n</div>\n<dropzone placement=\"lateral\" [hidden]=\"!showLateralDropzone\"></dropzone>\n", styles: [".branches-container{margin-left:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }]; }, propDecorators: { branchesContainer: [{
+                type: ViewChild,
+                args: ["branchesContainer", { read: ViewContainerRef }]
+            }], contentContainer: [{
+                type: ViewChild,
+                args: ["contentContainer", { read: ViewContainerRef }]
+            }], dropzones: [{
+                type: ViewChildren,
+                args: [DropzoneComponent]
+            }], contentToHost: [{
+                type: Input
+            }], contentCreated: [{
+                type: Output
+            }], showDropzones: [{
+                type: Output
+            }], dropped: [{
+                type: Output
+            }] } });
 
-class LimbleTreePlaceholderComponent {
-    constructor(dropZoneService, changeDetectorRef, treeService, treeConstructionStatus) {
-        this.dropZoneService = dropZoneService;
-        this.changeDetectorRef = changeDetectorRef;
-        this.treeService = treeService;
-        this.treeConstructionStatus = treeConstructionStatus;
-        this.treeConstructionStatus.constructing();
-        //This logic is very similar to what the lifecycle hooks of this component do.
-        //We use this subscription because sometimes we can't wait for the lifecycle hooks:
-        //Specifically, the drop zone registration and deregistration sometimes can't happen
-        //asynchronously without causing bugs. So we handle it synchronously here as well.
-        this.placeholderSubscription = this.treeService.placeholder$.subscribe((value) => {
-            if (this.dropZone === undefined) {
-                return;
-            }
-            this.dropZoneService.removeDropZone(this.dropZone);
-            if (value === true) {
-                this.dropZoneService.addDropZone(this.dropZone);
-                this.dropZone.setHost(this.treeService.host);
-            }
-        });
-    }
-    ngOnInit() {
-        this.dropZone = new DropZone([], 0);
-        this.dropZoneService.addDropZone(this.dropZone);
-    }
-    ngAfterViewInit() {
-        if (this.dropZone === undefined) {
-            throw new Error("placeholder drop zone is not defined");
-        }
-        this.dropZone.setHost(this.treeService.host);
-        this.treeConstructionStatus.doneConstructing();
-        this.changeDetectorRef.detectChanges();
-    }
-    dragoverHandler() {
-        if (this.dropZone === undefined) {
-            return;
-        }
-        this.dropZoneService.showDropZoneFamily(this.dropZone);
-    }
-    ngOnDestroy() {
-        this.placeholderSubscription.unsubscribe();
-        if (this.dropZone === undefined) {
-            throw new Error("could not remove placeholder drop zone");
-        }
-        this.dropZoneService.removeDropZone(this.dropZone);
-    }
-}
-LimbleTreePlaceholderComponent.ɵfac = function LimbleTreePlaceholderComponent_Factory(t) { return new (t || LimbleTreePlaceholderComponent)(i0.ɵɵdirectiveInject(DropZoneService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(TreeService), i0.ɵɵdirectiveInject(TreeConstructionStatus)); };
-LimbleTreePlaceholderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LimbleTreePlaceholderComponent, selectors: [["limble-tree-placeholder"]], decls: 2, vars: 1, consts: [[3, "dropZone"], [1, "placeholder", 3, "dragoverNoChangeDetect"]], template: function LimbleTreePlaceholderComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelement(0, "drop-zone", 0);
-        i0.ɵɵelementStart(1, "div", 1);
-        i0.ɵɵlistener("dragoverNoChangeDetect", function LimbleTreePlaceholderComponent_Template_div_dragoverNoChangeDetect_1_listener() { return ctx.dragoverHandler(); });
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("dropZone", ctx.dropZone);
-    } }, dependencies: [DropZoneComponent, DragoverNoChangeDetectDirective], styles: [".placeholder[_ngcontent-%COMP%]{width:100%;height:20px}"], changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreePlaceholderComponent, [{
-        type: Component,
-        args: [{ selector: "limble-tree-placeholder", changeDetection: ChangeDetectionStrategy.OnPush, template: "<drop-zone [dropZone]=\"dropZone\"></drop-zone>\n<div class=\"placeholder\" (dragoverNoChangeDetect)=\"dragoverHandler()\"></div>\n", styles: [".placeholder{width:100%;height:20px}\n"] }]
-    }], function () { return [{ type: DropZoneService }, { type: i0.ChangeDetectorRef }, { type: TreeService }, { type: TreeConstructionStatus }]; }, null); })();
+class GraftEvent {
+    constructor(source, relationship) {
+        this._source = source;
+        this._child = relationship.child;
+        this._parent = relationship.parent;
+        this._index = relationship.index;
+    }
+    child() {
+        return this._child;
+    }
+    type() {
+        return "graft";
+    }
+    index() {
+        return this._index;
+    }
+    parent() {
+        return this._parent;
+    }
+    source() {
+        return this._source;
+    }
+}
 
-class DragleaveNoChangeDetectDirective {
-    constructor(ngZone, el) {
-        this.ngZone = ngZone;
-        this.el = el;
-        this.dragleaveNoChangeDetect = new EventEmitter();
-    }
-    ngOnInit() {
-        this.ngZone.runOutsideAngular(() => {
-            this.eventSubscription = fromEvent(this.el.nativeElement, "dragleave").subscribe(($event) => {
-                this.dragleaveNoChangeDetect.emit($event);
-            });
-        });
-    }
-    ngOnDestroy() {
-        if (this.eventSubscription !== undefined) {
-            this.eventSubscription.unsubscribe();
-        }
-    }
-}
-DragleaveNoChangeDetectDirective.ɵfac = function DragleaveNoChangeDetectDirective_Factory(t) { return new (t || DragleaveNoChangeDetectDirective)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-DragleaveNoChangeDetectDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DragleaveNoChangeDetectDirective, selectors: [["", "dragleaveNoChangeDetect", ""]], outputs: { dragleaveNoChangeDetect: "dragleaveNoChangeDetect" } });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DragleaveNoChangeDetectDirective, [{
-        type: Directive,
-        args: [{
-                selector: "[dragleaveNoChangeDetect]"
-            }]
-    }], function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, { dragleaveNoChangeDetect: [{
-            type: Output
-        }] }); })();
+class PruneEvent {
+    constructor(source, relationship) {
+        this._source = source;
+        this._child = relationship.child;
+        this._parent = relationship.parent;
+        this._index = relationship.index;
+    }
+    child() {
+        return this._child;
+    }
+    type() {
+        return "prune";
+    }
+    index() {
+        return this._index;
+    }
+    parent() {
+        return this._parent;
+    }
+    source() {
+        return this._source;
+    }
+}
 
-const _c0 = ["host"];
-function LimbleTreeRootComponent_limble_tree_placeholder_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "limble-tree-placeholder");
-} }
-function LimbleTreeRootComponent_ng_template_2_Template(rf, ctx) { }
-class LimbleTreeRootComponent {
-    constructor(treeService, dropZoneService, dragStateService, globalEventsService, ngZone, changeDetectorRef, el) {
-        this.treeService = treeService;
-        this.dropZoneService = dropZoneService;
-        this.dragStateService = dragStateService;
-        this.globalEventsService = globalEventsService;
-        this.ngZone = ngZone;
-        this.changeDetectorRef = changeDetectorRef;
-        this.el = el;
-        this.treeChange = new EventEmitter();
-        this.treeDrop = new EventEmitter();
-        this.changesSubscription = this.treeService.changes$.subscribe(() => {
-            //"In dev mode, Angular performs an additional check after each change
-            //detection run, to ensure the bindings haven’t changed." We use a timeout here
-            //to preclude the possibility of causing a binding to update in the parent
-            //component after change detection runs but before the additional check.
-            //See https://angular.io/errors/NG0100 for details.
-            setTimeout(() => {
-                this.treeChange.emit();
-            });
-        });
-        this.dropSubscription = this.treeService.drops$.subscribe((drop) => {
-            setTimeout(() => {
-                this.treeDrop.emit(drop);
-            });
-        });
-        this.placeholder = false;
-        this.treeService.placeholder$.subscribe((value) => {
-            this.placeholder = value;
-            if (!NgZone.isInAngularZone()) {
-                this.changeDetectorRef.detectChanges();
-            }
-        });
-    }
-    ngAfterViewInit() {
-        if (this.options?.listMode !== true &&
-            (this.itemsPerPage !== undefined || this.page !== undefined)) {
-            console.warn("pagination is only allowed in listMode; `itemsPerPage` and `page` inputs will be ignored");
-        }
-        this.update();
-        this.changeDetectorRef.detectChanges();
-        this.ngZone.runOutsideAngular(() => {
-            //this is for mac os - without this dragover handler drop events aren't firing correctly
-            this.el.nativeElement.addEventListener("dragover", (event) => {
-                event.preventDefault();
-            });
-        });
-    }
-    ngOnChanges() {
-        if (this.host !== undefined && this.data !== undefined) {
-            this.update();
-        }
-    }
-    /** Rebuild the tree */
-    update() {
-        if (this.host === undefined) {
-            throw new Error("Failed to render limble tree. Failure occurred at root.");
-        }
-        if (this.data === undefined) {
-            throw new Error(`limbleTree requires a data object`);
-        }
-        this.treeService.init(this.host, this.data, this.options, this.itemsPerPage, this.page);
-        //We check for firefox here because there is a bug in Firefox that causes the
-        //custom scrolling to break. See https://bugzilla.mozilla.org/show_bug.cgi?id=505521#c80
-        if (!isFirefox()) {
-            this.globalEventsService.addScrolling();
-        }
-    }
-    dragoverHandler(event) {
-        if (event.dataTransfer === null) {
-            return;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-        event.dataTransfer.dropEffect = "move";
-    }
-    dragleaveHandler(event) {
-        const currentTarget = event.currentTarget;
-        const relatedTarget = event.relatedTarget;
-        if (!(currentTarget instanceof Node) ||
-            !(relatedTarget instanceof Node) ||
-            isElementDescendant(currentTarget, relatedTarget) !== false) {
-            //event came from deeper in the tree. Ignore it.
-            return;
-        }
-        //Mouse has left the tree, so clear the drop zones
-        this.dropZoneService.clearVisibleZones();
-        this.changeDetectorRef.detectChanges();
-    }
-    dropHandler(event) {
-        event.stopPropagation();
-        if (this.dragStateService.getState() !== "droppable") {
-            return;
-        }
-        const sourceBranch = this.dragStateService.capture();
-        if (sourceBranch === undefined) {
-            throw new Error("failed to get current branch in dragendHandler");
-        }
-        const dropZone = this.dropZoneService.getActiveDropZone();
-        if (dropZone === null) {
-            throw new Error("failed to get active drop zone at drop handler");
-        }
-        this.treeService.captured = true;
-        this.dragStateService.state$
-            .pipe(first((message) => message === "idle"))
-            .subscribe(() => {
-            this.treeService.captured = false;
-        });
-        this.dropZoneService.clearVisibleZones();
-        this.treeService.drop(sourceBranch, dropZone.getFullInsertCoordinates());
-    }
-    ngOnDestroy() {
-        this.changesSubscription.unsubscribe();
-        this.dropSubscription.unsubscribe();
-    }
-}
-LimbleTreeRootComponent.ɵfac = function LimbleTreeRootComponent_Factory(t) { return new (t || LimbleTreeRootComponent)(i0.ɵɵdirectiveInject(TreeService), i0.ɵɵdirectiveInject(DropZoneService), i0.ɵɵdirectiveInject(DragStateService), i0.ɵɵdirectiveInject(GlobalEventsService), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-LimbleTreeRootComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LimbleTreeRootComponent, selectors: [["limble-tree-root"]], viewQuery: function LimbleTreeRootComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 5, ViewContainerRef);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.host = _t.first);
-    } }, inputs: { data: "data", options: "options", itemsPerPage: "itemsPerPage", page: "page" }, outputs: { treeChange: "treeChange", treeDrop: "treeDrop" }, features: [i0.ɵɵProvidersFeature([TreeService, DropZoneService, TreeConstructionStatus]), i0.ɵɵNgOnChangesFeature], decls: 4, vars: 1, consts: [[1, "tree-event-host", 3, "dragoverNoChangeDetect", "dragleaveNoChangeDetect", "drop"], [4, "ngIf"], ["host", ""]], template: function LimbleTreeRootComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵlistener("dragoverNoChangeDetect", function LimbleTreeRootComponent_Template_div_dragoverNoChangeDetect_0_listener($event) { return ctx.dragoverHandler($event); })("dragleaveNoChangeDetect", function LimbleTreeRootComponent_Template_div_dragleaveNoChangeDetect_0_listener($event) { return ctx.dragleaveHandler($event); })("drop", function LimbleTreeRootComponent_Template_div_drop_0_listener($event) { return ctx.dropHandler($event); });
-        i0.ɵɵtemplate(1, LimbleTreeRootComponent_limble_tree_placeholder_1_Template, 1, 0, "limble-tree-placeholder", 1);
-        i0.ɵɵtemplate(2, LimbleTreeRootComponent_ng_template_2_Template, 0, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.placeholder === true);
-    } }, dependencies: [i2.NgIf, LimbleTreePlaceholderComponent, DragoverNoChangeDetectDirective, DragleaveNoChangeDetectDirective] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeRootComponent, [{
-        type: Component,
-        args: [{ selector: "limble-tree-root", providers: [TreeService, DropZoneService, TreeConstructionStatus], template: "<div\n   (dragoverNoChangeDetect)=\"dragoverHandler($event)\"\n   (dragleaveNoChangeDetect)=\"dragleaveHandler($event)\"\n   (drop)=\"dropHandler($event)\"\n   class=\"tree-event-host\"\n>\n   <limble-tree-placeholder\n      *ngIf=\"placeholder === true\"\n   ></limble-tree-placeholder>\n   <ng-template #host></ng-template>\n</div>\n" }]
-    }], function () { return [{ type: TreeService }, { type: DropZoneService }, { type: DragStateService }, { type: GlobalEventsService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, { data: [{
-            type: Input
-        }], options: [{
-            type: Input
-        }], itemsPerPage: [{
-            type: Input
-        }], page: [{
-            type: Input
-        }], host: [{
-            type: ViewChild,
-            args: ["host", { read: ViewContainerRef }]
-        }], treeChange: [{
-            type: Output
-        }], treeDrop: [{
-            type: Output
-        }] }); })();
+class TreeNodeBase {
+    constructor() {
+        this.destroyed = false;
+        this._branches = [];
+        this.events$ = new Subject();
+        this.subscriptions = [
+            this.graftsToSelf().subscribe((event) => {
+                this.registerChildRelationship(event.child(), event.index());
+            }),
+            this.prunesToSelf().subscribe((event) => {
+                this.deregisterChildRelationship(event.child());
+            })
+        ];
+    }
+    branches() {
+        return [...this._branches];
+    }
+    destroy() {
+        this.branches().forEach((branch) => {
+            branch.destroy();
+        });
+        this.subscriptions.forEach((sub) => {
+            sub.unsubscribe();
+        });
+        this.destroyed = true;
+    }
+    dispatch(event) {
+        this.events$.next(event);
+    }
+    events() {
+        return this.events$;
+    }
+    getBranch(index) {
+        return this._branches[index];
+    }
+    isDestroyed() {
+        return this.destroyed;
+    }
+    plot() {
+        return new Map(this.branches().map((branch, index) => [index, branch.plot()]));
+    }
+    traverse(callback) {
+        this.branches().forEach((branch) => {
+            branch.traverse(callback);
+        });
+    }
+    deregisterChildRelationship(child) {
+        const index = this.branches().findIndex((branch) => branch === child);
+        this._branches.splice(index, 1);
+    }
+    graftsToSelf() {
+        return this.events().pipe(filter((event) => event instanceof GraftEvent), filter((event) => event.parent().events() === this.events$));
+    }
+    prunesToSelf() {
+        return this.events().pipe(filter((event) => event instanceof PruneEvent), filter((event) => event.parent().events() === this.events$));
+    }
+    registerChildRelationship(child, index) {
+        const branches = this.branches();
+        if (index < 0 || index > branches.length) {
+            throw new TreeError(`Can't register child at index ${index}. Out of range.`);
+        }
+        this._branches.splice(index, 0, child);
+    }
+}
+
+class DestructionEvent {
+    constructor(source) {
+        this._source = source;
+    }
+    type() {
+        return "destruction";
+    }
+    source() {
+        return this._source;
+    }
+}
 
-class LimbleTreeModule {
-}
-LimbleTreeModule.ɵfac = function LimbleTreeModule_Factory(t) { return new (t || LimbleTreeModule)(); };
-LimbleTreeModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: LimbleTreeModule });
-LimbleTreeModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [ComponentCreatorService, DragStateService, GlobalEventsService], imports: [CommonModule] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LimbleTreeModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [
-                    LimbleTreeBranchComponent,
-                    DropZoneComponent,
-                    LimbleTreeNodeComponent,
-                    LimbleTreeRootComponent,
-                    LimbleTreePlaceholderComponent,
-                    DragoverNoChangeDetectDirective,
-                    DragleaveNoChangeDetectDirective
-                ],
-                imports: [CommonModule],
-                exports: [LimbleTreeRootComponent],
-                providers: [ComponentCreatorService, DragStateService, GlobalEventsService]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(LimbleTreeModule, { declarations: [LimbleTreeBranchComponent,
-        DropZoneComponent,
-        LimbleTreeNodeComponent,
-        LimbleTreeRootComponent,
-        LimbleTreePlaceholderComponent,
-        DragoverNoChangeDetectDirective,
-        DragleaveNoChangeDetectDirective], imports: [CommonModule], exports: [LimbleTreeRootComponent] }); })();
-i0.ɵɵsetComponentScope(LimbleTreeNodeComponent, [i2.NgIf, LimbleTreeBranchComponent,
-    DropZoneComponent,
-    DragoverNoChangeDetectDirective], []);
+class RootComponent {
+    constructor() {
+        this.branchesContainer = undefined;
+        this.dropzone = undefined;
+        this.afterViewInit = new EventEmitter();
+        this.dropped = new EventEmitter();
+        this.showInnerDropzone = false;
+    }
+    ngAfterViewInit() {
+        this.afterViewInit.emit();
+        assert(this.dropzone !== undefined);
+        this.dropzone.dropped.subscribe(this.dropped);
+    }
+}
+RootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RootComponent, isStandalone: true, selector: "root", outputs: { afterViewInit: "afterViewInit", dropped: "dropped" }, viewQueries: [{ propertyName: "branchesContainer", first: true, predicate: ["branchesContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dropzone", first: true, predicate: DropzoneComponent, descendants: true }], ngImport: i0, template: "<div class=\"branches-container\">\n   <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n   <div #branchesContainer></div>\n</div>\n", styles: [".branches-container{min-width:64px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropzoneComponent, selector: "dropzone", inputs: ["placement"], outputs: ["dropped"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RootComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "root", imports: [CommonModule, DropzoneComponent], template: "<div class=\"branches-container\">\n   <dropzone placement=\"inner\" [hidden]=\"!showInnerDropzone\"></dropzone>\n   <div #branchesContainer></div>\n</div>\n", styles: [".branches-container{min-width:64px}\n"] }]
+        }], propDecorators: { branchesContainer: [{
+                type: ViewChild,
+                args: ["branchesContainer", { read: ViewContainerRef }]
+            }], dropzone: [{
+                type: ViewChild,
+                args: [DropzoneComponent]
+            }], afterViewInit: [{
+                type: Output
+            }], dropped: [{
+                type: Output
+            }] } });
+
+/**
+ * A wrapper around the BranchComponent that helps instantiate it and handles its events.
+ */
+class RootController {
+    constructor(treeRoot, viewContainerRef) {
+        this.treeRoot = treeRoot;
+        this.rootComponentRef = viewContainerRef.createComponent(RootComponent);
+        const viewInitSub = this.rootComponentRef.instance.afterViewInit.subscribe(() => {
+            const dropzone = this.rootComponentRef.instance.dropzone;
+            assert(dropzone !== undefined);
+            dropzoneRenderer.registerDropzone(dropzone, this.treeRoot);
+        });
+        const droppedSub = this.rootComponentRef.instance.dropped.subscribe(() => {
+            dropzoneRenderer.handleDrop(this.treeRoot, "inner");
+        });
+        this.instanceSubscriptions = [viewInitSub, droppedSub];
+    }
+    destroy() {
+        this.instanceSubscriptions.forEach((sub) => {
+            sub.unsubscribe();
+        });
+    }
+    detectChanges() {
+        this.rootComponentRef.changeDetectorRef.detectChanges();
+    }
+    getBranchesContainer() {
+        return this.rootComponentRef.instance.branchesContainer;
+    }
+    getComponentInstance() {
+        return this.rootComponentRef.instance;
+    }
+    getHostView() {
+        return this.rootComponentRef.hostView;
+    }
+    getNativeElement() {
+        return this.rootComponentRef.location.nativeElement;
+    }
+}
+
+class TreeRoot {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.treeNodeBase = new TreeNodeBase();
+        this.rootController = new RootController(this, viewContainerRef);
+        this.detectChanges();
+    }
+    branches() {
+        return this.treeNodeBase.branches();
+    }
+    destroy() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot destroy a destroyed tree root");
+        }
+        dropzoneRenderer.clearTreeFromRegistry(this);
+        this.treeNodeBase.destroy();
+        this.rootController.destroy();
+        this.viewContainerRef.clear();
+        config.delete(this);
+        this.dispatch(new DestructionEvent(this));
+    }
+    detectChanges() {
+        this.rootController.detectChanges();
+    }
+    dispatch(event) {
+        this.treeNodeBase.dispatch(event);
+    }
+    events() {
+        return this.treeNodeBase.events();
+    }
+    getBranch(index) {
+        return this.treeNodeBase.getBranch(index);
+    }
+    getBranchesContainer() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get branches container from a destroyed tree root");
+        }
+        return this.rootController.getBranchesContainer();
+    }
+    getComponentInstance() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get component instance from a destroyed tree root");
+        }
+        return this.rootController.getComponentInstance();
+    }
+    getHostView() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get component host view from a destroyed tree root");
+        }
+        return this.rootController.getHostView();
+    }
+    getNativeElement() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get native element from a destroyed tree root");
+        }
+        return this.rootController.getNativeElement();
+    }
+    grow(component, options) {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot grow a branch on a destroyed tree root");
+        }
+        return new TreeBranch(this, { component, ...options });
+    }
+    isDestroyed() {
+        return this.treeNodeBase.isDestroyed();
+    }
+    plot() {
+        return this.treeNodeBase.plot();
+    }
+    root() {
+        return this;
+    }
+    traverse(callback) {
+        callback(this);
+        this.treeNodeBase.traverse(callback);
+    }
+}
+
+class TreeService {
+    createEmptyTree(container, options = {}) {
+        container.clear();
+        const root = new TreeRoot(container);
+        config.setConfig(root, options);
+        return root;
+    }
+}
+TreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+/**
+ * A wrapper around the BranchComponent that helps instantiate it and handles its events.
+ */
+class BranchController {
+    constructor(treeBranch, parentBranchesContainer) {
+        this.treeBranch = treeBranch;
+        this.outputBindingSubscriptions = [];
+        this.branchComponentRef = createComponent(BranchComponent, {
+            environmentInjector: parentBranchesContainer.injector.get(EnvironmentInjector)
+        });
+        this.branchComponentRef.instance.contentToHost =
+            this.treeBranch.branchOptions.component;
+        this.instanceSubscriptions = this.getInstanceSubscriptions(this.branchComponentRef.instance);
+    }
+    destroy() {
+        this.instanceSubscriptions.forEach((sub) => {
+            sub.unsubscribe();
+        });
+        this.outputBindingSubscriptions.forEach((sub) => {
+            sub.unsubscribe();
+        });
+    }
+    detectChanges() {
+        this.branchComponentRef.changeDetectorRef.detectChanges();
+    }
+    getBranchesContainer() {
+        return this.branchComponentRef.instance.branchesContainer;
+    }
+    getComponentInstance() {
+        return this.branchComponentRef.instance;
+    }
+    getHostView() {
+        return this.branchComponentRef.hostView;
+    }
+    getNativeElement() {
+        return this.branchComponentRef.location.nativeElement;
+    }
+    getUserlandComponentRef() {
+        return this.branchComponentRef.instance.getHostedContent();
+    }
+    getContentCreatedSub(instance) {
+        return instance.contentCreated.subscribe((userlandComponentInstance) => {
+            const component = userlandComponentInstance;
+            Object.entries(this.treeBranch.branchOptions.inputBindings ?? {}).forEach(([key, value]) => {
+                component[key] = value;
+            });
+            Object.entries(this.treeBranch.branchOptions.outputBindings ?? {}).forEach(([key, value]) => {
+                this.outputBindingSubscriptions.push(component[key].subscribe(value));
+            });
+            component.treeBranch = this.treeBranch;
+            const dropzones = instance.dropzones;
+            assert(dropzones !== undefined);
+            dropzoneRenderer.registerDropzones(dropzones, this.treeBranch);
+        });
+    }
+    getInstanceSubscriptions(instance) {
+        const droppedSub = instance.dropped.subscribe((placement) => {
+            dropzoneRenderer.handleDrop(this.treeBranch, placement);
+        });
+        return [
+            this.getContentCreatedSub(instance),
+            this.getShowLowerZonesSub(instance),
+            this.getShowUpperZonesSub(instance),
+            droppedSub
+        ];
+    }
+    getShowLowerZonesSub(instance) {
+        return instance.showDropzones
+            .pipe(filter((direction) => direction === "lower"))
+            .subscribe(() => {
+            const currentDropzoneDisplayed = dropzoneRenderer.getCurrentDisplay();
+            if (currentDropzoneDisplayed?.treeBranch === this.treeBranch &&
+                currentDropzoneDisplayed.direction === "lower") {
+                return;
+            }
+            dropzoneRenderer.showLowerZones(this.treeBranch);
+            instance.triggerChangeDetection();
+        });
+    }
+    getShowUpperZonesSub(instance) {
+        return instance.showDropzones
+            .pipe(filter((direction) => direction === "upper"))
+            .subscribe(() => {
+            const currentDropzoneDisplayed = dropzoneRenderer.getCurrentDisplay();
+            if (currentDropzoneDisplayed?.treeBranch === this.treeBranch &&
+                currentDropzoneDisplayed.direction === "upper") {
+                return;
+            }
+            dropzoneRenderer.showUpperZones(this.treeBranch);
+            instance.triggerChangeDetection();
+        });
+    }
+}
+
+class TreeBranch {
+    constructor(parent, branchOptions) {
+        this.branchOptions = branchOptions;
+        this.detachedView = null;
+        this.treeNodeBase = new TreeNodeBase();
+        const parentBranchesContainer = parent.getBranchesContainer();
+        assert(parentBranchesContainer !== undefined);
+        this.branchController = new BranchController(this, parentBranchesContainer);
+        this.setIndentation(parent);
+        if (parent instanceof TreeBranch &&
+            parent.branchOptions.defaultCollapsed === true) {
+            treeCollapser.storePrecollapsedNode(parent, this);
+            this.detachedView = this.branchController.getHostView();
+        }
+        else {
+            parentBranchesContainer.insert(this.branchController.getHostView());
+            this.detectChanges();
+            this._parent = parent;
+            this.dispatch(new GraftEvent(this, {
+                parent: this._parent,
+                child: this,
+                index: this._parent.branches().length
+            }));
+        }
+    }
+    branches() {
+        return this.treeNodeBase.branches();
+    }
+    destroy() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot destroy a destroyed tree branch");
+        }
+        this.prune();
+        treeCollapser.expand(this);
+        dropzoneRenderer.clearTreeFromRegistry(this);
+        this.branchController.getHostView().destroy();
+        this.treeNodeBase.destroy();
+        this.branchController.destroy();
+        this.dispatch(new DestructionEvent(this));
+    }
+    detectChanges() {
+        this.branchController.detectChanges();
+    }
+    dispatch(event) {
+        this.treeNodeBase.dispatch(event);
+        this._parent?.dispatch(event);
+    }
+    events() {
+        return this.treeNodeBase.events();
+    }
+    getBranch(index) {
+        return this.treeNodeBase.getBranch(index);
+    }
+    getBranchesContainer() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get branches container from a destroyed tree branch");
+        }
+        return this.branchController.getBranchesContainer();
+    }
+    getComponentInstance() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get component instance from a destroyed tree branch");
+        }
+        return this.branchController.getComponentInstance();
+    }
+    getHostView() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get component host view from a destroyed tree branch");
+        }
+        return this.branchController.getHostView();
+    }
+    getNativeElement() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get native element from a destroyed tree branch");
+        }
+        return this.branchController.getNativeElement();
+    }
+    getUserlandComponentRef() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot get userland component from a destroyed tree branch");
+        }
+        return this.branchController.getUserlandComponentRef();
+    }
+    graftTo(newParent, index) {
+        this.checkGraftLocationValidity(newParent, index);
+        const ownIndex = this.index();
+        if (ownIndex !== undefined) {
+            this.prune();
+        }
+        this._parent = newParent;
+        const newIndex = index ?? newParent.branches().length;
+        this.reattachView(newIndex);
+        this.dispatch(new GraftEvent(this, {
+            parent: newParent,
+            child: this,
+            index: newIndex
+        }));
+        return newIndex;
+    }
+    grow(component, options) {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot grow a branch on a destroyed tree branch");
+        }
+        return new TreeBranch(this, { component, ...options });
+    }
+    index() {
+        if (!this._parent) {
+            return undefined;
+        }
+        const index = this._parent
+            .branches()
+            .findIndex((branch) => branch === this);
+        assert(index >= 0);
+        return index;
+    }
+    isDestroyed() {
+        return this.treeNodeBase.isDestroyed();
+    }
+    meta() {
+        return this.branchOptions.meta ?? {};
+    }
+    parent() {
+        return this._parent;
+    }
+    plot() {
+        return this.treeNodeBase.plot();
+    }
+    position() {
+        const index = this.index();
+        if (index === undefined) {
+            throw new TreeError("branch has no parent. Position cannot be determined.");
+        }
+        if (this._parent instanceof TreeBranch) {
+            const parentPosition = this._parent.position();
+            return [...parentPosition, index];
+        }
+        return [index];
+    }
+    prune() {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot prune a destroyed tree branch");
+        }
+        const parent = this._parent;
+        const index = this.index();
+        if (index === undefined || parent === undefined)
+            return;
+        const container = parent.getBranchesContainer();
+        assert(container !== undefined);
+        this.detachedView = container.detach(index);
+        assert(this.detachedView !== null);
+        this.detachedView.detach();
+        this.dispatch(new PruneEvent(this, {
+            parent: parent,
+            child: this,
+            index: index
+        }));
+        this._parent = undefined;
+        return this;
+    }
+    root() {
+        const parent = this.parent();
+        if (parent instanceof TreeBranch) {
+            return parent.root();
+        }
+        assert(parent instanceof TreeRoot || parent === undefined);
+        return parent;
+    }
+    traverse(callback) {
+        callback(this);
+        this.treeNodeBase.traverse(callback);
+    }
+    checkGraftLocationValidity(newParent, index) {
+        if (this.isDestroyed()) {
+            throw new TreeError("Cannot graft a destroyed tree branch");
+        }
+        if (newParent.isDestroyed()) {
+            throw new TreeError("Cannot graft to a destroyed tree branch");
+        }
+        if (typeof index === "number" &&
+            this.indexIsOutOfRange(newParent, index)) {
+            throw new TreeError(`Cannot graft branch at index ${index} of the parent. Out of range.`);
+        }
+        this.traverse((node) => {
+            if (node === newParent) {
+                throw new TreeError("Cannot graft a branch to itself or any of its own descendants");
+            }
+        });
+    }
+    indexIsOutOfRange(parent, index) {
+        return index < 0 || index > parent.branches().length;
+    }
+    reattachView(index) {
+        assert(this._parent !== undefined);
+        assert(this.detachedView !== null);
+        const container = this._parent.getBranchesContainer();
+        assert(container !== undefined);
+        this.detachedView.reattach();
+        container.insert(this.detachedView, index);
+        this.detachedView = null;
+    }
+    setIndentation(parent) {
+        const root = parent.root();
+        assert(root !== undefined);
+        const options = config.getConfig(root);
+        const branchesContainerEl = this.branchController
+            .getNativeElement()
+            .getElementsByClassName("branches-container")
+            .item(0);
+        assert(branchesContainerEl instanceof HTMLElement);
+        branchesContainerEl.style.marginLeft = `${options?.indentation ?? 16}px`;
+    }
+}
+
+class DropzoneRenderer {
+    constructor() {
+        this.registry = new Map();
+        this.currentDisplay = null;
+        dragAndDrop.dragAborted$.subscribe(() => {
+            this.clearCurrentDisplay();
+        });
+        dragState
+            .events()
+            .pipe(filter((event) => event === DragStates.Starting))
+            .subscribe(() => {
+            const branch = dragState.getDragData();
+            assert(branch !== undefined);
+            let cursor = branch.parent()?.getBranch((branch.index() ?? 0) - 1);
+            let final = branch.parent();
+            while (cursor !== undefined) {
+                final = cursor;
+                cursor = cursor.branches().at(-1);
+            }
+            branch
+                .events()
+                .pipe(filter((event) => event instanceof PruneEvent), first())
+                .subscribe(() => {
+                assert(final instanceof TreeBranch || final instanceof TreeRoot);
+                this.showLowerZones(final);
+            });
+        });
+    }
+    clearCurrentDisplay() {
+        if (this.currentDisplay === null)
+            return;
+        for (const branch of this.registry.values()) {
+            const instance = branch.getComponentInstance();
+            instance.showInnerDropzone = false;
+            if (instance instanceof BranchComponent) {
+                instance.showLateralDropzone = false;
+            }
+        }
+        this.currentDisplay = null;
+    }
+    clearTreeFromRegistry(tree) {
+        const nodes = [];
+        tree.traverse((node) => nodes.push(node));
+        for (const [dropzoneComponent, treeNode] of this.registry) {
+            if (nodes.includes(treeNode)) {
+                this.registry.delete(dropzoneComponent);
+            }
+        }
+    }
+    getCurrentDisplay() {
+        if (this.currentDisplay === null)
+            return null;
+        return { ...this.currentDisplay };
+    }
+    getDropzoneLocation(dropzone) {
+        const branch = this.registry.get(dropzone);
+        const placement = dropzone.placement;
+        if (branch === undefined) {
+            throw new Error("dropzone not found in registry");
+        }
+        if (placement === undefined) {
+            throw new Error("dropzone has an undefined placement");
+        }
+        return [branch, placement];
+    }
+    handleDrop(treeNode, placement) {
+        if (placement === "inner") {
+            dragAndDrop.drop(treeNode, 0);
+        }
+        else if (treeNode instanceof TreeBranch && placement === "lateral") {
+            const currentParent = treeNode.parent();
+            const index = treeNode.index();
+            if (currentParent === undefined || index === undefined) {
+                throw new Error("branch must have a parent");
+            }
+            dragAndDrop.drop(currentParent, index + 1);
+        }
+        this.clearCurrentDisplay();
+    }
+    registerDropzone(dropzone, treeNode) {
+        this.registry.set(dropzone, treeNode);
+    }
+    registerDropzones(dropzones, treeBranch) {
+        for (const dropzone of dropzones) {
+            this.registry.set(dropzone, treeBranch);
+        }
+    }
+    showLowerZones(treeNode) {
+        this.clearCurrentDisplay();
+        this.showInnerZone(treeNode);
+        if (treeNode.branches().length === 0) {
+            this.loopThroughLowerZones(treeNode);
+        }
+        this.currentDisplay = { treeBranch: treeNode, direction: "lower" };
+    }
+    showUpperZones(treeBranch) {
+        this.clearCurrentDisplay();
+        this.loopThroughUpperZones(treeBranch);
+        this.currentDisplay = { treeBranch, direction: "upper" };
+    }
+    loopThroughLowerZones(treeNode) {
+        let cursor = treeNode;
+        while (cursor instanceof TreeBranch) {
+            this.showLateralZone(cursor);
+            const parent = cursor.parent();
+            const index = cursor.index();
+            assert(parent !== undefined && index !== undefined);
+            if (parent.branches().length > index + 1) {
+                return;
+            }
+            cursor = cursor.parent();
+        }
+    }
+    loopThroughUpperZones(treeBranch) {
+        let cursor = treeBranch
+            .parent()
+            ?.getBranch((treeBranch.index() ?? 0) - 1);
+        let final = treeBranch.parent();
+        while (cursor !== undefined) {
+            this.showLateralZone(cursor);
+            final = cursor;
+            cursor = cursor.branches().at(-1);
+        }
+        if (final !== undefined &&
+            (final instanceof TreeRoot || final instanceof TreeBranch)) {
+            this.showInnerZone(final);
+        }
+    }
+    nestingAllowed(treeNode) {
+        if (treeNode instanceof TreeRoot) {
+            return true;
+        }
+        if (treeNode instanceof TreeBranch) {
+            const allowNesting = config.getConfig(treeNode.root())?.dragAndDrop?.allowNesting ??
+                (() => true);
+            return allowNesting(treeNode);
+        }
+        throw new Error("unsupported treeNode type");
+    }
+    dropAllowed(parent, index) {
+        const sourceNode = dragState.getDragData();
+        assert(sourceNode instanceof TreeBranch);
+        if (parent instanceof TreeRoot) {
+            const allowDrop = config.getConfig(parent)?.dragAndDrop?.allowDrop ??
+                (() => true);
+            return allowDrop(sourceNode, parent, index);
+        }
+        if (parent instanceof TreeBranch) {
+            const allowDrop = config.getConfig(parent.root())?.dragAndDrop?.allowDrop ??
+                (() => true);
+            return allowDrop(sourceNode, parent, index);
+        }
+        throw new Error("unsupported treeNode type");
+    }
+    showInnerZone(treeNode) {
+        if (!this.nestingAllowed(treeNode) || !this.dropAllowed(treeNode, 0))
+            return;
+        treeNode.getComponentInstance().showInnerDropzone = true;
+    }
+    showLateralZone(treeBranch) {
+        const index = treeBranch.index();
+        assert(index !== undefined);
+        if (!this.dropAllowed(treeBranch.parent(), index + 1))
+            return;
+        treeBranch.getComponentInstance().showLateralDropzone = true;
+    }
+}
+const dropzoneRenderer = new DropzoneRenderer();
+
+class TreeDragAndDropService {
+    clearDropzones() {
+        dropzoneRenderer.clearCurrentDisplay();
+    }
+    dragStart(treeBranch, event) {
+        dragAndDrop.dragStart(treeBranch, event);
+    }
+    getCurrentlyDisplayedDropzoneFamily() {
+        return dropzoneRenderer.getCurrentDisplay();
+    }
+    showRootDropzone(root) {
+        dropzoneRenderer.showLowerZones(root);
+    }
+    state() {
+        return dragState.events();
+    }
+}
+TreeDragAndDropService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TreeDragAndDropService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropService, decorators: [{
+            type: Injectable
+        }] });
+
+class DraggableDirective {
+    constructor(dragAndDropService, renderer, hostElement) {
+        this.dragAndDropService = dragAndDropService;
+        renderer.setAttribute(hostElement.nativeElement, "draggable", "true");
+        renderer.setStyle(hostElement.nativeElement, "cursor", "grab");
+    }
+    onDragstart(event) {
+        if (this.limbleTreeDraggable === undefined)
+            return;
+        this.dragAndDropService.dragStart(this.limbleTreeDraggable, event);
+    }
+}
+DraggableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DraggableDirective, deps: [{ token: TreeDragAndDropService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: DraggableDirective, isStandalone: true, selector: "[limbleTreeDraggable]", inputs: { limbleTreeDraggable: "limbleTreeDraggable" }, host: { listeners: { "dragstart": "onDragstart($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[limbleTreeDraggable]",
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: TreeDragAndDropService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { limbleTreeDraggable: [{
+                type: Input
+            }], onDragstart: [{
+                type: HostListener,
+                args: ["dragstart", ["$event"]]
+            }] } });
+
+class TreeDragAndDropModule {
+}
+TreeDragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TreeDragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, imports: [DraggableDirective, DragoverNoChangeDetectDirective], exports: [DraggableDirective, DragoverNoChangeDetectDirective] });
+TreeDragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, providers: [TreeDragAndDropService] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DraggableDirective, DragoverNoChangeDetectDirective],
+                    providers: [TreeDragAndDropService],
+                    exports: [DraggableDirective, DragoverNoChangeDetectDirective]
+                }]
+        }] });
+
+/**
+ * A shim to help with the transition from v0 to v1.
+ * @deprecated
+ */
+class LegacyTree {
+    /** Creates a v1 tree structure from a v0 data array and v0 tree options. */
+    createTreeFromLegacyArray(container, data, treeOptions = {}) {
+        const root = new TreeRoot(container);
+        config.setConfig(root, this.upgradeOptions(treeOptions));
+        for (const node of data) {
+            this.renderTreeNode(root, node, treeOptions);
+        }
+        return root;
+    }
+    upgradeOptions(legacyOptions) {
+        return {
+            indentation: legacyOptions.indent,
+            dragAndDrop: {
+                allowNesting: (branch) => {
+                    if (legacyOptions.listMode === true) {
+                        return false;
+                    }
+                    if (legacyOptions.allowNesting === undefined) {
+                        return true;
+                    }
+                    if (typeof legacyOptions.allowNesting === "boolean") {
+                        return legacyOptions.allowNesting;
+                    }
+                    return legacyOptions.allowNesting(branch);
+                },
+                allowDragging: (branch) => {
+                    if (legacyOptions.allowDragging === undefined) {
+                        return true;
+                    }
+                    if (typeof legacyOptions.allowDragging === "boolean") {
+                        return legacyOptions.allowDragging;
+                    }
+                    return legacyOptions.allowDragging(branch);
+                },
+                allowDrop: (source, parent, index) => {
+                    if (legacyOptions.allowDrop === undefined) {
+                        return true;
+                    }
+                    return legacyOptions.allowDrop(source, parent, index);
+                }
+            }
+        };
+    }
+    renderTreeNode(parent, node, options) {
+        const component = node.component?.class ?? options.defaultComponent?.class;
+        if (component === undefined) {
+            throw new TreeError("A component must be provided");
+        }
+        const bindings = (node.component?.bindings ??
+            options.defaultComponent?.bindings ??
+            {});
+        const nodeData = node;
+        const branch = parent.grow(component, {
+            inputBindings: bindings,
+            meta: { nodeData }
+        });
+        for (const childNode of node.nodes ?? []) {
+            this.renderTreeNode(branch, childNode, options);
+        }
+        if (node.collapsed === true) {
+            treeCollapser.collapse(branch);
+        }
+    }
+}
+
+/** @deprecated */
+class LimbleTreeRootComponent {
+    constructor() {
+        this.itemsPerPage = Infinity;
+        this.page = 1;
+        this.treeChange = new EventEmitter();
+        this.treeDrop = new EventEmitter();
+        this.legacyTree = new LegacyTree();
+    }
+    ngAfterViewInit() {
+        this.update();
+    }
+    ngOnChanges() {
+        if (this.host !== undefined && this.data !== undefined) {
+            this.update();
+        }
+    }
+    ngOnDestroy() {
+        this.dropSubscription?.unsubscribe();
+        this.root?.destroy();
+    }
+    getRoot() {
+        return this.root;
+    }
+    update() {
+        if (this.data === undefined) {
+            throw new TreeError("LimbleTreeRootComponent's `data` input is required");
+        }
+        if (this.host === undefined) {
+            throw new TreeError("LimbleTreeRootComponent's `host` property is not defined");
+        }
+        this.root?.destroy();
+        this.dropSubscription?.unsubscribe();
+        const dataSlice = this.paginatedData();
+        this.root = this.legacyTree.createTreeFromLegacyArray(this.host, dataSlice, this.options);
+        this.dropSubscription = this.root
+            .events()
+            .pipe(filter((event) => event instanceof DragEndEvent))
+            .subscribe(this.treeDrop);
+        this.treeChange.emit(this.root);
+    }
+    paginatedData() {
+        assert(this.data !== undefined);
+        if (this.options?.listMode !== true) {
+            return this.data;
+        }
+        return this.data.slice((this.page - 1) * this.itemsPerPage, this.page * this.itemsPerPage);
+    }
+}
+LimbleTreeRootComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LimbleTreeRootComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: LimbleTreeRootComponent, isStandalone: true, selector: "limble-tree-root", inputs: { data: "data", options: "options", itemsPerPage: "itemsPerPage", page: "page" }, outputs: { treeChange: "treeChange", treeDrop: "treeDrop" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div #host></div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeRootComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "limble-tree-root", standalone: true, template: "<div #host></div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], host: [{
+                type: ViewChild,
+                args: ["host", { read: ViewContainerRef }]
+            }], treeChange: [{
+                type: Output
+            }], treeDrop: [{
+                type: Output
+            }] } });
+
+/** @deprecated */
+class LimbleTreeLegacyModule {
+}
+LimbleTreeLegacyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeLegacyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LimbleTreeLegacyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeLegacyModule, imports: [LimbleTreeRootComponent], exports: [LimbleTreeRootComponent] });
+LimbleTreeLegacyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeLegacyModule, providers: [LegacyTree], imports: [LimbleTreeRootComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeLegacyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [LimbleTreeRootComponent],
+                    providers: [LegacyTree],
+                    exports: [LimbleTreeRootComponent]
+                }]
+        }] });
+
+class LimbleTreeModule {
+}
+LimbleTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LimbleTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeModule, imports: [LimbleTreeLegacyModule, TreeCollapseModule, TreeDragAndDropModule], exports: [LimbleTreeLegacyModule, TreeCollapseModule, TreeDragAndDropModule] });
+LimbleTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeModule, providers: [TreeService], imports: [LimbleTreeLegacyModule, TreeCollapseModule, TreeDragAndDropModule, LimbleTreeLegacyModule, TreeCollapseModule, TreeDragAndDropModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LimbleTreeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [LimbleTreeLegacyModule, TreeCollapseModule, TreeDragAndDropModule],
+                    providers: [TreeService],
+                    exports: [LimbleTreeLegacyModule, TreeCollapseModule, TreeDragAndDropModule]
+                }]
+        }] });
 
-/*
- * Public API Surface of limble-tree
+/*
+ * Public API Surface of limble-tree
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { LimbleTreeModule, LimbleTreeRootComponent };
+export { DestructionEvent, DragEndEvent, DragStartEvent, DraggableDirective, DragoverNoChangeDetectDirective, DropEvent, GraftEvent, LegacyTree, LimbleTreeLegacyModule, LimbleTreeModule, LimbleTreeRootComponent, PruneEvent, TreeBranch, TreeCollapseModule, TreeCollapseService, TreeDragAndDropModule, TreeDragAndDropService, TreeError, TreeRoot, TreeService, config };
 //# sourceMappingURL=limble-limble-tree.mjs.map