@genexus/genexus-ide-ui 0.0.30 → 0.0.31

package/dist/esm/ch-tree-x_3.entry.js

@@ -1,23 +1,41 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask } from './index-0da01575.js';
 import { m as mouseEventModifierKey } from './helpers-56190205.js';
 
-const treeXCss = "ch-tree-x{display:flex}ch-tree-x.ch-tree-x-dragging-item :not(.ch-tree-x-list-item--accept-drop){pointer-events:none}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--accept-drop{pointer-events:all}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
+const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
+  const mousePositionY = event.clientY - container.getBoundingClientRect().top;
+  const containerHeight = container.clientHeight;
+  const mouseAtTheTop = mousePositionY <= scrollThreshold;
+  const mouseAtTheBottom = mousePositionY > containerHeight - scrollThreshold;
+  if (mouseAtTheTop || mouseAtTheBottom) {
+    const scrollAmount = mouseAtTheTop
+      ? mousePositionY - scrollThreshold
+      : mousePositionY - (containerHeight - scrollThreshold);
+    // Adjust container scroll position
+    container.scrollTop += scrollAmount / scrollSpeed;
+  }
+};
+
+const treeXCss = "ch-tree-x{display:flex;position:relative;overflow:auto}ch-tree-x>ch-tree-x-list{position:absolute;inset:0;min-width:max-content}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
 
 const TREE_ITEM_TAG_NAME$1 = "ch-tree-x-list-item";
 const TREE_LIST_TAG_NAME = "ch-tree-x-list";
 // Selectors
 const TREE_LIST_AND_ITEM_SELECTOR = TREE_LIST_TAG_NAME + "," + TREE_ITEM_TAG_NAME$1;
 // const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
+const TEXT_FORMAT = "text/plain";
 const ARROW_DOWN_KEY = "ArrowDown";
 const ARROW_UP_KEY = "ArrowUp";
 const EDIT_KEY = "F2";
 const isExecutedInTree = (event, el) => event.composedPath().includes(el);
 const treeItemIsInEditMode = () => document.activeElement.editing;
+const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
 const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-x";
 const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-y";
 const ChTreeX = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
+    this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
     this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     this.itemsDropped = createEvent(this, "itemsDropped", 7);
     // @todo TODO: Check if key codes works in Safari
@@ -46,13 +64,18 @@ const ChTreeX = class {
         document.activeElement.editing = true;
       }
     };
+    this.draggingSelectedItems = false;
     this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
-    this.lastPageX = 0;
-    this.lastPageY = 0;
     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.draggingItem = false;
+    this.draggingInTheDocument = false;
+    this.draggingInTree = false;
     /**
      * Level in the tree at which the control is placed.
      */
@@ -66,54 +89,41 @@ const ChTreeX = class {
      * over in a subtree to open it when dragging.
      */
     this.openSubTreeCountdown = 750;
+    /**
+     * `true` to scroll in the tree when dragging an item near the edges of the
+     * tree.
+     */
+    this.scrollToEdgeOnDrag = true;
     /**
      * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = false;
+    this.showLines = "none";
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
      */
     this.waitDropProcessing = false;
-    this.trackItemDragEnter = (event) => {
-      event.stopPropagation();
-      const currentTarget = event.target;
-      // Don't mark droppable zones if they are the dragged items or their direct parents
-      if (!this.validDroppableZone(currentTarget.id)) {
-        return;
-      }
-      // Check if it is a valid item
-      if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1) {
-        return;
-      }
-      const treeItem = currentTarget;
-      treeItem.dragState = "enter";
-      this.openSubTreeAfterCountdown(treeItem);
-    };
-    this.validDroppableZone = (draggedItemId) => !this.draggedIds.includes(draggedItemId) &&
-      !this.draggedParentIds.includes(draggedItemId);
-    this.trackItemDragLeave = (event) => {
-      const currentTarget = event.target;
-      if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1) {
-        return;
-      }
-      const treeItem = currentTarget;
-      treeItem.dragState = "none";
-      this.cancelSubTreeOpening(treeItem);
-    };
     this.trackItemDrag = (event) => {
       event.preventDefault();
-      this.lastPageX = event.pageX;
-      this.lastPageY = event.pageY;
+      this.lastDragEvent = 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.lastPageX}px`);
-        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastPageY}px`);
+        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageX}px`);
+        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageY}px`);
+      });
+    };
+    this.fixScrollPositionOnDrag = () => {
+      if (!this.draggingInTree || !this.lastDragEvent) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        scrollToEdge(this.lastDragEvent, this.el, 10, 30);
+        requestAnimationFrame(this.fixScrollPositionOnDrag);
       });
     };
     this.handleKeyDownEvents = (event) => {
@@ -148,37 +158,26 @@ const ChTreeX = class {
       itemRef.scrollIntoView();
     });
   }
