@genexus/genexus-ide-ui 0.0.92 → 0.0.94

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

@@ -1,9 +1,11 @@
-import { forceUpdate, proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, createEvent, h } from '@stencil/core/internal/client';
 import { f as fromGxImageToURL } from './genexus-implementation.js';
+import { r as removeElement } from './array.js';
 import { d as defineCustomElement$3 } from './checkbox.js';
 import { d as defineCustomElement$2 } from './tree-view.js';
 import { d as defineCustomElement$1 } from './tree-view-item.js';
 
+const itemHasCheckbox = (item, defaultCheckbox) => item.checkbox ?? defaultCheckbox;
 const filterWithCase = (stringToFilter, filter, matchCase) => matchCase
     ? stringToFilter.includes(filter)
     : stringToFilter.toLowerCase().includes(filter.toLowerCase());
@@ -14,7 +16,7 @@ const filterDictionary = {
     caption: (item, filterInfo) => filterInfo.filter
         ? filterWithString(item.caption ?? "", filterInfo.filter, filterInfo.filterOptions)
         : true,
-    checked: (item, filterInfo) => (item.checkbox ?? filterInfo.defaultCheckbox) &&
+    checked: (item, filterInfo) => itemHasCheckbox(item, filterInfo.defaultCheckbox) &&
         !item.indeterminate &&
         (item.checked ?? filterInfo.defaultChecked),
     list: (item, filterInfo) => filterInfo.filterSet.has(item.id),
@@ -22,7 +24,7 @@ const filterDictionary = {
         ? filterWithString(item.metadata ?? "", filterInfo.filter, filterInfo.filterOptions)
         : true,
     none: () => true,
-    unchecked: (item, filterInfo) => (item.checkbox ?? filterInfo.defaultCheckbox) &&
+    unchecked: (item, filterInfo) => itemHasCheckbox(item, filterInfo.defaultCheckbox) &&
         !item.indeterminate &&
         !(item.checked ?? filterInfo.defaultChecked)
 };
@@ -30,11 +32,6 @@ const computeFilter = (filterType, item, filterInfo) => filterInfo.filterOptions
     ? !filterDictionary[filterType](item, filterInfo)
     : filterDictionary[filterType](item, filterInfo);
 
-/**
- * Removes an element from an array, returning the deleted element.
- */
-const removeElement = (array, index) => array.splice(index, 1);
-
 const removeTreeViewItems = (items, flattenedTreeModel, flattenedCheckboxTreeModel, selectedItems) => {
     let atLeastOneElement = false;
     let atLeastOneCheckbox = false;
@@ -134,20 +131,7 @@ const scrollIntoVisiblePath = (path, flattenedTreeModel, rootNode, lazyLoadTreeI
     return resolveNewPromise(true);
 };
 
-const updateItemProperty = (itemId, properties, flattenedTreeModel) => {
-    const itemUIModel = flattenedTreeModel.get(itemId);
-    if (!itemUIModel) {
-        return;
-    }
-    const itemInfo = itemUIModel.item;
-    Object.keys(properties).forEach(propertyName => {
-        if (properties[propertyName] !== undefined) {
-            itemInfo[propertyName] = properties[propertyName];
-        }
-    });
-};
-
-const reloadItems = (classRef, itemId, flattenedTreeModel, lazyLoadTreeItemsCallback, loadLazyContent, removeItems, beforeProperties, afterProperties) => {
+const reloadItems = (elementRef, itemId, flattenedTreeModel, lazyLoadTreeItemsCallback, loadLazyContent, removeItems, beforeProperties, afterProperties) => {
     const itemToReloadUIModel = flattenedTreeModel.get(itemId);
     if (!lazyLoadTreeItemsCallback ||
         !itemToReloadUIModel ||
@@ -160,8 +144,7 @@ const reloadItems = (classRef, itemId, flattenedTreeModel, lazyLoadTreeItemsCall
         afterProperties = { downloading: false };
     }
     if (beforeProperties) {
-        updateItemProperty(itemId, beforeProperties, flattenedTreeModel);
-        forceUpdate(classRef);
+        elementRef.updateItemsProperties([itemId], beforeProperties);
     }
     const promise = lazyLoadTreeItemsCallback(itemId);
     promise.then(async (newItems) => {
@@ -199,15 +182,55 @@ const reloadItems = (classRef, itemId, flattenedTreeModel, lazyLoadTreeItemsCall
         // Update the items of the reloaded node
         await loadLazyContent(itemId, newItems);
         if (afterProperties) {
-            updateItemProperty(itemId, afterProperties, flattenedTreeModel);
+            elementRef.updateItemsProperties([itemId], afterProperties);
         }
         // Reload child items that were lazy loaded
-        reloadNewItemsQueue.forEach(itemToReload => reloadItems(classRef, itemToReload, flattenedTreeModel, lazyLoadTreeItemsCallback, loadLazyContent, removeItems));
+        reloadNewItemsQueue.forEach(itemToReload => reloadItems(elementRef, itemToReload, flattenedTreeModel, lazyLoadTreeItemsCallback, loadLazyContent, removeItems));
     });
 };
 
+const updateItemProperty = (itemId, properties, flattenedTreeModel, newSelectedItems, newCheckboxItems, defaultCheckbox) => {
+    const itemUIModel = flattenedTreeModel.get(itemId);
+    if (!itemUIModel) {
+        return;
+    }
+    const itemInfo = itemUIModel.item;
+    Object.keys(properties).forEach(propertyName => {
+        if (properties[propertyName] !== undefined) {
+            itemInfo[propertyName] = properties[propertyName];
+        }
+    });
+    // Accumulate selection/deselection
+    if (properties.selected) {
+        newSelectedItems.add(itemId);
+    }
+    else if (properties.selected === false) {
+        newSelectedItems.delete(itemId);
+    }
+    // Accumulate/remove items with checkbox
+    if (itemHasCheckbox(itemInfo, defaultCheckbox)) {
+        newCheckboxItems.set(itemId, itemUIModel);
+    }
+    else {
+        newCheckboxItems.delete(itemId);
+    }
+};
+
 const treeViewRenderCss = "ch-tree-view-render{display:contents}";
 
+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 _ChTreeViewRender_flattenedTreeModel, _ChTreeViewRender_flattenedCheckboxTreeModel, _ChTreeViewRender_selectedItems, _ChTreeViewRender_selectedChangeScheduled, _ChTreeViewRender_checkedChangeScheduled, _ChTreeViewRender_rootNode, _ChTreeViewRender_applyFilters, _ChTreeViewRender_immediateFilter, _ChTreeViewRender_filterTimeout, _ChTreeViewRender_filterListAsSet, _ChTreeViewRender_treeRef, _ChTreeViewRender_getItemsInfo, _ChTreeViewRender_handleDroppableZoneEnter, _ChTreeViewRender_handleSelectedItemsChange, _ChTreeViewRender_handleExpandedItemChange, _ChTreeViewRender_handleItemContextmenu, _ChTreeViewRender_handleItemsDropped, _ChTreeViewRender_removeAllSelectedItemsExceptForTheLast, _ChTreeViewRender_moveItemToNewParent, _ChTreeViewRender_flattenSubModel, _ChTreeViewRender_flattenItemUIModel, _ChTreeViewRender_itemHasCheckbox, _ChTreeViewRender_treeHasFilters, _ChTreeViewRender_sortItems, _ChTreeViewRender_flattenModel, _ChTreeViewRender_filterSubModel, _ChTreeViewRender_scheduleCheckedItemsChange, _ChTreeViewRender_scheduleSelectedItemsChange, _ChTreeViewRender_updateSelectedItems, _ChTreeViewRender_updateCheckedItems, _ChTreeViewRender_scheduleFilterProcessing, _ChTreeViewRender_checkIfThereAreDifferentItemsWithCheckbox, _ChTreeViewRender_checkIfThereAreDifferentSelectedItems, _ChTreeViewRender_updateFilters, _ChTreeViewRender_validateCheckedAndSelectedItems, _ChTreeViewRender_getSelectedItemsCallback, _a;
+const ROOT_ID = null;
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
 const DEFAULT_CLASS_VALUE = "tree-view-item";
@@ -223,8 +246,8 @@ const treeViewHasFilters = (filterType, filter) => filterType !== "none" &&
     ((filterType !== "caption" && filterType !== "metadata") ||
         (filter != null && filter.trim() !== ""));
 const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
-    var _a, _b, _c, _d, _e, _f;
-    return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { key: itemModel.id, id: itemModel.id, caption: itemModel.caption, checkbox: (_a = itemModel.checkbox) !== null && _a !== void 0 ? _a : treeState.checkbox, checked: (_b = itemModel.checked) !== null && _b !== void 0 ? _b : treeState.checked, class: itemModel.class, disabled: itemModel.disabled, downloading: itemModel.downloading, dragDisabled: (_c = itemModel.dragDisabled) !== null && _c !== void 0 ? _c : treeState.dragDisabled, dropDisabled: (_d = itemModel.dropDisabled) !== null && _d !== void 0 ? _d : treeState.dropDisabled, editable: (_e = itemModel.editable) !== null && _e !== void 0 ? _e : treeState.editableItems, expanded: itemModel.expanded, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, leftImgSrc: itemModel.leftImgSrc, level: level, metadata: itemModel.metadata, rightImgSrc: itemModel.rightImgSrc, selected: itemModel.selected, showExpandableButton: itemModel.showExpandableButton, showLines: treeState.showLines, toggleCheckboxes: (_f = itemModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : treeState.toggleCheckboxes }, !itemModel.leaf &&
+    var _b, _c, _d, _e, _f, _g, _h;
+    return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { key: itemModel.id, id: itemModel.id, caption: itemModel.caption, checkbox: (_b = itemModel.checkbox) !== null && _b !== void 0 ? _b : treeState.checkbox, checked: (_c = itemModel.checked) !== null && _c !== void 0 ? _c : treeState.checked, class: itemModel.class, disabled: itemModel.disabled, downloading: itemModel.downloading, dragDisabled: (_d = itemModel.dragDisabled) !== null && _d !== void 0 ? _d : treeState.dragDisabled, dropDisabled: (_e = itemModel.dropDisabled) !== null && _e !== void 0 ? _e : treeState.dropDisabled, editable: (_f = itemModel.editable) !== null && _f !== void 0 ? _f : treeState.editableItems, expanded: itemModel.expanded, expandableButton: (_g = itemModel.expandableButton) !== null && _g !== void 0 ? _g : treeState.expandableButton, expandOnClick: treeState.expandOnClick, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, leftImgSrc: itemModel.leftImgSrc, level: level, metadata: itemModel.metadata, rightImgSrc: itemModel.rightImgSrc, selected: itemModel.selected, showLines: treeState.showLines, toggleCheckboxes: (_h = itemModel.toggleCheckboxes) !== null && _h !== void 0 ? _h : treeState.toggleCheckboxes }, !itemModel.leaf &&
         itemModel.items != null &&
         itemModel.items.map((subModel, index) => defaultRenderItem(subModel, treeState, treeHasFilter, treeState.showLines !== "none" &&
             // If there is a filter applied in the current list, use the
@@ -234,12 +257,12 @@ const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level)
                 : index === itemModel.items.length - 1), level + 1))));
 };
 const GXRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
-    var _a, _b, _c, _d;
-    return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { key: itemModel.id, id: itemModel.id, caption: itemModel.caption, checkbox: (_a = itemModel.checkbox) !== null && _a !== void 0 ? _a : treeState.checkbox, checked: (_b = itemModel.checked) !== null && _b !== void 0 ? _b : treeState.checked, class: itemModel.class, downloading: itemModel.downloading, dragDisabled: itemModel.dragEnabled != null
+    var _b, _c, _d, _e;
+    return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { key: itemModel.id, id: itemModel.id, caption: itemModel.caption, checkbox: (_b = itemModel.checkbox) !== null && _b !== void 0 ? _b : treeState.checkbox, checked: (_c = itemModel.checked) !== null && _c !== void 0 ? _c : treeState.checked, class: itemModel.class, downloading: itemModel.downloading, dragDisabled: itemModel.dragEnabled != null
             ? !itemModel.dragEnabled
             : treeState.dragDisabled, dropDisabled: itemModel.dropEnabled != null
             ? !itemModel.dropEnabled
-            : treeState.dropDisabled, editable: (_c = itemModel.editable) !== null && _c !== void 0 ? _c : treeState.editableItems, expanded: itemModel.expanded, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, leftImgSrc: fromGxImageToURL(itemModel.leftImage, treeState.gxSettings, treeState.gxImageConstructor), level: level, metadata: itemModel.metadata, selected: itemModel.selected, showLines: treeState.showLines, toggleCheckboxes: (_d = itemModel.toggleCheckboxes) !== null && _d !== void 0 ? _d : treeState.toggleCheckboxes }, !itemModel.leaf &&
+            : treeState.dropDisabled, editable: (_d = itemModel.editable) !== null && _d !== void 0 ? _d : treeState.editableItems, expanded: itemModel.expanded, expandOnClick: treeState.expandOnClick, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, leftImgSrc: fromGxImageToURL(itemModel.leftImage, treeState.gxSettings, treeState.gxImageConstructor), level: level, metadata: itemModel.metadata, selected: itemModel.selected, showLines: treeState.showLines, toggleCheckboxes: (_e = itemModel.toggleCheckboxes) !== null && _e !== void 0 ? _e : treeState.toggleCheckboxes }, !itemModel.leaf &&
         itemModel.items != null &&
         itemModel.items.map((subModel, index) => GXRenderItem(subModel, treeState, treeHasFilter, treeState.showLines !== "none" &&
             // If there is a filter applied in the current list, use the
@@ -259,622 +282,782 @@ const defaultSortItemsCallback = (subModel) => {
         return a.caption <= b.caption ? -1 : 0;
     });
 };
-const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class ChTreeViewRender extends HTMLElement {
-    constructor() {
-        // UI Models
-        this.flattenedTreeModel = new Map();
-        this.flattenedCheckboxTreeModel = new Map();
-        this.selectedItems = new Set();
-        this.emitCheckedChange = false;
-        // Filters info
-        this.applyFilters = false;
-        this.handleDroppableZoneEnter = (event) => {
-            if (!this.checkDroppableZoneCallback) {
-                return;
-            }
-            event.stopPropagation();
-            // Suppose the request is made immediately by executing the callback
-            const requestTimestamp = new Date().getTime();
-            const dropInformation = event.detail;
-            const promise = this.checkDroppableZoneCallback(dropInformation);
-            promise.then(validDrop => {
-                this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement((_a = class ChTreeViewRender extends HTMLElement {
+        constructor() {
+            // UI Models
+            _ChTreeViewRender_flattenedTreeModel.set(this, new Map());
+            _ChTreeViewRender_flattenedCheckboxTreeModel.set(this, new Map());
+            _ChTreeViewRender_selectedItems.set(this, new Set());
+            _ChTreeViewRender_selectedChangeScheduled.set(this, false);
+            _ChTreeViewRender_checkedChangeScheduled.set(this, false);
+            _ChTreeViewRender_rootNode.set(this, void 0);
+            // Filters info
+            _ChTreeViewRender_applyFilters.set(this, false);
+            _ChTreeViewRender_immediateFilter.set(this, void 0);
+            _ChTreeViewRender_filterTimeout.set(this, void 0);
+            _ChTreeViewRender_filterListAsSet.set(this, void 0);
+            // Refs
+            _ChTreeViewRender_treeRef.set(this, void 0);
+            _ChTreeViewRender_getItemsInfo.set(this, (itemsId) => {
+                const treeViewItemsInfo = [];
+                itemsId.forEach(itemId => {
+                    const itemUIModel = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(itemId);
+                    if (itemUIModel) {
+                        treeViewItemsInfo.push(itemUIModel);
+                    }
+                });
+                return treeViewItemsInfo;
             });
-        };
-        this.handleSelectedItemsChange = (event) => {
-            event.stopPropagation();
-            const itemsToProcess = new Map(event.detail);
-            // Remove no longer selected items
-            this.selectedItems.forEach(selectedItemId => {
-                const itemUIModel = this.flattenedTreeModel.get(selectedItemId).item;
-                const itemIsStillSelected = itemsToProcess.get(selectedItemId);
-                // The item does not need to be added. Remove it from the processed list
-                if (itemIsStillSelected) {
-                    itemUIModel.expanded = itemIsStillSelected.expanded; // Update expanded state
-                    itemsToProcess.delete(selectedItemId);
+            _ChTreeViewRender_handleDroppableZoneEnter.set(this, (event) => {
+                if (!this.checkDroppableZoneCallback) {
+                    return;
                 }
-                // The item must be un-selected in the UI Model
-                else {
-                    itemUIModel.selected = false;
-                    this.selectedItems.delete(selectedItemId);
+                event.stopPropagation();
+                // Suppose the request is made immediately by executing the callback
+                const requestTimestamp = new Date().getTime();
+                const dropInformation = event.detail;
+                const promise = this.checkDroppableZoneCallback(dropInformation);
+                promise.then(validDrop => {
+                    this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+                });
+            });
+            _ChTreeViewRender_handleSelectedItemsChange.set(this, (event) => {
+                event.stopPropagation();
+                const itemsToProcess = new Map(event.detail);
+                const previousSelectedItems = __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f");
+                // Remove no longer selected items
+                previousSelectedItems.forEach(selectedItemId => {
+                    const itemUIModel = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(selectedItemId).item;
+                    const itemIsStillSelected = itemsToProcess.get(selectedItemId);
+                    // The item does not need to be added. Remove it from the processed list
+                    if (itemIsStillSelected) {
+                        itemUIModel.expanded = itemIsStillSelected.expanded; // Update expanded state
+                        itemsToProcess.delete(selectedItemId);
+                    }
+                    // The item must be un-selected in the UI Model
+                    else {
+                        itemUIModel.selected = false;
+                        previousSelectedItems.delete(selectedItemId);
+                    }
+                });
+                // Add new selected items
+                itemsToProcess.forEach((newSelectedItemInfo, itemId) => {
+                    const newSelectedItem = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(itemId).item;
+                    newSelectedItem.selected = true;
+                    newSelectedItem.expanded = newSelectedItemInfo.expanded;
+                    previousSelectedItems.add(itemId);
+                });
+                // Queue re-render to avoid issues about synchronization the Virtual DOM
+                // with the real DOM
+                forceUpdate(this);
+                __classPrivateFieldGet(this, _ChTreeViewRender_updateSelectedItems, "f").call(this);
+            });
+            _ChTreeViewRender_handleExpandedItemChange.set(this, (event) => {
+                const detail = event.detail;
+                const itemInfo = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(detail.id).item;
+                itemInfo.expanded = detail.expanded;
+            });
+            _ChTreeViewRender_handleItemContextmenu.set(this, (event) => {
+                event.stopPropagation();
+                this.itemContextmenu.emit(event.detail);
+            });
+            _ChTreeViewRender_handleItemsDropped.set(this, (event) => {
+                const dataTransferInfo = event.detail;
+                const newContainer = dataTransferInfo.newContainer;
+                const newParentId = newContainer.id;
+                // Check if the parent exists in the UI Model
+                if (!__classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(newParentId)) {
+                    return;
                 }
+                const draggedItems = dataTransferInfo.draggedItems;
+                if (draggedItems.length === 0 || !this.dropItemsCallback) {
+                    return;
+                }
+                event.stopPropagation();
+                const promise = this.dropItemsCallback(dataTransferInfo);
+                this.waitDropProcessing = true;
+                promise.then(async (response) => {
+                    this.dropItems(response.acceptDrop, dataTransferInfo, response.items);
+                    this.waitDropProcessing = false;
+                });
             });
-            // Add new selected items
-            itemsToProcess.forEach((newSelectedItemInfo, itemId) => {
-                const newSelectedItem = this.flattenedTreeModel.get(itemId).item;
-                newSelectedItem.selected = true;
-                newSelectedItem.expanded = newSelectedItemInfo.expanded;
-                this.selectedItems.add(itemId);
+            _ChTreeViewRender_removeAllSelectedItemsExceptForTheLast.set(this, (currentSelectedItems) => {
+                if (currentSelectedItems.size > 1) {
+                    const selectedItemsArray = [...currentSelectedItems.values()];
+                    const lastItemIndex = currentSelectedItems.size - 1;
+                    // Deselect all items except the last
+                    for (let index = 0; index < lastItemIndex; index++) {
+                        const itemId = selectedItemsArray[index];
+                        __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(itemId).item.selected = false;
+                    }
+                    // Create a new Set with only the last item
+                    currentSelectedItems.clear();
+                    currentSelectedItems.add(selectedItemsArray[lastItemIndex]);
+                    __classPrivateFieldGet(this, _ChTreeViewRender_scheduleSelectedItemsChange, "f").call(this);
+                }
             });
-            // Update selected items
-            this.emitSelectedItemsChange([...event.detail.keys()]);
-        };
-        this.handleExpandedItemChange = (event) => {
-            const detail = event.detail;
-            const itemInfo = this.flattenedTreeModel.get(detail.id).item;
-            itemInfo.expanded = detail.expanded;
-        };
-        this.handleItemContextmenu = (event) => {
-            event.stopPropagation();
-            this.itemContextmenu.emit(event.detail);
-        };
-        this.handleItemsDropped = (event) => {
-            const dataTransferInfo = event.detail;
-            const newContainer = dataTransferInfo.newContainer;
-            const newParentId = newContainer.id;
-            // Check if the parent exists in the UI Model
-            if (!this.flattenedTreeModel.get(newParentId)) {
-                return;
-            }
-            const draggedItems = dataTransferInfo.draggedItems;
-            if (draggedItems.length === 0 || !this.dropItemsCallback) {
-                return;
-            }
-            event.stopPropagation();
-            const promise = this.dropItemsCallback(dataTransferInfo);
-            this.waitDropProcessing = true;
-            promise.then(async (response) => {
-                this.dropItems(response.acceptDrop, dataTransferInfo, response.items);
-                this.waitDropProcessing = false;
+            _ChTreeViewRender_moveItemToNewParent.set(this, (newParentUIModel) => (dataTransferInfo) => {
+                const itemUIModelExtended = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(dataTransferInfo.id);
+                const item = itemUIModelExtended.item;
+                const oldParentItem = itemUIModelExtended.parentItem;
+                // Remove the UI model from the previous parent. The equality function
+                // must be by index, not by object reference
+                oldParentItem.items.splice(oldParentItem.items.findIndex(el => el.id === item.id), 1);
+                // Add the UI Model to the new parent
+                newParentUIModel.items.push(item);
+                // Reference the new parent in the item
+                itemUIModelExtended.parentItem = newParentUIModel;
             });
-        };
-        this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
-            const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
-            const item = itemUIModelExtended.item;
-            const oldParentItem = itemUIModelExtended.parentItem;
-            // Remove the UI model from the previous parent. The equality function
-            // must be by index, not by object reference
-            oldParentItem.items.splice(oldParentItem.items.findIndex(el => el.id === item.id), 1);
-            // Add the UI Model to the new parent
-            newParentUIModel.items.push(item);
-            // Reference the new parent in the item
-            itemUIModelExtended.parentItem = newParentUIModel;
-        };
-        this.flattenItemUIModel = (parentModel) => (item) => {
-            var _a, _b, _c, _d, _e, _f;
-            this.flattenedTreeModel.set(item.id, {
-                parentItem: parentModel,
-                item: item
+            _ChTreeViewRender_flattenSubModel.set(this, (model) => {
+                const items = model.items;
+                if (!items) {
+                    // Make sure that subtrees don't have an undefined array
+                    if (model.leaf !== true) {
+                        model.items = [];
+                    }
+                    return;
+                }
+                __classPrivateFieldGet(this, _ChTreeViewRender_sortItems, "f").call(this, items);
+                items.forEach(__classPrivateFieldGet(this, _ChTreeViewRender_flattenItemUIModel, "f").call(this, model));
             });
-            // Add the items that have a checkbox in a separate Map
-            if ((_a = item.checkbox) !== null && _a !== void 0 ? _a : this.checkbox) {
-                this.flattenedCheckboxTreeModel.set(item.id, {
+            _ChTreeViewRender_flattenItemUIModel.set(this, (parentModel) => (item) => {
+                var _b, _c, _d, _e, _f;
+                __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").set(item.id, {
                     parentItem: parentModel,
                     item: item
                 });
+                // Add the items that have a checkbox in a separate Map
+                if (__classPrivateFieldGet(this, _ChTreeViewRender_itemHasCheckbox, "f").call(this, item)) {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f").set(item.id, {
+                        parentItem: parentModel,
+                        item: item
+                    });
+                }
+                // Make sure the properties are with their default values to avoid issues
+                // when reusing DOM nodes
+                item.class || (item.class = DEFAULT_CLASS_VALUE);
+                (_b = item.expanded) !== null && _b !== void 0 ? _b : (item.expanded = DEFAULT_EXPANDED_VALUE);
+                (_c = item.indeterminate) !== null && _c !== void 0 ? _c : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
+                (_d = item.lazy) !== null && _d !== void 0 ? _d : (item.lazy = DEFAULT_LAZY_VALUE);
+                (_e = item.order) !== null && _e !== void 0 ? _e : (item.order = DEFAULT_ORDER_VALUE);
+                (_f = item.selected) !== null && _f !== void 0 ? _f : (item.selected = DEFAULT_SELECTED_VALUE);
+                if (item.selected) {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f").add(item.id);
+                }
+                __classPrivateFieldGet(this, _ChTreeViewRender_flattenSubModel, "f").call(this, item);
+            });
+            _ChTreeViewRender_itemHasCheckbox.set(this, (item) => itemHasCheckbox(item, this.checkbox));
+            _ChTreeViewRender_treeHasFilters.set(this, () => treeViewHasFilters(this.filterType, this.filter));
+            _ChTreeViewRender_sortItems.set(this, (items) => {
+                // Ensure that items are sorted
+                if (this.sortItemsCallback) {
+                    this.sortItemsCallback(items);
+                }
+            });
+            _ChTreeViewRender_flattenModel.set(this, () => {
+                __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").clear();
+                __classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f").clear();
+                __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f").clear();
+                __classPrivateFieldSet(this, _ChTreeViewRender_rootNode, { id: ROOT_ID, caption: ROOT_ID, items: this.treeModel }, "f");
+                __classPrivateFieldGet(this, _ChTreeViewRender_flattenSubModel, "f").call(this, __classPrivateFieldGet(this, _ChTreeViewRender_rootNode, "f"));
+                // Re-sync filters
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
+                // The model was updated at runtime, so we need to update the references
+                // Re-sync selected items
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleSelectedItemsChange, "f").call(this);
+                // Re-sync checked items
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleCheckedItemsChange, "f").call(this);
+            });
+            _ChTreeViewRender_filterSubModel.set(this, (item, filterInfo, currentSelectedItems, currentCheckboxItems) => {
+                let aSubItemIsRendered = false;
+                // Check if a subitem is rendered
+                if (item.leaf !== true && item.items != null) {
+                    let lastItemId = undefined;
+                    item.items.forEach(subItem => {
+                        const itemSatisfiesFilter = __classPrivateFieldGet(this, _ChTreeViewRender_filterSubModel, "f").call(this, subItem, filterInfo, currentSelectedItems, currentCheckboxItems);
+                        aSubItemIsRendered || (aSubItemIsRendered = itemSatisfiesFilter);
+                        if (itemSatisfiesFilter) {
+                            lastItemId = subItem.id;
+                        }
+                    });
+                    item.lastItemId = lastItemId;
+                }
+                // The current item is rendered if it satisfies the filter condition or a
+                // subitem exists that needs to be rendered
+                const satisfiesFilter = aSubItemIsRendered || computeFilter(this.filterType, item, filterInfo);
+                item.render = satisfiesFilter; // Update item render
+                // Update selected and checkbox items
+                if (satisfiesFilter && item.id !== ROOT_ID) {
+                    if (item.selected) {
+                        currentSelectedItems.add(item.id);
+                    }
+                    if (__classPrivateFieldGet(this, _ChTreeViewRender_itemHasCheckbox, "f").call(this, item)) {
+                        const itemUIModel = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(item.id);
+                        currentCheckboxItems.set(item.id, itemUIModel);
+                    }
+                }
+                return satisfiesFilter;
+            });
+            _ChTreeViewRender_scheduleCheckedItemsChange.set(this, () => {
+                __classPrivateFieldSet(this, _ChTreeViewRender_checkedChangeScheduled, true, "f");
+            });
+            _ChTreeViewRender_scheduleSelectedItemsChange.set(this, () => {
+                __classPrivateFieldSet(this, _ChTreeViewRender_selectedChangeScheduled, true, "f");
+            });
+            _ChTreeViewRender_updateSelectedItems.set(this, () => {
+                const selectedItemsInfo = __classPrivateFieldGet(this, _ChTreeViewRender_getItemsInfo, "f").call(this, [
+                    ...__classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f").keys()
+                ]);
+                this.selectedItemsChange.emit(selectedItemsInfo);
+            });
+            _ChTreeViewRender_updateCheckedItems.set(this, () => {
+                // New copy of the checked items
+                const allItemsWithCheckbox = new Map(__classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f"));
+                // Update the checked value if not defined
+                allItemsWithCheckbox.forEach(itemUIModel => {
+                    var _b;
+                    var _c;
+                    (_b = (_c = itemUIModel.item).checked) !== null && _b !== void 0 ? _b : (_c.checked = this.checked);
+                });
+                this.checkedItemsChange.emit(allItemsWithCheckbox);
+            });
+            _ChTreeViewRender_scheduleFilterProcessing.set(this, (immediateFilter) => {
+                var _b;
+                __classPrivateFieldSet(this, _ChTreeViewRender_applyFilters, true, "f");
+                if (immediateFilter !== undefined) {
+                    __classPrivateFieldSet(this, _ChTreeViewRender_immediateFilter, (_b = __classPrivateFieldGet(this, _ChTreeViewRender_immediateFilter, "f")) !== null && _b !== void 0 ? _b : immediateFilter, "f");
+                }
+            });
+            _ChTreeViewRender_checkIfThereAreDifferentItemsWithCheckbox.set(this, (newCheckboxItems) => {
+                if (newCheckboxItems.size !== __classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f").size) {
+                    __classPrivateFieldSet(this, _ChTreeViewRender_checkedChangeScheduled, true, "f");
+                }
+                // Check if the items in each Map have the same id
+                else {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f").forEach((_, itemId) => {
+                        // Found a value that don't belong to the checkboxItems with filters,
+                        // schedule checkedItemsChange
+                        if (!newCheckboxItems.has(itemId)) {
+                            // Schedule checkedItemsChange
+                            __classPrivateFieldSet(this, _ChTreeViewRender_checkedChangeScheduled, true, "f");
+                        }
+                    });
+                }
+                // The previous checkbox items will now be the selected items with filter
+                __classPrivateFieldSet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, newCheckboxItems, "f");
+            });
+            _ChTreeViewRender_checkIfThereAreDifferentSelectedItems.set(this, (newSelectedItems) => {
+                if (newSelectedItems.size !== __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f").size) {
+                    __classPrivateFieldSet(this, _ChTreeViewRender_selectedChangeScheduled, true, "f");
+                }
+                // Check if the items in each Set have the same id
+                else {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f").forEach(itemId => {
+                        // Found a value that don't belong to the selectedItems with filters,
+                        // deselect the item
+                        if (!newSelectedItems.has(itemId)) {
+                            __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(itemId).item.selected = false;
+                            // Schedule selectedItemsChange
+                            __classPrivateFieldSet(this, _ChTreeViewRender_selectedChangeScheduled, true, "f");
+                        }
+                    });
+                }
+                // The previous selected items will now be the selected items with filter
+                __classPrivateFieldSet(this, _ChTreeViewRender_selectedItems, newSelectedItems, "f");
+            });
+            _ChTreeViewRender_updateFilters.set(this, () => {
+                if (this.filterType === "none") {
+                    // Check if there are more items with checkbox
+                    const itemsWithCheckbox = new Map();
+                    __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").forEach((itemUIModel, itemId) => {
+                        if (__classPrivateFieldGet(this, _ChTreeViewRender_itemHasCheckbox, "f").call(this, itemUIModel.item)) {
+                            itemsWithCheckbox.set(itemId, itemUIModel);
+                        }
+                    });
+                    __classPrivateFieldGet(this, _ChTreeViewRender_checkIfThereAreDifferentItemsWithCheckbox, "f").call(this, itemsWithCheckbox);
+                    __classPrivateFieldGet(this, _ChTreeViewRender_validateCheckedAndSelectedItems, "f").call(this);
+                    return;
+                }
+                // Remove queued filter processing
+                clearTimeout(__classPrivateFieldGet(this, _ChTreeViewRender_filterTimeout, "f"));
+                const processWithDebounce = this.filterDebounce > 0 &&
+                    (this.filterType === "caption" || this.filterType === "metadata");
+                const filterFunction = () => {
+                    const currentSelectedItems = new Set();
+                    const currentCheckedItems = new Map();
+                    __classPrivateFieldGet(this, _ChTreeViewRender_filterSubModel, "f").call(this, {
+                        id: ROOT_ID,
+                        caption: ROOT_ID,
+                        items: this.treeModel
+                    }, {
+                        defaultCheckbox: this.checkbox,
+                        defaultChecked: this.checked,
+                        filter: this.filter,
+                        filterOptions: this.filterOptions,
+                        filterSet: __classPrivateFieldGet(this, _ChTreeViewRender_filterListAsSet, "f")
+                    }, currentSelectedItems, currentCheckedItems);
+                    // It validates if there are differences between the items with checkbox
+                    // and the selected items. If there are, emit the corresponding updates.
+                    __classPrivateFieldGet(this, _ChTreeViewRender_checkIfThereAreDifferentSelectedItems, "f").call(this, currentSelectedItems);
+                    __classPrivateFieldGet(this, _ChTreeViewRender_checkIfThereAreDifferentItemsWithCheckbox, "f").call(this, currentCheckedItems);
+                    __classPrivateFieldGet(this, _ChTreeViewRender_validateCheckedAndSelectedItems, "f").call(this);
+                };
+                // Check if should filter with debounce
+                if (processWithDebounce && __classPrivateFieldGet(this, _ChTreeViewRender_immediateFilter, "f") !== "immediate") {
+                    __classPrivateFieldSet(this, _ChTreeViewRender_filterTimeout, setTimeout(() => {
+                        __classPrivateFieldSet(this, _ChTreeViewRender_immediateFilter, undefined, "f");
+                        filterFunction();
+                        forceUpdate(this); // After the filter processing is completed, force a re-render
+                    }, this.filterDebounce), "f");
+                }
+                // No debounce
+                else {
+                    __classPrivateFieldSet(this, _ChTreeViewRender_immediateFilter, undefined, "f");
+                    filterFunction();
+                }
+            });
+            _ChTreeViewRender_validateCheckedAndSelectedItems.set(this, () => {
+                if (__classPrivateFieldGet(this, _ChTreeViewRender_checkedChangeScheduled, "f")) {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_updateCheckedItems, "f").call(this);
+                    __classPrivateFieldSet(this, _ChTreeViewRender_checkedChangeScheduled, false, "f");
+                }
+                if (__classPrivateFieldGet(this, _ChTreeViewRender_selectedChangeScheduled, "f")) {
+                    __classPrivateFieldSet(this, _ChTreeViewRender_selectedChangeScheduled, false, "f");
+                    // Update the selected items in the ch-tree-view control
+                    __classPrivateFieldGet(this, _ChTreeViewRender_updateSelectedItems, "f").call(this);
+                }
+            });
+            _ChTreeViewRender_getSelectedItemsCallback.set(this, () => {
+                const selectedItemsInfo = new Map();
+                __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f").forEach(itemId => {
+                    const itemUIModel = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(itemId);
+                    const itemInfo = itemUIModel.item;
+                    selectedItemsInfo.set(itemId, {
+                        id: itemInfo.id,
+                        expanded: itemInfo.expanded,
+                        metadata: itemInfo.metadata,
+                        parentId: itemUIModel.parentItem.id
+                    });
+                });
+                return selectedItemsInfo;
+            });
+            super();
+            this.__registerHost();
+            this.checkedItemsChange = createEvent(this, "checkedItemsChange", 7);
+            this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
+            this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
+            this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
+            this.waitDropProcessing = false;
+            this.checkbox = false;
+            this.checked = false;
+            this.checkDroppableZoneCallback = undefined;
+            this.cssClass = "tree-view";
+            this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
+            this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
+            this.dropItemsCallback = undefined;
+            this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
+            this.expandableButton = "decorative";
+            this.expandOnClick = true;
+            this.filter = undefined;
+            this.filterDebounce = 250;
+            this.filterList = [];
+            this.filterOptions = {};
+            this.filterType = "none";
+            this.gxImageConstructor = undefined;
+            this.gxSettings = undefined;
+            this.lazyLoadTreeItemsCallback = undefined;
+            this.modifyItemCaptionCallback = undefined;
+            this.multiSelection = false;
+            this.renderItem = defaultRenderItem;
+            this.showLines = "none";
+            this.sortItemsCallback = defaultSortItemsCallback;
+            this.toggleCheckboxes = false;
+            this.treeModel = [];
+            this.useGxRender = false;
+        }
+        get el() { return this; }
+        handleFilterChange() {
+            if (this.filterType === "caption" || this.filterType === "metadata") {
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
             }
-            // Make sure the properties are with their default values to avoid issues
-            // when reusing DOM nodes
-            item.class || (item.class = DEFAULT_CLASS_VALUE);
-            (_b = item.expanded) !== null && _b !== void 0 ? _b : (item.expanded = DEFAULT_EXPANDED_VALUE);
-            (_c = item.indeterminate) !== null && _c !== void 0 ? _c : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
-            (_d = item.lazy) !== null && _d !== void 0 ? _d : (item.lazy = DEFAULT_LAZY_VALUE);
-            (_e = item.order) !== null && _e !== void 0 ? _e : (item.order = DEFAULT_ORDER_VALUE);
-            (_f = item.selected) !== null && _f !== void 0 ? _f : (item.selected = DEFAULT_SELECTED_VALUE);
-            if (item.selected) {
-                this.selectedItems.add(item.id);
+        }
+        handleFilterDebounceChange() {
+            if (this.filterType === "caption" || this.filterType === "metadata") {
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
             }
-            this.flattenSubModel(item);
-        };
-        super();
-        this.__registerHost();
-        this.checkedItemsChange = createEvent(this, "checkedItemsChange", 7);
-        this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-        this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
-        this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
-        this.waitDropProcessing = false;
-        this.checkbox = false;
-        this.checked = false;
-        this.checkDroppableZoneCallback = undefined;
-        this.cssClass = "tree-view";
-        this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
-        this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
-        this.dropItemsCallback = undefined;
-        this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
-        this.filter = undefined;
-        this.filterDebounce = 250;
-        this.filterList = [];
-        this.filterOptions = {};
-        this.filterType = "none";
-        this.gxImageConstructor = undefined;
-        this.gxSettings = undefined;
-        this.lazyLoadTreeItemsCallback = undefined;
-        this.modifyItemCaptionCallback = undefined;
-        this.multiSelection = false;
-        this.renderItem = defaultRenderItem;
-        this.showLines = "none";
-        this.sortItemsCallback = defaultSortItemsCallback;
-        this.toggleCheckboxes = false;
-        this.treeModel = [];
-        this.useGxRender = false;
-    }
-    handleFilterChange() {
-        if (this.filterType === "caption" || this.filterType === "metadata") {
-            this.processFilters();
         }
-    }
-    handleFilterDebounceChange() {
-        if (this.filterType === "caption" || this.filterType === "metadata") {
-            this.processFilters();
+        handleFilterListChange() {
+            // Use a Set to efficiently check for ids
+            __classPrivateFieldSet(this, _ChTreeViewRender_filterListAsSet, new Set(this.filterList), "f");
+            if (this.filterType === "list") {
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
+            }
         }
-    }
-    handleFilterListChange() {
-        // Use a Set to efficiently check for ids
-        this.filterListAsSet = new Set(this.filterList);
-        if (this.filterType === "list") {
-            this.processFilters();
+        handleFilterOptionsChange() {
+            __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
         }
-    }
-    handleFilterOptionsChange() {
-        this.processFilters();
-    }
-    handleFilterTypeChange() {
-        this.processFilters();
-    }
-    handleTreeModelChange() {
-        this.flattenModel();
-    }
-    /**
-     * Given the drop accepting, the data transfer info and the external items,
-     * it process the drops of the items in the tree.
-     */
-    async dropItems(acceptDrop, dataTransferInfo, items) {
-        if (!acceptDrop) {
-            return;
-        }
-        const newParentId = dataTransferInfo.newContainer.id;
-        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
-        // Only move the items to the new parent, keeping the state
-        if (dataTransferInfo.dropInTheSameTree) {
-            // Add the UI models to the new container and remove the UI models from
-            // the old containers
-            dataTransferInfo.draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
-            // When the selected items are moved, the tree must remove its internal
-            // state to not have undefined references
-            if (dataTransferInfo.draggingSelectedItems) {
-                await this.treeRef.clearSelectedItemsInfo();
+        handleFilterTypeChange() {
+            __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
+        }
+        handleMultiSelectionChange(newMultiSelection) {
+            // MultiSelection is disabled. We must select the last updated item
+            if (!newMultiSelection) {
+                __classPrivateFieldGet(this, _ChTreeViewRender_removeAllSelectedItemsExceptForTheLast, "f").call(this, __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f"));
             }
         }
-        // Add the new items
-        else {
-            if (items == null) {
+        handleTreeModelChange() {
+            __classPrivateFieldGet(this, _ChTreeViewRender_flattenModel, "f").call(this);
+        }
+        /**
+         * Given the drop accepting, the data transfer info and the external items,
+         * it process the drops of the items in the tree.
+         */
+        async dropItems(acceptDrop, dataTransferInfo, items) {
+            if (!acceptDrop) {
                 return;
             }
-            // Add new items to the parent
-            newParentUIModel.items.push(...items);
-            // Flatten the new UI models
-            items.forEach(this.flattenItemUIModel(newParentUIModel));
-        }
-        this.sortItems(newParentUIModel.items);
-        // Open the item to visualize the new subitems
-        newParentUIModel.expanded = true;
-        // Re-sync checked items
-        this.emitCheckedItemsChange();
-        // Update filters
-        this.processFilters();
-        // Force re-render
-        forceUpdate(this);
-    }
-    /**
-     * Given a list of ids, it returns an array of the items that exists in the
-     * given list.
-     */
-    async getItemsInfo(itemsId) {
-        return this._getItemsInfo(itemsId);
-    }
-    _getItemsInfo(itemsId) {
-        const treeViewItemsInfo = [];
-        itemsId.forEach(itemId => {
-            const itemUIModel = this.flattenedTreeModel.get(itemId);
-            if (itemUIModel) {
-                treeViewItemsInfo.push(itemUIModel);
+            const newParentId = dataTransferInfo.newContainer.id;
+            const newParentUIModel = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(newParentId).item;
+            // Only move the items to the new parent, keeping the state
+            if (dataTransferInfo.dropInTheSameTree) {
+                // Add the UI models to the new container and remove the UI models from
+                // the old containers
+                dataTransferInfo.draggedItems.forEach(__classPrivateFieldGet(this, _ChTreeViewRender_moveItemToNewParent, "f").call(this, newParentUIModel));
+                // When the selected items are moved, the tree must update its internal
+                // state to not have undefined references
+                if (dataTransferInfo.draggingSelectedItems) {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_scheduleSelectedItemsChange, "f").call(this);
+                }
             }
-        });
-        return treeViewItemsInfo;
-    }
-    /**
-     * Given an item id, an array of items to add, the download status and the
-     * lazy state, updates the item's UI Model.
-     */
-    async loadLazyContent(itemId, items, downloading = false, lazy = false) {
-        const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
-        // Establish that the content was lazy loaded
-        itemToLazyLoadContent.downloading = downloading;
-        itemToLazyLoadContent.lazy = lazy;
-        // Check if there is items to add
-        if (items == null) {
-            return;
-        }
-        // @todo What happens in the server when dropping items on a lazy node?
-        itemToLazyLoadContent.items = items;
-        this.sortItems(itemToLazyLoadContent.items);
-        this.flattenSubModel(itemToLazyLoadContent);
-        // Re-sync checked items
-        this.emitCheckedItemsChange();
-        // Update filters
-        this.processFilters();
-        // Force re-render
-        forceUpdate(this);
-    }
-    /**
-     * Given a list of ids, removes the items and their children in the tree.
-     */
-    async removeItems(items) {
-        const removeItemsResult = removeTreeViewItems(items, this.flattenedTreeModel, this.flattenedCheckboxTreeModel, this.selectedItems);
-        if (!treeViewHasFilters(this.filterType, this.filter)) {
-            // Update selected items
-            if (removeItemsResult.atLeastOneSelected) {
-                this.emitSelectedItemsChange([...this.selectedItems.keys()]);
+            // Add the new items
+            else {
+                if (items == null) {
+                    return;
+                }
+                // Add new items to the parent
+                newParentUIModel.items.push(...items);
+                // Flatten the new UI models
+                items.forEach(__classPrivateFieldGet(this, _ChTreeViewRender_flattenItemUIModel, "f").call(this, newParentUIModel));
             }
+            __classPrivateFieldGet(this, _ChTreeViewRender_sortItems, "f").call(this, newParentUIModel.items);
+            // Open the item to visualize the new subitems
+            newParentUIModel.expanded = true;
             // Re-sync checked items
-            if (removeItemsResult.atLeastOneCheckbox) {
-                this.emitCheckedItemsChange();
-            }
-        }
-        // Force re-render
-        if (removeItemsResult.atLeastOneElement) {
+            __classPrivateFieldGet(this, _ChTreeViewRender_scheduleCheckedItemsChange, "f").call(this);
+            // Update filters
+            __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
+            // Force re-render
             forceUpdate(this);
+        }
+        /**
+         * Given a list of ids, it returns an array of the items that exists in the
+         * given list.
+         */
+        async getItemsInfo(itemsId) {
+            return __classPrivateFieldGet(this, _ChTreeViewRender_getItemsInfo, "f").call(this, itemsId);
+        }
+        /**
+         * Given an item id, an array of items to add, the download status and the
+         * lazy state, updates the item's UI Model.
+         */
+        async loadLazyContent(itemId, items, downloading = false, lazy = false) {
+            const itemToLazyLoadContent = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(itemId).item;
+            // Establish that the content was lazy loaded
+            itemToLazyLoadContent.downloading = downloading;
+            itemToLazyLoadContent.lazy = lazy;
+            // Check if there is items to add
+            if (items == null) {
+                return;
+            }
+            // @todo What happens in the server when dropping items on a lazy node?
+            itemToLazyLoadContent.items = items;
+            __classPrivateFieldGet(this, _ChTreeViewRender_sortItems, "f").call(this, itemToLazyLoadContent.items);
+            __classPrivateFieldGet(this, _ChTreeViewRender_flattenSubModel, "f").call(this, itemToLazyLoadContent);
+            // Re-sync checked items
+            __classPrivateFieldGet(this, _ChTreeViewRender_scheduleCheckedItemsChange, "f").call(this);
             // Update filters
-            this.processFilters("immediate");
+            __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
+            // Force re-render
+            forceUpdate(this);
         }
-    }
-    /**
-     * Given an item id and the additional properties to update before and after
-     * reload, it reloads the items of the `itemId` node by using the
-     * `lazyLoadTreeItemsCallback` property.
-     */
-    async reloadItems(itemId, beforeProperties, afterProperties) {
-        reloadItems(this, itemId, this.flattenedTreeModel, this.lazyLoadTreeItemsCallback, (itemId, items) => this.loadLazyContent(itemId, items), (items) => this.removeItems(items), beforeProperties, afterProperties);
-    }
-    /**
-     * Given the path of the item (represent by a sorted array containing all ids
-     * from the root to the item) and the additional properties to update after,
-     * it displays and scrolls into the item view.
-     * The path can also be a string representing the id of the item to scroll
-     * into.
-     */
-    async scrollIntoVisible(path, afterProperties) {
-        const hasOnlyTheItemId = typeof path === "string";
-        const success = await (hasOnlyTheItemId
-            ? scrollIntoVisibleId(path, this.flattenedTreeModel)
-            : scrollIntoVisiblePath(path, this.flattenedTreeModel, this.rootNode, this.lazyLoadTreeItemsCallback));
-        if (!success) {
-            return;
-        }
-        const itemId = hasOnlyTheItemId ? path : path[path.length - 1];
-        if (afterProperties) {
-            updateItemProperty(itemId, afterProperties, this.flattenedTreeModel);
+        /**
+         * Given a list of ids, removes the items and their children in the tree.
+         */
+        async removeItems(items) {
+            const removeItemsResult = removeTreeViewItems(items, __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f"), __classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f"), __classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f"));
+            if (!__classPrivateFieldGet(this, _ChTreeViewRender_treeHasFilters, "f").call(this)) {
+                // Update selected items
+                if (removeItemsResult.atLeastOneSelected) {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_updateSelectedItems, "f").call(this);
+                }
+                // Re-sync checked items
+                if (removeItemsResult.atLeastOneCheckbox) {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_scheduleCheckedItemsChange, "f").call(this);
+                }
+            }
+            // Force re-render
+            if (removeItemsResult.atLeastOneElement) {
+                forceUpdate(this);
+                // Update filters
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this, "immediate");
+            }
         }
-        forceUpdate(this);
-        // @todo For some reason, when the model is created using the "big model" option,
-        // this implementation does not work when only the UI Model is updated. So, to
-        // expand the items, we have to delegate the responsibility to the tree-view
-        this.treeRef.scrollIntoVisible(itemId);
-    }
-    /**
-     * This method is used to toggle a tree item by the tree item id/ids.
-     *
-     * @param treeItemIds An array id the tree items to be toggled.
-     * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
-     * @returns The modified items after the method was called.
-     */
-    async toggleItems(treeItemIds, expand) {
-        if (!treeItemIds) {
-            return [];
-        }
-        const modifiedTreeItems = [];
-        treeItemIds.forEach(treeItemId => {
-            const itemInfo = this.flattenedTreeModel.get(treeItemId).item;
-            if (itemInfo) {
-                itemInfo.expanded = expand !== null && expand !== void 0 ? expand : !itemInfo.expanded;
-                modifiedTreeItems.push({
-                    id: itemInfo.id,
-                    expanded: itemInfo.expanded
-                });
+        /**
+         * Given an item id and the additional properties to update before and after
+         * reload, it reloads the items of the `itemId` node by using the
+         * `lazyLoadTreeItemsCallback` property.
+         */
+        async reloadItems(itemId, beforeProperties, afterProperties) {
+            reloadItems(this.el, itemId, __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f"), this.lazyLoadTreeItemsCallback, (itemId, items) => this.loadLazyContent(itemId, items), (items) => this.removeItems(items), beforeProperties, afterProperties);
+        }
+        /**
+         * Given the path of the item (represent by a sorted array containing all ids
+         * from the root to the item) and the additional properties to update after,
+         * it displays and scrolls into the item view.
+         * The path can also be a string representing the id of the item to scroll
+         * into.
+         */
+        async scrollIntoVisible(path, afterProperties) {
+            const hasOnlyTheItemId = typeof path === "string";
+            const success = await (hasOnlyTheItemId
+                ? scrollIntoVisibleId(path, __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f"))
+                : scrollIntoVisiblePath(path, __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f"), __classPrivateFieldGet(this, _ChTreeViewRender_rootNode, "f"), this.lazyLoadTreeItemsCallback));
+            if (!success) {
+                return;
             }
-        });
-        // Force re-render
-        forceUpdate(this);
-        return modifiedTreeItems;
-    }
-    /**
-     * Given a subset of item's properties, it updates all item UI models.
-     */
-    async updateAllItemsProperties(properties) {
-        [...this.flattenedTreeModel.values()].forEach(itemUIModel => {
-            if (properties.expanded != null) {
-                itemUIModel.item.expanded = properties.expanded;
+            const itemId = hasOnlyTheItemId ? path : path[path.length - 1];
+            if (afterProperties) {
+                this.updateItemsProperties([itemId], afterProperties);
             }
+            forceUpdate(this);
+            // @todo For some reason, when the model is created using the "big model" option,
+            // this implementation does not work when only the UI Model is updated. So, to
+            // expand the items, we have to delegate the responsibility to the tree-view
+            __classPrivateFieldGet(this, _ChTreeViewRender_treeRef, "f").scrollIntoVisible(itemId);
+        }
+        /**
+         * This method is used to toggle a tree item by the tree item id/ids.
+         *
+         * @param treeItemIds An array id the tree items to be toggled.
+         * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
+         * @returns The modified items after the method was called.
+         */
+        async toggleItems(treeItemIds, expand) {
+            if (!treeItemIds) {
+                return [];
+            }
+            const modifiedTreeItems = [];
+            treeItemIds.forEach(treeItemId => {
+                const itemInfo = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(treeItemId).item;
+                if (itemInfo) {
+                    itemInfo.expanded = expand !== null && expand !== void 0 ? expand : !itemInfo.expanded;
+                    modifiedTreeItems.push({
+                        id: itemInfo.id,
+                        expanded: itemInfo.expanded
+                    });
+                }
+            });
+            // Force re-render
+            forceUpdate(this);
+            return modifiedTreeItems;
+        }
+        /**
+         * Given a subset of item's properties, it updates all item UI models.
+         */
+        async updateAllItemsProperties(properties) {
+            [...__classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").values()].forEach(itemUIModel => {
+                if (properties.expanded != null) {
+                    itemUIModel.item.expanded = properties.expanded;
+                }
+                if (properties.checked != null) {
+                    itemUIModel.item.checked = properties.checked;
+                    itemUIModel.item.indeterminate = false;
+                }
+            });
+            // Update filters
             if (properties.checked != null) {
-                itemUIModel.item.checked = properties.checked;
-                itemUIModel.item.indeterminate = false;
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
             }
-        });
-        // Update filters
-        if (properties.checked != null) {
-            this.processFilters();
+            forceUpdate(this);
         }
-        forceUpdate(this);
-    }
-    /**
-     * Given a item list and the properties to update, it updates the properties
-     * of the items in the list.
-     */
-    async updateItemsProperties(items, properties) {
-        items.forEach(itemId => {
-            updateItemProperty(itemId, properties, this.flattenedTreeModel);
-        });
-        // Update filters
-        this.processFilters();
-        forceUpdate(this);
-    }
-    /**
-     * Update the information about the valid droppable zones.
-     * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
-     * @param newContainerId ID of the container where the drag is trying to be made.
-     * @param draggedItems Information about the dragged items.
-     * @param validDrop Current state of the droppable zone.
-     */
-    async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
-        this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
-    }
-    updateCheckboxValue(event) {
-        event.stopPropagation();
-        const detail = event.detail;
-        const treeItemId = detail.id;
-        const itemUIModel = this.flattenedCheckboxTreeModel.get(treeItemId);
-        // In some cases, when the `treeModel` and `checked` properties are updated
-        // outside of the tree control, some events are fired with undefined references
-        if (!itemUIModel) {
-            return;
-        }
-        const itemInfo = itemUIModel.item;
-        itemInfo.checked = detail.checked;
-        itemInfo.indeterminate = detail.indeterminate;
-        this.emitCheckedItemsChange();
-        // Update filters
-        if (this.filterType === "checked" || this.filterType === "unchecked") {
-            this.processFilters();
-        }
-        // Force re-render
-        forceUpdate(this);
-    }
-    loadLazyChildrenHandler(event) {
-        if (!this.lazyLoadTreeItemsCallback) {
-            return;
-        }
-        event.stopPropagation();
-        const treeItemId = event.detail;
-        const promise = this.lazyLoadTreeItemsCallback(treeItemId);
-        event.target.downloading = true;
-        promise.then(result => {
-            this.loadLazyContent(treeItemId, result);
-        });
-    }
-    handleCaptionModification(event) {
-        if (!this.modifyItemCaptionCallback) {
-            return;
-        }
-        event.stopPropagation();
-        const itemRef = event.target;
-        const itemId = event.detail.id;
-        const itemUIModel = this.flattenedTreeModel.get(itemId);
-        const itemInfo = itemUIModel.item;
-        const newCaption = event.detail.caption;
-        const oldCaption = itemInfo.caption;
-        // Optimistic UI: Update the caption in the UI Model before the change is
-        // completed in the server
-        itemInfo.caption = newCaption;
-        // Due to performance reasons, we don't make a shallow copy of the
-        // treeModel to force a re-render
-        itemRef.caption = newCaption;
-        const promise = this.modifyItemCaptionCallback(itemId, newCaption);
-        promise.then(status => {
-            if (status.success) {
-                this.sortItems(itemUIModel.parentItem.items);
-                // Update filters
-                this.processFilters();
-                // Force re-render
-                forceUpdate(this);
+        /**
+         * Given a item list and the properties to update, it updates the properties
+         * of the items in the list.
+         */
+        async updateItemsProperties(items, properties) {
+            // Set to check if there are new selected items
+            const newSelectedItems = new Set(__classPrivateFieldGet(this, _ChTreeViewRender_selectedItems, "f"));
+            // Map to check if there are new items with checkbox
+            const newCheckboxItems = new Map(__classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f"));
+            items.forEach(itemId => {
+                updateItemProperty(itemId, properties, __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f"), newSelectedItems, newCheckboxItems, this.checkbox);
+            });
+            // MultiSelection is disabled. We must select the last updated item
+            if (!this.multiSelection) {
+                __classPrivateFieldGet(this, _ChTreeViewRender_removeAllSelectedItemsExceptForTheLast, "f").call(this, newSelectedItems);
             }
-            else {
-                itemRef.caption = oldCaption;
-                itemInfo.caption = oldCaption;
-                // Do something with the error message
+            // Update filters if necessary
+            if (__classPrivateFieldGet(this, _ChTreeViewRender_treeHasFilters, "f").call(this)) {
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
             }
-        });
-    }
-    handleOpenReference(event) {
-        event.stopPropagation();
-        this.itemOpenReference.emit(event.detail);
-    }
-    flattenSubModel(model) {
-        const items = model.items;
-        if (!items) {
-            // Make sure that subtrees don't have an undefined array
-            if (model.leaf !== true) {
-                model.items = [];
+            else {
+                __classPrivateFieldGet(this, _ChTreeViewRender_checkIfThereAreDifferentItemsWithCheckbox, "f").call(this, newCheckboxItems);
+                __classPrivateFieldGet(this, _ChTreeViewRender_checkIfThereAreDifferentSelectedItems, "f").call(this, newSelectedItems);
             }
-            return;
+            forceUpdate(this);
         }
-        this.sortItems(items);
-        items.forEach(this.flattenItemUIModel(model));
-    }
-    sortItems(items) {
-        // Ensure that items are sorted
-        if (this.sortItemsCallback) {
-            this.sortItemsCallback(items);
+        /**
+         * Update the information about the valid droppable zones.
+         * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+         * @param newContainerId ID of the container where the drag is trying to be made.
+         * @param draggedItems Information about the dragged items.
+         * @param validDrop Current state of the droppable zone.
+         */
+        async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+            __classPrivateFieldGet(this, _ChTreeViewRender_treeRef, "f").updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
         }
-    }
-    flattenModel() {
-        this.flattenedTreeModel.clear();
-        this.flattenedCheckboxTreeModel.clear();
-        this.selectedItems.clear();
-        // The model was updated at runtime, so we need to clear the references
-        if (this.treeRef) {
-            this.treeRef.clearSelectedItemsInfo();
-        }
-        this.rootNode = { id: null, caption: null, items: this.treeModel };
-        this.flattenSubModel(this.rootNode);
-        // Re-sync checked items
-        this.emitCheckedItemsChange();
-    }
-    filterSubModel(item, filterInfo) {
-        var _a;
-        let aSubItemIsRendered = false;
-        // Check if a subitem is rendered
-        if (item.leaf !== true && item.items != null) {
-            let lastItemId = undefined;
-            item.items.forEach(subItem => {
-                const itemSatisfiesFilter = this.filterSubModel(subItem, filterInfo);
-                aSubItemIsRendered || (aSubItemIsRendered = itemSatisfiesFilter);
-                if (itemSatisfiesFilter) {
-                    lastItemId = subItem.id;
-                }
-            });
-            item.lastItemId = lastItemId;
-        }
-        // The current item is rendered if it satisfies the filter condition or a
-        // subitem exists that needs to be rendered
-        const satisfiesFilter = aSubItemIsRendered || computeFilter(this.filterType, item, filterInfo);
-        item.render = satisfiesFilter; // Update item render
-        // Update selected and checkbox items
-        if (satisfiesFilter) {
-            if (item.selected) {
-                this.selectedItemsFilter.add(item.id);
+        updateCheckboxValue(event) {
+            event.stopPropagation();
+            const detail = event.detail;
+            const treeItemId = detail.id;
+            const itemUIModel = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedCheckboxTreeModel, "f").get(treeItemId);
+            // In some cases, when the `treeModel` and `checked` properties are updated
+            // outside of the tree control, some events are fired with undefined references
+            if (!itemUIModel) {
+                return;
             }
-            if ((_a = item.checkbox) !== null && _a !== void 0 ? _a : this.checkbox) {
-                const itemUIModel = this.flattenedCheckboxTreeModel.get(item.id);
-                this.flattenedCheckboxTreeModelFilter.set(item.id, itemUIModel);
+            const itemInfo = itemUIModel.item;
+            itemInfo.checked = detail.checked;
+            itemInfo.indeterminate = detail.indeterminate;
+            __classPrivateFieldGet(this, _ChTreeViewRender_scheduleCheckedItemsChange, "f").call(this);
+            // Update filters
+            if (this.filterType === "checked" || this.filterType === "unchecked") {
+                __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
             }
+            // Force re-render
+            forceUpdate(this);
         }
-        return satisfiesFilter;
-    }
-    emitCheckedItemsChange() {
-        this.emitCheckedChange = true;
-    }
-    emitSelectedItemsChange(selectedItems) {
-        const selectedItemsInfo = this._getItemsInfo(selectedItems);
-        this.selectedItemsChange.emit(selectedItemsInfo);
-    }
-    updateCheckedItems() {
-        const checkedItemsMap = treeViewHasFilters(this.filterType, this.filter)
-            ? this.flattenedCheckboxTreeModelFilter
-            : this.flattenedCheckboxTreeModel;
-        // New copy of the checked items
-        const allItemsWithCheckbox = new Map(checkedItemsMap);
-        // Update the checked value if not defined
-        allItemsWithCheckbox.forEach(itemUIModel => {
-            var _a;
-            var _b;
-            (_a = (_b = itemUIModel.item).checked) !== null && _a !== void 0 ? _a : (_b.checked = this.checked);
-        });
-        this.checkedItemsChange.emit(allItemsWithCheckbox);
-    }
-    processFilters(immediateFilter) {
-        var _a;
-        this.applyFilters = true;
-        if (immediateFilter !== undefined) {
-            (_a = this.immediateFilter) !== null && _a !== void 0 ? _a : (this.immediateFilter = immediateFilter);
+        loadLazyChildrenHandler(event) {
+            if (!this.lazyLoadTreeItemsCallback) {
+                return;
+            }
+            event.stopPropagation();
+            const treeItemId = event.detail;
+            const promise = this.lazyLoadTreeItemsCallback(treeItemId);
+            event.target.downloading = true;
+            promise.then(result => {
+                this.loadLazyContent(treeItemId, result);
+            });
         }
-    }
-    updateFilters() {
-        if (this.filterType === "none") {
-            // Remove memory allocation
-            this.flattenedCheckboxTreeModelFilter = undefined;
-            this.selectedItemsFilter = undefined;
-            return;
-        }
-        // Remove queued filter processing
-        clearTimeout(this.filterTimeout);
-        const processWithDebounce = this.filterDebounce > 0 &&
-            (this.filterType === "caption" || this.filterType === "metadata");
-        const filterFunction = () => {
-            // Allocate Map and Set
-            this.flattenedCheckboxTreeModelFilter = new Map();
-            this.selectedItemsFilter = new Set();
-            this.filterSubModel({
-                id: null,
-                caption: null,
-                items: this.treeModel
-            }, {
-                defaultCheckbox: this.checkbox,
-                defaultChecked: this.checked,
-                filter: this.filter,
-                filterOptions: this.filterOptions,
-                filterSet: this.filterListAsSet
+        handleCaptionModification(event) {
+            if (!this.modifyItemCaptionCallback) {
+                return;
+            }
+            event.stopPropagation();
+            const itemRef = event.target;
+            const itemId = event.detail.id;
+            const itemUIModel = __classPrivateFieldGet(this, _ChTreeViewRender_flattenedTreeModel, "f").get(itemId);
+            const itemInfo = itemUIModel.item;
+            const newCaption = event.detail.caption;
+            const oldCaption = itemInfo.caption;
+            // Optimistic UI: Update the caption in the UI Model before the change is
+            // completed in the server
+            itemInfo.caption = newCaption;
+            // Due to performance reasons, we don't make a shallow copy of the
+            // treeModel to force a re-render
+            itemRef.caption = newCaption;
+            const promise = this.modifyItemCaptionCallback(itemId, newCaption);
+            promise.then(status => {
+                if (status.success) {
+                    __classPrivateFieldGet(this, _ChTreeViewRender_sortItems, "f").call(this, itemUIModel.parentItem.items);
+                    // Update filters
+                    __classPrivateFieldGet(this, _ChTreeViewRender_scheduleFilterProcessing, "f").call(this);
+                    // Force re-render
+                    forceUpdate(this);
+                }
+                else {
+                    itemRef.caption = oldCaption;
+                    itemInfo.caption = oldCaption;
+                    // Do something with the error message
+                }
             });
-            // Emit that selected and checked items have changed, regardless of
-            // whether is true or not
-            // TODO: Check with the last filter if we must emit the event
-            this.updateCheckedItems();
-            this.emitSelectedItemsChange([...this.selectedItemsFilter.keys()]);
-        };
-        // Check if should filter with debounce
-        if (processWithDebounce && this.immediateFilter !== "immediate") {
-            this.filterTimeout = setTimeout(() => {
-                this.immediateFilter = undefined;
-                filterFunction();
-                forceUpdate(this); // After the filter processing is completed, force a re-render
-            }, this.filterDebounce);
-        }
-        // No debounce
-        else {
-            this.immediateFilter = undefined;
-            filterFunction();
         }
-    }
-    componentWillLoad() {
-        if (this.useGxRender) {
-            this.renderItem = GXRenderItem;
+        handleOpenReference(event) {
+            event.stopPropagation();
+            this.itemOpenReference.emit(event.detail);
         }
-        this.flattenModel();
-        this.updateCheckedItems();
-        this.updateFilters();
-    }
-    componentWillUpdate() {
-        if (this.emitCheckedChange) {
-            this.updateCheckedItems();
-            this.emitCheckedChange = false;
+        componentWillLoad() {
+            if (this.useGxRender) {
+                this.renderItem = GXRenderItem;
+            }
+            __classPrivateFieldGet(this, _ChTreeViewRender_flattenModel, "f").call(this);
         }
-        if (this.applyFilters) {
-            this.updateFilters();
-            this.applyFilters = false;
+        componentWillRender() {
+            if (!__classPrivateFieldGet(this, _ChTreeViewRender_selectedChangeScheduled, "f") &&
+                !__classPrivateFieldGet(this, _ChTreeViewRender_checkedChangeScheduled, "f") &&
+                !__classPrivateFieldGet(this, _ChTreeViewRender_applyFilters, "f")) {
+                return;
+            }
+            // If the filters must be applied, we must let the filters decided which
+            // are the selected and checked items
+            if (__classPrivateFieldGet(this, _ChTreeViewRender_applyFilters, "f")) {
+                __classPrivateFieldGet(this, _ChTreeViewRender_updateFilters, "f").call(this);
+                __classPrivateFieldSet(this, _ChTreeViewRender_applyFilters, false, "f");
+                return;
+            }
+            __classPrivateFieldGet(this, _ChTreeViewRender_validateCheckedAndSelectedItems, "f").call(this);
         }
-    }
-    render() {
-        return (h("ch-tree-view", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((itemModel, index) => this.renderItem(itemModel, this, treeViewHasFilters(this.filterType, this.filter), this.showLines !== "none" && index === this.treeModel.length - 1, 0))));
-    }
-    static get watchers() { return {
-        "filter": ["handleFilterChange"],
-        "filterDebounce": ["handleFilterDebounceChange"],
-        "filterList": ["handleFilterListChange"],
-        "filterOptions": ["handleFilterOptionsChange"],
-        "filterType": ["handleFilterTypeChange"],
-        "treeModel": ["handleTreeModelChange"]
-    }; }
-    static get style() { return treeViewRenderCss; }
-}, [0, "ch-tree-view-render", {
+        render() {
+            return (h("ch-tree-view", { class: this.cssClass || null, multiSelection: this.multiSelection, selectedItemsCallback: __classPrivateFieldGet(this, _ChTreeViewRender_getSelectedItemsCallback, "f"), waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: __classPrivateFieldGet(this, _ChTreeViewRender_handleDroppableZoneEnter, "f"), onExpandedItemChange: __classPrivateFieldGet(this, _ChTreeViewRender_handleExpandedItemChange, "f"), onItemContextmenu: __classPrivateFieldGet(this, _ChTreeViewRender_handleItemContextmenu, "f"), onItemsDropped: __classPrivateFieldGet(this, _ChTreeViewRender_handleItemsDropped, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _ChTreeViewRender_handleSelectedItemsChange, "f"), ref: el => (__classPrivateFieldSet(this, _ChTreeViewRender_treeRef, el, "f")) }, this.treeModel.map((itemModel, index) => this.renderItem(itemModel, this, __classPrivateFieldGet(this, _ChTreeViewRender_treeHasFilters, "f").call(this), this.showLines !== "none" && index === this.treeModel.length - 1, 0))));
+        }
+        static get watchers() { return {
+            "filter": ["handleFilterChange"],
+            "filterDebounce": ["handleFilterDebounceChange"],
+            "filterList": ["handleFilterListChange"],
+            "filterOptions": ["handleFilterOptionsChange"],
+            "filterType": ["handleFilterTypeChange"],
+            "multiSelection": ["handleMultiSelectionChange"],
+            "treeModel": ["handleTreeModelChange"]
+        }; }
+        static get style() { return treeViewRenderCss; }
+    },
+    _ChTreeViewRender_flattenedTreeModel = new WeakMap(),
+    _ChTreeViewRender_flattenedCheckboxTreeModel = new WeakMap(),
+    _ChTreeViewRender_selectedItems = new WeakMap(),
+    _ChTreeViewRender_selectedChangeScheduled = new WeakMap(),
+    _ChTreeViewRender_checkedChangeScheduled = new WeakMap(),
+    _ChTreeViewRender_rootNode = new WeakMap(),
+    _ChTreeViewRender_applyFilters = new WeakMap(),
+    _ChTreeViewRender_immediateFilter = new WeakMap(),
+    _ChTreeViewRender_filterTimeout = new WeakMap(),
+    _ChTreeViewRender_filterListAsSet = new WeakMap(),
+    _ChTreeViewRender_treeRef = new WeakMap(),
+    _ChTreeViewRender_getItemsInfo = new WeakMap(),
+    _ChTreeViewRender_handleDroppableZoneEnter = new WeakMap(),
+    _ChTreeViewRender_handleSelectedItemsChange = new WeakMap(),
+    _ChTreeViewRender_handleExpandedItemChange = new WeakMap(),
+    _ChTreeViewRender_handleItemContextmenu = new WeakMap(),
+    _ChTreeViewRender_handleItemsDropped = new WeakMap(),
+    _ChTreeViewRender_removeAllSelectedItemsExceptForTheLast = new WeakMap(),
+    _ChTreeViewRender_moveItemToNewParent = new WeakMap(),
+    _ChTreeViewRender_flattenSubModel = new WeakMap(),
+    _ChTreeViewRender_flattenItemUIModel = new WeakMap(),
+    _ChTreeViewRender_itemHasCheckbox = new WeakMap(),
+    _ChTreeViewRender_treeHasFilters = new WeakMap(),
+    _ChTreeViewRender_sortItems = new WeakMap(),
+    _ChTreeViewRender_flattenModel = new WeakMap(),
+    _ChTreeViewRender_filterSubModel = new WeakMap(),
+    _ChTreeViewRender_scheduleCheckedItemsChange = new WeakMap(),
+    _ChTreeViewRender_scheduleSelectedItemsChange = new WeakMap(),
+    _ChTreeViewRender_updateSelectedItems = new WeakMap(),
+    _ChTreeViewRender_updateCheckedItems = new WeakMap(),
+    _ChTreeViewRender_scheduleFilterProcessing = new WeakMap(),
+    _ChTreeViewRender_checkIfThereAreDifferentItemsWithCheckbox = new WeakMap(),
+    _ChTreeViewRender_checkIfThereAreDifferentSelectedItems = new WeakMap(),
+    _ChTreeViewRender_updateFilters = new WeakMap(),
+    _ChTreeViewRender_validateCheckedAndSelectedItems = new WeakMap(),
+    _ChTreeViewRender_getSelectedItemsCallback = new WeakMap(),
+    _a), [0, "ch-tree-view-render", {
         "checkbox": [4],
         "checked": [4],
         "checkDroppableZoneCallback": [16],
@@ -883,6 +1066,8 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class ChTreeViewRender
         "dropDisabled": [4, "drop-disabled"],
         "dropItemsCallback": [16],
         "editableItems": [4, "editable-items"],
+        "expandableButton": [1, "expandable-button"],
+        "expandOnClick": [4, "expand-on-click"],
         "filter": [1],
         "filterDebounce": [2, "filter-debounce"],
         "filterList": [16],
@@ -916,6 +1101,7 @@ const ChTreeViewRender = /*@__PURE__*/ proxyCustomElement(class ChTreeViewRender
         "filterList": ["handleFilterListChange"],
         "filterOptions": ["handleFilterOptionsChange"],
         "filterType": ["handleFilterTypeChange"],
+        "multiSelection": ["handleMultiSelectionChange"],
         "treeModel": ["handleTreeModelChange"]
     }]);
 function defineCustomElement() {