@genexus/genexus-ide-ui 0.0.63 → 0.0.65

package/dist/esm/{ch-checkbox_4.entry.js → ch-checkbox_3.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask, f as forceUpdate } from './index-0da01575.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask } from './index-0aa3977d.js';
 import { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
 import { f as focusComposedPath, m as mouseEventModifierKey } from './helpers-1ecd5e26.js';
 
@@ -563,9 +563,10 @@ const ChTreeView = class {
 };
 ChTreeView.style = treeViewCss;
 
-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{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative;content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+const 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;overflow:hidden}.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 resetDragImage = new Image();
+const DISTANCE_TO_CHECKBOX_CUSTOM_VAR = "--ch-tree-view-item-distance-to-checkbox";
 const INITIAL_LEVEL = 0;
 // Selectors
 const TREE_ITEM_TAG_NAME = "ch-tree-view-item";
@@ -802,10 +803,11 @@ const ChTreeViewItem = class {
       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: this.indeterminate
+        indeterminate: false
       });
     };
     this.renderImg = (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
@@ -843,15 +845,7 @@ const ChTreeViewItem = class {
     const treeItems = this.getDirectTreeItems();
     treeItems.forEach(treeItem => {
       if (treeItem.checked !== newValue || treeItem.indeterminate !== false) {
-        treeItem.checked = newValue;
-        treeItem.indeterminate = false;
-        // Emit the event to sync with the UI model, even if the item does not
-        // have toggleCheckboxes property
-        this.checkboxToggleChange.emit({
-          id: treeItem.id,
-          checked: newValue,
-          indeterminate: false
-        });
+        treeItem.updateChecked(newValue, false);
       }
     });
   }
@@ -896,22 +890,26 @@ const ChTreeViewItem = class {
   }
   updateCheckboxValue(event) {
     // No need to update the checkbox value based on the children checkbox
-    if (!this.toggleCheckboxes) {
+    if (!this.toggleCheckboxes || this.el === event.target) {
       return;
     }
     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
-    this.checkboxToggleChange.emit({
-      id: this.el.id,
-      checked: updatedCheck,
-      indeterminate: !allItemsHaveTheSameCheckedValue
-    });
+    if (eventMustBeEmitted) {
+      this.checkboxToggleChange.emit({
+        id: this.el.id,
+        checked: updatedCheck,
+        indeterminate: !allItemsHaveTheSameCheckedValue
+      });
+    }
   }
   /**
    * Focus the next item in the tree. If the control is expanded, it focuses
@@ -983,7 +981,7 @@ const ChTreeViewItem = class {
   }
   /**
    * Focus the last item in its subtree. If the control is not expanded, it
-   * focus the control
+   * focus the control.
    */
   async focusLastItem(ctrlKeyPressed) {
     // Focus the last subitem if expanded and not lazy loading
@@ -1005,7 +1003,7 @@ const ChTreeViewItem = class {
     this.setFocus(ctrlKeyPressed);
   }
   /**
-   * Set focus in the control
+   * Set focus in the control.
    */
   async setFocus(ctrlKeyPressed) {
     this.headerRef.focus();
@@ -1014,6 +1012,20 @@ const ChTreeViewItem = class {
       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));
   }
@@ -1021,7 +1033,7 @@ const ChTreeViewItem = class {
     this.watcher = new ResizeObserver(() => {
       const distanceToCheckbox = this.el.getBoundingClientRect().height -
         this.headerRef.getBoundingClientRect().height / 2;
-      this.el.style.setProperty("--distance-to-checkbox", distanceToCheckbox + "px");
+      this.el.style.setProperty(DISTANCE_TO_CHECKBOX_CUSTOM_VAR, distanceToCheckbox + "px");
     });
     this.watcher.observe(this.el);
     this.watcher.observe(this.headerRef);
@@ -1039,6 +1051,7 @@ const ChTreeViewItem = class {
     }
     // Load items
     this.lazyLoad = false;
+    this.downloading = true;
     this.loadLazyContent.emit(this.el.id);
   }
   toggleSelected() {
@@ -1114,7 +1127,7 @@ const ChTreeViewItem = class {
         "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" : ""}`, type: "button", disabled: this.disabled, onClick: this.handleActionClick, onKeyDown: !this.editing ? this.handleActionKeyDown : null,
+      }, 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,
@@ -1131,10 +1144,11 @@ const ChTreeViewItem = 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: {
+      }, part: `dashed-line${this.lastItem ? " last-all-line" : ""}` }))), hasContent && (h("div", { role: "group", "aria-busy": (!!this.downloading).toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: {
         expandable: true,
-        "expandable--collapsed": !this.expanded
-      }, part: `expandable${this.expanded ? " expanded" : " collapsed"}` }, h("slot", null)))));
+        "expandable--collapsed": !this.expanded,
+        "expandable--lazy-loaded": !this.downloading
+      }, part: `expandable${this.expanded ? " expanded" : " collapsed"}${!this.downloading ? " lazy-loaded" : ""}` }, h("slot", null)))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -1148,593 +1162,4 @@ const ChTreeViewItem = class {
 };
 ChTreeViewItem.style = treeViewItemCss;
 
-const filterWithCamelCase = (stringToFilter, filter, camelCase) => camelCase
-  ? stringToFilter.includes(filter)
-  : stringToFilter.toLowerCase().includes(filter.toLowerCase());
-const filterWithString = (stringToFilter, filter, filterOptions) => filterOptions.regularExpression
-  ? stringToFilter.match(filter) !== null
-  : filterWithCamelCase(stringToFilter, filter, filterOptions.camelCase);
-const filterDictionary = {
-  caption: (item, filterInfo) => {
-    var _a;
-    return filterInfo.filter
-      ? filterWithString((_a = item.caption) !== null && _a !== void 0 ? _a : "", filterInfo.filter, filterInfo.filterOptions)
-      : true;
-  },
-  checked: (item, filterInfo) => {
-    var _a, _b;
-    return ((_a = item.checkbox) !== null && _a !== void 0 ? _a : filterInfo.defaultCheckbox) &&
-      !item.indeterminate &&
-      ((_b = item.checked) !== null && _b !== void 0 ? _b : filterInfo.defaultChecked);
-  },
-  "id-list": (item, filterInfo) => filterInfo.filterList.includes(item.id),
-  metadata: (item, filterInfo) => {
-    var _a;
-    return filterInfo.filter
-      ? filterWithString((_a = item.metadata) !== null && _a !== void 0 ? _a : "", filterInfo.filter, filterInfo.filterOptions)
-      : true;
-  },
-  none: () => true,
-  unchecked: (item, filterInfo) => {
-    var _a, _b;
-    return ((_a = item.checkbox) !== null && _a !== void 0 ? _a : filterInfo.defaultCheckbox) &&
-      !item.indeterminate &&
-      !((_b = item.checked) !== null && _b !== void 0 ? _b : filterInfo.defaultChecked);
-  }
-};
-
-const treeViewRenderCss = "ch-tree-view-render{display:contents}";
-
-const DEFAULT_DRAG_DISABLED_VALUE = false;
-const DEFAULT_DROP_DISABLED_VALUE = false;
-const DEFAULT_CLASS_VALUE = "tree-view-item";
-const DEFAULT_EDITABLE_ITEMS_VALUE = true;
-const DEFAULT_EXPANDED_VALUE = false;
-const DEFAULT_INDETERMINATE_VALUE = false;
-const DEFAULT_LAZY_VALUE = false;
-const DEFAULT_ORDER_VALUE = 0;
-const DEFAULT_SELECTED_VALUE = false;
-const defaultRenderItem = (itemModel, treeState, lastItem, level) => {
-  var _a, _b, _c, _d, _e, _f;
-  return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { 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 &&
-    itemModel.items != null &&
-    itemModel.items.map((subModel, index) => defaultRenderItem(subModel, treeState, treeState.showLines && index === itemModel.items.length - 1, level + 1))));
-};
-const ChTreeViewRender = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.checkedItemsChange = createEvent(this, "checkedItemsChange", 7);
-    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
-    this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
-    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
-    // UI Models
-    this.flattenedTreeModel = new Map();
-    this.flattenedCheckboxTreeModel = new Map();
-    this.selectedItems = new Set();
-    /**
-     * This property lets you specify if the tree is waiting to process the drop
-     * of items.
-     */
-    this.waitDropProcessing = false;
-    /**
-     * Set this attribute if you want display a checkbox in all items by default.
-     */
-    this.checkbox = false;
-    /**
-     * Set this attribute if you want the checkbox to be checked in all items by
-     * default.
-     * Only works if `checkbox = true`
-     */
-    this.checked = false;
-    /**
-     * This attribute lets you specify if the drag operation is disabled in all
-     * items by default. If `true`, the items can't be dragged.
-     */
-    this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
-    /**
-     * This attribute lets you specify if the drop operation is disabled in all
-     * items by default. If `true`, the items won't accept any drops.
-     */
-    this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
-    /**
-     * This attribute lets you specify if the edit operation is enabled in all
-     * items by default. If `true`, the items can edit its caption in place.
-     */
-    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
-    /**
-     * This property lets you determine the list of items that will be filtered.
-     * Only works if `filterType = "id-list"`.
-     */
-    this.filterList = [];
-    /**
-     * This property lets you determine the options that will be applied to the
-     * filter.
-     * Only works if `filterType = "caption" | "metadata"`.
-     */
-    this.filterOptions = {};
-    /**
-     * This attribute lets you define what kind of filter is applied to items.
-     * Only items that satisfy the filter predicate will be displayed.
-     *
-     * | Value       | Details                                                                                        |
-     * | ----------- | ---------------------------------------------------------------------------------------------- |
-     * | `checked`   | Show only the items that have a checkbox and are checked.                                      |
-     * | `unchecked` | Show only the items that have a checkbox and are not checked.                                  |
-     * | `caption`   | Show only the items whose `caption` satisfies the regex determinate by the `filter` property.  |
-     * | `metadata`  | Show only the items whose `metadata` satisfies the regex determinate by the `filter` property. |
-     * | `id-list`   | Show only the items that are contained in the array determinate by the `filterList` property.  |
-     * | `none`      | Show all items.                                                                                |
-     */
-    this.filterType = "none";
-    /**
-     * Set this attribute if you want to allow multi selection of the items.
-     */
-    this.multiSelection = false;
-    /**
-     * This property allows us to implement custom rendering of tree items.
-     */
-    this.renderItem = defaultRenderItem;
-    /**
-     * `true` to display the relation between tree items and tree lists using
-     * lines.
-     */
-    this.showLines = "none";
-    /**
-     * Set this attribute if you want all the children item's checkboxes to be
-     * checked when the parent item checkbox is checked, or to be unchecked when
-     * the parent item checkbox is unchecked.
-     * This attribute will be used in all items by default.
-     */
-    this.toggleCheckboxes = false;
-    /**
-     * This property lets you define the model of the ch-tree-x control.
-     */
-    this.treeModel = [];
-    this.handleDroppableZoneEnter = (event) => {
-      if (!this.checkDroppableZoneCallback) {
-        return;
-      }
-      event.stopPropagation();
-      // Suppose the request is made immediately by executing the callback
-      const requestTimestamp = new Date().getTime();
-      const dropInformation = event.detail;
-      const promise = this.checkDroppableZoneCallback(dropInformation);
-      promise.then(validDrop => {
-        this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
-      });
-    };
-    this.handleSelectedItemsChange = (event) => {
-      event.stopPropagation();
-      const itemsToProcess = new Map(event.detail);
-      // Remove no longer selected items
-      this.selectedItems.forEach(selectedItemId => {
-        const itemUIModel = this.flattenedTreeModel.get(selectedItemId).item;
-        const itemIsStillSelected = itemsToProcess.get(selectedItemId);
-        // The item does not need to be added. Remove it from the processed list
-        if (itemIsStillSelected) {
-          itemUIModel.expanded = itemIsStillSelected.expanded; // Update expanded state
-          itemsToProcess.delete(selectedItemId);
-        }
-        // The item must be un-selected in the UI Model
-        else {
-          itemUIModel.selected = false;
-          this.selectedItems.delete(selectedItemId);
-        }
-      });
-      // Add new selected items
-      itemsToProcess.forEach((newSelectedItemInfo, itemId) => {
-        const newSelectedItem = this.flattenedTreeModel.get(itemId).item;
-        newSelectedItem.selected = true;
-        newSelectedItem.expanded = newSelectedItemInfo.expanded;
-        this.selectedItems.add(itemId);
-      });
-      this.selectedItemsChange.emit(event.detail);
-    };
-    this.handleExpandedItemChange = (event) => {
-      const detail = event.detail;
-      const itemInfo = this.flattenedTreeModel.get(detail.id).item;
-      itemInfo.expanded = detail.expanded;
-    };
-    this.handleItemContextmenu = (event) => {
-      event.stopPropagation();
-      this.itemContextmenu.emit(event.detail);
-    };
-    this.handleItemsDropped = (event) => {
-      if (!this.dropItemsCallback) {
-        return;
-      }
-      event.stopPropagation();
-      const dataTransferInfo = event.detail;
-      const newContainer = dataTransferInfo.newContainer;
-      const newParentId = newContainer.id;
-      // Check if the parent exists in the UI Model
-      if (!this.flattenedTreeModel.get(newParentId)) {
-        return;
-      }
-      const draggedItems = dataTransferInfo.draggedItems;
-      if (draggedItems.length === 0) {
-        return;
-      }
-      const promise = this.dropItemsCallback(dataTransferInfo);
-      this.waitDropProcessing = true;
-      promise.then(async (response) => {
-        this.waitDropProcessing = false;
-        if (!response.acceptDrop) {
-          return;
-        }
-        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
-        // Only move the items to the new parent, keeping the state
-        if (dataTransferInfo.dropInTheSameTree) {
-          // Add the UI models to the new container and remove the UI models from
-          // the old containers
-          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
-          // When the selected items are moved, the tree must remove its internal
-          // state to not have undefined references
-          if (dataTransferInfo.draggingSelectedItems) {
-            await this.treeRef.clearSelectedItemsInfo();
-          }
-        }
-        // Add the new items
-        else {
-          if (response.items == null) {
-            return;
-          }
-          // Add new items to the parent
-          newParentUIModel.items.push(...response.items);
-          // Flatten the new UI models
-          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
-        }
-        this.sortItems(newParentUIModel.items);
-        // Open the item to visualize the new subitems
-        newParentUIModel.expanded = true;
-        // Re-sync checked items
-        this.emitCheckedItemsChange();
-        // Update filters
-        this.processFilters();
-        // There is no need to force and update, since the waitDropProcessing
-        // prop was modified
-      });
-    };
-    this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
-      const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
-      const item = itemUIModelExtended.item;
-      const oldParentItem = itemUIModelExtended.parentItem;
-      // Remove the UI model from the previous parent
-      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
-      // Add the UI Model to the new parent
-      newParentUIModel.items.push(item);
-      // Reference the new parent in the item
-      itemUIModelExtended.parentItem = newParentUIModel;
-    };
-    this.flattenItemUIModel = (parentModel) => (item) => {
-      var _a, _b, _c, _d, _e, _f;
-      this.flattenedTreeModel.set(item.id, {
-        parentItem: parentModel,
-        item: item
-      });
-      // 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, {
-          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) {
-        this.selectedItems.add(item.id);
-      }
-      this.flattenSubModel(item);
-    };
-  }
-  handleFilterChange() {
-    if (this.filterType === "caption" || this.filterType === "metadata") {
-      this.processFilters();
-    }
-  }
-  handleFilterListChange() {
-    if (this.filterType === "id-list") {
-      this.processFilters();
-    }
-  }
-  handleFilterOptionsChange() {
-    if (this.filterType === "caption" || this.filterType === "metadata") {
-      this.processFilters();
-    }
-  }
-  handleFilterTypeChange() {
-    this.processFilters();
-  }
-  handleTreeModelChange() {
-    this.flattenModel();
-  }
-  /**
-   * Given an item id, an array of items to add, the download status and the
-   * lazy state, updates the item's UI Model.
-   */
-  async loadLazyContent(itemId, items, downloading = false, lazy = false) {
-    const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
-    // Establish that the content was lazy loaded
-    itemToLazyLoadContent.downloading = downloading;
-    itemToLazyLoadContent.lazy = lazy;
-    // Check if there is items to add
-    if (items == null) {
-      return;
-    }
-    // @todo What happens in the server when dropping items on a lazy node?
-    itemToLazyLoadContent.items = items;
-    this.sortItems(itemToLazyLoadContent.items);
-    this.flattenSubModel(itemToLazyLoadContent);
-    // Re-sync checked items
-    this.emitCheckedItemsChange();
-    // Update filters
-    this.processFilters();
-    // Force re-render
-    forceUpdate(this);
-  }
-  /**
-   * Given an item id, it displays and scrolls into the item view.
-   */
-  async scrollIntoVisible(treeItemId) {
-    const itemUIModel = this.flattenedTreeModel.get(treeItemId);
-    if (!itemUIModel) {
-      // @todo Check if the item is on the server?
-      return;
-    }
-    let visitedNode = itemUIModel.parentItem;
-    // While the parent is not the root, update the UI Models
-    while (visitedNode && visitedNode.id != null) {
-      // Expand the item
-      visitedNode.expanded = true;
-      const visitedNodeUIModel = this.flattenedTreeModel.get(visitedNode.id);
-      visitedNode = visitedNodeUIModel.parentItem;
-    }
-    forceUpdate(this);
-    // @todo For some reason, when the model is created using the "big model" option,
-    // this implementation does not work when only the UI Model is updated. So, to
-    // expand the items, we have to delegate the responsibility to the tree-x
-    this.treeRef.scrollIntoVisible(treeItemId);
-  }
-  /**
-   * This method is used to toggle a tree item by the tree item id/ids.
-   *
-   * @param treeItemIds An array id the tree items to be toggled.
-   * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
-   * @returns The modified items after the method was called.
-   */
-  async toggleItems(treeItemIds, expand) {
-    if (!treeItemIds) {
-      return [];
-    }
-    const modifiedTreeItems = [];
-    treeItemIds.forEach(treeItemId => {
-      const itemInfo = this.flattenedTreeModel.get(treeItemId).item;
-      if (itemInfo) {
-        itemInfo.expanded = expand !== null && expand !== void 0 ? expand : !itemInfo.expanded;
-        modifiedTreeItems.push({
-          id: itemInfo.id,
-          expanded: itemInfo.expanded
-        });
-      }
-    });
-    // Force re-render
-    forceUpdate(this);
-    return modifiedTreeItems;
-  }
-  /**
-   * Given a subset of item's properties, it updates all item UI models.
-   */
-  async updateAllItemsProperties(properties) {
-    [...this.flattenedTreeModel.values()].forEach(itemUIModel => {
-      if (properties.expanded != null) {
-        itemUIModel.item.expanded = properties.expanded;
-      }
-      if (properties.checked != null) {
-        itemUIModel.item.checked = properties.checked;
-        itemUIModel.item.indeterminate = false;
-      }
-    });
-    // Update filters
-    if (properties.checked != null) {
-      this.processFilters();
-    }
-    forceUpdate(this);
-  }
-  /**
-   * Given a item list and the properties to update, it updates the properties
-   * of the items in the list.
-   */
-  async updateItemsProperties(items, properties) {
-    items.forEach(item => {
-      const itemUIModel = this.flattenedTreeModel.get(item);
-      this.updateItemProperty(itemUIModel, properties);
-    });
-    // 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);
-  }
-  updateItemProperty(itemUIModel, properties) {
-    if (!itemUIModel) {
-      return;
-    }
-    const itemInfo = itemUIModel.item;
-    Object.keys(properties).forEach(propertyName => {
-      itemInfo[propertyName] = properties[propertyName];
-    });
-  }
-  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);
-      }
-      else {
-        itemRef.caption = oldCaption;
-        itemInfo.caption = oldCaption;
-        // Do something with the error message
-      }
-    });
-  }
-  handleOpenReference(event) {
-    event.stopPropagation();
-    this.itemOpenReference.emit(event.detail);
-  }
-  emitCheckedItemsChange() {
-    // New copy of the checked items
-    const allItemsWithCheckbox = new Map(this.flattenedCheckboxTreeModel);
-    // 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);
-  }
-  flattenSubModel(model) {
-    const items = model.items;
-    if (!items) {
-      // Make sure that subtrees don't have an undefined array
-      if (model.leaf !== true) {
-        model.items = [];
-      }
-      return;
-    }
-    this.sortItems(items);
-    items.forEach(this.flattenItemUIModel(model));
-  }
-  sortItems(items) {
-    // Ensure that items are sorted
-    if (this.sortItemsCallback) {
-      this.sortItemsCallback(items);
-    }
-  }
-  flattenModel() {
-    this.flattenedTreeModel.clear();
-    this.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.flattenSubModel({ id: null, caption: null, items: this.treeModel });
-    // Re-sync checked items
-    this.emitCheckedItemsChange();
-  }
-  filterSubModel(item, filterInfo) {
-    let aSubItemIsRendered = false;
-    // Check if a subitem is rendered
-    if (item.leaf !== true && item.items != null) {
-      item.items.forEach(subItem => {
-        const itemSatisfiesFilter = this.filterSubModel(subItem, filterInfo);
-        aSubItemIsRendered || (aSubItemIsRendered = itemSatisfiesFilter);
-      });
-    }
-    // The current item is rendered if it satisfies the filter condition or a
-    // subitem exists that needs to be rendered
-    const satisfiesFilter = filterDictionary[this.filterType](item, filterInfo) || aSubItemIsRendered;
-    item.render = satisfiesFilter; // Update item render
-    return satisfiesFilter;
-  }
-  processFilters() {
-    if (this.filterType === "none") {
-      return;
-    }
-    this.filterSubModel({
-      id: null,
-      caption: null,
-      items: this.treeModel
-    }, {
-      defaultCheckbox: this.checkbox,
-      defaultChecked: this.checked,
-      filter: this.filter,
-      filterList: this.filterList,
-      filterOptions: this.filterOptions
-    });
-  }
-  componentWillLoad() {
-    this.flattenModel();
-    this.processFilters();
-  }
-  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, this.showLines && index === this.treeModel.length - 1, 0))));
-  }
-  static get watchers() { return {
-    "filter": ["handleFilterChange"],
-    "filterList": ["handleFilterListChange"],
-    "filterOptions": ["handleFilterOptionsChange"],
-    "filterType": ["handleFilterTypeChange"],
-    "treeModel": ["handleTreeModelChange"]
-  }; }
-};
-ChTreeViewRender.style = treeViewRenderCss;
-
-export { CheckBox as ch_checkbox, ChTreeView as ch_tree_view, ChTreeViewItem as ch_tree_view_item, ChTreeViewRender as ch_tree_view_render };
+export { CheckBox as ch_checkbox, ChTreeView as ch_tree_view, ChTreeViewItem as ch_tree_view_item };