@genexus/genexus-ide-ui 0.0.57 → 0.0.58

package/dist/components/tree-view.js

@@ -0,0 +1,453 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './checkbox.js';
+import { d as defineCustomElement$2 } from './tree-x.js';
+import { d as defineCustomElement$1 } from './tree-x-list-item.js';
+
+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 GxgTreeView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 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 = [];
+    /**
+     * 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 = "all";
+    this.handleDroppableZoneEnter = (event) => {
+      if (!this.checkDroppableZoneCallback) {
+        return;
+      }
+      event.stopPropagation();
+      // Suppose the request is made immediately by executing the callback
+      const requestTimestamp = new Date().getTime();
+      const dropInformation = event.detail;
+      const promise = this.checkDroppableZoneCallback(dropInformation);
+      promise.then((validDrop) => {
+        this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+      });
+    };
+    this.handleSelectedItemsChange = (event) => {
+      event.stopPropagation();
+      const itemsToProcess = new Map(event.detail);
+      // Remove no longer selected items
+      this.selectedItems.forEach((selectedItemId) => {
+        const itemUIModel = this.flattenedTreeModel.get(selectedItemId).item;
+        const itemIsStillSelected = itemsToProcess.get(selectedItemId);
+        // The item does not need to be added. Remove it from the processed list
+        if (itemIsStillSelected) {
+          itemUIModel.expanded = itemIsStillSelected.expanded; // Update expanded state
+          itemsToProcess.delete(selectedItemId);
+        }
+        // The item must be un-selected in the UI Model
+        else {
+          itemUIModel.selected = false;
+          this.selectedItems.delete(selectedItemId);
+        }
+      });
+      // Add new selected items
+      itemsToProcess.forEach((newSelectedItemInfo, itemId) => {
+        const newSelectedItem = this.flattenedTreeModel.get(itemId).item;
+        newSelectedItem.selected = true;
+        newSelectedItem.expanded = newSelectedItemInfo.expanded;
+        this.selectedItems.add(itemId);
+      });
+      this.selectedItemsChange.emit(event.detail);
+    };
+    this.handleExpandedItemChange = (event) => {
+      const detail = event.detail;
+      const itemInfo = this.flattenedTreeModel.get(detail.id).item;
+      itemInfo.expanded = detail.expanded;
+    };
+    this.handleItemContextmenu = (event) => {
+      event.stopPropagation();
+      this.itemContextmenu.emit(event.detail);
+    };
+    this.handleItemsDropped = (event) => {
+      if (!this.dropItemsCallback) {
+        return;
+      }
+      event.stopPropagation();
+      const dataTransferInfo = event.detail;
+      const newContainer = dataTransferInfo.newContainer;
+      const newParentId = newContainer.id;
+      // Check if the parent exists in the UI Model
+      if (!this.flattenedTreeModel.get(newParentId)) {
+        return;
+      }
+      const draggedItems = dataTransferInfo.draggedItems;
+      if (draggedItems.length === 0) {
+        return;
+      }
+      const promise = this.dropItemsCallback(dataTransferInfo);
+      this.waitDropProcessing = true;
+      promise.then(async (response) => {
+        this.waitDropProcessing = false;
+        if (!response.acceptDrop) {
+          return;
+        }
+        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
+        // Only move the items to the new parent, keeping the state
+        if (dataTransferInfo.dropInTheSameTree) {
+          // Add the UI models to the new container and remove the UI models from
+          // the old containers
+          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+          // When the selected items are moved, the tree must remove its internal
+          // state to not have undefined references
+          if (dataTransferInfo.draggingSelectedItems) {
+            await this.treeRef.clearSelectedItemsInfo();
+          }
+        }
+        // Add the new items
+        else {
+          if (response.items == null) {
+            return;
+          }
+          // Add new items to the parent
+          newParentUIModel.items.push(...response.items);
+          // Flatten the new UI models
+          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
+        }
+        this.sortItems(newParentUIModel.items);
+        // Open the item to visualize the new subitems
+        newParentUIModel.expanded = true;
+        // There is no need to force and update, since the waitDropProcessing
+        // prop was modified
+      });
+    };
+    this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
+      const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
+      const item = itemUIModelExtended.item;
+      const oldParentItem = itemUIModelExtended.parentItem;
+      // Remove the UI model from the previous parent
+      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
+      // Add the UI Model to the new parent
+      newParentUIModel.items.push(item);
+      // Reference the new parent in the item
+      itemUIModelExtended.parentItem = newParentUIModel;
+    };
+    this.renderSubModel = (treeSubModel, lastItem, level) => {
+      var _a, _b, _c;
+      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.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,
+        item: item,
+      });
+      // Make sure the properties are with their default values to avoid issues
+      // when reusing DOM nodes
+      item.class = item.class == null ? DEFAULT_CLASS_VALUE : item.class;
+      item.expanded =
+        item.expanded == null ? DEFAULT_EXPANDED_VALUE : item.expanded;
+      item.indeterminate =
+        item.indeterminate == null
+          ? DEFAULT_INDETERMINATE_VALUE
+          : item.indeterminate;
+      item.lazy = item.lazy == null ? DEFAULT_LAZY_VALUE : item.lazy;
+      item.order = item.order == null ? DEFAULT_ORDER_VALUE : item.order;
+      item.selected =
+        item.selected == null ? DEFAULT_SELECTED_VALUE : item.selected;
+      if (item.leftImgSrc) {
+        item.leftImgSrc = resolveImgPath(item.leftImgSrc);
+      }
+      if (item.selected) {
+        this.selectedItems.add(item.id);
+      }
+      this.flattenSubModel(item);
+    };
+  }
+  handleTreeModelChange() {
+    this.flattenModel();
+  }
+  /**
+   * Given an item id, an array of items to add, the download status and the
+   * lazy state, updates the item's UI Model.
+   */
+  async loadLazyContent(itemId, items, downloading = false, lazy = false) {
+    const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
+    // Establish that the content was lazy loaded
+    itemToLazyLoadContent.downloading = downloading;
+    itemToLazyLoadContent.lazy = lazy;
+    // Check if there is items to add
+    if (items == null) {
+      return;
+    }
+    // @todo What happens in the server when dropping items on a lazy node?
+    itemToLazyLoadContent.items = items;
+    this.sortItems(itemToLazyLoadContent.items);
+    this.flattenSubModel(itemToLazyLoadContent);
+    // Force re-render
+    forceUpdate(this);
+  }
+  /**
+   * Given an item id, it displays and scrolls into the item view.
+   */
+  async scrollIntoVisible(treeItemId) {
+    const itemUIModel = this.flattenedTreeModel.get(treeItemId);
+    if (!itemUIModel) {
+      // @todo Check if the item is on the server?
+      return;
+    }
+    let visitedNode = itemUIModel.parentItem;
+    // While the parent is not the root, update the UI Models
+    while (visitedNode && visitedNode.id != null) {
+      // Expand the item
+      visitedNode.expanded = true;
+      const visitedNodeUIModel = this.flattenedTreeModel.get(visitedNode.id);
+      visitedNode = visitedNodeUIModel.parentItem;
+    }
+    forceUpdate(this);
+    // @todo For some reason, when the model is created using the "big model" option,
+    // this implementation does not work when only the UI Model is updated. So, to
+    // expand the items, we have to delegate the responsibility to the tree-x
+    this.treeRef.scrollIntoVisible(treeItemId);
+  }
+  /**
+   * This method is used to toggle a tree item by the tree item id/ids.
+   *
+   * @param treeItemIds An array id the tree items to be toggled.
+   * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
+   * @returns The modified items after the method was called.
+   */
+  async toggleItems(treeItemIds, expand) {
+    if (!treeItemIds) {
+      return [];
+    }
+    const modifiedTreeItems = [];
+    treeItemIds.forEach((treeItemId) => {
+      const itemInfo = this.flattenedTreeModel.get(treeItemId).item;
+      if (itemInfo) {
+        itemInfo.expanded = expand !== null && expand !== void 0 ? expand : !itemInfo.expanded;
+        modifiedTreeItems.push({
+          id: itemInfo.id,
+          expanded: itemInfo.expanded,
+        });
+      }
+    });
+    // Force re-render
+    forceUpdate(this);
+    return modifiedTreeItems;
+  }
+  /**
+   * Given a subset of item's properties, it updates all item UI models.
+   */
+  async updateAllItemsProperties(properties) {
+    [...this.flattenedTreeModel.values()].forEach((itemUIModel) => {
+      if (properties.expanded != null) {
+        itemUIModel.item.expanded = properties.expanded;
+      }
+      if (properties.checked != null) {
+        itemUIModel.item.checked = properties.checked;
+        itemUIModel.item.indeterminate = false;
+      }
+    });
+    forceUpdate(this);
+  }
+  /**
+   * Given a item list and the properties to update, it updates the properties
+   * of the items in the list.
+   */
+  async updateItemsProperties(items, properties) {
+    items.forEach((item) => {
+      const itemUIModel = this.flattenedTreeModel.get(item);
+      this.updateItemProperty(itemUIModel, properties);
+    });
+    forceUpdate(this);
+  }
+  /**
+   * Update the information about the valid droppable zones.
+   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+   * @param newContainerId ID of the container where the drag is trying to be made.
+   * @param draggedItems Information about the dragged items.
+   * @param validDrop Current state of the droppable zone.
+   */
+  async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
+  }
+  updateItemProperty(itemUIModel, properties) {
+    if (!itemUIModel) {
+      return;
+    }
+    const itemInfo = itemUIModel.item;
+    Object.keys(properties).forEach((propertyName) => {
+      itemInfo[propertyName] = properties[propertyName];
+    });
+  }
+  loadLazyChildrenHandler(event) {
+    if (!this.lazyLoadTreeItemsCallback) {
+      return;
+    }
+    event.stopPropagation();
+    const treeItemId = event.detail;
+    const promise = this.lazyLoadTreeItemsCallback(treeItemId);
+    event.target.downloading = true;
+    promise.then((result) => {
+      this.loadLazyContent(treeItemId, result);
+    });
+  }
+  handleCaptionModification(event) {
+    if (!this.modifyItemCaptionCallback) {
+      return;
+    }
+    event.stopPropagation();
+    const itemRef = event.target;
+    const itemId = event.detail.id;
+    const itemUIModel = this.flattenedTreeModel.get(itemId);
+    const itemInfo = itemUIModel.item;
+    const newCaption = event.detail.caption;
+    const oldCaption = itemInfo.caption;
+    // Optimistic UI: Update the caption in the UI Model before the change is
+    // completed in the server
+    itemInfo.caption = newCaption;
+    // Due to performance reasons, we don't make a shallow copy of the
+    // treeModel to force a re-render
+    itemRef.caption = newCaption;
+    const promise = this.modifyItemCaptionCallback(itemId, newCaption);
+    promise.then((status) => {
+      if (status.success) {
+        this.sortItems(itemUIModel.parentItem.items);
+        // Force re-render
+        forceUpdate(this);
+      }
+      else {
+        itemRef.caption = oldCaption;
+        itemInfo.caption = oldCaption;
+        // Do something with the error message
+      }
+    });
+  }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
+  flattenSubModel(model) {
+    const items = model.items;
+    if (!items) {
+      // Make sure that subtrees don't have an undefined array
+      if (model.leaf !== true) {
+        model.items = [];
+      }
+      return;
+    }
+    this.sortItems(items);
+    items.forEach(this.flattenItemUIModel(model));
+  }
+  sortItems(items) {
+    // Ensure that items are sorted
+    if (this.sortItemsCallback) {
+      this.sortItemsCallback(items);
+    }
+  }
+  flattenModel() {
+    this.flattenedTreeModel.clear();
+    this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
+  }
+  componentWillLoad() {
+    this.flattenModel();
+  }
+  render() {
+    return (h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: (el) => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0))));
+  }
+  static get watchers() { return {
+    "treeModel": ["handleTreeModelChange"]
+  }; }
+  static get style() { return treeViewCss; }
+}, [0, "gxg-tree-view", {
+    "checkDroppableZoneCallback": [16],
+    "cssClass": [1, "css-class"],
+    "dragDisabled": [4, "drag-disabled"],
+    "dropDisabled": [4, "drop-disabled"],
+    "dropItemsCallback": [16],
+    "treeModel": [16],
+    "lazyLoadTreeItemsCallback": [16],
+    "modifyItemCaptionCallback": [16],
+    "multiSelection": [4, "multi-selection"],
+    "editableItems": [4, "editable-items"],
+    "showLines": [1, "show-lines"],
+    "sortItemsCallback": [16],
+    "waitDropProcessing": [32],
+    "loadLazyContent": [64],
+    "scrollIntoVisible": [64],
+    "toggleItems": [64],
+    "updateAllItemsProperties": [64],
+    "updateItemsProperties": [64],
+    "updateValidDropZone": [64]
+  }, [[0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"], [2, "openReference", "handleOpenReference"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-tree-view", "ch-checkbox", "ch-tree-x", "ch-tree-x-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-tree-view":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxgTreeView);
+      }
+      break;
+    case "ch-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-tree-x":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-tree-x-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxgTreeView as G, defineCustomElement as d };