-  // /**
-  //  * This method is used to toggle a tree item by the tree item id/ids.
-  //  *
-  //  * @param treeItemIds An array id the tree items to be toggled.
-  //  * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
-  //  * @returns The modified items after the method was called.
-  //  */
-  // @Method()
-  // async toggleItems(
-  //   treeItemIds: string[],
-  //   expand?: boolean
-  // ): Promise<ExpandedTreeItemInfo[]> {
-  //   if (!treeItemIds) {
-  //     return [];
-  //   }
-  //   const allTreeItems = Array.from(
-  //     this.el.querySelectorAll(TREE_ITEM_TAG_NAME)
-  //   );
-  //   const modifiedTreeItems: ExpandedTreeItemInfo[] = [];
-  //   treeItemIds.forEach(treeItemId => {
-  //     const treeItem = allTreeItems.find(item => treeItemId === item.id);
-  //     if (treeItem) {
-  //       treeItem.expanded = expand ?? !treeItem.expanded;
-  //       modifiedTreeItems.push({
-  //         id: treeItem.id,
-  //         expanded: treeItem.expanded
-  //       });
-  //     }
-  //   });
-  //   return modifiedTreeItems;
-  // }
+  /**
+   * 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 updateValidDroppableZone(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";
+    }
+  }
   // /**
   //  * Returns an array of the selected tree items, providing the id, caption and
   //  * selected status.
@@ -194,98 +193,160 @@ const ChTreeX = class {
   //     selected: item.selected
   //   }));
   // }
+  // 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 },
+      draggedItems: draggedItems,
+      dropInTheSameTree: this.draggingInTree
+    });
+  }
   handleItemDragStart(event) {
     document.body.addEventListener("dragover", this.trackItemDrag, {
       capture: true
     });
     this.currentDraggedItem = event.target;
     this.updateDragInfo(event.detail);
-    this.el.addEventListener("dragenter", this.trackItemDragEnter, {
-      capture: true,
-      passive: true
-    });
-    this.el.addEventListener("dragleave", this.trackItemDragLeave, {
-      capture: true,
-      passive: true
-    });
-    // Wait until the custom var values are updated to avoid flickering
-    setTimeout(() => {
-      this.draggingItem = true;
-    }, 10);
+    this.draggingInTree = true;
+    if (this.scrollToEdgeOnDrag) {
+      this.fixScrollPositionOnDrag();
+    }
   }
   handleItemDragEnd() {
-    this.draggingItem = false;
+    this.draggingInTree = false;
     document.body.removeEventListener("dragover", this.trackItemDrag, {
       capture: true
     });
-    this.el.removeEventListener("dragenter", this.trackItemDragEnter, {
-      capture: true
-    });
-    this.el.removeEventListener("dragleave", this.trackItemDragLeave, {
-      capture: true
-    });
     // Reset not allowed droppable ids
     this.resetVariables();
   }
-  handleItemDrop(event) {
-    event.stopPropagation();
-    this.cancelSubTreeOpening(null, true);
-    const selectedItemEl = event.target;
-    if (!this.validDroppableZone(selectedItemEl.id)) {
-      return;
-    }
-    this.itemsDropped.emit(event.detail);
-  }
   handleSelectedItemChange(event) {
     event.stopPropagation();
     const selectedItemInfo = event.detail;
     const selectedItemEl = event.target;
     this.handleItemSelection(selectedItemEl, selectedItemInfo);
   }
-  openSubTreeAfterCountdown(treeItem) {
-    this.cancelSubTreeOpening(treeItem);
-    if (treeItem.leaf || treeItem.expanded) {
+  validDroppableZone(event) {
+    const containerTarget = event.target;
+    // When dragging in the same tree, don't mark droppable zones if they are
+    // the dragged items or their direct parents
+    if (this.draggingInTree &&
+      (this.draggedIds.includes(containerTarget.id) ||
+        this.draggedParentIds.includes(containerTarget.id))) {
+      return "invalid";
+    }
+    const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
+    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    if (droppableZoneState != null) {
+      return droppableZoneState;
+    }
+    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;
     }
-    this.lastOpenSubTreeItem = treeItem;
     this.openSubTreeTimeout = setTimeout(() => {
-      treeItem.expanded = true;
+      currentTarget.expanded = true;
+      this.expandedItemChange.emit({ id: currentTarget.id, expanded: true });
     }, this.openSubTreeCountdown);
   }
-  cancelSubTreeOpening(treeItem, forceClear = false) {
-    if (this.lastOpenSubTreeItem === treeItem || forceClear) {
-      clearTimeout(this.openSubTreeTimeout);
-    }
-  }
   resetVariables() {
     this.draggedIds = [];
     this.draggedParentIds = [];
   }
   /**
-   * Update the dataTransfer in the drag event to store the ids of the dragged
-   * items. Also it updates the visual information of the dragged items.
+   * Update 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.
    */
   updateDragInfo(dragInfo) {
     const draggedElement = dragInfo.elem;
     const isDraggingSelectedItems = this.selectedItemsInfo.has(draggedElement.id);
-    let joinedDraggedIds;
+    this.draggingSelectedItems = isDraggingSelectedItems;
+    let dataTransferInfo = [];
     if (isDraggingSelectedItems) {
       const selectedItemKeys = [...this.selectedItemsInfo.keys()];
       const selectedItemCount = selectedItemKeys.length;
       this.draggedIds = selectedItemKeys;
-      joinedDraggedIds = selectedItemKeys.join(",");
+      dataTransferInfo = [...this.selectedItemsInfo.values()].map(el => ({
+        id: el.id,
+        metadata: el.metadata
+      }));
       this.dragInfo =
         selectedItemCount === 1
           ? draggedElement.caption
           : selectedItemCount.toString();
     }
     else {
-      joinedDraggedIds = draggedElement.id;
-      this.draggedIds = [joinedDraggedIds];
+      dataTransferInfo = [
+        { id: draggedElement.id, metadata: draggedElement.metadata }
+      ];
+      this.draggedIds = [draggedElement.id];
       this.dragInfo = draggedElement.caption;
     }
     this.getDirectParentsOfDraggableItems(isDraggingSelectedItems);
-    dragInfo.dataTransfer.setData("text/plain", joinedDraggedIds);
+    // Update drag event info
+    const data = JSON.stringify(dataTransferInfo);
+    dragInfo.dataTransfer.setData(TEXT_FORMAT, data);
   }
   getDirectParentsOfDraggableItems(draggingSelectedItems) {
     if (!draggingSelectedItems) {
@@ -342,9 +403,10 @@ const ChTreeX = class {
   }
   render() {
     return (h(Host, { class: {
-        "ch-tree-x-dragging-item": this.draggingItem,
+        "ch-tree-x-dragging-item": this.draggingInTheDocument,
+        "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
         "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
-      } }, h("slot", null), this.draggingItem && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
+      } }, h("slot", null), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -370,8 +432,13 @@ const ChTreeListX = class {
      * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = true;
+    this.showLines = "none";
     this.updateLastItemDashedLine = () => {
+      // @todo WA to avoid StencilJS' bug. The showLines Watch is dispatched
+      // before the componentDidLoad lifecycle method completes
+      if (!this.slotRef) {
+        return;
+      }
       const treeItems = this.slotRef.assignedElements();
       if (treeItems.length === 0) {
         return;
@@ -385,7 +452,7 @@ const ChTreeListX = class {
   }
   handleShowLinesChange(newValue) {
     // Displayed items may have changed since the last time that `showLines === true`
-    if (newValue) {
+    if (newValue !== "none" && this.level !== 0) {
       this.updateLastItemDashedLine();
     }
   }
@@ -402,7 +469,7 @@ const ChTreeListX = class {
     this.showLines = mainTreeRef$1.showLines;
   }
   render() {
-    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", { onSlotchange: this.showLines && this.level !== 0
+    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", { onSlotchange: this.showLines !== "none" && this.level !== 0
         ? this.updateLastItemDashedLine
         : null, ref: el => (this.slotRef = el) })));
   }
@@ -413,7 +480,7 @@ const ChTreeListX = class {
 };
 ChTreeListX.style = treeXListCss;
 
-const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:12px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 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:var(--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(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--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(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--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(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\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(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:var(--inset-inline-start);height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - 4px );border:0 dashed #a9a9a9;border-block-end-width:1px;pointer-events:none;content-visibility:hidden;contain-intrinsic-size:auto 100px}.last-dashed-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px;pointer-events:none}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--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{margin-inline-end:5px}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em}.left-img{grid-area:left-img;margin-inline-end:6px}.right-img{grid-area:right-img;margin-inline-start:6px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;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-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
+const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--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(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--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(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--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(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\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(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed #a9a9a9;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(--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(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--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{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.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:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;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-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
 
 const resetDragImage = new Image();
 // Selectors
@@ -435,7 +502,6 @@ const ChTreeXListItem = class {
     this.checkboxChange = createEvent(this, "checkboxChange", 7);
     this.itemDragStart = createEvent(this, "itemDragStart", 7);
     this.itemDragEnd = createEvent(this, "itemDragEnd", 7);
-    this.itemDrop = createEvent(this, "itemDrop", 7);
     this.loadLazyContent = createEvent(this, "loadLazyContent", 7);
     this.modifyCaption = createEvent(this, "modifyCaption", 7);
     this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
@@ -452,6 +518,11 @@ const ChTreeXListItem = class {
      * Only works if `checkbox = true`
      */
     this.checked = false;
+    /**
+     * Set this attribute if you want to set a custom render for the control, by
+     * passing a slot.
+     */
+    this.customRender = false;
     /**
      * This attribute lets you specify if the element is disabled.
      * If disabled, it will not fire any user interaction related event
@@ -517,7 +588,7 @@ const ChTreeXListItem = class {
      * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = true;
+    this.showLines = "none";
     /**
      * Set this attribute if you want all the children item's checkboxes to be
      * checked when the parent item checkbox is checked, or to be unchecked when
@@ -574,6 +645,7 @@ const ChTreeXListItem = class {
         goToReference: false,
         id: this.el.id,
         itemRef: this.el,
+        metadata: this.metadata,
         parentId: this.el.parentElement.parentElement.id,
         selected: true
       });
@@ -626,14 +698,14 @@ const ChTreeXListItem = class {
     };
     this.renderImg = (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
     this.handleDragStart = (event) => {
-      event.stopPropagation();
       // Disallow drag when editing the caption
       if (this.editing) {
         event.preventDefault();
         return;
       }
+      // Remove drag image
       event.dataTransfer.setDragImage(resetDragImage, 0, 0);
-      // this.el.style.cursor = "move";
+      event.dataTransfer.effectAllowed = "move";
       this.dragState = "start";
       this.itemDragStart.emit({
         elem: this.el,
@@ -646,13 +718,8 @@ const ChTreeXListItem = class {
       this.dragState = "none";
       this.itemDragEnd.emit();
     };
-    this.handleDrop = (event) => {
-      event.stopPropagation();
+    this.handleDrop = () => {
       this.dragState = "none";
-      this.itemDrop.emit({
-        dropItemId: this.el.id,
-        dataTransfer: event.dataTransfer
-      });
     };
   }
   updateChildrenCheckedValue(newValue) {
@@ -855,6 +922,7 @@ const ChTreeXListItem = class {
       goToReference: false,
       id: this.el.id,
       itemRef: this.el,
+      metadata: this.metadata,
       parentId: this.el.parentElement.parentElement.id,
       selected: selected
     });
@@ -867,6 +935,7 @@ const ChTreeXListItem = class {
       goToReference: goToReference,
       id: this.el.id,
       itemRef: this.el,
+      metadata: this.metadata,
       parentId: this.el.parentElement.parentElement.id,
       selected: true
     });
@@ -917,11 +986,13 @@ const ChTreeXListItem = class {
     const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
     const acceptDrop = !this.leaf && this.dragState !== "start";
     const hasContent = !this.leaf && !this.lazyLoad;
+    const showAllLines = this.showLines === "all" && this.level !== 0;
+    const showLastLine = this.showLines === "last" && this.level !== 0 && this.lastItem;
     return (h(Host, { role: "treeitem", "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 + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
-        [TREE_ITEM_TAG_NAME + "--accept-drop"]: acceptDrop
+        [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
       }, style: { "--level": `${this.level}` },
       // Drag and drop
       onDrop: acceptDrop ? this.handleDrop : null }, h("button", { "aria-controls": hasContent ? EXPANDABLE_ID : null, "aria-expanded": hasContent ? this.expanded.toString() : null, class: {
@@ -941,10 +1012,18 @@ const ChTreeXListItem = 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 && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", 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 })), h("div", { class: {
-        action: true,
-        "readonly-mode": !this.editing
-      }, onDblClick: !this.leaf ? this.handleActionDblClick : null }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editing ? (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 && (h("div", { class: "downloading", part: "downloading" })), this.showLines && this.level !== 0 && (h("div", { class: { "dashed-line": true, "last-dashed-line": this.lastItem }, part: `dashed-line${this.lastItem ? " last-dashed-line" : ""}` }))), hasContent && (h("div", { "aria-busy": this.downloading.toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: { expandable: true, expanded: this.expanded }, part: `expandable${this.expanded ? " expanded" : ""}` }, h("slot", { name: "tree" })))));
+      }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", 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 ? (h("slot", { name: "custom-content" })) : ([
+      h("div", { class: {
+          action: true,
+          "readonly-mode": !this.editing
+        }, part: `action ${!this.editing ? "readonly-mode" : ""}`, onDblClick: !this.leaf && !this.editing ? this.handleActionDblClick : null }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editing ? (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 && (h("div", { class: "downloading", part: "downloading" }))
+    ]), (showAllLines || showLastLine) && (h("div", { class: {
+        "dashed-line": true,
+        "last-all-line": showAllLines && this.lastItem,
+        "last-line": showLastLine
+      }, part: `dashed-line${this.lastItem ? " last-all-line" : ""}` }))), hasContent && (h("div", { "aria-busy": this.downloading.toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: { expandable: true, expanded: this.expanded }, part: `expandable${this.expanded ? " expanded" : ""}` }, h("slot", { name: "tree" })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {