@genexus/genexus-ide-ui 0.0.19 → 0.0.21

package/dist/components/ch-grid2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as mouseEventModifierKey } from './helpers.js';
+import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
+import { m as mouseEventModifierKey, M as MouseEventButton, a as mouseEventHasButtonPressed, b as MouseEventButtons } from './helpers.js';
 import { d as defineCustomElement$4 } from './ch-grid-settings2.js';
 import { d as defineCustomElement$3 } from './ch-grid-settings-columns2.js';
 import { d as defineCustomElement$2 } from './ch-window2.js';
@@ -947,7 +948,7 @@ class ChGridManagerSelection {
     };
     this.manager = manager;
   }
-  select(state, row, cell, append, range) {
+  select(state, row, cell, append, range, context) {
     var _a;
     if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
@@ -996,10 +997,10 @@ class ChGridManagerSelection {
     else {
       this.rangeStart = row;
       this.rangeValue = true;
-      rowsSelected =
-        rowsSelected.length === 1 && rowsSelected[0] === row
-          ? rowsSelected
-          : [row];
+      if (!(rowsSelected.length === 1 && rowsSelected[0] === row) &&
+        !(context && rowsSelected.includes(row))) {
+        rowsSelected = [row];
+      }
       cellSelected =
         cell ||
           row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.manager.getFirstColumn());
@@ -1506,6 +1507,7 @@ class ChGridManager {
     this.styleSheet.insertRule(`:host {}`, StyleRule.BASE_LAYER);
     this.styleSheet.insertRule(".main {}", StyleRule.COLUMNS_WIDTH);
     this.grid.shadowRoot.adoptedStyleSheets.push(this.styleSheet);
+    this.grid.shadowRoot.adoptedStyleSheets.push(CH_GLOBAL_STYLESHEET);
     this.columns = new ChGridManagerColumns(this);
     this.selection = new ChGridManagerSelection(this);
     this.rowActions = new ChGridManagerRowActions(this);
@@ -1857,6 +1859,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.rowClicked = createEvent(this, "rowClicked", 7);
     this.rowDoubleClicked = createEvent(this, "rowDoubleClicked", 7);
     this.rowEnterPressed = createEvent(this, "rowEnterPressed", 7);
+    this.rowContextMenu = createEvent(this, "rowContextMenu", 7);
     this.rowsMarked = [];
     this.rowsSelected = [];
     /**
@@ -1903,7 +1906,18 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   }
   rowsMarkedHandler(rows, previous) {
     this.manager.selection.syncRowSelector(rows, previous, "mark");
-    this.rowMarkingChanged.emit({ rowsId: rows.map(row => row.rowId) });
+    this.rowMarkingChanged.emit({
+      rowsId: rows.map(row => row.rowId),
+      addedRowsId: rows
+        .filter(row => !previous.includes(row))
+        .map(row => row.rowId),
+      removedRowsId: previous
+        .filter(row => !rows.includes(row))
+        .map(row => row.rowId),
+      unalteredRowsId: rows
+        .filter(row => previous.includes(row))
+        .map(row => row.rowId)
+    });
   }
   rowsSelectedHandler(rows, previous) {
     if (previous) {
@@ -2037,7 +2051,9 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       if (row &&
         (this.manager.selection.selectingRow !== row ||
           this.manager.selection.selectingCell !== cell)) {
-        this.selectByPointerEvent(row, cell, mouseEventModifierKey(eventInfo), true);
+        const isKeyModifierPressed = mouseEventModifierKey(eventInfo);
+        const isMouseButtonRightPressed = mouseEventHasButtonPressed(eventInfo, MouseEventButtons.RIGHT);
+        this.selectByPointerEvent(row, cell, isKeyModifierPressed && !isMouseButtonRightPressed, !isMouseButtonRightPressed, isMouseButtonRightPressed);
         this.manager.selection.selectingRow = row;
         this.manager.selection.selectingCell = cell;
       }
@@ -2058,7 +2074,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
         columnId: cell === null || cell === void 0 ? void 0 : cell.column.columnId
       });
       this.manager.selection.selecting = true;
-      this.selectByPointerEvent(row, cell, mouseEventModifierKey(eventInfo), eventInfo.shiftKey);
+      this.selectByPointerEvent(row, cell, mouseEventModifierKey(eventInfo), eventInfo.shiftKey, eventInfo.button === MouseEventButton.RIGHT);
     }
   }
   mouseUpHandler() {
@@ -2077,6 +2093,32 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       });
     }
   }
+  contextmenuHandler(eventInfo) {
+    var _a, _b;
+    let targetRow;
+    if (eventInfo.target === this.el) {
+      targetRow = this.rowFocused;
+    }
+    else {
+      targetRow = this.manager.getRowEventTarget(eventInfo);
+    }
+    if (targetRow) {
+      const cellFocused = ((_a = this.cellSelected) === null || _a === void 0 ? void 0 : _a.row) === targetRow ? this.cellSelected : null;
+      const rowContextMenuEventInfo = this.rowContextMenu.emit({
+        rowId: targetRow.rowId,
+        cellId: cellFocused.cellId,
+        columnId: cellFocused.column.columnId,
+        selectedRowsId: this.rowsSelected.map(row => row.rowId),
+        clientX: eventInfo.clientX,
+        clientY: eventInfo.clientY
+      });
+      (_b = this.manager.rowActions.showOnRowContext) === null || _b === void 0 ? void 0 : _b.openRowContext(eventInfo.clientX, eventInfo.clientY);
+      if (rowContextMenuEventInfo.defaultPrevented ||
+        this.manager.rowActions.showOnRowContext) {
+        eventInfo.preventDefault();
+      }
+    }
+  }
   columnSelectorClickedHandler(eventInfo) {
     const columnSelector = this.manager.columns.getColumnSelector();
     if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "select") {
@@ -2089,7 +2131,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   cellSelectorClickedHandler(eventInfo) {
     const columnSelector = this.manager.columns.getColumnSelector();
     if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "select") {
-      this.selectByPointerEvent(this.manager.getRowEventTarget(eventInfo), this.manager.getCellEventTarget(eventInfo), true, eventInfo.detail.range);
+      this.selectByPointerEvent(this.manager.getRowEventTarget(eventInfo), this.manager.getCellEventTarget(eventInfo), true, eventInfo.detail.range, false);
     }
     else if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
       this.rowsMarked = this.manager.selection.markRow(this.manager.getRowEventTarget(eventInfo), eventInfo.detail.checked, eventInfo.detail.range, this.rowsMarked);
@@ -2333,12 +2375,12 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       }
     }
   }
-  selectByPointerEvent(row, cell, append, range) {
+  selectByPointerEvent(row, cell, append, range, context) {
     const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.select({
       rowFocused: this.rowFocused,
       rowsSelected: this.rowsSelected,
       cellSelected: this.cellSelected
-    }, row, cell, append, range);
+    }, row, cell, append, range, context);
     this.rowFocused = rowFocused;
     this.rowsSelected = rowsSelected;
     this.cellSelected = cellSelected;
@@ -2450,7 +2492,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"], [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, "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-style.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
+
+const chStyleCss = ":host{display:none}";
+
+const ChStyle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  componentDidLoad() {
+    if (this.href) {
+      fetch(this.href).then(response => {
+        if (response.ok) {
+          response.text().then(style => {
+            CH_GLOBAL_STYLESHEET.replace(style);
+            CH_GLOBAL_STYLESHEET.disabled = false;
+          });
+        }
+      });
+    }
+    else {
+      CH_GLOBAL_STYLESHEET.replace(this.el.innerText);
+      CH_GLOBAL_STYLESHEET.disabled = false;
+    }
+  }
+  get el() { return this; }
+  static get style() { return chStyleCss; }
+}, [1, "ch-style", {
+    "href": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-style"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-style":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChStyle$1);
+      }
+      break;
+  } });
+}
+
+const ChStyle = ChStyle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChStyle, defineCustomElement };

package/dist/components/ch-suggest-list-item2.js

@@ -18,6 +18,7 @@ const ChSuggestListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.handleClick = () => {
       this.itemSelected.emit({
         value: this.value || this.el.innerText,
+        caption: this.el.innerText,
         description: this.description
       });
     };

package/dist/components/ch-suggest2.js

@@ -11,7 +11,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.valueChanged = createEvent(this, "valueChanged", 7);
+    this.inputChanged = createEvent(this, "inputChanged", 7);
     this.keyEventsDictionary = {
       ArrowDown: (e) => {
         const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN);
@@ -34,7 +34,6 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     // 3.STATE() VARIABLES //
     this.windowHidden = true;
-    this.slotIsEmpty = true;
     // 4.PUBLIC PROPERTY API / WATCH'S //
     /**
      * The debounce amount in milliseconds (This is the time the suggest waits after the user has finished typing, to show the suggestions).
@@ -126,12 +125,12 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Every time the input event is triggered, the value of the input is sent to processInputEvent, which is responsible for displaying a window with the suggested options. this.debounce is a delay that, along with clearTimeout, ensures that the window is only shown after the user has stopped typing.
      */
     this.handleInput = (e) => {
-      this.value = e.target.value;
+      const inputValue = e.target.value;
       if (this.timeoutReference) {
         clearTimeout(this.timeoutReference);
       }
       this.timeoutReference = setTimeout(() => {
-        this.processInputEvent();
+        this.processInputEvent(inputValue);
       }, this.debounce);
     };
     this.handleKeyDown = (e) => {
@@ -156,9 +155,11 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       const partWindow = this.chWindow.shadowRoot.querySelector("[part='window']");
       partWindow.scrollTop = partWindow.scrollHeight;
     };
-    this.processInputEvent = () => {
+    this.processInputEvent = (inputValue) => {
+      this.inputChanged.emit(inputValue);
+      this.caption = inputValue;
+      this.value = undefined;
       this.evaluateWindowMaxHeight();
-      this.valueChanged.emit(this.value);
     };
     this.closeWindow = () => {
       this.chWindow.hidden = true;
@@ -173,6 +174,7 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // 7.LISTENERS //
   itemSelectedHandler(event) {
     this.value = event.detail.value;
+    this.caption = event.detail.caption;
     this.closeWindow();
   }
   focusChangeAttemptHandler(event) {
@@ -207,7 +209,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.caption, 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 })))));
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
@@ -218,11 +220,11 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "labelPosition": [513, "label-position"],
     "showLabel": [4, "show-label"],
     "value": [1025],
+    "caption": [1025],
     "showHeader": [4, "show-header"],
     "suggestTitle": [1, "suggest-title"],
     "cursorEnd": [4, "cursor-end"],
     "windowHidden": [32],
-    "slotIsEmpty": [32],
     "selectInputText": [64]
   }, [[0, "itemSelected", "itemSelectedHandler"], [0, "focusChangeAttempt", "focusChangeAttemptHandler"], [0, "windowClosed", "windowClosedHandler"]]]);
 function defineCustomElement() {

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

@@ -0,0 +1,313 @@
+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 { d as defineCustomElement$2 } from './tree-x-list-item.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 DEFAULT_EXPANDED_VALUE = false;
+const DEFAULT_LAZY_VALUE = false;
+const DEFAULT_SELECTED_VALUE = false;
+const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    // UI Models
+    this.flattenedTreeModel = 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;
+    /**
+     * This property lets you define the model of the ch-tree-x control.
+     */
+    this.treeModel = { items: [] };
+    /**
+     * Set this attribute if you want to allow multi selection of the items.
+     */
+    this.multiSelection = false;
+    /**
+     * Set this attribute if you want 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.handleSelectedItemsChange = (event) => {
+      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.getCheckedItemsHandler = async () => {
+      // const checked = await this.tree.getCheckedItems();
+    };
+    // 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 &&
+      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;
+    };
+  }
+  handleTreeModelChange() {
+    this.flattenModel();
+  }
+  /**
+   * 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);
+  }
+  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;
+    }
+    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) {
+      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
+    });
+  }
+  loadLazyChildrenHandler(event) {
+    event.stopPropagation();
+    const treeItemId = event.detail;
+    if (this.lazyLoadTreeItemsCallback) {
+      const promise = this.lazyLoadTreeItemsCallback(treeItemId);
+      const itemRef = event.target;
+      itemRef.downloading = true;
+      promise.then(result => {
+        const itemToLazyLoadContent = this.flattenedLazyTreeModel.get(treeItemId);
+        // Establish that the content was lazy loaded
+        this.flattenedLazyTreeModel.delete(treeItemId);
+        itemToLazyLoadContent.lazy = false;
+        itemRef.downloading = false;
+        // Check if there is items to add
+        if (result == null) {
+          return;
+        }
+        // @todo What happens in the server when dropping items on a lazy node?
+        itemToLazyLoadContent.items = result;
+        this.sortItems(itemToLazyLoadContent.items);
+        this.flattenSubModel(itemToLazyLoadContent);
+        // Force re-render
+        forceUpdate(this);
+      });
+    }
+  }
+  handleCaptionModification(event) {
+    event.stopPropagation();
+    if (!this.modifyItemCaptionCallback) {
+      return;
+    }
+    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);
+        // Force re-render
+        forceUpdate(this);
+      }
+      else {
+        itemRef.caption = oldCaption;
+        itemInfo.caption = oldCaption;
+        // Do something with the error message
+      }
+    });
+  }
+  flattenSubModel(model) {
+    const items = model.items;
+    if (!items) {
+      // Make sure that subtrees don't have an undefined array
+      if (model.leaf === false) {
+        model.items = [];
+      }
+      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);
+    });
+  }
+  sortItems(items) {
+    // Ensure that items are sorted
+    if (this.sortItemsCallback) {
+      this.sortItemsCallback(items);
+    }
+  }
+  flattenModel() {
+    this.flattenedTreeModel.clear();
+    this.flattenedLazyTreeModel.clear();
+    this.flattenSubModel(this.treeModel);
+  }
+  componentWillLoad() {
+    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 }))));
+  }
+  static get watchers() { return {
+    "treeModel": ["handleTreeModelChange"]
+  }; }
+  static get style() { return testTreeXCss; }
+}, [0, "ch-test-tree-x", {
+    "dropItemsCallback": [16],
+    "treeModel": [1040],
+    "lazyLoadTreeItemsCallback": [16],
+    "modifyItemCaptionCallback": [16],
+    "multiSelection": [1028, "multi-selection"],
+    "showLines": [1028, "show-lines"],
+    "sortItemsCallback": [16],
+    "waitDropProcessing": [32],
+    "scrollIntoVisible": [64]
+  }, [[0, "itemsDropped", "handleDrop"], [0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"]]]);
+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"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-test-tree-x":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTestTreeX$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":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-tree-x-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChTestTreeX = ChTestTreeX$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTestTreeX, defineCustomElement };

package/dist/components/ch-tree-x-list-item.js

@@ -0,0 +1,6 @@
+import { C as ChTreeXListItem$1, d as defineCustomElement$1 } from './tree-x-list-item.js';
+
+const ChTreeXListItem = ChTreeXListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeXListItem, defineCustomElement };

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

@@ -0,0 +1,6 @@
+import { C as ChTreeListX, d as defineCustomElement$1 } from './tree-x-list.js';
+
+const ChTreeXList = ChTreeListX;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeXList, defineCustomElement };

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

@@ -0,0 +1,6 @@
+import { C as ChTreeX$1, d as defineCustomElement$1 } from './tree-x.js';
+
+const ChTreeX = ChTreeX$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTreeX, defineCustomElement };