package/dist/components/tree-x-list-item.js

@@ -2,15 +2,15 @@ import { proxyCustomElement, HTMLElement, createEvent, h, writeTask, Host } from
 import { m as mouseEventModifierKey } from './helpers.js';
 import { d as defineCustomElement$1 } from './checkbox.js';
 
-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";
@@ -36,6 +36,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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);
     /**
@@ -182,16 +183,15 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         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) => {
@@ -200,8 +200,11 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         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:
@@ -221,6 +224,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         this.toggleOrSelect(event);
         return;
       }
+      this.emitOpenReference();
       // Enter or space
       this.toggleExpand(event);
     };
@@ -306,7 +310,6 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   handleSelectedChange(newValue) {
     this.selectedItemSync.emit(this.getSelectedInfo(true, // Does not matter in this case
-    false, // Does not matter in this case
     newValue));
   }
   handleShowLinesChange(newShowLines) {
@@ -370,8 +373,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       return;
     }
     // Otherwise, ask the parent to focus the next sibling
-    const parentItem = this.el.parentElement
-      .parentElement;
+    const parentItem = this.el.parentElement;
     parentItem.focusNextSibling(ctrlKeyPressed);
   }
   /**
@@ -391,8 +393,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       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);
@@ -430,7 +431,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.headerRef.focus();
     // Normal navigation auto selects the item.
     if (!ctrlKeyPressed) {
-      this.setSelected(false);
+      this.setSelected();
     }
   }
   getDirectTreeItems() {
@@ -463,34 +464,41 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   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;
     }
@@ -546,14 +554,17 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       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 this; }
   static get watchers() { return {
@@ -575,6 +586,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "dropDisabled": [4, "drop-disabled"],
     "dragState": [1025, "drag-state"],
     "downloading": [4],
+    "editable": [4],
     "editing": [1028],
     "expanded": [1028],
     "lastItem": [4, "last-item"],