@genexus/genexus-ide-ui 0.0.92 → 0.0.94

package/dist/components/tree-view.js

@@ -17,10 +17,23 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
 
 const treeViewCss = "ch-tree-view{display:flex;position:relative;block-size:100%;inline-size:100%;overflow:auto}ch-tree-view>.ch-tree-view-container{position:absolute;inset:0}ch-tree-view.ch-tree-view-dragging-item ch-tree-view-item{pointer-events:var(--ch-tree-view-pointer-events, all)}ch-tree-view.ch-tree-view-dragging-item .ch-tree-view-list-item--deny-drop{pointer-events:none}ch-tree-view.ch-tree-view--dragging-selected-items ch-tree-view-item[selected]{--ch-tree-view-pointer-events:none}ch-tree-view.ch-tree-view-waiting-drop-processing{cursor:wait}ch-tree-view.ch-tree-view-waiting-drop-processing>.ch-tree-view-container{pointer-events:none}.ch-tree-view-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-view-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-view-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-view-drag-info-fade-in 10ms}@keyframes ch-tree-view-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-view-drag-info{--rtl-offset:-100%}";
 
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ChTreeView_keyDownEvents, _ChTreeView_draggingSelectedItems, _ChTreeView_needForRAF, _ChTreeView_lastDragEvent, _ChTreeView_openSubTreeTimeout, _ChTreeView_validDroppableZoneCache, _ChTreeView_dragStartTimestamp, _ChTreeView_draggedItems, _ChTreeView_currentDraggedItem, _ChTreeView_lastOpenSubTreeItem, _ChTreeView_dragInfo, _ChTreeView_draggedIds, _ChTreeView_draggedParentIds, _ChTreeView_cancelSubTreeOpening, _ChTreeView_getTreeViewItemRef, _ChTreeView_validDroppableZone, _ChTreeView_openSubTreeAfterCountdown, _ChTreeView_trackItemDrag, _ChTreeView_updateDropEffect, _ChTreeView_resetVariables, _ChTreeView_checkDragValidityAndUpdateDragInfo, _ChTreeView_fixScrollPositionOnDrag, _ChTreeView_getDirectParentsOfDraggableItems, _a;
 const TREE_ITEM_TAG_NAME = "ch-tree-view-item";
 const TREE_TAG_NAME = "ch-tree-view";
 // Selectors
 // const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
+const ITEM_SELECTOR = (treeItemId) => `${TREE_ITEM_TAG_NAME}[id="${treeItemId}"]`;
 const TEXT_FORMAT = "text/plain";
 const ARROW_DOWN_KEY = "ArrowDown";
 const ARROW_UP_KEY = "ArrowUp";
@@ -31,437 +44,458 @@ const canMoveTreeItemFocus = (treeItem) => treeItem && !treeItem.editing;
 const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
 const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-view-dragging-item-x";
 const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-view-dragging-item-y";
