@genexus/genexus-ide-ui 0.0.61 → 0.0.63

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

@@ -1,6 +1,92 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, w as writeTask, a as getAssetPath, f as forceUpdate } from './index-0da01575.js';
+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 { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
 import { f as focusComposedPath, m as mouseEventModifierKey } from './helpers-1ecd5e26.js';
 
+const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+
+const CHECKBOX_ID = "checkbox";
+const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
+const CheckBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.click = createEvent(this, "click", 7);
+    this.input = createEvent(this, "input", 7);
+    /**
+     * This attribute lets you specify if the element is disabled.
+     * If disabled, it will not fire any user interaction related event
+     * (for example, click event).
+     */
+    this.disabled = false;
+    /**
+     * True to highlight control when an action is fired.
+     */
+    this.highlightable = false;
+    /**
+     * `true` if the control's value is indeterminate.
+     */
+    this.indeterminate = false;
+    /**
+     * This attribute indicates that the user cannot modify the value of the control.
+     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * attribute for `input` elements.
+     */
+    this.readonly = false;
+    this.getValue = (checked) => checked ? this.checkedValue : this.unCheckedValue;
+    /**
+     * Checks if it is necessary to prevent the click from bubbling
+     */
+    this.handleClick = (event) => {
+      if (this.readonly || this.disabled) {
+        return;
+      }
+      event.stopPropagation();
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      const inputRef = event.target;
+      const checked = inputRef.checked;
+      const value = this.getValue(checked);
+      this.checked = checked;
+      this.value = value;
+      inputRef.value = value; // Update input's value before emitting the event
+      this.input.emit(event);
+      if (this.highlightable) {
+        this.click.emit();
+      }
+    };
+  }
+  valueChanged() {
+    this.checked = this.value === this.checkedValue;
+  }
+  componentWillLoad() {
+    this.checked = this.value === this.checkedValue;
+  }
+  render() {
+    var _a;
+    const additionalParts = PARTS(this.checked, this.indeterminate);
+    return (h(Host, { class: {
+        [DISABLED_CLASS]: this.disabled,
+        "ch-checkbox--actionable": (!this.readonly && !this.disabled) ||
+          (this.readonly && this.highlightable)
+      } }, h("div", { class: {
+        container: true,
+        "container--checked": this.checked
+      }, part: `container${additionalParts}` }, h("input", { "aria-label": ((_a = this.accessibleName) === null || _a === void 0 ? void 0 : _a.trim()) !== "" &&
+        this.accessibleName !== this.caption
+        ? this.accessibleName
+        : null, id: this.caption ? CHECKBOX_ID : null, class: "input", part: "input", type: "checkbox", checked: this.checked, disabled: this.disabled || this.readonly, indeterminate: this.indeterminate, value: this.value, onClick: this.handleClick, onInput: this.handleChange }), h("div", { class: {
+        option: true,
+        "option--checked": this.checked && !this.indeterminate,
+        "option--indeterminate": this.indeterminate
+      }, part: `option${additionalParts}`, "aria-hidden": "true" })), this.caption && (h("label", { class: "label", part: "label", htmlFor: CHECKBOX_ID, onClick: this.handleClick }, this.caption))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+CheckBox.style = checkboxCss;
+
 const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
   const mousePositionY = event.clientY - container.getBoundingClientRect().top;
   const containerHeight = container.clientHeight;
@@ -15,10 +101,10 @@ const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
   }
 };
 
-const treeXCss = "ch-tree-x{display:flex;position:relative;width:100%;overflow:auto}ch-tree-x>.ch-tree-x-container{position:absolute;inset:0}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>.ch-tree-x-container{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
+const treeViewCss = "ch-tree-view{display:flex;position:relative;width:100%;overflow:auto}ch-tree-view>.ch-tree-view-container{position:absolute;inset:0}ch-tree-view.ch-tree-view-dragging-item ch-tree-view-item{pointer-events:var(--ch-tree-view-pointer-events, all)}ch-tree-view.ch-tree-view-dragging-item .ch-tree-view-list-item--deny-drop{pointer-events:none}ch-tree-view.ch-tree-view--dragging-selected-items ch-tree-view-item[selected]{--ch-tree-view-pointer-events:none}ch-tree-view.ch-tree-view-waiting-drop-processing{cursor:wait}ch-tree-view.ch-tree-view-waiting-drop-processing>.ch-tree-view-container{pointer-events:none}.ch-tree-view-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-view-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-view-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-view-drag-info-fade-in 10ms}@keyframes ch-tree-view-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-view-drag-info{--rtl-offset:-100%}";
 
-const TREE_ITEM_TAG_NAME$1 = "ch-tree-x-list-item";
-const TREE_TAG_NAME = "ch-tree-x";
+const TREE_ITEM_TAG_NAME$1 = "ch-tree-view-item";
+const TREE_TAG_NAME = "ch-tree-view";
 // Selectors
 // const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
 const TEXT_FORMAT = "text/plain";
@@ -29,9 +115,9 @@ const isTreeItem = (element) => element.tagName.toLowerCase() === TREE_ITEM_TAG_
 const getFocusedTreeItem = () => focusComposedPath().find(isTreeItem);
 const canMoveTreeItemFocus = (treeItem) => treeItem && !treeItem.editing;
 const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
-const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-x";
-const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-y";
-const ChTreeX = class {
+const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-view-dragging-item-x";
+const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-view-dragging-item-y";
+const ChTreeView = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
@@ -129,7 +215,7 @@ const ChTreeX = class {
   // async getCheckedItems(): Promise<CheckedTreeItemInfo[]> {
   //   const checkedItems = Array.from(
   //     this.el.querySelectorAll(CHECKED_ITEMS)
-  //   ) as HTMLChTreeXListItemElement[];
+  //   ) as HTMLChTreeViewItemElement[];
   //   return checkedItems.map(item => ({
   //     id: item.id,
   //     caption: item.caption,
@@ -467,22 +553,22 @@ const ChTreeX = class {
   }
   render() {
     return (h(Host, { class: {
-        "ch-tree-x-dragging-item": this.draggingInTheDocument,
-        "ch-tree-x-not-dragging-item": !this.draggingInTheDocument,
-        "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
-        "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
-      } }, h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-x-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
+        "ch-tree-view-dragging-item": this.draggingInTheDocument,
+        "ch-tree-view-not-dragging-item": !this.draggingInTheDocument,
+        "ch-tree-view--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
+        "ch-tree-view-waiting-drop-processing": this.waitDropProcessing
+      } }, h("div", { role: "tree", part: "tree-x-container", "aria-multiselectable": this.multiSelection.toString(), class: "ch-tree-view-container" }, h("slot", null)), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-view-drag-info" }, this.dragInfo))));
   }
   get el() { return getElement(this); }
 };
-ChTreeX.style = treeXCss;
+ChTreeView.style = treeViewCss;
 
-const treeXListItemCss = ":where(button){all:unset;display:flex;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed color-mix(in srgb, currentColor 65%, transparent);border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1;cursor:pointer}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;padding:0;margin:0;background-color:unset;color:unset;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-auto-rows:min-content;position:relative;content-visibility:auto;contain-intrinsic-size:auto 100px}.expandable--collapsed{display:none;overflow:hidden;content-visibility:hidden}";
+const 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 resetDragImage = new Image();
 const INITIAL_LEVEL = 0;
 // Selectors
-const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
+const TREE_ITEM_TAG_NAME = "ch-tree-view-item";
 const DIRECT_TREE_ITEM_CHILDREN = `:scope>${TREE_ITEM_TAG_NAME}`;
 const FIRST_ENABLED_SUB_ITEM = `${TREE_ITEM_TAG_NAME}:not([disabled])`;
 const LAST_SUB_ITEM = `:scope>${TREE_ITEM_TAG_NAME}:last-child`;
@@ -501,7 +587,7 @@ const CHECKBOX_EXPORT_PARTS = [
 ]
   .map(getCheckboxExportPart)
   .join(",");
-const ChTreeXListItem = class {
+const ChTreeViewItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.checkboxChange = createEvent(this, "checkboxChange", 7);
@@ -1060,11 +1146,44 @@ const ChTreeXListItem = class {
     "showLines": ["handleShowLinesChange"]
   }; }
 };
-ChTreeXListItem.style = treeXListItemCss;
+ChTreeViewItem.style = treeViewItemCss;
 
-const resolveImgPath = (iconAssetsPath, img) => `${iconAssetsPath}/${img}.svg`;
+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 treeViewCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}gxg-tree-view{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-regular);color:var(--color-on-background);display:contents}gxg-tree-view ch-tree-x .ch-tree-x-container{padding:var(--spacing-comp-01)}.tree-view{}.tree-view::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}.tree-view::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.tree-view::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.tree-view::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}gxg-tree-view[position-relative] ch-tree-x .ch-tree-x-container{position:relative;width:100%}gxg-tree-view[no-padding] ch-tree-x .ch-tree-x-container{padding:0}.tree-view-item::part(dashed-line){border-color:var(--gray-02)}ch-tree-x-list-item{--checkbox-size:var(--gxg-checkbox-size);--expandable-button-width:var(--spacing-comp-04);}ch-tree-x-list-item.tree-view-item--folder::part(action)::before,ch-tree-x-list-item.tree-view-item--module::part(action)::before{grid-area:left-img;content:\"\";width:14px;height:14px;margin-inline-end:4px;background-repeat:no-repeat}ch-tree-x-list-item.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}ch-tree-x-list-item.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}ch-tree-x-list-item.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}ch-tree-x-list-item .tree-view-item--pending-commit::part(action)::before{content:\"\";position:relative;z-index:1;grid-area:left-img;width:5px;height:5px;align-self:end;margin-block-end:3px;margin-inline-start:1px;background-color:#2c3b92;border-radius:50%}ch-tree-x-list-item::part(header):first-child{margin-inline-start:var(--spacing-comp-01)}ch-tree-x-list-item::part(header){padding-inline-end:calc(var(--spacing-comp-02) * 0.65);height:var(--spacing-comp-05);display:flex;gap:5px}ch-tree-x-list-item::part(header):before{content:\"\";display:block}ch-tree-x-list-item::part(header):hover{background-color:var(--gxg-background-color--hover);color:var(--gxg-color--hover)}ch-tree-x-list-item::part(header):focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}ch-tree-x-list-item[selected]::part(header){background-color:var(--gxg-background-color--selected)}ch-tree-x-list-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){border:2px solid transparent}ch-tree-x-list-item::part(expandable-button){background-color:var(--color-hover);margin-inline-end:0}ch-tree-x-list-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}ch-tree-x-list-item::part(expandable-button):hover{background-color:var(--color-background)}ch-tree-x-list-item::part(expandable-button):focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:0}ch-tree-x-list-item::part(checkbox__container){border-color:var(--gray-04);background-color:var(--color-background)}ch-tree-x-list-item::part(checkbox__container):after{content:\"\";position:absolute;display:block;border:solid;border-color:transparent;z-index:0}ch-tree-x-list-item::part(checkbox__container):focus-within{box-shadow:none;outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}ch-tree-x-list-item::part(checkbox){margin-inline-end:0}ch-tree-x-list-item::part(checkbox__option){display:none}ch-tree-x-list-item::part(checkbox__container checkbox__checked):after{left:5.5px;top:3px;width:4px;height:7px;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-color:var(--color-primary-active);transition-property:border-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}ch-tree-x-list-item::part(checkbox__container checkbox__indeterminate):after{left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--color-primary-active);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}ch-tree-x-list-item::part(checkbox__input){position:relative;z-index:1}ch-tree-x-list-item::part(action){text-transform:capitalize;display:flex;gap:var(--spacing-comp-01)}ch-tree-x-list-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04);margin-inline-end:0}ch-tree-x-list-item::part(downloading){width:var(--spacing-comp-03);height:var(--spacing-comp-03);border:var(--border-width-md) solid var(--color-primary-enabled);border-inline-start-color:transparent}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
+const treeViewRenderCss = "ch-tree-view-render{display:contents}";
 
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
@@ -1075,7 +1194,13 @@ const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
 const DEFAULT_ORDER_VALUE = 0;
 const DEFAULT_SELECTED_VALUE = false;
-const GxgTreeView = class {
+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);
@@ -1086,20 +1211,11 @@ const GxgTreeView = class {
     this.flattenedTreeModel = new Map();
     this.flattenedCheckboxTreeModel = new Map();
     this.selectedItems = new Set();
-    this.iconAssetsPath = getAssetPath(`./icon-assets`);
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
      */
     this.waitDropProcessing = false;
-    /**
-     * Removes the default padding on '.ch-tree-x-container' (Added by Gemini)
-     */
-    this.noPadding = false;
-    /**
-     * A temporary fix to force the ch-tree-x tree-x-container to be visible without position:absolute (Added by Gemini)
-     */
-    this.positionRelative = false;
     /**
      * Set this attribute if you want display a checkbox in all items by default.
      */
@@ -1110,10 +1226,6 @@ const GxgTreeView = class {
      * Only works if `checkbox = true`
      */
     this.checked = false;
-    /**
-     * A CSS class to set as the `ch-tree-x` element class.
-     */
-    this.cssClass = "tree-view";
     /**
      * This attribute lets you specify if the drag operation is disabled in all
      * items by default. If `true`, the items can't be dragged.
@@ -1129,15 +1241,44 @@ const GxgTreeView = class {
      * 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 = "all";
+    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
@@ -1158,7 +1299,7 @@ const GxgTreeView = class {
       const requestTimestamp = new Date().getTime();
       const dropInformation = event.detail;
       const promise = this.checkDroppableZoneCallback(dropInformation);
-      promise.then((validDrop) => {
+      promise.then(validDrop => {
         this.updateValidDropZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
       });
     };
@@ -1166,7 +1307,7 @@ const GxgTreeView = class {
       event.stopPropagation();
       const itemsToProcess = new Map(event.detail);
       // Remove no longer selected items
-      this.selectedItems.forEach((selectedItemId) => {
+      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
@@ -1246,6 +1387,10 @@ const GxgTreeView = class {
         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
       });
@@ -1261,46 +1406,51 @@ const GxgTreeView = class {
       // Reference the new parent in the item
       itemUIModelExtended.parentItem = newParentUIModel;
     };
-    this.renderSubModel = (treeSubModel, lastItem, level) => {
-      var _a, _b, _c, _d, _e, _f;
-      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: (_a = treeSubModel.checkbox) !== null && _a !== void 0 ? _a : this.checkbox, checked: (_b = treeSubModel.checked) !== null && _b !== void 0 ? _b : this.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_c = treeSubModel.dragDisabled) !== null && _c !== void 0 ? _c : this.dragDisabled, dropDisabled: (_d = treeSubModel.dropDisabled) !== null && _d !== void 0 ? _d : this.dropDisabled, editable: (_e = treeSubModel.editable) !== null && _e !== void 0 ? _e : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc
-          ? resolveImgPath(this.iconAssetsPath, treeSubModel.leftImgSrc)
-          : null, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: (_f = treeSubModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : this.toggleCheckboxes }, !treeSubModel.leaf &&
-        treeSubModel.items != null &&
-        treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
-    };
     this.flattenItemUIModel = (parentModel) => (item) => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f;
       this.flattenedTreeModel.set(item.id, {
         parentItem: parentModel,
-        item: item,
+        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,
+          item: item
         });
       }
       // Make sure the properties are with their default values to avoid issues
       // when reusing DOM nodes
-      item.class = item.class == null ? DEFAULT_CLASS_VALUE : item.class;
-      item.expanded =
-        item.expanded == null ? DEFAULT_EXPANDED_VALUE : item.expanded;
-      item.indeterminate =
-        item.indeterminate == null
-          ? DEFAULT_INDETERMINATE_VALUE
-          : item.indeterminate;
-      item.lazy = item.lazy == null ? DEFAULT_LAZY_VALUE : item.lazy;
-      item.order = item.order == null ? DEFAULT_ORDER_VALUE : item.order;
-      item.selected =
-        item.selected == null ? DEFAULT_SELECTED_VALUE : item.selected;
+      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();
   }
@@ -1323,6 +1473,8 @@ const GxgTreeView = class {
     this.flattenSubModel(itemToLazyLoadContent);
     // Re-sync checked items
     this.emitCheckedItemsChange();
+    // Update filters
+    this.processFilters();
     // Force re-render
     forceUpdate(this);
   }
@@ -1361,13 +1513,13 @@ const GxgTreeView = class {
       return [];
     }
     const modifiedTreeItems = [];
-    treeItemIds.forEach((treeItemId) => {
+    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,
+          expanded: itemInfo.expanded
         });
       }
     });
@@ -1379,7 +1531,7 @@ const GxgTreeView = class {
    * Given a subset of item's properties, it updates all item UI models.
    */
   async updateAllItemsProperties(properties) {
-    [...this.flattenedTreeModel.values()].forEach((itemUIModel) => {
+    [...this.flattenedTreeModel.values()].forEach(itemUIModel => {
       if (properties.expanded != null) {
         itemUIModel.item.expanded = properties.expanded;
       }
@@ -1388,6 +1540,10 @@ const GxgTreeView = class {
         itemUIModel.item.indeterminate = false;
       }
     });
+    // Update filters
+    if (properties.checked != null) {
+      this.processFilters();
+    }
     forceUpdate(this);
   }
   /**
@@ -1395,10 +1551,12 @@ const GxgTreeView = class {
    * of the items in the list.
    */
   async updateItemsProperties(items, properties) {
-    items.forEach((item) => {
+    items.forEach(item => {
       const itemUIModel = this.flattenedTreeModel.get(item);
       this.updateItemProperty(itemUIModel, properties);
     });
+    // Update filters
+    this.processFilters();
     forceUpdate(this);
   }
   /**
@@ -1416,7 +1574,7 @@ const GxgTreeView = class {
       return;
     }
     const itemInfo = itemUIModel.item;
-    Object.keys(properties).forEach((propertyName) => {
+    Object.keys(properties).forEach(propertyName => {
       itemInfo[propertyName] = properties[propertyName];
     });
   }
@@ -1434,6 +1592,12 @@ const GxgTreeView = class {
     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) {
@@ -1443,7 +1607,7 @@ const GxgTreeView = class {
     const treeItemId = event.detail;
     const promise = this.lazyLoadTreeItemsCallback(treeItemId);
     event.target.downloading = true;
-    promise.then((result) => {
+    promise.then(result => {
       this.loadLazyContent(treeItemId, result);
     });
   }
@@ -1465,9 +1629,11 @@ const GxgTreeView = class {
     // treeModel to force a re-render
     itemRef.caption = newCaption;
     const promise = this.modifyItemCaptionCallback(itemId, newCaption);
-    promise.then((status) => {
+    promise.then(status => {
       if (status.success) {
         this.sortItems(itemUIModel.parentItem.items);
+        // Update filters
+        this.processFilters();
         // Force re-render
         forceUpdate(this);
       }
@@ -1486,10 +1652,10 @@ const GxgTreeView = class {
     // New copy of the checked items
     const allItemsWithCheckbox = new Map(this.flattenedCheckboxTreeModel);
     // Update the checked value if not defined
-    allItemsWithCheckbox.forEach((itemUIModel) => {
-      if (itemUIModel.item.checked == null) {
-        itemUIModel.item.checked = this.checked;
-      }
+    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);
   }
@@ -1523,17 +1689,52 @@ const GxgTreeView = class {
     // 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-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: (el) => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0))));
+    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 assetsDirs() { return ["assets"]; }
   static get watchers() { return {
+    "filter": ["handleFilterChange"],
+    "filterList": ["handleFilterListChange"],
+    "filterOptions": ["handleFilterOptionsChange"],
+    "filterType": ["handleFilterTypeChange"],
     "treeModel": ["handleTreeModelChange"]
   }; }
 };
-GxgTreeView.style = treeViewCss;
+ChTreeViewRender.style = treeViewRenderCss;
 
-export { ChTreeX as ch_tree_x, ChTreeXListItem as ch_tree_x_list_item, GxgTreeView as gxg_tree_view };
+export { CheckBox as ch_checkbox, ChTreeView as ch_tree_view, ChTreeViewItem as ch_tree_view_item, ChTreeViewRender as ch_tree_view_render };