@genexus/genexus-ide-ui 0.0.30 → 0.0.32

package/dist/cjs/ch-action-group_2.cjs.entry.js

@@ -126,7 +126,7 @@ const ChActionGroup = class {
   }
   connectActionsContainerObserver() {
     this.actionsContainerWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
-    this.actionsContainerWatcher.observe(this.el);
+    this.actionsContainerWatcher.observe(this.actionsContainer);
   }
   disconnectActionsObserver() {
     if (this.actionsWatcher) {
@@ -173,15 +173,11 @@ const ChActionGroup = class {
 };
 ChActionGroup.style = actionGroupCss;
 
-const actionGroupItemCss = "ch-action-group-item[floating]{position:absolute;visibility:hidden}";
+const actionGroupItemCss = "ch-action-group-item[floating]{visibility:hidden}";
 
 const ChActionGroupItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * `true` to ignore the floating property value.
-     */
-    this.avoidFloating = false;
     /**
      * `true` if the control is floating. Useful to implement the
      * `"ResponsiveCollapse"` value for the `itemsOverflowBehavior` property of
@@ -190,9 +186,6 @@ const ChActionGroupItem = class {
     this.floating = false;
   }
   componentWillLoad() {
-    if (this.avoidFloating) {
-      return;
-    }
     const parentAction = this.el.closest("ch-action-group");
     // Hide items at the start to improve CLS
     if (parentAction) {

package/dist/cjs/ch-checkbox.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5a32426a.js');
 const reserverdNames = require('./reserverd-names-1b00889a.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, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;inset:calc(50% - min(0.25em, 5px));width:min(0.5em, 10px);height:min(0.5em, 10px);background-color:#000;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 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, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.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:#000;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" : ""}`;

package/dist/cjs/ch-dropdown-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a32426a.js');
 
-const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}:host([force-containing-block]){transform:translateX(0);--ch-window-relative-position:true}.action{display:flex;align-items:center;width:100%;height:100%;cursor:pointer;text-align:start}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}.dummy-wrapper{display:contents}";
+const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}:host([force-containing-block]){transform:translateX(0);--ch-window-relative-position:true}.action{display:flex;align-items:center;width:100%;height:100%;cursor:pointer;text-align:start}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}";
 
 const DROPDOWN_ITEM = "ch-dropdown-item";
 const ChDropDownItem = class {
@@ -35,17 +35,17 @@ const ChDropDownItem = class {
      */
     this.position = "Center_OutsideEnd";
     this.dropDownItemContent = () => [
-      !!this.leftImgSrc && (index.h("img", { "aria-hidden": "true", class: "left-img", part: "left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
-      index.h("span", { class: "content", part: "content" }, index.h("slot", null)),
-      !!this.rightImgSrc && (index.h("img", { "aria-hidden": "true", class: "right-img", part: "right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
+      !!this.leftImgSrc && (index.h("img", { slot: "action", "aria-hidden": "true", class: "left-img", part: "left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
+      index.h("span", { slot: "action", class: "content", part: "content" }, index.h("slot", null)),
+      !!this.rightImgSrc && (index.h("img", { slot: "action", "aria-hidden": "true", class: "right-img", part: "right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
     ];
     this.checkItems = () => {
-      this.hasItems = !!this.element.querySelector(`:scope>${DROPDOWN_ITEM}`);
+      this.hasItems = !!this.el.querySelector(`:scope>${DROPDOWN_ITEM}`);
     };
     this.noItemsRender = () => this.href ? (index.h("a", { class: "action", part: "action target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), index.h("slot", { name: "items", onSlotchange: this.checkItems }))) : (index.h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), index.h("slot", { name: "items", onSlotchange: this.checkItems })));
-    this.itemsRender = () => (index.h("ch-dropdown", { class: "action", exportparts: "expandable-button:action,expandable-button:button,expandable-button:expandable-action,separation,list,section,mask,header,footer,window", expandBehavior: this.expandBehavior, nestedDropdown: true, openOnFocus: this.openOnFocus, position: this.position }, index.h("div", { class: "dummy-wrapper", slot: "action" }, this.dropDownItemContent()), index.h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
+    this.itemsRender = () => (index.h("ch-dropdown", { class: "action", exportparts: "expandable-button:action,expandable-button:button,expandable-button:expandable-action,separation,list,section,mask,header,footer,window", expandBehavior: this.expandBehavior, nestedDropdown: true, openOnFocus: this.openOnFocus, position: this.position }, this.dropDownItemContent(), index.h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
     this.handleActionClick = () => {
-      this.actionClick.emit(this.element.id);
+      this.actionClick.emit(this.el.id);
     };
     this.handleFocus = () => {
       this.focusChange.emit();
@@ -63,7 +63,7 @@ const ChDropDownItem = class {
   render() {
     return (index.h(index.Host, { role: "listitem" }, this.hasItems ? this.itemsRender() : this.noItemsRender()));
   }
-  get element() { return index.getElement(this); }
+  get el() { return index.getElement(this); }
 };
 ChDropDownItem.style = dropdownItemCss;
 

package/dist/cjs/ch-dropdown.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a32426a.js');
 
-const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{transition:box-shadow 250ms}::slotted([slot=action]){pointer-events:none}.separation{display:flex;position:absolute;z-index:107}.separation--y{width:100%;height:var(--separation-y)}.separation--y-outside-start{inset-block-start:calc(var(--separation-y) * -1)}.separation--y-outside-start+ch-window{--ch-window-offset-y:calc(var(--separation-y) * -1)}.separation--y-outside-end{inset-block-end:calc(var(--separation-y) * -1)}.separation--y-outside-end+ch-window{--ch-window-offset-y:var(--separation-y)}.separation--x{width:var(--separation-x);height:100%}.separation--x-outside-start{inset-inline-start:calc(var(--separation-x) * -1)}.separation--x-outside-start+ch-window{--ch-window-offset-x:calc(var(--separation-x) * -1)}.separation--x-outside-end{inset-inline-end:calc(var(--separation-x) * -1)}.separation--x-outside-end+ch-window{--ch-window-offset-x:var(--separation-x)}.list{display:flex;flex-direction:column}";
+const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{transition:box-shadow 250ms}::slotted([slot=action]){pointer-events:none}ch-window[y-align=outside-start]{--ch-window-separation:var(--separation-y);--ch-window-separation-y:calc(var(--separation-y) * -1)}ch-window[y-align=outside-end]{--ch-window-separation:var(--separation-y);--ch-window-separation-y:var(--separation-y)}ch-window[x-align=outside-start]{--ch-window-separation:var(--separation-x);--ch-window-separation-x:calc(var(--separation-x) * -1)}ch-window[x-align=outside-end]{--ch-window-separation:var(--separation-x);--ch-window-separation-x:var(--separation-x)}.list{display:flex;flex-direction:column}";
 
 const mapDropdownAlignToChWindowAlign = {
   OutsideStart: "outside-start",
@@ -55,6 +55,7 @@ const ChDropDown = class {
     };
     this.showHeader = false;
     this.showFooter = false;
+    this.firstExpanded = false;
     this.expanded = false;
     this.expandedWithHover = false;
     /**
@@ -236,22 +237,22 @@ const ChDropDown = class {
     const aligns = this.position.split("_");
     const alignX = aligns[0];
     const alignY = aligns[1];
-    const hasVerticalPosition = alignY === "OutsideStart" || alignY === "OutsideEnd";
     const xAlignMapping = mapDropdownAlignToChWindowAlign[alignX];
     const yAlignMapping = mapDropdownAlignToChWindowAlign[alignY];
     const isExpanded = this.expanded || this.expandedWithHover;
+    this.firstExpanded || (this.firstExpanded = isExpanded);
     return (index.h(index.Host, { onMouseLeave: this.expandBehavior === "ClickOrHover"
         ? this.handleMouseLeave
         : undefined }, index.h("button", { id: EXPANDABLE_BUTTON_ID, "aria-controls": SECTION_ID, "aria-expanded": this.expanded.toString(), "aria-haspopup": "true", "aria-label": this.buttonLabel, class: "expandable-button", part: "expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "ClickOrHover"
         ? this.handleMouseEnter
-        : undefined, ref: el => (this.expandableButton = el) }, index.h("slot", { name: "action" })), this.expandBehavior === "ClickOrHover" && (
-    // Necessary since the separation between the button and the section
-    // triggers the onMouseLeave event
-    index.h("div", { "aria-hidden": "true", class: {
-        separation: true,
-        [`separation--y separation--y-${yAlignMapping}`]: hasVerticalPosition,
-        [`separation--x separation--x-${xAlignMapping}`]: !hasVerticalPosition
-      }, part: "separation" })), index.h("ch-window", { part: "window", exportparts: "window:section,mask,header,footer", container: this.el, closeOnEscape: true, hidden: !isExpanded, modal: false, showFooter: this.showFooter, showHeader: this.showHeader, xAlign: xAlignMapping, yAlign: yAlignMapping }, this.showHeader && index.h("slot", { name: "header", slot: "header" }), index.h("div", { role: "list", class: "list", part: "list" }, index.h("slot", { name: "items" })), this.showFooter && index.h("slot", { name: "footer", slot: "footer" }))));
+        : undefined, ref: el => (this.expandableButton = el) }, index.h("slot", { name: "action" })), index.h("ch-window", { part: "window", exportparts: "window:section,mask,header,footer,separation", container: this.expandableButton, closeOnEscape: true, hidden: !isExpanded, modal: false, showFooter: this.showFooter, showHeader: this.showHeader, showMain: false,
+      // Necessary since the separation between the button and the section
+      // triggers the onMouseLeave event
+      showSeparation: this.expandBehavior === "ClickOrHover", xAlign: xAlignMapping, yAlign: yAlignMapping }, this.firstExpanded && [
+      this.showHeader && index.h("slot", { name: "header", slot: "header" }),
+      index.h("div", { role: "list", class: "list", part: "list" }, index.h("slot", { name: "items" })),
+      this.showFooter && index.h("slot", { name: "footer", slot: "footer" })
+    ])));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/ch-suggest_4.cjs.entry.js

@@ -129,6 +129,7 @@ const ChSuggest = class {
      */
     this.handleInput = (e) => {
       const inputValue = e.target.value;
+      this.caption = inputValue;
       if (this.timeoutReference) {
         clearTimeout(this.timeoutReference);
       }

package/dist/cjs/ch-test-action-group.cjs.entry.js

@@ -55,7 +55,7 @@ const ChTestActionGroup = class {
       (this.displayedItemsCount === -1 || index$1 < this.displayedItemsCount) &&
       item.items != null &&
       item.items.map(this.renderItem)));
-    this.firstLevelRenderCollapsedItem = (item) => (index.h("ch-dropdown-item", { id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
+    this.firstLevelRenderCollapsedItem = (item) => (index.h("ch-dropdown-item", { slot: "more-items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
     this.handleDisplayedItemsCountChange = (event) => {
       this.displayedItemsCount = event.detail;
     };
@@ -71,7 +71,7 @@ const ChTestActionGroup = class {
       this.itemsModel
         .filter((_, index) => this.displayedItemsCount !== -1 &&
         index >= this.displayedItemsCount)
-        .map(item => (index.h("ch-action-group-item", { slot: "more-items", avoidFloating: true }, this.firstLevelRenderCollapsedItem(item)))))));
+        .map(this.firstLevelRenderCollapsedItem))));
   }
 };
 ChTestActionGroup.style = testActionGroupCss;

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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a32426a.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 {
@@ -30,18 +31,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);
@@ -68,22 +71,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) => (index.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) => (index.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 && (index.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() {
@@ -112,45 +180,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
+    index.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;
+      }
+    });
+    index.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);
+    });
+    index.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) {
@@ -220,25 +308,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
@@ -255,7 +325,7 @@ const ChTestTreeX = class {
     this.flattenModel();
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "test-tree-x-scroll" }, index.h("ch-tree-x", { multiSelection: this.multiSelection, showLines: this.showLines, waitDropProcessing: this.waitDropProcessing, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, index.h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel)))), index.h("div", { class: "tree-buttons" }, index.h("button", { type: "button", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), index.h("button", { type: "button", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), index.h("button", { type: "button", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), index.h("button", { type: "button", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), index.h("ch-checkbox", { caption: "Check / uncheck all" }), index.h("ch-checkbox", { checkedValue: "true", unCheckedValue: "false", value: this.multiSelection.toString(), caption: "Multi selection", onInput: this.handleMultiSelectionChange }), index.h("ch-checkbox", { checkedValue: "true", unCheckedValue: "false", value: this.showLines.toString(), caption: "Show lines", onInput: this.handleShowLinesChange }))));
+    return (index.h(index.Host, null, index.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) }, index.h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel))), index.h("div", { class: "tree-buttons" })));
   }
   static get watchers() { return {
     "treeModel": ["handleTreeModelChange"]