@genexus/genexus-ide-ui 0.0.56 → 0.0.58

package/dist/cjs/gxg-tree-view.cjs.entry.js

@@ -4,49 +4,76 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a32426a.js');
 
-const treeViewCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-tree-view{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;height:100%;font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-on-background)}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}ch-tree-x-list-item{--expandable-button-width:var(--spacing-comp-04)}ch-tree-x-list-item::part(header){padding-inline-start:var(--spacing-comp-01);padding-inline-end:calc(var(--spacing-comp-02) * 0.65);border:1px solid transparent;height:var(--spacing-comp-05)}ch-tree-x-list-item::part(header):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-tree-x-list-item[selected]::part(header){background-color:var(--gxg-background-color--selected);outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-tree-x-list-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}ch-tree-x-list-item::part(expandable-button){background-color:var(--color-hover)}ch-tree-x-list-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}ch-tree-x-list-item::part(expandable-button):hover{background-color:var(--color-background)}ch-tree-x-list-item::part(expandable-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:0}ch-tree-x-list-item::part(action){text-transform:capitalize}ch-tree-x-list-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-tree-x-list-item::part(downloading){width:var(--spacing-comp-03);height:var(--spacing-comp-03);border:var(--border-width-md) solid var(--color-primary-enabled);border-inline-start-color:transparent}";
+const resolveImgPath = (img) => `/build/icon-assets/${img}.svg`;
 
