@genexus/genexus-ide-ui 0.0.92 → 0.0.94

package/dist/cjs/ch-checkbox_3.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c66d7fae.js');
+const index = require('./index-88537600.js');
 const reserverdNames = require('./reserverd-names-2c3286d9.js');
 const helpers = require('./helpers-82e25593.js');
+const utils = require('./utils-438c7042.js');
 
 const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
 
@@ -97,10 +98,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$1 = (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$1 = (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 _keyDownEvents, _draggingSelectedItems, _needForRAF, _lastDragEvent, _openSubTreeTimeout, _validDroppableZoneCache, _dragStartTimestamp, _draggedItems, _currentDraggedItem, _lastOpenSubTreeItem, _dragInfo, _draggedIds, _draggedParentIds, _cancelSubTreeOpening, _getTreeViewItemRef, _validDroppableZone, _openSubTreeAfterCountdown, _trackItemDrag, _updateDropEffect, _resetVariables, _checkDragValidityAndUpdateDragInfo, _fixScrollPositionOnDrag, _getDirectParentsOfDraggableItems, _a$1;
 const TREE_ITEM_TAG_NAME$1 = "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$1}[id="${treeItemId}"]`;
 const TEXT_FORMAT = "text/plain";
 const ARROW_DOWN_KEY = "ArrowDown";
 const ARROW_UP_KEY = "ArrowUp";
@@ -111,433 +125,465 @@ 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 = class {
-    constructor(hostRef) {
-        // @todo TODO: Check if key codes works in Safari
-        this.keyDownEvents = {
-            [ARROW_DOWN_KEY]: event => {
-                const treeItem = getFocusedTreeItem();
-                if (!canMoveTreeItemFocus(treeItem)) {
+const ChTreeView = (_a$1 = class {
+        constructor(hostRef) {
+            // @todo TODO: Check if key codes works in Safari
+            _keyDownEvents.set(this, {
+                [ARROW_DOWN_KEY]: event => {
+                    const treeItem = getFocusedTreeItem();
+                    if (!canMoveTreeItemFocus(treeItem)) {
+                        return;
+                    }
+                    event.preventDefault();
+                    treeItem.focusNextItem(helpers.mouseEventModifierKey(event));
+                },
+                [ARROW_UP_KEY]: event => {
+                    const treeItem = getFocusedTreeItem();
+                    if (!canMoveTreeItemFocus(treeItem)) {
+                        return;
+                    }
+                    event.preventDefault();
+                    treeItem.focusPreviousItem(helpers.mouseEventModifierKey(event));
+                },
+                [EDIT_KEY]: event => {
+                    const treeItem = getFocusedTreeItem();
+                    if (!treeItem || !treeItem.editable) {
+                        return;
+                    }
+                    event.preventDefault();
+                    treeItem.editing = true;
+                }
+            });
+            _draggingSelectedItems.set(this, false);
+            _needForRAF.set(this, true); // To prevent redundant RAF (request animation frame) calls
+            _lastDragEvent.set(this, void 0);
+            _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
+            _validDroppableZoneCache.set(this, new Map());
+            _dragStartTimestamp.set(this, void 0); // Useful to avoid race conditions where the server response is slow
+            _draggedItems.set(this, void 0);
+            // Refs
+            _currentDraggedItem.set(this, void 0);
+            _lastOpenSubTreeItem.set(this, void 0);
+            /**
+             * Text displayed when dragging an item.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _dragInfo.set(this, void 0);
+            _draggedIds.set(this, []);
+            _draggedParentIds.set(this, []);
+            _cancelSubTreeOpening.set(this, (treeItem, forceClear = false) => {
+                if (__classPrivateFieldGet$1(this, _lastOpenSubTreeItem, "f") === treeItem || forceClear) {
+                    clearTimeout(__classPrivateFieldGet$1(this, _openSubTreeTimeout, "f"));
+                    __classPrivateFieldSet$1(this, _lastOpenSubTreeItem, null, "f");
+                }
+            });
+            _getTreeViewItemRef.set(this, itemId => this.el.querySelector(ITEM_SELECTOR(itemId)));
+            _validDroppableZone.set(this, (event) => {
+                const containerTarget = event.target;
+                const cacheKey = getDroppableZoneKey(containerTarget.id, __classPrivateFieldGet$1(this, _draggedItems, "f"));
+                let droppableZoneState = __classPrivateFieldGet$1(this, _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$1(this, _draggedIds, "f").includes(containerTarget.id) ||
+                            __classPrivateFieldGet$1(this, _draggedParentIds, "f").includes(containerTarget.id)))) {
+                    __classPrivateFieldGet$1(this, _validDroppableZoneCache, "f").set(cacheKey, "invalid");
+                    return "invalid";
+                }
+                // Disable drops when items need to lazy load their content first
+                if (containerTarget.lazyLoad || containerTarget.downloading) {
+                    __classPrivateFieldGet$1(this, _validDroppableZoneCache, "f").set(cacheKey, "temporal-invalid");
+                    return "temporal-invalid";
+                }
+                __classPrivateFieldGet$1(this, _validDroppableZoneCache, "f").set(cacheKey, "checking");
+                this.droppableZoneEnter.emit({
+                    newContainer: {
+                        id: containerTarget.id,
+                        metadata: containerTarget.metadata
+                    },
+                    draggedItems: __classPrivateFieldGet$1(this, _draggedItems, "f")
+                });
+                return "checking";
+            });
+            _openSubTreeAfterCountdown.set(this, (currentTarget) => {
+                if (currentTarget.leaf || currentTarget.expanded) {
                     return;
                 }
+                __classPrivateFieldSet$1(this, _openSubTreeTimeout, setTimeout(() => {
+                    currentTarget.expanded = true;
+                    this.expandedItemChange.emit({ id: currentTarget.id, expanded: true });
+                }, this.openSubTreeCountdown), "f");
+            });
+            _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(helpers.mouseEventModifierKey(event));
-            },
-            [ARROW_UP_KEY]: event => {
-                const treeItem = getFocusedTreeItem();
-                if (!canMoveTreeItemFocus(treeItem)) {
+                __classPrivateFieldSet$1(this, _lastDragEvent, event, "f");
+                __classPrivateFieldGet$1(this, _updateDropEffect, "f").call(this, event);
+                if (!__classPrivateFieldGet$1(this, _needForRAF, "f")) {
                     return;
                 }
-                event.preventDefault();
-                treeItem.focusPreviousItem(helpers.mouseEventModifierKey(event));
-            },
-            [EDIT_KEY]: event => {
-                const treeItem = getFocusedTreeItem();
-                if (!treeItem || !treeItem.editable) {
+                __classPrivateFieldSet$1(this, _needForRAF, false, "f"); // No need to call RAF up until next frame
+                requestAnimationFrame(() => {
+                    __classPrivateFieldSet$1(this, _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$1(this, _lastDragEvent, "f").clientX}px`);
+                    this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${__classPrivateFieldGet$1(this, _lastDragEvent, "f").clientY}px`);
+                });
+            });
+            _updateDropEffect.set(this, (event) => {
+                const itemTarget = event.target;
+                // Check if it is a valid item
+                if (itemTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1 ||
+                    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$1(this, _validDroppableZone, "f").call(this, event);
+                if (droppableZoneState === "invalid" ||
+                    droppableZoneState === "temporal-invalid") {
+                    event.dataTransfer.dropEffect = "none";
+                }
             });
-        };
-        this.fixScrollPositionOnDrag = () => {
-            if (!this.draggingInTree || !this.lastDragEvent) {
+            _resetVariables.set(this, () => {
+                __classPrivateFieldSet$1(this, _draggedIds, [], "f");
+                __classPrivateFieldSet$1(this, _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
+            _checkDragValidityAndUpdateDragInfo.set(this, (dragInfo) => {
+                const draggedElement = dragInfo.elem;
+                const selectedItemsInfo = this.selectedItemsCallback();
+                const isDraggingSelectedItems = selectedItemsInfo.has(draggedElement.id);
+                __classPrivateFieldSet$1(this, _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$1(this, _getTreeViewItemRef, "f").call(this, el.id).dragDisabled);
+                    __classPrivateFieldSet$1(this, _draggedIds, selectedItemKeys, "f");
+                    dataTransferInfo = selectedItemValues.map(el => ({
+                        id: el.id,
+                        metadata: el.metadata
+                    }));
+                    __classPrivateFieldSet$1(this, _dragInfo, selectedItemCount === 1
+                        ? draggedElement.caption
+                        : selectedItemCount.toString(), "f");
+                }
+                else {
+                    dragIsEnabledForAllItems = !draggedElement.dragDisabled;
+                    dataTransferInfo = [
+                        { id: draggedElement.id, metadata: draggedElement.metadata }
+                    ];
+                    __classPrivateFieldSet$1(this, _draggedIds, [draggedElement.id], "f");
+                    __classPrivateFieldSet$1(this, _dragInfo, draggedElement.caption, "f");
+                }
+                __classPrivateFieldGet$1(this, _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;
+            });
+            _fixScrollPositionOnDrag.set(this, () => {
+                if (!this.draggingInTree || !__classPrivateFieldGet$1(this, _lastDragEvent, "f")) {
+                    return;
+                }
+                requestAnimationFrame(() => {
+                    scrollToEdge(__classPrivateFieldGet$1(this, _lastDragEvent, "f"), this.el, 10, 30);
+                    requestAnimationFrame(__classPrivateFieldGet$1(this, _fixScrollPositionOnDrag, "f"));
+                });
+            });
+            _getDirectParentsOfDraggableItems.set(this, (draggingSelectedItems) => {
+                if (!draggingSelectedItems) {
+                    const parentTreeItemElem = __classPrivateFieldGet$1(this, _currentDraggedItem, "f").parentElement;
+                    if (parentTreeItemElem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1) {
+                        __classPrivateFieldGet$1(this, _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$1(this, _draggedParentIds, "f").push(parentId);
+                    }
+                });
+            });
+            index.registerInstance(this, hostRef);
+            this.droppableZoneEnter = index.createEvent(this, "droppableZoneEnter", 7);
+            this.expandedItemChange = index.createEvent(this, "expandedItemChange", 7);
+            this.itemContextmenu = index.createEvent(this, "itemContextmenu", 7);
+            this.itemsDropped = index.createEvent(this, "itemsDropped", 7);
+            this.selectedItemsChange = index.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 index.getElement(this); }
+        handleContextMenuEvent(event) {
+            const treeItem = event.target.closest(TREE_ITEM_TAG_NAME$1);
+            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
             });
-        };
-        index.registerInstance(this, hostRef);
-        this.droppableZoneEnter = index.createEvent(this, "droppableZoneEnter", 7);
-        this.expandedItemChange = index.createEvent(this, "expandedItemChange", 7);
-        this.itemContextmenu = index.createEvent(this, "itemContextmenu", 7);
-        this.itemsDropped = index.createEvent(this, "itemsDropped", 7);
-        this.selectedItemsChange = index.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 index.getElement(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$1);
-        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$1) {
-            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$1) {
-            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$1}[id="${treeItemId}"]`);
-        if (!itemRef) {
-            return;
-        }
-        let parentItem = itemRef.parentElement;
-        // Expand all parents
-        while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1) {
-            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$1(this, _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$1(this, _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$1(this, _draggedItems, paredData, "f");
+                this.draggingInTheDocument = true;
+                __classPrivateFieldSet$1(this, _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$1(this, _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$1) {
+                return;
+            }
+            __classPrivateFieldSet$1(this, _lastOpenSubTreeItem, containerTarget, "f");
+            __classPrivateFieldGet$1(this, _openSubTreeAfterCountdown, "f").call(this, containerTarget);
+            if (__classPrivateFieldGet$1(this, _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$1 ||
-            itemTarget.closest(TREE_TAG_NAME) !== this.el) {
-            return;
+        handleDragLeave(event) {
+            const currentTarget = event.target;
+            if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1) {
+                return;
+            }
+            const treeItem = currentTarget;
+            treeItem.dragState = "none";
+            __classPrivateFieldGet$1(this, _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$1(this, _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$1(this, _validDroppableZone, "f").call(this, event) !== "valid") {
+                return;
+            }
+            this.itemsDropped.emit({
+                newContainer: { id: newContainer.id, metadata: newContainer.metadata },
+                draggingSelectedItems: __classPrivateFieldGet$1(this, _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$1(this, _trackItemDrag, "f"), {
+                capture: true
+            });
+            __classPrivateFieldSet$1(this, _currentDraggedItem, event.target, "f");
+            const allItemsCanBeDragged = __classPrivateFieldGet$1(this, _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$1(this, _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$1(this, _trackItemDrag, "f"), {
+                capture: true
+            });
+            // Reset not allowed droppable ids
+            __classPrivateFieldGet$1(this, _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$1) {
-                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);
+            }
+            else {
+                selectedItemsInfo.delete(selectedItemInfo.id);
             }
-            return;
+            // 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$1) {
+                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$1(this, _dragStartTimestamp, "f")) {
+                return;
+            }
+            const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
+            __classPrivateFieldGet$1(this, _validDroppableZoneCache, "f").set(droppableZoneKey, validDrop ? "valid" : "invalid");
+            const shouldUpdateDragEnterInCurrentContainer = ((_b = __classPrivateFieldGet$1(this, _lastOpenSubTreeItem, "f")) === null || _b === void 0 ? void 0 : _b.id) === newContainerId;
+            if (shouldUpdateDragEnterInCurrentContainer) {
+                __classPrivateFieldGet$1(this, _lastOpenSubTreeItem, "f").dragState = "enter";
+            }
         }
-        else {
-            this.selectedItemsInfo.delete(selectedItemInfo.id);
+        disconnectedCallback() {
+            __classPrivateFieldGet$1(this, _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 (index.h(index.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
-            } }, index.h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-view-container" }, index.h("slot", null)), this.draggingInTree && (index.h("span", { "aria-hidden": "true", class: "ch-tree-view-drag-info" }, this.dragInfo))));
-    }
-};
+        render() {
+            return (index.h(index.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$1(this, _draggingSelectedItems, "f"),
+                    "ch-tree-view-waiting-drop-processing": this.waitDropProcessing
+                } }, index.h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-view-container" }, index.h("slot", null)), this.draggingInTree && (index.h("span", { "aria-hidden": "true", class: "ch-tree-view-drag-info" }, __classPrivateFieldGet$1(this, _dragInfo, "f")))));
+        }
+    },
+    _keyDownEvents = new WeakMap(),
+    _draggingSelectedItems = new WeakMap(),
+    _needForRAF = new WeakMap(),
+    _lastDragEvent = new WeakMap(),
+    _openSubTreeTimeout = new WeakMap(),
+    _validDroppableZoneCache = new WeakMap(),
+    _dragStartTimestamp = new WeakMap(),
+    _draggedItems = new WeakMap(),
+    _currentDraggedItem = new WeakMap(),
+    _lastOpenSubTreeItem = new WeakMap(),
+    _dragInfo = new WeakMap(),
+    _draggedIds = new WeakMap(),
+    _draggedParentIds = new WeakMap(),
+    _cancelSubTreeOpening = new WeakMap(),
+    _getTreeViewItemRef = new WeakMap(),
+    _validDroppableZone = new WeakMap(),
+    _openSubTreeAfterCountdown = new WeakMap(),
+    _trackItemDrag = new WeakMap(),
+    _updateDropEffect = new WeakMap(),
+    _resetVariables = new WeakMap(),
+    _checkDragValidityAndUpdateDragInfo = new WeakMap(),
+    _fixScrollPositionOnDrag = new WeakMap(),
+    _getDirectParentsOfDraggableItems = new WeakMap(),
+    _a$1);
 ChTreeView.style = treeViewCss;
 
-const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) )}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--ch-tree-view-item-distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__expandable-button-width) - 2px )}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) )}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--ch-tree-view-item-distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button,.expandable-button-decorative::before{display:grid;place-items:center;width:var(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button-decorative::before{content:\"\";background-color:currentColor;-webkit-mask:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\" fill=\"none\"><path d=\"M16.5 5L8.7 12.7L1 5\" stroke=\"%23000\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>') 50% 50%/calc(100% - 2px) calc(100% - 2px) no-repeat;cursor:unset}.expandable-button-decorative--collapsed::before{transform:rotate(-90deg)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__expandable-button-width) - 2px )}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline:8px 2px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite, avoid-flickering 75ms}@keyframes avoid-flickering{0%,100%{display:none}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden}";
 
-const resetDragImage = new Image();
+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 _watcher, _ignoreCheckboxChange, _headerRef, _inputRef, _getDirectTreeItems, _setResizeObserver, _disconnectObserver, _checkIfShouldRemoveEditMode, _removeEditModeOnClick, _removeEditMode, _toggleExpand, _lazyLoadItems, _toggleSelected, _setSelected, _toggleOrSelect, _getSelectedInfo, _handleActionDblClick, _handleActionClick, _handleActionKeyDown, _emitOpenReference, _handleCheckedChange, _renderImg, _handleDragStart, _handleDragEnd, _handleDrop, _a;
 const DISTANCE_TO_CHECKBOX_CUSTOM_VAR = "--ch-tree-view-item-distance-to-checkbox";
 const INITIAL_LEVEL = 0;
 // Selectors
@@ -560,511 +606,549 @@ const CHECKBOX_EXPORT_PARTS = [
 ]
     .map(getCheckboxExportPart)
     .join(",");
-const ChTreeViewItem = class {
-    constructor(hostRef) {
-        /**
-         * Useful to ignore the checkbox change when it was committed from a children.
-         */
-        this.ignoreCheckboxChange = false;
-        this.checkIfShouldRemoveEditMode = (event) => {
-            event.stopPropagation();
-            if (event.code !== ENTER_KEY && event.code !== ESCAPE_KEY) {
+const ChTreeViewItem = (_a = class {
+        constructor(hostRef) {
+            _watcher.set(this, void 0);
+            /**
+             * Useful to ignore the checkbox change when it was committed from a children.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _ignoreCheckboxChange.set(this, false);
+            // Refs
+            _headerRef.set(this, void 0);
+            _inputRef.set(this, void 0);
+            _getDirectTreeItems.set(this, () => Array.from(this.el.querySelectorAll(DIRECT_TREE_ITEM_CHILDREN)));
+            _setResizeObserver.set(this, () => {
+                __classPrivateFieldSet(this, _watcher, new ResizeObserver(() => {
+                    const distanceToCheckbox = this.el.getBoundingClientRect().height -
+                        __classPrivateFieldGet(this, _headerRef, "f").getBoundingClientRect().height / 2;
+                    this.el.style.setProperty(DISTANCE_TO_CHECKBOX_CUSTOM_VAR, distanceToCheckbox + "px");
+                }), "f");
+                __classPrivateFieldGet(this, _watcher, "f").observe(this.el);
+                __classPrivateFieldGet(this, _watcher, "f").observe(__classPrivateFieldGet(this, _headerRef, "f"));
+            });
+            _disconnectObserver.set(this, () => {
+                if (!__classPrivateFieldGet(this, _watcher, "f")) {
+                    return;
+                }
+                __classPrivateFieldGet(this, _watcher, "f").disconnect();
+                __classPrivateFieldSet(this, _watcher, null, "f");
+            });
+            _checkIfShouldRemoveEditMode.set(this, (event) => {
+                event.stopPropagation();
+                if (event.code !== ENTER_KEY && event.code !== ESCAPE_KEY) {
+                    return;
+                }
+                event.preventDefault();
+                const commitEdition = event.code === ENTER_KEY;
+                __classPrivateFieldGet(this, _removeEditMode, "f").call(this, true, commitEdition)();
+            });
+            _removeEditModeOnClick.set(this, (event) => {
+                // The click is executed outside the input and the pointer type is defined,
+                // meaning that the button click was not triggered by the Enter or Space keys
+                if (!event.composedPath().includes(__classPrivateFieldGet(this, _inputRef, "f")) && event.pointerType) {
+                    __classPrivateFieldGet(this, _removeEditMode, "f").call(this, false)();
+                }
+            });
+            _removeEditMode.set(this, (shouldFocusHeader, commitEdition = false) => () => {
+                // When pressing the enter key in the input, the removeEditMode event is
+                // triggered twice (due to the headerRef.focus() triggering the onBlur
+                // event in the input), so we need to check if the edit mode was disabled
+                if (!this.editing) {
+                    return;
+                }
+                this.editing = false;
+                document.body.removeEventListener("click", __classPrivateFieldGet(this, _removeEditModeOnClick, "f"), {
+                    capture: true
+                });
+                const newCaption = __classPrivateFieldGet(this, _inputRef, "f").value;
+                if (commitEdition && newCaption.trim() !== "") {
+                    this.modifyCaption.emit({
+                        id: this.el.id,
+                        caption: newCaption
+                    });
+                }
+                if (shouldFocusHeader) {
+                    __classPrivateFieldGet(this, _headerRef, "f").focus();
+                }
+            });
+            _toggleExpand.set(this, (event) => {
+                event.stopPropagation();
+                if (!this.leaf) {
+                    this.expanded = !this.expanded;
+                }
+                this.selected = true;
+                this.selectedItemChange.emit(__classPrivateFieldGet(this, _getSelectedInfo, "f").call(this, helpers.mouseEventModifierKey(event), true));
+            });
+            _lazyLoadItems.set(this, (expanded) => {
+                if (!this.lazyLoad || !expanded) {
+                    return;
+                }
+                // Load items
+                this.lazyLoad = false;
+                this.downloading = true;
+                this.loadLazyContent.emit(this.el.id);
+            });
+            _toggleSelected.set(this, () => {
+                const selected = !this.selected;
+                this.selected = selected;
+                this.selectedItemChange.emit(__classPrivateFieldGet(this, _getSelectedInfo, "f").call(this, true, selected));
+            });
+            _setSelected.set(this, () => {
+                this.selected = true;
+                this.selectedItemChange.emit(__classPrivateFieldGet(this, _getSelectedInfo, "f").call(this, false, true));
+            });
+            _toggleOrSelect.set(this, (event) => {
+                // Ctrl key
+                if (helpers.mouseEventModifierKey(event)) {
+                    __classPrivateFieldGet(this, _toggleSelected, "f").call(this);
+                }
+                // Expand on click interaction
+                else if (this.expandOnClick) {
+                    __classPrivateFieldGet(this, _toggleExpand, "f").call(this, event);
+                }
+                // Click only selects the item
+                else {
+                    __classPrivateFieldGet(this, _setSelected, "f").call(this);
+                }
+            });
+            _getSelectedInfo.set(this, (ctrlKeyPressed, selected) => {
+                var _b;
+                return ({
+                    ctrlKeyPressed: ctrlKeyPressed,
+                    expanded: this.expanded,
+                    id: this.el.id,
+                    metadata: this.metadata,
+                    parentId: (_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.id,
+                    selected: selected
+                });
+            });
+            _handleActionDblClick.set(this, (event) => {
+                event.stopPropagation();
+                if (helpers.mouseEventModifierKey(event)) {
+                    __classPrivateFieldGet(this, _toggleSelected, "f").call(this);
+                    return;
+                }
+                __classPrivateFieldGet(this, _emitOpenReference, "f").call(this);
+                // The Control key is not pressed, so the control can be expanded if double
+                // click expands the item
+                if (!this.leaf && !this.expandOnClick) {
+                    __classPrivateFieldGet(this, _toggleExpand, "f").call(this, event);
+                }
+            });
+            /**
+             * Event triggered by the following actions on the main button:
+             *   - Click
+             *   - Enter keydown
+             *   - Space keydown and keyup
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _handleActionClick.set(this, (event) => {
+                event.stopPropagation();
+                // Don't perform actions when editing
+                if (this.editing) {
+                    return;
+                }
+                event.preventDefault();
+                // Click event
+                if (event.pointerType) {
+                    __classPrivateFieldGet(this, _toggleOrSelect, "f").call(this, event);
+                    return;
+                }
+                __classPrivateFieldGet(this, _emitOpenReference, "f").call(this);
+                // Enter or space
+                __classPrivateFieldGet(this, _toggleExpand, "f").call(this, event);
+            });
+            /**
+             * Event triggered by key events on the main button.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _handleActionKeyDown.set(this, (event) => {
+                // Only toggle if the Enter key was pressed with the Ctrl key
+                if (helpers.mouseEventModifierKey(event) && event.code === ENTER_KEY) {
+                    event.stopPropagation();
+                    __classPrivateFieldGet(this, _toggleSelected, "f").call(this);
+                }
+            });
+            _emitOpenReference.set(this, () => {
+                this.openReference.emit({
+                    id: this.el.id,
+                    leaf: this.leaf,
+                    metadata: this.metadata
+                });
+            });
+            _handleCheckedChange.set(this, (event) => {
+                event.stopPropagation();
+                const checked = event.target.checked;
+                this.checked = checked;
+                this.indeterminate = false; // Changing the checked value makes it no longer indeterminate
+                this.checkboxChange.emit({
+                    id: this.el.id,
+                    checked: this.checked,
+                    indeterminate: false
+                });
+            });
+            _renderImg.set(this, (cssClass, src) => (index.h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" })));
+            _handleDragStart.set(this, (event) => {
+                // Disallow drag when editing the caption
+                if (this.editing) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+                utils.removeDragImage(event);
+                event.dataTransfer.effectAllowed = "move";
+                this.dragState = "start";
+                this.itemDragStart.emit({
+                    elem: this.el,
+                    dragEvent: event
+                });
+            });
+            _handleDragEnd.set(this, () => {
+                // event.preventDefault();
+                // this.el.style.cursor = null;
+                this.dragState = "none";
+                this.itemDragEnd.emit();
+            });
+            _handleDrop.set(this, () => {
+                this.dragState = "none";
+            });
+            index.registerInstance(this, hostRef);
+            this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
+            this.checkboxToggleChange = index.createEvent(this, "checkboxToggleChange", 7);
+            this.itemDragStart = index.createEvent(this, "itemDragStart", 7);
+            this.itemDragEnd = index.createEvent(this, "itemDragEnd", 7);
+            this.loadLazyContent = index.createEvent(this, "loadLazyContent", 7);
+            this.modifyCaption = index.createEvent(this, "modifyCaption", 7);
+            this.openReference = index.createEvent(this, "openReference", 7);
+            this.selectedItemChange = index.createEvent(this, "selectedItemChange", 7);
+            this.caption = undefined;
+            this.checkbox = false;
+            this.checked = false;
+            this.customRender = false;
+            this.disabled = false;
+            this.dragDisabled = false;
+            this.dropDisabled = false;
+            this.dragState = "none";
+            this.downloading = false;
+            this.editable = undefined;
+            this.editing = false;
+            this.expandableButton = "decorative";
+            this.expandOnClick = true;
+            this.expanded = false;
+            this.lastItem = false;
+            this.lazyLoad = false;
+            this.leaf = false;
+            this.leftImgSrc = undefined;
+            this.level = INITIAL_LEVEL;
+            this.indeterminate = false;
+            this.metadata = undefined;
+            this.rightImgSrc = undefined;
+            this.selected = false;
+            this.showDownloadingSpinner = true;
+            this.showLines = "none";
+            this.toggleCheckboxes = false;
+        }
+        get el() { return index.getElement(this); }
+        updateChildrenCheckedValue(newValue) {
+            if (!this.toggleCheckboxes || this.leaf || __classPrivateFieldGet(this, _ignoreCheckboxChange, "f")) {
+                __classPrivateFieldSet(this, _ignoreCheckboxChange, false, "f");
                 return;
             }
-            event.preventDefault();
-            const commitEdition = event.code === ENTER_KEY;
-            this.removeEditMode(true, commitEdition)();
-        };
-        this.removeEditModeOnClick = (event) => {
-            // The click is executed outside the input and the pointer type is defined,
-            // meaning that the button click was not triggered by the Enter or Space keys
-            if (!event.composedPath().includes(this.inputRef) && event.pointerType) {
-                this.removeEditMode(false)();
-            }
-        };
-        this.removeEditMode = (shouldFocusHeader, commitEdition = false) => () => {
-            // When pressing the enter key in the input, the removeEditMode event is
-            // triggered twice (due to the headerRef.focus() triggering the onBlur
-            // event in the input), so we need to check if the edit mode was disabled
-            if (!this.editing) {
+            const treeItems = __classPrivateFieldGet(this, _getDirectTreeItems, "f").call(this);
+            treeItems.forEach(treeItem => {
+                if (treeItem.checked !== newValue || treeItem.indeterminate !== false) {
+                    treeItem.updateChecked(newValue, false);
+                }
+            });
+        }
+        handleEditingChange(isEditing) {
+            if (!isEditing) {
                 return;
             }
-            this.editing = false;
-            document.body.removeEventListener("click", this.removeEditModeOnClick, {
+            document.body.addEventListener("click", __classPrivateFieldGet(this, _removeEditModeOnClick, "f"), {
                 capture: true
             });
-            const newCaption = this.inputRef.value;
-            if (commitEdition && newCaption.trim() !== "") {
-                this.modifyCaption.emit({
-                    id: this.el.id,
-                    caption: newCaption
+            // Wait until the input is rendered to focus it
+            index.writeTask(() => {
+                requestAnimationFrame(() => {
+                    if (__classPrivateFieldGet(this, _inputRef, "f")) {
+                        __classPrivateFieldGet(this, _inputRef, "f").focus();
+                    }
+                });
+            });
+        }
+        handleExpandedChange(isExpanded) {
+            // Wait until all properties are updated before lazy loading. Otherwise, the
+            // lazyLoad property could be updated just after the executing of the function
+            setTimeout(() => {
+                __classPrivateFieldGet(this, _lazyLoadItems, "f").call(this, isExpanded);
+            });
+        }
+        handleLasItemChange(isLastItem) {
+            if (isLastItem && this.showLines) {
+                // Use RAF to set the observer after the render method has completed
+                requestAnimationFrame(() => {
+                    __classPrivateFieldGet(this, _setResizeObserver, "f").call(this);
                 });
             }
-            if (shouldFocusHeader) {
-                this.headerRef.focus();
+            else {
+                __classPrivateFieldGet(this, _disconnectObserver, "f").call(this);
             }
-        };
-        this.toggleExpand = (event) => {
-            event.stopPropagation();
-            if (!this.leaf) {
-                this.expanded = !this.expanded;
+        }
+        handleShowLinesChange(newShowLines) {
+            if (newShowLines && this.lastItem) {
+                __classPrivateFieldGet(this, _setResizeObserver, "f").call(this);
             }
-            this.selected = true;
-            this.selectedItemChange.emit(this.getSelectedInfo(helpers.mouseEventModifierKey(event), true));
-        };
-        this.getSelectedInfo = (ctrlKeyPressed, selected) => {
-            var _a;
-            return ({
-                ctrlKeyPressed: ctrlKeyPressed,
-                expanded: this.expanded,
-                id: this.el.id,
-                itemRef: this.el,
-                metadata: this.metadata,
-                parentId: (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.id,
-                selected: selected
-            });
-        };
-        this.handleActionDblClick = (event) => {
-            event.stopPropagation();
-            if (helpers.mouseEventModifierKey(event)) {
-                this.toggleSelected();
+            else {
+                __classPrivateFieldGet(this, _disconnectObserver, "f").call(this);
+            }
+        }
+        updateCheckboxValue(event) {
+            // No need to update the checkbox value based on the children checkbox
+            if (!this.toggleCheckboxes || this.el === event.target) {
                 return;
             }
-            this.emitOpenReference();
-            // The Control key is not pressed, so the control can be expanded
-            if (!this.leaf) {
-                this.toggleExpand(event);
+            const updatedCheck = event.detail.checked;
+            const treeItems = __classPrivateFieldGet(this, _getDirectTreeItems, "f").call(this);
+            // Check if all the items have the same value as the updated item
+            const allItemsHaveTheSameCheckedValue = treeItems.every(treeItem => treeItem.checked === updatedCheck);
+            const eventMustBeEmitted = this.checked !== updatedCheck ||
+                this.indeterminate !== !allItemsHaveTheSameCheckedValue;
+            __classPrivateFieldSet(this, _ignoreCheckboxChange, this.checked !== updatedCheck, "f");
+            this.checked = updatedCheck;
+            this.indeterminate = !allItemsHaveTheSameCheckedValue;
+            // Sync with the UI Model
+            if (eventMustBeEmitted) {
+                this.checkboxToggleChange.emit({
+                    id: this.el.id,
+                    checked: updatedCheck,
+                    indeterminate: !allItemsHaveTheSameCheckedValue
+                });
             }
-        };
+        }
         /**
-         * Event triggered by the following actions on the main button:
-         *   - Click
-         *   - Enter keydown
-         *   - Space keydown and keyup
+         * Focus the next item in the tree. If the control is expanded, it focuses
+         * the first subitem in its tree.
          */
-        this.handleActionClick = (event) => {
-            event.stopPropagation();
-            // Don't perform actions when editing
-            if (this.editing) {
+        async focusNextItem(ctrlKeyPressed) {
+            // Focus the first subitem if expanded
+            if (!this.leaf && this.expanded) {
+                const subItem = this.el.querySelector(FIRST_ENABLED_SUB_ITEM);
+                // The tree item could be empty or downloading subitem, so it is uncertain
+                // if the query won't fail
+                if (subItem) {
+                    subItem.setFocus(ctrlKeyPressed);
+                    return;
+                }
+            }
+            // Otherwise, focus the next sibling
+            this.focusNextSibling(ctrlKeyPressed);
+        }
+        /**
+         * Focus the next sibling item in the tree.
+         */
+        async focusNextSibling(ctrlKeyPressed) {
+            const nextSiblingItem = this.el
+                .nextElementSibling;
+            // Focus the next sibling, if exists
+            if (nextSiblingItem) {
+                // If the next sibling is disabled, ask for its next sibling
+                if (nextSiblingItem.disabled) {
+                    nextSiblingItem.focusNextItem(ctrlKeyPressed);
+                }
+                else {
+                    nextSiblingItem.setFocus(ctrlKeyPressed);
+                }
                 return;
             }
-            event.preventDefault();
-            // Click event
-            if (event.pointerType) {
-                this.toggleOrSelect(event);
+            // The item is the last one of the tree at the first level
+            if (this.level === INITIAL_LEVEL) {
                 return;
             }
-            this.emitOpenReference();
-            // Enter or space
-            this.toggleExpand(event);
-        };
+            // Otherwise, ask the parent to focus the next sibling
+            const parentItem = this.el.parentElement;
+            parentItem.focusNextSibling(ctrlKeyPressed);
+        }
         /**
-         * Event triggered by key events on the main button.
+         * Focus the previous item in the tree. If the previous item is expanded, it focuses
+         * the last subitem in its tree.
          */
-        this.handleActionKeyDown = (event) => {
-            // Only toggle if the Enter key was pressed with the Ctrl key
-            if (helpers.mouseEventModifierKey(event) && event.code === ENTER_KEY) {
-                event.stopPropagation();
-                this.toggleSelected();
+        async focusPreviousItem(ctrlKeyPressed) {
+            const previousSiblingItem = this.el
+                .previousElementSibling;
+            // Focus last item of the previous sibling
+            if (previousSiblingItem) {
+                previousSiblingItem.focusLastItem(ctrlKeyPressed);
+                return;
             }
-        };
-        this.handleCheckedChange = (event) => {
-            event.stopPropagation();
-            const checked = event.target.checked;
-            this.checked = checked;
-            this.indeterminate = false; // Changing the checked value makes it no longer indeterminate
-            this.checkboxChange.emit({
-                id: this.el.id,
-                checked: this.checked,
-                indeterminate: false
-            });
-        };
-        this.renderImg = (cssClass, src) => (index.h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
-        this.handleDragStart = (event) => {
-            // Disallow drag when editing the caption
-            if (this.editing) {
-                event.preventDefault();
-                event.stopPropagation();
+            // The item is the first one of the tree at the first level
+            if (this.level === INITIAL_LEVEL) {
                 return;
             }
-            // Remove drag image
-            event.dataTransfer.setDragImage(resetDragImage, 0, 0);
-            event.dataTransfer.effectAllowed = "move";
-            this.dragState = "start";
-            this.itemDragStart.emit({
-                elem: this.el,
-                dragEvent: event
-            });
-        };
-        this.handleDragEnd = () => {
-            // event.preventDefault();
-            // this.el.style.cursor = null;
-            this.dragState = "none";
-            this.itemDragEnd.emit();
-        };
-        this.handleDrop = () => {
-            this.dragState = "none";
-        };
-        index.registerInstance(this, hostRef);
-        this.checkboxChange = index.createEvent(this, "checkboxChange", 7);
-        this.checkboxToggleChange = index.createEvent(this, "checkboxToggleChange", 7);
-        this.itemDragStart = index.createEvent(this, "itemDragStart", 7);
-        this.itemDragEnd = index.createEvent(this, "itemDragEnd", 7);
-        this.loadLazyContent = index.createEvent(this, "loadLazyContent", 7);
-        this.modifyCaption = index.createEvent(this, "modifyCaption", 7);
-        this.openReference = index.createEvent(this, "openReference", 7);
-        this.selectedItemChange = index.createEvent(this, "selectedItemChange", 7);
-        this.caption = undefined;
-        this.checkbox = false;
-        this.checked = false;
-        this.customRender = false;
-        this.disabled = false;
-        this.dragDisabled = false;
-        this.dropDisabled = false;
-        this.dragState = "none";
-        this.downloading = false;
-        this.editable = undefined;
-        this.editing = false;
-        this.expanded = false;
-        this.lastItem = false;
-        this.lazyLoad = false;
-        this.leaf = false;
-        this.leftImgSrc = undefined;
-        this.level = INITIAL_LEVEL;
-        this.indeterminate = false;
-        this.metadata = undefined;
-        this.rightImgSrc = undefined;
-        this.selected = false;
-        this.showDownloadingSpinner = true;
-        this.showExpandableButton = true;
-        this.showLines = "none";
-        this.toggleCheckboxes = false;
-    }
-    get el() { return index.getElement(this); }
-    updateChildrenCheckedValue(newValue) {
-        if (!this.toggleCheckboxes || this.leaf || this.ignoreCheckboxChange) {
-            this.ignoreCheckboxChange = false;
-            return;
-        }
-        const treeItems = this.getDirectTreeItems();
-        treeItems.forEach(treeItem => {
-            if (treeItem.checked !== newValue || treeItem.indeterminate !== false) {
-                treeItem.updateChecked(newValue, false);
+            // Otherwise, set focus in the parent element
+            const parentItem = this.el.parentElement;
+            // Check if the parent is not disabled
+            if (parentItem.disabled) {
+                parentItem.focusPreviousItem(ctrlKeyPressed);
+                return;
             }
-        });
-    }
-    handleEditingChange(isEditing) {
-        if (!isEditing) {
-            return;
+            parentItem.setFocus(ctrlKeyPressed);
         }
-        document.body.addEventListener("click", this.removeEditModeOnClick, {
-            capture: true
-        });
-        // Wait until the input is rendered to focus it
-        index.writeTask(() => {
-            requestAnimationFrame(() => {
-                if (this.inputRef) {
-                    this.inputRef.focus();
+        /**
+         * Focus the last item in its subtree. If the control is not expanded, it
+         * focus the control.
+         */
+        async focusLastItem(ctrlKeyPressed) {
+            // Focus the last subitem if expanded and not lazy loading
+            if (!this.leaf && this.expanded) {
+                const lastSubItem = this.el.querySelector(LAST_SUB_ITEM);
+                // The tree item could be empty or downloading subitem, so it is uncertain
+                // if the query won't fail
+                if (lastSubItem) {
+                    lastSubItem.focusLastItem(ctrlKeyPressed);
+                    return;
                 }
-            });
-        });
-    }
-    handleExpandedChange(isExpanded) {
-        // Wait until all properties are updated before lazy loading. Otherwise, the
-        // lazyLoad property could be updated just after the executing of the function
-        setTimeout(() => {
-            this.lazyLoadItems(isExpanded);
-        });
-    }
-    handleLasItemChange(isLastItem) {
-        if (isLastItem && this.showLines) {
-            // Use RAF to set the observer after the render method has completed
-            requestAnimationFrame(() => {
-                this.setResizeObserver();
-            });
-        }
-        else {
-            this.disconnectObserver();
-        }
-    }
-    handleShowLinesChange(newShowLines) {
-        if (newShowLines && this.lastItem) {
-            this.setResizeObserver();
-        }
-        else {
-            this.disconnectObserver();
+            }
+            // If the last item is disabled, try to focus the previous sibling
+            if (this.disabled) {
+                this.focusPreviousItem(ctrlKeyPressed);
+                return;
+            }
+            // Otherwise, it focuses the control
+            this.setFocus(ctrlKeyPressed);
         }
-    }
-    updateCheckboxValue(event) {
-        // No need to update the checkbox value based on the children checkbox
-        if (!this.toggleCheckboxes || this.el === event.target) {
-            return;
+        /**
+         * Set focus in the control.
+         */
+        async setFocus(ctrlKeyPressed) {
+            __classPrivateFieldGet(this, _headerRef, "f").focus();
+            // Normal navigation auto selects the item.
+            if (!ctrlKeyPressed) {
+                __classPrivateFieldGet(this, _setSelected, "f").call(this);
+            }
         }
-        const updatedCheck = event.detail.checked;
-        const treeItems = this.getDirectTreeItems();
-        // Check if all the items have the same value as the updated item
-        const allItemsHaveTheSameCheckedValue = treeItems.every(treeItem => treeItem.checked === updatedCheck);
-        const eventMustBeEmitted = this.checked !== updatedCheck ||
-            this.indeterminate !== !allItemsHaveTheSameCheckedValue;
-        this.ignoreCheckboxChange = this.checked !== updatedCheck;
-        this.checked = updatedCheck;
-        this.indeterminate = !allItemsHaveTheSameCheckedValue;
-        // Sync with the UI Model
-        if (eventMustBeEmitted) {
+        /**
+         * Update `checked` and `indeterminate` properties.
+         */
+        async updateChecked(newChecked, newIndeterminate) {
+            this.checked = newChecked;
+            this.indeterminate = newIndeterminate;
+            // Emit the event to sync with the UI model, even if the item does not
+            // have toggleCheckboxes property
             this.checkboxToggleChange.emit({
                 id: this.el.id,
-                checked: updatedCheck,
-                indeterminate: !allItemsHaveTheSameCheckedValue
+                checked: newChecked,
+                indeterminate: newIndeterminate
             });
         }
-    }
-    /**
-     * Focus the next item in the tree. If the control is expanded, it focuses
-     * the first subitem in its tree.
-     */
-    async focusNextItem(ctrlKeyPressed) {
-        // Focus the first subitem if expanded
-        if (!this.leaf && this.expanded) {
-            const subItem = this.el.querySelector(FIRST_ENABLED_SUB_ITEM);
-            // The tree item could be empty or downloading subitem, so it is uncertain
-            // if the query won't fail
-            if (subItem) {
-                subItem.setFocus(ctrlKeyPressed);
-                return;
-            }
+        componentWillLoad() {
+            // Check if must lazy load
+            __classPrivateFieldGet(this, _lazyLoadItems, "f").call(this, this.expanded);
         }
-        // Otherwise, focus the next sibling
-        this.focusNextSibling(ctrlKeyPressed);
-    }
-    /**
-     * Focus the next sibling item in the tree.
-     */
-    async focusNextSibling(ctrlKeyPressed) {
-        const nextSiblingItem = this.el
-            .nextElementSibling;
-        // Focus the next sibling, if exists
-        if (nextSiblingItem) {
-            // If the next sibling is disabled, ask for its next sibling
-            if (nextSiblingItem.disabled) {
-                nextSiblingItem.focusNextItem(ctrlKeyPressed);
+        componentDidLoad() {
+            if (this.lastItem && this.showLines) {
+                __classPrivateFieldGet(this, _setResizeObserver, "f").call(this);
             }
-            else {
-                nextSiblingItem.setFocus(ctrlKeyPressed);
-            }
-            return;
-        }
-        // The item is the last one of the tree at the first level
-        if (this.level === INITIAL_LEVEL) {
-            return;
         }
-        // Otherwise, ask the parent to focus the next sibling
-        const parentItem = this.el.parentElement;
-        parentItem.focusNextSibling(ctrlKeyPressed);
-    }
-    /**
-     * Focus the previous item in the tree. If the previous item is expanded, it focuses
-     * the last subitem in its tree.
-     */
-    async focusPreviousItem(ctrlKeyPressed) {
-        const previousSiblingItem = this.el
-            .previousElementSibling;
-        // Focus last item of the previous sibling
-        if (previousSiblingItem) {
-            previousSiblingItem.focusLastItem(ctrlKeyPressed);
-            return;
-        }
-        // The item is the first one of the tree at the first level
-        if (this.level === INITIAL_LEVEL) {
-            return;
-        }
-        // Otherwise, set focus in the parent element
-        const parentItem = this.el.parentElement;
-        // Check if the parent is not disabled
-        if (parentItem.disabled) {
-            parentItem.focusPreviousItem(ctrlKeyPressed);
-            return;
-        }
-        parentItem.setFocus(ctrlKeyPressed);
-    }
-    /**
-     * Focus the last item in its subtree. If the control is not expanded, it
-     * focus the control.
-     */
-    async focusLastItem(ctrlKeyPressed) {
-        // Focus the last subitem if expanded and not lazy loading
-        if (!this.leaf && this.expanded) {
-            const lastSubItem = this.el.querySelector(LAST_SUB_ITEM);
-            // The tree item could be empty or downloading subitem, so it is uncertain
-            // if the query won't fail
-            if (lastSubItem) {
-                lastSubItem.focusLastItem(ctrlKeyPressed);
-                return;
+        disconnectedCallback() {
+            // If it was disconnected on edit mode, remove the body event handler
+            if (this.editing) {
+                __classPrivateFieldGet(this, _removeEditMode, "f").call(this, false);
             }
+            __classPrivateFieldGet(this, _disconnectObserver, "f").call(this);
         }
-        // If the last item is disabled, try to focus the previous sibling
-        if (this.disabled) {
-            this.focusPreviousItem(ctrlKeyPressed);
-            return;
-        }
-        // Otherwise, it focuses the control
-        this.setFocus(ctrlKeyPressed);
-    }
-    /**
-     * Set focus in the control.
-     */
-    async setFocus(ctrlKeyPressed) {
-        this.headerRef.focus();
-        // Normal navigation auto selects the item.
-        if (!ctrlKeyPressed) {
-            this.setSelected();
-        }
-    }
-    /**
-     * Update `checked` and `indeterminate` properties.
-     */
-    async updateChecked(newChecked, newIndeterminate) {
-        this.checked = newChecked;
-        this.indeterminate = newIndeterminate;
-        // Emit the event to sync with the UI model, even if the item does not
-        // have toggleCheckboxes property
-        this.checkboxToggleChange.emit({
-            id: this.el.id,
-            checked: newChecked,
-            indeterminate: newIndeterminate
-        });
-    }
-    getDirectTreeItems() {
-        return Array.from(this.el.querySelectorAll(DIRECT_TREE_ITEM_CHILDREN));
-    }
-    setResizeObserver() {
-        this.watcher = new ResizeObserver(() => {
-            const distanceToCheckbox = this.el.getBoundingClientRect().height -
-                this.headerRef.getBoundingClientRect().height / 2;
-            this.el.style.setProperty(DISTANCE_TO_CHECKBOX_CUSTOM_VAR, distanceToCheckbox + "px");
-        });
-        this.watcher.observe(this.el);
-        this.watcher.observe(this.headerRef);
-    }
-    disconnectObserver() {
-        if (!this.watcher) {
-            return;
+        render() {
+            const evenLevel = this.level % 2 === 0;
+            const expandableButtonVisible = !this.leaf && this.expandableButton !== "no";
+            const expandableButtonNotVisible = !this.leaf && this.expandableButton === "no";
+            const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
+            const hasContent = !this.leaf && !this.lazyLoad;
+            const showAllLines = this.showLines === "all" && this.level !== INITIAL_LEVEL;
+            const showLastLine = this.showLines === "last" &&
+                this.level !== INITIAL_LEVEL &&
+                this.lastItem;
+            return (index.h(index.Host, { role: "treeitem", "aria-level": this.level + 1, "aria-selected": this.selected ? "true" : null, class: {
+                    [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
+                    [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
+                    [TREE_ITEM_TAG_NAME + "--not-editing"]: !this.editing,
+                    [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
+                    [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
+                }, style: { "--level": `${this.level}` },
+                // Drag and drop
+                onDrop: acceptDrop ? __classPrivateFieldGet(this, _handleDrop, "f") : null }, index.h("button", { "aria-controls": hasContent ? EXPANDABLE_ID : null, "aria-expanded": hasContent ? this.expanded.toString() : null, class: {
+                    header: true,
+                    "header--selected": this.selected,
+                    "header--disabled": this.disabled,
+                    "header--expandable-offset": expandableButtonVisible,
+                    "header--checkbox-offset": expandableButtonNotVisible && this.checkbox,
+                    "header--even": evenLevel,
+                    "header--odd": !evenLevel,
+                    "header--even-expandable": evenLevel && expandableButtonVisible,
+                    "header--odd-expandable": !evenLevel && expandableButtonVisible,
+                    "header--level-0": this.level === INITIAL_LEVEL,
+                    "expandable-button-decorative": !this.leaf && this.expandableButton === "decorative",
+                    "expandable-button-decorative--collapsed": !this.leaf &&
+                        this.expandableButton === "decorative" &&
+                        !this.expanded
+                }, part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}${this.level === INITIAL_LEVEL ? " level-0" : ""}`, type: "button", disabled: this.disabled, onClick: __classPrivateFieldGet(this, _handleActionClick, "f"), onKeyDown: !this.editing ? __classPrivateFieldGet(this, _handleActionKeyDown, "f") : null,
+                // Drag and drop
+                draggable: !this.dragDisabled, onDragStart: __classPrivateFieldGet(this, _handleDragStart, "f"), onDragEnd: !this.dragDisabled ? __classPrivateFieldGet(this, _handleDragEnd, "f") : null, ref: el => (__classPrivateFieldSet(this, _headerRef, el, "f")) }, !this.leaf && this.expandableButton === "action" && (index.h("button", { type: "button", class: {
+                    "expandable-button": true,
+                    "expandable-button--expanded": this.expanded,
+                    "expandable-button--collapsed": !this.expanded
+                }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: __classPrivateFieldGet(this, _toggleExpand, "f") })), this.checkbox && (index.h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", exportparts: CHECKBOX_EXPORT_PARTS, part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: __classPrivateFieldGet(this, _handleCheckedChange, "f") })), this.customRender ? (index.h("slot", { name: "custom-content" })) : ([
+                index.h("div", { class: {
+                        action: true,
+                        "readonly-mode": !this.editing
+                    }, part: `action${!this.editing ? " readonly-mode" : ""}${!this.leaf && this.expanded ? " expanded" : ""}`, onDblClick: !this.editing ? __classPrivateFieldGet(this, _handleActionDblClick, "f") : null }, this.leftImgSrc &&
+                    __classPrivateFieldGet(this, _renderImg, "f").call(this, "left-img", this.leftImgSrc), this.editable && this.editing ? (index.h("input", { class: "edit-name", part: "edit-name", disabled: this.disabled, type: "text", value: this.caption, onBlur: __classPrivateFieldGet(this, _removeEditMode, "f").call(this, false), onKeyDown: __classPrivateFieldGet(this, _checkIfShouldRemoveEditMode, "f"), ref: el => (__classPrivateFieldSet(this, _inputRef, el, "f")) })) : (this.caption), this.rightImgSrc &&
+                    __classPrivateFieldGet(this, _renderImg, "f").call(this, "right-img", this.rightImgSrc)),
+                this.showDownloadingSpinner && !this.leaf && this.downloading && (index.h("div", { class: "downloading", part: "downloading" }))
+            ]), (showAllLines || showLastLine) && (index.h("div", { class: {
+                    "dashed-line": true,
+                    "last-all-line": showAllLines && this.lastItem,
+                    "last-line": showLastLine
+                }, part: `dashed-line${this.lastItem ? " last-all-line" : ""}` }))), hasContent && (index.h("div", { role: "group", "aria-busy": (!!this.downloading).toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: {
+                    expandable: true,
+                    "expandable--collapsed": !this.expanded,
+                    "expandable--lazy-loaded": !this.downloading
+                }, part: `expandable${this.expanded ? " expanded" : " collapsed"}${!this.downloading ? " lazy-loaded" : ""}` }, index.h("slot", null)))));
         }
-        this.watcher.disconnect();
-        this.watcher = null;
-    }
-    lazyLoadItems(expanded) {
-        if (!this.lazyLoad || !expanded) {
-            return;
-        }
-        // Load items
-        this.lazyLoad = false;
-        this.downloading = true;
-        this.loadLazyContent.emit(this.el.id);
-    }
-    toggleSelected() {
-        const selected = !this.selected;
-        this.selected = selected;
-        this.selectedItemChange.emit(this.getSelectedInfo(true, selected));
-    }
-    setSelected() {
-        this.selected = true;
-        this.selectedItemChange.emit(this.getSelectedInfo(false, true));
-    }
-    toggleOrSelect(event) {
-        if (helpers.mouseEventModifierKey(event)) {
-            this.toggleSelected();
-        }
-        else {
-            this.setSelected();
-        }
-    }
-    emitOpenReference() {
-        this.openReference.emit({
-            id: this.el.id,
-            leaf: this.leaf,
-            metadata: this.metadata
-        });
-    }
-    componentWillLoad() {
-        // Check if must lazy load
-        this.lazyLoadItems(this.expanded);
-        // Sync selected state with the main tree
-        if (this.selected) {
-            this.selectedItemChange.emit(this.getSelectedInfo(true, true));
-        }
-    }
-    componentDidLoad() {
-        if (this.lastItem && this.showLines) {
-            this.setResizeObserver();
-        }
-    }
-    disconnectedCallback() {
-        // If it was disconnected on edit mode, remove the body event handler
-        if (this.editing) {
-            this.removeEditMode(false);
-        }
-        this.disconnectObserver();
-    }
-    render() {
-        const evenLevel = this.level % 2 === 0;
-        const expandableButtonVisible = !this.leaf && this.showExpandableButton;
-        const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
-        const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
-        const hasContent = !this.leaf && !this.lazyLoad;
-        const showAllLines = this.showLines === "all" && this.level !== INITIAL_LEVEL;
-        const showLastLine = this.showLines === "last" &&
-            this.level !== INITIAL_LEVEL &&
-            this.lastItem;
-        return (index.h(index.Host, { role: "treeitem", "aria-level": this.level + 1, "aria-selected": this.selected ? "true" : null, class: {
-                [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
-                [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
-                [TREE_ITEM_TAG_NAME + "--not-editing"]: !this.editing,
-                [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
-                [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
-            }, style: { "--level": `${this.level}` },
-            // Drag and drop
-            onDrop: acceptDrop ? this.handleDrop : null }, index.h("button", { "aria-controls": hasContent ? EXPANDABLE_ID : null, "aria-expanded": hasContent ? this.expanded.toString() : null, class: {
-                header: true,
-                "header--selected": this.selected,
-                "header--disabled": this.disabled,
-                "header--expandable-offset": expandableButtonVisible,
-                "header--checkbox-offset": expandableButtonNotVisible && this.checkbox,
-                "header--even": evenLevel,
-                "header--odd": !evenLevel,
-                "header--even-expandable": evenLevel && expandableButtonVisible,
-                "header--odd-expandable": !evenLevel && expandableButtonVisible,
-                "header--level-0": this.level === INITIAL_LEVEL
-            }, part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}${this.level === INITIAL_LEVEL ? " level-0" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
-            // Drag and drop
-            draggable: !this.dragDisabled, onDragStart: this.handleDragStart, onDragEnd: !this.dragDisabled ? this.handleDragEnd : null, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (index.h("button", { type: "button", class: {
-                "expandable-button": true,
-                "expandable-button--expanded": this.expanded,
-                "expandable-button--collapsed": !this.expanded
-            }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (index.h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", exportparts: CHECKBOX_EXPORT_PARTS, part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (index.h("slot", { name: "custom-content" })) : ([
-            index.h("div", { class: {
-                    action: true,
-                    "readonly-mode": !this.editing
-                }, part: `action${!this.editing ? " readonly-mode" : ""}${!this.leaf && this.expanded ? " expanded" : ""}`, onDblClick: !this.editing ? this.handleActionDblClick : null }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editable && this.editing ? (index.h("input", { class: "edit-name", part: "edit-name", disabled: this.disabled, type: "text", value: this.caption, onBlur: this.removeEditMode(false), onKeyDown: this.checkIfShouldRemoveEditMode, ref: el => (this.inputRef = el) })) : (this.caption), this.rightImgSrc &&
-                this.renderImg("right-img", this.rightImgSrc)),
-            this.showDownloadingSpinner && !this.leaf && this.downloading && (index.h("div", { class: "downloading", part: "downloading" }))
-        ]), (showAllLines || showLastLine) && (index.h("div", { class: {
-                "dashed-line": true,
-                "last-all-line": showAllLines && this.lastItem,
-                "last-line": showLastLine
-            }, part: `dashed-line${this.lastItem ? " last-all-line" : ""}` }))), hasContent && (index.h("div", { role: "group", "aria-busy": (!!this.downloading).toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: {
-                expandable: true,
-                "expandable--collapsed": !this.expanded,
-                "expandable--lazy-loaded": !this.downloading
-            }, part: `expandable${this.expanded ? " expanded" : " collapsed"}${!this.downloading ? " lazy-loaded" : ""}` }, index.h("slot", null)))));
-    }
-    static get watchers() { return {
-        "checked": ["updateChildrenCheckedValue"],
-        "editing": ["handleEditingChange"],
-        "expanded": ["handleExpandedChange"],
-        "lastItem": ["handleLasItemChange"],
-        "showLines": ["handleShowLinesChange"]
-    }; }
-};
+        static get watchers() { return {
+            "checked": ["updateChildrenCheckedValue"],
+            "editing": ["handleEditingChange"],
+            "expanded": ["handleExpandedChange"],
+            "lastItem": ["handleLasItemChange"],
+            "showLines": ["handleShowLinesChange"]
+        }; }
+    },
+    _watcher = new WeakMap(),
+    _ignoreCheckboxChange = new WeakMap(),
+    _headerRef = new WeakMap(),
+    _inputRef = new WeakMap(),
+    _getDirectTreeItems = new WeakMap(),
+    _setResizeObserver = new WeakMap(),
+    _disconnectObserver = new WeakMap(),
+    _checkIfShouldRemoveEditMode = new WeakMap(),
+    _removeEditModeOnClick = new WeakMap(),
+    _removeEditMode = new WeakMap(),
+    _toggleExpand = new WeakMap(),
+    _lazyLoadItems = new WeakMap(),
+    _toggleSelected = new WeakMap(),
+    _setSelected = new WeakMap(),
+    _toggleOrSelect = new WeakMap(),
+    _getSelectedInfo = new WeakMap(),
+    _handleActionDblClick = new WeakMap(),
+    _handleActionClick = new WeakMap(),
+    _handleActionKeyDown = new WeakMap(),
+    _emitOpenReference = new WeakMap(),
+    _handleCheckedChange = new WeakMap(),
+    _renderImg = new WeakMap(),
+    _handleDragStart = new WeakMap(),
+    _handleDragEnd = new WeakMap(),
+    _handleDrop = new WeakMap(),
+    _a);
 ChTreeViewItem.style = treeViewItemCss;
 
 exports.ch_checkbox = CheckBox;