@genexus/genexus-ide-ui 0.0.45 → 0.0.47

package/dist/esm/{ch-tree-x_3.entry.js → ch-checkbox_4.entry.js}

@@ -1,5 +1,91 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask } from './index-0da01575.js';
-import { m as mouseEventModifierKey } from './helpers-56190205.js';
+import { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
+import { 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, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.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:#000;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;
@@ -18,9 +104,8 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
 const treeXCss = "ch-tree-x{display:flex;position:relative;overflow:auto}ch-tree-x>ch-tree-x-list{position:absolute;inset:0;min-width:max-content}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
 
 const TREE_ITEM_TAG_NAME$1 = "ch-tree-x-list-item";
-const TREE_LIST_TAG_NAME = "ch-tree-x-list";
+const TREE_TAG_NAME = "ch-tree-x";
 // Selectors
-const TREE_LIST_AND_ITEM_SELECTOR = TREE_LIST_TAG_NAME + "," + TREE_ITEM_TAG_NAME$1;
 // const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
 const TEXT_FORMAT = "text/plain";
 const ARROW_DOWN_KEY = "ArrowDown";
@@ -76,10 +161,6 @@ const ChTreeX = class {
     this.draggedParentIds = [];
     this.draggingInTheDocument = false;
     this.draggingInTree = false;
-    /**
-     * Level in the tree at which the control is placed.
-     */
-    this.level = -1;
     /**
      * Set this attribute if you want to allow multi selection of the items.
      */
@@ -94,11 +175,6 @@ const ChTreeX = class {
      * tree.
      */
     this.scrollToEdgeOnDrag = true;
-    /**
-     * `true` to display the relation between tree items and tree lists using
-     * lines.
-     */
-    this.showLines = "none";
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
@@ -107,6 +183,7 @@ const ChTreeX = class {
     this.trackItemDrag = (event) => {
       event.preventDefault();
       this.lastDragEvent = event;
+      this.updateDropEffect(event);
       if (!this.needForRAF) {
         return;
       }
@@ -126,57 +203,6 @@ const ChTreeX = class {
         requestAnimationFrame(this.fixScrollPositionOnDrag);
       });
     };
-    this.handleKeyDownEvents = (event) => {
-      const keyHandler = this.keyDownEvents[event.key];
-      if (keyHandler) {
-        keyHandler(event);
-      }
-    };
-  }
-  handleShowLinesChange(newShowLines) {
-    const treeItems = this.el.querySelectorAll(TREE_LIST_AND_ITEM_SELECTOR);
-    treeItems.forEach(item => {
-      item.showLines = newShowLines;
-    });
-  }
-  /**
-   * 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.parentElement;
-    // Expand all parents
-    while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1) {
-      parentItem.expanded = true;
-      parentItem = parentItem.parentElement.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 updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
-    var _a;
-    if (!this.draggingInTheDocument ||
-      requestTimestamp <= this.dragStartTimestamp) {
-      return;
-    }
-    const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
-    this.validDroppableZoneCache.set(droppableZoneKey, validDrop ? "valid" : "invalid");
-    const shouldUpdateDragEnterInCurrentContainer = ((_a = this.lastOpenSubTreeItem) === null || _a === void 0 ? void 0 : _a.id) === newContainerId;
-    if (shouldUpdateDragEnterInCurrentContainer) {
-      this.lastOpenSubTreeItem.dragState = "enter";
-    }
   }
   // /**
   //  * Returns an array of the selected tree items, providing the id, caption and
@@ -193,6 +219,13 @@ const ChTreeX = class {
   //     selected: item.selected
   //   }));
   // }
+  // 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
@@ -247,6 +280,7 @@ const ChTreeX = class {
     }
     this.itemsDropped.emit({
       newContainer: { id: newContainer.id, metadata: newContainer.metadata },
+      draggingSelectedItems: this.draggingSelectedItems,
       draggedItems: draggedItems,
       dropInTheSameTree: this.draggingInTree
     });
@@ -256,7 +290,13 @@ const ChTreeX = class {
       capture: true
     });
     this.currentDraggedItem = event.target;
-    this.updateDragInfo(event.detail);
+    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();
@@ -270,26 +310,94 @@ const ChTreeX = class {
     // 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.parentElement;
+    // Expand all parents
+    while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1) {
+      parentItem.expanded = true;
+      parentItem = parentItem.parentElement.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 updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    var _a;
+    if (!this.draggingInTheDocument ||
+      requestTimestamp <= this.dragStartTimestamp) {
+      return;
+    }
+    const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
+    this.validDroppableZoneCache.set(droppableZoneKey, validDrop ? "valid" : "invalid");
+    const shouldUpdateDragEnterInCurrentContainer = ((_a = this.lastOpenSubTreeItem) === null || _a === void 0 ? void 0 : _a.id) === newContainerId;
+    if (shouldUpdateDragEnterInCurrentContainer) {
+      this.lastOpenSubTreeItem.dragState = "enter";
+    }
+  }
   validDroppableZone(event) {
     const containerTarget = event.target;
-    // When dragging in the same tree, don't mark droppable zones if they are
-    // the dragged items or their direct parents
-    if (this.draggingInTree &&
-      (this.draggedIds.includes(containerTarget.id) ||
-        this.draggedParentIds.includes(containerTarget.id))) {
-      return "invalid";
-    }
     const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
     const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
     if (droppableZoneState != null) {
       return droppableZoneState;
     }
+    // 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";
+    }
     this.validDroppableZoneCache.set(cacheKey, "checking");
     this.droppableZoneEnter.emit({
       newContainer: {
@@ -309,25 +417,43 @@ const ChTreeX = class {
       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 cacheKey = getDroppableZoneKey(itemTarget.id, this.draggedItems);
+    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    if (droppableZoneState === "invalid") {
+      event.dataTransfer.dropEffect = "none";
+    }
+  }
   resetVariables() {
     this.draggedIds = [];
     this.draggedParentIds = [];
   }
   /**
-   * Update the dataTransfer in the drag event to store the ids and metadata of
-   * the dragged items. Also it updates the visual information of the dragged
+   * 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.
    */
-  updateDragInfo(dragInfo) {
+  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 = [...this.selectedItemsInfo.values()].map(el => ({
+      dataTransferInfo = selectedItemValues.map(el => ({
         id: el.id,
         metadata: el.metadata
       }));
@@ -337,6 +463,7 @@ const ChTreeX = class {
           : selectedItemCount.toString();
     }
     else {
+      dragIsEnabledForAllItems = !draggedElement.dragDisabled;
       dataTransferInfo = [
         { id: draggedElement.id, metadata: draggedElement.metadata }
       ];
@@ -346,7 +473,11 @@ const ChTreeX = class {
     this.getDirectParentsOfDraggableItems(isDraggingSelectedItems);
     // Update drag event info
     const data = JSON.stringify(dataTransferInfo);
-    dragInfo.dataTransfer.setData(TEXT_FORMAT, data);
+    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) {
@@ -369,6 +500,8 @@ const ChTreeX = class {
     // 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;
       });
@@ -380,23 +513,13 @@ const ChTreeX = class {
     if (selectedItemInfo.selected) {
       this.selectedItemsInfo.set(selectedItemInfo.id, selectedItemInfo);
     }
-    else {
-      this.selectedItemsInfo.delete(selectedItemInfo.id);
-    }
     // Sync with UI model
     this.selectedItemsChange.emit(this.selectedItemsInfo);
   }
   clearSelectedItems() {
     this.selectedItemsInfo.clear();
   }
-  connectedCallback() {
-    // Set edit mode in items
-    this.el.addEventListener("keydown", this.handleKeyDownEvents, {
-      capture: true
-    });
-  }
   disconnectedCallback() {
-    this.el.removeEventListener("keydown", this.handleKeyDownEvents);
     this.resetVariables();
     // Remove dragover body event
     this.handleItemDragEnd();
@@ -409,18 +532,11 @@ const ChTreeX = class {
       } }, h("slot", null), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
   }
   get el() { return getElement(this); }
-  static get watchers() { return {
-    "showLines": ["handleShowLinesChange"]
-  }; }
 };
 ChTreeX.style = treeXCss;
 
 const treeXListCss = ":host{display:grid;grid-auto-rows:min-content;position:relative;width:100%}";
 
-/**
- * This variable specifies a reference to the main ch-tree-x element
- */
-let mainTreeRef$1;
 const ChTreeListX = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -428,55 +544,11 @@ const ChTreeListX = class {
      * Level in the tree at which the control is placed.
      */
     this.level = 0;
-    /**
-     * `true` to display the relation between tree items and tree lists using
-     * lines.
-     */
-    this.showLines = "none";
-    this.updateLastItemDashedLine = () => {
-      // @todo WA to avoid StencilJS' bug. The showLines Watch is dispatched
-      // before the componentDidLoad lifecycle method completes
-      if (!this.slotRef) {
-        return;
-      }
-      const treeItems = this.slotRef.assignedElements();
-      if (treeItems.length === 0) {
-        return;
-      }
-      const lastItemIndex = treeItems.length - 1;
-      for (let i = 0; i < lastItemIndex; i++) {
-        treeItems[i].lastItem = false;
-      }
-      treeItems[lastItemIndex].lastItem = true;
-    };
-  }
-  handleShowLinesChange(newValue) {
-    // Displayed items may have changed since the last time that `showLines === true`
-    if (newValue !== "none" && this.level !== 0) {
-      this.updateLastItemDashedLine();
-    }
-  }
-  componentWillLoad() {
-    // Set tree level
-    const parentElement = this.el.parentElement;
-    // Set item level
-    this.level = parentElement.level + 1;
-    // If the mainTreeRef is not defined, the first item that will load this
-    // reference will be the top tree-x-list
-    if (!mainTreeRef$1) {
-      mainTreeRef$1 = parentElement;
-    }
-    this.showLines = mainTreeRef$1.showLines;
   }
   render() {
-    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", { onSlotchange: this.showLines !== "none" && this.level !== 0
-        ? this.updateLastItemDashedLine
-        : null, ref: el => (this.slotRef = el) })));
+    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", null)));
   }
   get el() { return getElement(this); }
-  static get watchers() { return {
-    "showLines": ["handleShowLinesChange"]
-  }; }
 };
 ChTreeListX.style = treeXListCss;
 
@@ -492,10 +564,6 @@ const LAST_SUB_ITEM = `:scope>*>${TREE_ITEM_TAG_NAME}:last-child`;
 const EXPANDABLE_ID = "expandable";
 const ENTER_KEY = "Enter";
 const ESCAPE_KEY = "Escape";
-/**
- * This variable specifies a reference to the main ch-tree-x element
- */
-let mainTreeRef;
 const ChTreeXListItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -505,6 +573,7 @@ const ChTreeXListItem = class {
     this.loadLazyContent = createEvent(this, "loadLazyContent", 7);
     this.modifyCaption = createEvent(this, "modifyCaption", 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.
      */
@@ -529,6 +598,16 @@ const ChTreeXListItem = class {
      * (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.
@@ -639,17 +718,18 @@ const ChTreeXListItem = class {
         this.expanded = !this.expanded;
       }
       this.selected = true;
-      this.selectedItemChange.emit({
-        ctrlKeyPressed: mouseEventModifierKey(event),
-        expanded: this.expanded,
-        goToReference: false,
-        id: this.el.id,
-        itemRef: this.el,
-        metadata: this.metadata,
-        parentId: this.el.parentElement.parentElement.id,
-        selected: true
-      });
+      this.selectedItemChange.emit(this.getSelectedInfo(mouseEventModifierKey(event), false, true));
     };
+    this.getSelectedInfo = (ctrlKeyPressed, goToReference, selected) => ({
+      ctrlKeyPressed: ctrlKeyPressed,
+      expanded: this.expanded,
+      goToReference: goToReference,
+      id: this.el.id,
+      itemRef: this.el,
+      metadata: this.metadata,
+      parentId: this.el.parentElement.parentElement.id,
+      selected: selected
+    });
     this.handleActionDblClick = (event) => {
       event.stopPropagation();
       if (mouseEventModifierKey(event)) {
@@ -701,6 +781,7 @@ const ChTreeXListItem = class {
       // Disallow drag when editing the caption
       if (this.editing) {
         event.preventDefault();
+        event.stopPropagation();
         return;
       }
       // Remove drag image
@@ -709,7 +790,7 @@ const ChTreeXListItem = class {
       this.dragState = "start";
       this.itemDragStart.emit({
         elem: this.el,
-        dataTransfer: event.dataTransfer
+        dragEvent: event
       });
     };
     this.handleDragEnd = () => {
@@ -759,6 +840,11 @@ const ChTreeXListItem = class {
       this.disconnectObserver();
     }
   }
+  handleSelectedChange(newValue) {
+    this.selectedItemSync.emit(this.getSelectedInfo(true, // Does not matter in this case
+    false, // Does not matter in this case
+    newValue));
+  }
   handleShowLinesChange(newShowLines) {
     if (newShowLines && this.lastItem) {
       this.setResizeObserver();
@@ -766,9 +852,6 @@ const ChTreeXListItem = class {
     else {
       this.disconnectObserver();
     }
-    // @todo BUG: showLines does not update in the mainTreeRef, so we have to
-    // sync the ref with the new value
-    mainTreeRef.showLines = newShowLines;
   }
   updateCheckboxValue(event) {
     // No need to update the checkbox value based on the children checkbox
@@ -916,29 +999,11 @@ const ChTreeXListItem = class {
   toggleSelected() {
     const selected = !this.selected;
     this.selected = selected;
-    this.selectedItemChange.emit({
-      ctrlKeyPressed: true,
-      expanded: this.expanded,
-      goToReference: false,
-      id: this.el.id,
-      itemRef: this.el,
-      metadata: this.metadata,
-      parentId: this.el.parentElement.parentElement.id,
-      selected: selected
-    });
+    this.selectedItemChange.emit(this.getSelectedInfo(true, false, selected));
   }
   setSelected(goToReference) {
     this.selected = true;
-    this.selectedItemChange.emit({
-      ctrlKeyPressed: false,
-      expanded: this.expanded,
-      goToReference: goToReference,
-      id: this.el.id,
-      itemRef: this.el,
-      metadata: this.metadata,
-      parentId: this.el.parentElement.parentElement.id,
-      selected: true
-    });
+    this.selectedItemChange.emit(this.getSelectedInfo(false, goToReference, true));
   }
   toggleOrSelect(event) {
     if (mouseEventModifierKey(event)) {
@@ -950,14 +1015,12 @@ const ChTreeXListItem = class {
   }
   componentWillLoad() {
     const parentElement = this.el.parentElement;
-    // Set item level
-    this.level = parentElement.level;
-    if (!mainTreeRef) {
-      mainTreeRef = parentElement.parentElement;
-    }
-    this.showLines = mainTreeRef.showLines;
     // 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, false, true));
+    }
     // No need to update more the status
     if (this.level === 0) {
       return;
@@ -984,7 +1047,7 @@ const ChTreeXListItem = class {
     const evenLevel = this.level % 2 === 0;
     const expandableButtonVisible = !this.leaf && this.showExpandableButton;
     const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
-    const acceptDrop = !this.leaf && this.dragState !== "start";
+    const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
     const hasContent = !this.leaf && !this.lazyLoad;
     const showAllLines = this.showLines === "all" && this.level !== 0;
     const showLastLine = this.showLines === "last" && this.level !== 0 && this.lastItem;
@@ -1008,7 +1071,7 @@ const ChTreeXListItem = class {
         "header--level-0": this.level === 0
       }, 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: true, onDragStart: this.handleDragStart, onDragEnd: this.handleDragEnd, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (h("button", { type: "button", class: {
+      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
@@ -1031,9 +1094,10 @@ const ChTreeXListItem = class {
     "editing": ["handleEditingChange"],
     "expanded": ["handleExpandedChange"],
     "lastItem": ["handleLasItemChange"],
+    "selected": ["handleSelectedChange"],
     "showLines": ["handleShowLinesChange"]
   }; }
 };
 ChTreeXListItem.style = treeXListItemCss;
 
-export { ChTreeX as ch_tree_x, ChTreeListX as ch_tree_x_list, ChTreeXListItem as ch_tree_x_list_item };
+export { CheckBox as ch_checkbox, ChTreeX as ch_tree_x, ChTreeListX as ch_tree_x_list, ChTreeXListItem as ch_tree_x_list_item };