@genexus/genexus-ide-ui 0.0.29 → 0.0.31

package/dist/esm/ch-test-tree-x.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, h, f as forceUpdate, H as Host } from './index-0da01575.js';
 
-const testTreeXCss = "ch-test-tree-x{display:grid;grid-template-columns:350px max-content;grid-template-rows:1fr;height:100%}ch-test-tree-x>.test-tree-x-scroll{position:relative;overflow-y:auto;margin-inline-end:16px}ch-test-tree-x>.test-tree-x-scroll>ch-tree-x{position:absolute;inset:0;margin:2px}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}:not(.ch-tree-x-dragging-item) ch-tree-x-list-item:not([selected])::part(header):hover{background-color:#e8e8e9}.ch-tree-x-list-item--drag-enter{background-color:#eee;box-shadow:inset 0 0 1px 0px black}.ch-tree-x-list-item--drag-enter[selected]::part(header){background-color:#eee}ch-tree-x-list-item::part(header){border:1px solid transparent}ch-tree-x-list-item[selected]::part(header){background-color:#cfdee6;border-color:#0266a0}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){background-color:rgba(207, 222, 230, 0.5);border-color:transparent}ch-tree-x-list-item:not(.ch-tree-x-list-item--editing)::part(header):focus-visible{border-color:black;z-index:1}.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 testTreeXCss = "ch-test-tree-x{display:grid;grid-template-columns:350px max-content;grid-template-rows:1fr;height:100%}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}:not(.ch-tree-x-dragging-item) ch-tree-x-list-item:not([selected])::part(header):hover{background-color:#e8e8e9}.ch-tree-x-list-item--drag-enter{background-color:#eee;box-shadow:inset 0 0 1px 0px black}.ch-tree-x-list-item--drag-enter[selected]::part(header){background-color:#eee}ch-tree-x-list-item::part(header){border:1px solid transparent}ch-tree-x-list-item[selected]::part(header){background-color:#cfdee6;border-color:#0266a0}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){background-color:rgba(207, 222, 230, 0.5);border-color:transparent}ch-tree-x-list-item:not(.ch-tree-x-list-item--editing)::part(header):focus-visible{border-color:black;z-index:1}.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 DEFAULT_EXPANDED_VALUE = false;
+const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
 const DEFAULT_SELECTED_VALUE = false;
 const ChTestTreeX = class {
@@ -26,18 +27,20 @@ const ChTestTreeX = class {
      */
     this.multiSelection = false;
     /**
-     * Set this attribute if you want to display the relation between tree items and tree lists using
+     * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = true;
-    this.closeTreeNodeHandler = () => {
-      // this.tree.toggleItems(["number-1-1-2"], false);
-    };
-    this.openTreeNodeHandler = () => {
-      // this.tree.toggleItems(["number-1-1-2"], true);
-    };
-    this.toggleTreeNodeHandler = () => {
-      // this.tree.toggleItems(["number-1-1-2"]);
+    this.showLines = "none";
+    this.handleDroppableZoneEnter = (event) => {
+      const dropInformation = event.detail;
+      if (!this.checkDroppableZoneCallback) {
+        return;
+      }
+      const requestTimestamp = new Date().getTime();
+      const promise = this.checkDroppableZoneCallback(dropInformation);
+      promise.then(validDrop => {
+        this.treeRef.updateValidDroppableZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+      });
     };
     this.handleSelectedItemsChange = (event) => {
       const itemsToProcess = new Map(event.detail);
@@ -64,22 +67,87 @@ const ChTestTreeX = class {
         this.selectedItems.add(itemId);
       });
     };
-    this.getCheckedItemsHandler = async () => {
-      // const checked = await this.tree.getCheckedItems();
+    this.handleExpandedItemChange = (event) => {
+      const detail = event.detail;
+      const itemInfo = this.flattenedTreeModel.get(detail.id).item;
+      itemInfo.expanded = detail.expanded;
+    };
+    this.handleItemsDropped = (event) => {
+      const dataTransferInfo = event.detail;
+      const newContainer = dataTransferInfo.newContainer;
+      const newParentId = newContainer.id;
+      // Check if the parent exists in the UI Model
+      if (!this.flattenedTreeModel.get(newParentId)) {
+        return;
+      }
+      const draggedItems = dataTransferInfo.draggedItems;
+      if (draggedItems.length === 0 || !this.dropItemsCallback) {
+        return;
+      }
+      const promise = this.dropItemsCallback(dataTransferInfo);
+      this.waitDropProcessing = true;
+      promise.then(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));
+        }
+        // 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;
+        // 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;
     };
-    // private deleteNodeHandler = () => {
-    //   this.treeItemsModel = [];
-    // };
-    this.renderSubModel = (treeSubModel) => (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, expanded: treeSubModel.expanded, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+    this.renderSubModel = (treeSubModel) => (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
       treeSubModel.items != null &&
       treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map(this.renderSubModel)))));
-    this.handleMultiSelectionChange = (event) => {
-      const checked = event.target.checked;
-      this.multiSelection = checked;
-    };
-    this.handleShowLinesChange = (event) => {
-      const checked = event.target.checked;
-      this.showLines = checked;
+    this.flattenItemUIModel = (parentModel) => (item) => {
+      var _a, _b, _c, _d;
+      this.flattenedTreeModel.set(item.id, {
+        parentItem: parentModel,
+        item: item
+      });
+      // Make sure the properties are with their default values to avoid issues
+      // when reusing DOM nodes
+      (_a = item.expanded) !== null && _a !== void 0 ? _a : (item.expanded = DEFAULT_EXPANDED_VALUE);
+      (_b = item.indeterminate) !== null && _b !== void 0 ? _b : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
+      (_c = item.lazy) !== null && _c !== void 0 ? _c : (item.lazy = DEFAULT_LAZY_VALUE);
+      (_d = item.selected) !== null && _d !== void 0 ? _d : (item.selected = DEFAULT_SELECTED_VALUE);
+      if (item.lazy) {
+        this.flattenedLazyTreeModel.set(item.id, item);
+      }
+      if (item.selected) {
+        this.selectedItems.add(item.id);
+      }
+      this.flattenSubModel(item);
     };
   }
   handleTreeModelChange() {
@@ -108,45 +176,65 @@ const ChTestTreeX = class {
     // expand the items, we have to delegate the responsibility to the tree-x
     this.treeRef.scrollIntoVisible(treeItemId);
   }
-  handleDrop(event) {
-    var _a;
-    const detail = event.detail;
-    const dropItemId = detail.dropItemId;
-    // Check if the parent exists in the UI Model
-    if (!this.flattenedTreeModel.get(dropItemId)) {
-      return;
+  /**
+   * 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 data = detail.dataTransfer.getData("text/plain");
-    const draggedIds = (_a = data === null || data === void 0 ? void 0 : data.split(",")) !== null && _a !== void 0 ? _a : [];
-    if (draggedIds.length === 0 || !this.dropItemsCallback) {
+    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;
+      }
+    });
+    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);
+    });
+    forceUpdate(this);
+  }
+  updateItemProperty(itemUIModel, properties) {
+    if (!itemUIModel) {
       return;
     }
-    const promise = this.dropItemsCallback(dropItemId, draggedIds);
-    this.waitDropProcessing = true;
-    promise.then(acceptDrop => {
-      this.waitDropProcessing = false;
-      if (!acceptDrop) {
-        return;
-      }
-      const newParentItem = this.flattenedTreeModel.get(dropItemId).item;
-      // Add the UI models to the new container and remove the UI models from
-      // the old containers
-      draggedIds.forEach(itemId => {
-        const itemUIModelExtended = this.flattenedTreeModel.get(itemId);
-        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
-        newParentItem.items.push(item);
-        // Reference the new parent in the item
-        itemUIModelExtended.parentItem = newParentItem;
-      });
-      this.sortItems(newParentItem.items);
-      // Open the item to visualize the new subitems
-      newParentItem.expanded = true;
-      // There is no need to force and update, since the waitDropProcessing
-      // prop was modified
+    const itemInfo = itemUIModel.item;
+    Object.keys(properties).forEach(propertyName => {
+      itemInfo[propertyName] = properties[propertyName];
     });
   }
   loadLazyChildrenHandler(event) {
@@ -216,25 +304,7 @@ const ChTestTreeX = class {
       return;
     }
     this.sortItems(items);
-    items.forEach(item => {
-      var _a, _b, _c;
-      this.flattenedTreeModel.set(item.id, {
-        parentItem: model,
-        item: item
-      });
-      // Make sure the properties are with their default values to avoid issues
-      // when reusing DOM nodes
-      (_a = item.expanded) !== null && _a !== void 0 ? _a : (item.expanded = DEFAULT_EXPANDED_VALUE);
-      (_b = item.lazy) !== null && _b !== void 0 ? _b : (item.lazy = DEFAULT_LAZY_VALUE);
-      (_c = item.selected) !== null && _c !== void 0 ? _c : (item.selected = DEFAULT_SELECTED_VALUE);
-      if (item.lazy) {
-        this.flattenedLazyTreeModel.set(item.id, item);
-      }
-      if (item.selected) {
-        this.selectedItems.add(item.id);
-      }
-      this.flattenSubModel(item);
-    });
+    items.forEach(this.flattenItemUIModel(model));
   }
   sortItems(items) {
     // Ensure that items are sorted
@@ -251,7 +321,7 @@ const ChTestTreeX = class {
     this.flattenModel();
   }
   render() {
-    return (h(Host, null, h("div", { class: "test-tree-x-scroll" }, h("ch-tree-x", { multiSelection: this.multiSelection, showLines: this.showLines, waitDropProcessing: this.waitDropProcessing, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel)))), h("div", { class: "tree-buttons" }, h("button", { type: "button", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("button", { type: "button", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("button", { type: "button", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("button", { type: "button", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("ch-checkbox", { caption: "Check / uncheck all" }), h("ch-checkbox", { checkedValue: "true", unCheckedValue: "false", value: this.multiSelection.toString(), caption: "Multi selection", onInput: this.handleMultiSelectionChange }), h("ch-checkbox", { checkedValue: "true", unCheckedValue: "false", value: this.showLines.toString(), caption: "Show lines", onInput: this.handleShowLinesChange }))));
+    return (h(Host, null, h("ch-tree-x", { multiSelection: this.multiSelection, showLines: this.showLines, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel))), h("div", { class: "tree-buttons" })));
   }
   static get watchers() { return {
     "treeModel": ["handleTreeModelChange"]