-const ChTreeView = /*@__PURE__*/ proxyCustomElement(class ChTreeView extends HTMLElement {
-    constructor() {
-        // @todo TODO: Check if key codes works in Safari
-        this.keyDownEvents = {
-            [ARROW_DOWN_KEY]: event => {
-                const treeItem = getFocusedTreeItem();
-                if (!canMoveTreeItemFocus(treeItem)) {
+const ChTreeView = /*@__PURE__*/ proxyCustomElement((_a = class ChTreeView extends HTMLElement {
+        constructor() {
+            // @todo TODO: Check if key codes works in Safari
+            _ChTreeView_keyDownEvents.set(this, {
+                [ARROW_DOWN_KEY]: event => {
+                    const treeItem = getFocusedTreeItem();
+                    if (!canMoveTreeItemFocus(treeItem)) {
+                        return;
+                    }
+                    event.preventDefault();
+                    treeItem.focusNextItem(mouseEventModifierKey(event));
+                },
+                [ARROW_UP_KEY]: event => {
+                    const treeItem = getFocusedTreeItem();
+                    if (!canMoveTreeItemFocus(treeItem)) {
+                        return;
+                    }
+                    event.preventDefault();
+                    treeItem.focusPreviousItem(mouseEventModifierKey(event));
+                },
+                [EDIT_KEY]: event => {
+                    const treeItem = getFocusedTreeItem();
+                    if (!treeItem || !treeItem.editable) {
+                        return;
+                    }
+                    event.preventDefault();
+                    treeItem.editing = true;
+                }
+            });
+            _ChTreeView_draggingSelectedItems.set(this, false);
+            _ChTreeView_needForRAF.set(this, true); // To prevent redundant RAF (request animation frame) calls
+            _ChTreeView_lastDragEvent.set(this, void 0);
+            _ChTreeView_openSubTreeTimeout.set(this, void 0);
+            /**
+             * Cache to avoid duplicate requests when checking the droppable zone in the
+             * same drag event.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _ChTreeView_validDroppableZoneCache.set(this, new Map());
+            _ChTreeView_dragStartTimestamp.set(this, void 0); // Useful to avoid race conditions where the server response is slow
+            _ChTreeView_draggedItems.set(this, void 0);
+            // Refs
+            _ChTreeView_currentDraggedItem.set(this, void 0);
+            _ChTreeView_lastOpenSubTreeItem.set(this, void 0);
+            /**
+             * Text displayed when dragging an item.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _ChTreeView_dragInfo.set(this, void 0);
+            _ChTreeView_draggedIds.set(this, []);
+            _ChTreeView_draggedParentIds.set(this, []);
+            _ChTreeView_cancelSubTreeOpening.set(this, (treeItem, forceClear = false) => {
+                if (__classPrivateFieldGet(this, _ChTreeView_lastOpenSubTreeItem, "f") === treeItem || forceClear) {
+                    clearTimeout(__classPrivateFieldGet(this, _ChTreeView_openSubTreeTimeout, "f"));
+                    __classPrivateFieldSet(this, _ChTreeView_lastOpenSubTreeItem, null, "f");
+                }
+            });
+            _ChTreeView_getTreeViewItemRef.set(this, itemId => this.el.querySelector(ITEM_SELECTOR(itemId)));
+            _ChTreeView_validDroppableZone.set(this, (event) => {
+                const containerTarget = event.target;
+                const cacheKey = getDroppableZoneKey(containerTarget.id, __classPrivateFieldGet(this, _ChTreeView_draggedItems, "f"));
+                let droppableZoneState = __classPrivateFieldGet(this, _ChTreeView_validDroppableZoneCache, "f").get(cacheKey);
+                // Invalidate the cache, because the item is no longer waiting for its content to be downloaded
+                if (droppableZoneState === "temporal-invalid" &&
+                    !containerTarget.lazyLoad &&
+                    !containerTarget.downloading) {
+                    droppableZoneState = null;
+                }
+                if (droppableZoneState != null) {
+                    return droppableZoneState;
+                }
+                // Do not show drop zones if:
+                //   - The effect does not allow it.
+                //   - The drop is disabled in the container target.
+                //   - When dragging in the same tree, don't mark droppable zones if they are
+                //     the dragged items or their direct parents.
+                if (event.dataTransfer.effectAllowed === "none" ||
+                    containerTarget.dropDisabled ||
+                    (this.draggingInTree &&
+                        (__classPrivateFieldGet(this, _ChTreeView_draggedIds, "f").includes(containerTarget.id) ||
+                            __classPrivateFieldGet(this, _ChTreeView_draggedParentIds, "f").includes(containerTarget.id)))) {
+                    __classPrivateFieldGet(this, _ChTreeView_validDroppableZoneCache, "f").set(cacheKey, "invalid");
+                    return "invalid";
+                }
+                // Disable drops when items need to lazy load their content first
+                if (containerTarget.lazyLoad || containerTarget.downloading) {
+                    __classPrivateFieldGet(this, _ChTreeView_validDroppableZoneCache, "f").set(cacheKey, "temporal-invalid");
+                    return "temporal-invalid";
+                }
+                __classPrivateFieldGet(this, _ChTreeView_validDroppableZoneCache, "f").set(cacheKey, "checking");
+                this.droppableZoneEnter.emit({
+                    newContainer: {
+                        id: containerTarget.id,
+                        metadata: containerTarget.metadata
+                    },
+                    draggedItems: __classPrivateFieldGet(this, _ChTreeView_draggedItems, "f")
+                });
+                return "checking";
+            });
+            _ChTreeView_openSubTreeAfterCountdown.set(this, (currentTarget) => {
+                if (currentTarget.leaf || currentTarget.expanded) {
                     return;
                 }
+                __classPrivateFieldSet(this, _ChTreeView_openSubTreeTimeout, setTimeout(() => {
+                    currentTarget.expanded = true;
+                    this.expandedItemChange.emit({ id: currentTarget.id, expanded: true });
+                }, this.openSubTreeCountdown), "f");
+            });
+            _ChTreeView_trackItemDrag.set(this, (event) => {
+                const draggingInATree = event.target.closest(TREE_TAG_NAME) !== null;
+                // The Tree View must be the only element that processes the "dragover"
+                // event. Any other handler that processes this event can modify the
+                // `dropEffect` an thus break the drag and drop implementation
+                if (draggingInATree) {
+                    event.stopImmediatePropagation();
+                }
                 event.preventDefault();
-                treeItem.focusNextItem(mouseEventModifierKey(event));
-            },
-            [ARROW_UP_KEY]: event => {
-                const treeItem = getFocusedTreeItem();
-                if (!canMoveTreeItemFocus(treeItem)) {
+                __classPrivateFieldSet(this, _ChTreeView_lastDragEvent, event, "f");
+                __classPrivateFieldGet(this, _ChTreeView_updateDropEffect, "f").call(this, event);
+                if (!__classPrivateFieldGet(this, _ChTreeView_needForRAF, "f")) {
                     return;
                 }
-                event.preventDefault();
-                treeItem.focusPreviousItem(mouseEventModifierKey(event));
-            },
-            [EDIT_KEY]: event => {
-                const treeItem = getFocusedTreeItem();
-                if (!treeItem || !treeItem.editable) {
+                __classPrivateFieldSet(this, _ChTreeView_needForRAF, false, "f"); // No need to call RAF up until next frame
+                requestAnimationFrame(() => {
+                    __classPrivateFieldSet(this, _ChTreeView_needForRAF, true, "f"); // RAF now consumes the movement instruction so a new one can come
+                    this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${__classPrivateFieldGet(this, _ChTreeView_lastDragEvent, "f").clientX}px`);
+                    this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${__classPrivateFieldGet(this, _ChTreeView_lastDragEvent, "f").clientY}px`);
+                });
+            });
+            _ChTreeView_updateDropEffect.set(this, (event) => {
+                const itemTarget = event.target;
+                // Check if it is a valid item
+                if (itemTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME ||
+                    itemTarget.closest(TREE_TAG_NAME) !== this.el) {
                     return;
                 }
-                event.preventDefault();
-                treeItem.editing = true;
-            }
-        };
-        this.draggingSelectedItems = false;
-        this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
-        this.selectedItemsInfo = new Map();
-        /**
-         * Cache to avoid duplicate requests when checking the droppable zone in the
-         * same drag event.
-         */
-        this.validDroppableZoneCache = new Map();
-        this.draggedIds = [];
-        this.draggedParentIds = [];
-        this.trackItemDrag = (event) => {
-            const draggingInATree = event.target.closest(TREE_TAG_NAME) !== null;
-            // The Tree View must be the only element that processes the "dragover"
-            // event. Any other handler that processes this event can modify the
-            // `dropEffect` an thus break the drag and drop implementation
-            if (draggingInATree) {
-                event.stopImmediatePropagation();
-            }
-            event.preventDefault();
-            this.lastDragEvent = event;
-            this.updateDropEffect(event);
-            if (!this.needForRAF) {
-                return;
-            }
-            this.needForRAF = false; // No need to call RAF up until next frame
-            requestAnimationFrame(() => {
-                this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
-                this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientX}px`);
-                this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.clientY}px`);
+                const droppableZoneState = __classPrivateFieldGet(this, _ChTreeView_validDroppableZone, "f").call(this, event);
+                if (droppableZoneState === "invalid" ||
+                    droppableZoneState === "temporal-invalid") {
+                    event.dataTransfer.dropEffect = "none";
+                }
+            });
+            _ChTreeView_resetVariables.set(this, () => {
+                __classPrivateFieldSet(this, _ChTreeView_draggedIds, [], "f");
+                __classPrivateFieldSet(this, _ChTreeView_draggedParentIds, [], "f");
+            });
+            /**
+             * First, it check if all items can be dragged. If so, it updates the
+             * dataTransfer in the drag event to store the ids and metadata of the
+             * dragged items. Also it updates the visual information of the dragged
+             * items.
+             * @returns If all selected items can be dragged.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _ChTreeView_checkDragValidityAndUpdateDragInfo.set(this, (dragInfo) => {
+                const draggedElement = dragInfo.elem;
+                const selectedItemsInfo = this.selectedItemsCallback();
+                const isDraggingSelectedItems = selectedItemsInfo.has(draggedElement.id);
+                __classPrivateFieldSet(this, _ChTreeView_draggingSelectedItems, isDraggingSelectedItems, "f");
+                let dataTransferInfo = [];
+                let dragIsEnabledForAllItems;
+                if (isDraggingSelectedItems) {
+                    const selectedItemKeys = [...selectedItemsInfo.keys()];
+                    const selectedItemValues = [...selectedItemsInfo.values()];
+                    const selectedItemCount = selectedItemKeys.length;
+                    dragIsEnabledForAllItems = selectedItemValues.every(el => !__classPrivateFieldGet(this, _ChTreeView_getTreeViewItemRef, "f").call(this, el.id).dragDisabled);
+                    __classPrivateFieldSet(this, _ChTreeView_draggedIds, selectedItemKeys, "f");
+                    dataTransferInfo = selectedItemValues.map(el => ({
+                        id: el.id,
+                        metadata: el.metadata
+                    }));
+                    __classPrivateFieldSet(this, _ChTreeView_dragInfo, selectedItemCount === 1
+                        ? draggedElement.caption
+                        : selectedItemCount.toString(), "f");
+                }
+                else {
+                    dragIsEnabledForAllItems = !draggedElement.dragDisabled;
+                    dataTransferInfo = [
+                        { id: draggedElement.id, metadata: draggedElement.metadata }
+                    ];
+                    __classPrivateFieldSet(this, _ChTreeView_draggedIds, [draggedElement.id], "f");
+                    __classPrivateFieldSet(this, _ChTreeView_dragInfo, draggedElement.caption, "f");
+                }
+                __classPrivateFieldGet(this, _ChTreeView_getDirectParentsOfDraggableItems, "f").call(this, isDraggingSelectedItems);
+                // Update drag event info
+                const data = JSON.stringify(dataTransferInfo);
+                dragInfo.dragEvent.dataTransfer.setData(TEXT_FORMAT, data);
+                // We must keep the data binding and processing even if there is an item
+                // that can't be dragged, otherwise, other trees or element might behave
+                // unexpected when a dragstart event comes
+                return dragIsEnabledForAllItems;
+            });
+            _ChTreeView_fixScrollPositionOnDrag.set(this, () => {
+                if (!this.draggingInTree || !__classPrivateFieldGet(this, _ChTreeView_lastDragEvent, "f")) {
+                    return;
+                }
+                requestAnimationFrame(() => {
+                    scrollToEdge(__classPrivateFieldGet(this, _ChTreeView_lastDragEvent, "f"), this.el, 10, 30);
+                    requestAnimationFrame(__classPrivateFieldGet(this, _ChTreeView_fixScrollPositionOnDrag, "f"));
+                });
+            });
+            _ChTreeView_getDirectParentsOfDraggableItems.set(this, (draggingSelectedItems) => {
+                if (!draggingSelectedItems) {
+                    const parentTreeItemElem = __classPrivateFieldGet(this, _ChTreeView_currentDraggedItem, "f").parentElement;
+                    if (parentTreeItemElem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
+                        __classPrivateFieldGet(this, _ChTreeView_draggedParentIds, "f").push(parentTreeItemElem.id);
+                    }
+                    return;
+                }
+                // Dragging selected items
+                const selectedItemsInfo = this.selectedItemsCallback();
+                selectedItemsInfo.forEach(selectedItem => {
+                    const parentId = selectedItem.parentId;
+                    // parentId === "" when the item is in the first level of the tree
+                    if (parentId !== "") {
+                        __classPrivateFieldGet(this, _ChTreeView_draggedParentIds, "f").push(parentId);
+                    }
+                });
             });
-        };
-        this.fixScrollPositionOnDrag = () => {
-            if (!this.draggingInTree || !this.lastDragEvent) {
+            super();
+            this.__registerHost();
+            this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
+            this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
+            this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
+            this.itemsDropped = createEvent(this, "itemsDropped", 7);
+            this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
+            this.draggingInTheDocument = false;
+            this.draggingInTree = false;
+            this.multiSelection = false;
+            this.openSubTreeCountdown = 750;
+            this.selectedItemsCallback = undefined;
+            this.scrollToEdgeOnDrag = true;
+            this.waitDropProcessing = false;
+        }
+        get el() { return this; }
+        handleContextMenuEvent(event) {
+            const treeItem = event.target.closest(TREE_ITEM_TAG_NAME);
+            if (!treeItem) {
                 return;
             }
-            requestAnimationFrame(() => {
-                scrollToEdge(this.lastDragEvent, this.el, 10, 30);
-                requestAnimationFrame(this.fixScrollPositionOnDrag);
+            event.preventDefault();
+            this.itemContextmenu.emit({
+                id: treeItem.id,
+                itemRef: treeItem,
+                metadata: treeItem.metadata,
+                contextmenuEvent: event
             });
-        };
-        super();
-        this.__registerHost();
-        this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
-        this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
-        this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-        this.itemsDropped = createEvent(this, "itemsDropped", 7);
-        this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
-        this.draggingInTheDocument = false;
-        this.draggingInTree = false;
-        this.multiSelection = false;
-        this.openSubTreeCountdown = 750;
-        this.scrollToEdgeOnDrag = true;
-        this.waitDropProcessing = false;
-    }
-    get el() { return this; }
-    // /**
-    //  * Returns an array of the selected tree items, providing the id, caption and
-    //  * selected status.
-    //  */
-    // @Method()
-    // async getCheckedItems(): Promise<CheckedTreeItemInfo[]> {
-    //   const checkedItems = Array.from(
-    //     this.el.querySelectorAll(CHECKED_ITEMS)
-    //   ) as HTMLChTreeViewItemElement[];
-    //   return checkedItems.map(item => ({
-    //     id: item.id,
-    //     caption: item.caption,
-    //     selected: item.selected
-    //   }));
-    // }
-    handleContextMenuEvent(event) {
-        const treeItem = event.target.closest(TREE_ITEM_TAG_NAME);
-        if (!treeItem) {
-            return;
-        }
-        event.preventDefault();
-        this.itemContextmenu.emit({
-            id: treeItem.id,
-            itemRef: treeItem,
-            metadata: treeItem.metadata,
-            contextmenuEvent: event
-        });
-    }
-    // Set edit mode in items
-    handleKeyDownEvents(event) {
-        const keyHandler = this.keyDownEvents[event.key];
-        if (keyHandler) {
-            keyHandler(event);
-        }
-    }
-    // We can't use capture, because the dataTransfer info would not be defined
-    // Also, we cant use capture and setTimeout with 0 seconds, because the
-    // getData method can only be accessed during the dragstart and drop event
-    handleDragStart(event) {
-        // Reset the validity of the droppable zones with each new drag start
-        this.validDroppableZoneCache.clear();
-        this.draggingInTheDocument = true;
-        this.dragStartTimestamp = new Date().getTime();
-        this.draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
-    }
-    handleDragEnd() {
-        this.draggingInTheDocument = false;
-    }
-    handleDragEnter(event) {
-        this.cancelSubTreeOpening(null, true);
-        event.stopPropagation();
-        const containerTarget = event.target;
-        // Check if it is a valid item
-        if (containerTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
-            return;
-        }
-        this.lastOpenSubTreeItem = containerTarget;
-        this.openSubTreeAfterCountdown(containerTarget);
-        if (this.validDroppableZone(event) === "valid") {
-            containerTarget.dragState = "enter";
-        }
-    }
-    handleDragLeave(event) {
-        const currentTarget = event.target;
-        if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
-            return;
-        }
-        const treeItem = currentTarget;
-        treeItem.dragState = "none";
-        this.cancelSubTreeOpening(treeItem);
-    }
-    cancelSubTreeOpening(treeItem, forceClear = false) {
-        if (this.lastOpenSubTreeItem === treeItem || forceClear) {
-            clearTimeout(this.openSubTreeTimeout);
-            this.lastOpenSubTreeItem = null;
-        }
-    }
-    handleItemDrop(event) {
-        event.stopPropagation();
-        this.cancelSubTreeOpening(null, true);
-        const newContainer = event.target;
-        const draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
-        // The droppable zone must be checked, even if it was marked as not valid
-        // @todo Try to drop an item with high delays in droppable zone checking
-        if (this.validDroppableZone(event) !== "valid") {
-            return;
-        }
-        this.itemsDropped.emit({
-            newContainer: { id: newContainer.id, metadata: newContainer.metadata },
-            draggingSelectedItems: this.draggingSelectedItems,
-            draggedItems: draggedItems,
-            dropInTheSameTree: this.draggingInTree
-        });
-    }
-    handleItemDragStart(event) {
-        document.body.addEventListener("dragover", this.trackItemDrag, {
-            capture: true
-        });
-        this.currentDraggedItem = event.target;
-        const allItemsCanBeDragged = this.checkDragValidityAndUpdateDragInfo(event.detail);
-        if (!allItemsCanBeDragged) {
-            // This effect disables drop interactions in all page elements, so there
-            // is no need to capture and prevent the drop event in the window
-            event.detail.dragEvent.dataTransfer.effectAllowed = "none";
-            return;
         }
-        this.draggingInTree = true;
-        if (this.scrollToEdgeOnDrag) {
-            this.fixScrollPositionOnDrag();
-        }
-    }
-    handleItemDragEnd() {
-        this.draggingInTree = false;
-        document.body.removeEventListener("dragover", this.trackItemDrag, {
-            capture: true
-        });
-        // Reset not allowed droppable ids
-        this.resetVariables();
-    }
-    handleSelectedItemChange(event) {
-        event.stopPropagation();
-        const selectedItemInfo = event.detail;
-        this.handleItemSelection(selectedItemInfo);
-    }
-    /**
-     * Clear all information about the selected items. This method is intended to
-     * be used when selected items are reordered and the selected references will
-     * no longer be useful.
-     */
-    async clearSelectedItemsInfo() {
-        this.clearSelectedItems();
-    }
-    /**
-     * Given an item id, it displays and scrolls into the item view.
-     */
-    async scrollIntoVisible(treeItemId) {
-        const itemRef = this.el.querySelector(`${TREE_ITEM_TAG_NAME}[id="${treeItemId}"]`);
-        if (!itemRef) {
-            return;
-        }
-        let parentItem = itemRef.parentElement;
-        // Expand all parents
-        while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
-            parentItem.expanded = true;
-            parentItem = parentItem.parentElement;
-        }
-        // Wait until the parents are expanded
-        requestAnimationFrame(() => {
-            itemRef.scrollIntoView();
-        });
-    }
-    /**
-     * Update the information about the valid droppable zones.
-     * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
-     * @param newContainerId ID of the container where the drag is trying to be made.
-     * @param draggedItems Information about the dragged items.
-     * @param validDrop Current state of the droppable zone.
-     */
-    async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
-        var _a;
-        if (!this.draggingInTheDocument ||
-            requestTimestamp <= this.dragStartTimestamp) {
-            return;
-        }
-        const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
-        this.validDroppableZoneCache.set(droppableZoneKey, validDrop ? "valid" : "invalid");
-        const shouldUpdateDragEnterInCurrentContainer = ((_a = this.lastOpenSubTreeItem) === null || _a === void 0 ? void 0 : _a.id) === newContainerId;
-        if (shouldUpdateDragEnterInCurrentContainer) {
-            this.lastOpenSubTreeItem.dragState = "enter";
-        }
-    }
-    validDroppableZone(event) {
-        const containerTarget = event.target;
-        const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
-        let droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
-        // Invalidate the cache, because the item is no longer waiting for its content to be downloaded
-        if (droppableZoneState === "temporal-invalid" &&
-            !containerTarget.lazyLoad &&
-            !containerTarget.downloading) {
-            droppableZoneState = null;
-        }
-        if (droppableZoneState != null) {
-            return droppableZoneState;
+        // Set edit mode in items
+        handleKeyDownEvents(event) {
+            const keyHandler = __classPrivateFieldGet(this, _ChTreeView_keyDownEvents, "f")[event.key];
+            if (keyHandler) {
+                keyHandler(event);
+            }
         }
-        // Do not show drop zones if:
-        //   - The effect does not allow it.
-        //   - The drop is disabled in the container target.
-        //   - When dragging in the same tree, don't mark droppable zones if they are
-        //     the dragged items or their direct parents.
-        if (event.dataTransfer.effectAllowed === "none" ||
-            containerTarget.dropDisabled ||
-            (this.draggingInTree &&
-                (this.draggedIds.includes(containerTarget.id) ||
-                    this.draggedParentIds.includes(containerTarget.id)))) {
-            this.validDroppableZoneCache.set(cacheKey, "invalid");
-            return "invalid";
+        // We can't use capture, because the dataTransfer info would not be defined
+        // Also, we cant use capture and setTimeout with 0 seconds, because the
+        // getData method can only be accessed during the dragstart and drop event
+        handleDragStart(event) {
+            // Reset the validity of the droppable zones with each new drag start
+            __classPrivateFieldGet(this, _ChTreeView_validDroppableZoneCache, "f").clear();
+            // If there is no data, the dragstart does not achieve the interface required
+            const data = event.dataTransfer.getData(TEXT_FORMAT);
+            if (data === "") {
+                return;
+            }
+            try {
+                // Try to parse the data
+                const paredData = JSON.parse(data);
+                __classPrivateFieldSet(this, _ChTreeView_draggedItems, paredData, "f");
+                this.draggingInTheDocument = true;
+                __classPrivateFieldSet(this, _ChTreeView_dragStartTimestamp, new Date().getTime(), "f");
+            }
+            catch (_b) {
+                // Empty
+            }
         }
-        // Disable drops when items need to lazy load their content first
-        if (containerTarget.lazyLoad || containerTarget.downloading) {
-            this.validDroppableZoneCache.set(cacheKey, "temporal-invalid");
-            return "temporal-invalid";
+        handleDragEnd() {
+            this.draggingInTheDocument = false;
         }
-        this.validDroppableZoneCache.set(cacheKey, "checking");
-        this.droppableZoneEnter.emit({
-            newContainer: {
-                id: containerTarget.id,
-                metadata: containerTarget.metadata
-            },
-            draggedItems: this.draggedItems
-        });
-        return "checking";
-    }
-    openSubTreeAfterCountdown(currentTarget) {
-        if (currentTarget.leaf || currentTarget.expanded) {
-            return;
+        handleDragEnter(event) {
+            __classPrivateFieldGet(this, _ChTreeView_cancelSubTreeOpening, "f").call(this, null, true);
+            event.stopPropagation();
+            const containerTarget = event.target;
+            // Check if it is a valid item
+            if (containerTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
+                return;
+            }
+            __classPrivateFieldSet(this, _ChTreeView_lastOpenSubTreeItem, containerTarget, "f");
+            __classPrivateFieldGet(this, _ChTreeView_openSubTreeAfterCountdown, "f").call(this, containerTarget);
+            if (__classPrivateFieldGet(this, _ChTreeView_validDroppableZone, "f").call(this, event) === "valid") {
+                containerTarget.dragState = "enter";
+            }
         }
-        this.openSubTreeTimeout = setTimeout(() => {
-            currentTarget.expanded = true;
-            this.expandedItemChange.emit({ id: currentTarget.id, expanded: true });
-        }, this.openSubTreeCountdown);
-    }
-    updateDropEffect(event) {
-        const itemTarget = event.target;
-        // Check if it is a valid item
-        if (itemTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME ||
-            itemTarget.closest(TREE_TAG_NAME) !== this.el) {
-            return;
+        handleDragLeave(event) {
+            const currentTarget = event.target;
+            if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
+                return;
+            }
+            const treeItem = currentTarget;
+            treeItem.dragState = "none";
+            __classPrivateFieldGet(this, _ChTreeView_cancelSubTreeOpening, "f").call(this, treeItem);
         }
-        const droppableZoneState = this.validDroppableZone(event);
-        if (droppableZoneState === "invalid" ||
-            droppableZoneState === "temporal-invalid") {
-            event.dataTransfer.dropEffect = "none";
+        handleItemDrop(event) {
+            event.stopPropagation();
+            __classPrivateFieldGet(this, _ChTreeView_cancelSubTreeOpening, "f").call(this, null, true);
+            const newContainer = event.target;
+            const draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
+            // The droppable zone must be checked, even if it was marked as not valid
+            // @todo Try to drop an item with high delays in droppable zone checking
+            if (__classPrivateFieldGet(this, _ChTreeView_validDroppableZone, "f").call(this, event) !== "valid") {
+                return;
+            }
+            this.itemsDropped.emit({
+                newContainer: { id: newContainer.id, metadata: newContainer.metadata },
+                draggingSelectedItems: __classPrivateFieldGet(this, _ChTreeView_draggingSelectedItems, "f"),
+                draggedItems: draggedItems,
+                dropInTheSameTree: this.draggingInTree
+            });
         }
-    }
-    resetVariables() {
-        this.draggedIds = [];
-        this.draggedParentIds = [];
-    }
-    /**
-     * First, it check if all items can be dragged. If so, it updates the
-     * dataTransfer in the drag event to store the ids and metadata of the
-     * dragged items. Also it updates the visual information of the dragged
-     * items.
-     * @returns If all selected items can be dragged.
-     */
-    checkDragValidityAndUpdateDragInfo(dragInfo) {
-        const draggedElement = dragInfo.elem;
-        const isDraggingSelectedItems = this.selectedItemsInfo.has(draggedElement.id);
-        this.draggingSelectedItems = isDraggingSelectedItems;
-        let dataTransferInfo = [];
-        let dragIsEnabledForAllItems;
-        if (isDraggingSelectedItems) {
-            const selectedItemKeys = [...this.selectedItemsInfo.keys()];
-            const selectedItemValues = [...this.selectedItemsInfo.values()];
-            const selectedItemCount = selectedItemKeys.length;
-            dragIsEnabledForAllItems = selectedItemValues.every(el => !el.itemRef.dragDisabled);
-            this.draggedIds = selectedItemKeys;
-            dataTransferInfo = selectedItemValues.map(el => ({
-                id: el.id,
-                metadata: el.metadata
-            }));
-            this.dragInfo =
-                selectedItemCount === 1
-                    ? draggedElement.caption
-                    : selectedItemCount.toString();
+        handleItemDragStart(event) {
+            // Avoid bubbling as this event can listened in other components (e.g. ch-flexible-layout)
+            event.stopPropagation();
+            document.body.addEventListener("dragover", __classPrivateFieldGet(this, _ChTreeView_trackItemDrag, "f"), {
+                capture: true
+            });
+            __classPrivateFieldSet(this, _ChTreeView_currentDraggedItem, event.target, "f");
+            const allItemsCanBeDragged = __classPrivateFieldGet(this, _ChTreeView_checkDragValidityAndUpdateDragInfo, "f").call(this, event.detail);
+            if (!allItemsCanBeDragged) {
+                // This effect disables drop interactions in all page elements, so there
+                // is no need to capture and prevent the drop event in the window
+                event.detail.dragEvent.dataTransfer.effectAllowed = "none";
+                return;
+            }
+            this.draggingInTree = true;
+            if (this.scrollToEdgeOnDrag) {
+                __classPrivateFieldGet(this, _ChTreeView_fixScrollPositionOnDrag, "f").call(this);
+            }
         }
-        else {
-            dragIsEnabledForAllItems = !draggedElement.dragDisabled;
-            dataTransferInfo = [
-                { id: draggedElement.id, metadata: draggedElement.metadata }
-            ];
-            this.draggedIds = [draggedElement.id];
-            this.dragInfo = draggedElement.caption;
+        handleItemDragEnd() {
+            this.draggingInTree = false;
+            document.body.removeEventListener("dragover", __classPrivateFieldGet(this, _ChTreeView_trackItemDrag, "f"), {
+                capture: true
+            });
+            // Reset not allowed droppable ids
+            __classPrivateFieldGet(this, _ChTreeView_resetVariables, "f").call(this);
         }
-        this.getDirectParentsOfDraggableItems(isDraggingSelectedItems);
-        // Update drag event info
-        const data = JSON.stringify(dataTransferInfo);
-        dragInfo.dragEvent.dataTransfer.setData(TEXT_FORMAT, data);
-        // We must keep the data binding and processing even if there is an item
-        // that can't be dragged, otherwise, other trees or element might behave
-        // unexpected when a dragstart event comes
-        return dragIsEnabledForAllItems;
-    }
-    getDirectParentsOfDraggableItems(draggingSelectedItems) {
-        if (!draggingSelectedItems) {
-            const parentTreeItemElem = this.currentDraggedItem.parentElement;
-            if (parentTreeItemElem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
-                this.draggedParentIds.push(parentTreeItemElem.id);
+        handleSelectedItemChange(event) {
+            event.stopPropagation();
+            const selectedItemInfo = event.detail;
+            const selectedItemsInfo = this.selectedItemsCallback();
+            // If the Control key was not pressed or multi selection is disabled,
+            // remove all selected items
+            if (!selectedItemInfo.ctrlKeyPressed || !this.multiSelection) {
+                // Clear selected items
+                selectedItemsInfo.clear();
+            }
+            // If the item is selected, add it to list
+            if (selectedItemInfo.selected) {
+                selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
             }
-            return;
+            else {
+                selectedItemsInfo.delete(selectedItemInfo.id);
+            }
+            // Sync with UI model
+            this.selectedItemsChange.emit(selectedItemsInfo);
         }
-        // Dragging selected items
-        this.selectedItemsInfo.forEach(selectedItem => {
-            const parentId = selectedItem.parentId;
-            // parentId === "" when the item is in the first level of the tree
-            if (parentId !== "") {
-                this.draggedParentIds.push(parentId);
+        /**
+         * Given an item id, it displays and scrolls into the item view.
+         */
+        async scrollIntoVisible(treeItemId) {
+            const itemRef = this.el.querySelector(ITEM_SELECTOR(treeItemId));
+            if (!itemRef) {
+                return;
             }
-        });
-    }
-    handleItemSelection(selectedItemInfo) {
-        // If the Control key was not pressed or multi selection is disabled,
-        // remove all selected items
-        if (!selectedItemInfo.ctrlKeyPressed || !this.multiSelection) {
-            // Deselect all items except the item that emitted the event
-            this.selectedItemsInfo.forEach(treeItem => {
-                if (treeItem.id !== selectedItemInfo.id) {
-                    treeItem.itemRef.selected = false;
-                }
+            let parentItem = itemRef.parentElement;
+            // Expand all parents
+            while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
+                parentItem.expanded = true;
+                parentItem = parentItem.parentElement;
+            }
+            // Wait until the parents are expanded
+            requestAnimationFrame(() => {
+                itemRef.scrollIntoView();
             });
-            this.clearSelectedItems();
         }
-        // If the item is selected, add it to list
-        if (selectedItemInfo.selected) {
-            this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
+        /**
+         * Update the information about the valid droppable zones.
+         * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+         * @param newContainerId ID of the container where the drag is trying to be made.
+         * @param draggedItems Information about the dragged items.
+         * @param validDrop Current state of the droppable zone.
+         */
+        async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+            var _b;
+            if (!this.draggingInTheDocument ||
+                requestTimestamp <= __classPrivateFieldGet(this, _ChTreeView_dragStartTimestamp, "f")) {
+                return;
+            }
+            const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
+            __classPrivateFieldGet(this, _ChTreeView_validDroppableZoneCache, "f").set(droppableZoneKey, validDrop ? "valid" : "invalid");
+            const shouldUpdateDragEnterInCurrentContainer = ((_b = __classPrivateFieldGet(this, _ChTreeView_lastOpenSubTreeItem, "f")) === null || _b === void 0 ? void 0 : _b.id) === newContainerId;
+            if (shouldUpdateDragEnterInCurrentContainer) {
+                __classPrivateFieldGet(this, _ChTreeView_lastOpenSubTreeItem, "f").dragState = "enter";
+            }
         }
-        else {
-            this.selectedItemsInfo.delete(selectedItemInfo.id);
+        disconnectedCallback() {
+            __classPrivateFieldGet(this, _ChTreeView_resetVariables, "f").call(this);
+            // Remove dragover body event
+            this.handleItemDragEnd();
         }
-        // Sync with UI model
-        this.selectedItemsChange.emit(this.selectedItemsInfo);
-    }
-    clearSelectedItems() {
-        this.selectedItemsInfo.clear();
-    }
-    disconnectedCallback() {
-        this.resetVariables();
-        // Remove dragover body event
-        this.handleItemDragEnd();
-    }
-    render() {
-        return (h(Host, { class: {
-                "ch-tree-view-dragging-item": this.draggingInTheDocument,
-                "ch-tree-view-not-dragging-item": !this.draggingInTheDocument,
-                "ch-tree-view--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
-                "ch-tree-view-waiting-drop-processing": this.waitDropProcessing
-            } }, h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-view-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-view-drag-info" }, this.dragInfo))));
-    }
-    static get style() { return treeViewCss; }
-}, [4, "ch-tree-view", {
+        render() {
+            return (h(Host, { class: {
+                    "ch-tree-view-dragging-item": this.draggingInTheDocument,
+                    "ch-tree-view-not-dragging-item": !this.draggingInTheDocument,
+                    "ch-tree-view--dragging-selected-items": this.draggingInTree && __classPrivateFieldGet(this, _ChTreeView_draggingSelectedItems, "f"),
+                    "ch-tree-view-waiting-drop-processing": this.waitDropProcessing
+                } }, h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-view-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-view-drag-info" }, __classPrivateFieldGet(this, _ChTreeView_dragInfo, "f")))));
+        }
+        static get style() { return treeViewCss; }
+    },
+    _ChTreeView_keyDownEvents = new WeakMap(),
+    _ChTreeView_draggingSelectedItems = new WeakMap(),
+    _ChTreeView_needForRAF = new WeakMap(),
+    _ChTreeView_lastDragEvent = new WeakMap(),
+    _ChTreeView_openSubTreeTimeout = new WeakMap(),
+    _ChTreeView_validDroppableZoneCache = new WeakMap(),
+    _ChTreeView_dragStartTimestamp = new WeakMap(),
+    _ChTreeView_draggedItems = new WeakMap(),
+    _ChTreeView_currentDraggedItem = new WeakMap(),
+    _ChTreeView_lastOpenSubTreeItem = new WeakMap(),
+    _ChTreeView_dragInfo = new WeakMap(),
+    _ChTreeView_draggedIds = new WeakMap(),
+    _ChTreeView_draggedParentIds = new WeakMap(),
+    _ChTreeView_cancelSubTreeOpening = new WeakMap(),
+    _ChTreeView_getTreeViewItemRef = new WeakMap(),
+    _ChTreeView_validDroppableZone = new WeakMap(),
+    _ChTreeView_openSubTreeAfterCountdown = new WeakMap(),
+    _ChTreeView_trackItemDrag = new WeakMap(),
+    _ChTreeView_updateDropEffect = new WeakMap(),
+    _ChTreeView_resetVariables = new WeakMap(),
+    _ChTreeView_checkDragValidityAndUpdateDragInfo = new WeakMap(),
+    _ChTreeView_fixScrollPositionOnDrag = new WeakMap(),
+    _ChTreeView_getDirectParentsOfDraggableItems = new WeakMap(),
+    _a), [4, "ch-tree-view", {
         "multiSelection": [4, "multi-selection"],
         "openSubTreeCountdown": [2, "open-sub-tree-countdown"],
+        "selectedItemsCallback": [16],
         "scrollToEdgeOnDrag": [4, "scroll-to-edge-on-drag"],
         "waitDropProcessing": [4, "wait-drop-processing"],
         "draggingInTheDocument": [32],
         "draggingInTree": [32],
-        "clearSelectedItemsInfo": [64],
         "scrollIntoVisible": [64],
         "updateValidDropZone": [64]
     }, [[2, "contextmenu", "handleContextMenuEvent"], [2, "keydown", "handleKeyDownEvents"], [9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);