+const treeViewCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}gxg-tree-view{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-on-background);display:contents}ch-tree-x{}ch-tree-x::-webkit-scrollbar{width:6px;height:6px}ch-tree-x::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-tree-x::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-tree-x::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-tree-x>div.ch-tree-x-container{position:relative;width:100%}ch-tree-x-list-item{--expandable-button-width:var(--spacing-comp-04)}ch-tree-x-list-item.tree-view-item--folder::part(action)::before,ch-tree-x-list-item.tree-view-item--module::part(action)::before{grid-area:left-img;content:\"\";width:14px;height:14px;margin-inline-end:4px;background-repeat:no-repeat}ch-tree-x-list-item.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}ch-tree-x-list-item.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}ch-tree-x-list-item .tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;grid-area:left-img;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:#2c3b92;border-radius:50%}ch-tree-x-list-item::part(header){padding-inline-end:calc(var(--spacing-comp-02) * 0.65);border:1px solid transparent;height:var(--spacing-comp-05)}ch-tree-x-list-item::part(header):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}ch-tree-x-list-item[selected]::part(header){background-color:var(--gxg-background-color--selected)}ch-tree-x-list-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}ch-tree-x-list-item::part(expandable-button){background-color:var(--color-hover);margin-inline-start:var(--spacing-comp-01)}ch-tree-x-list-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}ch-tree-x-list-item::part(expandable-button):hover{background-color:var(--color-background)}ch-tree-x-list-item::part(expandable-button):focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:0}ch-tree-x-list-item::part(action){text-transform:capitalize}ch-tree-x-list-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}ch-tree-x-list-item::part(downloading){width:var(--spacing-comp-03);height:var(--spacing-comp-03);border:var(--border-width-md) solid var(--color-primary-enabled);border-inline-start-color:transparent}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
+
+const DEFAULT_DRAG_DISABLED_VALUE = false;
+const DEFAULT_DROP_DISABLED_VALUE = false;
+const DEFAULT_CLASS_VALUE = "tree-view-item";
+const DEFAULT_EDITABLE_ITEMS_VALUE = true;
 const DEFAULT_EXPANDED_VALUE = false;
 const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
+const DEFAULT_ORDER_VALUE = 0;
 const DEFAULT_SELECTED_VALUE = false;
-const ChTestTreeX = class {
+const GxgTreeView = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.itemContextmenu = index.createEvent(this, "itemContextmenu", 7);
+    this.itemOpenReference = index.createEvent(this, "itemOpenReference", 7);
+    this.selectedItemsChange = index.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.
      */
     this.waitDropProcessing = false;
+    /**
+     * This attribute lets you specify if the drag operation is disabled in all
+     * items by default. If `true`, the items can't be dragged.
+     */
+    this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
+    /**
+     * This attribute lets you specify if the drop operation is disabled in all
+     * items by default. If `true`, the items won't accept any drops.
+     */
+    this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
     /**
      * This property lets you define the model of the ch-tree-x control.
      */
-    this.treeModel = { items: [] };
+    this.treeModel = [];
     /**
      * 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.
      */
-    this.showLines = "none";
+    this.showLines = "all";
     this.handleDroppableZoneEnter = (event) => {
-      const dropInformation = event.detail;
       if (!this.checkDroppableZoneCallback) {
         return;
       }
+      event.stopPropagation();
+      // Suppose the request is made immediately by executing the callback
       const requestTimestamp = new Date().getTime();
+      const dropInformation = event.detail;
       const promise = this.checkDroppableZoneCallback(dropInformation);
       promise.then((validDrop) => {
-        this.treeRef.updateValidDroppableZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+        this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
       });
     };
     this.handleSelectedItemsChange = (event) => {
+      event.stopPropagation();
       const itemsToProcess = new Map(event.detail);
       // Remove no longer selected items
       this.selectedItems.forEach((selectedItemId) => {
@@ -70,13 +97,22 @@ 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;
+      }
+      event.stopPropagation();
       const dataTransferInfo = event.detail;
       const newContainer = dataTransferInfo.newContainer;
       const newParentId = newContainer.id;
@@ -85,12 +121,12 @@ const ChTestTreeX = class {
         return;
       }
       const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0 || !this.dropItemsCallback) {
+      if (draggedItems.length === 0) {
         return;
       }
       const promise = this.dropItemsCallback(dataTransferInfo);
       this.waitDropProcessing = true;
-      promise.then((response) => {
+      promise.then(async (response) => {
         this.waitDropProcessing = false;
         if (!response.acceptDrop) {
           return;
@@ -101,6 +137,11 @@ const ChTestTreeX = class {
           // Add the UI models to the new container and remove the UI models from
           // the old containers
           draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+          // When the selected items are moved, the tree must remove its internal
+          // state to not have undefined references
+          if (dataTransferInfo.draggingSelectedItems) {
+            await this.treeRef.clearSelectedItemsInfo();
+          }
         }
         // Add the new items
         else {
@@ -130,9 +171,12 @@ const ChTestTreeX = class {
       // Reference the new parent in the item
       itemUIModelExtended.parentItem = newParentUIModel;
     };
-    this.renderSubModel = (treeSubModel) => (index.h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
-      treeSubModel.items != null &&
-      treeSubModel.items.length !== 0 && (index.h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map(this.renderSubModel)))));
+    this.renderSubModel = (treeSubModel, lastItem, level) => {
+      var _a, _b, _c;
+      return (index.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.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
+    };
     this.flattenItemUIModel = (parentModel) => (item) => {
       this.flattenedTreeModel.set(item.id, {
         parentItem: parentModel,
@@ -140,6 +184,7 @@ const ChTestTreeX = class {
       });
       // Make sure the properties are with their default values to avoid issues
       // when reusing DOM nodes
+      item.class = item.class == null ? DEFAULT_CLASS_VALUE : item.class;
       item.expanded =
         item.expanded == null ? DEFAULT_EXPANDED_VALUE : item.expanded;
       item.indeterminate =
@@ -147,10 +192,11 @@ const ChTestTreeX = class {
           ? DEFAULT_INDETERMINATE_VALUE
           : item.indeterminate;
       item.lazy = item.lazy == null ? DEFAULT_LAZY_VALUE : item.lazy;
+      item.order = item.order == null ? DEFAULT_ORDER_VALUE : item.order;
       item.selected =
         item.selected == null ? DEFAULT_SELECTED_VALUE : item.selected;
-      if (item.lazy) {
-        this.flattenedLazyTreeModel.set(item.id, item);
+      if (item.leftImgSrc) {
+        item.leftImgSrc = resolveImgPath(item.leftImgSrc);
       }
       if (item.selected) {
         this.selectedItems.add(item.id);
@@ -161,6 +207,26 @@ const ChTestTreeX = class {
   handleTreeModelChange() {
     this.flattenModel();
   }
+  /**
+   * Given an item id, an array of items to add, the download status and the
+   * lazy state, updates the item's UI Model.
+   */
+  async loadLazyContent(itemId, items, downloading = false, lazy = false) {
+    const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
+    // Establish that the content was lazy loaded
+    itemToLazyLoadContent.downloading = downloading;
+    itemToLazyLoadContent.lazy = lazy;
+    // Check if there is items to add
+    if (items == null) {
+      return;
+    }
+    // @todo What happens in the server when dropping items on a lazy node?
+    itemToLazyLoadContent.items = items;
+    this.sortItems(itemToLazyLoadContent.items);
+    this.flattenSubModel(itemToLazyLoadContent);
+    // Force re-render
+    index.forceUpdate(this);
+  }
   /**
    * Given an item id, it displays and scrolls into the item view.
    */
@@ -236,6 +302,16 @@ const ChTestTreeX = class {
     });
     index.forceUpdate(this);
   }
+  /**
+   * Update the information about the valid droppable zones.
+   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+   * @param newContainerId ID of the container where the drag is trying to be made.
+   * @param draggedItems Information about the dragged items.
+   * @param validDrop Current state of the droppable zone.
+   */
+  async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
+  }
   updateItemProperty(itemUIModel, properties) {
     if (!itemUIModel) {
       return;
@@ -246,36 +322,22 @@ const ChTestTreeX = class {
     });
   }
   loadLazyChildrenHandler(event) {
+    if (!this.lazyLoadTreeItemsCallback) {
+      return;
+    }
     event.stopPropagation();
     const treeItemId = event.detail;
-    if (this.lazyLoadTreeItemsCallback) {
-      const promise = this.lazyLoadTreeItemsCallback(treeItemId);
-      const itemRef = event.target;
-      itemRef.downloading = true;
-      promise.then((result) => {
-        const itemToLazyLoadContent = this.flattenedLazyTreeModel.get(treeItemId);
-        // Establish that the content was lazy loaded
-        this.flattenedLazyTreeModel.delete(treeItemId);
-        itemToLazyLoadContent.lazy = false;
-        itemRef.downloading = false;
-        // Check if there is items to add
-        if (result == null) {
-          return;
-        }
-        // @todo What happens in the server when dropping items on a lazy node?
-        itemToLazyLoadContent.items = result;
-        this.sortItems(itemToLazyLoadContent.items);
-        this.flattenSubModel(itemToLazyLoadContent);
-        // Force re-render
-        index.forceUpdate(this);
-      });
-    }
+    const promise = this.lazyLoadTreeItemsCallback(treeItemId);
+    event.target.downloading = true;
+    promise.then((result) => {
+      this.loadLazyContent(treeItemId, result);
+    });
   }
   handleCaptionModification(event) {
-    event.stopPropagation();
     if (!this.modifyItemCaptionCallback) {
       return;
     }
+    event.stopPropagation();
     const itemRef = event.target;
     const itemId = event.detail.id;
     const itemUIModel = this.flattenedTreeModel.get(itemId);
@@ -302,11 +364,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;
@@ -322,21 +388,18 @@ const ChTestTreeX = class {
   }
   flattenModel() {
     this.flattenedTreeModel.clear();
-    this.flattenedLazyTreeModel.clear();
-    this.flattenSubModel(this.treeModel);
+    this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
   }
   componentWillLoad() {
     this.flattenModel();
   }
   render() {
-    return (index.h(index.Host, null, index.h("ch-tree-x", { multiSelection: this.multiSelection,
-      // showLines={this.showLines}
-      waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: (el) => (this.treeRef = el) }, index.h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel))), index.h("div", { class: "tree-buttons" })));
+    return (index.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"]
   }; }
 };
-ChTestTreeX.style = treeViewCss;
+GxgTreeView.style = treeViewCss;
 
-exports.gxg_tree_view = ChTestTreeX;
+exports.gxg_tree_view = GxgTreeView;