@limble/limble-tree 1.0.0-beta.2 → 1.0.0-beta.4

package/fesm2015/limble-limble-tree.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, NgModule, EventEmitter, Directive, Output, Component, Input, NgZone, ViewContainerRef, ViewChild, ViewChildren, createComponent, EnvironmentInjector, HostListener } from '@angular/core';
-import { BehaviorSubject, fromEvent, merge, map, Subject, filter, first } from 'rxjs';
+import { BehaviorSubject, fromEvent, merge, map, filter, Subject, first } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -100,6 +100,10 @@ function assert(condition) {
     throw new Error("Assertion Failed!");
 }
 
+function hasProperty(input, prop) {
+    return typeof input === "object" && input !== null && prop in input;
+}
+
 var DragStates;
 (function (DragStates) {
     DragStates[DragStates["Idle"] = 0] = "Idle";
@@ -283,6 +287,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }] } });
 
+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
+            }] } });
+
 class Configuration {
     constructor() {
         this.configStorage = new Map();
@@ -300,6 +335,101 @@ class Configuration {
 }
 const config = new Configuration();
 
+/**
+ * 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) => {
+            var _a, _b;
+            const component = userlandComponentInstance;
+            Object.entries((_a = this.treeBranch.branchOptions.inputBindings) !== null && _a !== void 0 ? _a : {}).forEach(([key, value]) => {
+                component[key] = value;
+            });
+            Object.entries((_b = this.treeBranch.branchOptions.outputBindings) !== null && _b !== void 0 ? _b : {}).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 === null || currentDropzoneDisplayed === void 0 ? void 0 : 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 === null || currentDropzoneDisplayed === void 0 ? void 0 : currentDropzoneDisplayed.treeBranch) === this.treeBranch &&
+                currentDropzoneDisplayed.direction === "upper") {
+                return;
+            }
+            dropzoneRenderer.showUpperZones(this.treeBranch);
+            instance.triggerChangeDetection();
+        });
+    }
+}
+
 class TreeError extends Error {
 }
 
@@ -361,87 +491,15 @@ class DropEvent {
     }
 }
 
-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) {
-        var _a;
-        const oldParent = treeBranch.parent();
-        const oldIndex = treeBranch.index();
-        assert(oldParent !== undefined && oldIndex !== undefined);
-        (_a = event.target) === null || _a === void 0 ? void 0 : _a.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) {
-        var _a, _b, _c;
-        const allowDragging = (_c = (_b = (_a = config.getConfig(treeBranch.root())) === null || _a === void 0 ? void 0 : _a.dragAndDrop) === null || _b === void 0 ? void 0 : _b.allowDragging) !== null && _c !== void 0 ? _c : (() => true);
-        return allowDragging(treeBranch);
+/** Emitted when a node is destroyed */
+class DestructionEvent {
+    constructor(source) {
+        this._source = source;
     }
-    graftDraggedBranch(treeBranch, parent, index) {
-        treeBranch.graftTo(parent, index);
-        treeBranch.getNativeElement().style.display = "block";
-        dragState.dropped();
+    source() {
+        return this._source;
     }
 }
-const dragAndDrop = new DragAndDrop();
-
-function hasProperty(input, prop) {
-    return typeof input === "object" && input !== null && prop in input;
-}
 
 /** Emits when a branch is grafted to another tree node */
 class GraftEvent {
@@ -563,47 +621,6 @@ class TreeNodeBase {
     }
 }
 
-/** Emitted when a node is destroyed */
-class DestructionEvent {
-    constructor(source) {
-        this._source = source;
-    }
-    source() {
-        return this._source;
-    }
-}
-
-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.
  */
@@ -829,122 +846,6 @@ class TreeRoot {
     }
 }
 
-/** Responsible for the creation of new trees. */
-class TreeService {
-    /**
-     * Creates a new, empty tree structure inside the provided container.
-     *
-     * @returns A `TreeRoot` representing the base of the new tree.
-     */
-    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) => {
-            var _a, _b;
-            const component = userlandComponentInstance;
-            Object.entries((_a = this.treeBranch.branchOptions.inputBindings) !== null && _a !== void 0 ? _a : {}).forEach(([key, value]) => {
-                component[key] = value;
-            });
-            Object.entries((_b = this.treeBranch.branchOptions.outputBindings) !== null && _b !== void 0 ? _b : {}).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 === null || currentDropzoneDisplayed === void 0 ? void 0 : 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 === null || currentDropzoneDisplayed === void 0 ? void 0 : currentDropzoneDisplayed.treeBranch) === this.treeBranch &&
-                currentDropzoneDisplayed.direction === "upper") {
-                return;
-            }
-            dropzoneRenderer.showUpperZones(this.treeBranch);
-            instance.triggerChangeDetection();
-        });
-    }
-}
-
 /** Represents a standard node in a tree. Renders a BranchComponent.
  *
  * @remarks
@@ -963,7 +864,6 @@ class TreeBranch {
         assert(parentBranchesContainer !== undefined);
         this.branchController = new BranchController(this, parentBranchesContainer);
         const hostView = this.branchController.getHostView();
-        this.setIndentation(parent);
         if (parent instanceof TreeBranch &&
             parent.branchOptions.defaultCollapsed === true) {
             treeCollapser.storePrecollapsedNode(parent, this);
@@ -977,8 +877,9 @@ class TreeBranch {
                 child: this,
                 index: this._parent.branches().length
             }));
-            this.detectChanges();
+            this.setIndentation();
         }
+        this.detectChanges();
     }
     /** @returns All child branches as an array of TreeBranch instances, in order. */
     branches() {
@@ -1349,11 +1250,15 @@ class TreeBranch {
         this.detachedView.reattach();
         container.insert(this.detachedView, index);
         this.detachedView = null;
+        this.setIndentation();
     }
-    setIndentation(parent) {
+    setIndentation() {
         var _a;
-        const root = parent.root();
-        assert(root !== undefined);
+        assert(this._parent !== undefined);
+        const root = this._parent.root();
+        if (root === undefined) {
+            return;
+        }
         const options = config.getConfig(root);
         const branchesContainerEl = this.branchController
             .getNativeElement()
@@ -1364,6 +1269,105 @@ class TreeBranch {
     }
 }
 
+/** Responsible for the creation of new trees. */
+class TreeService {
+    /**
+     * Creates a new, empty tree structure inside the provided container.
+     *
+     * @returns A `TreeRoot` representing the base of the new tree.
+     */
+    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" }]
+        }] });
+
+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) {
+        var _a;
+        const oldParent = treeBranch.parent();
+        const oldIndex = treeBranch.index();
+        assert(oldParent !== undefined && oldIndex !== undefined);
+        (_a = event.target) === null || _a === void 0 ? void 0 : _a.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) {
+        var _a, _b, _c;
+        const allowDragging = (_c = (_b = (_a = config.getConfig(treeBranch.root())) === null || _a === void 0 ? void 0 : _a.dragAndDrop) === null || _b === void 0 ? void 0 : _b.allowDragging) !== null && _c !== void 0 ? _c : (() => true);
+        return allowDragging(treeBranch);
+    }
+    graftDraggedBranch(treeBranch, parent, index) {
+        treeBranch.graftTo(parent, index);
+        treeBranch.getNativeElement().style.display = "block";
+        dragState.dropped();
+    }
+}
+const dragAndDrop = new DragAndDrop();
+
 class DropzoneRenderer {
     constructor() {
         this.registry = new Map();
@@ -1388,7 +1392,7 @@ class DropzoneRenderer {
                 .events()
                 .pipe(filter((event) => event instanceof PruneEvent), first())
                 .subscribe(() => {
-                assert(final instanceof TreeBranch || final instanceof TreeRoot);
+                assert(final !== undefined);
                 this.showLowerZones(final);
             });
         });
@@ -1607,14 +1611,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TreeDragAndDropModule, imports: [DraggableDirective], exports: [DraggableDirective] });
 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],
+                    imports: [DraggableDirective],
                     providers: [TreeDragAndDropService],
-                    exports: [DraggableDirective, DragoverNoChangeDetectDirective]
+                    exports: [DraggableDirective]
                 }]
         }] });
 
@@ -1804,5 +1808,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DestructionEvent, DragEndEvent, DragStartEvent, DraggableDirective, DragoverNoChangeDetectDirective, DropEvent, GraftEvent, LegacyTree, LimbleTreeLegacyModule, LimbleTreeModule, LimbleTreeRootComponent, PruneEvent, TreeBranch, TreeCollapseModule, TreeCollapseService, TreeDragAndDropModule, TreeDragAndDropService, TreeError, TreeRoot, TreeService };
+export { BranchComponent, DestructionEvent, DragEndEvent, DragStartEvent, DraggableDirective, DragoverNoChangeDetectDirective, DropEvent, GraftEvent, LimbleTreeLegacyModule, LimbleTreeModule, LimbleTreeRootComponent, PruneEvent, RootComponent, TreeBranch, TreeCollapseModule, TreeCollapseService, TreeDragAndDropModule, TreeDragAndDropService, TreeError, TreeRoot, TreeService };
 //# sourceMappingURL=limble-limble-tree.mjs.map