@genexus/genexus-ide-ui 0.0.93 → 0.0.94

package/dist/components/tree-view-item.js

@@ -1,10 +1,22 @@
 import { proxyCustomElement, HTMLElement, h, createEvent, writeTask, Host } from '@stencil/core/internal/client';
 import { m as mouseEventModifierKey } from './helpers.js';
+import { r as removeDragImage } from './utils.js';
 import { d as defineCustomElement$1 } from './checkbox.js';
 
-const treeViewItemCss = ":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 treeViewItemCss = ":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 resetDragImage = new Image();
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ChTreeViewItem_watcher, _ChTreeViewItem_ignoreCheckboxChange, _ChTreeViewItem_headerRef, _ChTreeViewItem_inputRef, _ChTreeViewItem_getDirectTreeItems, _ChTreeViewItem_setResizeObserver, _ChTreeViewItem_disconnectObserver, _ChTreeViewItem_checkIfShouldRemoveEditMode, _ChTreeViewItem_removeEditModeOnClick, _ChTreeViewItem_removeEditMode, _ChTreeViewItem_toggleExpand, _ChTreeViewItem_lazyLoadItems, _ChTreeViewItem_toggleSelected, _ChTreeViewItem_setSelected, _ChTreeViewItem_toggleOrSelect, _ChTreeViewItem_getSelectedInfo, _ChTreeViewItem_handleActionDblClick, _ChTreeViewItem_handleActionClick, _ChTreeViewItem_handleActionKeyDown, _ChTreeViewItem_emitOpenReference, _ChTreeViewItem_handleCheckedChange, _ChTreeViewItem_renderImg, _ChTreeViewItem_handleDragStart, _ChTreeViewItem_handleDragEnd, _ChTreeViewItem_handleDrop, _a;
 const DISTANCE_TO_CHECKBOX_CUSTOM_VAR = "--ch-tree-view-item-distance-to-checkbox";
 const INITIAL_LEVEL = 0;
 // Selectors
@@ -27,514 +39,552 @@ const CHECKBOX_EXPORT_PARTS = [
 ]
     .map(getCheckboxExportPart)
     .join(",");
