@genexus/genexus-ide-ui 0.0.57 → 0.0.59

package/dist/components/ch-grid2.js

@@ -1495,6 +1495,87 @@ class ChGridManagerRowActions {
   }
 }
 
+class ChGridManagerColumnResize {
+  constructor(manager, columnId, isRTL) {
+    var _a;
+    this.resizingSingle = (deltaWidth) => {
+      const columnWidth = this.columnWidthStart - deltaWidth * this.dragDirection;
+      if (columnWidth >= 0) {
+        this.column.size = `minmax(min-content, ${columnWidth}px)`;
+      }
+    };
+    this.resizingSplitter = (deltaWidth) => {
+      const columnWidth = this.columnWidthStart - deltaWidth * this.dragDirection;
+      if (columnWidth >= 0) {
+        if (this.columnSizeStart) {
+          this.column.size = this.convertUnit(this.columnSizeStart, this.columnWidthStart, columnWidth);
+        }
+        else {
+          this.column.size = `minmax(min-content, ${columnWidth}px)`;
+        }
+      }
+      if (this.columnAfter) {
+        const columnAfterWidth = this.columnAfterWidthStart + deltaWidth * this.dragDirection;
+        if (columnAfterWidth >= 0) {
+          if (this.columnAfterSizeStart) {
+            this.columnAfter.size = this.convertUnit(this.columnAfterSizeStart, this.columnAfterWidthStart, columnAfterWidth);
+          }
+          else {
+            this.columnAfter.size = `minmax(min-content, ${columnAfterWidth}px)`;
+          }
+        }
+      }
+    };
+    this.manager = manager;
+    this.dragDirection = isRTL ? -1 : 1;
+    if (this.manager.grid.columnResizeMode === "splitter") {
+      this.resizingFn = this.resizingSplitter;
+      this.resizeEndFn = this.resizeEndSplitter;
+    }
+    else {
+      this.resizingFn = this.resizingSingle;
+      this.resizeEndFn = null;
+    }
+    this.column = this.manager.columns.getColumn(columnId);
+    this.columnWidthStart = this.column.getBoundingClientRect().width;
+    this.columnSizeStart = this.parseCSSValue(this.column.size);
+    this.columnAfter = this.manager.getNextColumn(this.column);
+    this.columnAfterWidthStart =
+      (_a = this.columnAfter) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+    this.columnAfterSizeStart = this.parseCSSValue(this.columnAfter.size);
+  }
+  resizing(deltaWidth) {
+    this.resizingFn(deltaWidth);
+  }
+  resizeEnd() {
+    if (this.resizeEndFn) {
+      this.resizeEndFn();
+    }
+  }
+  resizeEndSplitter() {
+    const columnWidthEnd = this.column.getBoundingClientRect().width;
+    this.column.size = this.convertUnit(this.columnSizeStart, this.columnWidthStart, columnWidthEnd);
+    if (this.columnAfter) {
+      const columnAfterWidthEnd = this.columnAfterWidthStart - (columnWidthEnd - this.columnWidthStart);
+      this.columnAfter.size = this.convertUnit(this.columnSizeStart, this.columnWidthStart, columnAfterWidthEnd);
+    }
+  }
+  parseCSSValue(cssValue) {
+    const match = cssValue.match(/([+-]?[\d.]+)([\w%]+)/);
+    if (match) {
+      const number = parseFloat(match[1]);
+      const unit = match[2];
+      return { number, unit };
+    }
+    else {
+      return null;
+    }
+  }
+  convertUnit(startSize, startWidth, newWidth) {
+    return `${(newWidth * startSize.number) / startWidth}${startSize.unit}`;
+  }
+}
+
 var StyleRule;
 (function (StyleRule) {
   StyleRule[StyleRule["BASE_LAYER"] = 0] = "BASE_LAYER";
@@ -1568,30 +1649,32 @@ class ChGridManager {
     const rows = this.getRows();
     return rows.reverse().find(row => row.isVisible());
   }
-  getPreviousCell(current) {
-    const columnOrder = current.column.order;
-    const previousColumn = this.columns
-      .getColumns()
-      .reduce((previous, column) => {
-      return column.order < columnOrder &&
-        !column.hidden &&
-        (!previous || column.order > previous.order)
-        ? column
+  getPreviousColumn(column) {
+    return this.columns.getColumns().reduce((previous, current) => {
+      return current.order < column.order &&
+        !current.hidden &&
+        (!previous || current.order > previous.order)
+        ? current
         : previous;
     }, null);
+  }
+  getNextColumn(column) {
+    return this.columns.getColumns().reduce((previous, current) => {
+      return current.order > column.order &&
+        !current.hidden &&
+        (!previous || current.order < previous.order)
+        ? current
+        : previous;
+    }, null);
+  }
+  getPreviousCell(current) {
+    const previousColumn = this.getPreviousColumn(current.column);
     if (previousColumn) {
       return current.row.querySelector(`:scope > ch-grid-cell:nth-of-type(${previousColumn.physicalOrder})`);
     }
   }
   getNextCell(current) {
-    const columnOrder = current.column.order;
-    const nextColumn = this.columns.getColumns().reduce((previous, column) => {
-      return column.order > columnOrder &&
-        !column.hidden &&
-        (!previous || column.order < previous.order)
-        ? column
-        : previous;
-    }, null);
+    const nextColumn = this.getNextColumn(current.column);
     if (nextColumn) {
       return current.row.querySelector(`:scope > ch-grid-cell:nth-of-type(${nextColumn.physicalOrder})`);
     }
@@ -1673,6 +1756,16 @@ class ChGridManager {
     this.columnDragManager.dragEnd();
     this.columnDragManager = null;
   }
+  columnResizeStart(columnId) {
+    this.columnResizeManager = new ChGridManagerColumnResize(this, columnId, this.isRTLDirection());
+  }
+  columnResizing(deltaWidth) {
+    this.columnResizeManager.resizing(deltaWidth);
+  }
+  columnResizeEnd() {
+    this.columnResizeManager.resizeEnd();
+    this.columnResizeManager = null;
+  }
   rowDragStart(row) {
     this.rowDragManager = new ChGridManagerRowDrag(this);
     this.rowDragManager.dragStart(row);
@@ -1878,6 +1971,13 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
      * A boolean indicating whether the user can drag column headers to reorder columns.
      */
     this.allowColumnReorder = true;
+    /**
+     * One of "single" or "splitter", indicating the behavior of column resizing.
+     * "single", resize a single column at a time.
+     * "splitter", when adjusts the width of one column, the neighboring columns
+     *    are also resized proportionally, maintaining the overall width.
+     */
+    this.columnResizeMode = "single";
   }
   rowFocusedHandler(row, previous) {
     if (row) {
@@ -2154,6 +2254,15 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   columnFreezeChangedHandler() {
     this.manager.columns.adjustFreezeOrder();
   }
+  columnResizeStartedHandler(eventInfo) {
+    this.manager.columnResizeStart(eventInfo.detail.columnId);
+  }
+  columnResizingHandler(eventInfo) {
+    this.manager.columnResizing(eventInfo.detail.deltaWidth);
+  }
+  columnResizeFinishedHandler() {
+    this.manager.columnResizeEnd();
+  }
   columnDragStartHandler(eventInfo) {
     this.manager.columnDragStart(eventInfo.detail.columnId);
   }
@@ -2476,6 +2585,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "rowFocusedClass": [1, "row-focused-class"],
     "rowMarkedClass": [1, "row-marked-class"],
     "allowColumnReorder": [4, "allow-column-reorder"],
+    "columnResizeMode": [1, "column-resize-mode"],
     "localization": [16],
     "rowFocused": [32],
     "rowHighlighted": [32],
@@ -2501,7 +2611,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "getNextRow": [64],
     "getPreviousCell": [64],
     "getNextCell": [64]
-  }, [[1, "focus", "focusHandler"], [1, "blur", "blurHandler"], [1, "cellFocused", "cellFocusedHandler"], [8, "keydown", "windowKeyDownHandler"], [1, "keydown", "keyDownHandler"], [1, "mousemove", "mouseMoveHandler"], [1, "mouseleave", "mouseLeaveHandler"], [1, "mousedown", "clickHandler"], [1, "mouseup", "mouseUpHandler"], [1, "dblclick", "dblclickHandler"], [0, "contextmenu", "contextmenuHandler"], [1, "columnSelectorClicked", "columnSelectorClickedHandler"], [1, "cellSelectorClicked", "cellSelectorClickedHandler"], [1, "cellRowActionClicked", "cellRowActionClickedHandler"], [0, "columnHiddenChanged", "columnStyleChangedHandler"], [0, "columnOrderChanged", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnStyleChangedHandler"], [0, "columnSizeChanging", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnFreezeChangedHandler"], [0, "columnDragStarted", "columnDragStartHandler"], [0, "columnDragging", "columnDraggingHandler"], [0, "columnDragEnded", "columnDragEndHandler"], [0, "rowDragStarted", "rowDragStartHandler"], [0, "rowEnsureVisible", "rowEnsureVisibleHandler"], [0, "cellEnsureVisible", "cellEnsureVisibleHandler"], [0, "settingsShowClicked", "settingsShowClickedHandler"], [0, "settingsCloseClicked", "settingsCloseClickedHandler"]]]);
+  }, [[1, "focus", "focusHandler"], [1, "blur", "blurHandler"], [1, "cellFocused", "cellFocusedHandler"], [8, "keydown", "windowKeyDownHandler"], [1, "keydown", "keyDownHandler"], [1, "mousemove", "mouseMoveHandler"], [1, "mouseleave", "mouseLeaveHandler"], [1, "mousedown", "clickHandler"], [1, "mouseup", "mouseUpHandler"], [1, "dblclick", "dblclickHandler"], [0, "contextmenu", "contextmenuHandler"], [1, "columnSelectorClicked", "columnSelectorClickedHandler"], [1, "cellSelectorClicked", "cellSelectorClickedHandler"], [1, "cellRowActionClicked", "cellRowActionClickedHandler"], [0, "columnHiddenChanged", "columnStyleChangedHandler"], [0, "columnOrderChanged", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnStyleChangedHandler"], [0, "columnSizeChanging", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnFreezeChangedHandler"], [0, "columnResizeStarted", "columnResizeStartedHandler"], [0, "columnResizing", "columnResizingHandler"], [0, "columnResizeFinished", "columnResizeFinishedHandler"], [0, "columnDragStarted", "columnDragStartHandler"], [0, "columnDragging", "columnDraggingHandler"], [0, "columnDragEnded", "columnDragEndHandler"], [0, "rowDragStarted", "rowDragStartHandler"], [0, "rowEnsureVisible", "rowEnsureVisibleHandler"], [0, "cellEnsureVisible", "cellEnsureVisibleHandler"], [0, "settingsShowClicked", "settingsShowClickedHandler"], [0, "settingsCloseClicked", "settingsCloseClickedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ch-suggest2.js

@@ -199,7 +199,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   windowClosedHandler() {
     this.textInput.focus();
     this.windowHidden = true;
-    this.el.innerHTML = "";
+    this.slot.innerHTML = "";
   }
   // 9.PUBLIC METHODS API //
   /**
@@ -211,7 +211,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
+    return (h(Host, null, h("div", { class: "main-wrapper", part: "main-wrapper" }, h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n            header:header, \n            caption:title, \n            close:close-button,\n            window:dropdown" }, h("slot", { onSlotchange: this.evaluateSlotIsEmpty, ref: el => (this.slot = el) })))));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }

package/dist/components/ch-test-suggest.js

@@ -0,0 +1,119 @@
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './ch-suggest2.js';
+import { d as defineCustomElement$3 } from './ch-window2.js';
+import { d as defineCustomElement$2 } from './ch-window-close2.js';
+
+/**
+ * @description This function converts SelectorCategoryData[] SuggestData
+ */
+const convertObjectDataToSuggestData = (selectorCategoriesData) => {
+  const suggestData = {
+    suggestItems: null,
+    suggestLists: []
+  };
+  if (selectorCategoriesData.length) {
+    selectorCategoriesData.forEach(selectorCategory => {
+      const suggestList = {
+        label: selectorCategory.name,
+        items: []
+      };
+      selectorCategory.items.forEach((objectData) => {
+        const suggestItem = {
+          value: objectData.id,
+          description: objectData.description,
+          icon: objectData.icon
+        };
+        suggestList.items.push(suggestItem);
+      });
+      suggestData.suggestLists.push(suggestList);
+    });
+  }
+  return suggestData;
+};
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const renderSuggestLists = (suggestData) => {
+  if (suggestData === null || suggestData === void 0 ? void 0 : suggestData.suggestLists.length) {
+    const randomNumber = Math.random();
+    const result = suggestData.suggestLists.map((list) => {
+      return (h("ch-suggest-list", { label: list.label, key: randomNumber }, list.items.map((item) => {
+        return renderSuggestListsItem(item);
+      })));
+    });
+    return result;
+  }
+  return null;
+};
+const renderSuggestListsItem = (suggestItem) => {
+  return (h("ch-suggest-list-item", { value: suggestItem.value }, [suggestItem.description || suggestItem.value]));
+};
+
+const testSuggestCss = ":host{display:block}:root{--highlight-color:rgb(163, 25, 161)}ch-suggest{display:block}ch-suggest::part(title){display:block;font-weight:bold}ch-suggest::part(label){font-weight:500}ch-suggest[label-position=\"start\"]::part(label){margin-inline-end:8px;display:flex;align-items:center}ch-suggest[label-position=\"above\"]::part(label){margin-block-end:4px}ch-suggest::part(close-button){display:block;width:16px;height:16px}ch-suggest::part(close-button)::after{content:\"✖\";line-height:8px;height:100%;display:block;border:1px solid black;cursor:pointer;text-align:center;line-height:16px}ch-suggest::part(header){display:flex;justify-content:space-between;align-items:center;margin-block-end:8px}ch-suggest::part(ch-window-close){width:10px;height:10px}ch-suggest::part(input){padding:4px 8px;border:1px solid black}ch-suggest::part(input):focus{outline:2px solid var(--highlight-color);border-color:var(--highlight-color)}ch-suggest-list{background-color:rgba(234, 234, 234, 0.224);border:1px solid rgba(128, 128, 128, 0.275);border-radius:4px;padding:8px;margin-block-end:4px}ch-suggest-list::part(title){font-size:14px;font-weight:bold;text-transform:uppercase;margin:4px 0 8px 0}ch-suggest-list-item::part(button){padding:4px 8px;cursor:pointer;gap:4px}ch-suggest-list-item ch-icon{--icon-size:16px;margin-inline-end:2px}ch-suggest-list-item:hover{background-color:var(--ch-color--violet-100)}ch-suggest-list-item:focus,ch-suggest-list-item[selected]:focus{outline:2px solid var(--highlight-color)}ch-suggest-list-item[selected]{background-color:rgba(241, 184, 243, 0.42);outline:none}ch-suggest-list-item::part(button):focus{outline:2px solid var(--highlight-color);border-color:var(--highlight-color)}ch-suggest-list-item::part(content-wrapper){display:flex;gap:8px}ch-suggest::part(dropdown){margin-block-start:4px;border:1px solid black;background-color:white;padding:8px}:focus{outline-style:none !important}";
+
+const ChTestSuggest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    // 5.EVENTS (EMIT) //
+    // 6.COMPONENT LIFECYCLE EVENTS //
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
+     */
+    this.selectObjectValueChangedHandler = async (e) => {
+      const value = e.detail;
+      this.selectorSourceCallback(value)
+        .then(result => {
+        /* show suggestions*/
+        this.objectsSuggestions = convertObjectDataToSuggestData(result);
+      })
+        .catch(() => {
+        // to do
+      });
+    };
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("ch-suggest", { onValueChanged: this.selectObjectValueChangedHandler, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))));
+  }
+  static get style() { return testSuggestCss; }
+}, [1, "ch-test-suggest", {
+    "selectorSourceCallback": [16],
+    "objectsSuggestions": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-test-suggest", "ch-suggest", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-test-suggest":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTestSuggest$1);
+      }
+      break;
+    case "ch-suggest":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChTestSuggest = ChTestSuggest$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTestSuggest, defineCustomElement };

package/dist/components/ch-test-tree-x.js

@@ -1,7 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, forceUpdate, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './checkbox.js';
-import { d as defineCustomElement$4 } from './tree-x.js';
-import { d as defineCustomElement$3 } from './tree-x-list.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './checkbox.js';
+import { d as defineCustomElement$3 } from './tree-x.js';
 import { d as defineCustomElement$2 } from './tree-x-list-item.js';
 
 const testTreeXCss = "ch-test-tree-x{display:contents}";
@@ -9,37 +8,54 @@ const testTreeXCss = "ch-test-tree-x{display:contents}";
 const DEFAULT_DRAG_DISABLED_VALUE = false;
 const DEFAULT_DROP_DISABLED_VALUE = false;
 const DEFAULT_CLASS_VALUE = "tree-view-item";
+const DEFAULT_EDITABLE_ITEMS_VALUE = true;
 const DEFAULT_EXPANDED_VALUE = false;
 const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
+const DEFAULT_ORDER_VALUE = 0;
 const DEFAULT_SELECTED_VALUE = false;
 const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    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.flattenedLazyTreeModel = new Map();
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
      */
     this.waitDropProcessing = false;
+    /**
+     * Set this attribute if you want display a checkbox in all items by default.
+     */
+    this.checkbox = false;
+    /**
+     * Set this attribute if you want the checkbox to be checked in all items by
+     * default.
+     * Only works if `checkbox = true`
+     */
+    this.checked = false;
     /**
      * This attribute lets you specify if the drag operation is disabled in all
-     * items by default. If `true`, the control can't be dragged.
+     * 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 control won't accept any drops.
+     * items by default. If `true`, the items won't accept any drops.
      */
     this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
     /**
-     * This property lets you define the model of the ch-tree-x control.
+     * 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.treeModel = [];
+    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
     /**
      * Set this attribute if you want to allow multi selection of the items.
      */
@@ -49,6 +65,17 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * 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;
@@ -63,6 +90,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
     };
     this.handleSelectedItemsChange = (event) => {
+      event.stopPropagation();
       const itemsToProcess = new Map(event.detail);
       // Remove no longer selected items
       this.selectedItems.forEach(selectedItemId => {
@@ -86,12 +114,17 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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;
@@ -156,27 +189,32 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       itemUIModelExtended.parentItem = newParentUIModel;
     };
     this.renderSubModel = (treeSubModel, lastItem, level) => {
-      var _a, _b;
-      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+      var _a, _b, _c, _d, _e, _f;
+      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: (_a = treeSubModel.checkbox) !== null && _a !== void 0 ? _a : this.checkbox, checked: (_b = treeSubModel.checked) !== null && _b !== void 0 ? _b : this.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, downloading: treeSubModel.downloading, dragDisabled: (_c = treeSubModel.dragDisabled) !== null && _c !== void 0 ? _c : this.dragDisabled, dropDisabled: (_d = treeSubModel.dropDisabled) !== null && _d !== void 0 ? _d : this.dropDisabled, editable: (_e = treeSubModel.editable) !== null && _e !== void 0 ? _e : this.editableItems, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: (_f = treeSubModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : this.toggleCheckboxes }, !treeSubModel.leaf &&
         treeSubModel.items != null &&
-        treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))))));
+        treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))));
     };
     this.flattenItemUIModel = (parentModel) => (item) => {
-      var _a, _b, _c, _d;
+      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);
-      (_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);
-      }
+      (_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);
       }
