@genexus/genexus-ide-ui 0.0.62 → 0.0.64

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

@@ -1,1535 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask, a as getAssetPath, f as forceUpdate } from './index-0da01575.js';
-import { f as focusComposedPath, m as mouseEventModifierKey } from './helpers-1ecd5e26.js';
-
-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;width:100%;overflow:auto}ch-tree-x>.ch-tree-x-container{position:absolute;inset:0}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{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-container{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_TAG_NAME = "ch-tree-x";
-// Selectors
-// 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 isTreeItem = (element) => element.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1;
-const getFocusedTreeItem = () => focusComposedPath().find(isTreeItem);
-const canMoveTreeItemFocus = (treeItem) => treeItem && !treeItem.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.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-    this.itemsDropped = createEvent(this, "itemsDropped", 7);
-    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
-    // @todo TODO: Check if key codes works in Safari
-    this.keyDownEvents = {
-      [ARROW_DOWN_KEY]: event => {
-        const treeItem = getFocusedTreeItem();
-        if (!canMoveTreeItemFocus(treeItem)) {
-          return;
-        }
-        event.preventDefault();
-        treeItem.focusNextItem(mouseEventModifierKey(event));
-      },
-      [ARROW_UP_KEY]: event => {
-        const treeItem = getFocusedTreeItem();
-        if (!canMoveTreeItemFocus(treeItem)) {
-          return;
-        }
-        event.preventDefault();
-        treeItem.focusPreviousItem(mouseEventModifierKey(event));
-      },
-      [EDIT_KEY]: event => {
-        const treeItem = getFocusedTreeItem();
-        if (!treeItem || !treeItem.editable) {
-          return;
-        }
-        event.preventDefault();
-        treeItem.editing = true;
-      }
-    };
-    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.draggingInTheDocument = false;
-    this.draggingInTree = false;
-    /**
-     * Set this attribute if you want to allow multi selection of the items.
-     */
-    this.multiSelection = false;
-    /**
-     * This property lets you specify the time (in ms) that the mouse must be
-     * 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;
-    /**
-     * This property lets you specify if the tree is waiting to process the drop
-     * of items.
-     */
-    this.waitDropProcessing = false;
-    this.trackItemDrag = (event) => {
-      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.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);
-      });
-    };
-  }
-  // /**
-  //  * 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 HTMLChTreeXListItemElement[];
-  //   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();
-  }
-  /**
-   * Only sync the info about the selected items. It does not update the state
-   * of the previous selected items.
-   */
-  handleSelectedItemSync(event) {
-    event.stopPropagation();
-    const selectedItemInfo = event.detail;
-    // If the item is selected, add it to list
-    if (selectedItemInfo.selected) {
-      this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
-    }
-    else {
-      this.selectedItemsInfo.delete(selectedItemInfo.id);
-    }
-  }
-  handleSelectedItemChange(event) {
-    event.stopPropagation();
-    const selectedItemInfo = event.detail;
-    const selectedItemEl = event.target;
-    this.handleItemSelection(selectedItemEl, 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}#${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;
-    }
-    // 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";
-    }
-    // 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";
-    }
-    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.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;
-    }
-    const droppableZoneState = this.validDroppableZone(event);
-    if (droppableZoneState === "invalid" ||
-      droppableZoneState === "temporal-invalid") {
-      event.dataTransfer.dropEffect = "none";
-    }
-  }
-  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();
-    }
-    else {
-      dragIsEnabledForAllItems = !draggedElement.dragDisabled;
-      dataTransferInfo = [
-        { id: draggedElement.id, metadata: draggedElement.metadata }
-      ];
-      this.draggedIds = [draggedElement.id];
-      this.dragInfo = draggedElement.caption;
-    }
-    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);
-      }
-      return;
-    }
-    // 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);
-      }
-    });
-  }
-  handleItemSelection(selectedItemEl, selectedItemInfo) {
-    // If the Control key was not pressed or multi selection is disabled,
-    // remove all selected items
-    if (!selectedItemInfo.ctrlKeyPressed || !this.multiSelection) {
-      // Don't update the state of the selected item if no needed
-      this.selectedItemsInfo.delete(selectedItemInfo.id);
-      this.selectedItemsInfo.forEach(treeItem => {
-        treeItem.itemRef.selected = false;
-      });
-      this.clearSelectedItems();
-      // Re-select the item
-      selectedItemEl.selected = selectedItemInfo.selected;
-    }
-    // If the item is selected, add it to list
-    if (selectedItemInfo.selected) {
-      this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
-    }
-    // Sync with UI model
-    this.selectedItemsChange.emit(this.selectedItemsInfo);
-  }
-  clearSelectedItems() {
-    this.selectedItemsInfo.clear();
-  }
-  disconnectedCallback() {
-    this.resetVariables();
-    // Remove dragover body event
-    this.handleItemDragEnd();
-  }
-  render() {
-    return (h(Host, { class: {
-        "ch-tree-x-dragging-item": this.draggingInTheDocument,
-        "ch-tree-x-not-dragging-item": !this.draggingInTheDocument,
-        "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
-        "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
-      } }, h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-x-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
-  }
-  get el() { return getElement(this); }
-};
-ChTreeX.style = treeXCss;
-
-const treeXListItemCss = ":where(button){all:unset;display:flex;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 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(--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;cursor:pointer;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;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:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.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;content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
-
-const resetDragImage = new Image();
-const INITIAL_LEVEL = 0;
-// Selectors
-const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
-const DIRECT_TREE_ITEM_CHILDREN = `:scope>${TREE_ITEM_TAG_NAME}`;
-const FIRST_ENABLED_SUB_ITEM = `${TREE_ITEM_TAG_NAME}:not([disabled])`;
-const LAST_SUB_ITEM = `:scope>${TREE_ITEM_TAG_NAME}:last-child`;
-// Keys
-const EXPANDABLE_ID = "expandable";
-const ENTER_KEY = "Enter";
-const ESCAPE_KEY = "Escape";
-// Export Parts
-const getCheckboxExportPart = (part) => `${part}:checkbox__${part}`;
-const CHECKBOX_EXPORT_PARTS = [
-  "container",
-  "input",
-  "option",
-  "checked",
-  "indeterminate"
-]
-  .map(getCheckboxExportPart)
-  .join(",");
-const ChTreeXListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.checkboxChange = createEvent(this, "checkboxChange", 7);
-    this.checkboxToggleChange = createEvent(this, "checkboxToggleChange", 7);
-    this.itemDragStart = createEvent(this, "itemDragStart", 7);
-    this.itemDragEnd = createEvent(this, "itemDragEnd", 7);
-    this.loadLazyContent = createEvent(this, "loadLazyContent", 7);
-    this.modifyCaption = createEvent(this, "modifyCaption", 7);
-    this.openReference = createEvent(this, "openReference", 7);
-    this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
-    this.selectedItemSync = createEvent(this, "selectedItemSync", 7);
-    /**
-     * Useful to ignore the checkbox change when it was committed from a children.
-     */
-    this.ignoreCheckboxChange = false;
-    /**
-     * Set this attribute if you want display a checkbox in the control.
-     */
-    this.checkbox = false;
-    /**
-     * Set this attribute if you want the checkbox to be checked by default.
-     * 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
-     * (for example, click event).
-     */
-    this.disabled = false;
-    /**
-     * This attribute lets you specify if the drag operation is disabled in the
-     * control. If `true`, the control can't be dragged.
-     */
-    this.dragDisabled = false;
-    /**
-     * This attribute lets you specify if the drop operation is disabled in the
-     * control. If `true`, the control won't accept any drops.
-     */
-    this.dropDisabled = false;
-    /**
-     * This property lets you define the current state of the item when it's
-     * being dragged.
-     */
-    this.dragState = "none";
-    /**
-     * This attribute lets you specify when items are being lazy loaded in the
-     * control.
-     */
-    this.downloading = false;
-    /**
-     * Set this attribute when the item is in edit mode
-     */
-    this.editing = false;
-    /**
-     * If the item has a sub-tree, this attribute determines if the subtree is
-     * displayed.
-     */
-    this.expanded = false;
-    /**
-     * This attribute specifies if the control is the last items in its subtree
-     */
-    this.lastItem = false;
-    /**
-     * Determine if the items are lazy loaded when opening the first time the
-     * control.
-     */
-    this.lazyLoad = false;
-    /**
-     * The presence of this attribute determine whether the item contains a
-     * subtree. `true` if the item does not have a subtree.
-     */
-    this.leaf = false;
-    /**
-     * Level in the tree at which the item is placed.
-     */
-    this.level = INITIAL_LEVEL;
-    /**
-     * `true` if the checkbox's value is indeterminate.
-     */
-    this.indeterminate = false;
-    /**
-     * This attribute lets you specify if the item is selected
-     */
-    this.selected = false;
-    /**
-     * `true` to show the downloading spinner when lazy loading the sub items of
-     * the control.
-     */
-    this.showDownloadingSpinner = true;
-    /**
-     * `true` to show the expandable button that allows to expand/collapse the
-     * items of the control. Only works if `leaf === false`.
-     */
-    this.showExpandableButton = true;
-    /**
-     * `true` to display the relation between tree items and tree lists using
-     * lines.
-     */
-    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
-     * the parent item checkbox is unchecked.
-     */
-    this.toggleCheckboxes = false;
-    this.checkIfShouldRemoveEditMode = (event) => {
-      event.stopPropagation();
-      if (event.code !== ENTER_KEY && event.code !== ESCAPE_KEY) {
-        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) {
-        return;
-      }
-      this.editing = false;
-      document.body.removeEventListener("click", this.removeEditModeOnClick, {
-        capture: true
-      });
-      const newCaption = this.inputRef.value;
-      if (commitEdition && newCaption.trim() !== "") {
-        this.modifyCaption.emit({
-          id: this.el.id,
-          caption: newCaption
-        });
-      }
-      if (shouldFocusHeader) {
-        this.headerRef.focus();
-      }
-    };
-    this.toggleExpand = (event) => {
-      event.stopPropagation();
-      if (!this.leaf) {
-        this.expanded = !this.expanded;
-      }
-      this.selected = true;
-      this.selectedItemChange.emit(this.getSelectedInfo(mouseEventModifierKey(event), true));
-    };
-    this.getSelectedInfo = (ctrlKeyPressed, selected) => ({
-      ctrlKeyPressed: ctrlKeyPressed,
-      expanded: this.expanded,
-      id: this.el.id,
-      itemRef: this.el,
-      metadata: this.metadata,
-      parentId: this.el.parentElement.id,
-      selected: selected
-    });
-    this.handleActionDblClick = (event) => {
-      event.stopPropagation();
-      if (mouseEventModifierKey(event)) {
-        this.toggleSelected();
-        return;
-      }
-      this.emitOpenReference();
-      // The Control key is not pressed, so the control can be expanded
-      if (!this.leaf) {
-        this.toggleExpand(event);
-      }
-    };
-    /**
-     * Event triggered by the following actions on the main button:
-     *   - Click
-     *   - Enter keydown
-     *   - Space keydown and keyup
-     */
-    this.handleActionClick = (event) => {
-      event.stopPropagation();
-      // Don't perform actions when editing
-      if (this.editing) {
-        return;
-      }
-      event.preventDefault();
-      // Click event
-      if (event.pointerType) {
-        this.toggleOrSelect(event);
-        return;
-      }
-      this.emitOpenReference();
-      // Enter or space
-      this.toggleExpand(event);
-    };
-    /**
-     * Event triggered by key events on the main button.
-     */
-    this.handleActionKeyDown = (event) => {
-      // Only toggle if the Enter key was pressed with the Ctrl key
-      if (mouseEventModifierKey(event) && event.code === ENTER_KEY) {
-        event.stopPropagation();
-        this.toggleSelected();
-      }
-    };
-    this.handleCheckedChange = (event) => {
-      event.stopPropagation();
-      const checked = event.target.checked;
-      this.checked = checked;
-      this.checkboxChange.emit({
-        id: this.el.id,
-        checked: this.checked,
-        indeterminate: this.indeterminate
-      });
-    };
-    this.renderImg = (cssClass, src) => (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();
-        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";
-    };
-  }
-  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.checked = newValue;
-        treeItem.indeterminate = false;
-        // Emit the event to sync with the UI model, even if the item does not
-        // have toggleCheckboxes property
-        this.checkboxToggleChange.emit({
-          id: treeItem.id,
-          checked: newValue,
-          indeterminate: false
-        });
-      }
-    });
-  }
-  handleEditingChange(isEditing) {
-    if (!isEditing) {
-      return;
-    }
-    document.body.addEventListener("click", this.removeEditModeOnClick, {
-      capture: true
-    });
-    // Wait until the input is rendered to focus it
-    writeTask(() => {
-      requestAnimationFrame(() => {
-        if (this.inputRef) {
-          this.inputRef.focus();
-        }
-      });
-    });
-  }
-  handleExpandedChange(isExpanded) {
-    this.lazyLoadItems(isExpanded);
-  }
-  handleLasItemChange(isLastItem) {
-    if (isLastItem && this.showLines) {
-      this.setResizeObserver();
-    }
-    else {
-      this.disconnectObserver();
-    }
-  }
-  handleSelectedChange(newValue) {
-    this.selectedItemSync.emit(this.getSelectedInfo(true, // Does not matter in this case
-    newValue));
-  }
-  handleShowLinesChange(newShowLines) {
-    if (newShowLines && this.lastItem) {
-      this.setResizeObserver();
-    }
-    else {
-      this.disconnectObserver();
-    }
-  }
-  updateCheckboxValue(event) {
-    // No need to update the checkbox value based on the children checkbox
-    if (!this.toggleCheckboxes) {
-      return;
-    }
-    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);
-    this.ignoreCheckboxChange = this.checked !== updatedCheck;
-    this.checked = updatedCheck;
-    this.indeterminate = !allItemsHaveTheSameCheckedValue;
-    // Sync with the UI Model
-    this.checkboxToggleChange.emit({
-      id: this.el.id,
-      checked: updatedCheck,
-      indeterminate: !allItemsHaveTheSameCheckedValue
-    });
-  }
-  /**
-   * 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;
-      }
-    }
-    // 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;
-    }
-    // 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;
-      }
-    }
-    // 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();
-    }
-  }
-  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", distanceToCheckbox + "px");
-    });
-    this.watcher.observe(this.el);
-    this.watcher.observe(this.headerRef);
-  }
-  disconnectObserver() {
-    if (!this.watcher) {
-      return;
-    }
-    this.watcher.disconnect();
-    this.watcher = null;
-  }
-  lazyLoadItems(expanded) {
-    if (!this.lazyLoad || !expanded) {
-      return;
-    }
-    // Load items
-    this.lazyLoad = false;
-    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 (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 (h(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 }, 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" : ""}`, 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 && (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 && (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 ? (h("slot", { name: "custom-content" })) : ([
-      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 ? (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", { role: "group", "aria-busy": this.downloading.toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: {
-        expandable: true,
-        "expandable--collapsed": !this.expanded
-      }, part: `expandable${this.expanded ? " expanded" : " collapsed"}` }, h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "checked": ["updateChildrenCheckedValue"],
-    "editing": ["handleEditingChange"],
-    "expanded": ["handleExpandedChange"],
-    "lastItem": ["handleLasItemChange"],
-    "selected": ["handleSelectedChange"],
-    "showLines": ["handleShowLinesChange"]
-  }; }
-};
-ChTreeXListItem.style = treeXListItemCss;
-
-const resolveImgPath = (iconAssetsPath, img) => `${iconAssetsPath}/${img}.svg`;
-
-const treeViewCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}gxg-tree-view{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-on-background);display:contents}.tree-view{}.tree-view::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.tree-view::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.tree-view::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.tree-view::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}.tree-view-item{--checkbox-size:var(--gxg-checkbox-size);--expandable-button-width:var(--spacing-comp-04);}.tree-view-item::part(dashed-line){border-color:var(--gray-02)}.tree-view-item::part(header){padding-inline-end:calc(var(--spacing-comp-02) * 0.65);height:var(--spacing-comp-05);display:flex;gap:5px}.tree-view-item::part(header):first-child{margin-inline-start:var(--spacing-comp-01)}.tree-view-item::part(header):before{content:\"\";display:block}.tree-view-item::part(header):hover{background-color:var(--gxg-background-color--hover);color:var(--gxg-color--hover)}.tree-view-item::part(header):focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}.tree-view-item[selected]::part(header){background-color:var(--gxg-background-color--selected)}.tree-view-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}.tree-view-item::part(expandable-button){background-color:var(--gray-00);margin-inline-end:0}.tree-view-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.tree-view-item::part(expandable-button):hover{background-color:var(--color-background)}.tree-view-item::part(expandable-button):focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:0}.tree-view-item::part(action){text-transform:capitalize;display:flex;gap:var(--spacing-comp-01)}.tree-view-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04);margin-inline-end:0}.tree-view-item::part(downloading){width:var(--spacing-comp-03);height:var(--spacing-comp-03);border:var(--border-width-md) solid var(--color-primary-enabled);border-inline-start-color:transparent}.tree-view-item::part(checkbox__container){border-color:var(--gray-04);background-color:var(--color-background)}.tree-view-item::part(checkbox__container):after{content:\"\";position:absolute;display:block;border:solid;border-color:transparent;z-index:0}.tree-view-item::part(checkbox__container):focus-within{box-shadow:none;outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}.tree-view-item::part(checkbox){margin-inline-end:0}.tree-view-item::part(checkbox__option){display:none}.tree-view-item::part(checkbox__container checkbox__checked):after{left:5.5px;top:3px;width:4px;height:7px;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-color:var(--color-primary-active);transition-property:border-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}.tree-view-item::part(checkbox__container checkbox__indeterminate):after{left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-active);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}.tree-view-item::part(checkbox__input){position:relative;z-index:1}.tree-view-item--folder::part(action)::before,.tree-view-item--module::part(action)::before{grid-area:left-img;content:\"\";width:14px;height:14px;margin-inline-end:4px;background-repeat:no-repeat}.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}.tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;grid-area:left-img;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:var(--color-primary-enabled);border-radius:50%}.ch-tree-x-list-item--editing::part(header){border:2px solid transparent}.ch-tree-x-list-item .ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
-
-const DEFAULT_DRAG_DISABLED_VALUE = false;
-const DEFAULT_DROP_DISABLED_VALUE = false;
-const DEFAULT_CLASS_VALUE = "tree-view-item";
-const DEFAULT_EDITABLE_ITEMS_VALUE = true;
-const DEFAULT_EXPANDED_VALUE = false;
-const DEFAULT_INDETERMINATE_VALUE = false;
-const DEFAULT_LAZY_VALUE = false;
-const DEFAULT_ORDER_VALUE = 0;
-const DEFAULT_SELECTED_VALUE = false;
-const GxgTreeView = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.checkedItemsChange = createEvent(this, "checkedItemsChange", 7);
-    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-    this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
-    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
-    // UI Models
-    this.flattenedTreeModel = new Map();
-    this.flattenedCheckboxTreeModel = new Map();
-    this.selectedItems = new Set();
-    this.iconAssetsPath = getAssetPath(`./icon-assets`);
-    /**
-     * This property lets you specify if the tree is waiting to process the drop
-     * of items.
-     */
-    this.waitDropProcessing = false;
-    /**
-     * Removes the default padding on '.ch-tree-x-container' (Added by Gemini)
-     */
-    this.noPadding = false;
-    /**
-     * Set this attribute if you want display a checkbox in all items by default.
-     */
-    this.checkbox = false;
-    /**
-     * Set this attribute if you want the checkbox to be checked in all items by
-     * default.
-     * Only works if `checkbox = true`
-     */
-    this.checked = false;
-    /**
-     * A CSS class to set as the `ch-tree-x` element class.
-     */
-    this.cssClass = "tree-view";
-    /**
-     * This attribute lets you specify if the drag operation is disabled in all
-     * items by default. If `true`, the items can't be dragged.
-     */
-    this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
-    /**
-     * This attribute lets you specify if the drop operation is disabled in all
-     * items by default. If `true`, the items won't accept any drops.
-     */
-    this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
-    /**
-     * This attribute lets you specify if the edit operation is enabled in all
-     * items by default. If `true`, the items can edit its caption in place.
-     */
-    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
-    /**
-     * Set this attribute if you want to allow multi selection of the items.
-     */
-    this.multiSelection = false;
-    /**
-     * `true` to display the relation between tree items and tree lists using
-     * lines.
-     */
-    this.showLines = "all";
-    /**
-     * 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
-     * the parent item checkbox is unchecked.
-     * This attribute will be used in all items by default.
-     */
-    this.toggleCheckboxes = false;
-    /**
-     * This property lets you define the model of the ch-tree-x control.
-     */
-    this.treeModel = [];
-    this.handleDroppableZoneEnter = (event) => {
-      if (!this.checkDroppableZoneCallback) {
-        return;
-      }
-      event.stopPropagation();
-      // Suppose the request is made immediately by executing the callback
-      const requestTimestamp = new Date().getTime();
-      const dropInformation = event.detail;
-      const promise = this.checkDroppableZoneCallback(dropInformation);
-      promise.then((validDrop) => {
-        this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
-      });
-    };
-    this.handleSelectedItemsChange = (event) => {
-      event.stopPropagation();
-      const itemsToProcess = new Map(event.detail);
-      // Remove no longer selected items
-      this.selectedItems.forEach((selectedItemId) => {
-        const itemUIModel = this.flattenedTreeModel.get(selectedItemId).item;
-        const itemIsStillSelected = itemsToProcess.get(selectedItemId);
-        // The item does not need to be added. Remove it from the processed list
-        if (itemIsStillSelected) {
-          itemUIModel.expanded = itemIsStillSelected.expanded; // Update expanded state
-          itemsToProcess.delete(selectedItemId);
-        }
-        // The item must be un-selected in the UI Model
-        else {
-          itemUIModel.selected = false;
-          this.selectedItems.delete(selectedItemId);
-        }
-      });
-      // Add new selected items
-      itemsToProcess.forEach((newSelectedItemInfo, itemId) => {
-        const newSelectedItem = this.flattenedTreeModel.get(itemId).item;
-        newSelectedItem.selected = true;
-        newSelectedItem.expanded = newSelectedItemInfo.expanded;
-        this.selectedItems.add(itemId);
-      });
-      this.selectedItemsChange.emit(event.detail);
-    };
-    this.handleExpandedItemChange = (event) => {
-      const detail = event.detail;
-      const itemInfo = this.flattenedTreeModel.get(detail.id).item;
-      itemInfo.expanded = detail.expanded;
-    };
-    this.handleItemContextmenu = (event) => {
-      event.stopPropagation();
-      this.itemContextmenu.emit(event.detail);
-    };
-    this.handleItemsDropped = (event) => {
-      if (!this.dropItemsCallback) {
-        return;
-      }
-      event.stopPropagation();
-      const dataTransferInfo = event.detail;
-      const newContainer = dataTransferInfo.newContainer;
-      const newParentId = newContainer.id;
-      // Check if the parent exists in the UI Model
-      if (!this.flattenedTreeModel.get(newParentId)) {
-        return;
-      }
-      const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0) {
-        return;
-      }
-      const promise = this.dropItemsCallback(dataTransferInfo);
-      this.waitDropProcessing = true;
-      promise.then(async (response) => {
-        this.waitDropProcessing = false;
-        if (!response.acceptDrop) {
-          return;
-        }
-        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
-        // Only move the items to the new parent, keeping the state
-        if (dataTransferInfo.dropInTheSameTree) {
-          // Add the UI models to the new container and remove the UI models from
-          // the old containers
-          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
-          // When the selected items are moved, the tree must remove its internal
-          // state to not have undefined references
-          if (dataTransferInfo.draggingSelectedItems) {
-            await this.treeRef.clearSelectedItemsInfo();
-          }
-        }
-        // Add the new items
-        else {
-          if (response.items == null) {
-            return;
-          }
-          // Add new items to the parent
-          newParentUIModel.items.push(...response.items);
-          // Flatten the new UI models
-          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
-        }
-        this.sortItems(newParentUIModel.items);
-        // Open the item to visualize the new subitems
-        newParentUIModel.expanded = true;
-        // There is no need to force and update, since the waitDropProcessing
-        // prop was modified
-      });
-    };
-    this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
-      const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
-      const item = itemUIModelExtended.item;
-      const oldParentItem = itemUIModelExtended.parentItem;
-      // Remove the UI model from the previous parent
-      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
-      // Add the UI Model to the new parent
-      newParentUIModel.items.push(item);
-      // Reference the new parent in the item
-      itemUIModelExtended.parentItem = newParentUIModel;
-    };
-    this.renderSubModel = (treeSubModel, lastItem, level) => {
-      var _a, _b, _c, _d, _e, _f;
-      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: (_a = treeSubModel.checkbox) !== null && _a !== void 0 ? _a : this.checkbox, checked: (_b = treeSubModel.checked) !== null && _b !== void 0 ? _b : this.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_c = treeSubModel.dragDisabled) !== null && _c !== void 0 ? _c : this.dragDisabled, dropDisabled: (_d = treeSubModel.dropDisabled) !== null && _d !== void 0 ? _d : this.dropDisabled, editable: (_e = treeSubModel.editable) !== null && _e !== void 0 ? _e : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc
-          ? resolveImgPath(this.iconAssetsPath, treeSubModel.leftImgSrc)
-          : null, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: (_f = treeSubModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : this.toggleCheckboxes }, !treeSubModel.leaf &&
-        treeSubModel.items != null &&
-        treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
-    };
-    this.flattenItemUIModel = (parentModel) => (item) => {
-      var _a;
-      this.flattenedTreeModel.set(item.id, {
-        parentItem: parentModel,
-        item: item,
-      });
-      // Add the items that have a checkbox in a separate Map
-      if ((_a = item.checkbox) !== null && _a !== void 0 ? _a : this.checkbox) {
-        this.flattenedCheckboxTreeModel.set(item.id, {
-          parentItem: parentModel,
-          item: item,
-        });
-      }
-      // Make sure the properties are with their default values to avoid issues
-      // when reusing DOM nodes
-      item.class = item.class == null ? DEFAULT_CLASS_VALUE : item.class;
-      item.expanded =
-        item.expanded == null ? DEFAULT_EXPANDED_VALUE : item.expanded;
-      item.indeterminate =
-        item.indeterminate == null
-          ? DEFAULT_INDETERMINATE_VALUE
-          : item.indeterminate;
-      item.lazy = item.lazy == null ? DEFAULT_LAZY_VALUE : item.lazy;
-      item.order = item.order == null ? DEFAULT_ORDER_VALUE : item.order;
-      item.selected =
-        item.selected == null ? DEFAULT_SELECTED_VALUE : item.selected;
-      if (item.selected) {
-        this.selectedItems.add(item.id);
-      }
-      this.flattenSubModel(item);
-    };
-  }
-  handleTreeModelChange() {
-    this.flattenModel();
-  }
-  /**
-   * Given an item id, an array of items to add, the download status and the
-   * lazy state, updates the item's UI Model.
-   */
-  async loadLazyContent(itemId, items, downloading = false, lazy = false) {
-    const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
-    // Establish that the content was lazy loaded
-    itemToLazyLoadContent.downloading = downloading;
-    itemToLazyLoadContent.lazy = lazy;
-    // Check if there is items to add
-    if (items == null) {
-      return;
-    }
-    // @todo What happens in the server when dropping items on a lazy node?
-    itemToLazyLoadContent.items = items;
-    this.sortItems(itemToLazyLoadContent.items);
-    this.flattenSubModel(itemToLazyLoadContent);
-    // Re-sync checked items
-    this.emitCheckedItemsChange();
-    // Force re-render
-    forceUpdate(this);
-  }
-  /**
-   * Given an item id, it displays and scrolls into the item view.
-   */
-  async scrollIntoVisible(treeItemId) {
-    const itemUIModel = this.flattenedTreeModel.get(treeItemId);
-    if (!itemUIModel) {
-      // @todo Check if the item is on the server?
-      return;
-    }
-    let visitedNode = itemUIModel.parentItem;
-    // While the parent is not the root, update the UI Models
-    while (visitedNode && visitedNode.id != null) {
-      // Expand the item
-      visitedNode.expanded = true;
-      const visitedNodeUIModel = this.flattenedTreeModel.get(visitedNode.id);
-      visitedNode = visitedNodeUIModel.parentItem;
-    }
-    forceUpdate(this);
-    // @todo For some reason, when the model is created using the "big model" option,
-    // this implementation does not work when only the UI Model is updated. So, to
-    // expand the items, we have to delegate the responsibility to the tree-x
-    this.treeRef.scrollIntoVisible(treeItemId);
-  }
-  /**
-   * 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.
-   */
-  async toggleItems(treeItemIds, expand) {
-    if (!treeItemIds) {
-      return [];
-    }
-    const modifiedTreeItems = [];
-    treeItemIds.forEach((treeItemId) => {
-      const itemInfo = this.flattenedTreeModel.get(treeItemId).item;
-      if (itemInfo) {
-        itemInfo.expanded = expand !== null && expand !== void 0 ? expand : !itemInfo.expanded;
-        modifiedTreeItems.push({
-          id: itemInfo.id,
-          expanded: itemInfo.expanded,
-        });
-      }
-    });
-    // Force re-render
-    forceUpdate(this);
-    return modifiedTreeItems;
-  }
-  /**
-   * Given a subset of item's properties, it updates all item UI models.
-   */
-  async updateAllItemsProperties(properties) {
-    [...this.flattenedTreeModel.values()].forEach((itemUIModel) => {
-      if (properties.expanded != null) {
-        itemUIModel.item.expanded = properties.expanded;
-      }
-      if (properties.checked != null) {
-        itemUIModel.item.checked = properties.checked;
-        itemUIModel.item.indeterminate = false;
-      }
-    });
-    forceUpdate(this);
-  }
-  /**
-   * Given a item list and the properties to update, it updates the properties
-   * of the items in the list.
-   */
-  async updateItemsProperties(items, properties) {
-    items.forEach((item) => {
-      const itemUIModel = this.flattenedTreeModel.get(item);
-      this.updateItemProperty(itemUIModel, properties);
-    });
-    forceUpdate(this);
-  }
-  /**
-   * 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) {
-    this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
-  }
-  updateItemProperty(itemUIModel, properties) {
-    if (!itemUIModel) {
-      return;
-    }
-    const itemInfo = itemUIModel.item;
-    Object.keys(properties).forEach((propertyName) => {
-      itemInfo[propertyName] = properties[propertyName];
-    });
-  }
-  updateCheckboxValue(event) {
-    event.stopPropagation();
-    const detail = event.detail;
-    const treeItemId = detail.id;
-    const itemUIModel = this.flattenedCheckboxTreeModel.get(treeItemId);
-    // In some cases, when the `treeModel` and `checked` properties are updated
-    // outside of the tree control, some events are fired with undefined references
-    if (!itemUIModel) {
-      return;
-    }
-    const itemInfo = itemUIModel.item;
-    itemInfo.checked = detail.checked;
-    itemInfo.indeterminate = detail.indeterminate;
-    this.emitCheckedItemsChange();
-  }
-  loadLazyChildrenHandler(event) {
-    if (!this.lazyLoadTreeItemsCallback) {
-      return;
-    }
-    event.stopPropagation();
-    const treeItemId = event.detail;
-    const promise = this.lazyLoadTreeItemsCallback(treeItemId);
-    event.target.downloading = true;
-    promise.then((result) => {
-      this.loadLazyContent(treeItemId, result);
-    });
-  }
-  handleCaptionModification(event) {
-    if (!this.modifyItemCaptionCallback) {
-      return;
-    }
-    event.stopPropagation();
-    const itemRef = event.target;
-    const itemId = event.detail.id;
-    const itemUIModel = this.flattenedTreeModel.get(itemId);
-    const itemInfo = itemUIModel.item;
-    const newCaption = event.detail.caption;
-    const oldCaption = itemInfo.caption;
-    // Optimistic UI: Update the caption in the UI Model before the change is
-    // completed in the server
-    itemInfo.caption = newCaption;
-    // Due to performance reasons, we don't make a shallow copy of the
-    // treeModel to force a re-render
-    itemRef.caption = newCaption;
-    const promise = this.modifyItemCaptionCallback(itemId, newCaption);
-    promise.then((status) => {
-      if (status.success) {
-        this.sortItems(itemUIModel.parentItem.items);
-        // Force re-render
-        forceUpdate(this);
-      }
-      else {
-        itemRef.caption = oldCaption;
-        itemInfo.caption = oldCaption;
-        // Do something with the error message
-      }
-    });
-  }
-  handleOpenReference(event) {
-    event.stopPropagation();
-    this.itemOpenReference.emit(event.detail);
-  }
-  emitCheckedItemsChange() {
-    // New copy of the checked items
-    const allItemsWithCheckbox = new Map(this.flattenedCheckboxTreeModel);
-    // Update the checked value if not defined
-    allItemsWithCheckbox.forEach((itemUIModel) => {
-      if (itemUIModel.item.checked == null) {
-        itemUIModel.item.checked = this.checked;
-      }
-    });
-    this.checkedItemsChange.emit(allItemsWithCheckbox);
-  }
-  flattenSubModel(model) {
-    const items = model.items;
-    if (!items) {
-      // Make sure that subtrees don't have an undefined array
-      if (model.leaf !== true) {
-        model.items = [];
-      }
-      return;
-    }
-    this.sortItems(items);
-    items.forEach(this.flattenItemUIModel(model));
-  }
-  sortItems(items) {
-    // Ensure that items are sorted
-    if (this.sortItemsCallback) {
-      this.sortItemsCallback(items);
-    }
-  }
-  flattenModel() {
-    this.flattenedTreeModel.clear();
-    this.flattenedCheckboxTreeModel.clear();
-    this.selectedItems.clear();
-    // The model was updated at runtime, so we need to clear the references
-    if (this.treeRef) {
-      this.treeRef.clearSelectedItemsInfo();
-    }
-    this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
-    // Re-sync checked items
-    this.emitCheckedItemsChange();
-  }
-  componentWillLoad() {
-    this.flattenModel();
-  }
-  render() {
-    return (h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: (el) => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get watchers() { return {
-    "treeModel": ["handleTreeModelChange"]
-  }; }
-};
-GxgTreeView.style = treeViewCss;
-
-export { ChTreeX as ch_tree_x, ChTreeXListItem as ch_tree_x_list_item, GxgTreeView as gxg_tree_view };