@genexus/genexus-ide-ui 0.0.62 → 0.0.64

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

@@ -0,0 +1,1165 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask } from './index-0aa3977d.js';
+import { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
+import { f as focusComposedPath, m as mouseEventModifierKey } from './helpers-1ecd5e26.js';
+
+const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+
+const CHECKBOX_ID = "checkbox";
+const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
+const CheckBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.click = createEvent(this, "click", 7);
+    this.input = createEvent(this, "input", 7);
+    /**
+     * 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;
+    /**
+     * True to highlight control when an action is fired.
+     */
+    this.highlightable = false;
+    /**
+     * `true` if the control's value is indeterminate.
+     */
+    this.indeterminate = false;
+    /**
+     * This attribute indicates that the user cannot modify the value of the control.
+     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * attribute for `input` elements.
+     */
+    this.readonly = false;
+    this.getValue = (checked) => checked ? this.checkedValue : this.unCheckedValue;
+    /**
+     * Checks if it is necessary to prevent the click from bubbling
+     */
+    this.handleClick = (event) => {
+      if (this.readonly || this.disabled) {
+        return;
+      }
+      event.stopPropagation();
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      const inputRef = event.target;
+      const checked = inputRef.checked;
+      const value = this.getValue(checked);
+      this.checked = checked;
+      this.value = value;
+      inputRef.value = value; // Update input's value before emitting the event
+      this.input.emit(event);
+      if (this.highlightable) {
+        this.click.emit();
+      }
+    };
+  }
+  valueChanged() {
+    this.checked = this.value === this.checkedValue;
+  }
+  componentWillLoad() {
+    this.checked = this.value === this.checkedValue;
+  }
+  render() {
+    var _a;
+    const additionalParts = PARTS(this.checked, this.indeterminate);
+    return (h(Host, { class: {
+        [DISABLED_CLASS]: this.disabled,
+        "ch-checkbox--actionable": (!this.readonly && !this.disabled) ||
+          (this.readonly && this.highlightable)
+      } }, h("div", { class: {
+        container: true,
+        "container--checked": this.checked
+      }, part: `container${additionalParts}` }, h("input", { "aria-label": ((_a = this.accessibleName) === null || _a === void 0 ? void 0 : _a.trim()) !== "" &&
+        this.accessibleName !== this.caption
+        ? this.accessibleName
+        : null, id: this.caption ? CHECKBOX_ID : null, class: "input", part: "input", type: "checkbox", checked: this.checked, disabled: this.disabled || this.readonly, indeterminate: this.indeterminate, value: this.value, onClick: this.handleClick, onInput: this.handleChange }), h("div", { class: {
+        option: true,
+        "option--checked": this.checked && !this.indeterminate,
+        "option--indeterminate": this.indeterminate
+      }, part: `option${additionalParts}`, "aria-hidden": "true" })), this.caption && (h("label", { class: "label", part: "label", htmlFor: CHECKBOX_ID, onClick: this.handleClick }, this.caption))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+CheckBox.style = checkboxCss;
+
+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 treeViewCss = "ch-tree-view{display:flex;position:relative;width:100%;overflow:auto}ch-tree-view>.ch-tree-view-container{position:absolute;inset:0}ch-tree-view.ch-tree-view-dragging-item ch-tree-view-item{pointer-events:var(--ch-tree-view-pointer-events, all)}ch-tree-view.ch-tree-view-dragging-item .ch-tree-view-list-item--deny-drop{pointer-events:none}ch-tree-view.ch-tree-view--dragging-selected-items ch-tree-view-item[selected]{--ch-tree-view-pointer-events:none}ch-tree-view.ch-tree-view-waiting-drop-processing{cursor:wait}ch-tree-view.ch-tree-view-waiting-drop-processing>.ch-tree-view-container{pointer-events:none}.ch-tree-view-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-view-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-view-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-view-drag-info-fade-in 10ms}@keyframes ch-tree-view-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-view-drag-info{--rtl-offset:-100%}";
+
+const TREE_ITEM_TAG_NAME$1 = "ch-tree-view-item";
+const TREE_TAG_NAME = "ch-tree-view";
+// Selectors
+// const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
+const 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-view-dragging-item-x";
+const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-view-dragging-item-y";
+const ChTreeView = 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 HTMLChTreeViewItemElement[];
+  //   return checkedItems.map(item => ({
+  //     id: item.id,
+  //     caption: item.caption,
+  //     selected: item.selected
+  //   }));
+  // }
+  handleContextMenuEvent(event) {
+    const treeItem = event.target.closest(TREE_ITEM_TAG_NAME$1);
+    if (!treeItem) {
+      return;
+    }
+    event.preventDefault();
+    this.itemContextmenu.emit({
+      id: treeItem.id,
+      itemRef: treeItem,
+      metadata: treeItem.metadata,
+      contextmenuEvent: event
+    });
+  }
+  // Set edit mode in items
+  handleKeyDownEvents(event) {
+    const keyHandler = this.keyDownEvents[event.key];
+    if (keyHandler) {
+      keyHandler(event);
+    }
+  }
+  // We can't use capture, because the dataTransfer info would not be defined
+  // Also, we cant use capture and setTimeout with 0 seconds, because the
+  // getData method can only be accessed during the dragstart and drop event
+  handleDragStart(event) {
+    // Reset the validity of the droppable zones with each new drag start
+    this.validDroppableZoneCache.clear();
+    this.draggingInTheDocument = true;
+    this.dragStartTimestamp = new Date().getTime();
+    this.draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
+  }
+  handleDragEnd() {
+    this.draggingInTheDocument = false;
+  }
+  handleDragEnter(event) {
+    this.cancelSubTreeOpening(null, true);
+    event.stopPropagation();
+    const containerTarget = event.target;
+    // Check if it is a valid item
+    if (containerTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1) {
+      return;
+    }
+    this.lastOpenSubTreeItem = containerTarget;
+    this.openSubTreeAfterCountdown(containerTarget);
+    if (this.validDroppableZone(event) === "valid") {
+      containerTarget.dragState = "enter";
+    }
+  }
+  handleDragLeave(event) {
+    const currentTarget = event.target;
+    if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME$1) {
+      return;
+    }
+    const treeItem = currentTarget;
+    treeItem.dragState = "none";
+    this.cancelSubTreeOpening(treeItem);
+  }
+  cancelSubTreeOpening(treeItem, forceClear = false) {
+    if (this.lastOpenSubTreeItem === treeItem || forceClear) {
+      clearTimeout(this.openSubTreeTimeout);
+      this.lastOpenSubTreeItem = null;
+    }
+  }
+  handleItemDrop(event) {
+    event.stopPropagation();
+    this.cancelSubTreeOpening(null, true);
+    const newContainer = event.target;
+    const draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
+    // The droppable zone must be checked, even if it was marked as not valid
+    // @todo Try to drop an item with high delays in droppable zone checking
+    if (this.validDroppableZone(event) !== "valid") {
+      return;
+    }
+    this.itemsDropped.emit({
+      newContainer: { id: newContainer.id, metadata: newContainer.metadata },
+      draggingSelectedItems: this.draggingSelectedItems,
+      draggedItems: draggedItems,
+      dropInTheSameTree: this.draggingInTree
+    });
+  }
+  handleItemDragStart(event) {
+    document.body.addEventListener("dragover", this.trackItemDrag, {
+      capture: true
+    });
+    this.currentDraggedItem = event.target;
+    const allItemsCanBeDragged = this.checkDragValidityAndUpdateDragInfo(event.detail);
+    if (!allItemsCanBeDragged) {
+      // This effect disables drop interactions in all page elements, so there
+      // is no need to capture and prevent the drop event in the window
+      event.detail.dragEvent.dataTransfer.effectAllowed = "none";
+      return;
+    }
+    this.draggingInTree = true;
+    if (this.scrollToEdgeOnDrag) {
+      this.fixScrollPositionOnDrag();
+    }
+  }
+  handleItemDragEnd() {
+    this.draggingInTree = false;
+    document.body.removeEventListener("dragover", this.trackItemDrag, {
+      capture: true
+    });
+    // Reset not allowed droppable ids
+    this.resetVariables();
+  }
+  /**
+   * 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-view-dragging-item": this.draggingInTheDocument,
+        "ch-tree-view-not-dragging-item": !this.draggingInTheDocument,
+        "ch-tree-view--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
+        "ch-tree-view-waiting-drop-processing": this.waitDropProcessing
+      } }, h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-view-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-view-drag-info" }, this.dragInfo))));
+  }
+  get el() { return getElement(this); }
+};
+ChTreeView.style = treeViewCss;
+
+const treeViewItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) )}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--ch-tree-view-item-distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__expandable-button-width) - 2px )}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+
+const resetDragImage = new Image();
+const DISTANCE_TO_CHECKBOX_CUSTOM_VAR = "--ch-tree-view-item-distance-to-checkbox";
+const INITIAL_LEVEL = 0;
+// Selectors
+const TREE_ITEM_TAG_NAME = "ch-tree-view-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 ChTreeViewItem = 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.indeterminate = false; // Changing the checked value makes it no longer indeterminate
+      this.checkboxChange.emit({
+        id: this.el.id,
+        checked: this.checked,
+        indeterminate: false
+      });
+    };
+    this.renderImg = (cssClass, src) => (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.updateChecked(newValue, 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 || this.el === event.target) {
+      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);
+    const eventMustBeEmitted = this.checked !== updatedCheck ||
+      this.indeterminate !== !allItemsHaveTheSameCheckedValue;
+    this.ignoreCheckboxChange = this.checked !== updatedCheck;
+    this.checked = updatedCheck;
+    this.indeterminate = !allItemsHaveTheSameCheckedValue;
+    // Sync with the UI Model
+    if (eventMustBeEmitted) {
+      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();
+    }
+  }
+  /**
+   * Update `checked` and `indeterminate` properties.
+   */
+  async updateChecked(newChecked, newIndeterminate) {
+    this.checked = newChecked;
+    this.indeterminate = newIndeterminate;
+    // Emit the event to sync with the UI model, even if the item does not
+    // have toggleCheckboxes property
+    this.checkboxToggleChange.emit({
+      id: this.el.id,
+      checked: newChecked,
+      indeterminate: newIndeterminate
+    });
+  }
+  getDirectTreeItems() {
+    return Array.from(this.el.querySelectorAll(DIRECT_TREE_ITEM_CHILDREN));
+  }
+  setResizeObserver() {
+    this.watcher = new ResizeObserver(() => {
+      const distanceToCheckbox = this.el.getBoundingClientRect().height -
+        this.headerRef.getBoundingClientRect().height / 2;
+      this.el.style.setProperty(DISTANCE_TO_CHECKBOX_CUSTOM_VAR, distanceToCheckbox + "px");
+    });
+    this.watcher.observe(this.el);
+    this.watcher.observe(this.headerRef);
+  }
+  disconnectObserver() {
+    if (!this.watcher) {
+      return;
+    }
+    this.watcher.disconnect();
+    this.watcher = null;
+  }
+  lazyLoadItems(expanded) {
+    if (!this.lazyLoad || !expanded) {
+      return;
+    }
+    // Load items
+    this.lazyLoad = false;
+    this.downloading = true;
+    this.loadLazyContent.emit(this.el.id);
+  }
+  toggleSelected() {
+    const selected = !this.selected;
+    this.selected = selected;
+    this.selectedItemChange.emit(this.getSelectedInfo(true, selected));
+  }
+  setSelected() {
+    this.selected = true;
+    this.selectedItemChange.emit(this.getSelectedInfo(false, true));
+  }
+  toggleOrSelect(event) {
+    if (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" : ""}${this.level === INITIAL_LEVEL ? " level-0" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
+      // Drag and drop
+      draggable: !this.dragDisabled, onDragStart: this.handleDragStart, onDragEnd: !this.dragDisabled ? this.handleDragEnd : null, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (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,
+        "expandable--lazy-loaded": !this.downloading
+      }, part: `expandable${this.expanded ? " expanded" : " collapsed"}${!this.downloading ? " lazy-loaded" : ""}` }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["updateChildrenCheckedValue"],
+    "editing": ["handleEditingChange"],
+    "expanded": ["handleExpandedChange"],
+    "lastItem": ["handleLasItemChange"],
+    "selected": ["handleSelectedChange"],
+    "showLines": ["handleShowLinesChange"]
+  }; }
+};
+ChTreeViewItem.style = treeViewItemCss;
+
+export { CheckBox as ch_checkbox, ChTreeView as ch_tree_view, ChTreeViewItem as ch_tree_view_item };