-const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement(class ChTreeViewItem extends HTMLElement {
-    constructor() {
-        /**
-         * Useful to ignore the checkbox change when it was committed from a children.
-         */
-        this.ignoreCheckboxChange = false;
-        this.checkIfShouldRemoveEditMode = (event) => {
-            event.stopPropagation();
-            if (event.code !== ENTER_KEY && event.code !== ESCAPE_KEY) {
+const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement((_a = class ChTreeViewItem extends HTMLElement {
+        constructor() {
+            _ChTreeViewItem_watcher.set(this, void 0);
+            /**
+             * Useful to ignore the checkbox change when it was committed from a children.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _ChTreeViewItem_ignoreCheckboxChange.set(this, false);
+            // Refs
+            _ChTreeViewItem_headerRef.set(this, void 0);
+            _ChTreeViewItem_inputRef.set(this, void 0);
+            _ChTreeViewItem_getDirectTreeItems.set(this, () => Array.from(this.el.querySelectorAll(DIRECT_TREE_ITEM_CHILDREN)));
+            _ChTreeViewItem_setResizeObserver.set(this, () => {
+                __classPrivateFieldSet(this, _ChTreeViewItem_watcher, new ResizeObserver(() => {
+                    const distanceToCheckbox = this.el.getBoundingClientRect().height -
+                        __classPrivateFieldGet(this, _ChTreeViewItem_headerRef, "f").getBoundingClientRect().height / 2;
+                    this.el.style.setProperty(DISTANCE_TO_CHECKBOX_CUSTOM_VAR, distanceToCheckbox + "px");
+                }), "f");
+                __classPrivateFieldGet(this, _ChTreeViewItem_watcher, "f").observe(this.el);
+                __classPrivateFieldGet(this, _ChTreeViewItem_watcher, "f").observe(__classPrivateFieldGet(this, _ChTreeViewItem_headerRef, "f"));
+            });
+            _ChTreeViewItem_disconnectObserver.set(this, () => {
+                if (!__classPrivateFieldGet(this, _ChTreeViewItem_watcher, "f")) {
+                    return;
+                }
+                __classPrivateFieldGet(this, _ChTreeViewItem_watcher, "f").disconnect();
+                __classPrivateFieldSet(this, _ChTreeViewItem_watcher, null, "f");
+            });
+            _ChTreeViewItem_checkIfShouldRemoveEditMode.set(this, (event) => {
+                event.stopPropagation();
+                if (event.code !== ENTER_KEY && event.code !== ESCAPE_KEY) {
+                    return;
+                }
+                event.preventDefault();
+                const commitEdition = event.code === ENTER_KEY;
+                __classPrivateFieldGet(this, _ChTreeViewItem_removeEditMode, "f").call(this, true, commitEdition)();
+            });
+            _ChTreeViewItem_removeEditModeOnClick.set(this, (event) => {
+                // 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 (!event.composedPath().includes(__classPrivateFieldGet(this, _ChTreeViewItem_inputRef, "f")) && event.pointerType) {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_removeEditMode, "f").call(this, false)();
+                }
+            });
+            _ChTreeViewItem_removeEditMode.set(this, (shouldFocusHeader, commitEdition = 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
+                if (!this.editing) {
+                    return;
+                }
+                this.editing = false;
+                document.body.removeEventListener("click", __classPrivateFieldGet(this, _ChTreeViewItem_removeEditModeOnClick, "f"), {
+                    capture: true
+                });
+                const newCaption = __classPrivateFieldGet(this, _ChTreeViewItem_inputRef, "f").value;
+                if (commitEdition && newCaption.trim() !== "") {
+                    this.modifyCaption.emit({
+                        id: this.el.id,
+                        caption: newCaption
+                    });
+                }
+                if (shouldFocusHeader) {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_headerRef, "f").focus();
+                }
+            });
+            _ChTreeViewItem_toggleExpand.set(this, (event) => {
+                event.stopPropagation();
+                if (!this.leaf) {
+                    this.expanded = !this.expanded;
+                }
+                this.selected = true;
+                this.selectedItemChange.emit(__classPrivateFieldGet(this, _ChTreeViewItem_getSelectedInfo, "f").call(this, mouseEventModifierKey(event), true));
+            });
+            _ChTreeViewItem_lazyLoadItems.set(this, (expanded) => {
+                if (!this.lazyLoad || !expanded) {
+                    return;
+                }
+                // Load items
+                this.lazyLoad = false;
+                this.downloading = true;
+                this.loadLazyContent.emit(this.el.id);
+            });
+            _ChTreeViewItem_toggleSelected.set(this, () => {
+                const selected = !this.selected;
+                this.selected = selected;
+                this.selectedItemChange.emit(__classPrivateFieldGet(this, _ChTreeViewItem_getSelectedInfo, "f").call(this, true, selected));
+            });
+            _ChTreeViewItem_setSelected.set(this, () => {
+                this.selected = true;
+                this.selectedItemChange.emit(__classPrivateFieldGet(this, _ChTreeViewItem_getSelectedInfo, "f").call(this, false, true));
+            });
+            _ChTreeViewItem_toggleOrSelect.set(this, (event) => {
+                // Ctrl key
+                if (mouseEventModifierKey(event)) {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_toggleSelected, "f").call(this);
+                }
+                // Expand on click interaction
+                else if (this.expandOnClick) {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_toggleExpand, "f").call(this, event);
+                }
+                // Click only selects the item
+                else {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_setSelected, "f").call(this);
+                }
+            });
+            _ChTreeViewItem_getSelectedInfo.set(this, (ctrlKeyPressed, selected) => {
+                var _b;
+                return ({
+                    ctrlKeyPressed: ctrlKeyPressed,
+                    expanded: this.expanded,
+                    id: this.el.id,
+                    metadata: this.metadata,
+                    parentId: (_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.id,
+                    selected: selected
+                });
+            });
+            _ChTreeViewItem_handleActionDblClick.set(this, (event) => {
+                event.stopPropagation();
+                if (mouseEventModifierKey(event)) {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_toggleSelected, "f").call(this);
+                    return;
+                }
+                __classPrivateFieldGet(this, _ChTreeViewItem_emitOpenReference, "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) {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_toggleExpand, "f").call(this, event);
+                }
+            });
+            /**
+             * 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
+            _ChTreeViewItem_handleActionClick.set(this, (event) => {
+                event.stopPropagation();
+                // Don't perform actions when editing
+                if (this.editing) {
+                    return;
+                }
+                event.preventDefault();
+                // Click event
+                if (event.pointerType) {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_toggleOrSelect, "f").call(this, event);
+                    return;
+                }
+                __classPrivateFieldGet(this, _ChTreeViewItem_emitOpenReference, "f").call(this);
+                // Enter or space
+                __classPrivateFieldGet(this, _ChTreeViewItem_toggleExpand, "f").call(this, event);
+            });
+            /**
+             * Event triggered by key events on the main button.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _ChTreeViewItem_handleActionKeyDown.set(this, (event) => {
+                // Only toggle if the Enter key was pressed with the Ctrl key
+                if (mouseEventModifierKey(event) && event.code === ENTER_KEY) {
+                    event.stopPropagation();
+                    __classPrivateFieldGet(this, _ChTreeViewItem_toggleSelected, "f").call(this);
+                }
+            });
+            _ChTreeViewItem_emitOpenReference.set(this, () => {
+                this.openReference.emit({
+                    id: this.el.id,
+                    leaf: this.leaf,
+                    metadata: this.metadata
+                });
+            });
+            _ChTreeViewItem_handleCheckedChange.set(this, (event) => {
+                event.stopPropagation();
+                const checked = event.target.checked;
+                this.checked = checked;
+                this.indeterminate = false; // Changing the checked value makes it no longer indeterminate
+                this.checkboxChange.emit({
+                    id: this.el.id,
+                    checked: this.checked,
+                    indeterminate: false
+                });
+            });
+            _ChTreeViewItem_renderImg.set(this, (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" })));
+            _ChTreeViewItem_handleDragStart.set(this, (event) => {
+                // Disallow drag when editing the caption
+                if (this.editing) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+                removeDragImage(event);
+                event.dataTransfer.effectAllowed = "move";
+                this.dragState = "start";
+                this.itemDragStart.emit({
+                    elem: this.el,
+                    dragEvent: event
+                });
+            });
+            _ChTreeViewItem_handleDragEnd.set(this, () => {
+                // event.preventDefault();
+                // this.el.style.cursor = null;
+                this.dragState = "none";
+                this.itemDragEnd.emit();
+            });
+            _ChTreeViewItem_handleDrop.set(this, () => {
+                this.dragState = "none";
+            });
+            super();
+            this.__registerHost();
+            this.__attachShadow();
+            this.checkboxChange = createEvent(this, "checkboxChange", 7);
+            this.checkboxToggleChange = createEvent(this, "checkboxToggleChange", 7);
+            this.itemDragStart = createEvent(this, "itemDragStart", 7);
+            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.caption = undefined;
+            this.checkbox = false;
+            this.checked = false;
+            this.customRender = false;
+            this.disabled = false;
+            this.dragDisabled = false;
+            this.dropDisabled = false;
+            this.dragState = "none";
+            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 = INITIAL_LEVEL;
+            this.indeterminate = false;
+            this.metadata = undefined;
+            this.rightImgSrc = undefined;
+            this.selected = false;
+            this.showDownloadingSpinner = true;
+            this.showLines = "none";
+            this.toggleCheckboxes = false;
+        }
+        get el() { return this; }
+        updateChildrenCheckedValue(newValue) {
+            if (!this.toggleCheckboxes || this.leaf || __classPrivateFieldGet(this, _ChTreeViewItem_ignoreCheckboxChange, "f")) {
+                __classPrivateFieldSet(this, _ChTreeViewItem_ignoreCheckboxChange, false, "f");
                 return;
             }
-            event.preventDefault();
-            const commitEdition = event.code === ENTER_KEY;
-            this.removeEditMode(true, commitEdition)();
-        };
-        this.removeEditModeOnClick = (event) => {
-            // 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 (!event.composedPath().includes(this.inputRef) && event.pointerType) {
-                this.removeEditMode(false)();
-            }
-        };
-        this.removeEditMode = (shouldFocusHeader, commitEdition = 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
-            if (!this.editing) {
+            const treeItems = __classPrivateFieldGet(this, _ChTreeViewItem_getDirectTreeItems, "f").call(this);
+            treeItems.forEach(treeItem => {
+                if (treeItem.checked !== newValue || treeItem.indeterminate !== false) {
+                    treeItem.updateChecked(newValue, false);
+                }
+            });
+        }
+        handleEditingChange(isEditing) {
+            if (!isEditing) {
                 return;
             }
-            this.editing = false;
-            document.body.removeEventListener("click", this.removeEditModeOnClick, {
+            document.body.addEventListener("click", __classPrivateFieldGet(this, _ChTreeViewItem_removeEditModeOnClick, "f"), {
                 capture: true
             });
-            const newCaption = this.inputRef.value;
-            if (commitEdition && newCaption.trim() !== "") {
-                this.modifyCaption.emit({
-                    id: this.el.id,
-                    caption: newCaption
+            // Wait until the input is rendered to focus it
+            writeTask(() => {
+                requestAnimationFrame(() => {
+                    if (__classPrivateFieldGet(this, _ChTreeViewItem_inputRef, "f")) {
+                        __classPrivateFieldGet(this, _ChTreeViewItem_inputRef, "f").focus();
+                    }
+                });
+            });
+        }
+        handleExpandedChange(isExpanded) {
+            // Wait until all properties are updated before lazy loading. Otherwise, the
+            // lazyLoad property could be updated just after the executing of the function
+            setTimeout(() => {
+                __classPrivateFieldGet(this, _ChTreeViewItem_lazyLoadItems, "f").call(this, isExpanded);
+            });
+        }
+        handleLasItemChange(isLastItem) {
+            if (isLastItem && this.showLines) {
+                // Use RAF to set the observer after the render method has completed
+                requestAnimationFrame(() => {
+                    __classPrivateFieldGet(this, _ChTreeViewItem_setResizeObserver, "f").call(this);
                 });
             }
-            if (shouldFocusHeader) {
-                this.headerRef.focus();
+            else {
+                __classPrivateFieldGet(this, _ChTreeViewItem_disconnectObserver, "f").call(this);
             }
-        };
-        this.toggleExpand = (event) => {
-            event.stopPropagation();
-            if (!this.leaf) {
-                this.expanded = !this.expanded;
+        }
+        handleShowLinesChange(newShowLines) {
+            if (newShowLines && this.lastItem) {
+                __classPrivateFieldGet(this, _ChTreeViewItem_setResizeObserver, "f").call(this);
             }
-            this.selected = true;
-            this.selectedItemChange.emit(this.getSelectedInfo(mouseEventModifierKey(event), true));
-        };
-        this.getSelectedInfo = (ctrlKeyPressed, selected) => {
-            var _a;
-            return ({
-                ctrlKeyPressed: ctrlKeyPressed,
-                expanded: this.expanded,
-                id: this.el.id,
-                itemRef: this.el,
-                metadata: this.metadata,
-                parentId: (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.id,
-                selected: selected
-            });
-        };
-        this.handleActionDblClick = (event) => {
-            event.stopPropagation();
-            if (mouseEventModifierKey(event)) {
-                this.toggleSelected();
+            else {
+                __classPrivateFieldGet(this, _ChTreeViewItem_disconnectObserver, "f").call(this);
+            }
+        }
+        updateCheckboxValue(event) {
+            // No need to update the checkbox value based on the children checkbox
+            if (!this.toggleCheckboxes || this.el === event.target) {
                 return;
             }
-            this.emitOpenReference();
-            // The Control key is not pressed, so the control can be expanded
-            if (!this.leaf) {
-                this.toggleExpand(event);
+            const updatedCheck = event.detail.checked;
+            const treeItems = __classPrivateFieldGet(this, _ChTreeViewItem_getDirectTreeItems, "f").call(this);
+            // Check if all the items have the same value as the updated item
+            const allItemsHaveTheSameCheckedValue = treeItems.every(treeItem => treeItem.checked === updatedCheck);
+            const eventMustBeEmitted = this.checked !== updatedCheck ||
+                this.indeterminate !== !allItemsHaveTheSameCheckedValue;
+            __classPrivateFieldSet(this, _ChTreeViewItem_ignoreCheckboxChange, this.checked !== updatedCheck, "f");
+            this.checked = updatedCheck;
+            this.indeterminate = !allItemsHaveTheSameCheckedValue;
+            // Sync with the UI Model
+            if (eventMustBeEmitted) {
+                this.checkboxToggleChange.emit({
+                    id: this.el.id,
+                    checked: updatedCheck,
+                    indeterminate: !allItemsHaveTheSameCheckedValue
+                });
             }
-        };
+        }
         /**
-         * Event triggered by the following actions on the main button:
-         *   - Click
-         *   - Enter keydown
-         *   - Space keydown and keyup
+         * Focus the next item in the tree. If the control is expanded, it focuses
+         * the first subitem in its tree.
          */
-        this.handleActionClick = (event) => {
-            event.stopPropagation();
-            // Don't perform actions when editing
-            if (this.editing) {
+        async focusNextItem(ctrlKeyPressed) {
+            // Focus the first subitem if expanded
+            if (!this.leaf && this.expanded) {
+                const subItem = this.el.querySelector(FIRST_ENABLED_SUB_ITEM);
+                // The tree item could be empty or downloading subitem, so it is uncertain
+                // if the query won't fail
+                if (subItem) {
+                    subItem.setFocus(ctrlKeyPressed);
+                    return;
+                }
+            }
+            // Otherwise, focus the next sibling
+            this.focusNextSibling(ctrlKeyPressed);
+        }
+        /**
+         * Focus the next sibling item in the tree.
+         */
+        async focusNextSibling(ctrlKeyPressed) {
+            const nextSiblingItem = this.el
+                .nextElementSibling;
+            // Focus the next sibling, if exists
+            if (nextSiblingItem) {
+                // If the next sibling is disabled, ask for its next sibling
+                if (nextSiblingItem.disabled) {
+                    nextSiblingItem.focusNextItem(ctrlKeyPressed);
+                }
+                else {
+                    nextSiblingItem.setFocus(ctrlKeyPressed);
+                }
                 return;
             }
-            event.preventDefault();
-            // Click event
-            if (event.pointerType) {
-                this.toggleOrSelect(event);
+            // The item is the last one of the tree at the first level
+            if (this.level === INITIAL_LEVEL) {
                 return;
             }
-            this.emitOpenReference();
-            // Enter or space
-            this.toggleExpand(event);
-        };
+            // Otherwise, ask the parent to focus the next sibling
+            const parentItem = this.el.parentElement;
+            parentItem.focusNextSibling(ctrlKeyPressed);
+        }
         /**
-         * Event triggered by key events on the main button.
+         * Focus the previous item in the tree. If the previous item is expanded, it focuses
+         * the last subitem in its tree.
          */
-        this.handleActionKeyDown = (event) => {
-            // Only toggle if the Enter key was pressed with the Ctrl key
-            if (mouseEventModifierKey(event) && event.code === ENTER_KEY) {
-                event.stopPropagation();
-                this.toggleSelected();
+        async focusPreviousItem(ctrlKeyPressed) {
+            const previousSiblingItem = this.el
+                .previousElementSibling;
+            // Focus last item of the previous sibling
+            if (previousSiblingItem) {
+                previousSiblingItem.focusLastItem(ctrlKeyPressed);
+                return;
             }
-        };
-        this.handleCheckedChange = (event) => {
-            event.stopPropagation();
-            const checked = event.target.checked;
-            this.checked = checked;
-            this.indeterminate = false; // Changing the checked value makes it no longer indeterminate
-            this.checkboxChange.emit({
-                id: this.el.id,
-                checked: this.checked,
-                indeterminate: false
-            });
-        };
-        this.renderImg = (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
-        this.handleDragStart = (event) => {
-            // Disallow drag when editing the caption
-            if (this.editing) {
-                event.preventDefault();
-                event.stopPropagation();
+            // The item is the first one of the tree at the first level
+            if (this.level === INITIAL_LEVEL) {
                 return;
             }
-            // Remove drag image
-            event.dataTransfer.setDragImage(resetDragImage, 0, 0);
-            event.dataTransfer.effectAllowed = "move";
-            this.dragState = "start";
-            this.itemDragStart.emit({
-                elem: this.el,
-                dragEvent: event
-            });
-        };
-        this.handleDragEnd = () => {
-            // event.preventDefault();
-            // this.el.style.cursor = null;
-            this.dragState = "none";
-            this.itemDragEnd.emit();
-        };
-        this.handleDrop = () => {
-            this.dragState = "none";
-        };
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.checkboxChange = createEvent(this, "checkboxChange", 7);
-        this.checkboxToggleChange = createEvent(this, "checkboxToggleChange", 7);
-        this.itemDragStart = createEvent(this, "itemDragStart", 7);
-        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.caption = undefined;
-        this.checkbox = false;
-        this.checked = false;
-        this.customRender = false;
-        this.disabled = false;
-        this.dragDisabled = false;
-        this.dropDisabled = false;
-        this.dragState = "none";
-        this.downloading = false;
-        this.editable = undefined;
-        this.editing = false;
-        this.expanded = false;
-        this.lastItem = false;
-        this.lazyLoad = false;
-        this.leaf = false;
-        this.leftImgSrc = undefined;
-        this.level = INITIAL_LEVEL;
-        this.indeterminate = false;
-        this.metadata = undefined;
-        this.rightImgSrc = undefined;
-        this.selected = false;
-        this.showDownloadingSpinner = true;
-        this.showExpandableButton = true;
-        this.showLines = "none";
-        this.toggleCheckboxes = false;
-    }
-    get el() { return this; }
-    updateChildrenCheckedValue(newValue) {
-        if (!this.toggleCheckboxes || this.leaf || this.ignoreCheckboxChange) {
-            this.ignoreCheckboxChange = false;
-            return;
-        }
-        const treeItems = this.getDirectTreeItems();
-        treeItems.forEach(treeItem => {
-            if (treeItem.checked !== newValue || treeItem.indeterminate !== false) {
-                treeItem.updateChecked(newValue, false);
+            // Otherwise, set focus in the parent element
+            const parentItem = this.el.parentElement;
+            // Check if the parent is not disabled
+            if (parentItem.disabled) {
+                parentItem.focusPreviousItem(ctrlKeyPressed);
+                return;
             }
-        });
-    }
-    handleEditingChange(isEditing) {
-        if (!isEditing) {
-            return;
+            parentItem.setFocus(ctrlKeyPressed);
         }
-        document.body.addEventListener("click", this.removeEditModeOnClick, {
-            capture: true
-        });
-        // Wait until the input is rendered to focus it
-        writeTask(() => {
-            requestAnimationFrame(() => {
-                if (this.inputRef) {
-                    this.inputRef.focus();
+        /**
+         * Focus the last item in its subtree. If the control is not expanded, it
+         * focus the control.
+         */
+        async focusLastItem(ctrlKeyPressed) {
+            // Focus the last subitem if expanded and not lazy loading
+            if (!this.leaf && this.expanded) {
+                const lastSubItem = this.el.querySelector(LAST_SUB_ITEM);
+                // The tree item could be empty or downloading subitem, so it is uncertain
+                // if the query won't fail
+                if (lastSubItem) {
+                    lastSubItem.focusLastItem(ctrlKeyPressed);
+                    return;
                 }
-            });
-        });
-    }
-    handleExpandedChange(isExpanded) {
-        // 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(isExpanded);
-        });
-    }
-    handleLasItemChange(isLastItem) {
-        if (isLastItem && this.showLines) {
-            // Use RAF to set the observer after the render method has completed
-            requestAnimationFrame(() => {
-                this.setResizeObserver();
-            });
-        }
-        else {
-            this.disconnectObserver();
-        }
-    }
-    handleShowLinesChange(newShowLines) {
-        if (newShowLines && this.lastItem) {
-            this.setResizeObserver();
-        }
-        else {
-            this.disconnectObserver();
+            }
+            // If the last item is disabled, try to focus the previous sibling
+            if (this.disabled) {
+                this.focusPreviousItem(ctrlKeyPressed);
+                return;
+            }
+            // Otherwise, it focuses the control
+            this.setFocus(ctrlKeyPressed);
         }
-    }
-    updateCheckboxValue(event) {
-        // No need to update the checkbox value based on the children checkbox
-        if (!this.toggleCheckboxes || this.el === event.target) {
-            return;
+        /**
+         * Set focus in the control.
+         */
+        async setFocus(ctrlKeyPressed) {
+            __classPrivateFieldGet(this, _ChTreeViewItem_headerRef, "f").focus();
+            // Normal navigation auto selects the item.
+            if (!ctrlKeyPressed) {
+                __classPrivateFieldGet(this, _ChTreeViewItem_setSelected, "f").call(this);
+            }
         }
-        const updatedCheck = event.detail.checked;
-        const treeItems = this.getDirectTreeItems();
-        // Check if all the items have the same value as the updated item
-        const allItemsHaveTheSameCheckedValue = treeItems.every(treeItem => treeItem.checked === updatedCheck);
-        const eventMustBeEmitted = this.checked !== updatedCheck ||
-            this.indeterminate !== !allItemsHaveTheSameCheckedValue;
-        this.ignoreCheckboxChange = this.checked !== updatedCheck;
-        this.checked = updatedCheck;
-        this.indeterminate = !allItemsHaveTheSameCheckedValue;
-        // Sync with the UI Model
-        if (eventMustBeEmitted) {
+        /**
+         * Update `checked` and `indeterminate` properties.
+         */
+        async updateChecked(newChecked, newIndeterminate) {
+            this.checked = newChecked;
+            this.indeterminate = newIndeterminate;
+            // Emit the event to sync with the UI model, even if the item does not
+            // have toggleCheckboxes property
             this.checkboxToggleChange.emit({
                 id: this.el.id,
-                checked: updatedCheck,
-                indeterminate: !allItemsHaveTheSameCheckedValue
+                checked: newChecked,
+                indeterminate: newIndeterminate
             });
         }
-    }
-    /**
-     * Focus the next item in the tree. If the control is expanded, it focuses
-     * the first subitem in its tree.
-     */
-    async focusNextItem(ctrlKeyPressed) {
-        // Focus the first subitem if expanded
-        if (!this.leaf && this.expanded) {
-            const subItem = this.el.querySelector(FIRST_ENABLED_SUB_ITEM);
-            // The tree item could be empty or downloading subitem, so it is uncertain
-            // if the query won't fail
-            if (subItem) {
-                subItem.setFocus(ctrlKeyPressed);
-                return;
-            }
+        componentWillLoad() {
+            // Check if must lazy load
+            __classPrivateFieldGet(this, _ChTreeViewItem_lazyLoadItems, "f").call(this, this.expanded);
         }
-        // Otherwise, focus the next sibling
-        this.focusNextSibling(ctrlKeyPressed);
-    }
-    /**
-     * Focus the next sibling item in the tree.
-     */
-    async focusNextSibling(ctrlKeyPressed) {
-        const nextSiblingItem = this.el
-            .nextElementSibling;
-        // Focus the next sibling, if exists
-        if (nextSiblingItem) {
-            // If the next sibling is disabled, ask for its next sibling
-            if (nextSiblingItem.disabled) {
-                nextSiblingItem.focusNextItem(ctrlKeyPressed);
+        componentDidLoad() {
+            if (this.lastItem && this.showLines) {
+                __classPrivateFieldGet(this, _ChTreeViewItem_setResizeObserver, "f").call(this);
             }
-            else {
-                nextSiblingItem.setFocus(ctrlKeyPressed);
-            }
-            return;
-        }
-        // The item is the last one of the tree at the first level
-        if (this.level === INITIAL_LEVEL) {
-            return;
         }
-        // Otherwise, ask the parent to focus the next sibling
-        const parentItem = this.el.parentElement;
-        parentItem.focusNextSibling(ctrlKeyPressed);
-    }
-    /**
-     * Focus the previous item in the tree. If the previous item is expanded, it focuses
-     * the last subitem in its tree.
-     */
-    async focusPreviousItem(ctrlKeyPressed) {
-        const previousSiblingItem = this.el
-            .previousElementSibling;
-        // Focus last item of the previous sibling
-        if (previousSiblingItem) {
-            previousSiblingItem.focusLastItem(ctrlKeyPressed);
-            return;
-        }
-        // The item is the first one of the tree at the first level
-        if (this.level === INITIAL_LEVEL) {
-            return;
-        }
-        // Otherwise, set focus in the parent element
-        const parentItem = this.el.parentElement;
-        // Check if the parent is not disabled
-        if (parentItem.disabled) {
-            parentItem.focusPreviousItem(ctrlKeyPressed);
-            return;
-        }
-        parentItem.setFocus(ctrlKeyPressed);
-    }
-    /**
-     * Focus the last item in its subtree. If the control is not expanded, it
-     * focus the control.
-     */
-    async focusLastItem(ctrlKeyPressed) {
-        // Focus the last subitem if expanded and not lazy loading
-        if (!this.leaf && this.expanded) {
-            const lastSubItem = this.el.querySelector(LAST_SUB_ITEM);
-            // The tree item could be empty or downloading subitem, so it is uncertain
-            // if the query won't fail
-            if (lastSubItem) {
-                lastSubItem.focusLastItem(ctrlKeyPressed);
-                return;
+        disconnectedCallback() {
+            // If it was disconnected on edit mode, remove the body event handler
+            if (this.editing) {
+                __classPrivateFieldGet(this, _ChTreeViewItem_removeEditMode, "f").call(this, false);
             }
+            __classPrivateFieldGet(this, _ChTreeViewItem_disconnectObserver, "f").call(this);
         }
-        // If the last item is disabled, try to focus the previous sibling
-        if (this.disabled) {
-            this.focusPreviousItem(ctrlKeyPressed);
-            return;
-        }
-        // Otherwise, it focuses the control
-        this.setFocus(ctrlKeyPressed);
-    }
-    /**
-     * Set focus in the control.
-     */
-    async setFocus(ctrlKeyPressed) {
-        this.headerRef.focus();
-        // Normal navigation auto selects the item.
-        if (!ctrlKeyPressed) {
-            this.setSelected();
-        }
-    }
-    /**
-     * Update `checked` and `indeterminate` properties.
-     */
-    async updateChecked(newChecked, newIndeterminate) {
-        this.checked = newChecked;
-        this.indeterminate = newIndeterminate;
-        // Emit the event to sync with the UI model, even if the item does not
-        // have toggleCheckboxes property
-        this.checkboxToggleChange.emit({
-            id: this.el.id,
-            checked: newChecked,
-            indeterminate: newIndeterminate
-        });
-    }
-    getDirectTreeItems() {
-        return Array.from(this.el.querySelectorAll(DIRECT_TREE_ITEM_CHILDREN));
-    }
-    setResizeObserver() {
-        this.watcher = new ResizeObserver(() => {
-            const distanceToCheckbox = this.el.getBoundingClientRect().height -
-                this.headerRef.getBoundingClientRect().height / 2;
-            this.el.style.setProperty(DISTANCE_TO_CHECKBOX_CUSTOM_VAR, distanceToCheckbox + "px");
-        });
-        this.watcher.observe(this.el);
-        this.watcher.observe(this.headerRef);
-    }
-    disconnectObserver() {
-        if (!this.watcher) {
-            return;
-        }
-        this.watcher.disconnect();
-        this.watcher = null;
-    }
-    lazyLoadItems(expanded) {
-        if (!this.lazyLoad || !expanded) {
-            return;
-        }
-        // Load items
-        this.lazyLoad = false;
-        this.downloading = true;
-        this.loadLazyContent.emit(this.el.id);
-    }
-    toggleSelected() {
-        const selected = !this.selected;
-        this.selected = selected;
-        this.selectedItemChange.emit(this.getSelectedInfo(true, selected));
-    }
-    setSelected() {
-        this.selected = true;
-        this.selectedItemChange.emit(this.getSelectedInfo(false, true));
-    }
-    toggleOrSelect(event) {
-        if (mouseEventModifierKey(event)) {
-            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));
-        }
-    }
-    componentDidLoad() {
-        if (this.lastItem && this.showLines) {
-            this.setResizeObserver();
-        }
-    }
-    disconnectedCallback() {
-        // If it was disconnected on edit mode, remove the body event handler
-        if (this.editing) {
-            this.removeEditMode(false);
+        render() {
+            const evenLevel = this.level % 2 === 0;
+            const expandableButtonVisible = !this.leaf && this.expandableButton !== "no";
+            const expandableButtonNotVisible = !this.leaf && this.expandableButton === "no";
+            const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
+            const hasContent = !this.leaf && !this.lazyLoad;
+            const showAllLines = this.showLines === "all" && this.level !== INITIAL_LEVEL;
+            const showLastLine = this.showLines === "last" &&
+                this.level !== INITIAL_LEVEL &&
+                this.lastItem;
+            return (h(Host, { role: "treeitem", "aria-level": this.level + 1, "aria-selected": this.selected ? "true" : null, class: {
+                    [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
+                    [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
+                    [TREE_ITEM_TAG_NAME + "--not-editing"]: !this.editing,
+                    [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
+                    [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
+                }, style: { "--level": `${this.level}` },
+                // Drag and drop
+                onDrop: acceptDrop ? __classPrivateFieldGet(this, _ChTreeViewItem_handleDrop, "f") : null }, h("button", { "aria-controls": hasContent ? EXPANDABLE_ID : null, "aria-expanded": hasContent ? this.expanded.toString() : null, class: {
+                    header: true,
+                    "header--selected": this.selected,
+                    "header--disabled": this.disabled,
+                    "header--expandable-offset": expandableButtonVisible,
+                    "header--checkbox-offset": expandableButtonNotVisible && this.checkbox,
+                    "header--even": evenLevel,
+                    "header--odd": !evenLevel,
+                    "header--even-expandable": evenLevel && expandableButtonVisible,
+                    "header--odd-expandable": !evenLevel && expandableButtonVisible,
+                    "header--level-0": this.level === INITIAL_LEVEL,
+                    "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 === INITIAL_LEVEL ? " level-0" : ""}`, type: "button", disabled: this.disabled, onClick: __classPrivateFieldGet(this, _ChTreeViewItem_handleActionClick, "f"), onKeyDown: !this.editing ? __classPrivateFieldGet(this, _ChTreeViewItem_handleActionKeyDown, "f") : null,
+                // Drag and drop
+                draggable: !this.dragDisabled, onDragStart: __classPrivateFieldGet(this, _ChTreeViewItem_handleDragStart, "f"), onDragEnd: !this.dragDisabled ? __classPrivateFieldGet(this, _ChTreeViewItem_handleDragEnd, "f") : null, ref: el => (__classPrivateFieldSet(this, _ChTreeViewItem_headerRef, el, "f")) }, !this.leaf && this.expandableButton === "action" && (h("button", { type: "button", class: {
+                    "expandable-button": true,
+                    "expandable-button--expanded": this.expanded,
+                    "expandable-button--collapsed": !this.expanded
+                }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: __classPrivateFieldGet(this, _ChTreeViewItem_toggleExpand, "f") })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", exportparts: CHECKBOX_EXPORT_PARTS, 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: __classPrivateFieldGet(this, _ChTreeViewItem_handleCheckedChange, "f") })), this.customRender ? (h("slot", { name: "custom-content" })) : ([
+                h("div", { class: {
+                        action: true,
+                        "readonly-mode": !this.editing
+                    }, part: `action${!this.editing ? " readonly-mode" : ""}${!this.leaf && this.expanded ? " expanded" : ""}`, onDblClick: !this.editing ? __classPrivateFieldGet(this, _ChTreeViewItem_handleActionDblClick, "f") : null }, this.leftImgSrc &&
+                    __classPrivateFieldGet(this, _ChTreeViewItem_renderImg, "f").call(this, "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: __classPrivateFieldGet(this, _ChTreeViewItem_removeEditMode, "f").call(this, false), onKeyDown: __classPrivateFieldGet(this, _ChTreeViewItem_checkIfShouldRemoveEditMode, "f"), ref: el => (__classPrivateFieldSet(this, _ChTreeViewItem_inputRef, el, "f")) })) : (this.caption), this.rightImgSrc &&
+                    __classPrivateFieldGet(this, _ChTreeViewItem_renderImg, "f").call(this, "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", { role: "group", "aria-busy": (!!this.downloading).toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: {
+                    expandable: true,
+                    "expandable--collapsed": !this.expanded,
+                    "expandable--lazy-loaded": !this.downloading
+                }, part: `expandable${this.expanded ? " expanded" : " collapsed"}${!this.downloading ? " lazy-loaded" : ""}` }, h("slot", null)))));
         }
-        this.disconnectObserver();
-    }
-    render() {
-        const evenLevel = this.level % 2 === 0;
-        const expandableButtonVisible = !this.leaf && this.showExpandableButton;
-        const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
-        const acceptDrop = !this.dropDisabled && !this.leaf && this.dragState !== "start";
-        const hasContent = !this.leaf && !this.lazyLoad;
-        const showAllLines = this.showLines === "all" && this.level !== INITIAL_LEVEL;
-        const showLastLine = this.showLines === "last" &&
-            this.level !== INITIAL_LEVEL &&
-            this.lastItem;
-        return (h(Host, { role: "treeitem", "aria-level": this.level + 1, "aria-selected": this.selected ? "true" : null, class: {
-                [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
-                [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
-                [TREE_ITEM_TAG_NAME + "--not-editing"]: !this.editing,
-                [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
-                [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
-            }, style: { "--level": `${this.level}` },
-            // Drag and drop
-            onDrop: acceptDrop ? this.handleDrop : null }, h("button", { "aria-controls": hasContent ? EXPANDABLE_ID : null, "aria-expanded": hasContent ? this.expanded.toString() : null, class: {
-                header: true,
-                "header--selected": this.selected,
-                "header--disabled": this.disabled,
-                "header--expandable-offset": expandableButtonVisible,
-                "header--checkbox-offset": expandableButtonNotVisible && this.checkbox,
-                "header--even": evenLevel,
-                "header--odd": !evenLevel,
-                "header--even-expandable": evenLevel && expandableButtonVisible,
-                "header--odd-expandable": !evenLevel && expandableButtonVisible,
-                "header--level-0": this.level === INITIAL_LEVEL
-            }, part: `header${this.disabled ? " disabled" : ""}${this.selected ? " selected" : ""}${this.level === INITIAL_LEVEL ? " level-0" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
-            // Drag and drop
-            draggable: !this.dragDisabled, onDragStart: this.handleDragStart, onDragEnd: !this.dragDisabled ? this.handleDragEnd : null, ref: el => (this.headerRef = el) }, !this.leaf && this.showExpandableButton && (h("button", { type: "button", class: {
-                "expandable-button": true,
-                "expandable-button--expanded": this.expanded,
-                "expandable-button--collapsed": !this.expanded
-            }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", exportparts: CHECKBOX_EXPORT_PARTS, 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 ? (h("slot", { name: "custom-content" })) : ([
-            h("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 ? (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", { role: "group", "aria-busy": (!!this.downloading).toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: {
-                expandable: true,
-                "expandable--collapsed": !this.expanded,
-                "expandable--lazy-loaded": !this.downloading
-            }, part: `expandable${this.expanded ? " expanded" : " collapsed"}${!this.downloading ? " lazy-loaded" : ""}` }, h("slot", null)))));
-    }
-    static get watchers() { return {
-        "checked": ["updateChildrenCheckedValue"],
-        "editing": ["handleEditingChange"],
-        "expanded": ["handleExpandedChange"],
-        "lastItem": ["handleLasItemChange"],
-        "showLines": ["handleShowLinesChange"]
-    }; }
-    static get style() { return treeViewItemCss; }
-}, [1, "ch-tree-view-item", {
+        static get watchers() { return {
+            "checked": ["updateChildrenCheckedValue"],
+            "editing": ["handleEditingChange"],
+            "expanded": ["handleExpandedChange"],
+            "lastItem": ["handleLasItemChange"],
+            "showLines": ["handleShowLinesChange"]
+        }; }
+        static get style() { return treeViewItemCss; }
+    },
+    _ChTreeViewItem_watcher = new WeakMap(),
+    _ChTreeViewItem_ignoreCheckboxChange = new WeakMap(),
+    _ChTreeViewItem_headerRef = new WeakMap(),
+    _ChTreeViewItem_inputRef = new WeakMap(),
+    _ChTreeViewItem_getDirectTreeItems = new WeakMap(),
+    _ChTreeViewItem_setResizeObserver = new WeakMap(),
+    _ChTreeViewItem_disconnectObserver = new WeakMap(),
+    _ChTreeViewItem_checkIfShouldRemoveEditMode = new WeakMap(),
+    _ChTreeViewItem_removeEditModeOnClick = new WeakMap(),
+    _ChTreeViewItem_removeEditMode = new WeakMap(),
+    _ChTreeViewItem_toggleExpand = new WeakMap(),
+    _ChTreeViewItem_lazyLoadItems = new WeakMap(),
+    _ChTreeViewItem_toggleSelected = new WeakMap(),
+    _ChTreeViewItem_setSelected = new WeakMap(),
+    _ChTreeViewItem_toggleOrSelect = new WeakMap(),
+    _ChTreeViewItem_getSelectedInfo = new WeakMap(),
+    _ChTreeViewItem_handleActionDblClick = new WeakMap(),
+    _ChTreeViewItem_handleActionClick = new WeakMap(),
+    _ChTreeViewItem_handleActionKeyDown = new WeakMap(),
+    _ChTreeViewItem_emitOpenReference = new WeakMap(),
+    _ChTreeViewItem_handleCheckedChange = new WeakMap(),
+    _ChTreeViewItem_renderImg = new WeakMap(),
+    _ChTreeViewItem_handleDragStart = new WeakMap(),
+    _ChTreeViewItem_handleDragEnd = new WeakMap(),
+    _ChTreeViewItem_handleDrop = new WeakMap(),
+    _a), [1, "ch-tree-view-item", {
         "caption": [1],
         "checkbox": [4],
         "checked": [1540],
@@ -546,6 +596,8 @@ const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement(class ChTreeViewItem ext
         "downloading": [1028],
         "editable": [4],
         "editing": [1028],
+        "expandableButton": [1, "expandable-button"],
+        "expandOnClick": [4, "expand-on-click"],
         "expanded": [1028],
         "lastItem": [4, "last-item"],
         "lazyLoad": [1028, "lazy-load"],
@@ -557,7 +609,6 @@ const ChTreeViewItem = /*@__PURE__*/ proxyCustomElement(class ChTreeViewItem ext
         "rightImgSrc": [1, "right-img-src"],
         "selected": [1540],
         "showDownloadingSpinner": [4, "show-downloading-spinner"],
-        "showExpandableButton": [4, "show-expandable-button"],
         "showLines": [1, "show-lines"],
         "toggleCheckboxes": [4, "toggle-checkboxes"],
         "focusNextItem": [64],