@genexus/genexus-ide-ui 0.0.93 → 0.0.94

package/dist/genexus-ide-ui/{p-2e3e48f6.entry.js → p-73a078e2.entry.js}

@@ -1,16 +1,18 @@
-import { r as e, c as t, g as i, h as s, H as n, w as a } from "./p-1e275d2c.js";
+import { r as e, c as t, g as i, h as n, H as s, w as a } from "./p-d8a08b43.js";
 
-import { D as h } from "./p-9c03a1dd.js";
+import { D as r } from "./p-9c03a1dd.js";
 
-import { f as r, m as d } from "./p-44b0b051.js";
+import { f as h, m as o } from "./p-44b0b051.js";
 
-const o = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+import { r as d } from "./p-e408d7b7.js";
+
+const c = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
 
 const l = "checkbox";
 
 const PARTS = (e, t) => `${e ? " checked" : ""}${t ? " indeterminate" : ""}`;
 
-const c = class {
+const p = class {
   constructor(i) {
     this.getValue = e => e ? this.checkedValue : this.unCheckedValue
     /**
@@ -26,10 +28,10 @@ const c = class {
       e.stopPropagation();
       const t = e.target;
       const i = t.checked;
-      const s = this.getValue(i);
+      const n = this.getValue(i);
       this.checked = i;
-      this.value = s;
-      t.value = s;
+      this.value = n;
+      t.value = n;
  // Update input's value before emitting the event
             this.input.emit(e);
       if (this.highlightable) {
@@ -62,18 +64,18 @@ const c = class {
   render() {
     var e;
     const t = PARTS(this.checked, this.indeterminate);
-    return s(n, {
+    return n(s, {
       class: {
-        [h]: this.disabled,
+        [r]: this.disabled,
         "ch-checkbox--actionable": !this.readonly && !this.disabled || this.readonly && this.highlightable
       }
-    }, s("div", {
+    }, n("div", {
       class: {
         container: true,
         "container--checked": this.checked
       },
       part: `container${t}`
-    }, s("input", {
+    }, n("input", {
       "aria-label": ((e = this.accessibleName) === null || e === void 0 ? void 0 : e.trim()) !== "" && this.accessibleName !== this.caption ? this.accessibleName : null,
       id: this.caption ? l : null,
       class: "input",
@@ -85,7 +87,7 @@ const c = class {
       value: this.value,
       onClick: this.handleClick,
       onInput: this.handleChange
-    }), s("div", {
+    }), n("div", {
       class: {
         option: true,
         "option--checked": this.checked && !this.indeterminate,
@@ -93,7 +95,7 @@ const c = class {
       },
       part: `option${t}`,
       "aria-hidden": "true"
-    })), this.caption && s("label", {
+    })), this.caption && n("label", {
       class: "label",
       part: "label",
       htmlFor: l,
@@ -107,69 +109,86 @@ const c = class {
   }
 };
 
-c.style = o;
+p.style = c;
 
-const scrollToEdge = (e, t, i, s) => {
-  const n = e.clientY - t.getBoundingClientRect().top;
+const scrollToEdge = (e, t, i, n) => {
+  const s = e.clientY - t.getBoundingClientRect().top;
   const a = t.clientHeight;
-  const h = n <= s;
-  const r = n > a - s;
-  if (h || r) {
-    const e = h ? n - s : n - (a - s);
+  const r = s <= n;
+  const h = s > a - n;
+  if (r || h) {
+    const e = r ? s - n : s - (a - n);
     // Adjust container scroll position
         t.scrollTop += e / i;
   }
 };
 
-const p = "ch-tree-view{display:flex;position:relative;block-size:100%;inline-size:100%;overflow:auto}ch-tree-view>.ch-tree-view-container{position:absolute;inset:0}ch-tree-view.ch-tree-view-dragging-item ch-tree-view-item{pointer-events:var(--ch-tree-view-pointer-events, all)}ch-tree-view.ch-tree-view-dragging-item .ch-tree-view-list-item--deny-drop{pointer-events:none}ch-tree-view.ch-tree-view--dragging-selected-items ch-tree-view-item[selected]{--ch-tree-view-pointer-events:none}ch-tree-view.ch-tree-view-waiting-drop-processing{cursor:wait}ch-tree-view.ch-tree-view-waiting-drop-processing>.ch-tree-view-container{pointer-events:none}.ch-tree-view-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-view-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-view-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-view-drag-info-fade-in 10ms}@keyframes ch-tree-view-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-view-drag-info{--rtl-offset:-100%}";
+const f = "ch-tree-view{display:flex;position:relative;block-size:100%;inline-size:100%;overflow:auto}ch-tree-view>.ch-tree-view-container{position:absolute;inset:0}ch-tree-view.ch-tree-view-dragging-item ch-tree-view-item{pointer-events:var(--ch-tree-view-pointer-events, all)}ch-tree-view.ch-tree-view-dragging-item .ch-tree-view-list-item--deny-drop{pointer-events:none}ch-tree-view.ch-tree-view--dragging-selected-items ch-tree-view-item[selected]{--ch-tree-view-pointer-events:none}ch-tree-view.ch-tree-view-waiting-drop-processing{cursor:wait}ch-tree-view.ch-tree-view-waiting-drop-processing>.ch-tree-view-container{pointer-events:none}.ch-tree-view-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-view-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-view-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-view-drag-info-fade-in 10ms}@keyframes ch-tree-view-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-view-drag-info{--rtl-offset:-100%}";
+
+var v = undefined && undefined.__classPrivateFieldGet || function(e, t, i, n) {
+  if (i === "a" && !n) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof t === "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? n : i === "a" ? n.call(e) : n ? n.value : t.get(e);
+};
+
+var u = undefined && undefined.__classPrivateFieldSet || function(e, t, i, n, s) {
+  if (n === "m") throw new TypeError("Private method is not writable");
+  if (n === "a" && !s) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof t === "function" ? e !== t || !s : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return n === "a" ? s.call(e, i) : s ? s.value = i : t.set(e, i), i;
+};
+
+var w, g, m, b, x, k, y, _, M, C, W, $, E, z, D, I, T, L, S, V, A, F, j, P;
 
-const v = "ch-tree-view-item";
+const N = "ch-tree-view-item";
 
-const u = "ch-tree-view";
+const q = "ch-tree-view";
 
 // Selectors
 // const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
-const f = "text/plain";
+const ITEM_SELECTOR = e => `${N}[id="${e}"]`;
 
-const g = "ArrowDown";
+const H = "text/plain";
 
-const m = "ArrowUp";
+const B = "ArrowDown";
 
-const b = "F2";
+const O = "ArrowUp";
 
-const isTreeItem = e => e.tagName.toLowerCase() === v;
+const J = "F2";
 
-const getFocusedTreeItem = () => r().find(isTreeItem);
+const isTreeItem = e => e.tagName.toLowerCase() === N;
+
+const getFocusedTreeItem = () => h().find(isTreeItem);
 
 const canMoveTreeItemFocus = e => e && !e.editing;
 
 const getDroppableZoneKey = (e, t) => `"newContainerId":"${e}","metadata":"${JSON.stringify(t)}"`;
 
-const w = "--ch-tree-view-dragging-item-x";
+const K = "--ch-tree-view-dragging-item-x";
 
-const x = "--ch-tree-view-dragging-item-y";
+const Z = "--ch-tree-view-dragging-item-y";
 
-const k = class {
+const R = (P = class {
   constructor(i) {
     // @todo TODO: Check if key codes works in Safari
-    this.keyDownEvents = {
-      [g]: e => {
+    w.set(this, {
+      [B]: e => {
         const t = getFocusedTreeItem();
         if (!canMoveTreeItemFocus(t)) {
           return;
         }
         e.preventDefault();
-        t.focusNextItem(d(e));
+        t.focusNextItem(o(e));
       },
-      [m]: e => {
+      [O]: e => {
         const t = getFocusedTreeItem();
         if (!canMoveTreeItemFocus(t)) {
           return;
         }
         e.preventDefault();
-        t.focusPreviousItem(d(e));
+        t.focusPreviousItem(o(e));
       },
-      [b]: e => {
+      [J]: e => {
         const t = getFocusedTreeItem();
         if (!t || !t.editable) {
           return;
@@ -177,19 +196,87 @@ const k = class {
         e.preventDefault();
         t.editing = true;
       }
-    };
-    this.draggingSelectedItems = false;
-    this.needForRAF = true;
+    });
+    g.set(this, false);
+    m.set(this, true);
  // To prevent redundant RAF (request animation frame) calls
-        this.selectedItemsInfo = new Map;
+        b.set(this, void 0);
+    x.set(this, void 0);
     /**
-         * Cache to avoid duplicate requests when checking the droppable zone in the
-         * same drag event.
-         */    this.validDroppableZoneCache = new Map;
-    this.draggedIds = [];
-    this.draggedParentIds = [];
-    this.trackItemDrag = e => {
-      const t = e.target.closest(u) !== null;
+             * Cache to avoid duplicate requests when checking the droppable zone in the
+             * same drag event.
+             */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        k.set(this, new Map);
+    y.set(this, void 0);
+ // Useful to avoid race conditions where the server response is slow
+        _.set(this, void 0);
+    // Refs
+        M.set(this, void 0);
+    C.set(this, void 0);
+    /**
+             * Text displayed when dragging an item.
+             */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        W.set(this, void 0);
+    $.set(this, []);
+    E.set(this, []);
+    z.set(this, ((e, t = false) => {
+      if (v(this, C, "f") === e || t) {
+        clearTimeout(v(this, x, "f"));
+        u(this, C, null, "f");
+      }
+    }));
+    D.set(this, (e => this.el.querySelector(ITEM_SELECTOR(e))));
+    I.set(this, (e => {
+      const t = e.target;
+      const i = getDroppableZoneKey(t.id, v(this, _, "f"));
+      let n = v(this, k, "f").get(i);
+      // Invalidate the cache, because the item is no longer waiting for its content to be downloaded
+            if (n === "temporal-invalid" && !t.lazyLoad && !t.downloading) {
+        n = null;
+      }
+      if (n != null) {
+        return n;
+      }
+      // Do not show drop zones if:
+      //   - The effect does not allow it.
+      //   - The drop is disabled in the container target.
+      //   - When dragging in the same tree, don't mark droppable zones if they are
+      //     the dragged items or their direct parents.
+            if (e.dataTransfer.effectAllowed === "none" || t.dropDisabled || this.draggingInTree && (v(this, $, "f").includes(t.id) || v(this, E, "f").includes(t.id))) {
+        v(this, k, "f").set(i, "invalid");
+        return "invalid";
+      }
+      // Disable drops when items need to lazy load their content first
+            if (t.lazyLoad || t.downloading) {
+        v(this, k, "f").set(i, "temporal-invalid");
+        return "temporal-invalid";
+      }
+      v(this, k, "f").set(i, "checking");
+      this.droppableZoneEnter.emit({
+        newContainer: {
+          id: t.id,
+          metadata: t.metadata
+        },
+        draggedItems: v(this, _, "f")
+      });
+      return "checking";
+    }));
+    T.set(this, (e => {
+      if (e.leaf || e.expanded) {
+        return;
+      }
+      u(this, x, setTimeout((() => {
+        e.expanded = true;
+        this.expandedItemChange.emit({
+          id: e.id,
+          expanded: true
+        });
+      }), this.openSubTreeCountdown), "f");
+    }));
+    L.set(this, (e => {
+      const t = e.target.closest(q) !== null;
       // The Tree View must be the only element that processes the "dragover"
       // event. Any other handler that processes this event can modify the
       // `dropEffect` an thus break the drag and drop implementation
@@ -197,29 +284,106 @@ const k = class {
         e.stopImmediatePropagation();
       }
       e.preventDefault();
-      this.lastDragEvent = e;
-      this.updateDropEffect(e);
-      if (!this.needForRAF) {
+      u(this, b, e, "f");
+      v(this, S, "f").call(this, e);
+      if (!v(this, m, "f")) {
         return;
       }
-      this.needForRAF = false;
+      u(this, m, false, "f");
  // No need to call RAF up until next frame
             requestAnimationFrame((() => {
-        this.needForRAF = true;
+        u(this, m, true, "f");
  // RAF now consumes the movement instruction so a new one can come
-                this.el.style.setProperty(w, `${this.lastDragEvent.clientX}px`);
-        this.el.style.setProperty(x, `${this.lastDragEvent.clientY}px`);
+                this.el.style.setProperty(K, `${v(this, b, "f").clientX}px`);
+        this.el.style.setProperty(Z, `${v(this, b, "f").clientY}px`);
       }));
-    };
-    this.fixScrollPositionOnDrag = () => {
-      if (!this.draggingInTree || !this.lastDragEvent) {
+    }));
+    S.set(this, (e => {
+      const t = e.target;
+      // Check if it is a valid item
+            if (t.tagName.toLowerCase() !== N || t.closest(q) !== this.el) {
+        return;
+      }
+      const i = v(this, I, "f").call(this, e);
+      if (i === "invalid" || i === "temporal-invalid") {
+        e.dataTransfer.dropEffect = "none";
+      }
+    }));
+    V.set(this, (() => {
+      u(this, $, [], "f");
+      u(this, E, [], "f");
+    }));
+    /**
+             * First, it check if all items can be dragged. If so, it updates the
+             * dataTransfer in the drag event to store the ids and metadata of the
+             * dragged items. Also it updates the visual information of the dragged
+             * items.
+             * @returns If all selected items can be dragged.
+             */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        A.set(this, (e => {
+      const t = e.elem;
+      const i = this.selectedItemsCallback();
+      const n = i.has(t.id);
+      u(this, g, n, "f");
+      let s = [];
+      let a;
+      if (n) {
+        const e = [ ...i.keys() ];
+        const n = [ ...i.values() ];
+        const r = e.length;
+        a = n.every((e => !v(this, D, "f").call(this, e.id).dragDisabled));
+        u(this, $, e, "f");
+        s = n.map((e => ({
+          id: e.id,
+          metadata: e.metadata
+        })));
+        u(this, W, r === 1 ? t.caption : r.toString(), "f");
+      } else {
+        a = !t.dragDisabled;
+        s = [ {
+          id: t.id,
+          metadata: t.metadata
+        } ];
+        u(this, $, [ t.id ], "f");
+        u(this, W, t.caption, "f");
+      }
+      v(this, j, "f").call(this, n);
+      // Update drag event info
+            const r = JSON.stringify(s);
+      e.dragEvent.dataTransfer.setData(H, r);
+      // We must keep the data binding and processing even if there is an item
+      // that can't be dragged, otherwise, other trees or element might behave
+      // unexpected when a dragstart event comes
+            return a;
+    }));
+    F.set(this, (() => {
+      if (!this.draggingInTree || !v(this, b, "f")) {
         return;
       }
       requestAnimationFrame((() => {
-        scrollToEdge(this.lastDragEvent, this.el, 10, 30);
-        requestAnimationFrame(this.fixScrollPositionOnDrag);
+        scrollToEdge(v(this, b, "f"), this.el, 10, 30);
+        requestAnimationFrame(v(this, F, "f"));
       }));
-    };
+    }));
+    j.set(this, (e => {
+      if (!e) {
+        const e = v(this, M, "f").parentElement;
+        if (e.tagName.toLowerCase() === N) {
+          v(this, E, "f").push(e.id);
+        }
+        return;
+      }
+      // Dragging selected items
+            const t = this.selectedItemsCallback();
+      t.forEach((e => {
+        const t = e.parentId;
+        // parentId === "" when the item is in the first level of the tree
+                if (t !== "") {
+          v(this, E, "f").push(t);
+        }
+      }));
+    }));
     e(this, i);
     this.droppableZoneEnter = t(this, "droppableZoneEnter", 7);
     this.expandedItemChange = t(this, "expandedItemChange", 7);
@@ -230,29 +394,15 @@ const k = class {
     this.draggingInTree = false;
     this.multiSelection = false;
     this.openSubTreeCountdown = 750;
+    this.selectedItemsCallback = undefined;
     this.scrollToEdgeOnDrag = true;
     this.waitDropProcessing = false;
   }
   get el() {
     return i(this);
   }
-  // /**
-  //  * Returns an array of the selected tree items, providing the id, caption and
-  //  * selected status.
-  //  */
-  // @Method()
-  // async getCheckedItems(): Promise<CheckedTreeItemInfo[]> {
-  //   const checkedItems = Array.from(
-  //     this.el.querySelectorAll(CHECKED_ITEMS)
-  //   ) as HTMLChTreeViewItemElement[];
-  //   return checkedItems.map(item => ({
-  //     id: item.id,
-  //     caption: item.caption,
-  //     selected: item.selected
-  //   }));
-  // }
   handleContextMenuEvent(e) {
-    const t = e.target.closest(v);
+    const t = e.target.closest(N);
     if (!t) {
       return;
     }
@@ -266,7 +416,7 @@ const k = class {
   }
   // Set edit mode in items
   handleKeyDownEvents(e) {
-    const t = this.keyDownEvents[e.key];
+    const t = v(this, w, "f")[e.key];
     if (t) {
       t(e);
     }
@@ -276,51 +426,56 @@ const k = class {
   // getData method can only be accessed during the dragstart and drop event
   handleDragStart(e) {
     // Reset the validity of the droppable zones with each new drag start
-    this.validDroppableZoneCache.clear();
-    this.draggingInTheDocument = true;
-    this.dragStartTimestamp = (new Date).getTime();
-    this.draggedItems = JSON.parse(e.dataTransfer.getData(f));
+    v(this, k, "f").clear();
+    // If there is no data, the dragstart does not achieve the interface required
+        const t = e.dataTransfer.getData(H);
+    if (t === "") {
+      return;
+    }
+    try {
+      // Try to parse the data
+      const e = JSON.parse(t);
+      u(this, _, e, "f");
+      this.draggingInTheDocument = true;
+      u(this, y, (new Date).getTime(), "f");
+    } catch (e) {
+      // Empty
+    }
   }
   handleDragEnd() {
     this.draggingInTheDocument = false;
   }
   handleDragEnter(e) {
-    this.cancelSubTreeOpening(null, true);
+    v(this, z, "f").call(this, null, true);
     e.stopPropagation();
     const t = e.target;
     // Check if it is a valid item
-        if (t.tagName.toLowerCase() !== v) {
+        if (t.tagName.toLowerCase() !== N) {
       return;
     }
-    this.lastOpenSubTreeItem = t;
-    this.openSubTreeAfterCountdown(t);
-    if (this.validDroppableZone(e) === "valid") {
+    u(this, C, t, "f");
+    v(this, T, "f").call(this, t);
+    if (v(this, I, "f").call(this, e) === "valid") {
       t.dragState = "enter";
     }
   }
   handleDragLeave(e) {
     const t = e.target;
-    if (t.tagName.toLowerCase() !== v) {
+    if (t.tagName.toLowerCase() !== N) {
       return;
     }
     const i = t;
     i.dragState = "none";
-    this.cancelSubTreeOpening(i);
-  }
-  cancelSubTreeOpening(e, t = false) {
-    if (this.lastOpenSubTreeItem === e || t) {
-      clearTimeout(this.openSubTreeTimeout);
-      this.lastOpenSubTreeItem = null;
-    }
+    v(this, z, "f").call(this, i);
   }
   handleItemDrop(e) {
     e.stopPropagation();
-    this.cancelSubTreeOpening(null, true);
+    v(this, z, "f").call(this, null, true);
     const t = e.target;
-    const i = JSON.parse(e.dataTransfer.getData(f));
+    const i = JSON.parse(e.dataTransfer.getData(H));
     // The droppable zone must be checked, even if it was marked as not valid
     // @todo Try to drop an item with high delays in droppable zone checking
-        if (this.validDroppableZone(e) !== "valid") {
+        if (v(this, I, "f").call(this, e) !== "valid") {
       return;
     }
     this.itemsDropped.emit({
@@ -328,17 +483,19 @@ const k = class {
         id: t.id,
         metadata: t.metadata
       },
-      draggingSelectedItems: this.draggingSelectedItems,
+      draggingSelectedItems: v(this, g, "f"),
       draggedItems: i,
       dropInTheSameTree: this.draggingInTree
     });
   }
   handleItemDragStart(e) {
-    document.body.addEventListener("dragover", this.trackItemDrag, {
+    // Avoid bubbling as this event can listened in other components (e.g. ch-flexible-layout)
+    e.stopPropagation();
+    document.body.addEventListener("dragover", v(this, L, "f"), {
       capture: true
     });
-    this.currentDraggedItem = e.target;
-    const t = this.checkDragValidityAndUpdateDragInfo(e.detail);
+    u(this, M, e.target, "f");
+    const t = v(this, A, "f").call(this, e.detail);
     if (!t) {
       // This effect disables drop interactions in all page elements, so there
       // is no need to capture and prevent the drop event in the window
@@ -347,39 +504,46 @@ const k = class {
     }
     this.draggingInTree = true;
     if (this.scrollToEdgeOnDrag) {
-      this.fixScrollPositionOnDrag();
+      v(this, F, "f").call(this);
     }
   }
   handleItemDragEnd() {
     this.draggingInTree = false;
-    document.body.removeEventListener("dragover", this.trackItemDrag, {
+    document.body.removeEventListener("dragover", v(this, L, "f"), {
       capture: true
     });
     // Reset not allowed droppable ids
-        this.resetVariables();
+        v(this, V, "f").call(this);
   }
   handleSelectedItemChange(e) {
     e.stopPropagation();
     const t = e.detail;
-    this.handleItemSelection(t);
-  }
-  /**
-     * Clear all information about the selected items. This method is intended to
-     * be used when selected items are reordered and the selected references will
-     * no longer be useful.
-     */  async clearSelectedItemsInfo() {
-    this.clearSelectedItems();
+    const i = this.selectedItemsCallback();
+    // If the Control key was not pressed or multi selection is disabled,
+    // remove all selected items
+        if (!t.ctrlKeyPressed || !this.multiSelection) {
+      // Clear selected items
+      i.clear();
+    }
+    // If the item is selected, add it to list
+        if (t.selected) {
+      i.set(t.id, t);
+    } else {
+      i.delete(t.id);
+    }
+    // Sync with UI model
+        this.selectedItemsChange.emit(i);
   }
   /**
-     * Given an item id, it displays and scrolls into the item view.
-     */  async scrollIntoVisible(e) {
-    const t = this.el.querySelector(`${v}[id="${e}"]`);
+         * Given an item id, it displays and scrolls into the item view.
+         */  async scrollIntoVisible(e) {
+    const t = this.el.querySelector(ITEM_SELECTOR(e));
     if (!t) {
       return;
     }
     let i = t.parentElement;
     // Expand all parents
-        while (i.tagName.toLowerCase() === v) {
+        while (i.tagName.toLowerCase() === N) {
       i.expanded = true;
       i = i.parentElement;
     }
@@ -389,246 +553,140 @@ const k = class {
     }));
   }
   /**
-     * 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(e, t, i, s) {
-    var n;
-    if (!this.draggingInTheDocument || e <= this.dragStartTimestamp) {
+         * 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(e, t, i, n) {
+    var s;
+    if (!this.draggingInTheDocument || e <= v(this, y, "f")) {
       return;
     }
     const a = getDroppableZoneKey(t, i);
-    this.validDroppableZoneCache.set(a, s ? "valid" : "invalid");
-    const h = ((n = this.lastOpenSubTreeItem) === null || n === void 0 ? void 0 : n.id) === t;
-    if (h) {
-      this.lastOpenSubTreeItem.dragState = "enter";
-    }
-  }
-  validDroppableZone(e) {
-    const t = e.target;
-    const i = getDroppableZoneKey(t.id, this.draggedItems);
-    let s = this.validDroppableZoneCache.get(i);
-    // Invalidate the cache, because the item is no longer waiting for its content to be downloaded
-        if (s === "temporal-invalid" && !t.lazyLoad && !t.downloading) {
-      s = null;
-    }
-    if (s != null) {
-      return s;
-    }
-    // Do not show drop zones if:
-    //   - The effect does not allow it.
-    //   - The drop is disabled in the container target.
-    //   - When dragging in the same tree, don't mark droppable zones if they are
-    //     the dragged items or their direct parents.
-        if (e.dataTransfer.effectAllowed === "none" || t.dropDisabled || this.draggingInTree && (this.draggedIds.includes(t.id) || this.draggedParentIds.includes(t.id))) {
-      this.validDroppableZoneCache.set(i, "invalid");
-      return "invalid";
-    }
-    // Disable drops when items need to lazy load their content first
-        if (t.lazyLoad || t.downloading) {
-      this.validDroppableZoneCache.set(i, "temporal-invalid");
-      return "temporal-invalid";
-    }
-    this.validDroppableZoneCache.set(i, "checking");
-    this.droppableZoneEnter.emit({
-      newContainer: {
-        id: t.id,
-        metadata: t.metadata
-      },
-      draggedItems: this.draggedItems
-    });
-    return "checking";
-  }
-  openSubTreeAfterCountdown(e) {
-    if (e.leaf || e.expanded) {
-      return;
-    }
-    this.openSubTreeTimeout = setTimeout((() => {
-      e.expanded = true;
-      this.expandedItemChange.emit({
-        id: e.id,
-        expanded: true
-      });
-    }), this.openSubTreeCountdown);
-  }
-  updateDropEffect(e) {
-    const t = e.target;
-    // Check if it is a valid item
-        if (t.tagName.toLowerCase() !== v || t.closest(u) !== this.el) {
-      return;
-    }
-    const i = this.validDroppableZone(e);
-    if (i === "invalid" || i === "temporal-invalid") {
-      e.dataTransfer.dropEffect = "none";
-    }
-  }
-  resetVariables() {
-    this.draggedIds = [];
-    this.draggedParentIds = [];
-  }
-  /**
-     * First, it check if all items can be dragged. If so, it updates the
-     * dataTransfer in the drag event to store the ids and metadata of the
-     * dragged items. Also it updates the visual information of the dragged
-     * items.
-     * @returns If all selected items can be dragged.
-     */  checkDragValidityAndUpdateDragInfo(e) {
-    const t = e.elem;
-    const i = this.selectedItemsInfo.has(t.id);
-    this.draggingSelectedItems = i;
-    let s = [];
-    let n;
-    if (i) {
-      const e = [ ...this.selectedItemsInfo.keys() ];
-      const i = [ ...this.selectedItemsInfo.values() ];
-      const a = e.length;
-      n = i.every((e => !e.itemRef.dragDisabled));
-      this.draggedIds = e;
-      s = i.map((e => ({
-        id: e.id,
-        metadata: e.metadata
-      })));
-      this.dragInfo = a === 1 ? t.caption : a.toString();
-    } else {
-      n = !t.dragDisabled;
-      s = [ {
-        id: t.id,
-        metadata: t.metadata
-      } ];
-      this.draggedIds = [ t.id ];
-      this.dragInfo = t.caption;
-    }
-    this.getDirectParentsOfDraggableItems(i);
-    // Update drag event info
-        const a = JSON.stringify(s);
-    e.dragEvent.dataTransfer.setData(f, a);
-    // We must keep the data binding and processing even if there is an item
-    // that can't be dragged, otherwise, other trees or element might behave
-    // unexpected when a dragstart event comes
-        return n;
-  }
-  getDirectParentsOfDraggableItems(e) {
-    if (!e) {
-      const e = this.currentDraggedItem.parentElement;
-      if (e.tagName.toLowerCase() === v) {
-        this.draggedParentIds.push(e.id);
-      }
-      return;
-    }
-    // Dragging selected items
-        this.selectedItemsInfo.forEach((e => {
-      const t = e.parentId;
-      // parentId === "" when the item is in the first level of the tree
-            if (t !== "") {
-        this.draggedParentIds.push(t);
-      }
-    }));
-  }
-  handleItemSelection(e) {
-    // If the Control key was not pressed or multi selection is disabled,
-    // remove all selected items
-    if (!e.ctrlKeyPressed || !this.multiSelection) {
-      // Deselect all items except the item that emitted the event
-      this.selectedItemsInfo.forEach((t => {
-        if (t.id !== e.id) {
-          t.itemRef.selected = false;
-        }
-      }));
-      this.clearSelectedItems();
+    v(this, k, "f").set(a, n ? "valid" : "invalid");
+    const r = ((s = v(this, C, "f")) === null || s === void 0 ? void 0 : s.id) === t;
+    if (r) {
+      v(this, C, "f").dragState = "enter";
     }
-    // If the item is selected, add it to list
-        if (e.selected) {
-      this.selectedItemsInfo.set(e.id, e);
-    } else {
-      this.selectedItemsInfo.delete(e.id);
-    }
-    // Sync with UI model
-        this.selectedItemsChange.emit(this.selectedItemsInfo);
-  }
-  clearSelectedItems() {
-    this.selectedItemsInfo.clear();
   }
   disconnectedCallback() {
-    this.resetVariables();
+    v(this, V, "f").call(this);
     // Remove dragover body event
         this.handleItemDragEnd();
   }
   render() {
-    return s(n, {
+    return n(s, {
       class: {
         "ch-tree-view-dragging-item": this.draggingInTheDocument,
         "ch-tree-view-not-dragging-item": !this.draggingInTheDocument,
-        "ch-tree-view--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
+        "ch-tree-view--dragging-selected-items": this.draggingInTree && v(this, g, "f"),
         "ch-tree-view-waiting-drop-processing": this.waitDropProcessing
       }
-    }, s("div", {
+    }, n("div", {
       role: "tree",
       part: "tree-x-container",
       "aria-multiselectable": this.multiSelection.toString(),
       class: "ch-tree-view-container"
-    }, s("slot", null)), this.draggingInTree && s("span", {
+    }, n("slot", null)), this.draggingInTree && n("span", {
       "aria-hidden": "true",
       class: "ch-tree-view-drag-info"
-    }, this.dragInfo));
+    }, v(this, W, "f")));
   }
-};
+}, w = new WeakMap, g = new WeakMap, m = new WeakMap, b = new WeakMap, x = new WeakMap, 
+k = new WeakMap, y = new WeakMap, _ = new WeakMap, M = new WeakMap, C = new WeakMap, 
+W = new WeakMap, $ = new WeakMap, E = new WeakMap, z = new WeakMap, D = new WeakMap, 
+I = new WeakMap, T = new WeakMap, L = new WeakMap, S = new WeakMap, V = new WeakMap, 
+A = new WeakMap, F = new WeakMap, j = new WeakMap, P);
 
-k.style = p;
+R.style = f;
 
-const y = ':where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) )}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--ch-tree-view-item-distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button::before{content:"";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__expandable-button-width) - 2px )}.expandable-button--collapsed::before{-webkit-mask-image:url(\'data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z"/></svg>\')}.expandable-button--expanded::before{-webkit-mask-image:url(\'data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.15,8.5H1.93v-1H14.15Z"/></svg>\')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__checkbox-size)}.action{display:grid;grid-template:"left-img text right-img"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}';
+const U = ':where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--ch-tree-view-view__checkbox-size:1em;--ch-tree-view-view__expandable-button-width:0.75em;--ch-tree-view-item__dashed-line--inset-inline-start:0px;--ch-tree-view-item__dashed-line--inset-inline-end:4px;--ch-tree-view-item-gap:5px;--ch-tree-view-item-custom-padding-inline-start:0px;--ch-tree-tab-width:calc(\n    var(--ch-tree-view-view__checkbox-size) +\n      var(--ch-tree-view-view__expandable-button-width) +\n      (var(--ch-tree-view-item-gap) * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:calc( var(--padding-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) )}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--ch-tree-tab-width) -\n          calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) +\n      var(--ch-tree-view-item-gap)\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(\n    var(--ch-tree-view-view__expandable-button-width) / 2\n  )}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  );--parent-negative-checkbox-offset:calc(\n    var(--ch-tree-view-view__checkbox-size) / 2\n  )}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-view-item__dashed-line--inset-inline-start) + var(--ch-tree-view-item-custom-padding-inline-start) );height:1px;width:calc( var(--ch-tree-tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-view-item__dashed-line--inset-inline-start) - var(--ch-tree-view-item__dashed-line--inset-inline-end) );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--ch-tree-view-item-distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button,.expandable-button-decorative::before{display:grid;place-items:center;width:var(--ch-tree-view-view__expandable-button-width);height:var(--ch-tree-view-view__expandable-button-width);margin-inline-end:var(--ch-tree-view-item-gap);z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--ch-tree-view-view__expandable-button-width)}.expandable-button-decorative::before{content:"";background-color:currentColor;-webkit-mask:url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none"><path d="M16.5 5L8.7 12.7L1 5" stroke="%23000" stroke-width="1.2" stroke-linecap="round"/></svg>\') 50% 50%/calc(100% - 2px) calc(100% - 2px) no-repeat;cursor:unset}.expandable-button-decorative--collapsed::before{transform:rotate(-90deg)}.expandable-button::before{content:"";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc( var(--ch-tree-view-view__expandable-button-width) - 2px )}.expandable-button--collapsed::before{-webkit-mask-image:url(\'data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z"/></svg>\')}.expandable-button--expanded::before{-webkit-mask-image:url(\'data:image/svg+xml,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.15,8.5H1.93v-1H14.15Z"/></svg>\')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{width:var(--ch-tree-view-view__checkbox-size);margin-inline-end:var(--ch-tree-view-item-gap)}.checkbox::part(container){width:var(--ch-tree-view-view__checkbox-size);height:var(--ch-tree-view-view__checkbox-size)}.action{display:grid;grid-template:"left-img text right-img"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:var(--ch-tree-view-item-gap)}.right-img{grid-area:right-img;margin-inline-start:var(--ch-tree-view-item-gap)}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline:8px 2px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite, avoid-flickering 75ms}@keyframes avoid-flickering{0%,100%{display:none}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative}.expandable--lazy-loaded{content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden}';
 
-const _ = new Image;
+var G = undefined && undefined.__classPrivateFieldGet || function(e, t, i, n) {
+  if (i === "a" && !n) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof t === "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? n : i === "a" ? n.call(e) : n ? n.value : t.get(e);
+};
 
-const C = "--ch-tree-view-item-distance-to-checkbox";
+var Q = undefined && undefined.__classPrivateFieldSet || function(e, t, i, n, s) {
+  if (n === "m") throw new TypeError("Private method is not writable");
+  if (n === "a" && !s) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof t === "function" ? e !== t || !s : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return n === "a" ? s.call(e, i) : s ? s.value = i : t.set(e, i), i;
+};
+
+var X, Y, ee, te, ie, ne, se, ae, re, he, oe, de, ce, le, pe, fe, ve, ue, we, ge, me, be, xe, ke, ye, _e;
+
+const Me = "--ch-tree-view-item-distance-to-checkbox";
 
-const I = 0;
+const Ce = 0;
 
 // Selectors
-const $ = "ch-tree-view-item";
+const We = "ch-tree-view-item";
 
-const D = `:scope>${$}`;
+const $e = `:scope>${We}`;
 
-const z = `${$}:not([disabled])`;
+const Ee = `${We}:not([disabled])`;
 
-const S = `:scope>${$}:last-child`;
+const ze = `:scope>${We}:last-child`;
 
 // Keys
-const E = "expandable";
+const De = "expandable";
 
-const L = "Enter";
+const Ie = "Enter";
 
-const V = "Escape";
+const Te = "Escape";
 
 // Export Parts
 const getCheckboxExportPart = e => `${e}:checkbox__${e}`;
 
-const A = [ "container", "input", "option", "checked", "indeterminate" ].map(getCheckboxExportPart).join(",");
+const Le = [ "container", "input", "option", "checked", "indeterminate" ].map(getCheckboxExportPart).join(",");
 
-const O = class {
+const Se = (_e = class {
   constructor(i) {
+    X.set(this, void 0);
     /**
-         * Useful to ignore the checkbox change when it was committed from a children.
-         */
-    this.ignoreCheckboxChange = false;
-    this.checkIfShouldRemoveEditMode = e => {
+             * Useful to ignore the checkbox change when it was committed from a children.
+             */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        Y.set(this, false);
+    // Refs
+        ee.set(this, void 0);
+    te.set(this, void 0);
+    ie.set(this, (() => Array.from(this.el.querySelectorAll($e))));
+    ne.set(this, (() => {
+      Q(this, X, new ResizeObserver((() => {
+        const e = this.el.getBoundingClientRect().height - G(this, ee, "f").getBoundingClientRect().height / 2;
+        this.el.style.setProperty(Me, e + "px");
+      })), "f");
+      G(this, X, "f").observe(this.el);
+      G(this, X, "f").observe(G(this, ee, "f"));
+    }));
+    se.set(this, (() => {
+      if (!G(this, X, "f")) {
+        return;
+      }
+      G(this, X, "f").disconnect();
+      Q(this, X, null, "f");
+    }));
+    ae.set(this, (e => {
       e.stopPropagation();
-      if (e.code !== L && e.code !== V) {
+      if (e.code !== Ie && e.code !== Te) {
         return;
       }
       e.preventDefault();
-      const t = e.code === L;
-      this.removeEditMode(true, t)();
-    };
-    this.removeEditModeOnClick = e => {
+      const t = e.code === Ie;
+      G(this, he, "f").call(this, true, t)();
+    }));
+    re.set(this, (e => {
       // The click is executed outside the input and the pointer type is defined,
       // meaning that the button click was not triggered by the Enter or Space keys
-      if (!e.composedPath().includes(this.inputRef) && e.pointerType) {
-        this.removeEditMode(false)();
+      if (!e.composedPath().includes(G(this, te, "f")) && e.pointerType) {
+        G(this, he, "f").call(this, false)();
       }
-    };
-    this.removeEditMode = (e, t = false) => () => {
+    }));
+    he.set(this, ((e, t = false) => () => {
       // When pressing the enter key in the input, the removeEditMode event is
       // triggered twice (due to the headerRef.focus() triggering the onBlur
       // event in the input), so we need to check if the edit mode was disabled
@@ -636,10 +694,10 @@ const O = class {
         return;
       }
       this.editing = false;
-      document.body.removeEventListener("click", this.removeEditModeOnClick, {
+      document.body.removeEventListener("click", G(this, re, "f"), {
         capture: true
       });
-      const i = this.inputRef.value;
+      const i = G(this, te, "f").value;
       if (t && i.trim() !== "") {
         this.modifyCaption.emit({
           id: this.el.id,
@@ -647,47 +705,81 @@ const O = class {
         });
       }
       if (e) {
-        this.headerRef.focus();
+        G(this, ee, "f").focus();
       }
-    };
-    this.toggleExpand = e => {
+    }));
+    oe.set(this, (e => {
       e.stopPropagation();
       if (!this.leaf) {
         this.expanded = !this.expanded;
       }
       this.selected = true;
-      this.selectedItemChange.emit(this.getSelectedInfo(d(e), true));
-    };
-    this.getSelectedInfo = (e, t) => {
+      this.selectedItemChange.emit(G(this, fe, "f").call(this, o(e), true));
+    }));
+    de.set(this, (e => {
+      if (!this.lazyLoad || !e) {
+        return;
+      }
+      // Load items
+            this.lazyLoad = false;
+      this.downloading = true;
+      this.loadLazyContent.emit(this.el.id);
+    }));
+    ce.set(this, (() => {
+      const e = !this.selected;
+      this.selected = e;
+      this.selectedItemChange.emit(G(this, fe, "f").call(this, true, e));
+    }));
+    le.set(this, (() => {
+      this.selected = true;
+      this.selectedItemChange.emit(G(this, fe, "f").call(this, false, true));
+    }));
+    pe.set(this, (e => {
+      // Ctrl key
+      if (o(e)) {
+        G(this, ce, "f").call(this);
+      }
+      // Expand on click interaction
+       else if (this.expandOnClick) {
+        G(this, oe, "f").call(this, e);
+      }
+      // Click only selects the item
+       else {
+        G(this, le, "f").call(this);
+      }
+    }));
+    fe.set(this, ((e, t) => {
       var i;
       return {
         ctrlKeyPressed: e,
         expanded: this.expanded,
         id: this.el.id,
-        itemRef: this.el,
         metadata: this.metadata,
         parentId: (i = this.el.parentElement) === null || i === void 0 ? void 0 : i.id,
         selected: t
       };
-    };
-    this.handleActionDblClick = e => {
+    }));
+    ve.set(this, (e => {
       e.stopPropagation();
-      if (d(e)) {
-        this.toggleSelected();
+      if (o(e)) {
+        G(this, ce, "f").call(this);
         return;
       }
-      this.emitOpenReference();
-      // The Control key is not pressed, so the control can be expanded
-            if (!this.leaf) {
-        this.toggleExpand(e);
+      G(this, ge, "f").call(this);
+      // The Control key is not pressed, so the control can be expanded if double
+      // click expands the item
+            if (!this.leaf && !this.expandOnClick) {
+        G(this, oe, "f").call(this, e);
       }
-    };
+    }));
     /**
-         * Event triggered by the following actions on the main button:
-         *   - Click
-         *   - Enter keydown
-         *   - Space keydown and keyup
-         */    this.handleActionClick = e => {
+             * Event triggered by the following actions on the main button:
+             *   - Click
+             *   - Enter keydown
+             *   - Space keydown and keyup
+             */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        ue.set(this, (e => {
       e.stopPropagation();
       // Don't perform actions when editing
             if (this.editing) {
@@ -696,23 +788,32 @@ const O = class {
       e.preventDefault();
       // Click event
             if (e.pointerType) {
-        this.toggleOrSelect(e);
+        G(this, pe, "f").call(this, e);
         return;
       }
-      this.emitOpenReference();
+      G(this, ge, "f").call(this);
       // Enter or space
-            this.toggleExpand(e);
-    };
+            G(this, oe, "f").call(this, e);
+    }));
     /**
-         * Event triggered by key events on the main button.
-         */    this.handleActionKeyDown = e => {
+             * Event triggered by key events on the main button.
+             */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        we.set(this, (e => {
       // Only toggle if the Enter key was pressed with the Ctrl key
-      if (d(e) && e.code === L) {
+      if (o(e) && e.code === Ie) {
         e.stopPropagation();
-        this.toggleSelected();
+        G(this, ce, "f").call(this);
       }
-    };
-    this.handleCheckedChange = e => {
+    }));
+    ge.set(this, (() => {
+      this.openReference.emit({
+        id: this.el.id,
+        leaf: this.leaf,
+        metadata: this.metadata
+      });
+    }));
+    me.set(this, (e => {
       e.stopPropagation();
       const t = e.target.checked;
       this.checked = t;
@@ -723,40 +824,39 @@ const O = class {
         checked: this.checked,
         indeterminate: false
       });
-    };
-    this.renderImg = (e, t) => s("img", {
+    }));
+    be.set(this, ((e, t) => n("img", {
       "aria-hidden": "true",
       class: e,
       part: e,
       alt: "",
       src: t,
       loading: "lazy"
-    });
-    this.handleDragStart = e => {
+    })));
+    xe.set(this, (e => {
       // Disallow drag when editing the caption
       if (this.editing) {
         e.preventDefault();
         e.stopPropagation();
         return;
       }
-      // Remove drag image
-            e.dataTransfer.setDragImage(_, 0, 0);
+      d(e);
       e.dataTransfer.effectAllowed = "move";
       this.dragState = "start";
       this.itemDragStart.emit({
         elem: this.el,
         dragEvent: e
       });
-    };
-    this.handleDragEnd = () => {
+    }));
+    ke.set(this, (() => {
       // event.preventDefault();
       // this.el.style.cursor = null;
       this.dragState = "none";
       this.itemDragEnd.emit();
-    };
-    this.handleDrop = () => {
+    }));
+    ye.set(this, (() => {
       this.dragState = "none";
-    };
+    }));
     e(this, i);
     this.checkboxChange = t(this, "checkboxChange", 7);
     this.checkboxToggleChange = t(this, "checkboxToggleChange", 7);
@@ -777,18 +877,19 @@ const O = class {
     this.downloading = false;
     this.editable = undefined;
     this.editing = false;
+    this.expandableButton = "decorative";
+    this.expandOnClick = true;
     this.expanded = false;
     this.lastItem = false;
     this.lazyLoad = false;
     this.leaf = false;
     this.leftImgSrc = undefined;
-    this.level = I;
+    this.level = Ce;
     this.indeterminate = false;
     this.metadata = undefined;
     this.rightImgSrc = undefined;
     this.selected = false;
     this.showDownloadingSpinner = true;
-    this.showExpandableButton = true;
     this.showLines = "none";
     this.toggleCheckboxes = false;
   }
@@ -796,11 +897,11 @@ const O = class {
     return i(this);
   }
   updateChildrenCheckedValue(e) {
-    if (!this.toggleCheckboxes || this.leaf || this.ignoreCheckboxChange) {
-      this.ignoreCheckboxChange = false;
+    if (!this.toggleCheckboxes || this.leaf || G(this, Y, "f")) {
+      Q(this, Y, false, "f");
       return;
     }
-    const t = this.getDirectTreeItems();
+    const t = G(this, ie, "f").call(this);
     t.forEach((t => {
       if (t.checked !== e || t.indeterminate !== false) {
         t.updateChecked(e, false);
@@ -811,14 +912,14 @@ const O = class {
     if (!e) {
       return;
     }
-    document.body.addEventListener("click", this.removeEditModeOnClick, {
+    document.body.addEventListener("click", G(this, re, "f"), {
       capture: true
     });
     // Wait until the input is rendered to focus it
         a((() => {
       requestAnimationFrame((() => {
-        if (this.inputRef) {
-          this.inputRef.focus();
+        if (G(this, te, "f")) {
+          G(this, te, "f").focus();
         }
       }));
     }));
@@ -827,24 +928,24 @@ const O = class {
     // Wait until all properties are updated before lazy loading. Otherwise, the
     // lazyLoad property could be updated just after the executing of the function
     setTimeout((() => {
-      this.lazyLoadItems(e);
+      G(this, de, "f").call(this, e);
     }));
   }
   handleLasItemChange(e) {
     if (e && this.showLines) {
       // Use RAF to set the observer after the render method has completed
       requestAnimationFrame((() => {
-        this.setResizeObserver();
+        G(this, ne, "f").call(this);
       }));
     } else {
-      this.disconnectObserver();
+      G(this, se, "f").call(this);
     }
   }
   handleShowLinesChange(e) {
     if (e && this.lastItem) {
-      this.setResizeObserver();
+      G(this, ne, "f").call(this);
     } else {
-      this.disconnectObserver();
+      G(this, se, "f").call(this);
     }
   }
   updateCheckboxValue(e) {
@@ -853,29 +954,29 @@ const O = class {
       return;
     }
     const t = e.detail.checked;
-    const i = this.getDirectTreeItems();
+    const i = G(this, ie, "f").call(this);
     // Check if all the items have the same value as the updated item
-        const s = i.every((e => e.checked === t));
-    const n = this.checked !== t || this.indeterminate !== !s;
-    this.ignoreCheckboxChange = this.checked !== t;
+        const n = i.every((e => e.checked === t));
+    const s = this.checked !== t || this.indeterminate !== !n;
+    Q(this, Y, this.checked !== t, "f");
     this.checked = t;
-    this.indeterminate = !s;
+    this.indeterminate = !n;
     // Sync with the UI Model
-        if (n) {
+        if (s) {
       this.checkboxToggleChange.emit({
         id: this.el.id,
         checked: t,
-        indeterminate: !s
+        indeterminate: !n
       });
     }
   }
   /**
-     * Focus the next item in the tree. If the control is expanded, it focuses
-     * the first subitem in its tree.
-     */  async focusNextItem(e) {
+         * Focus the next item in the tree. If the control is expanded, it focuses
+         * the first subitem in its tree.
+         */  async focusNextItem(e) {
     // Focus the first subitem if expanded
     if (!this.leaf && this.expanded) {
-      const t = this.el.querySelector(z);
+      const t = this.el.querySelector(Ee);
       // The tree item could be empty or downloading subitem, so it is uncertain
       // if the query won't fail
             if (t) {
@@ -887,8 +988,8 @@ const O = class {
         this.focusNextSibling(e);
   }
   /**
-     * Focus the next sibling item in the tree.
-     */  async focusNextSibling(e) {
+         * Focus the next sibling item in the tree.
+         */  async focusNextSibling(e) {
     const t = this.el.nextElementSibling;
     // Focus the next sibling, if exists
         if (t) {
@@ -901,7 +1002,7 @@ const O = class {
       return;
     }
     // The item is the last one of the tree at the first level
-        if (this.level === I) {
+        if (this.level === Ce) {
       return;
     }
     // Otherwise, ask the parent to focus the next sibling
@@ -909,9 +1010,9 @@ const O = class {
     i.focusNextSibling(e);
   }
   /**
-     * Focus the previous item in the tree. If the previous item is expanded, it focuses
-     * the last subitem in its tree.
-     */  async focusPreviousItem(e) {
+         * Focus the previous item in the tree. If the previous item is expanded, it focuses
+         * the last subitem in its tree.
+         */  async focusPreviousItem(e) {
     const t = this.el.previousElementSibling;
     // Focus last item of the previous sibling
         if (t) {
@@ -919,7 +1020,7 @@ const O = class {
       return;
     }
     // The item is the first one of the tree at the first level
-        if (this.level === I) {
+        if (this.level === Ce) {
       return;
     }
     // Otherwise, set focus in the parent element
@@ -932,12 +1033,12 @@ const O = class {
     i.setFocus(e);
   }
   /**
-     * Focus the last item in its subtree. If the control is not expanded, it
-     * focus the control.
-     */  async focusLastItem(e) {
+         * Focus the last item in its subtree. If the control is not expanded, it
+         * focus the control.
+         */  async focusLastItem(e) {
     // Focus the last subitem if expanded and not lazy loading
     if (!this.leaf && this.expanded) {
-      const t = this.el.querySelector(S);
+      const t = this.el.querySelector(ze);
       // The tree item could be empty or downloading subitem, so it is uncertain
       // if the query won't fail
             if (t) {
@@ -954,17 +1055,17 @@ const O = class {
         this.setFocus(e);
   }
   /**
-     * Set focus in the control.
-     */  async setFocus(e) {
-    this.headerRef.focus();
+         * Set focus in the control.
+         */  async setFocus(e) {
+    G(this, ee, "f").focus();
     // Normal navigation auto selects the item.
         if (!e) {
-      this.setSelected();
+      G(this, le, "f").call(this);
     }
   }
   /**
-     * Update `checked` and `indeterminate` properties.
-     */  async updateChecked(e, t) {
+         * Update `checked` and `indeterminate` properties.
+         */  async updateChecked(e, t) {
     this.checked = e;
     this.indeterminate = t;
     // Emit the event to sync with the UI model, even if the item does not
@@ -975,103 +1076,49 @@ const O = class {
       indeterminate: t
     });
   }
-  getDirectTreeItems() {
-    return Array.from(this.el.querySelectorAll(D));
-  }
-  setResizeObserver() {
-    this.watcher = new ResizeObserver((() => {
-      const e = this.el.getBoundingClientRect().height - this.headerRef.getBoundingClientRect().height / 2;
-      this.el.style.setProperty(C, e + "px");
-    }));
-    this.watcher.observe(this.el);
-    this.watcher.observe(this.headerRef);
-  }
-  disconnectObserver() {
-    if (!this.watcher) {
-      return;
-    }
-    this.watcher.disconnect();
-    this.watcher = null;
-  }
-  lazyLoadItems(e) {
-    if (!this.lazyLoad || !e) {
-      return;
-    }
-    // Load items
-        this.lazyLoad = false;
-    this.downloading = true;
-    this.loadLazyContent.emit(this.el.id);
-  }
-  toggleSelected() {
-    const e = !this.selected;
-    this.selected = e;
-    this.selectedItemChange.emit(this.getSelectedInfo(true, e));
-  }
-  setSelected() {
-    this.selected = true;
-    this.selectedItemChange.emit(this.getSelectedInfo(false, true));
-  }
-  toggleOrSelect(e) {
-    if (d(e)) {
-      this.toggleSelected();
-    } else {
-      this.setSelected();
-    }
-  }
-  emitOpenReference() {
-    this.openReference.emit({
-      id: this.el.id,
-      leaf: this.leaf,
-      metadata: this.metadata
-    });
-  }
   componentWillLoad() {
     // Check if must lazy load
-    this.lazyLoadItems(this.expanded);
-    // Sync selected state with the main tree
-        if (this.selected) {
-      this.selectedItemChange.emit(this.getSelectedInfo(true, true));
-    }
+    G(this, de, "f").call(this, this.expanded);
   }
   componentDidLoad() {
     if (this.lastItem && this.showLines) {
-      this.setResizeObserver();
+      G(this, ne, "f").call(this);
     }
   }
   disconnectedCallback() {
     // If it was disconnected on edit mode, remove the body event handler
     if (this.editing) {
-      this.removeEditMode(false);
+      G(this, he, "f").call(this, false);
     }
-    this.disconnectObserver();
+    G(this, se, "f").call(this);
   }
   render() {
     const e = this.level % 2 === 0;
-    const t = !this.leaf && this.showExpandableButton;
-    const i = !this.leaf && !this.showExpandableButton;
+    const t = !this.leaf && this.expandableButton !== "no";
+    const i = !this.leaf && this.expandableButton === "no";
     const a = !this.dropDisabled && !this.leaf && this.dragState !== "start";
-    const h = !this.leaf && !this.lazyLoad;
-    const r = this.showLines === "all" && this.level !== I;
-    const d = this.showLines === "last" && this.level !== I && this.lastItem;
-    return s(n, {
+    const r = !this.leaf && !this.lazyLoad;
+    const h = this.showLines === "all" && this.level !== Ce;
+    const o = this.showLines === "last" && this.level !== Ce && this.lastItem;
+    return n(s, {
       role: "treeitem",
       "aria-level": this.level + 1,
       "aria-selected": this.selected ? "true" : null,
       class: {
-        [$ + "--downloading"]: this.downloading,
-        [$ + "--editing"]: this.editing,
-        [$ + "--not-editing"]: !this.editing,
-        [$ + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
-        [$ + "--deny-drop"]: this.leaf
+        [We + "--downloading"]: this.downloading,
+        [We + "--editing"]: this.editing,
+        [We + "--not-editing"]: !this.editing,
+        [We + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
+        [We + "--deny-drop"]: this.leaf
       },
       style: {
         "--level": `${this.level}`
       },
       // Drag and drop
-      onDrop: a ? this.handleDrop : null
-    }, s("button", {
-      "aria-controls": h ? E : null,
-      "aria-expanded": h ? this.expanded.toString() : null,
+      onDrop: a ? G(this, ye, "f") : null
+    }, n("button", {
+      "aria-controls": r ? De : null,
+      "aria-expanded": r ? this.expanded.toString() : null,
       class: {
         header: true,
         "header--selected": this.selected,
@@ -1082,19 +1129,21 @@ const O = class {
         "header--odd": !e,
         "header--even-expandable": e && t,
         "header--odd-expandable": !e && t,
-        "header--level-0": this.level === I
+        "header--level-0": this.level === Ce,
+        "expandable-button-decorative": !this.leaf && this.expandableButton === "decorative",
+        "expandable-button-decorative--collapsed": !this.leaf && this.expandableButton === "decorative" && !this.expanded
       },
-      part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}${this.level === I ? " level-0" : ""}`,
+      part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}${this.level === Ce ? " level-0" : ""}`,
       type: "button",
       disabled: this.disabled,
-      onClick: this.handleActionClick,
-      onKeyDown: !this.editing ? this.handleActionKeyDown : null,
+      onClick: G(this, ue, "f"),
+      onKeyDown: !this.editing ? G(this, we, "f") : null,
       // Drag and drop
       draggable: !this.dragDisabled,
-      onDragStart: this.handleDragStart,
-      onDragEnd: !this.dragDisabled ? this.handleDragEnd : null,
-      ref: e => this.headerRef = e
-    }, !this.leaf && this.showExpandableButton && s("button", {
+      onDragStart: G(this, xe, "f"),
+      onDragEnd: !this.dragDisabled ? G(this, ke, "f") : null,
+      ref: e => Q(this, ee, e, "f")
+    }, !this.leaf && this.expandableButton === "action" && n("button", {
       type: "button",
       class: {
         "expandable-button": true,
@@ -1103,58 +1152,58 @@ const O = class {
       },
       part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`,
       disabled: this.disabled,
-      onClick: this.toggleExpand
-    }), this.checkbox && s("ch-checkbox", {
+      onClick: G(this, oe, "f")
+    }), this.checkbox && n("ch-checkbox", {
       accessibleName: this.caption,
       class: "checkbox",
-      exportparts: A,
+      exportparts: Le,
       part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`,
       checkedValue: "true",
       disabled: this.disabled,
       indeterminate: this.indeterminate,
       unCheckedValue: "false",
       value: `${this.checked}`,
-      onInput: this.handleCheckedChange
-    }), this.customRender ? s("slot", {
+      onInput: G(this, me, "f")
+    }), this.customRender ? n("slot", {
       name: "custom-content"
-    }) : [ s("div", {
+    }) : [ n("div", {
       class: {
         action: true,
         "readonly-mode": !this.editing
       },
       part: `action${!this.editing ? " readonly-mode" : ""}${!this.leaf && this.expanded ? " expanded" : ""}`,
-      onDblClick: !this.editing ? this.handleActionDblClick : null
-    }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editable && this.editing ? s("input", {
+      onDblClick: !this.editing ? G(this, ve, "f") : null
+    }, this.leftImgSrc && G(this, be, "f").call(this, "left-img", this.leftImgSrc), this.editable && this.editing ? n("input", {
       class: "edit-name",
       part: "edit-name",
       disabled: this.disabled,
       type: "text",
       value: this.caption,
-      onBlur: this.removeEditMode(false),
-      onKeyDown: this.checkIfShouldRemoveEditMode,
-      ref: e => this.inputRef = e
-    }) : this.caption, this.rightImgSrc && this.renderImg("right-img", this.rightImgSrc)), this.showDownloadingSpinner && !this.leaf && this.downloading && s("div", {
+      onBlur: G(this, he, "f").call(this, false),
+      onKeyDown: G(this, ae, "f"),
+      ref: e => Q(this, te, e, "f")
+    }) : this.caption, this.rightImgSrc && G(this, be, "f").call(this, "right-img", this.rightImgSrc)), this.showDownloadingSpinner && !this.leaf && this.downloading && n("div", {
       class: "downloading",
       part: "downloading"
-    }) ], (r || d) && s("div", {
+    }) ], (h || o) && n("div", {
       class: {
         "dashed-line": true,
-        "last-all-line": r && this.lastItem,
-        "last-line": d
+        "last-all-line": h && this.lastItem,
+        "last-line": o
       },
       part: `dashed-line${this.lastItem ? " last-all-line" : ""}`
-    })), h && s("div", {
+    })), r && n("div", {
       role: "group",
       "aria-busy": (!!this.downloading).toString(),
       "aria-live": this.downloading ? "polite" : null,
-      id: E,
+      id: De,
       class: {
         expandable: true,
         "expandable--collapsed": !this.expanded,
         "expandable--lazy-loaded": !this.downloading
       },
       part: `expandable${this.expanded ? " expanded" : " collapsed"}${!this.downloading ? " lazy-loaded" : ""}`
-    }, s("slot", null)));
+    }, n("slot", null)));
   }
   static get watchers() {
     return {
@@ -1165,9 +1214,14 @@ const O = class {
       showLines: [ "handleShowLinesChange" ]
     };
   }
-};
+}, X = new WeakMap, Y = new WeakMap, ee = new WeakMap, te = new WeakMap, ie = new WeakMap, 
+ne = new WeakMap, se = new WeakMap, ae = new WeakMap, re = new WeakMap, he = new WeakMap, 
+oe = new WeakMap, de = new WeakMap, ce = new WeakMap, le = new WeakMap, pe = new WeakMap, 
+fe = new WeakMap, ve = new WeakMap, ue = new WeakMap, we = new WeakMap, ge = new WeakMap, 
+me = new WeakMap, be = new WeakMap, xe = new WeakMap, ke = new WeakMap, ye = new WeakMap, 
+_e);
 
-O.style = y;
+Se.style = U;
 
-export { c as ch_checkbox, k as ch_tree_view, O as ch_tree_view_item };
-//# sourceMappingURL=p-2e3e48f6.entry.js.map
+export { p as ch_checkbox, R as ch_tree_view, Se as ch_tree_view_item };
+//# sourceMappingURL=p-73a078e2.entry.js.map