@genexus/genexus-ide-ui 0.0.63 → 0.0.64

package/dist/esm/ch-tree-view-render_2.entry.js

@@ -0,0 +1,817 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, a as getAssetPath } from './index-0aa3977d.js';
+
+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$1 = false;
+const DEFAULT_DROP_DISABLED_VALUE$1 = false;
+const DEFAULT_CLASS_VALUE = "tree-view-item";
+const DEFAULT_EDITABLE_ITEMS_VALUE$1 = 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$1 = (itemModel, treeState, treeHasFilter, 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$1(subModel, treeState, treeHasFilter, treeState.showLines &&
+      // If there is a filter applied in the current list, use the
+      // lastItemId value to calculate the last item
+      (treeHasFilter && itemModel.lastItemId !== ""
+        ? subModel.id === itemModel.lastItemId
+        : 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.applyFilters = false;
+    this.emitCheckedChange = false;
+    /**
+     * 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;
+    /**
+     * A CSS class to set as the `ch-tree-view` 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.
+     */
+    this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE$1;
+    /**
+     * 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$1;
+    /**
+     * 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$1;
+    /**
+     * This property lets you determine the debounce time (in ms) that the
+     * control waits until it processes the changes to the filter property.
+     * Consecutive changes to the `filter` property between this range, reset the
+     * timeout to process the filter.
+     * Only works if `filterType = "caption" | "metadata"`.
+     */
+    this.filterDebounce = 250;
+    /**
+     * 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$1;
+    /**
+     * `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();
+    }
+  }
+  handleFilterDebounceChange() {
+    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);
+  }
+  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) {
+      let lastItemId = "";
+      item.items.forEach(subItem => {
+        const itemSatisfiesFilter = this.filterSubModel(subItem, filterInfo);
+        aSubItemIsRendered || (aSubItemIsRendered = itemSatisfiesFilter);
+        if (itemSatisfiesFilter) {
+          lastItemId = subItem.id;
+        }
+      });
+      item.lastItemId = lastItemId;
+    }
+    // The current item is rendered if it satisfies the filter condition or a
+    // subitem exists that needs to be rendered
+    const satisfiesFilter = filterDictionary[this.filterType](item, filterInfo) || aSubItemIsRendered;
+    item.render = satisfiesFilter; // Update item render
+    return satisfiesFilter;
+  }
+  emitCheckedItemsChange() {
+    this.emitCheckedChange = true;
+  }
+  updateCheckedItems() {
+    // 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);
+  }
+  processFilters() {
+    this.applyFilters = true;
+  }
+  updateFilters() {
+    if (this.filterType === "none") {
+      return;
+    }
+    // Remove queued filter processing
+    clearTimeout(this.filterTimeout);
+    const processWithDebounce = this.filterDebounce > 0 &&
+      (this.filterType === "caption" || this.filterType === "metadata");
+    const filterFunction = () => this.filterSubModel({
+      id: null,
+      caption: null,
+      items: this.treeModel
+    }, {
+      defaultCheckbox: this.checkbox,
+      defaultChecked: this.checked,
+      filter: this.filter,
+      filterList: this.filterList,
+      filterOptions: this.filterOptions
+    });
+    // Check if should filter with debounce
+    if (processWithDebounce) {
+      this.filterTimeout = setTimeout(() => {
+        filterFunction();
+        forceUpdate(this); // After the filter processing is completed, force a re-render
+      }, this.filterDebounce);
+    }
+    else {
+      filterFunction();
+    }
+  }
+  componentWillLoad() {
+    this.flattenModel();
+    this.updateCheckedItems();
+    this.updateFilters();
+  }
+  componentWillUpdate() {
+    if (this.emitCheckedChange) {
+      this.updateCheckedItems();
+      this.emitCheckedChange = false;
+    }
+    if (this.applyFilters) {
+      this.updateFilters();
+      this.applyFilters = false;
+    }
+  }
+  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.filterType === "caption" || this.filterType === "metadata") &&
+      this.filter != null, this.showLines && index === this.treeModel.length - 1, 0))));
+  }
+  static get watchers() { return {
+    "filter": ["handleFilterChange"],
+    "filterDebounce": ["handleFilterDebounceChange"],
+    "filterList": ["handleFilterListChange"],
+    "filterOptions": ["handleFilterOptionsChange"],
+    "filterType": ["handleFilterTypeChange"],
+    "treeModel": ["handleTreeModelChange"]
+  }; }
+};
+ChTreeViewRender.style = treeViewRenderCss;
+
+const resolveImgPath = (iconAssetsPath, img) => `${iconAssetsPath}/${img}.svg`;
+
+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{--gxg-tree-view-icon-size:var(--spacing-comp-04);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}.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}.tree-view .ch-tree-view-container{padding:7px;}.tree-view-item{--ch-tree-view-view__checkbox-size:var(--gxg-checkbox-size);--ch-tree-view-view__expandable-button-width:var(--gxg-tree-view-icon-size);--ch-tree-view-item-gap:var(--spacing-comp-02);--ch-tree-view-item-custom-padding-inline-start:var(--spacing-comp-01);--ch-tree-view-item-custom-padding-inline-end:var(--spacing-comp-01);}.tree-view-item::part(dashed-line){border-color:var(--gray-02)}.tree-view-item::part(header){min-height:var(--spacing-comp-05);padding-top:var(--spacing-comp-00);padding-bottom:var(--spacing-comp-00);padding-inline-end:var(--spacing-comp-02)}.tree-view-item::part(header):before{content:\"\";display:block}.tree-view-item::part(header):hover{background-color:var(--gxg-background-color--hover);color:var(--gxg-color--hover)}.tree-view-item::part(header):focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}.tree-view-item[selected]::part(header){background-color:var(--gxg-background-color--selected)}.tree-view-item[selected]::part(header):hover{background-color:var(--gxg-background-color--selected-hover)}.tree-view-item::part(expandable-button){background-color:var(--gray-00)}.tree-view-item::part(expandable-button)::before{background-color:var(--gray-04);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.tree-view-item::part(expandable-button):hover{background-color:var(--color-background)}.tree-view-item::part(expandable-button):focus{outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:0}.tree-view-item::part(left-img){width:var(--spacing-comp-04);height:var(--spacing-comp-04)}.tree-view-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}.tree-view-item::part(checkbox__container){border-color:var(--gray-04);background-color:var(--color-background)}.tree-view-item::part(checkbox__container):after{content:\"\";position:absolute;display:block;border:solid;border-color:transparent;z-index:0}.tree-view-item::part(checkbox__container):focus-within{box-shadow:none;outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}.tree-view-item::part(checkbox__option){display:none}.tree-view-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}.tree-view-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%)}.tree-view-item::part(checkbox__input){position:relative;z-index:1}.tree-view-item--folder::part(action)::before,.tree-view-item--module::part(action)::before{grid-area:left-img;content:\"\";width:var(--gxg-tree-view-icon-size);height:var(--gxg-tree-view-icon-size);margin-inline-end:var(--ch-tree-view-item-gap);background-repeat:no-repeat}.tree-view-item--folder::part(action)::before{background-image:url(\"/build/icon-assets/objects/folder.svg\")}.tree-view-item--folder::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/folder-open.svg\")}.tree-view-item--module::part(action)::before{background-image:url(\"/build/icon-assets/objects/module.svg\")}.tree-view-item--module::part(action expanded)::before{background-image:url(\"/build/icon-assets/objects/module-open.svg\")}.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:var(--color-primary-enabled);border-radius:50%}.tree-view-item--editing::part(header){border:2px solid transparent}.tree-view .ch-tree-view-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
+
+const DEFAULT_DRAG_DISABLED_VALUE = false;
+const DEFAULT_DROP_DISABLED_VALUE = false;
+const DEFAULT_EDITABLE_ITEMS_VALUE = true;
+const iconAssetsPath = getAssetPath(`./icon-assets`);
+const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
+  var _a, _b, _c, _d, _e, _f;
+  return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { 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
+      ? resolveImgPath(iconAssetsPath, itemModel.leftImgSrc)
+      : null, 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, treeHasFilter, treeState.showLines !== "none" &&
+      // If there is a filter applied in the current list, use the
+      // lastItemId value to calculate the last item
+      (treeHasFilter && itemModel.lastItemId !== ""
+        ? subModel.id === itemModel.lastItemId
+        : index === itemModel.items.length - 1), level + 1))));
+};
+const ChTreeViewRenderWrapper = 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);
+    /**
+     * 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;
+    /**
+     * A CSS class to set as the `ch-tree-view` 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.
+     */
+    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 = "all";
+    /**
+     * 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 = [];
+  }
+  /**
+   * 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) {
+    this.treeRef.loadLazyContent(itemId, items, downloading, lazy);
+  }
+  /**
+   * Given an item id, it displays and scrolls into the item view.
+   */
+  async scrollIntoVisible(treeItemId) {
+    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) {
+    return this.treeRef.toggleItems(treeItemIds, expand);
+  }
+  /**
+   * Given a subset of item's properties, it updates all item UI models.
+   */
+  async updateAllItemsProperties(properties) {
+    this.treeRef.updateAllItemsProperties(properties);
+  }
+  /**
+   * Given a item list and the properties to update, it updates the properties
+   * of the items in the list.
+   */
+  async updateItemsProperties(items, properties) {
+    this.treeRef.updateItemsProperties(items, properties);
+  }
+  /**
+   * 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);
+  }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
+  render() {
+    return (h("ch-tree-view-render", { checkbox: this.checkbox, checked: this.checked, checkDroppableZoneCallback: this.checkDroppableZoneCallback, cssClass: this.cssClass, dragDisabled: this.dragDisabled, dropDisabled: this.dropDisabled, dropItemsCallback: this.dropItemsCallback, editableItems: this.editableItems, filter: this.filter, filterList: this.filterList, filterOptions: this.filterOptions, filterType: this.filterType, lazyLoadTreeItemsCallback: this.lazyLoadTreeItemsCallback, modifyItemCaptionCallback: this.modifyItemCaptionCallback, multiSelection: this.multiSelection, renderItem: this.renderItem, showLines: this.showLines, sortItemsCallback: this.sortItemsCallback, toggleCheckboxes: this.toggleCheckboxes, treeModel: this.treeModel, ref: (el) => (this.treeRef = el) }));
+  }
+};
+ChTreeViewRenderWrapper.style = treeViewCss;
+
+export { ChTreeViewRender as ch_tree_view_render, ChTreeViewRenderWrapper as gxg_tree_view };