@genexus/genexus-ide-ui 0.0.57 → 0.0.58

package/dist/components/tree-x.js

@@ -15,7 +15,7 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
   }
 };
 
-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,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 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 = "ch-tree-x-list-item";
 const TREE_TAG_NAME = "ch-tree-x";
@@ -37,6 +37,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
     this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
+    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
     this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     this.itemsDropped = createEvent(this, "itemsDropped", 7);
     // @todo TODO: Check if key codes works in Safari
@@ -59,7 +60,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       },
       [EDIT_KEY]: event => {
         const treeItem = getFocusedTreeItem();
-        if (!treeItem) {
+        if (!treeItem || !treeItem.editable) {
           return;
         }
         event.preventDefault();
@@ -136,6 +137,19 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //     selected: item.selected
   //   }));
   // }
+  handleContextMenuEvent(event) {
+    const treeItem = event.target.closest(TREE_ITEM_TAG_NAME);
+    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];
@@ -264,11 +278,11 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!itemRef) {
       return;
     }
-    let parentItem = itemRef.parentElement.parentElement;
+    let parentItem = itemRef.parentElement;
     // Expand all parents
     while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
       parentItem.expanded = true;
-      parentItem = parentItem.parentElement.parentElement;
+      parentItem = parentItem.parentElement;
     }
     // Wait until the parents are expanded
     requestAnimationFrame(() => {
@@ -398,7 +412,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   getDirectParentsOfDraggableItems(draggingSelectedItems) {
     if (!draggingSelectedItems) {
-      const parentTreeItemElem = this.currentDraggedItem.parentElement.parentElement;
+      const parentTreeItemElem = this.currentDraggedItem.parentElement;
       if (parentTreeItemElem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME) {
         this.draggedParentIds.push(parentTreeItemElem.id);
       }
@@ -447,7 +461,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "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", "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))));
+      } }, 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 this; }
   static get style() { return treeXCss; }
@@ -461,7 +475,7 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "clearSelectedItemsInfo": [64],
     "scrollIntoVisible": [64],
     "updateValidDropZone": [64]
-  }, [[2, "keydown", "handleKeyDownEvents"], [9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemSync", "handleSelectedItemSync"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
+  }, [[2, "contextmenu", "handleContextMenuEvent"], [2, "keydown", "handleKeyDownEvents"], [9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemSync", "handleSelectedItemSync"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -101,7 +101,7 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
   }
 };
 
-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,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 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";
@@ -122,6 +122,7 @@ const ChTreeX = class {
     registerInstance(this, hostRef);
     this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
     this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
+    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
     this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     this.itemsDropped = createEvent(this, "itemsDropped", 7);
     // @todo TODO: Check if key codes works in Safari
@@ -144,7 +145,7 @@ const ChTreeX = class {
       },
       [EDIT_KEY]: event => {
         const treeItem = getFocusedTreeItem();
-        if (!treeItem) {
+        if (!treeItem || !treeItem.editable) {
           return;
         }
         event.preventDefault();
@@ -221,6 +222,19 @@ const ChTreeX = class {
   //     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];
@@ -349,11 +363,11 @@ const ChTreeX = class {
     if (!itemRef) {
       return;
     }
-    let parentItem = itemRef.parentElement.parentElement;
+    let parentItem = itemRef.parentElement;
     // Expand all parents
     while (parentItem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1) {
       parentItem.expanded = true;
-      parentItem = parentItem.parentElement.parentElement;
+      parentItem = parentItem.parentElement;
     }
     // Wait until the parents are expanded
     requestAnimationFrame(() => {
@@ -483,7 +497,7 @@ const ChTreeX = class {
   }
   getDirectParentsOfDraggableItems(draggingSelectedItems) {
     if (!draggingSelectedItems) {
-      const parentTreeItemElem = this.currentDraggedItem.parentElement.parentElement;
+      const parentTreeItemElem = this.currentDraggedItem.parentElement;
       if (parentTreeItemElem.tagName.toLowerCase() === TREE_ITEM_TAG_NAME$1) {
         this.draggedParentIds.push(parentTreeItemElem.id);
       }
@@ -532,34 +546,21 @@ const ChTreeX = class {
         "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", "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))));
+      } }, 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 treeXListCss = ":host{display:grid;grid-auto-rows:min-content;position:relative;width:100%}";
-
-const ChTreeListX = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { role: "group" }, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-};
-ChTreeListX.style = treeXListCss;
-
-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-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
+const treeXListItemCss = ":where(button){all:unset;display:flex;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 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`;
+const LAST_SUB_ITEM = `:scope>${TREE_ITEM_TAG_NAME}:last-child`;
 // Keys
 const EXPANDABLE_ID = "expandable";
 const ENTER_KEY = "Enter";
@@ -583,6 +584,7 @@ const ChTreeXListItem = class {
     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);
     /**
@@ -729,16 +731,15 @@ const ChTreeXListItem = class {
         this.expanded = !this.expanded;
       }
       this.selected = true;
-      this.selectedItemChange.emit(this.getSelectedInfo(mouseEventModifierKey(event), false, true));
+      this.selectedItemChange.emit(this.getSelectedInfo(mouseEventModifierKey(event), true));
     };
-    this.getSelectedInfo = (ctrlKeyPressed, goToReference, selected) => ({
+    this.getSelectedInfo = (ctrlKeyPressed, selected) => ({
       ctrlKeyPressed: ctrlKeyPressed,
       expanded: this.expanded,
-      goToReference: goToReference,
       id: this.el.id,
       itemRef: this.el,
       metadata: this.metadata,
-      parentId: this.el.parentElement.parentElement.id,
+      parentId: this.el.parentElement.id,
       selected: selected
     });
     this.handleActionDblClick = (event) => {
@@ -747,8 +748,11 @@ const ChTreeXListItem = class {
         this.toggleSelected();
         return;
       }
+      this.emitOpenReference();
       // The Control key is not pressed, so the control can be expanded
-      this.toggleExpand(event);
+      if (!this.leaf) {
+        this.toggleExpand(event);
+      }
     };
     /**
      * Event triggered by the following actions on the main button:
@@ -768,6 +772,7 @@ const ChTreeXListItem = class {
         this.toggleOrSelect(event);
         return;
       }
+      this.emitOpenReference();
       // Enter or space
       this.toggleExpand(event);
     };
@@ -853,7 +858,6 @@ const ChTreeXListItem = class {
   }
   handleSelectedChange(newValue) {
     this.selectedItemSync.emit(this.getSelectedInfo(true, // Does not matter in this case
-    false, // Does not matter in this case
     newValue));
   }
   handleShowLinesChange(newShowLines) {
@@ -917,8 +921,7 @@ const ChTreeXListItem = class {
       return;
     }
     // Otherwise, ask the parent to focus the next sibling
-    const parentItem = this.el.parentElement
-      .parentElement;
+    const parentItem = this.el.parentElement;
     parentItem.focusNextSibling(ctrlKeyPressed);
   }
   /**
@@ -938,8 +941,7 @@ const ChTreeXListItem = class {
       return;
     }
     // Otherwise, set focus in the parent element
-    const parentItem = this.el.parentElement
-      .parentElement;
+    const parentItem = this.el.parentElement;
     // Check if the parent is not disabled
     if (parentItem.disabled) {
       parentItem.focusPreviousItem(ctrlKeyPressed);
@@ -977,7 +979,7 @@ const ChTreeXListItem = class {
     this.headerRef.focus();
     // Normal navigation auto selects the item.
     if (!ctrlKeyPressed) {
-      this.setSelected(false);
+      this.setSelected();
     }
   }
   getDirectTreeItems() {
@@ -1010,34 +1012,41 @@ const ChTreeXListItem = class {
   toggleSelected() {
     const selected = !this.selected;
     this.selected = selected;
-    this.selectedItemChange.emit(this.getSelectedInfo(true, false, selected));
+    this.selectedItemChange.emit(this.getSelectedInfo(true, selected));
   }
-  setSelected(goToReference) {
+  setSelected() {
     this.selected = true;
-    this.selectedItemChange.emit(this.getSelectedInfo(false, goToReference, true));
+    this.selectedItemChange.emit(this.getSelectedInfo(false, true));
   }
   toggleOrSelect(event) {
     if (mouseEventModifierKey(event)) {
       this.toggleSelected();
     }
     else {
-      this.setSelected(true);
+      this.setSelected();
     }
   }
+  emitOpenReference() {
+    this.openReference.emit({
+      id: this.el.id,
+      leaf: this.leaf,
+      metadata: this.metadata
+    });
+  }
   componentWillLoad() {
-    const parentElement = this.el.parentElement;
+    const parentElementItem = this.el
+      .parentElement;
     // 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));
+      this.selectedItemChange.emit(this.getSelectedInfo(true, true));
     }
     // No need to update more the status
     if (this.level === INITIAL_LEVEL) {
       return;
     }
     // Update checkbox status
-    const parentElementItem = parentElement.parentElement;
     if (parentElementItem.checkbox) {
       this.checked = parentElementItem.checked;
     }
@@ -1093,14 +1102,17 @@ const ChTreeXListItem = class {
       h("div", { class: {
           action: true,
           "readonly-mode": !this.editing
-        }, part: `action ${!this.editing ? "readonly-mode" : ""}`, onDblClick: !this.leaf && !this.editing ? this.handleActionDblClick : null }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editing ? (h("input", { class: "edit-name", part: "edit-name", disabled: this.disabled, type: "text", value: this.caption, onBlur: this.removeEditMode(false), onKeyDown: this.checkIfShouldRemoveEditMode, ref: el => (this.inputRef = el) })) : (this.caption), this.rightImgSrc &&
+        }, 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", { "aria-busy": this.downloading.toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: { expandable: true, expanded: this.expanded }, part: `expandable${this.expanded ? " expanded" : ""}` }, h("slot", { name: "tree" })))));
+      }, part: `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 {
@@ -1114,4 +1126,4 @@ const ChTreeXListItem = class {
 };
 ChTreeXListItem.style = treeXListItemCss;
 
-export { CheckBox as ch_checkbox, 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, ChTreeXListItem as ch_tree_x_list_item };

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

@@ -198,7 +198,7 @@ const ChSuggest = class {
   windowClosedHandler() {
     this.textInput.focus();
     this.windowHidden = true;
-    this.el.innerHTML = "";
+    this.slot.innerHTML = "";
   }
   // 9.PUBLIC METHODS API //
   /**
@@ -210,7 +210,7 @@ const ChSuggest = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
+    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty, ref: el => (this.slot = el) })))));
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }

package/dist/esm/ch-test-suggest.entry.js

@@ -0,0 +1,80 @@
+import { h, r as registerInstance, H as Host } from './index-0da01575.js';
+
+/**
+ * @description This function converts SelectorCategoryData[] SuggestData
+ */
+const convertObjectDataToSuggestData = (selectorCategoriesData) => {
+  const suggestData = {
+    suggestItems: null,
+    suggestLists: []
+  };
+  if (selectorCategoriesData.length) {
+    selectorCategoriesData.forEach(selectorCategory => {
+      const suggestList = {
+        label: selectorCategory.name,
+        items: []
+      };
+      selectorCategory.items.forEach((objectData) => {
+        const suggestItem = {
+          value: objectData.id,
+          description: objectData.description,
+          icon: objectData.icon
+        };
+        suggestList.items.push(suggestItem);
+      });
+      suggestData.suggestLists.push(suggestList);
+    });
+  }
+  return suggestData;
+};
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const renderSuggestLists = (suggestData) => {
+  if (suggestData === null || suggestData === void 0 ? void 0 : suggestData.suggestLists.length) {
+    const randomNumber = Math.random();
+    const result = suggestData.suggestLists.map((list) => {
+      return (h("ch-suggest-list", { label: list.label, key: randomNumber }, list.items.map((item) => {
+        return renderSuggestListsItem(item);
+      })));
+    });
+    return result;
+  }
+  return null;
+};
+const renderSuggestListsItem = (suggestItem) => {
+  return (h("ch-suggest-list-item", { value: suggestItem.value }, [suggestItem.description || suggestItem.value]));
+};
+
+const testSuggestCss = ":host{display:block}:root{--highlight-color:rgb(163, 25, 161)}ch-suggest{display:block}ch-suggest::part(title){display:block;font-weight:bold}ch-suggest::part(label){font-weight:500}ch-suggest[label-position=\"start\"]::part(label){margin-inline-end:8px;display:flex;align-items:center}ch-suggest[label-position=\"above\"]::part(label){margin-block-end:4px}ch-suggest::part(close-button){display:block;width:16px;height:16px}ch-suggest::part(close-button)::after{content:\"✖\";line-height:8px;height:100%;display:block;border:1px solid black;cursor:pointer;text-align:center;line-height:16px}ch-suggest::part(header){display:flex;justify-content:space-between;align-items:center;margin-block-end:8px}ch-suggest::part(ch-window-close){width:10px;height:10px}ch-suggest::part(input){padding:4px 8px;border:1px solid black}ch-suggest::part(input):focus{outline:2px solid var(--highlight-color);border-color:var(--highlight-color)}ch-suggest-list{background-color:rgba(234, 234, 234, 0.224);border:1px solid rgba(128, 128, 128, 0.275);border-radius:4px;padding:8px;margin-block-end:4px}ch-suggest-list::part(title){font-size:14px;font-weight:bold;text-transform:uppercase;margin:4px 0 8px 0}ch-suggest-list-item::part(button){padding:4px 8px;cursor:pointer;gap:4px}ch-suggest-list-item ch-icon{--icon-size:16px;margin-inline-end:2px}ch-suggest-list-item:hover{background-color:var(--ch-color--violet-100)}ch-suggest-list-item:focus,ch-suggest-list-item[selected]:focus{outline:2px solid var(--highlight-color)}ch-suggest-list-item[selected]{background-color:rgba(241, 184, 243, 0.42);outline:none}ch-suggest-list-item::part(button):focus{outline:2px solid var(--highlight-color);border-color:var(--highlight-color)}ch-suggest-list-item::part(content-wrapper){display:flex;gap:8px}ch-suggest::part(dropdown){margin-block-start:4px;border:1px solid black;background-color:white;padding:8px}:focus{outline-style:none !important}";
+
+const ChTestSuggest = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // 5.EVENTS (EMIT) //
+    // 6.COMPONENT LIFECYCLE EVENTS //
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
+     */
+    this.selectObjectValueChangedHandler = async (e) => {
+      const value = e.detail;
+      this.selectorSourceCallback(value)
+        .then(result => {
+        /* show suggestions*/
+        this.objectsSuggestions = convertObjectDataToSuggestData(result);
+      })
+        .catch(() => {
+        // to do
+      });
+    };
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("ch-suggest", { onValueChanged: this.selectObjectValueChangedHandler, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))));
+  }
+};
+ChTestSuggest.style = testSuggestCss;
+
+export { ChTestSuggest as ch_test_suggest };

package/dist/esm/ch-test-tree-x.entry.js

@@ -1,21 +1,25 @@
-import { r as registerInstance, h, f as forceUpdate, H as Host } from './index-0da01575.js';
+import { r as registerInstance, c as createEvent, h, f as forceUpdate } from './index-0da01575.js';
 
 const testTreeXCss = "ch-test-tree-x{display:contents}";
 
 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 ChTestTreeX = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    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.selectedItems = new Set();
-    this.flattenedLazyTreeModel = new Map();
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
@@ -23,12 +27,12 @@ const ChTestTreeX = class {
     this.waitDropProcessing = false;
     /**
      * This attribute lets you specify if the drag operation is disabled in all
-     * items by default. If `true`, the control can't be dragged.
+     * 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 control won't accept any drops.
+     * items by default. If `true`, the items won't accept any drops.
      */
     this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
     /**
@@ -39,6 +43,11 @@ const ChTestTreeX = class {
      * Set this attribute if you want to allow multi selection of the items.
      */
     this.multiSelection = false;
+    /**
+     * 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;
     /**
      * `true` to display the relation between tree items and tree lists using
      * lines.
@@ -58,6 +67,7 @@ const ChTestTreeX = class {
       });
     };
     this.handleSelectedItemsChange = (event) => {
+      event.stopPropagation();
       const itemsToProcess = new Map(event.detail);
       // Remove no longer selected items
       this.selectedItems.forEach(selectedItemId => {
@@ -81,12 +91,17 @@ const ChTestTreeX = class {
         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;
@@ -151,13 +166,13 @@ const ChTestTreeX = class {
       itemUIModelExtended.parentItem = newParentUIModel;
     };
     this.renderSubModel = (treeSubModel, lastItem, level) => {
-      var _a, _b;
-      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+      var _a, _b, _c;
+      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, editable: (_c = treeSubModel.editable) !== null && _c !== void 0 ? _c : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
         treeSubModel.items != null &&
-        treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))))));
+        treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
     };
     this.flattenItemUIModel = (parentModel) => (item) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e;
       this.flattenedTreeModel.set(item.id, {
         parentItem: parentModel,
         item: item
@@ -168,10 +183,8 @@ const ChTestTreeX = class {
       (_a = item.expanded) !== null && _a !== void 0 ? _a : (item.expanded = DEFAULT_EXPANDED_VALUE);
       (_b = item.indeterminate) !== null && _b !== void 0 ? _b : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
       (_c = item.lazy) !== null && _c !== void 0 ? _c : (item.lazy = DEFAULT_LAZY_VALUE);
-      (_d = item.selected) !== null && _d !== void 0 ? _d : (item.selected = DEFAULT_SELECTED_VALUE);
-      if (item.lazy) {
-        this.flattenedLazyTreeModel.set(item.id, item);
-      }
+      (_d = item.order) !== null && _d !== void 0 ? _d : (item.order = DEFAULT_ORDER_VALUE);
+      (_e = item.selected) !== null && _e !== void 0 ? _e : (item.selected = DEFAULT_SELECTED_VALUE);
       if (item.selected) {
         this.selectedItems.add(item.id);
       }
@@ -186,9 +199,8 @@ const ChTestTreeX = class {
    * lazy state, updates the item's UI Model.
    */
   async loadLazyContent(itemId, items, downloading = false, lazy = false) {
-    const itemToLazyLoadContent = this.flattenedLazyTreeModel.get(itemId);
+    const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
     // Establish that the content was lazy loaded
-    this.flattenedLazyTreeModel.delete(itemId);
     itemToLazyLoadContent.downloading = downloading;
     itemToLazyLoadContent.lazy = lazy;
     // Check if there is items to add
@@ -339,11 +351,15 @@ const ChTestTreeX = class {
       }
     });
   }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
   flattenSubModel(model) {
     const items = model.items;
     if (!items) {
       // Make sure that subtrees don't have an undefined array
-      if (model.leaf === false) {
+      if (model.leaf !== true) {
         model.items = [];
       }
       return;
@@ -359,14 +375,13 @@ const ChTestTreeX = class {
   }
   flattenModel() {
     this.flattenedTreeModel.clear();
-    this.flattenedLazyTreeModel.clear();
     this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
   }
   componentWillLoad() {
     this.flattenModel();
   }
   render() {
-    return (h(Host, null, h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, 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)))));
+    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 watchers() { return {
     "treeModel": ["handleTreeModelChange"]