@@ -191,9 +229,8 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * lazy state, updates the item's UI Model.
    */
   async loadLazyContent(itemId, items, downloading = false, lazy = false) {
-    const itemToLazyLoadContent = this.flattenedLazyTreeModel.get(itemId);
+    const itemToLazyLoadContent = this.flattenedTreeModel.get(itemId).item;
     // Establish that the content was lazy loaded
-    this.flattenedLazyTreeModel.delete(itemId);
     itemToLazyLoadContent.downloading = downloading;
     itemToLazyLoadContent.lazy = lazy;
     // Check if there is items to add
@@ -204,6 +241,8 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     itemToLazyLoadContent.items = items;
     this.sortItems(itemToLazyLoadContent.items);
     this.flattenSubModel(itemToLazyLoadContent);
+    // Re-sync checked items
+    this.emitCheckedItemsChange();
     // Force re-render
     forceUpdate(this);
   }
@@ -301,6 +340,21 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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();
+  }
   loadLazyChildrenHandler(event) {
     if (!this.lazyLoadTreeItemsCallback) {
       return;
@@ -344,11 +398,26 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     });
   }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
+  emitCheckedItemsChange() {
+    // New copy of the checked items
+    const allItemsWithCheckbox = new Map(this.flattenedCheckboxTreeModel);
+    // Update the checked value if not defined
+    allItemsWithCheckbox.forEach(itemUIModel => {
+      var _a;
+      var _b;
+      (_a = (_b = itemUIModel.item).checked) !== null && _a !== void 0 ? _a : (_b.checked = this.checked);
+    });
+    this.checkedItemsChange.emit(allItemsWithCheckbox);
+  }
   flattenSubModel(model) {
     const items = model.items;
     if (!items) {
       // Make sure that subtrees don't have an undefined array
-      if (model.leaf === false) {
+      if (model.leaf !== true) {
         model.items = [];
       }
       return;
@@ -364,31 +433,42 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   flattenModel() {
     this.flattenedTreeModel.clear();
-    this.flattenedLazyTreeModel.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();
   }
   componentWillLoad() {
     this.flattenModel();
   }
   render() {
-    return (h(Host, null, h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0)))));
+    return (h("ch-tree-x", { class: this.cssClass || null, multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemContextmenu: this.handleItemContextmenu, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, this.treeModel.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.length - 1, 0))));
   }
   static get watchers() { return {
     "treeModel": ["handleTreeModelChange"]
   }; }
   static get style() { return testTreeXCss; }
 }, [0, "ch-test-tree-x", {
+    "checkbox": [4],
+    "checked": [4],
     "checkDroppableZoneCallback": [16],
     "cssClass": [1, "css-class"],
     "dragDisabled": [4, "drag-disabled"],
     "dropDisabled": [4, "drop-disabled"],
     "dropItemsCallback": [16],
-    "treeModel": [16],
+    "editableItems": [4, "editable-items"],
     "lazyLoadTreeItemsCallback": [16],
     "modifyItemCaptionCallback": [16],
     "multiSelection": [4, "multi-selection"],
     "showLines": [1, "show-lines"],
     "sortItemsCallback": [16],
+    "toggleCheckboxes": [4, "toggle-checkboxes"],
+    "treeModel": [16],
     "waitDropProcessing": [32],
     "loadLazyContent": [64],
     "scrollIntoVisible": [64],
@@ -396,12 +476,12 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "updateAllItemsProperties": [64],
     "updateItemsProperties": [64],
     "updateValidDropZone": [64]
-  }, [[0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"]]]);
+  }, [[0, "checkboxChange", "updateCheckboxValue"], [0, "checkboxToggleChange", "updateCheckboxValue"], [0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"], [2, "openReference", "handleOpenReference"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ch-test-tree-x", "ch-checkbox", "ch-tree-x", "ch-tree-x-list", "ch-tree-x-list-item"];
+  const components = ["ch-test-tree-x", "ch-checkbox", "ch-tree-x", "ch-tree-x-list-item"];
   components.forEach(tagName => { switch (tagName) {
     case "ch-test-tree-x":
       if (!customElements.get(tagName)) {
@@ -409,16 +489,11 @@ function defineCustomElement$1() {
       }
       break;
     case "ch-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ch-tree-x":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "ch-tree-x-list":
+    case "ch-tree-x":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }